TMX Tutorial

Ever wondered how those old console games used to have such large levels? How could they span so many screens despite the small amounts of memory available on a game console? The answer lies in the efficiency of reusing graphics.

TMX Tutorial

Reusing graphics can be achieved by using map editors. Graphics are spliced into tiles, and those tiles are drawn onto a map. Providing the graphic tiles align and match seamlessly, it creates the illusion of a large level using minimal memory. A popular, free map editor suitable for mobile games is Tiled (http://www.mapeditor.org/).

In terms of memory a 32 x 32 pixel image with transparency will use 4096 bytes. This is calculated by the number of pixels multiplied by 4 (bits) – which represent red, blue, green and transparency. A background image might be 800 x 400 pixels, or 1,280,000 bytes – which is a fair chunk of memory for mobile devices.

A Tiled TMX map can provide large backgrounds by dividing graphics into tiles and allowing you to draw your maps. The amount of memory used is significantly lower because the TMX map only needs to store which tile was used, and it’s X/Y location.

The real power comes with using transparency and multiple layers in Tiled – much like Photoshop. This allows you to combine tiles to achieve different effects. For example you could put a tree on top of grass, or you could put the same tree over dirt. Being resourceful and efficient with tile design allows more memory for other parts of your game – enemies, power ups and more!

Using this technique, you can create large levels efficiently, but there are a few things to consider. Remember that each tile must be drawn with every frame. So if you have 32×16 tiles per screen, the program will need to render 32 x 16 = 512 tiles each time.

Also bear in mind that the amount of work is increased with each layer. If you have two layers, then a lot more processing will be needed. Larger tiles will result in less tiles needing to be rendered each frame. Find a good compromise between decent frame rates and graphic detail.

Tiled is a popular, free TMX editor that you can easily get for your computer. There are samples of graphics around the internet that can be used to build levels. To contribute to this cause, I have made available a set of graphics here. They are plain, but they connect together seamlessly.

Since they connect seamlessly, it means that you could edit the graphics – and as long as you don’t change the outlines or edges you should end up with the ability to draw up levels of your own design!

Now for the brief TMX tutorial:

  • Download and install Tiled from http://www.mapeditor.org/
  • Download the sample graphics
  • Load up Tiled
  • File > New
  • Choose Orthogonal. Map size can be 30 x 15 tiles. Tile size must be 32 x 32 pixels for sample graphics, otherwise it will appear a bit scrambled. Click OK.
  • A blank map canvas will appear. You need to import the graphics.
  • Go to Map > New Tileset
  • Click on Browse and locate the sample graphics. Click OK
  • In the bottom right corner you will see the graphics. Select one.
  • Now paste the tile and away you go!

There is a Fill tool, useful for starting the map. You can also select, cut, copy and paste tiles much like any art program.

Hints: You can add layers to the map. The topmost layer in the list will be displayed on top. You can move the layers Z-order by clicking on the Up/Down arrows.

There are margins, offsets and quite a few options. Check out the http://www.mapeditor.org/ website if you would like to know more. We hope you enjoyed this tutorial!