3.0. BASICS OF 2D MAPS - TILES

 Intro

Remember any old 2D CRPG you have played. If you don't remember, or if you had never played a 2D RPG, here is an image:

Breath of Fire II for SNES
Breath of Fire II for SNES

Breath of Fire 2!. Nice and old stuff, and you can still enjoy this game in a GBA.

Now check this screen. What do you see? A town? Good. But look more closely. What else you can see? Buildings, grass, people. Yep. But now place some attention on the grass. Don't you think that the grass is repeating, has some sort of pattern? Good, because it actually has a pattern. That pattern is called tile, and will be the subject of our chapter. Because, and this is very important, maps in 2D CRPGs are mostly built with tiles.

 Tiles

A tile is just a little graphic, used for drawing maps. They are used for representing complex worlds without using a lot of memory or disc / cartridge space. As an example,  look at the BoF2 image above. The size of the image is 25KB, PNG compressed. But that town in BoF2 is about 4x4 images, so the size of the entire town should be around 384KB. Seems not so much in the GB era, but for a cartridge of 4096-16384KB maximum space, it's a lot.

Thus the town, or should i say almost all the game maps, are built with tiles. There is grass tiles, wall tiles, stone tiles, roof tiles... all combined creates a map. How are tiles combined? We are going to show it...

 Tiles and Maps

A map is basically a grid. In that grid, the tiles are drawn, giving the sensation of a complex world. We can imagine this grid as something like this:

1 1 2 1
1 1 2 2
1 1 1 1
3 3 3 3

...a 4x4 grid, with some numbers assigned in each position. The numbers have a simple meaning: they just tell what tile must be drawn in order to draw the world. So, imagine that a grass tile is number (1), a mointain tile is number (2), and a sea tile is number (3). OK, if we paint this on the screen, we will have...

1 (Grass) + 2 (Mountain) + 3 + (Sea) =
1 1 2 1
1 1 2 2
1 1 1 1
3 3 3 3

...a map!!!. Not a very good one, not as good looking as the BoF2 one, but this is the start ^_-.

 Layers and Transparency

Maps in fact are not as simple as one single grid. Maps are more complicated, adding layers of more tiles, or complex objects. Now we'll explain the easy way of representing a 2D map: using layers of tiles.

If you look again to the BoF2 screen, you will see an old man staying behind a wall. The reason is simple: there is various layers of tiles - ground, transparent objects and roof. They specifiy the ground where the people walks, the walls and buildings that are drawn over the ground, and the parts that are drawn over everything else.

Since there is three layers of tiles, we must store three grids with their respective values:

1 1 2 1
1 1 2 2
1 1 1 1
3 3 3 3
Ground Layer
-1 4 -1 -1
-1 4 -1 -1
-1 4 -1 -1
-1 4 -1 -1
Transparent Layer
-1 5 -1 -1
-1 -1 -1 -1
-1 -1 5 -1
-1 -1 -1 -1
Roof Layer

Here, 4 stands for a river, 5 stands for a cloud that is over everything (included NPCs), and -1 stands for a non-existant tile.
Now comes an important part: tiles that are from the transparent layer or from the roof layer must be drawn with transparent colors. If we draw a tile over the lower layers without adding transparency information, the tile will overlap the images that are below it. In the example below, black is the transparent color (note that usually black is not the transparent color because black is heavily used in graphics)

Grass + River = River No
Grass + River = Tranparent River Yes

Now we will show the result of the above grid:

1 (Grass) + 2 (Mountain) + 3 + (Sea) + 4 + (River) + 5 + (Clouds) =
1 1 2 1
1 1 2 2
1 1 1 1
3 3 3 3

...a (more complex) map!!!. Still a dummy thing, but if you are a good at drawing you can create a map like the one of BoF2.

 Complex Objects

Now, we are going to take a look to this screen, courtesy of the Exult Team and Richard Garriott & Co.:

Ultima 7!!!!
Ultima VII

Ultima 7!!. One of the best CRPG's games ever done. But let's move to the subject of this section.

In this map the ground layer is maintaned. The grass, the stone... they are all tiles(1) of the same size. However, the rest of the objects in the scene have different sizes. The tree is just one tile. The chairs are just one tile. And so on...

What is the difference here? In this type of maps, the scene is composed by a grid of ground tiles, and by a list of objects. Every object knows where is drawn, and stores some information about size and physics. Also, The map must be drawn in a special way, to give the feeling of deepness.

For knowing where to draw the objects, there is a grid of objects where the size of the tiles are less than usual (e.g. if the tile is 24x24 size, he size of this map is 8x8). Every object is located within this grid of objects. Or, maybe the objects are located in a pixel-based coordinates.

Last word: In Ultima 7 maps, there are in fact 16 "virtual" layers, used for giving the sensation of height. You can see from the image that there is some stairs. In fact, you can go up to a second floor.

 Notes

1In fact, the ground tiles in Ultima 7 are drawn using a nice technique called superchucks. We will discuss about it when talking about speeding up the development process.