How to display isometric maps with pytmx?

[nilamo]

Alright, give this a shot:

import pygame as pg
import pytmx
 
WIDTH = 1024   
HEIGHT = 768
TILESIZE = 16
GRIDWIDTH = WIDTH / TILESIZE
GRIDHEIGHT = HEIGHT / TILESIZE

class TiledMap:
    def __init__(self, filename):
        tm = pytmx.load_pygame(filename, pixelalpha=True)
        self.width = tm.width * tm.tilewidth
        self.height = tm.height * tm.tileheight
        self.tmxdata = tm
 
    def render(self, surface):
        ti = self.tmxdata.get_tile_image_by_gid
        for layer in self.tmxdata.visible_layers:
            if isinstance(layer, pytmx.TiledTileLayer):
                # top left corner, is in the middle of the screen, at the top
                x_start = (WIDTH / 2)
                y_start = 0

                x_offset = x_start
                y_offset = y_start
                for x, y, gid, in layer:
                    if x == 0:
                        # each new row resets the y-offset, and we back the x-offset a little more to the left
                        # the map is defined as left to right, then top to bottom
                        y_start += self.tmxdata.tileheight
                        x_start -= (self.tmxdata.tilewidth / 2)
                        y_offset = y_start
                        x_offset = x_start

                    tile = ti(gid)
                    if tile:
                        surface.blit(tile, (x_offset, y_offset))
                    
                    # move the offset for the next tile
                    y_offset += self.tmxdata.tileheight
                    x_offset += (self.tmxdata.tilewidth / 2)

    def make_map(self):
        temp_surface = pg.Surface((self.width, self.height))
        self.render(temp_surface)
        return temp_surface

if __name__ == "__main__":
    pg.init()
    win = pg.display.set_mode((WIDTH, HEIGHT))
    iso = TiledMap("iso.tmx")
    running = True
    while running:
        for ev in pg.event.get():
            if pg.QUIT == ev.type:
                running = False
        
        iso.render(win)
        pg.display.flip()

The map is defined in a left to right, then top to bottom fashion. So (0, 0) is the "top left" tile, which should be rendered at the very top of the window, center screen. By doing a little calculation to get the center of the window (WIDTH / 2), all that's left is to move the offset by a tile (or half a tile, for the x-axis) to get the position of the next tile, and then reset the offsets for the next "row".