Intro to tiling

Hi again.

Today I'm going to talk about the basics of tiling. Tiling is using small images to make a larger image. Just take a look at the Zelda games. The map is made up of tiles, it is not just one very large image. Many platform games use tiles too. You use tiles to make up the different blocks.

So, how does tiling work? In a nutshell, you define a map, usually using a 2D array of integers that represent each tile. Then you iterate through this array and draw the tiles at the appropriate position on the screen. For this example I'm assuming all of the tiles will fit on the screen. I will get into scrolling the map at a later date.

Here is a small map:

1 1 1 1 4 1 1 1
1 1 1 1 4 1 1 1
1 1 1 1 4 4 4 4
1 1 1 1 4 1 1 1
1 1 1 1 4 1 1 1

Now, think of the 1s as a grass tile and 4s are a road tile. To iterate through the array you would use nested for loops.

for (int x = 0; x < tileMapWidth; x++)
    for (int y = 0; y < tileMapHeight; y++)
        DrawTile

But where do you draw the tile? Well, you would draw the tile at (x * tileWidth, y * tileHeight). If you just used (x, y) you would only be moving over one pixel at a time. By multiply x by the width of the tile and y by the height of the tile you would go to the right coordinate of the screen. I will try and post a sample project soon.

-----------------------------
Proud member of Dream.In.Code