Getting familiar with the Tiled application

Tiled is a very user-friendly application that can greatly speed up our development time. Once you have downloaded and installed the application, open it up and you will be presented with the user interface as shown in the following screenshot:

On the right-hand side we have the Layers and Tilesets views; the left-hand side will contain our tile map. First we must create a new map, this can be done by navigating to File | New… or Ctrl + N. This brings up the new map dialog as shown in the following screenshot:

Here we can define the size and type of our map. We are only going to use orthogonal tile maps (as opposed to isometric), so go ahead and create an orthogonal tile map that is 20 tiles wide and 15 tiles high, with tile width and height both set to 32 px. We can now see our tile map in the left-hand side of the UI (Ctrl + G will show the grid). Tiled will also automatically create a layer for us called Tile Layer 1 (Visible in the Layers view...