Jump to content
  • Advertisement
Sign in to follow this  

Building topdown view maps

This topic is 4312 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!