Sign in to follow this  

Building topdown view maps

Recommended Posts

Hello, I hope this is the right place to ask my question. At the moment me and my son both are trying to get into game programming for fun. We've decided to build 2D topdown view car drifting game. So far we have racing track made in photoshop as a simple jpg image and a car sprite. Everything works ok, you can drive car around etc.. My question is - what is the best way to build track data so if car say goes off the track and goes on grass we can slow it down for example.. Do I need to build some tool where I can load jpg image and somehow mark different ares with different colors and later scan adjusted image and save it into 2-dimensional array? For e.g 0 would be grass, 1 track, 2 some object etc.. So each frame we can check if we are on track or on grass and adjust speed accordingly. Also, maybe there is such tools already? Thanks for any help.

Share this post

Link to post
Share on other sites
If you already have the car driving around on the track, my simple suggestion would be to poll the background image itself for the colour of the pixel the car is currently on. I don't know what language you are programming your game in, but if you managed to load in an image, there is a good chance that querying the colour of a pixel of that image given a point is also available.

A slight improvement of this would be (as you yourself suggested) to use a mask, e.a. a silhouet of the original track with different colour keys for different material types/friction levels. This could be a simple as loading in a second image with the same dimensions as the track itself, and querying that one instead of the original. But, a more scalable and less expensive method would be to use an image format that encodes alpha information (i.e. TGA or PNG or DDS). You could then query the alpha value of a pixel and use that directly as a measure for friction.

Say you have an image with a track and an extra alpha channel (if you really don't know what alpha means in terms of image manipulation, look around a bit, there's tons of information on this and "blending"). The alpha channel can be as simple as a black-and-white image where black means off-road and white means the road itself. If your car happens to be riding "on black", you could slow it down with a constant factor.

In some pseudo-language this could be:

// query current position of car on track (p should lie within the dimensions of the background image
Point p = Car.Position;
// query the colour of the pixel at p (for example, this gives us Green for grass)
Colour c = TrackImage.GetColourAt( p );
// act accordingly
switch( c )
case Colour.Green:
// a simple speed multiplier
Car.Friction = 0.6;
case Colour.Grey:
// reset car friction
Car.Friction = 1.0;

EDIT: you have photoshop, so adding an alpha mask should be as easy as adding an extra opacity layer to your track image.

Share this post

Link to post
Share on other sites
thanks a lot todo!

Checking near pixel color or alpha information for collision is such a good idea!

My son is learning to program in Phrogram language ( ex KPL - kids programming language ), somewhat similar to C#, but has library built specifically for 2D and 3D game programming.

I use C# and learning XNA stuff.

The jpg image of track we've used was just to start somehow. I'm actually thinking of making a track editor for this game in C#, where we will be able to create track from separate png images, something like lego etc.

So in game we can load these images as sprites and phrogram language already has sprite collision detection. Also, I'm thinking using your idea about alpha information, so anything on map that is not a track - e.g grass, I can check in game per pixel.

Thanks a lot again!

Share this post

Link to post
Share on other sites
Going with that alpha idea...

What if the track and the dirt where seperate images? -- or really layers of the same "image".

The image displayed to the user would be the composit of:


To find the friction of each wheel you'd test against each layer of the image one at a time.

The order of the layers would be up to the track designer -- they could have dirt over a track, a cliff "fall off to your death" layer, gravel road layers, etc.

The level builder could have pre-built "tiles" which are a known type of terrain. It would display the resulting track -- and how it looked would be how it drove (assuming your tiles aren't crazy).

As a side effect, the above strategy doesn't tie your game to a particular "look" of road. The _type of the layer_ determines what the friction characteristics of each opaque pixel are, not the look of the layer.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this