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

If you are using tiles with transparent sections, you will need to change the code to load the map to this:

tiled_map = load_pygame('test.tmx', pixelalpha=True)

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.

Center Map on Object

You can read an object from your map, this could then be used to center the map to this object. The object has an x & y coordinate and these can be used to essentially set the camera position over your map:

CAMERA = tiled_map.get_object_by_name("Player")

We can now use the object to change the drawing code. We now need to use the x & y of the object to adjust the drawing coordinates:

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) - CAMERA.x +(SCREENWIDTH/2) , (y*tileheight) - CAMERA.y + (SCREENHEIGHT/2)])

if you minus the camera x & y coordinates from the drawing coordinates, you will have your centred position in the top corner. You therefore need to add half of the screen width and height to have it in the centre of the screen. You will also need to change the code to draw each object:

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) - CAMERA.x +(SCREENWIDTH/2) , (y*tileheight) - CAMERA.y + (SCREENHEIGHT/2)])

        elif isinstance(layer, pytmx.TiledObjectGroup): 
            for object in layer:
                if object.image:
                    SCREEN.blit(object.image, [object.x - CAMERA.x +(SCREENWIDTH/2), object.y - CAMERA.y + (SCREENHEIGHT/2)])

Move Object in Map

In the game loop we need to check which keys are pressed. We can create a structure to store the movement, this is reset every iteration. We can the alter the position of the object:

    pos = [0,0]
    for events in pygame.event.get(): #get all pygame events
        if events.type == pygame.KEYDOWN: 
            temp = b.rect.topleft
            if events.key == pygame.K_LEFT:
                pos[0]-=10
            elif events.key == pygame.K_RIGHT:
                pos[0]+=10
            elif events.key == pygame.K_UP:
                pos[1]-=10
            elif events.key == pygame.K_DOWN:
                pos[1]+=10
  
    tiled_map.get_object_by_name("Player").x += pos[0]
    tiled_map.get_object_by_name("Player").y += pos[1]