Ket's Site

Welcome to my little corner of the internet. It is essentially just a microblog.

If you wish to follow my ramblings you can sub via Atom, RSS or Mastodon.

Implementing Tiled Map Editor(TMX) Rotation and Flipping

Tiled Map Editor, available at www.mapeditor.org is a great FOSS map creation tool for tile based games. The Tiled TMX format is very useful and the maps made in it can be easily brought into any project, either by parsing the TMX/XML files generated by Tiled or by copying the generated layers into your project as (when using C or C++ (For other languages you will have to use the equivalent)) a uint32_t array.

As described in the Tiled documentation the bits at the end of each 32 bit integer that makes up the map are used to store the 'flipping' of each tile. A tile can be flipped in three ways, those being; horizontally, vertically and diagonally. But how do get rotation and flipping in every possible direction from these three bits?

We will be using this table as a reference to how each rotation and flip can be achieved in the below example project.

Example Project

This example project is written in C++ using SDL2 video library. It simply initialises SDL, loads a tile sheet image and renders our Tiled map until the program is closed.

First we need to create a map. I have created a simple, single layered map that includes a few images in every possible flip combination.

We will then be copying the relevant information from out of the TMX Tiled map into the project rather than parsing it.

The next thing to do before we render our map is to bring the 'flip table' from above into our project.

Once this is done we can then render the tile as we would any other image in our program. In the case of SDL this is done in the line: SDL_RenderCopyEx(renderer, sheet, &srcRect, &destRect, rotate, &centre, flip);

After compiling the program we can see that the tiles in our SDL window are in the same positions, flips and rotations as in the Tiled map editor.

For a more in depth look at how we are implementing this table you can find the full example program on GitHub.

This entire article and the images included in it are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. The example project included alongside this project are licensed under a MIT License.