What is Tiled?

Tiled is a free 2D level editor that helps you develop content for your game. If you want your game to have multiple levels,this tool makes the design process a lot easier. Of course, like any other tool, you must first learn how to use it before you can efficiently create stuff using it. This page aims to provide the basic outline of how to use the Tiled map editor.

Opening Tiled.

First, find the Tiled application by searching for in your computer. Press the Command + Space keys on your keyboard to open up the spotlight search and then type Tiled. The application logo look like this:

Once you've opened the application, you should see this:

Creating a new Level

Now that you've open Tiled, you can now start designing your new level your new level. First start by clicking on the the icon in the upper left corner of the paper with the yellow star.

You can also create a new file by using pressing Command + n keys on the keyboard.

After you've created a new file, this window will pop up.

The map section of the Map tells you what type of map you want to build. Orthogonal means that the map appear as a traditional flat 2D map. This setting is ideal for platformers and side scrollers games like Mario or street fighter.

Map Size allows you to see the dimensions of map: Width and Height in term of tiles. So if for example you want a map that is 32x32, the map will 32 tiles wide and 32 tiles high.

Tile size allows you to define how big each tile (the squares on the map) will be. You want to make sure that the tile size is an even multiple of the map size. So if your map size 32x32 tiles, the tile size should be a multiple of 32 ( example, 2, 4 ,16, etc.)

After the dimension of the the map have been defined, go ahead a click ok.

Editing the Map

Now You can start editing the map.

The first thing you are going to want to do is create a new layer.

look for the layer square located in the upper right side of the screen it looks like this:

To add a new layer click on the paper with the yellow star. You will get 3 option:

1.) Tile layer: with this type of layer you will be able to place tiles on the map. Use this type of layer to create things like a background layer, and the layer that character and enemies will stand on.

2.) Object Layer: this will be used to place the player, collectables, and enemies that will appear on the map. Good for creating spawn points.

3.) Image Layer: This will let you set an image on the level. Ideal for backgrounds with images, but not essential to the map. You could always just layer and image using the tile layer.

After you added a layer, add the tile set that you will be using by adding it to the menu right below the Layer Menu. It looks like this:

When you click on the add a new tile set ( paper with yellow start icon), will appear

Give the your new tile set a name, select what image you want to use by clicking on the browse button. Lastly set the size of tiles. Make sure the size is also an even multiple of the tile map size otherwise phaser will complain.

Once you've added both a layer and a tile set, begin editing. Go up to the menu:

and click on the stamp icon

and begin drawing.

This is what I made:

The backgroundLayer is made up of all the black squares.

CollideLayer is everything that the player can bump into and jump on. This will be done in phaser and later explained.

The object layer Called Player is where I want my player to appear. This will be the Spawn location of my player. I gave this layer a custom property called Playerstart which we will use in phaser to find the location.

Once all that is done you can save the file and Export it as a json file going to File->Export in the upper menu.

Tiled in Phaser.

Creating the map and exporting the json file wont make the actual map appear in the game. For that to happen we have to code it to.

First

Go to Preload.js and load the tileset, the tilemap image and the json file. Inside preload: function(){

use this.game.load.tilemap( Id of image, location of json file in your assets', null, Phaser.Tilemap.TILED_JSON)

the last argument Phaser.tilemap.TILED_JSON) lets phaser know what type of tilemap you will be loading.

Load the tile set and the player image by using: **this.game.load.image('id of image', 'location of image in your folder');

Here is an example of what it looks like:

Second

Inside the file that to want to use the map in (in my case its Game.js) we are going to create variables that represent the map, and the player.

Inside the create method ( what looks like create:function () { ) we are going to make a variable called map that will represent the tiled Map we created using the following code.

 //Remember that 'map' is id we gave the json file we loaded in Preload.js     
 this.map = this.game.add.tilemap('map');

Then use the following code to add the tiles to the map in phaser

//the first parameter is the tileset name as specified in the Tiled tiles set Menu, the second is the key to    the asset
this.map.addTilesetImage('tiles', 'gameTiles');

Then add the layers your created using the following code. Note that the variable names whatever you want them to be. I just made them backgroundlayer and blockedLayered because the names describes their function.

 // lets phaser acces the layers created in tiled. Make sured its 
 // is spelled the same way you spelled in in tiled.  
 this.backgroundlayer = this.map.createLayer('backgroundLayer');
 this.blockedLayer = this.map.createLayer('collideLayer');

With all of this code you should be able to load the tiled map you created and make them appear in your game. Use this same format to add additional layers or other maps to your game.

Art resources

Here are some place you can find art for your game.

[http://opengameart.org/](open Game art)

Kenney.nl

Create your own

Piskel