HTML and CSS Reference
Creating a Tile Map with Tiled
for free under the GNU free software license.
As stated before, you do not need to use this software. Tile maps can be created with other good (and
The goal of creating a tile map is to visually lay out a grid of tiles that represents the game
screen and then export the tile IDs that represent those tiles. We will use the exported data as
a two-dimensional array in our code to build the tile map on the canvas.
1. Create a new tile map from the File menu. When it asks for Orientation, select Ortho-
gonal with a Map Size of 10×10 and a Tile Size of 32×32.
2. From the Map menu, import the tanks_sheet.png file 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 file that you downloaded from this topic'swebsite.MakesurethatTile
Width and Tile Height are both 32; keep the Margin and Spacing both at 0.
3. Selectatilefromthetilesetonthebottom-rightsideofthescreen.Whenselected, 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. (Ifyouare using the software onWindows orLinux, youwill find
this in the File menu.) When setting the preferences, select CSV in the “Store tile layer