Game Development Reference
In-Depth Information
Moreover, we need tools to make game development and maintenance easier. In fact, this tool quickly
becomes essential to quickly spread (you can almost even say “compile”) the changes we made on a
single source to different instances of the application.
WebAppBuilder is just a configurable Makefile
,
which targets call some scripts to perform some code
transformation and build an application instance.
You can extend WebAppBuilder, adding other tools to fit your needs. The following is a partial list of
features:
Easy templating of your HTML files with Mustache
Copy, concatenate, and minimize JavaScript the way that you want
Retrieve JavaScript files from URLs (useful for libraries)
Compile SASS files into CSS files (and possible usage of the Compass framework)
Merge your CSS files
Copy and optionally rename resources that you want to include (images, fonts, sounds, etc.)
Error handling and atomicity: if one operation fails, the make fails (JavaScript syntax error, SASS
syntax error, etc.)
Makefile for of our chess game
We have used WebAppBuilder for making our chess game. We currently target only two versions, but it
can easily evolve. Targets are stored in
android/
and
desktop/
. We bootstrapped the
android/
directory
with a PhoneGap Android skeleton. Some modifications have to first be performed on this skeleton to
make it ready for deployment.
All our application source code is stored in the
src/
directory. Some of the source files used in our chess
game include the following:
common.sass
: all stylesheets
desktop.sass
: defines some variables specific to desktop versions and imports
common.sass
mobile.sass
: defines some variables specific to mobile versions and imports
common.sass
desktop.html
: the wrapper page that embeds
game.html
in an
iframe
for desktop versions
game.html
: the game page
game.js
: the game logic
jquery.min.js
: the jQuery library; only used by the desktop
zepto.min.js
: the Zepto library (alternative to jQuery) for mobile versions
underscore-min.js
: provides some functional programming concept
images/
: contains all chess piece images
