Game development a platformer game with Phaser and HTML 5: Tutorial 6

The goal for this game development tutorial

In this tutorial we want to get your phaser platformer game to this point where it is a little more interest.

Some of the bugs and modifications in this tutorial

We will deal with a few fixes as well. In our last tutorial we had some issues where our background would display above our platforms. In this tutorial I will show you how to fix this. Also we will be scaling our platforms and re positioning them to make them a bit more practical to jump around on. We will be modifying our jump height to get our player up onto those platforms.

The code to make our game a bit better

First in our init method we need to allow for a slightly bigger jump velocity. Here you can set it to 500 as per below.


this.JUMP = 500;

To fix our background issue where the background displays over our platforms we can simply use a method which is in the game object to change the ordering around.

Since our background will always be right at the back we can set our background in the create method like so.


this.game.world.sendToBack(this.background);

Make sure to add this in right after adding our background sprite to our game scene.

Then we made some modifications to the scaling in the game just to make everything a bit more realistic. For that we scaled our platforms down to 75% of it’s initial size. To do this make use of the following piece of code.


this.platforms.scale.setTo(0.75);

Right after creating the platforms group.

What about the collision detection with the platforms

In our last tutorial we could walk through our platforms what a big bummer, to fix this we simply add a collider to our platforms group and our player. We do this with the following piece of code.


this.game.physics.arcade.collide(this.player, this.platforms);

The platforms seems a bit off

We modified the positioning of the platforms a bit to make everything seem more playable as well with the below piece of code.


//Add a few platforms onto our game scene
this.platforms.create(100,130,'platform');
this.platforms.create(350,290,'platform');
this.platforms.create(180,450,'platform');

If you have done everything right you and crossed your T’s and dotted your I’s should end up with something similar to the screenshot below.

Example of the platformer game after implementing tutorial 6
Example of the platformer game after implementing tutorial 6

Comments 1

Leave a Reply

Your email address will not be published. Required fields are marked *