EaselJS

EaselJS  0.3.2

EaselJS > EaselJS > SpriteSheet
Search:
 
Filters

Class SpriteSheet

Encapsulates the properties associated with a sprite sheet. A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid. For example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across by 2 high). The simplest form of sprite sheet has values for the image, frameWidth, and frameHeight properties, but does not include frameData. It will then play all of the frames in the animation and loop if the loop property is true. In this simple mode, you can also set the totalFrames property if you have extraneous frames in your sprite sheet (for example, a 2x4 frame sprite sheet, with only 7 frames used).

More complex sprite sheets include a frameData property, which provides named frames and animations which can be played and sequenced together. See frameData for more information.

Constructor

SpriteSheet ( image , frameWidth , frameHeight , frameData )
Parameters:
image <Image | HTMLCanvasElement | HTMLVideoElement> The Image, Canvas, or Video instance to use as a sprite sheet.
frameWidth <Number> The width in pixels of each frame on the sprite sheet.
frameHeight <Number> The height in pixels of each frame on the sprite sheet.
frameData <Object> Defines named frames and frame sequences. See the frameData property for more information.

Properties

frameData - Object

Defines named frames and frame sequences. Frame data is specified as a generic object, where each property name will be used to define a new named frame or sequence. Named frames specify a frame number. Sequences are defined using an array of 2 or 3 values: the start frame, the end frame, and optionally the name of the next sequence to play.

For example, examine the following frame data:
{walk:[0,20], shoot:[21,25,"walk"], crouch:[26,30,false], stand:31}
This will create 3 sequences and a named frame. The first sequence will be named "walk", and will loop frames 0 to 20 inclusive. The second sequence will be named "shoot", and will play frames 21 to 25 then play the walk sequence. The third sequence "crouch" will play frames 26 to 30 then pause on frame 30, due to false being passed as the next sequence. The named frame "stand" will display frame 31.

frameHeight - Number

The height in pixels of each frame on the sprite sheet image.

frameWidth - Number

The width in pixels of each frame on the sprite sheet image.

image - Image | HTMLCanvasElement | HTMLVideoElement

The Image, Canvas, or Video instance to use as a sprite sheet.

loop - Boolean

The loop property is only used if no frameData is specified, and indicates whether all frames (as specified with totalFrames) should loop. If false, the animation will play to totalFrames, then pause.

totalFrames - Number

Specifies the total number of frames in the sprite sheet if no frameData is specified. This is useful for excluding extraneous frames (for example, if you have 7 frames in a 2x4 sprite sheet). The total frames will be automatically calculated by BitmapSequence based on frame and image dimensions if totalFrames is 0.

Methods

clone

SpriteSheet clone ( )
Returns a clone of the SpriteSheet instance.
Returns: SpriteSheet
a clone of the SpriteSheet instance.

initialize param {Graphics} graphics

protected void initialize param {Graphics} graphics ( )
Initialization method.
Returns: void

toString

String toString ( )
Returns a string representation of this object.
Returns: String
a string representation of the instance.