How to render tiles with libtmx?

libtmx provides some useful tools for rendering tiles from a TMX map, even if libtmx is not itself a rendering library. This tutorial provides some hints on how to render tiles in a neutral way. You will have to adapt to your drawing toolkit. More precisely, we assume you use a visitor and want to render a tmx::TileLayer. Here is the procedure.

Get the size of the final surface

First step, let's get some information about the size of the map and the size of the tiles to compute the size of the resulting surface.

unsigned surface_width = map->getTileWidth() * map->getWidth();
unsigned surface_height = map->getTileHeight() * map->getHeight();

Visit the layer

Second step, we visit the tile layer.

virtual void visitTileLayer(const tmx::Map& map, const tmx::TileLayer& layer) override {
  if (!layer.isVisible()) {
    return;
  }

  unsigned k = 0;
  for (auto cell : layer) {
    unsigned i = k % map.getWidth();
    unsigned j = k / map.getWidth();
    assert(j < map.getHeight());

    unsigned x = i * map.getTileWidth();
    unsigned y = j * map.getTileHeight();

    unsigned gid = cell.getGID();

    if (gid != 0) {
      drawGID(map, x, y, gid);
    }

    k++;
  }
}

First, it's not necessary to render the layer if it's not visible. This visibility property can be set in Tiled. Then, we visit every cell in the layer. Cells are organised in a row-major order, so we can compute the column i and row j of the cell, and then the coordinates x and y of the tile in the rendering surface. Finally, if the gid is an actual gid, then we draw the tile.

Draw each tile

Third step, we draw each tile on the rendering surface.

void drawGID(const tmx::Map& map, unsigned x, unsigned y, unsigned gid) {
  tmx::TileSet *tileset = map.getTileSetFromGID(gid);
  gid = gid - tileset->getFirstGID();

  if (tileset->hasImage()) {
    // Tiled Qt

    const tmx::Image *image = tileset->getImage();
    auto texture = getTexture(image->getSource()); // depends on the toolkit

    tmx::Size size = image->getSize();
    tmx::Rect rect = tileset->getCoords(gid, size);

    drawImage(x, y, texture, rect); // depends on the toolkit

  } else {
    // Tiled Java

    const tmx::Tile *tile = tileset->getTile(gid);
    const tmx::Image *image = tile->getImage();

    auto texture = getTexture(image->getSource()); // depends on the toolkit
    drawImage(x, y, texture); // depends on the toolkit

  }
}

Once the tileset has been computed (according to the documentation of the TMX format), we can compute the id of the tile inside the tileset. Then, in the case of Tiled Qt (the newest version), we get the corresponding image of the tileset and we compute its size (if the size is not present in the TMX file, you must get it from the toolkit). With the id of the tileset and the size of the image, we can compute the rectangular part of the image where the tile is. Finally, we draw the tile on the rendering surface at the (x,y) coordinates.

In the case of Tiled Java, the process is a little bit different. We put it here for completeness, in case you have to deal with old TMX files.

See also

How to render image objects with libtmx?