Grunt and Browserify powered, source map generating, cachebusting Phaser.js boilerplate.
JavaScript HTML CSS
Latest commit fc28137 Feb 25, 2017 @lukewilde Lint.
Permalink
Failed to load latest commit information.
src
.gitignore Tersifying gitignore. Jul 7, 2014
.jshintrc
gruntfile.js Lint. Feb 26, 2017
license.txt
package.json Simplifying browserify shim config for doob stats. Feb 13, 2017
readme.md Switched to a more standard coding style. Feb 26, 2017

readme.md

A Phaser.js Boilerplate

A template to boost the productivity of Phaser.js game developers. Provides tools to improve code reuse, assist in development activities, and can package projects into production ready bundles.

What's in the Box

NPM via Browserify, Jade, Stylus, Lodash, JsHint, Uglify.js, Source maps, Stats.js, Google Analytics, Image optimisation tools, Livereload (auto refresh), Cache busted assets, Zip compression, .gitignore

Installing

Node.js and Grunt

You will need to first install Node.js and the grunt-cli: npm install -g grunt-cli.

Setup Your Project

Download and unpack The Phaser.js Boilerplate. Or alternatively checkout from source:

git clone git@github.com:lukewilde/phaser-js-boilerplate.git my-sweet-game
cd my-sweet-game
rm -rf .git/
git init && git add -A && git commit -m "Importing Phaser boilerplate."

Next, inside the project, you need to install the project's various NPM dependencies:

npm install

And you should now be ready to spin up a development build of your new project:

grunt

Developing

Your first port of call will likely be to customise the properties found in package.json and src/js/game/properties.js.

All of the files required to run the game will live in the src folder, this will include any JavaScript, images, HTML (Jade), and CSS (Stylus). When the default grunt task is invoked, these files are compiled to a build directory.

Files in the build directory will always be generated and excluded from Git by the .gitignore, as such these will removed without warning and should generally not be edited.

Recommendations

  • Use relative file paths for any assets loaded by your HTML or JavaScript. This will negate any potential path issues when the game is later uploaded to a webserver.
  • If you intend to store development assets (i.e PSD's, Texture Packer files, etc) inside your project, store them outside of the src directory to avoid bloating your builds with them.
  • Borwserify is crazy powerful. I'm not going to quote Spiderman, but you should definitely check out Substack's Browserify Handbook.
  • Linting is disabled by default, if you'd like to enforce it for production builds update the .jshintrc with rules for your coding style and remove the comment block from jshint directive in the gruntfile's build task.

Available Targets

grunt

Configures and runs an unminified development build optimised for fast watch performance with source maps and live reload.

grunt build

Creates an uglified, production ready build with no source maps.

grunt optimise

Lossy compression of all png's in the src/images/ directory using pngquant.

(Linux users will need to have a version of pngquant available on their paths.)

grunt zip

Compiles the current build into {title}.zip with an internal folder. This is intended for use when transferring the build to a third party for webserver upload.

grunt cocoon

Compiles the current build into {title}.zip ready for upload to CocoonJs.

Phaser and it's Physics Engines

You might notice that Phaser isn't actually bundled in with the rest of our Browserify bundle. Bundling it was our first choice initially, however leaving it out enables use of the P2 Physics engine and makes grunt:browserify run a whole lot faster. It also gives you the option to pull Phaser from in a CDN.

Using P2

The project comes ready to run Phaser with arcade physics, but can easily be adjusted to use the P2 physics engine.

The grunt:copy task contains directives which can be used in grunt:default and grunt:build to copy in your physics engine of choice.

Updating or Adding Libraries

When adding new libraries that aren't CommonJS compatible, you'll have to update the Browserify Shim configuration.

Coding Style and Linting

I've adapted Airbnb's JavaScript Style Guide. I've kept the code footprint low so you can easily include your own .jshintrc.

Created with contributions and inspiration from