Professional HTML5 Mobile Game Development

Using an Open-Source Engine

On the open-source side of things, HTML5 engines have proliferated as well. Although there are too many to cover in a single book (let alone in a single chapter), there are a few worth mentioning because of their popularity and their support for mobile HTML5 gaming.

Crafty.js

Crafty.js (http://craftyjs.com) is a lightweight HTML5 engine based entirely around the idea of components and entities. At under 90k Minified and Gzipped with no dependencies, it has a small footprint.

Instead of defining classes, you simply create entities and add components onto them. Components, as you’ve seen in Quintus, can add additional functionality as well as trigger and respond to events.

The main Crafty object also acts like the jQuery object in that it can be used to query for objects that have a specific component or combination of components:

Crafty("Enemy"); 
// will return all entities with the Enemy component

Crafty ships with a number of useful components, including basic physics; polygon-based collision detection; two-way (platformer), four-way (top-down) and touch controls; and sound support.

You can create new components by calling Crafty.c and passing in an init method and any additional methods that should be added onto the entity.

A separate site for components has been set up: http://craftycomponents.com. This site enables users to submit components and makes it easy to load components directly from the web.

To get a sense of what working with Crafty looks ...