This is the first real article with technical content.

The reason I am writing it, is that apparently there are many people out there who are writing games using 2D tilemaps for the background, but unfortunately are using totally inefficient methods.

When I explained what I did on the #sfml support channel there was apparently a number of light bulbs appearing over people's head. So I thought it would be worth sharing what I did.

What is a tilemap exactly?

Let's start by the beginning.

A tilemap is exactly that: A map that is drawn using tiles, tiles being some square picture. An example of tilemap in the real world would be ceramic tiles on the floor of a kitchen.

Typically tilemaps have been used in many old games like the old Zelda, Sim City or Final Fantasy games to represent the game world, with grass, roads, forests, represented with small 16x16 images.

Tilemaps don't have to be drawn in 2D. Many modern games are using tilemaps to represent the ground of the world using geometry to provided altitude.

A BASIC example

Imagine you want to make a simple Tower Defence game using a tilemap for the background. We will need some textures, for example some futuristic space station with stars, metal ground plates, and some walls.

Let's start by creating a small 16x16 "star field" texture: We can use this small texture to create a larger one by repeating it on the horizontal and vertical axis, giving us a basic tilemap:


This is not very pretty, but keep it mind that this is just an example. Just imagine this is the deep-dark blue of outer space with stars shinning in the background. This is where our space station is going to be built.

Our space station needs to be built from metal plates and beams sent from earth. We just received our first "metal plate texture":
Looks like the builders have done a good work, the first level of Space Station Alpha has been built:


The people working on the space station needed some way to materialize the landing areas for the ships, so they decided to paint some metal plates:

I hope you got the idea?

The small 16x16 textures are "tiles" and the larger picture with the space station is the "tilemap".

Ok, but what's the point?

The main idea is that instead of painstakingly paint each pixel of your game world you can just create some small generic textures and assemble them creatively to build your whole world.
A bit like with Lego bricks, leveraging combinations of small shapes to build giant constructs in a very efficient way that does not require to spent an insane amount of time crafting small details all over the place.

The quality of the final art is highly dependent on the quality of the individual textures, how they can be combined together, the possibility to use transition textures to hide the rigid alignment on the grid.

I guess some examples from some real games will gives more substance to this claim, so here is a small selection of tile based games (as usual all the copyright to whoever owns them, yada yada).

Let's start by an old classic, The Legend of Zelda on the Nintendo™ GameBoy™.

The whole game fits on a small cartridge, and the screen allows only for four different shades of grey.

Despite the limited amount of tiles, the game manages to have a quite strong personality.

Still on a Nintendo console, we now have a color example from Square Soft™: Final Fantasy V
The main difference compared to the previous example is that the artists have managed to soften the grid aligned aspect by having some tiles overlap over grid limits.
If you look at the mountains you will notice that they are not just fitting nicely in a small square, they blend in the mountains over and below.
Making it much more difficult to isolate individual textures.

Obviously this example was still quite basic in term of variety, and you may find yourself thinking that this not actually that difficult to make decent tiles.

I will now let you look at this last example and meditate on the skills required to achieve this:


This is now the end of the first part of this series of article on how to create tilemaps.

The part two will be more technical and will explain how to code this for your own game.