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 development environment with our new graphics.
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.; = 1000;

Now when you reload your game you may notice that now everything is falling through our game world. We need to make some adjustments to prevent this from happening for platforms and the floor.

In our create method we need to make our floor object immovable and not allow gravity to effect it.

this.floor.body.allowGravity = false;
this.floor.body.immovable = true;

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.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:

if(this.cursors.up.isDown) {
this.player.body.velocity.y = -this.JUMP;

You will notice now your player can jump and move about the screen.

The full code of main.js to get everyone up to date

Just for easy reference purposes here is the full code set again for your use:

var game = new Phaser.Game(640,480,Phaser.AUTO,'');

var mainState = {
init: function() {
//this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.VELOCITY = 170;
this.JUMP = 170;
this.cursors =;; = 1000;


preload: function() {
this.load.spritesheet('player', 'assets/images/newplayer.png', 140, 211, 3);
create:function() {
this.floor =,414,'floor');;
this.floor.body.allowGravity = false;
this.floor.body.immovable = true;
this.background =,-26,'background');

//Player setup
this.player =,10,'player');
this.player.custom = {};
this.player.custom.sizeX = 0.4;
this.player.custom.sizeY = 0.4;
this.player.scale.setTo(this.player.custom.sizeX , this.player.custom.sizeY);
this.player.frame = 3;

update:function() {, this.floor);
this.player.body.velocity.x = 0;

if(this.cursors.left.isDown) {
this.player.body.velocity.x = -this.VELOCITY;
this.player.scale.setTo(-1 * this.player.custom.sizeX , this.player.custom.sizeY);'playerwalking');
else if(this.cursors.right.isDown) {
this.player.body.velocity.x = this.VELOCITY;
this.player.scale.setTo(this.player.custom.sizeX, this.player.custom.sizeY);'playerwalking');
else {
this.player.frame = 0;

if(this.cursors.up.isDown) {
this.player.body.velocity.y = -this.JUMP;





Here is what your game should like at this point in time

Missed our last tutorial feel free to check it out here :
Game development a platformer game with Phaser and HTML 5: Tutorial 3

Comments 2

Leave a Reply

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