Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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.

share|improve this question

3 Answers 3

up vote 5 down vote accepted

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

share|improve this answer
    
+1 so very useful, thanks –  MimiEAM Mar 21 '13 at 11:19

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.

share|improve this answer
    
Yeah I know about json, and I've been intending to learn it, but haven't gotten around to it yet, I like the saving straight from editor part. Adding 1's 0's and other stuff manually gets confusing after a while. Can the strings be stored and fetched with PHP? –  hustlerinc Jul 16 '12 at 23:48

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.