HTML and CSS Reference
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 .
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
tionality that is useful in games: TweenJS, which provides tweening and animation support; SoundJS, which
Zoe, a tool that exports spritesheets from Flash SWF files.
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.