Contents  Introduction  What the Heck  is a Tile?  Drawing the Tiles  Conclusion  Printable version     The Series  Part 1  Part 2

What the Heck is a Tile?

A tile is a small bitmap that is bit-block-transferred, or "blitted" to a surface along with other tiles of similar or different appearances to form a representation of your game world. "Tiling" saves lots of memory by creating virtual bitmaps, as opposed to using a single bitmap for your game. Nowadays, the common tile size is 32*32 or 16*16 pixels, with maps ranging from a few tiles to a few hundred tiles.

During game initialization or setup, maps are loaded from ASCII text files in a format quite like this, where "1" stands for one particular tile, "2" stands for another, and so on.

Maps can also be declared within the code as char arrays, but it is not really preferred. In the tutorial, I’ll be using this format even though I strongly suggest using file i/o to load maps from separate files.

Many programmers like to represent their tiled worlds with a tile class or struct, which may include flags for various "walkable" properties (solid vs. non-solid for example), extra items to be placed on specific tiles, animated tiles, and multiple tile layers, to name a few. But for our uses, putting the tiles on the screen, a tile class would be over-doing it a little.

We’ll define our tile world like this, a 12 * 12 tile map in a 2D char array.

char map[12][12] = {
   {2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
   {2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2}};

In this format, we can access any tile by map[y_tile][x_tile]. In this example, a tile defined as "2" is a wall, or a solid tile that the game characters cannot cross over. A tile with an ID# of "1" is a walkable area. We can redefine a tile’s ID# by doing map[y_tile][x_tile] = new_id;

Next, we have to create a bitmap that will store each tile’s graphic. You can either create your own tiles, OR you can steal them from your favorite RPG : ) Set it up something like this.

Note: In the tile drawing function, the RECT’s are set up so that this format will work. If you would prefer to set up your tiles in the bitmap differently, set up the RECT’s accordingly.

Next : Drawing the Tiles