Game Development Reference
In-Depth Information
"chooseCPU3":[4],
"cpu1":[5],
"cpu2":[6],
"cpu3":[7],
"frank":[8],
"scoreBrick":[9],
"stone_0":[10],
"stone_1":[11],
"stone_2":[12],
"stone_3":[13],
"window":[14],
"windowOn":[15]
}
};
In this example, only one image is used for your data,
mancala.png
. The second object,
frames
, defines the
bounds of each frame in the image. There are 15 frames in this particular sprite sheet.
The
animations
property is an object that holds the frames, by index for single or multi-frame sprites. For each
of these animation properties, the key string will be used to access it when creating a new sprite, and its value is an
array of frames you wish to use. This array can be written to do a few different things in the animations, and will be
covered more in depth in the “Sprite Sheet Animations” section later in this chapter. For now, you'll be focusing on
single-frame sprites, which are shown in the example data above.
With the data object written, it can then be passed into a new
SpriteSheet
object.
var spritesheet = new createjs.SpriteSheet(data);
Creating the sprite sheet image and its corresponding data can often be complicated or laborious. For this, you
would typically use an application that specializes in creating both the sprite sheet image and the sprite sheet data by
importing a series of images. Let's see how this can be accomplished by using the popular application Texture Packer.
Creating Sprite Sheets with Texture Packer
Texture Packer is an application that makes it easy to create sprite sheets. It supports a wide range of platforms
for data formatting, including EaselJS. To get started, download and install a trial version, which can be located at
www.codeandweb.com/texturepacker
(see Figure
6-2
).
