Getting Started Introduction to Tiled Map Editor Example Tutorial

In this article, we will see very simple basic tutorial on how to use Tiled to create maps, levels and use them inside your game. We will also learn how to use tiled for specifying areas of collisions within any game.

What is Tiled?

Tiled is a free software/tool which provides interface for easily creating maps, levels for game development. Tiled can also be used to specifying more abstract things such as collision areas, enemy spawn positions, or power-up positions. It saves all of this data in a convenient and standardized .tmx file format. The .tmx file created using Tiled can then be simply imported and used in your game.

Use Cases

Tiled can be used for creating levels for 2D platformer games like Super Mario. Look at the screenshot below.

For creating maps for games as shown below:

For creating Collision detection areas, Player spawning positions, Power up positions:

Creating Your First Map

Setup

Alternatively if you want to start from scratch, you can create a new map by going on File->New… Then provided the details as follows:

If you have used the alternate method, then Go to Map->Add External Tileset and provide the desert.tsx file. At this point we will have something like this as shown in the screenshot below:

If you have some different view or if Tilesets are not visible as shown in the above screenshot, you can make the following views visible as shown in the tick marks in the following screenshot:

Understanding drawing tools

Now lets look at the tools that we will use for creating our maps:

Short description of the tools (Left to Right) is as follows:

Stamp Brush – This tool is used to place a single tile on the map by left mouse click.

Terrain Brush – This tool requires a terrain information to be created first to draw terrain in our map. To know more about how to create terrain information, you can follow this post.

Bucket Fill Tool – This tool will fill the selected area with the tile selected from the tileset.

Eraser – It is similar to stamp brush except that it removes the tiles clicked using this tool.

Rectangular Select – This tool is used to select tiles enclosed in the rectangle created using this tool.

Magic Wand – This tools selects similar tiles which are adjacent to each other.

Now Lets begin using the tilesets we just added to draw our first map. Use the fill tool and draw the background for our map as shown below:

Now click on the Terrains view and select Bricks Terrain.

Use the terrain tool to draw the bricks for 2d platform. You can draw something like this as shown below:

Thus in similar way, we can create any map using any Tileset, be it a 2d platformer level or any other map for any game.

Now save this file as .tmx file. You can use this .tmx inside your game to parse this level’s information.

Adding Game Objects

We can also use tiled to add game objects such as player positions, placing power-ups, enemies, gates etc.

Objects can only be added inside an Object Layer. The map we just created was drawn on a Tile Layer. Lets create a new Object Layer to add our objects as shown below:

Now lets look at the tools required for creating objects:

There is no need for explanation about these tools, you can simply use and learn them. Please note that these tools can only be used inside an Object Layer only.

So select object layer we just created and use the above tools to draw the rectangles, boxes or any shapes you want in your map. You just need to provide custom property or different names to the objects to identify them in your game whether the object is a player, enemy, power up etc.

For example for creating player spawning object, we will add a rectangular object. Then right click on the object and go to Object Properties. Then set “Player” as Name in Object Properties. Similarly we can create other objects for spawning enemies, Power Ups etc.

Similarly you can also add custom properties for every tile in your tileset for providing collision detection.

Now save the .tmx file again and this file can be imported inside your game and objects can be parsed from every layer to create Player, enemies etc.

The Final Screenshot after adding some objects to our map would like something like this:

Conclusion

Thanx for reading this article – I hope you found it useful for getting started with Tiled Map Editor. To know more about how to create your own terrain information, you can follow this post.