Create a HTML5 game like Planet Revenge using Phaser and ARCADE physics – step 2

Let’s continue the step by step creation of Planet Revenge after the first four steps.

We are going to add a deadly floor and ceiling, using Tiled Map Editor to create the tile based level.

CREATING THE LEVEL

First we create the map, a 30×20 tile based level with 32×32 tiles.

Then we create the tileset, we are calling it “deadly” because tiles will be deadly.

And finally we draw the floor and the ceiling

Once you export the map as JSON, you will have something like this:

Be sure the paths to images have been set the right way, then it’s time to import the map into Phaser

IMPORTING THE MAP

Phaser has native support for tilemaps, so we just have to load both the map and the images, initialize the map and create the layer.

And now we have the tilemap displayed in game. You may have to click on the canvas to let the game start.

Unfortunately, the spaceship does not collide with the walls, so we have to enable collisions.

ENABLING COLLISIONS

To enable collisions we have to tell Phaser which tile is solid, then check for collision at each game update:

With just a couple of lines now we have collisions enabled.

If you try to drive your spaceship on the floor or on the ceiling you will see the collision in action.

DESTROYING THE SPACESHIP

We want the spaceship to be destroyed when it hits an obstacle, so we’ll add a callback function to the collision listener

Now if you run into an obstacle, game will restart.

Now it’s time to add an eye candy effect

MAKING THE SPACESHIP EXOLODE

With another couple of lines we are going to add a particle explosion and a timer to make level restart, this will make the game look more professional:

Now hit a wall and… BOOOM.

And that’s all for the second step. Next time I’ll show you how to play with levels and gravity. Meanwhile download the source code of each step.

  • Flávio Lopes

    Thanks for the tutorial.
    The phaser’s game code is organized usually in this way?
    What if I want to put the explosion callback in a separate method of the spaceship?

    Also, can you please suggest a code editor or IDE (except SublimeText) that autocompletes phaser’s code?

    • GeoCoder

      Suggest Brackets with a Phaser extension. I haven’t used it yet. Currently, I use VS2015 with Typescript as a language and an advanced Phaser template.

  • Bruce Van Horn

    One thing that threw me here was setCollision(1) — the 1 does not mean “true”, which is what I assumed when I read it; it’s the tiles you set as colliders. I had a map with two tiles on it – one for a wall like this one, and another for the ‘goal’. I wanted to see if I could distinguish between them. setCollision(1) turns on the “wall tiles” but does not set the others as colliders. I expected all the tiles on that level to be colliders because I thought 1 = true.