Using Tiled as a level editor with Phaser

When developing a game, it’s important to use proven tools that integrate well with your game engine. By doing so, you can focus on the game’s content rather than getting bogged down with creating custom tools.

For example, in a recent prototype I was developing vertical levels inspired by Kid Icarus that required the player to jump up, across, and wrap around the screen. The levels contained various powerups and a danger mechanic.

Powerups

Powerups randomly drop when Skeletons die:

Heart: Player is healed for a fixed amount.
Arrows: Arrows can drop by groups of three - two and a single arrow can drop.
Nothing: Nothing drops based on the rest of the loot table.

To manage the level design, I used Tiled, a tool that enables the layout of all player, enemy, and boss spawn points, as well as the placement of all level assets, such as platforms, ladders, and vines. Once placed in Tiled, the level data was loaded into Phaser, where all tile types were bound to their respective mapped sprite.

Building levels and getting quick feedback

Tiled’s layer support allowed me to separate level tiles into foreground and background layers, which could then be accessed separately in Phaser to assign behaviors to. This gave me the freedom to quickly make changes to the level design and test them, leading to faster iteration and better game development.

Tiled was also used to handle audio data, with different sound effects assigned to different objects such as vines and ladders. When a collision occurred with a specific object tile, a random sound effect was pulled from the corresponding sound bank.

Overall, Tiled proved to be a powerful tool for managing game content and streamlining the development pipeline. If you’re interested in using Tiled for 2D game development, I recommend taking a deep dive and building a simple game with collisions and object zones to learn the program.

Example

map.json

{
  "height": 10,
  "layers": [
    {
      "data": [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0
      ],
      "name": "Tile Layer 1",
      "opacity": 1,
      "type": "tilelayer",
      "visible": true,
      "width": 10,
      "x": 0,
      "y": 0
    }
  ],
  "tileheight": 32,
  "tilesets": [
    {
      "columns": 4,
      "firstgid": 1,
      "image": "tiles.png",
      "imageheight": 128,
      "imagewidth": 128,
      "margin": 0,
      "name": "tiles",
      "spacing": 0,
      "tilecount": 16,
      "tileheight": 32,
      "tilewidth": 32
    }
  ],
  "tilewidth": 32,
  "version": 1,
  "width": 10
}

game.js

const config = {
  type: Phaser.AUTO,
  width: 320,
  height: 240,
  scene: {
    preload: preload,
    create: create
  }
};

const game = new Phaser.Game(config);

function preload() {
  this.load.tilemapTiledJSON('map', 'map.json');
  this.load.image('tiles', 'tiles.png');
}

function create() {
  const map = this.make.tilemap({ key: 'map' });
  const tiles = map.addTilesetImage('tiles');
  const layer = map.createStaticLayer(0, tiles, 0, 0);
}

Tiled - take a deep dive

If 2D game development has peaked your interest and you want to get started using Tiled - I recommend taking a deep dive with it. Build a simple game with collisions and object zones and learn the program. It does have a few quirks but nothing that any other editor or homegrown tool would have.