9.27.2011

Making a map with tiles


People use tiled game engines for several reasons. One of which is that it's easy to generate a fairly large world in a game from a small set of tiles and the tilesets used will have a smaller memory footprint than storing the map as an image. Another is that you can add unique behavior to the different types of tiles. Say you have a grass tile and a mud tile, you could have your hero walk at normal speed over the grass tile and at a reduced speed or not at all over the mud tile. Using tiled maps allow for a large world to be created easily with the right editor, enter Tiled.




Tiled is a map editor that is easy to use and stores the map in an easily usable format, XML. It allows for multiple tile and object layers. You can add multiple tilesets with ease. Tiled's TMX map file format is easily parse-able with any language that can support XML.

The TMX file starts off with a map element. The map element can contain 4 types of elements; tileset, layer, objectgroup, and properties. Tilesets are defined by using the tileset element, they contain an image element which points to the image file used as a tileset. There can be many later and objectgroup elements to define different tile and object layers for the map. Custom properties can be applied to the map using the properties element.  Much more detail on the TMX format at Tiled's Wiki.


<map height="10" orientation="isometric" tileheight="32" tilewidth="64" version="1.0" width="10">
    <tileset firstgid="1" name="Isometric Tileset" tileheight="128" tilewidth="64">
        <img source="[filename]" />
    </tileset>
    <layer height="10" name="Ground" width="10">
        <data encoding="csv">
            ...
        </data>
    </layer>
    <layer height="10" name="Trees" width="10">
        <data encoding="csv">
            ...
        </data>
    </layer>
    <objectgroup height="10" name="Object Layer 1" width="10">
        <object height="32" name="Portal" width="32" x="64" y="224"></object>
    </objectgroup>
</map>


There are five ways that set up Tiled to save your layer data. We are going to focus on two of them; CSV and XML. When you select CSV, layer data will be stored as a comma-separated list of numbers. When using XML, layer data will be stored in XML format (obviously...) as a list of tile tags i.e. "<tile gid="4"/>." Each tile tag has one property, gid, global tile identifier. The gid is the same number that is stored in the CSV layer format. This number represents the offset of the tile in a tileset.

Change how layer data is saved in Preferences.

When first creating a map with Tiled you must pick a size and a map orientation. There are two orientations to choose from; orthogonal and isometric. Orthogonal tiles are easy as they are squares. Isometric tiles are diamonds.  Tiles can be assigned any width and height, allowing for a wide variety of map configurations.

Example isometric tileset, included with Tiled.

Then you must select a tileset like the one above, and start drawing your map. To draw tiles on top of other tiles you'll need to add another layer.  You can add another tile layer from the Layer menu. Objects can be added to object layers, which can be added via the Layer menu as well. 

Example Isometric map.

I use Tiled to make the maps for my projects, maybe you will too. Provided below is a download a link to the map in the example image.