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.
NPM via Browserify, pug, Stylus, Lodash, JsHint, Uglify.js, Source maps, Stats.js, Google Analytics, Image optimisation tools, Livereload (auto refresh), Cache busted assets, Zip compression, .gitignore
You will need to first install Node.js and the grunt-cli: npm install -g grunt-cli.
Download and unpack The Phaser.js Boilerplate. Or alternatively checkout from source:
git clone [email protected]:lukewilde/phaser-js-boilerplate.git the_game
cd the_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
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 (pug), 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.
- 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
srcdirectory 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
.jshintrcwith rules for your coding style and remove the comment block from jshint directive in the gruntfile's build task.
Configures and runs an unminified development build optimised for fast watch performance with source maps and live reload.
Creates an uglified, production ready build with no source maps.
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.)
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.
Compiles the current build into {title}.zip ready for upload to CocoonJs.
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.
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.
When adding new libraries that aren't CommonJS compatible, you'll have to update the Browserify Shim configuration.
I've adapted Airbnb's JavaScript Style Guide. I've kept the code footprint low so you can easily include your own .jshintrc.