Developing Games with Phaser

Developing games with canvas is incredibly fun, but rewriting the same boilerplate code (game loop, key handling, etc.) can be annoying. Additionally, handling the processes of spritesheet handling and tilemapping can be a total pain. Luckily for us, we can use engines like Phaser, Quintus, and Impact to do most of the hard work, allowing us to focus on getting our game out there.

What is Phaser?

Phaser is a quick game framework that is super easy to use, and works on mobile devices. It is my goto framework for HTML5, and is insanely fast to prototype games with.


All of the code you need, besides the framework itself, is contained in the following:

var mainState = function(game) {};

// Essential functions: preload, create, update
mainState.prototype.preload = function() {
 // load assets

mainState.prototype.create = function() {
 // create objects

mainState.prototype.update = function() {
 // called 60 frames per second

var game = new Phaser.Game(600, 400, Phaser.AUTO, 'game');
game.state.add('game', mainState, true);

This code contains asset loading (through the preloading function), object creation (in the create function), and our game loop (through the update function). By linking the Phaser library and setting up this small amount of code, you already have a canvas ready and you are good to go with beginning your game! For further information, the Phaser site has fantastic guide on getting started: here. They also have an extensive page of examples examples that you can look through to see how much the engine can handle, and learn how to setup some simple games. Have fun!

Developing Games with Phaser

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s