HTML5 Canvas, 2nd Edition

Creating a Tile Map with Tiled

The program we are going to use, Tiled, is a great tile map editor that is available for Mac OS, Windows, and Linux. Of course, tile maps can be designed by hand, but map creation is much easier if we utilize a program such as Tiled to do some of the legwork for us. Tiled is available for free under the GNU free software license.

Note

As stated before, you do not need to use this software. Tile maps can be created with other good (and free) software such as Mappy and Tile Studio, and even by hand using Microsoft Paint.

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.

Here are the basic steps for creating a simple tile map in Tiled for use in the following section:

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 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 book’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. When selected, you can click and “paint” the tile ...