WebGameStub helps you get a quick and easy start on writing an HTML5 game with 2D canvas with a simple template and a few tools. It offers a good starting point for the game itself and smoothes off a variety of the rough edges associated with writing and publishing a Web app.
WebGameStub is about saving you time and effort so that you can focus on writing your game. It's about not having to write the most basic game infrastructure pieces, like canvas setup and an update/render loop. It's about having an easier starting point than a blank canvas. It's about not having to spend your time stitching together the usual cross-browser bits associated with bootstrapping an app on the web.
WebGameStub is not a framework but rather a collection of files that help you get your project started quickly with some best practices. With the notable exception of require.js, pretty much anything in the www/ directory can be deleted if desired.
Download the current version of WebGameStub
Review index.html and app.js in examples/simple_canvas_game. These are the main parts of the simple canvas game built on top of WebGameStub
Use index.html and app.js in the www and www/js folders as a starting point for your own game
Once you've made some changes you can add all of your files to a new git repository. Navigate to your project folder in a terminal and do the following commands:
> git init
> git add -A
> git commit -m "Initial commit"
Be sure that node.js and npm (>= 0.6) are installed and in your PATH
(optional) If you wish to deploy to github pages, ensure that git is installed and configured
Use npm to install volo into your path, if it's not there already:
sudo npm install -g volo
Windows users will need to drop the sudo from this command
Things sometimes work differently when browsed to via file: URLs. Test over HTTP for more accurate results:
> volo serve
[1] 11563
> starting web server on port 8086
Now pointing your browser to http://localhost:8086/ will serve up your files for testing.
Right now there is a small (but growing) number of libraries useful to games that install out-of-the-box using volo. You can see a list of them here, along with some information about what to do if you encounter problems.
> volo add three.js
Using github repo "mrdoob/three.js" for "three.js"...
Downloading: https://raw.github.com/mrdoob/three.js/master/build/Three.js
Installed github:mrdoob/three.js/master at js/three.js
> volo add stats.js
Using github repo "mrdoob/stats.js" for "stats.js"...
Downloading: https://raw.github.com/mrdoob/stats.js/master/build/Stats.js
Installed github:mrdoob/stats.js/master at www/js/lib/stats.js
Build a minified version:
> volo build
(...)
Deploy the built version to the gh-pages branch of suitably named repo:
> volo ghdeploy
Log in to GitHub to complete action (your password is not saved. It is sent over SSL to GitHub and converted to an OAuth token)
GitHub user name: dmose
GitHub password:
Contacting GitHub...
(...)
To [email protected]:dmose/monkeyGame.git
e5dbfd4..1296c81 gh-pages -> gh-pages
GitHub Pages is set up. Check http://dmose.github.com/monkeyGame/ in about 10-15 minutes.
If you know of any other good sources of free reusable art please let us know by filing a github issue
If you run into something that's missing or that is getting in your way when using WebGameStub, please help us out by opening a github issue (or even a pull request!) to discuss it. We're often available in #games on irc.mozilla.org for questions.