Building a platformer game with Phaser and HTML 5: Tutorial 2

So lets talk about assets in our platformer game development project

Generally in Phaser we have a few assets which we need to know about and we need to know how to load them to our scene.  For our phaser platformer game development project we  need to now load our assets. Some of the assets we could potentially load are:

  1. Sprites – This basically is just a 2D image of a character or object.
  2. Spritesheets – These are images which contain many sprites with different frames tightly woven into one image, generally these are used to animate objects or characters in your game scene.
  3. Text – We load this type of data often to allow for game settings, level maps and other types of data we want to load without having to recompile our code each time.
  4. Audio – All the sounds you wish to introduce in your game.

So how do we load these assets?

Before we move into the code we quickly need to talk about screen sizing and the init function. When your device sizes start to differ this may cause issues with your game on different screen resolutions for this reason we use the Phaser ScaleManager to size the scene and world size correctly to fit the device. You will see below in the code how we do this using the scaleMode setting.

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() {
 create:function() {
 var floor =,440,'floor');



Generally as you see above we will load our assets in our preload function. Above we load a asset called floor and add it to our scene to get an idea of how everything fits together in the scene.  I will now explain how each of the above functions work.

First in the init function we set the scaleMode to the SHOW_ALL value which will allow us to size our game to fit our screen size.

In preload we load an image the first parameter we just give the asset a name and in the second parameter we provide the path to the image.

In the create function we  add the sprite to our scene at x:0 and y:440 the co ordinate system of our scene starts with 0:0 being the top left corner and the bottom left corner would be x:0 and our scene height. All co ordinates start from the top down moving left to right.

We are using what we call prototyping assets which is simply just block images but you can use your own for the purposes of this tutorial our scene now looks like the image below:

Screenshot of a basic floor on screen
Screenshot of a basic floor on screen of our game development project with phaser

If you missed our first tutorial you can read it here :
Building a platformer game with Phaser and HTML 5: Tutorial 1

Comments 6

Leave a Reply

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