Using an HTML5 Game Engine - HTML5 Mobile Game Development - page 472

As you can see, Crafty gets its work done without needing to create a complicated class hierarchy. To run the
example you just need to place it inside of an HTML file that has the crafy.js library loaded.
Because of the flexibility of using a component-entity system, Crafty is a versatile engine that can be adapted
to most genres. Using the built-in components, it works best for anything except 2-D platformers, for which
it needs some additional code to handle correct interaction with platforms. Because it provides an advanced
collision-detection system based on convex polygons, it works well with top-down games such as 2-D RPGs
that need more than just simple tile-based gameplay.
For more on Crafty, visit the website at http://craftyjs.com/ . Crafty is dual-licensed under the MIT and GPL
licenses, which means you can build any type of both commercial or open-source game using the engine.
LimeJS
LimeJS is an engine that explicitly describes itself as an “HTML5 game framework for building fast, native-
experience games for all modern touchscreens and desktop browsers.” LimeJS is a more full-featured frame-
work than Crafty (this is both a good and a bad thing) that uses Google's closure library ( http://closure-lib-
rary.googlecode.com/ ) for dependency resolution and its event system. It also comes with Google's closure
compiler, a Closure-optimized version of Box2d JS and Closure Templates.
As you would expect from a framework of this size, using LimeJS is a little more involved to start with than
Crafty, which involves only a single file.
LimeJS has a main object called a Director that acts as the main coordinating object and runs the main
timing loop. Each separate level or screen of your game is called a Scene , and a Scene can have many Lay-
er objects, each of which can contain any number of Node objects. Classes that inherit from Node , such as
Sprite , Circle , Label , and Polygon , are the actual objects you place on the screen.
Although a four-level hierarchy to get an object displayed on the screen might seem complex, each of these
layers provides a useful abstraction as you build a game.
To get a sense of what a simple example in LimeJS might look like, look at Listing 26-2 . This example drops
a circle on the screen wherever you touch, has that circle follow your touch or mouse around, and then fades in
and gets larger when you release.
LimeJS handles multitouch just fine without any extra code, so you can touch and drag with multiple fingers
at a time.
Listing 26-2: A Lime.js example
goog.provide('movingballs');
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Circle');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.MoveTo');
movingballs.start = function(){
var director = new lime.Director(document.body,1024,768),
scene = new lime.Scene();