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:

What is a tile map?

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

What is a tile map?

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:

What is a tile map?

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

What is a tile map?

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.223.206.69