Tiles and You!

So maybe you have or have not heard about tiles within the context of video games. For those of you who have, great, tread onwards into the more advanced areas of the article. But to those of you who have not, take some time to let the information below soak in. I strongly suggest that you spend time implementing and testing some solutions of your own in throwaway projects just to see the results in real time and for yourself. Many people are hands on learners and doing a lot of the experimentation yourself goes a long way to understanding the concepts.

I plan to make a few articles about various topics in tiles, tile maps, rendering, and interacting. Part 1 will focus on the concepts behind two popular formats of tile maps and rendering techniques. Part 2 will delve more deeply into rendering isometric tile maps with an explanation of the differences between world space and screen space. Finally, in Part 3, I will discuss topics such as isometric tile picking and moving entities within an isometric tile space.

Before all that though, let’s begin with the basics, shall we?

Cartesian Tile Maps

Maps are often stored and displayed in equally sized tiles to make life easier on the renderer and the artists. It is usually easier to begin understanding a tile map in an oblique projection, which is one of the simplest (but very effective) forms of projecting your tiles. Many popular games from the 80s, 90s, and even 00s take advantage of this projection due to its relatively simple mathematics. For example, in the Legend of Zelda on SNES, tiles were utilized to create structured maps with the ability to quickly re-use art assets and build customizable terrains. Notice how the bushes, rocks, fence posts, and walls can be evenly split into tiles of equal sizes? Can you see how this tile map could easily be stored in a data structure such as an array?

Imagine storing a tile map in a two dimensional (or even one dimensional with some cleverness) array. Each cell of the tile map represents one index into the array with the origin most commonly being [0, 0]. Since each tile has a specific width and height (usually equal, but does not have to be), it is quite simple to render this map by simply using multiplication.

int tilePositionX = tileIndexX * tileWidth;
int tilePositionY = tileIndexY * tileHeight;
draw(texture, tilePositionX, tilePositionY);

Example:
Tile at [2,1] with width 32 and height 32
tilePositionX = 2 * 32 = 64
tilePositionY = 1 * 32 = 32
tilePosition = (32, 64)

You can think of this as simply drawing your array to the screen with a specific texture based on the position. It is important to note that the calculated coordinates refer to the default origin of each tile which is the upper left corner. So, when you render your tile, it will be drawn with the upper left corner of the texture at the calculated position.… Read more