In this article I’ll give you a basic introduction to the Tiled Map Editor and the design process that surrounds it, while outlining the reasons for using it. I’ll also quickly show you how to actually create a map within Tiled.
Requirements
- Tiled version 0.8.1: http://www.mapeditor.org/
- Tileset from here. These tiles are a slightly modified set from the OpenGameArt.org Community Tileset: http://opengameart.org
What Is Tiled?
Tiled is a general purpose tile map editor. It functions as a free tool to allow the easy creation of map layouts. It is versatile enough to allow specifying more abstract things such as collision areas, enemy spawn positions, or power-up positions. It saves all of this data in a convenient, standardized tmx format.
How Does Tiled Work?
At its core the design process of using Tiled to create maps works by following the following steps:
- Choose your map size and base tile size.
- Add tilesets from image(s).
- Place the tilesets on the map.
- Add any additional objects to represent something abstract.
- Save the map as a
tmxfile. - Import the
tmxfile and interpret it for your game.
Why Should I Use Tiled?
Having a standardized system and a powerful flexible tool already in place allows you to focus on more important things in your game. With Tiled you’ll be able to take a few tilesets, create your level, and be on your way.
Even if you don’t want your game to have tile-based maps, Tiled is still an excellent choice as a level editor. With Tiled you can specify the size of each tile in your image; you can create your map without a strict size on the images. Then you can use Tiled for all those invisible entities such as collision areas, or object spawns within your map.
Once you’re able to interpret the tmx data to your game, the Tiled tools becomes a fast artwork to map pipeline. Since creating maps in Tiled is so simple and takes zero programming experience, even non-developers can use it.
Another reason to use Tiled is that all the map layout information is stored in the tmx file. This is powerful because it allows you to send the tmx file to a player, and they would instantly have the layout without having to redownload the client (assuming the tmx map uses textures already on the player’s computer).
Creating Your First Map
Onto the next part of the tutorial, where we will use the aforementioned tileset, in order to create a map.
Setup
After launching Tiled go to File > New… to start making a new map. A new menu will pop up where you have a few options:
Orientation: We have a selection between isometric and orthogonal. For this article, select Orthogonal.
Map Size: Select 20 for both the width and height since we won’t need a large map for this example. This can be resized later on.
Tile Size: For the tutorial set both the width and height to 32 px. Tile size cannot be changed once you’ve selected it. You will have to start a new map from scratch if you want a new tile size
Now that we have our map dimensions setup we want to create a tileset for the ground. Select Map>New Tileset…
Image: Select grass-tiles-2-small.png from the included tileset images. The Name field will be automatically set to the filename, but feel free to change it to your desires.
Tiles: Again, set the width and height to 32px.
Tiled should look like this:
Adding the Terrain
As you can see on the bottom right of the image in the Tilesets view, I have four tiles selected. You can select one or multiple tiles by simply clicking and dragging in the Tilesets window. When you click on the large grey area these tiles will be stamped onto the coordinate (with the coordinate being listed on the bottom left of the grey area). Keep an eye on this, since you won’t be able to stamp outside the map coordinate – 20 in this case (as specified in our map settings) – or on negative coordinates.
You may notice that you can drag the stamp around the map for fast tile placement; however, this can be problematic when you have more than one tile selected for your tileset, since it will just overwrite the previous tiles. A nice solution is a random selection from the tiles you have selected. You can enable this by clicking the dice icon at the top of the window. With this enabled, Tiled will randomly select the tile from the ones you have selected and place it as you drag.
Be sure to save often!
There is also a fill tool, and eraser tool that I’m sure you will find useful! You can also rotate and invert your selected tile with the Z and X keys.
After playing with it for a little while, you can expect to have something like this:
Adding a Foreground Object
Now our little map is looking a little bare, so let’s add a tree to the scene. Go to Map > New Tileset… and this time select the file tree2-final.png. Again use a width and height of 32px.
Next we want to create a new tile layer to go over the grass layer. Select Layer > Add Tile Layer.
We should have Tile Layer 2 now listed in the Layers menu. Not a very pretty name, so let’s rename it to Foreground, and rename Tile Layer 1 to Background.
Before we add the entire tree, just select the base of the tree and add the tree where you want, as seen in the image below.
This might seem a bit strange but bear with me here. When we have this map in our game, we would want our character to appear behind the tree when it walks past, so we will need to give the tree leaves some property to tell your game to render it over the character. You may have noticed that this doesn’t match perfectly with the tile sizes, but it can be tweaked with altering the image size or tile sizes.
In this case, let’s create a new layer, and name it Top, to tell our game to display it on top of the character.
Now with the Top layer selected, select the rest of the tree tileset (everything except the trunk), and place it onto the trunk. You can select more complex areas of the tileset by holding down the Ctrl key.
There are a variety of ways of telling the game we want to render things on top of others such as adding a property to a layer, or a specific tile. I prefer using a layer for everything that will be rendered above the character since it helps keep everything organized.
Tiled Without Tiles
As I mentioned, you can use Tiled without it being “tiled”. Here’s a quick example.
Add a new tileset with Map > New Tileset… and select the tree again, but this time set the tile width and height to 256px. Essentially you’re creating a tileset from the exact size of the image, therefore making it one tile big. This creates much more free space for placement since you could essentially make your entire map with any image editor without being limited to tile sizes, and then import it using this method. From there you can add objects which allow anything.
Specifying Collisions
Now if we wanted to specify collisions there are a few ways we can do that too. I’m going to use an object layer since they can be used for just about anything, so it will be a nice introduction.
Select Layer > Add Object Layer. With the object layer selected, select the “Insert Object” at the top of the menu. Now you can click and drag a box around the trunk of the tree to define the collision box.
That’s it! Pat yourself on the back as you’ve just completed the initial map.
Conclusion
Thanks for reading this article – I hope you found it a useful introduction to Tiled. In a future tutorial, I’ll go on to talk about interpreting the TMX format and getting this map into your game. Subscribe to Gamedevtuts+ to make sure you don’t miss it!