May 15, 2014 at 17:11Reverse Engineering Caesar III (Part 2, Drawing a City)
I hope that the previous Caesar III Back-engineering post , which described the algorithm for obtaining textures from the resources of the original game, was favorably received by the hawkers. In this article I will describe the format of maps, the selection algorithm and the order of tiles for rendering, the formation of the final texture.
If you know what a tile is, then you can skip the next section.
Tiles A
tile is a picture of a fixed size, formed so that when drawing next to other tiles, a continuous image without “seams” is obtained. Here is an example of grass textures from Caesar III
If you put them together in a certain order and add some textures with trees, you get a certain area of the earth. And if you add another kind of tile to this picturesque picture, for example, with the image of the road, you can already make a primitive map.
You probably noticed that the presented images are not square, but diamond-shaped. This is done in order to give the image a sense of volume (depth). Such a tile looks turned at one angle to the viewer and, as it were, going deeper, the two-dimensional picture has acquired a third dimension. To create a volume effect, the width should be less than half the length. The tile base in the Caesar III game is 58x30 pixels, this is the minimum tile size used by the game engine. At the first stages of the remake development, we got one unpleasant effect, the textures in the game were created without transparency and displaying them on the screen without additional processing led to the following result.
The way out of this situation is as follows: either use a mask, for example, the color of the leftmost character is accepted as transparent, or add textures with an alpha channel. In the original game, the first option was used, in the remake the second one is used: textures are prepared at the stage of loading resources.
Map
A map is an array that determines the position of tiles on a layer and their parameters. In the simplest case, the map is an MxN matrix, where each of its elements contains an identifier (number, number) from the conditional “tile palette”. Tiles do not necessarily have a sequential sequence number; tile numbers are divided into several intervals and named spaces. So for example, tiles of land, trees, water, faults and grass have indices from land1a_00001 to land1a_00303. In Caesar III, square cards of sizes from 30x30 to 160x160 tiles are allowed. The tile is located on the map so that its upper border is “north”.
In order to draw tiles on the screen, you need to take into account the distance to it, if you simply draw the tiles in the order they are placed on the map, you will get abracadabra, since some of the tiles were drawn at the wrong time.
In what sequence you need to draw tiles, the following image shows.
1. The first figure shows the order of drawing tiles on a 2D map to create a depth effect.
2. The second figure shows the order of drawing tiles on a 2.5D map, given that the higher the tile is located, the earlier it should be drawn.
This image is formed from the following tiles drawn in the correct order.
In general, the code for generating tile indexes for rendering will be as follows:
Drawing a city
Additional conditions that arise when drawing a city.
1. On the map are located not only static tiles of land, grass, buildings, but also moving objects (people, animals, animation)
2. There are objects that you can go through (arch, gates, barn)
3. Additional animation of tiles and objects
4. Non-square objects.
These conditions complicate the rendering process and give rise to additional drawing rules.
1. Moving characters on an isometric map is not just. The map is rotated “in depth” and its absolute vertical size does not coincide with the horizontal size. Therefore, “up” any moving object should move accordingly, in the simplest case, two steps to the side have one step deep.
2. A moving object can be in different parts of the tile and it is drawn after the main image of the tile is displayed, which can cause display artifacts, for example, such as: a chariot travels over the gate. This is by drawing additional sprites that will be shown after the drawing of moving objects.
+ 
=
3. Animation may go beyond the dimensions of the main image, here it is necessary to take into account such a feature that it (animation) can go up and to the right, but not down and to the left, otherwise it will be blocked by the following tiles.
4. Most of the game uses square objects, but there are also extended ones, to simplify the rendering algorithm, they are beaten into smaller (square) parts, for example, a hippodrome.
= 
+ 
+ 
How to draw
1. For the first pass, “flat” tiles and moving objects
are drawn on them 2. For the second pass, tiles are drawn, the images of which can go beyond the
tile base 3. An additional animation is drawn for tiles that have such a flag
Anticipating possible questions. This algorithm was restored from the original game, as far as I could understand it, maybe it will be changed in later versions. Tips for organizing the rendering cycle are welcome
Caesar III map format. The
first five data blocks are directly related to the objects that will be displayed in the city in the * .map file. We read from the beginning of the file, we read the data one after another without gaps.
short tile_id [26244] - contains the identifiers of the elements, each identifier corresponds to its texture. For example, the identifier group 246-548 corresponds to the textures land1a_00001-land1a_00303, these are the textures of the earth, trees, etc., which were described above.
byte edge_data [26244]- the array contains information about the size of the object for which the texture is selected in the tile_id
short terrain_info array [26244] - the array contains surface characteristics for a specific tile, earth, water, road, wall, etc. ( full information on these flags )
byte minimap_info [26244 ] - basic information for building a minimap, also involved in some calculations during the game, acting as a kind of array of "random numbers".
byte height_info [26244] - this array describes the height of the tile above the surface, 0 - for the ground, 1 - 15 pixels, 2 - 30 pixels, etc.
Practical application
More information about Caesar III and the progress of the remake can be found on our wiki on bitbucket.org.
Special thanks to Bianca van Schaik for the help in writing the article and the materials provided.
And finally, a small test screenshot, Etruscan lancers are outraging in the city of fountains:
If you know what a tile is, then you can skip the next section.
Tiles A
tile is a picture of a fixed size, formed so that when drawing next to other tiles, a continuous image without “seams” is obtained. Here is an example of grass textures from Caesar III
If you put them together in a certain order and add some textures with trees, you get a certain area of the earth. And if you add another kind of tile to this picturesque picture, for example, with the image of the road, you can already make a primitive map.
You probably noticed that the presented images are not square, but diamond-shaped. This is done in order to give the image a sense of volume (depth). Such a tile looks turned at one angle to the viewer and, as it were, going deeper, the two-dimensional picture has acquired a third dimension. To create a volume effect, the width should be less than half the length. The tile base in the Caesar III game is 58x30 pixels, this is the minimum tile size used by the game engine. At the first stages of the remake development, we got one unpleasant effect, the textures in the game were created without transparency and displaying them on the screen without additional processing led to the following result.
The way out of this situation is as follows: either use a mask, for example, the color of the leftmost character is accepted as transparent, or add textures with an alpha channel. In the original game, the first option was used, in the remake the second one is used: textures are prepared at the stage of loading resources.
Map
A map is an array that determines the position of tiles on a layer and their parameters. In the simplest case, the map is an MxN matrix, where each of its elements contains an identifier (number, number) from the conditional “tile palette”. Tiles do not necessarily have a sequential sequence number; tile numbers are divided into several intervals and named spaces. So for example, tiles of land, trees, water, faults and grass have indices from land1a_00001 to land1a_00303. In Caesar III, square cards of sizes from 30x30 to 160x160 tiles are allowed. The tile is located on the map so that its upper border is “north”.
In order to draw tiles on the screen, you need to take into account the distance to it, if you simply draw the tiles in the order they are placed on the map, you will get abracadabra, since some of the tiles were drawn at the wrong time.
In what sequence you need to draw tiles, the following image shows.
1. The first figure shows the order of drawing tiles on a 2D map to create a depth effect.
2. The second figure shows the order of drawing tiles on a 2.5D map, given that the higher the tile is located, the earlier it should be drawn.
This image is formed from the following tiles drawn in the correct order.
In general, the code for generating tile indexes for rendering will be as follows:
Look
//Формируем верхнюю часть "ромба" отрисовки
tilemap map; //карта поверхности
tilearray tiles; //порядок отрисовки
for( j=0; y < map_size; j++ )
{
for( t=0; t <= j; t++ )
{
tiles.append( map[ t , map_size - 1 - ( j - t ) ];
}
}
//Формируем нижнюю часть "ромба" отрисовки
for( i=1; i < map_size; i++ )
{
for( int t=0; t < map_size-i; t++ )
{
tiles.append( map[ i + t, t ] );
}
}
Drawing a city
Additional conditions that arise when drawing a city.
1. On the map are located not only static tiles of land, grass, buildings, but also moving objects (people, animals, animation)
2. There are objects that you can go through (arch, gates, barn)
3. Additional animation of tiles and objects
4. Non-square objects.
These conditions complicate the rendering process and give rise to additional drawing rules.
1. Moving characters on an isometric map is not just. The map is rotated “in depth” and its absolute vertical size does not coincide with the horizontal size. Therefore, “up” any moving object should move accordingly, in the simplest case, two steps to the side have one step deep.
2. A moving object can be in different parts of the tile and it is drawn after the main image of the tile is displayed, which can cause display artifacts, for example, such as: a chariot travels over the gate. This is by drawing additional sprites that will be shown after the drawing of moving objects.
+ =3. Animation may go beyond the dimensions of the main image, here it is necessary to take into account such a feature that it (animation) can go up and to the right, but not down and to the left, otherwise it will be blocked by the following tiles.
4. Most of the game uses square objects, but there are also extended ones, to simplify the rendering algorithm, they are beaten into smaller (square) parts, for example, a hippodrome.
= + + How to draw
1. For the first pass, “flat” tiles and moving objects
are drawn on them 2. For the second pass, tiles are drawn, the images of which can go beyond the
tile base 3. An additional animation is drawn for tiles that have such a flag
Anticipating possible questions. This algorithm was restored from the original game, as far as I could understand it, maybe it will be changed in later versions. Tips for organizing the rendering cycle are welcome
Caesar III map format. The
first five data blocks are directly related to the objects that will be displayed in the city in the * .map file. We read from the beginning of the file, we read the data one after another without gaps.
short tile_id [26244] - contains the identifiers of the elements, each identifier corresponds to its texture. For example, the identifier group 246-548 corresponds to the textures land1a_00001-land1a_00303, these are the textures of the earth, trees, etc., which were described above.
byte edge_data [26244]- the array contains information about the size of the object for which the texture is selected in the tile_id
short terrain_info array [26244] - the array contains surface characteristics for a specific tile, earth, water, road, wall, etc. ( full information on these flags )
byte minimap_info [26244 ] - basic information for building a minimap, also involved in some calculations during the game, acting as a kind of array of "random numbers".
byte height_info [26244] - this array describes the height of the tile above the surface, 0 - for the ground, 1 - 15 pixels, 2 - 30 pixels, etc.
Practical application
More information about Caesar III and the progress of the remake can be found on our wiki on bitbucket.org.
Special thanks to Bianca van Schaik for the help in writing the article and the materials provided.
And finally, a small test screenshot, Etruscan lancers are outraging in the city of fountains: