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

What next in this game development tutorial

We now have a bit more room in our game to add some more objects. To make this game a bit more exciting we need to add some obstacles which the player needs to avoid. If the player manages to not avoid them the player dies.

In this tutorial we will setup these hazards and show how to make your player object a bit more versatile. In order to have things like lives and other states later on.

The game assets for this tutorial

We going to be adding two types of hazards to our game. Fire and some spikes which if the player touches will kill the player.  You can download these assets below to follow a long in this tutorial and once again feel free to make use of these in other projects as well.

Spikes free game asset
Spikes free game asset
Fire spritesheet free game asset
Fire spritesheet free game asset

Lets load them up and create an animation for our fire

First in our init method we need to load our assets.


this.load.image('spike','assets/images/spikes.png');
this.load.spritesheet('fire', 'assets/images/fire_spritesheet.png', 81, 107, 2);

Lets setup our fires and spikes


//Fire
this.fires = this.add.group();
this.fires.enableBody = true;
var fire1 = this.fires.create(900, 780,'fire');
var fire2 = this.fires.create(1300, 780,'fire');

fire1.animations.add('fire', [0, 1], 4, true);
fire1.play('fire');
fire2.animations.add('fire', [0, 1], 4, true);
fire2.play('fire');

fire1.anchor.setTo(0.5);
fire2.anchor.setTo(0.5);
this.fires.scale.setTo(0.5);

this.fires.setAll('body.immovable', true);
this.fires.setAll('body.allowGravity', false);
this.game.world.bringToTop(this.fires);

//Spikes
this.spikes = this.add.group();
this.spikes.enableBody = true;
var spike1 = this.spikes.create(1600, 780,'spike');
var spike2 = this.spikes.create(1900, 780,'spike');

spike1.animations.add('spike', [0, 1], 4, true);
spike1.play('spike');
spike2.animations.add('spike', [0, 1], 4, true);
spike2.play('spike');

spike1.anchor.setTo(0.5);
spike2.anchor.setTo(0.5);
this.spikes.scale.setTo(0.5);

this.spikes.setAll('body.immovable', true);
this.spikes.setAll('body.allowGravity', false);
this.game.world.bringToTop(this.spikes);

How it should look at this point in time.

Killing our player

To make our lives easier we will move this into a method of it’s own which we can call when a certain event occurs. To keep it simple we will simply restart the game when we touch fire or a spike. First lets create a method to do this.


killOurPlayer: function(player,hazard) {
game.state.start('mainState');
}

Then we need to do some overlapping detection with our hazards. We place following code below into our update method.


this.game.physics.arcade.overlap(this.player, this.fires, this.killOurPlayer);
this.game.physics.arcade.overlap(this.player, this.spikes, this.killOurPlayer);

How does the final game look after tutorial 8

Leave a Reply

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