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.

Boilerplate

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!

Advertisements
Developing Games with Phaser

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s