Drawing a Tiled Map

Install PyTMX

The current version of writing this is 3.21.5, you need to select Tools, Python, Python Environments.

Select Packages and search for PyTMX, this page will show you how to use PyTMX. Other TMX solutions exist and i will overtime have a look to see which are the best.

Required

You will need a TMX map, and also the tileset file used and referenced in the map.

Import PyTMX

We need to import PyTMX, you need to add the following lines to the start of your code:

import pytmx
from pytmx.util_pygame import load_pygame

load_pygame is a method used to load in the map and tileset.

Read in Map

Make sure your map is within the same folder as your code, and that your tileset image is also in the same folder.

tiled_map = load_pygame('test.tmx')
tilewidth = tiled_map.tilewidth
tileheight = tiled_map.tileheight

Draw the Map

Now, within your game loop we need to draw the map. We can do this by cycling through the layers within the map:

    for layer in tiled_map.layers:
        if isinstance(layer, pytmx.TiledTileLayer):
            for x, y, tile in layer.tiles():
                if (tile):
                    SCREEN.blit(tile, [x*tilewidth,y*tileheight])

A for loop is created, and it iterates for each layer. It is important to test if the layer is a Tile layer first. If it is a different layer we will need to draw it differently. Once we have a Tile layer, we can create a for loop to cycle through every tile.

If the tile has a value we can then blit it to the screen. The location is calculated using the x & y values.

At this point your map should be drawn, however we are only drawing the tile. You can extend the drawing code to the other elements of the map:

    for layer in tiled_map.layers:
        if isinstance(layer, pytmx.TiledTileLayer):
            for x, y, tile in layer.tiles():
                if (tile):
                    SCREEN.blit(tile, [x*tilewidth,y*tileheight])

        elif isinstance(layer, pytmx.TiledObjectGroup):
            for object in layer:
                if (object.image):
                    SCREEN.blit(object.image, (object.x, object.y))

The elif will be accessed if the layer is an object layer. We can then cycle through each object, and if the object has an image we can blit it to the screen at the x & y of the object.