Using Tiled as a level editor with Phaser

When developing a game, look for ways to use tools that are proven to work and have solid integration with your game engine. This will allow you to focus on your game and not be distracted by creating custom tools to build your game’s content.

In this prototype, I’m building vertical levels that require the player to jump up, across, and the player wraps around the screen - similar to Kid Icarus. There are various powerups and a mechanic that gives the player a sense of danger - The Creeping Horak Yes - Masters of the Universe reference!).

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.

Tiled is used to layout all the spawn points of the player, skeletons, The Creeping Horak, and the boss - Medusa. The level design is manually built. From the platforms to the ladders and all the way to the vines, all the level assets are managed and placed in Tiled. From there the level data is loaded into Phaser. All the tile types bind to their respective mapped sprite within Phaser.

You’ll also notice when climbing vines and ladders - we use a different bank of sound effects for those elements - and that data is also handled in Tiled. When the data comes in for the audio - the bank of sound effects is assigned. When a collision happens with the player and that specific object tile - a random sound effect is pulled from the bank and used.

Building levels and getting quick feedback

Notice how we quickly make changes to the level and test the changes? If we take this a step further, we could have a listener within the game client that can hot load the new level data, pause the player, and run through the level data - update any cache and we’d have hot loading.

As game developers - we have to be open to engineering a faster pipeline. However, for this prototype we’re just playing around with some game mechanics and taking a deep dive into the important design questions - for example “are these mechanic fun or just the same old stuff?”

Tiled’s layer support gives you freedom to seperate your level tiles and in Phaser, you can access those layers - giving you foreground/background layout out of the box. Since Phaser can access layers seperately, you can simply target one group of tiles or objects to assign behaviors to.

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.

Resources