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

Before we begin just a few improvements

We have decided to move away from our prototyping image set in our game to some more realistic graphical elements. We have replaced our background, our character and created a new bit of graphics for our ground level. See below what these look like now :

Platformer game environment with our new graphics.

You can get hold of these game assets by downloading them below. We have open licensed them for use with your projects feel free to make use of them any way you like.

The assets

Download them now.

The extra code for our gravity system

There firstly are a few things we need to enable in order to get the gravity system working in the first place.

In our init method we need to first of all start up the ARCADE physics system and then also give a gravity value which we will set to 1000. You can play around with this value to get different gravity effects in your game.

Now you should find that the floor is now completely fixed on the screen, however now our player is falling through the floor as well, so we need to setup a collider to prevent our player from falling through objects which it can collide with.

Setting up collision detection in phaser

We simply achieve this by telling the arcade physics engine that these two objects can collide. We do this in our update method like below:

this.game.physics.collide(this.player,this.floor);

Allowing our player to jump

First of all setup a upward velocity which we can apply to our player in our init method like so:

this.velocity = 170;

And then applying it when we press the up key in our update method like below: