mcc

makerlab-connector-client

Skeleton boilerplate for Phaser app development using Browserify / `require`

Showing:

Popularity

Downloads/wk

8

GitHub Stars

0

Maintenance

Last Commit

6yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

172.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Phaser.js app boilerplate — Grunt, Browserify, EJS

What's being used?

NPM via Browserify, ejs, Lodash, JsHint, Browserify inline source maps, dev server with livereload (auto refresh), .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

Check this project out from source:

git clone git@github.com:bcjordan/phaser-grunt-boilerplate.git
cd phaser-grunt-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

A browser should open with a logo displayed:

Developing

All of the files required to run the game live in the src folder, including any javascript, images, HTML (ejs templated), and CSS. 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

  • 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 unnecessary copying during dev builds.

Resources for:

Phaser.js

Browserify

Substack's Browserify Handbook.

Available Targets

grunt

Configures and runs an un-minified development build optimised for fast watch performance with source maps and live reload. Opens browser window pointing to a test page on first build.

Updating or adding libraries

The project comes with an unminified version of Phaser with arcade physics, this can be replaced if you require updates or one of the alternate physics engines.

You can install new npm-compatible libraries with:

npm install --save my-package-name

Then require it in your code with e.g. var MyCoolTimesavingLibrary = require('My-Cool-Timesaving-Library').

Some interesting npm libraries: list of browserify-friendly game modules, @substack's npm repositories.

Raw vendor packages can be added to src/js/lib.

If adding new libraries that aren't CommonJS compatible, you'll have to additionally update the Browserify shim configuration in our package.json.

Coding style

We will try to follow the Code.org Javascript styleguide.

Acknowledgements

Boilerplate based on the Phaser.js grunt/browserify boilerplate, which was based on 1 and 2.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100