So why should we split up our graphics into small tiles? There's 2 quite good reasons I want to mention here: You can save memory and a lot of work. Imagine a top-down view racing game where your race-track is just straight. You could make a 800x20,000 picture for the track and move it downwards. In 24-bit true color the map file would be around 45 MB. Bad idea? Yes, I think so. Instead you could use some 32x32 tiles and create a map where each point of the map stands for one of these tiles. The map would be 25x625 in size which is around 120 KB. Not only that you save up 99.7% of memory in this case, it's much easier to put some different tiles here and there to generate the track!
Now how do we get tiles and a map working together? I already mentioned the tile set which holds our tiles (you can think of tiles just being pictures for the moment), well in fact it's nothing more than a list of tiles. Each tile can be accessed by a index, for example 1 may be grass, 2 water, 3 a sand floor, 4 a combination of water and sand. The first tile (index 0) will be treated as invisible, meaning there's no tile at all. Now that we have the index it's quite easy to build a map, just put the index number where you want to set the belonging tile. See the following illustrations:
| Tile set | Level map | Playfield | Debug |
|
|
|
|
|
See how it works together? The tile set holds the tiles and indices, the second table shows the level map. Now see the result (playfield), you'll notice the graphics are matching the map with their corresponding index from the tile set. If you can't find a connection check out the debug table at the right which combines both, index and tile.
So we just created a 64x64 pixel playfield out of five 16x16 tiles and a 4x4 level map. You could create huge maps out of these 5 tiles (but it's probably a little boring to repeat them over and over again).