This Boilerplate helps to get started with the fabulous HTML5 game framework Phaser. Inspired by https://github.com/luizbills/phaser-js-boilerplate
A version for pixel perfect scaling as described here has been added. Just checkout the lowrez branch.
Install Grunt as described at http://gruntjs.com/
npm install -g grunt-cli
Go to Boilerplate directory and install required npm modules: npm install
run grunt
. Your Browser should come up with your game loaded.
If you change any of the source files, a new package would be build and your browser should reload (live reload)
All files are located in src
src/public
- index.htmlsrc/js
- all js filessrc/js/states
- Boilerplate Game Statessrc/phaser
- Phaser main file (2.1.3 - arcade-physics included.)src/assets
- Assets sorted in directories.src/assets/audio
- All audio assets needed in your gamesrc/assets/fonts
- all Fonts/bitmap fonts and definitions -src/assets/img
- Every other image you need
You could use any other phaser version. Just copy it into src/phaser. If you change the name, make sure you change it at Gruntfile.js, too.
- always refer to
assets/...
- Lint (jshint) your javascript code.
- Copy all assets to the
game
directory - Concatenate and uglify all JS-Files into one
game.js
- Copy all files from public to
game
(e. g. index.html)
default
task is for development.grunt
copies your files (not minified, not concatenated) togame
index.html
includes every single file.- Debug firendly, because errors could easily located in separated files.
grunt build
- Your
states
will be concatenated and uglified/mangeld intogame.js
- All assets will also been copied
- now copy everything in
game
directory to your web server - done.
- Feel free to use and modify this boilerplate. It should be an inspiration.