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

Revision of what we have built so far in our game development project

So far we have put together a basic screen which displays a green platform on the screen for us to view. Let’s add our player and some basic physics.

Lets talk about sprite sheets in our platformer game

Sprite sheets are essentially sheets which hold multiple frames of our sprite in one singular image file which we can use to animate our sprites. This can be useful for animating in game elements such as grass, flowers and other moving objects. Mostly this technique is used for player sprite animation.  Lets see what the code looks like to load our sprite sheet, once again we will just be using prototyping images for one sprite sheet.

The code to load our player sprite sheet into our platformer game project


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;
 },
 preload: function() {
 this.load.image('floor','assets/images/ground.png');
 this.load.spritesheet('player', 'assets/images/player_spritesheet.png', 29, 29, 5);
 },
 create:function() {
 var floor = this.game.add.sprite(0,440,'floor');
 var player = this.game.add.sprite(0,0,'player');
 }
};

game.state.add('mainState',mainState);

game.state.start('mainState');

We will use the method this.load.spritesheet in order to load our sprite sheet this method take five parameters first the unique key for the player object, then the path to our sprite sheet image then this is followed by frame width and height and then finally the number of frames. Once this has been done we then load up the sprite by adding it to the scene at the position 0,0.

Animating the player sprite and controlling it with the arrow keys

First of all just to have a current frame set we will set the initial frame to use to frame 3 in our create method by simply adding.Don’t worry about this now, I will add the full code at the end of the tutorial so you can understand how it all fits together, just for now I will show you how to set the initial frame.

player.frame = 3;

You should have something like this now:

Platform game development tutorial showing our inserted player in our scene
Platform game development tutorial showing our inserted player in our scene

Now that we have an initial frame lets create our animations for our various movements.

It is always a good idea to explicitly name your animations in the format ‘spriteobjectname’ ‘action’ see below how we do this to add our animations for a walking movement.


player.animations.add('playerwalking',[0,1],true);



Controlling our player in the game world

We are now going to start introducing our update method which allows us to run code a few times per second so this is an ideal place for us to check for user input and then in turn control our player.


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

if(this.cursors.left.isDown) {
 this.player.body.velocity.x = -this.VELOCITY;
 this.player.scale.setTo(1, 1);
 this.player.play('playerwalking');
 }
 else if(this.cursors.right.isDown) {
 this.player.body.velocity.x = this.VELOCITY;
 this.player.scale.setTo(-1, 1);
 this.player.play('playerwalking');
 }
 else {
 this.player.animations.stop();
 this.player.frame = 3;

}

}

Now there are a few other things which had to happen in order to make this work.

The initialisation to get our player moving and animated

First of all in our init method we had to initialise our keyboard input object with createCursorKeys().


init: function() {
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
 this.game.physics.startSystem(Phaser.Physics.ARCADE);
 this.scale.pageAlignHorizontally = true;
 this.scale.pageAlignVertically = true;
 this.VELOCITY = 170;
 this.cursors = this.game.input.keyboard.createCursorKeys();
 }

Then in our create method we had to enable game physics so that we would be able to add and subtract velocity from our player.


create:function() {
 var floor = this.game.add.sprite(0,440,'floor');
 this.player = this.game.add.sprite(10,10,'player');
 this.player.frame = 3;
 this.player.animations.add('playerwalking',[0,1],true);
 
 this.game.physics.arcade.enable(this.player);
 
 }

Once this has been done your player should be able to move left and right on screen and reset it’s animation to frame 3 once it stops moving.

What it should look like

"<yoastmark

In our next tutorial we will start discussing more in depth physics principles and add a few more objects to our plat former game scene.

If you have missed our last tutorial and want to go back to it now by clicking the following link :
Building a platformer game with Phaser and HTML 5: Tutorial 2

Comments 1

Leave a Reply

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