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

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

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.