Phaser - an open source JavaScript framework for HTML5 game development

When it comes to creating games, you had the opportunity to learn about many different part of it on our blog, such as working with HTML5 or creating great designs. Right now it's time go get familiar with Phaser, which implements a lot of useful functions that will make your work easier and help you to debug your project.

Phaser installation

To start using it you just need to type lines in your HTML template.

<canvas id=”phaser” width=”800” height=”600”></canvas> 

Here your game will be rendered:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser', { preload: preload, create: create, update: update });

This line is responsible for creating a new instance of the framework. First two parameters are width and height of the game. Third one is render type (Canvas or WebGL). Next one is for HTML canvas id. The last one is an object where you define essential functions to load assets, create all elements and update everything. The functions you have to define are:

• preload function - it's responsible for loading all assets,

• create function - in it you must add all objects to the game,

• update - it's executed on every frame and in this function you can create your game logic.

Phaser supports Canvas and WebGL rendering. In both cases the render engine is pixi.js. It also has an automatic system for detection of that two types of rendering. When browser supports WebGL, then that mode will be used. Otherwise everything will be managed by Canvas. It's useful when you want to create cross platform game that must work on desktop and mobile. If you want to automatically detect mode just use Phaser.AUTO. To use WebGL change it to Phaser.WEBGL. If you have to use Canvas you will need to replace it with Phaser.CANVAS.

There is a simple way to load all assets. To load your images, sounds, spritesheets, tile maps or json and xml files you just need one line of code. IPhaser will automatically make them ready to use and stored in cache. To do this you must add code to your preload function.

function preload() {
    game.load.image(key, url);
    game.load.json(key, url);
    game.load.spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing);
    game.load.tilemap(key, url, data, format);
    game.load.xml(key, url);
}

Phaser in standard version supports 3 physics engines:

• arcade – it’s a simple AABB physics that works with low-powered devices. However, this doesn't mean that this is an engine only for simple games;
• ninja – extended Arcade that works with circles, triangles and advanced tilemaps;
• P2 – it’s a full body physics engine with advanced polygon support.

You don’t have to worry about detecting collisions - every engine has a special system that takes care of this problem. It is also possible to set a callback function that will be executed after each collision.

Sprites - managing images in your game

There are a lot of possibilities to use Sprites. You can do almost anything with them, such as setting position, tweening, rotating, scaling, animating or colliding. It also has a full input support like click, touch and drag.

Phaser has a group system to collect same sprites (like bullets or ground platforms). It's useful for collisions between elements, so you have to create them only for groups, not separately for each element. 

Here you have two ways of adding objects to groups:

var enemies = game.add.group();
var friendAndFoe = game.add.group();
 
for (var i = 0; i < 16; i++) {
    enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200, 'baddie');
}
 
var ufo = game.add.sprite(200, 240, 'ufo');

friendAndFoe.add(ufo);

Creating animations

You have few different ways of creating animations. You can do it via classic spritesheet, JSON or XML files or by tween property of sprite.

var bounce=game.add.tween(ball);

bounce.to({ y: game.world.height-ball.height }, 1000 + Math.random() * 3000, Phaser.Easing.Bounce.In);
bounce.onComplete.add(startBounceTween, this);
bounce.start();

Phaser has a very good support for inputs. It doesn't matter if it's mouse, keyboard or touch screen. Framework can easily recognize the input type and if something works when it’s mouse-clicked, then it will also work for touch event.

Now we have to enable the sprite drag:

sprite.input.enableDrag();

Managing sounds also is very easy. After each audio file has been loaded and added to our game (similarly to sprites), then it can be played with a simple play function.

game.load.audio('music', 'assets/audio/fx_mixdown.ogg');
var music = game.add.audio('music');
music.play();

Phaser allows to add and use tilemaps in a very easy way. You just need to add json file with tilemap structure and images to create walls.

game.load.tilemap('map', 'assets/tilemaps/maps/features_test.json', null, Phaser.Tilemap.TILED_JSON);
 
var map = game.add.tilemap('map');
map.addTilesetImage('ground_1x1');
map.addTilesetImage('walls_1x2');
map.addTilesetImage('tiles2');

If you want to have responsive game you need to use the built-in Scale Manager, which allows you to scale the whole game and therefore fit it to different screen sizes.

game.scale.maxWidth = 800;
game.scale.maxHeight = 600;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.updateLayout();

If you want something that is not built-in by default, you can use a plugin system that allows you to create additional functionalities. You don't need to change the core file - just add your own.

Phaser.Plugin.SamplePlugin = function (game, parent) {
            Phaser.Plugin.call(this, game, parent);
            this.sprite = null;
};
Phaser.Plugin.SamplePlugin.prototype = Object.create(Phaser.Plugin.prototype);
Phaser.Plugin.SamplePlugin.prototype.constructor = Phaser.Plugin.SamplePlugin;
 
Phaser.Plugin.SamplePlugin.prototype.addSprite = function (sprite) {
            this.sprite = sprite;
};
Phaser.Plugin.SamplePlugin.prototype.update = function () {
            if (this.sprite) {
                        this.sprite.x += 0.5;
            }
};

Now you have to add newly created plugin to your instance of the framework:

this.samplePlugin = this.game.plugins.add(new Phaser.Plugin.SamplePlugin(this));

After that you can call your plugin methods with the code below

this.sameplePlugin.addSprite(sprite);

Using Phaser can save a lot of development time. You don't have to worry about many time-consuming things, such as collision detection or inputs.

If you want to use Phaser you just will need your favorite editor/IDE, knowledge of JavaScript and the Phaser source. The latter can be downloaded from project site or github. Additionally, the documentation of this framework is really well-written and filled with great examples.

Alternatives to Phaser

There are a few good alternatives to Phaser, such as ImpactJS, EaselJS or melonJS. However, they are not as popular and don't offer as many built-in functions as Phaser.

Is Phaser worth working with?

Of course it is! In summary, Phaser is a very powerful, easy to learn framework that allows you to develop HTML5 games. The built-in functions are useful and time-saving - we don't have to worry about writing such basics as collision detection, assets loading, rendering method detection or touch events. If there is a problem with Phaser, its official forum is very useful and filled with really helpful developers.