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

Lets expand on the players environment

At the moment we have quite a boring game. We can just jump from one platform to the next in the vertical direction. Let’s expand our game world to allow our player to go to the right of the screen like a typical mario brothers type platformer and pave the way for more game assets. See below what we looking to achieve by the end of this tutorial.

What do we need to get our game to do this side scrolling?

The main concept of this scrolling is to get the game world camera to follow the player as he journeys through our world. In order to make sure this works correctly we need to add two key things. One we need to add a world bounds which basically tells phaser that our world is only so big. For the purposes of this tutorial we will be duplicating our floor and background object to create some continuity. The other change we need to apply is to tell phaser we want the camera to follow the player.

What is the code to allow the player to be followed?

In our create method we first of all need to set our world bound like so.


this.game.world.setBounds(0,0,1280,480);

The first two parameters are the position of our world bounding box. The second two parameters basically represents how big our entire world is.

After this also in our create method we need to set the camera to follow our player. Like so:


this.game.camera.follow(this.player);

This should now allow the camera to follow your player within the bounds of the world.

Other things that need to be done

We now obviously need to expand our assets otherwise our player is literally just going to run off the edge of the current game scene. To do this we need to convert some of our assets to groups. Mainly our floor and background assets need to be grouped.

In our create method you will need to do something similar to this:


//Floor
this.floors = this.add.group();
this.floors.enableBody = true;
this.floors.create(-2,414,'floor');
this.floors.create(668,414,'floor');
this.floors.setAll('body.immovable', true);
this.floors.setAll('body.allowGravity', false);

and


//background
this.backgrounds = this.add.group();
this.backgrounds.create(-10,-26,'background');
this.backgrounds.create(740,-26,'background');
this.game.world.sendToBack(this.backgrounds);

And then just to update your collisions you need to do something in the update method to this effect.


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

Screenshot with what you should end up with

Platformer game with extended game world.
Platformer game with extended game world.

Leave a Reply

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