Getting Started Introduction to Tiled Map Editor Example Tutorial

By | November 13, 2015

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.

Introduction to tiled map level editor sample example tutorial

Use Cases

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

Tiled Terrain Tutorial

  • For creating maps for games as shown below:

Introduction to tiled map level editor sample example tutorial

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

Introduction to tiled map level editor sample example tutorial

 

Resources

  • You can download tiled from www.mapeditor.org
  • Other resources which will be used in this tutorial can be downloaded from here.

At its core, the design process of using Tiled to create maps, levels works by following these steps:

  1. Choose your map size and base tile size.
  2. Add tilesets from image(s).
  3. Place the tilesets on the map.
  4. Add any additional objects to represent something abstract.
  5. Save the map as a tmx file.
  6. Import the tmx file and interpret it for your game.

Lets begin by creating a sample map for a 2d platformer game.

Setup

Download map_files  and extract and open the .tmx file.

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:

Introduction to tiled map level editor sample example tutorial

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:

Introduction to tiled map level editor sample example tutorial

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:

Introduction to tiled map level editor sample example tutorial

Understanding drawing tools

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

Introduction to tiled map level editor sample example tutorial

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:

Introduction to tiled map level editor sample example tutorial

Now click on the Terrains view and select Bricks Terrain.

Introduction to tiled map level editor sample example tutorial

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

Introduction to tiled map level editor sample example tutorial

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:

Introduction to tiled map level editor sample example tutorial

Introduction to tiled map level editor sample example tutorial

Now lets look at the tools required for creating objects:

Introduction to tiled map level editor sample example tutorial

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:

Introduction to tiled map level editor sample example tutorial

 

 

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.

 

 

2,289 total views, 2 views today

(Visited 800 times, 2 visits today)