HTML and CSS Reference
Here are the basic steps for creating a simple tile map in Tiled for use in the following
1. Create a new tile map from the File menu. When it asks for Orientation, select
Orthogonal with a Map Size of 10×10 and a Tile Size of 32×32.
2. From the Map menu, import the tanks_sheet.png to be used as the tile set. Select
“New tileset” from this menu, and give it any name you want. Browse to find the
tanks_sheet.png that you downloaded from this topic's website. Make sure that
Tile Width and Tile Height are both 32; keep the Margin and Spacing both at 0.
3. Select a tile from the tile set on the bottom-right side of the screen. Once selected,
you can click and “paint” the tile by selecting a location on the tile map on the top-
left side of the screen. Figure 4-9 shows the tile map created for this example.
4. Save the tile map. Tiled uses a plain text file format called .tmx . Normally, tile data
in Tiled is saved out in a base-64-binary file format; however, we can change this
by editing the preferences for Tiled. On a Mac, under the Tiled menu, there should
be a Preferences section. (If you are using the software on Windows or Linux, you
will find this in the File menu.) When setting the preferences, select CSV in the
“Store tile layer data as” drop-down menu. Once you have done this, you can save
the file from the File menu.
Here is a look at what the saved .tmx file will look like in a text editor:
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="10" height="10"
<tileset firstgid="1" name="tanks" tilewidth="32" tileheight="32">
<layer name="Tile Layer 1" width="10" height="10">