Game Development Reference
In-Depth Information
As you can see from Figure 6-1 , all of your graphics are crammed into a single, bitmap file. The benefit of this is
that you only need to load in one image, as opposed to every single . png file individually. In a simple game with static
graphics, such as this mancala example, you would most likely be fine with separate graphics. But as your games get
larger and require more graphics, sprite sheets are the way to go to decrease load times and increase performance.
Before getting into the creation of these sprite sheet images and their corresponding data, let's take a look at how
you will be using them in EaselJS.
SpriteSheet Class
The SpriteSheet class is used to create the data necessary to extract the graphics from a sprite sheet. You can use this
for both single sprites and sprite animations. A SpriteSheet object needs data passed into it to properly instantiate.
This data requires the following information:
images : This property is an array that will take the image, or images that will be used. These
images can be ids from PreloadJS or paths to the files.
frames : This property can be a complex array or a simple object. The array approach will hold
several arrays, one for each frame in the sprite sheet graphic. These arrays hold the rectangle
data (x, y, width, and height) of each frame. If all frames are actually the same size, a single
object can be used to specify the width and height of all frames.
animations : This property is an object, which will contain animation objects for each sprite or
sprite animation.
Listing 6-1 is an example of the data that would be used for a SpriteSheet object, using the sprite sheet image
show in in Figure 6-1 .
Listing 6-1. Data Format for SpriteSheet Objects
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],
 
Search WWH ::




Custom Search