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

Some enhancements to the physics in our game

We now have quite a bit in our game we have discussed user input, basic gravity and velocity and some collision detection. We now need to make some improvements as currently our player can fly across the screen by holding in the jump key. In order to make this improvement we will need to create a block in the input when the player is in the air or the jump button has just been pressed.

In order to allow for this we add the following pieces of code to our update method.


if(this.player.body.touching.down) {
this.player.custom.jumpblocked = false;
}

and then we need to do a check when the input is done on the jump button.


if(this.cursors.up.isDown && !this.player.custom.jumpblocked) {
this.player.body.velocity.y = -this.JUMP;
this.player.custom.jumpblocked = true;

}

You should now have a scenario like the video below:

The concepts of object groups

In phaser we make use of groups to add certain types of objects to a group which we can manipulate parameters and properties on an entire group instead of one particular object. We in particular will make use of this to add our platforms to our game so that we can make them have certain properties.

First of all we need to load a platform. You can make use of the free resource we created below to add in as your platform.

The code for loading the platform and creating our object group

In our preload method we need to load our asset first of all.


this.load.image('platform','assets/images/platform.png');

Once this is done we need to do some initialisation of our group in our create method and set some properties on the group.


this.platforms = this.add.group();
this.platforms.enableBody = true;

 //Add a few platforms onto our game scene
 this.platforms.create(300,120,'platform');
 this.platforms.create(100,320,'platform');
 this.platforms.create(150,220,'platform');

this.platforms.setAll('body.immovable', true);
this.platforms.setAll('body.allowGravity', true);

At this point this is how your game should look.

In our next tutorial we will make this a little more practical so that our player can reach our platforms and be able to collide with them. However by now you should have a very good idea of how groups in phaser work.

Should you wish to check out tutorial four you can navigate there with the below link:

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

Comments 2

Leave a Reply

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