Creating a simple map with Tiled
From Tiled
While Tiled is meant to be easy to use, it has a learning curve like anything else. This tutorial is meant to help flatten the curve. In this tutorial we'll get you started on creating a new map, creating a tileset, editing and finally, saving.
Contents |
A brave new map
Let's begin by creating a new map from File->New. Once the New Map Dialog appears (Fig. 1.1), we will set the initial dimensions and the orientation. We will create a standard, orthogonal map as an example.
The dimensions, or size in tiles, of the map will be 32 tiles wide by 32 tiles high for our example. The dimensions of the individual tiles will be 24x24. This is the size of the tiles we will be using later, it is important to get this right when you start a new map. Click OK.
We are now presented with the main Tiled editing window (Fig. 1.2). As you can see there are no tiles and only one layer, which is selected. We now need to bring in a tileset for our map. Maps can have any number of tilesets. For us, a single internal tileset will do. From the Tilesets menu, select New tileset...
On internal and external tilesets
Tilesets are not necessarily tied to a specific map. In Tiled, tilesets can be independent resources, which the maps can reference. By default, when you create a tileset, it'll store it in the map. If you want to use the same tileset in multiple maps, you can export it to a .tsx file and import the tileset into other maps you create.
The tile images can be stored with the tileset as png, base64 encoded, or stored externally and referenced by the tileset. Note: When we talk about a tileset, we mean the set as defined by the tileset element either within a map file or stored in a .tsx file, not the tileset image.
Adding a tileset
Once at the New tileset window (Fig. 1.3), we will name our set to make it easier to recognize it later. We have a tileset image (pipe tiles), so we check Reference tileset image, and click Browse to find our image. Since we have no frame or grid around the tiles in the set image, we leave Tile spacing on 0. Click OK.
The final steps, drawing and saving
Now that a tileset has been added to the map, you can click the collapsed button in the bottom left and the tile palette dialog will pop-up. You can adjust the width of the palette so that the number of tiles shown vertically match the tileset image. While editing you can leave the tileset palette dialog open for easy access to your tiles.
With a tile and the pencil selected, you can start drawing tiles on your map. Also try out the fill, eraser and eye dropper tools. Hint: While you can select the eye dropper to select a tile from the map, right clicking on the map while any tool is selected will do the same.
Finally safe your map using File->Save. Choose a name like tutorial1.tmx.
