The Grunt and Browserify Powered Phaser Boilerplate.

September 18th 2014

Phaser.io provides a fantastic and very well documented tool set for HTML5 games developers, one of it's advantages over rival technologies is that it doesn't impose a strict module pattern on those seeking to use it. This decision to empower it's users does create some overhead as developers must decide on a system for code reuse, orchestrate a build process to support it, as well as getting their application ready for production environments.

NPM & Browserify

Browserify is the backbone of my implementation. It enables access to NPM, does minification, provides source maps, sets up a watcher on the applications source, and enables a Common.JS flavoured module system. (If you're unfamiliar with Browserify I thoroughly recommend reading Substack's Browserify Handbook). You might think this covers everything, however Substack has left us with a little work to do.

Jade & Stylus

While there generally isn't a huge amount of raw markup involved in HTML5 game development I chose to build my pages on top of Jade. Primarily Jade allows me to import and use the properties file (src/properties.js) in my page's markup. It also happens to use a very minimal syntax and enables minification of the markup it produces, shaving off even more from the final payload size.

Stylus also has a very minimal syntax, enables variables and has automatic vendor prefixes, additionally it provides the ability to modularise our style sheets and break them out into separate documents to avoid ever having to deal with a thousand line CSS file.

Cache busted assets

You'll notice in the sample preloader that I append the asset URLs with a token:

This marks the file for a grunt module which (on production builds) hashes the contents of the file and replaces the aforementioned token with a query string which cache busts your assets. I've also added tags in index.jade where necessary, so JavaScript and CSS file changes will be covered too.

The kitchen sink

Because Browserify only compiles the libraries you require into your application, for convenience, I included a number of potentially useful libraries in the project, Lodash for object manipulation, Google Analytics for usage analysis, Mr Doob's frame counter Stats.js, and jQuery because you'll probably need it eventually. I also added a PNG optimisation grunt task (courtesy of Pngquant) to speed up asset creation.

File Structure

When it comes to exporting the minified code not all of the resources and source files in the src directories are going to be required to run the production build, I also wanted to avoid manual exports at all costs. As such, I opted to completely duplicate the necessary files from src and to place them in build after the various processes have taken place. This allows effortless exporting of the application by making the build a skinny and completely independent version of your game. build also serves as the web root for Connect.

Further Reading

For info on how to get started developing with it, be sure to read through the project's readme and raise issues for any bugs you find, or feature suggestions you might have.