Game Development Reference
In-Depth Information
Next, a list of all rectangle areas is declared for each frame. I've truncated this array in the listing quite a bit in an
effort to save space. If following along with this pig animation, this array would consist of 127 indices.
There is a single animation named
all
and it contains every frame, 0 through 126. Within this animation object,
the
speed
property is adjusted so it will play closer to your original speed in a 60 FPS environment. You can adjust this
speed property in the Animations tab within Zoe.
Let's put this sprite sheet data into a working example. Listing 6-7 adds the pig sprite to the stage, and combines
its animation frames with your Ticker updates to slowly glide your pig down from the sky.
Listing 6-7.
Adding and Moving an Animated Sprite
var stage, spritesheet, pig;
// body onload
function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.addEventListener("tick", runGame);
createjs.Ticker.setFPS(60);
addPig();
}
function addPig() {
var data = {.....} // data from Zoe
spritesheet = new createjs.SpriteSheet(data);
pig = new createjs.Sprite(ss, 'all');
stage.addChild(pig);
}
function runGame(e) {
pig.y += 1;
pig.x += 1;
stage.update();
if (pig.y > stage.canvas.height) {
pig.x = pig.y = 0;
}
}
This example demonstrates how easy it is to add animation sprites to the stage once the data and images have
been created in Zoe. As the pig sprite plays, you can continue to move it along the screen and manipulate it in the
same ways you have with other display objects.
Zoe is a fantastic tool for working with EaselJS. Next, let's look at more ways you can create sprite sheets.. You will
be returning to Flash for the next animation, but this time you'll export directly to EaselJS from the Flash IDE.
Animations with Flash CC
Exporting to EaselJS directly from Flash has a few extra features that are not easily achievable when working out of
Zoe. With Flash, you can scale and apply filters to movieclips directly on the stage, which will then be applied to the
sprite sheet frames. You can also easily export multiple animations into one sheet. Let's take a look at a coin animation
laid out in a movieclip inside of Flash (see Figure
6-14
).
