Building a simple Tilemap game.
The following article builds on a sample program that @Hanski published to show how the Tilemap class can be used. His code was written in Python but I have changed it to my preferred language, C++, to provide a corresponding resource in that language.
This tutorial is not necessarily trying to teach people to program in C++ and assumes you are familiar with the basics. The code is relatively simple so even if you are comping from a different language you will find the code easy to understand.
What is a Tilemap?
Tilemaps are a very common programming technique for creating 2D worlds out of reusable tiles. Typically, the world is very large and the player can only see a small section at a time as they move around. Using common tiles allows for extremely large worlds to be made on devices that have surprising little memory. The Pokitto API includes a small library that makes building a game based on a tile map easy!
Defining the World
Take a look at the world map below that is featured in Hanski’s Python sample program. It consists of a world that is 16 tiles wide and 16 tiles high and utilises only 4 different tiles representing a green area that can be walked on and three obstacles - a bushy grass area, a tree and water.
The world itself is simply an array or values that tell the tilemap class what tile to render in each of the 16 x 16 locations. Each tile is assigned a number and, in the sample application, these are captured in an enumeration as shown below.
enum TileType {
Water = 0,
Green = 1,
Tree = 2,
Grass = 3,
};
To save memory, the current tilemap implementation limits the number of tiles to 16 and takes advantage of this by compressing two tiles into a single byte within the array. The array for our world is shown below alongside our world map. The highlighted cell shows a value of 0x21 corresponds to the area highlighted in the world map. As you can see the two nibbles (that’s what half a byte is called corresponds to a tree and a green tile).
Using this simple compression method, the array used to store our 16 x 16 tile world is only 128 bytes in size. It is not hard to imagine that a game with a single large world or multiple levels stored as multiple arrays or even an array of arrays! The Pokitto has enough memory to support a large universe.
Download and review the code in the repo https://github.com/filmote/Tilemap_1
This is a literal translation of @hanski’s original python version with minor changes for clarity. In addition to the enumeration, defined above, the code to initialise the tilemap class is shown below. The tilemap.set() command configures the tilemap object with size of the world (16 tiles wide by 16 tiles high) and the data array to use, Data::mapPixels.
The remaining four lines of the code assign the map data indexes to the images to be rendered. Using the enumeration values rather than literals makes the code much more readable.
enum TileType {
Water = 0,
Green = 1,
Tree = 2,
Grass = 3,
};
Tilemap tilemap;
int main(){
…
tilemap.set(16, 16, Data::mapPixels);
tilemap.setTile(TileType::Green, 16, 16, Data::green16);
tilemap.setTile(TileType::Tree, 16, 16, Data::tree16);
tilemap.setTile(TileType::Grass, 16, 16, Data::grass16);
tilemap.setTile(TileType::Water, 16, 16, Data::water16);
…
}
When we are ready to render our viewport, we simply call tilemap.draw(x, y);
<< Prev | Next >>
Part 1 of 9: Building a Simple Tilemap Game
Part 2 of 9: Moving a Player Around the World
Part 3 of 9: Rendering the Viewport and Player
Part 4 of 9: Detecting Obstacles
Part 5 of 9: Adding Enemies
Part 6 of 9: Using FemtoIDE and Piskel
Part 7 of 9: Doors and Inventory Items
Part 8 of 9: Multiple Worlds
Part 9 of 9: Sixteen Tiles Only?
)
