Chapter 7. Creating and Displaying Tile Maps

Most 2D games that you have played in the past made use of tile maps. It is an extremely efficient and fast way to develop complex 2D levels or scenes. Even if a game has more complex graphical content, it is likely that it will still make use of tiles in some way. Throughout this chapter we will be using the tiled map editor, an open source and cross-platform tool created by Thorbjørn Lindeijer and a large open source community. It is available at http://www.mapeditor.org/. We will essentially make this tool our level editor and use it for creating maps and placing our objects within those maps.

In this chapter we will cover:

• What a tile map is

• What a tile sheet looks like

• Using the tiled map editor to create our maps

• Parsing a state from a tiled map

• Loading and displaying a tile-based map in SDL 2.0

What is a tile map?

If you have played a lot of 2D games then you will be very familiar with tile maps. We will start by looking at an example in the form of the following screenshot:

This 20 x 15 tile map was made using the following screenshot called a tileset.

As you can see, one huge advantage to a tile system like this is that you can create large maps from relatively small image files. Tile maps are essentially a multidimensional array of IDs that tell us which part of the tileset we want to draw at each location. It will help to look at the images again with their IDs in place as shown in the following screenshot:

Here is the tileset with its IDs in place as shown in the preceding screenshot.

To draw the map we loop through the number of columns and the number of rows, grab the correct tile using its ID, and draw it to the screen. Any tile with an ID of zero will not be drawn (a blank tile). This can be seen in the preceding screenshot.

Getting familiar with the Tiled application

Tiled is a very user-friendly application that can greatly speed up our development time. Once you have downloaded and installed the application, open it up and you will be presented with the user interface as shown in the following screenshot:

On the right-hand side we have the Layers and Tilesets views; the left-hand side will contain our tile map. First we must create a new map, this can be done by navigating to File | New… or Ctrl + N. This brings up the new map dialog as shown in the following screenshot:

Here we can define the size and type of our map. We are only going to use orthogonal tile maps (as opposed to isometric), so go ahead and create an orthogonal tile map that is 20 tiles wide and 15 tiles high, with tile width and height both set to 32 px. We can now see our tile map in the left-hand side of the UI (Ctrl + G will show the grid). Tiled will also automatically create a layer for us called Tile Layer 1 (Visible in the Layers view...

Parsing and drawing a tile map

Now that we are relatively familiar with creating tile maps in the Tiled application we will move on to parsing them and drawing them in our game. We are going to create quite a few new classes starting with a class called Level that will hold our tilesets and also draw and update our separate layers. Let's go ahead and create Level.h in our project and add the following code:

class Level
{
  public:

  Level();
  ~Level() {}

  void update();
  void render();
};

We will also define a struct at the top of this file called Tileset:

struct Tileset
{
  int firstGridID;
  int tileWidth;
  int tileHeight;
  int spacing;
  int margin;
  int width;
  int height;
  int numColumns;
  std::string name;
};

This struct holds any information we need to know about our tilesets. Our Level class will now also hold a vector of Tileset objects:

private:

  std::vector<Tileset> m_tilesets;

Next we will create a public getter function that returns a pointer to this Tileset vector...

Scrolling a tile map

What we have created so far is fine for a game that takes place in one area that is the size of our window, but what about if we want to have large maps that are open to exploration. This is where scrolling comes into play. We have actually implemented this already but have not yet gone through it step-by-step or seen it in action. Let's do this now.

First of all, we must resize our map in the Tiled application. Navigating to Map | Resize Map… will allow us to do this. Leave the height of our map at 15 and change the width to 60. Fill up the remaining squares with whatever tiles you like. The map would then look like the following screenshot:

Save the map and we can look at the code:

int x, y, x2, y2 = 0;

x = m_position.getX() / m_tileSize;
y = m_position.getY() / m_tileSize;

x2 = int(m_position.getX()) % m_tileSize;
y2 = int(m_position.getY()) % m_tileSize;

When scrolling the map we don't actually move it more than a tile width; we use the position value to work out where...

Parsing object layers

The final topic we will cover in this chapter is loading objects from our Tiled map file. This is extremely useful and takes the guesswork out of placing objects within a level. Open up the Tiled application and we can create our first Object Layer by clicking Layer | Add Object Layer. This will create a new layer called Object Layer 1 as shown in the following screenshot:

We can create objects and assign any values and properties we want on these layers. First we will create a rectangle. Press R and click anywhere on your tile map, you will see a small square appear, as shown in the following screenshot:

Right-click on this square and click on Object Properties…. This will bring up the object properties dialog as shown in the following screenshot:

Here, we can set the values we want our object to have, just like our previous state XML files. Go ahead and fill in the dialog box as shown in the preceding screenshot. The positions and sizes of this dialog box deal in tiles...

Summary

We are getting closer to a fully-fledged game all the time. This chapter covered a quick way to create 2D maps through the use of tiles and also looked at using an external application to place objects within our levels. The next two chapters will tie up all of the remaining loose ends and we will create some actual games.