HTML and CSS Reference
In-Depth Information
Because the library can be loaded via a CDN, the entire example is shown in the listing.
You can set up the stage object by passing in a canvas element and then calling
Touch.enable
on the
stage to let it handle touch events.
The
Graphics
object, which enables you to create objects that have arbitrary vector artwork, is created
first. Next, that graphic is added to a
Shape
called
ball
.
Because
ball
is a JavaScript object, you can add additional properties on to the object. In this case the
x
and
y
properties are built into EaselJS, whereas the
vx
,
vy
, and
pulse
properties are custom.
The
ball
can have event handlers such as
onPress
, which is called whenever the object is clicked or
touched. In this case the
onPress
method just generates a random direction and adjusts the ball's velocity to
point in that direction.
The actual logic for the ball bouncing around is in a
tick
method on the window object. You can add arbit-
rary listeners to the
Ticker
object, which is the object EaselJS uses for the game loop. The object must just
respond to the
tick
method, which is called each frame with the number of milliseconds that have elapsed
since the last call.
The
tick
method moves the ball using the simple Newtonian physics you saw in Chapter 17, “Playing with
Pixels,” but also pulses the size of the ball up and down.
EaselJS is released under the MIT license and can be used for any commercial or open-source project without
restriction. It's part of a suite of JavaScript libraries available at
http://createjs.com
that provides additional func-
tionality that is useful in games: TweenJS, which provides tweening and animation support; SoundJS, which
simplifies working with sounds from JavaScript; PreloadJS, which makes it easy to load and play sounds; and
Zoe, a tool that exports spritesheets from Flash SWF files.
Summary
This chapter introduced some of the most popular commercial and open-source HTML5 game engines that sup-
port mobile. The goal of the chapter was to give you a taste of what developing in a few of the popular open-
source libraries looks like from a philosophy and coding standpoint. There are many more engines and libraries
to choose from, each with their own philosophy and game target. The HTML5 game framework space is still in
its early days, and there are lots of exciting developments in the space happening daily.