Level Representation in a 2D Game

I would like to create a 2D game, where a character should move on a stage/level. My stage would be static, constructed some little cubes, similar to the well-known Mario game: some of the elements should represent an element of the way where the character can step, but if the element is missing, the character should fall.

My problem is, how to represent this programmatically? My first thought was to represent the stage with a vector, which should contain boolean elements, depending on the state of the element on the stage - if it's missing or not. But this means, I have to verify at my character's x or y position change if it has a stage element under or not (if not, to simulate the falling of the character) - I think it is not the best practice, it's not the beautiful solution.

Can you help me with some advice, how to represent the stage?

• Your proposed solution is fine. A single check as the character's feet leave one tile's space to another should not prove problematic. Don't forget that the tiles and the character have size. Mario falls when all of his pixels are off a ledge. Not when the first pixel of his feet are hanging over a ledge. – DampeS8N Jun 27 '13 at 16:45
• The ways to represent a level programmatically are numerous. From grids to freely placed objects to images to text files. Here are some questions that might be useful in your research: gamedev.stackexchange.com/questions/3107/… gamedev.stackexchange.com/questions/48436/… gamedev.stackexchange.com/questions/16306/… Searching for "2d level data structure" on the site will yeild more. – MichaelHouse Jun 27 '13 at 16:48
• For ex. my stage is 500 px width, my character has 5 px, and my tiles 10 px. Should I have another representation, which is not depending on the width of the stage, character, tiles, just the number of the tiles (if exists or not) and the character at the position of the array? – MMMM Jun 27 '13 at 16:49
• OK, so it's a tile based level. Perhaps you'd like to join us in chat to discuss it further? We can try to narrow down your question and clear up some of the details. – MichaelHouse Jun 27 '13 at 16:53
• Thank you Byte56, you are very nice. I am going to join you in chat, ASAP, but right now unfortunately I cannot. Hopefully after my work I can :) – MMMM Jun 27 '13 at 17:06

The vector of booleans may work. And I think check the tile below the player character every frame is perfectly valid solution until you get to a point in your project where that does not work any more. For most games that may never happen.

A more evolved version is what I'm doing in my latest HTML5 canvas experiment to find the right collision method to use in a game I want to create.

My levels are also in tiles of same size and always aligned, only character and enemies may not be tile aligned.

I represent the level as a string constant, soon functionality to load from text file will be added. For example:

// First line
var level =  "         x                x                 ";

// Then we check the width of the level by checking numbers of characters
var level_width = level.lenght;

// Then we add the next of the level. Note we are adding more characters not replacing.
var level += "   aaaa        aaaaaaaaa aaaa          aaaaa" +
"          aaaaaaaaaaaaaa aaaa          aaaaa" +
"          aaaaaaaaaaaaaa aaaa          aaaaa" +
"                                            " +
" bbbbbbbbbb            bbbbbbb     bbbbbbbb ";

// Now we calculate the height of the level
var level_height = level.length / level_width;


I have to calculate the level rectangle because I'm using a raw format to represent the level but you can use end of line characters (\n) to know where a line ends and avoid these calculations.

Meaning of characters:

x: enemies. Starts tile aligned, due to restriction of level format, but can move to any pixel latter during game.

a: tile type 1. Actually blue boxes.

b: tile type 2. Actually green boxes.

Both a and b don't allow the player sprite to pass.

Certain type of tiles are passable and certain ones are not. Your engine must know what ones are passable.

The idea begin this is not to code a level editor if formats to represent level already exists.

You have a set of options actually. If your map is of preset size, you could simply have a 2-dimensional array of tiles. Depending on the programming language they could be booleans, structs, classes and so on depending on what kind of properties you want them to have.

The good thing about a 2-d array is that you can easily round the coordinates of the players to get tile coordinates. For example:

var plrTileXstart = player.X / TileWidth;
var plrTileXend   = (player.X + player.Width) / TileWidth;

var plrTileYend   = (player.Y + player.Height) / TileHeight;

if(map[plrTileXstart, plrTileYend] || map[plrTileXend, plrTileYend])
// There was a collision - Adjust player Y coordinate to be on surface
player.Y = plrTileYend * TileHeight - player.Height;


The tiles could be something like

class Tile {
int X;
int Y;
Color color;
...
}