Game Development Reference
In-Depth Information
Figure 7-2.
The full sprite sheet image for all graphics and animations in Fakezee
Setting Up the Sprite Sheet Data
As you can imagine from the size of the image, there is quite a bit of data that corresponds with it. As your games
increase in graphical size, the data object will likely be large as well. Polluting the game logic code with giant data
objects will quickly become messy, so it's a good idea to simply load in the data as JSON files within PreloadJS.
The sprite sheet data object generated by most sprite sheet tools will be saved as a
JSON
file in JSON format when
exporting for EaselJS. Accessing this data for your sprite sheet will be done in the following way, after loaded in with
PreloadJS:
var spritesheet = new createjs.Sprite(queue.getResult('manifestID'));
The Fakezee sprite sheet data object has nearly 300 frames and over 35 sprites, both animated and static. This will
be loaded in the preload process, but take a look at the data to get an idea of how it is formatted, and the amount of
sprites you'll be using in the game (see Listing 7-2).
Listing 7-2.
The Sprite Sheet Data for All Sprites in Fakezee
{
"images":["img/fakezee.png"],
"frames":[...],
"animations":{
"diceHold":[63],
"diceTray":{frames:[64]},
"die":{frames:[65, 66, 67, 68, 69, 70]},
"fakezee":{frames:[71]},
"fakezee_score":{frames:[72]},
"logoSmall":{frames:[157]},
"ones":{frames:[158, 159, 160 ... 177] },
