HTML and CSS Reference
In-Depth Information
EaselJS is a framework created during building of the Microsoft-sponsored game Pirates Love Daises
( ). EaselJS is an interesting position because it's not actually a game engine, but
rather a framework to make canvas easier to work with. It provides a scene graph, some base classes, and a
number of utility methods that make working with canvas simpler and more productive.
If you think the goal of EaselJS is to create a similar scripting environment as Flash, you wouldn't be far off
from the mark. It provides a Stage object that acts much like the Flash stage, a Shape object that behaves a
lot like a Flash graphic, and a MovieClip that keeps track of animation frames much like the Flash equivalent.
Just like Flash, EaselJS doesn't come with a lot of game-specific functionality, so things such as tile maps,
object physics, and the like all need to be added by you. But because the framework has such a small, focused
API, EaselJS is easy to start with and to use.
Because it's packaged into a single JavaScript library and CDN-hosted, you can easily pull EaselJS into your
project simply by adding a <script> tag to your HTML:
<script src=""></script>
To get a sense of what some EaselJS code looks like, see Listing 26-3 . This example adds a rotating, boun-
cing ball that scales up and down on the screen. When you click or touch that ball, it will be flung in a new,
random direction.
Although it might not seem like EaselJS provides that much functionality in this example, it's actually
doing a fair amount. It handles pixel-perfect hit-detection on the ball shape, which was drawn with an arbitrary
Graphics object. It handles scaling and rotation of the object. It also handles running the main loop at a spe-
cific wanted FPS using the Ticker object.
Listing 26-3: EaselJS example
<html lang="en">
<meta charset="UTF-8">
<script src=""></script>
<meta name='viewport' content='width=device-width, user-scalable=no'>
<canvas id='canvas' width='320' height='480'></canvas>
var canvas, stage, graphic, ball;
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
graphic = new Graphics();
Search WWH ::

Custom Search