< Prev  |  Home  |  Next >

Creating a Tilemap

The aim of this section is to store and display a world for our character to explore. Each ’tile’ in the game map will be a different ‘resource’. We’ll have areas of dirt, grass, water and coal to begin with, but you’ll be able to easily change these resources, or even add your own.

Here’s a diagram of what we’re trying to achieve:

Tilemap plan

In the diagram above, the top row has an area of grass, coal and dirt (looking from left to right). We need to be able to store the fact that this top row contains different resources, and we can use a list to do that. In our list, we’ll use a 0 to represent dirt, 1 to represent grass, a 2 for water and 3 for coal. Here’s how our tilemap will look in Python:

This tilemap, however, only represents one row. If you have tried the battleships challenge, you’ll understand how to use a 2-dimensional array to store rows and columns. If you’re not sure, maybe go and have a look at these 2 sections before moving on. Here’s how we can create a tilemap of 5 rows, with each row containing 3 numbers:

This is now a 2-dimensional tilemap, but it’s very difficult to read. If I wanted to look at how much water there is in our map, I’d have to first look up the number for water (2), and then try and search for 2s. A much better way would be to use constants.

A constant is just like a variable for storing something, except that it’s a variable whose value never changes during the program (it is constant!). Usually, we use capital letters to represent constants. If we use the following constant variables:

Then we can change our tilemap to the following:

Much better! If we want to display this tilemap in our game, we also need to link each resource to a particular colour. Again, we can use constants to store colours in a way that is easier to read:

We can then use a dictionary to link each resource to it’s colour:

In order to display our tilemap in pygame, we first need to loop through each of the rows in the tilemap. In each row, we then need to loop through each item in that row, and the look up the colour of the resource at that position. We then need to display a square at the correct position on the screen.

Let’s make a few more constants, to make the game even more customisable. We need to know the size of each of the tiles in our tilemap, as well as the width and height of the tilemap:

Here’s the complete code, which will be explained below:

There are two lines of this code that I’d like to explain in a little more detail. Firstly, the line creating the drawing surface.

Instead of just creating a 300×300 display surface (as we did in the last section), we need to make sure that the surface is the correct size for the tilemap. For example, if there are 3 cells per column (MAPWIDTH=3), and each cell is 40 pixels wide (TILESIZE=40), the width of the display surface needs to be 3×40 pixels wide (MAPWIDTH*TILESIZE).

The other line I’d like to explain is:

When drawing each resource in the tilemap, we need to make sure that we show it as the correct colour. this is what the code:

is doing. tilemap[column][row] gets the type of resource at that position (for example DIRT), and colours[DIRT] will give us BROWN, which is the colour that the tile should be on the map.

To draw each tile in the correct position, we need to use a little maths. The tiles in column 3, for example, should be drawn 3 x the tile size across, which would be an x-coordinate of 120 pixels across (with a tile size of 40 pixels). The same applies to tiles in a particular row being drawn at the right y-coordinate.

Anyway, this is what you should see:

Pygame tilemap

Check what is displayed against the ’tilemap’ variable in your code, to make sure that the map has been displayed correctly.


Alter the width of the tiles, to see how it affects the game. Add another 2 columns to the tilemap, making a 5×5 grid of resources. You’ll need to change another constant for this to work!

Add two new resources to the game: rock and lava. Rock should be grey and lava is red (obviously). Add these two new resources to your tilemap, so that they are displayed.

< Prev  |  Home  |  Next >