Sprites and Sprite Sheet Animations - Beginning HTML5 Games with CreateJS - page 112

By passing the spritesheet object into the sprite, you have access to all of its frames. The second, optional
parameter passed into Sprite is a shortcut that will display that particular animation. The following example omits
this parameter and will result in the same results:
var spritesheet = new createjs.SpriteSheet(data);
var frank = new createjs.Sprite(spritesheet);
frank.gotoAndStop('frank');
stage.addChild(frank);
stage.update();
Let's put this all into a working example. Listing 6-2 demonstrates three sprites being added to the stage from the
image and JSON data created from Texture Packer.
Listing 6-2. Sprite Objects Added to Stage Using Files from Texture Packer
var stage, spritesheet;
// body onload
function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.addEventListener("tick", stage);
drawSprites();
}
function drawSprites() {
var data = {
"images":["mancala.png"],
"frames":[
[2, 2, 903, 331],
[826, 409, 59, 51],
[356, 335, 117, 150],
[588, 335, 117, 133],
[707, 335, 117, 124],
[2, 335, 118, 170],
[239, 335, 115, 152],
[122, 335, 115, 142],
[475, 335, 111, 146],
[826, 335, 75, 72],
[142, 479, 16, 25],
[122, 482, 18, 22],
[160, 482, 18, 19],
[907, 242, 127, 238],
[907, 2, 127, 238]
],
"animations":{
"board":[0],
"bubble":[1],
"chooseCPU1":[2],
"chooseCPU2":[3],
"chooseCPU3":[4],
"cpu1":[5],
"cpu2":[6],
"cpu3":[7],