2D maps, how to structure?

Question

I'm new to this. And I don't really understand 2D tile maps.

The tutorials I've read use arrays, but doesn't this get really difficult to manage when they get big?

And what if I want different floors, like going up/down stairs, do I need an array for every "level" of the game world?

Could anyone explain tile based maps as simple as possible please? If you include code, please make it Javascript or pseudo code since it's all i know.

Answer 1

2D tile maps are exactly how they sound, imagine something like this:

1,1,1,1,1
1,0,0,0,1
1,0,2,0,1
1,0,0,0,1
1,1,0,1,1

This the design of our map and if we take

0 = floor
1 = wall
2 = chest

Then you can see that our map is a room with an entrance and a chest in the middle of the room our data structure for this could be like @georgeK said an Array of arrays ie.

var map =[ [1,1,1,1,1],
           [1,0,0,0,1],
           [1,0,2,0,1],
           [1,0,0,0,1],
           [1,1,0,1,1]];

We would then load each of our tiles into a look up just the once and draw our room by putting that tile in place of the number on the grid.

for row in map
   for each cell in row
      draw tile offset by the x, y position in the array multiplied by tile width.
   end inner loop
end outer loop

Now you may not wish to draw this to the canvas directly and instead draw to a off DOM canvas and then transfer the entire image at once.

As a side note a 2d map based in html 5 has been done by google as proof of concept for a multiplayer game which could give you a few ideas on optimization. video here

Hope this helps

Answer 2

Many games do use an array of arrays to represent a level.

It's possible that you could have poor performance with massive or infinite maps of open worlds if the entire map is in memory; a solution for that is to keep only some portion of the map in memory and load/unload map portions as the player(s) move around. If you're just beginning to write small 2D games you don't need to worry about this problem right now.

Usually you represent different levels with different array-of-arrays.

Answer 3

Other answers are quite fine, I just want to suggest that you transfer the actual maps via JSON, the Javascript object notation format, that lets you turn objects into strings. You can have a level editor that produces a JSON string, and then you can trasfer it that way, instead of using the hardcoded array literal notation.

Also, levels are, yes, just maps ontop of maps. The maps are actually represented as matrices, so you would use arrays of matrices, or an object where properties correspond with the name of the level and contain matrices.

I also suggest that you look into client-side databases. They allow you to store your level on your victims hard-drive and then you can load them into memory.