Phaser is an open source HTML5 game framework created by Photon Storm. It's designed to create games that will run on desktop and mobile web browsers. A lot of focus was given to performance inside of mobile web browsers, a growing and important area of web gaming.
If the device is capable then it uses WebGL for rendering, but otherwise it seamlessly reverts to Canvas. In this article, I'll cover resources for learning Phaser, as well as showing what it can do and some of the thinking that went into its design.
Yet Another HTML5 Game Framework?!
It's fair to say that it feels as if a new HTML5 game framework is released every week, such is the proliferation of them. So why should you even consider Phaser among the huge choice out there? I like to think that the reason is something to do with the legacy of the team involved in building it.
We at Photon Storm dedicated ourselves to developing nothing but HTML5 games several years ago, back when there really wasn't a great deal of framework choice, and you could count the number of HTML5 game devs in single digits. Entering the space so early, and coming from Flash, we were instantly feeling the need to build tools that we were used to in AS3.
We had been great fans of Flixel and had enjoyed success both with our own games and with our Flixel Power Tools. There was a real buzz seeing other devs use them to help get their games released, and this was something that we wished to duplicate in HTML5.
What we weren't prepared for, however, was just how fast the HTML5 landscape was changing. Even today, I have a slide in my presentations that I show at conferences saying "Be prepared to unlearn what you know every six months", and I believe this still remains true. Browser vendors are iterating and improving at a phenomenal rate right now. It takes only a matter of weeks for new features to bubble through to the public, and if you're saddled with a game framework that is maintained during someone's spare time or is on a slow release cycle, then it doesn't take long before things are very outdated.
Another sign of this change was in the types of client work we were being commissioned to build. As a company we only do two things: build HTML5 games, and build Phaser. We've built HTML5 games for some of the biggest entertainment brands in the world, and that has given us a keen insight into the sorts of requirements they demand. The biggest area we were being asked to work on was games running inside the mobile browser; so many HTML5 frameworks are focused on the desktop, where performance is abundant and connections fast and stable, and ignore the mobile browser side of life. Yet that is where we still see the client demand is strongest. So it was vital that Phaser could be used to build our client games, regardless of platform.
Since the release of Phaser 1.0, updates have been regular and comprehensive, with many new features and fixes in place quickly. We work on a turnaround of approximately one month from dev to master—you can view a complete changelog on GitHub. Interestingly, we're now seeing a demand for games running inside of a WebView, so we will ensure that Phaser operates well in this environment going into 2014.
As well as keeping Phaser up to date, it was also crucially important to us that we built something that was really easy to use. And you will see this reflected across the whole framework. This stems from our experience with the Flixel Power Tools, and beyond that when I used to work for The Game Creators helping to define the shape of their game languages. I guess it has always been part of me that I wanted to make game development as easy as possible for developers, a trend I will continue as Phaser evolves.
I apologise in advance of any of the following (or above!) sounds a bit 'marketing'. Phaser is a free product, we make no money from you using it, and if I enthuse about it, it is only because I'm passionate about what I've created. So please bear with me!
What Platforms Can I Target With Phaser?
Desktop Browsers
Phaser is a JavaScript library designed to run on all major desktop browsers. This includes Internet Explorer 9 and above, Firefox, Chrome, and Safari. Prior to IE9 it didn't support canvas, so if you absolutely need a framework that can handle DOM rendering then Phaser won't be suitable. However, demand for these types of games are becoming next to minimal; if anything, it's shifting the other direction (towards WebGL).
Mobile Browsers
On mobile, Phaser runs on iOS5 and above inside of Mobile Safari. On Android, it runs in 2.2 and above in both the stock browser and in Chrome. Chrome is now the standard Android browser, with recent versions even supporting WebGL, but you still can't ignore the millions of legacy Android devices that remain in use.
Firefox OS, Tizen, and Kindle
Thanks to Mozilla, we received a bunch of FFOS test devices, and have begun ensuring that Phaser runs well on them. So far, things look good, and we'll be producing deployment guides in the new year.
We've also seen Phaser games running well on Tizen devices and flawlessly under the Kindle HTML5 wrapper, meaning you can deploy to those devices 'out of the box'. As more web-powered phones start to enter the market, we will be sure to keep Phaser updated for them.
Native Apps and Desktop EXEs
There's such a massive choice of excellent game development packages that target creating native apps (Unity, Corona, Loom, and so on), that it wasn't an area we wished to spend much effort covering at first, especially when compared to the underserved mobile browser market.
However, with the development of wrappers like CocoonJS and Ejecta, we're seeing developers using Phaser wrap their games and release them as native apps. So, going into 2014 we will start adding support for CocoonJS direct into the core, as well as support for desktop wrappers like node-webkit.
Key Features
We'll highlight a few of what we consider to be the most important features of Phaser from a developer's point of view:
It's Just Plain JavaScript
This may sound like a strange 'feature', but it should actually be quite a compelling one. Phaser doesn't use any faux OO-style practises internally. There's no massive inheritance chain or component system, and you don't have to force your objects into any fixed class structure, either. It's a simple straight-forward prototype chain, the way JavaScript was meant to be used.
This doesn't mean you can't build your game in a structured way; far from it. All it means is that we don't enforce it. It also means that Phaser is internally very easy to hack around with.
But I Like TypeScript!
Good—because we have a TypeScript definitions file as well! There is a guide specifically on using Phaser with TypeScript available.
Easy Asset Loading
Phaser has a built-in asset Loader that can handle:
Images
Sprite Sheets (fixed sized frames)
Texture Atlases (including Texture Packer, JSON Hash, JSON Array, Flash CS6/CC, and Starling XML formats)
Audio files
Data Files (XML, JSON, plain text)
JavaScript files (so you can part-load your games or JS based resources)
Tilemaps (CSV and Tiled map formats)
Bitmap Fonts
We routinely export texture atlas files from Flash directly to our Phaser games, and it supports fully trimmed atlases. Assets can be part-loaded, cached, and pulled from different URLs (for CDN support), and you can even turn any sprite into a progress bar with a single line of code.
Rendering: WebGL and Canvas
Internally, Phaser uses Pixi.js for rendering. Pixi is a great, fast rendering library that focuses on Canvas and WebGL. It's a library we continue to contribute towards to help push things forward.
For your games, this means that if the browser supports WebGL then the player will more often than not get a smoother experience. WebGL is common on desktop but still emerging on mobile; even so, it is where HTML5 games are headed in the future, so supporting it is vital. The latest release of Phaser introduced WebGL shader and filter support, and forthcoming ones will implement normal maps so you can benefit from new tools like Sprite Lamp.
Audio: Web Audio and Legacy Audio
Audio has been one of the weakest points of HTML games for a long time. Only a couple of years ago, we were faced with the choice of having one single channel of high-latency audio that would cripple the device during playback or having no audio at all. But times have changed, and the Web Audio API came to our salvation. It allows for proper node-based audio support, with multiple channels, node routing and all kinds of effects. So Phaser fully supports Web Audio.
However, on Android especially, lots of devices still don't support thi—so we also support legacy Audio and the use of Audio Sprites: the method of packing a bunch of samples together into a single file and using playback markers to jump to different effects. Phaser will swap between the two depending on the device capabilities and also includes unlocking the audio sub-system automatically for you, something that catches out a lot of first-time mobile devs!
Input: Multi-Touch, Keyboard, Pointer, Mouse
When supporting desktop and mobile there are an increasingly varied number of potential input options. Phaser supports keyboard, mouse, touch, MSPointer (now Pointer under IE11), and combinations thereof. For example, on Windows Surface devices you could swap between using a mouse and touch, or indeed use both together.
For touch input, Phaser copes with both single-touch and multi-touch environments. You can define up to 10 touch points and track them all independently, using their events to handle Sprite interactions such as dragging, tapping, and collision.
Physics, Tweens, and Particles
Bundled into the core library are the ArcadePhysics and ArcadeParticles systems. These are simple AABB light-weight libraries that allow you to apply gravity and motion to any Sprite, then test for collision and separation. Using a world-based quadtree to help minimise collision tests, you can achieve decent results quickly with little processing time required.
However, we understand that this won't suit all types of games, so the physics system is easy to replace and none of the physics properties are bound to actual sprites (but rather to a body component), so can be swapped out for the likes of Box2D or p2.js. A tweening system is also built-in, allowing you to tween objects or properties easily. And should the game pause, then all of your tweens will pause automatically and resume as needed.
Plugins
It is our aim that the core of Phaser will eventually settle down and hit a nice stable equilibrium, where we're not likely to touch it much beyond fixes and browser updates. However, we want Phaser to carry on growing, providing features for all kinds of games but without causing the core library to explode in growth. To this end, we've built in a plugin system.
Phaser plugins can register themselves with the core framework, be updated in line with the core game loop, and perform all kinds of useful additional tasks. A great example of this is the recently released EasyStar path finding plugin. We will be releasing plugins ourselves and expect to see more coming from the community in the future.
Getting Started
Here we'll cover where to download Phaser, how to get set up for development, and where to start.
Downloading Phaser
The Phaser project is hosted on GitHub at https://github.com/photonstorm/phaser. There are two main branches: master is where the latest stable release can be found, and dev is where the work-in-progress version is built. As soon as a new version is completed, we push from dev to master and then dev is updated to prepare for the next release. Unless you know you require the dev branch, you should always start with master.
Ideally, you should use git and checkout or fork the repository, so you can easily update it. But if you're new to git or not comfortable using it yet, there is the option to download a zip file of the whole repository as well.
Related Posts
Git and GitHub for Game Developers
The Getting Started Guide
Once downloaded, we strongly suggest you follow the official Getting Started Guide. This will walk you through setting up a local web server, picking a development environment, and even building in the cloud if you so wish.
The guide breaks down into the following sections:
Introduction
Installing a web server
Run in the Cloud
Choosing an Editor
Downloading Phaser
Hello World!
The Phaser Examples
Next Steps
Making Your First Game
With your development environment set up, it's time to build a game. We recommend starting with the Making your first Phaser game tutorial. It will walk you through the process of creating a simple platform game, introduce you to the core concepts of how Phaser works, and set you up ready to expand on that and learn more.
The Phaser Examples
When you checkout or download Phaser, it will come with our Examples suite. This is a self-contained web site that consists of over 170 different code examples, split out into key areas: Physics, Collision, Sprites, Text, and more. Every example is a fully working self-contained piece of code that you can open, easily edit, and learn from. Used in conjunction with the API docs, these are a fast-track to quickly learning about specific parts of Phaser.
API Docs
The API Docs are available within the Phaser repository in the docs folder. We've been working hard on the docs for a few months now and, while still a little rough around the edges, they are now comprehensive, covering the entire framework.
The most recent release (1.1.3) saw another large update to them, with lots of areas filled out with more details, and it's our ongoing mission to enhance the docs with every new Phaser release.
JSHint
Since version 1.1.3 of Phaser, the full framework is now run through JSHint before release. We provide our configuration file in the repository as well.
JSHint is a way for us to ensure that the framework code follows a fixed set of code structure guidelines, from the way we handle tabs and indentation to variable names and quote styles. Those wishing to contribute towards Phaser should check their updates against our JSHint configuration.
Next Steps
If you've followed through this article you'll understand about why Phaser is great, what we've aimed to achieve from making it, and how you can learn to make games with it. But the most important aspect of any game framework isn't so much the features it sports or tech demos, it's the community behind it.
Making a game is hard work, period. And it's even harder to do in isolation, with a brand new framework that almost certainly works differently from anything you've used in the past. Thankfully, Phaser has a thriving community based around it.
HTML5 Game Devs Forum
We set up the HTML5 Game Devs forum a short while ago, not specifically for Phaser, but simply because making HTML5 games was such a new area that we wanted to be able to talk to others about it. Since then, it has gone from strength to strength, with active boards, 250,000 views a month and a friendly and professional user base.
It made sense that we would use this as the official home for Phaser, and you'll find lots of friendly fellow devs there to bounce ideas and questions off. The forum is also home to other great libraries including Pixi.js and the Babylon.js 3D framework, and there's a great Games Showcase area to show off whatever you make—dropping by there every day is a constant source of inspiration for me, and it's truly great to see what devs are managing to get HTML5 to do these days.
Newsletter
The Phaser Newsletter is released once a month and contains details about new releases, short articles about new Phaser topics and plugins and tutorials. Subscription is, of course, free, and is managed through Campaign Monitor, so you can be assured of no spam and an easy way to unsubscribe should you wish to.
Contribute
You can help shape the way in which Phaser grows. If you find a bug, please report it. It won't take you long, and to date we have fixed over 91% of all reported issues (and we're still working on the other 9%). You can also issue pull requests against the development branch, or release your own plugins or filters.
Show Us Your Games!
We spend many tireless hours working on Phaser because we want it to be the best HTML5 game development framework it can possibly be. We understand it won't be perfect for everyone, and we're cool with that. But if you use it and make something, no matter how small you think that is, please do let us know. You won't believe with a real motivational boost it is when devs show us the games they've been working on! Reach out to us either on the forum, via Twitter (@photonstorm) or by email.
Most of all, though, we truly hope you have fun making your game.