You may have heard about the Phaser framework, which is fast becoming popular and is considered by many to be the best HTML5 game framework out there at the moment. Follow along in this post where I will go into some detail about what makes it so unique.
Why Phaser?
Phaser is a free open source HTML5 game framework that allows you to make fully fledged 2D games in a browser with little prior knowledge about either game development or JavaScript for designing for a browser in general.
It was built and is maintained by a UK-based HTML5 game studio called Photon Storm, directed by Richard Davey, a very well-known flash developer and now full-time HTML5 game developer.
His company uses the framework for all of their games, so the framework is updated daily and is thoroughly tested.
The fact that the framework is updated daily might sound like a double-edged sword to you, but now that Phaser has reached its 2.0 version, there won’t be any changes that break its compatibility, only new features, meaning you can download Phaser and be pretty sure that your code will work in future versions of the framework.
Phaser is beginner friendly!
One of the main strengths of the framework is its ease of use, and this is probably one of the reasons why it has gained such momentum in such a short amount of time (the framework is just over a year old).
In fact, Phaser abstracts away all of the complicated math that is usually required to make a game by providing you with more than just game components.It allows you to skip the part that you spend thinking about how you can implement a given special feature and what level of calculus it requires.
With Phaser, everything is simple. For instance, say you want to shoot something using a sprite or the mouse cursor.Whether it is for a space invader or a tower defense game, here is what you would normally have to do to your bullet object (the following example uses pseudo-code and is not tied to any framework):
var speed = 50;
var vectorX = mouseX - bullet.x;
var vectorY = mouseY - bullet.y;
// if you were to shoot a target, not the mouse
vectorX = targetSprite.x - bullet.x;
vectorY = targetSprite.y - bullet.y;
var angle = Math.atan2(vectorY,vectorX);
bullet.x += Math.cos(angle) * speed;
bullet.y += Math.sin(angle) * speed;
With Phaser, here is what you would have to do:
var speed = 50;game.physics.arcade.moveToPointer(bullet, speed);// if you were to shoot a target : game.physics.arcade.moveToObject(bullet,target, speed);The fact that the framework was used in a number of games during the latest Ludum Dare (a popular Internet game jam) highly reflects this ease of use.There were about 60 games at Ludum Dare, and you can have a look at themhere.
To get started with learning Phaser, take a look here at thePhaser examples, where you’ll find over 350 playable examples. Each example includes a simple demo explaining how to do specific actions with the framework, such as creating particles, using the camera, tweening elements, animating sprites, using the physics engine, and so on. A lot of effort has been put into these examples, and they are all maintained with new ones constantly added by either the creator or the community all the time.
Phaser doesn’t need any additional dependencies
When using a framework, you will usually need an external device library, one for the math and physics calculations, a time management engine, and so on. With Phaser, everything is provided, giving you a very exhaustive device class that you can use to detect the browser’s capabilities that is integrated into the framework and is used extensively internally and in games to manage scaling.
Yeah, but I don’t like the physics engine…
Physics engines are usually a major feature in a game framework, and that is a fair point, since physics engines often have their own vocabulary and way of dealing and measuring things. And it’s not always easy to switch over from one to another.
The physics engines were a really important part of the Phaser 2.0 release. As of today, there are three physics engines fully integrated into Phaser’s core, with the possibility to create a custom build of the framework in order to avoid a bloated source code. A physics management module was also created for this release.It dramatically reduces the pain to make your own or an existing physics engine work with the framework. This was the main goal of this feature: make the framework physics-agnostic.
Conclusion
Photon Storm has put a lot of effort into their framework, and as a result the framework has become widely used by both hobbyists and professional developers. The HTML5 game developers forum is always full of new topics and the community is very helpful as a whole. I hope to see you there.