HTML and CSS Reference
In-Depth Information
EaselJS
EaselJS is a framework created during building of the Microsoft-sponsored game Pirates Love Daises
(
www.pirateslovedaisies.com
). 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="http://code.createjs.com/easeljs-0.4.1.min.js"></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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.createjs.com/easeljs-0.4.1.min.js"></script>
<meta name='viewport' content='width=device-width, user-scalable=no'>
</head>
<body>
<canvas id='canvas' width='320' height='480'></canvas>
<script>
var canvas, stage, graphic, ball;
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
Touch.enable(stage);
graphic = new Graphics();
graphic.setStrokeStyle(1);
graphic.beginStroke(Graphics.getRGB(0,0,0));
graphic.beginFill(Graphics.getRGB(255,0,0));
graphic.drawCircle(0,0,25);
