SpriteAnimation

._reels

A map consists of arrays that contains the coordinates of each frame within the sprite, e.g., {"walk_left":[[96,48],[112,48],[128,48]]}

._currentReelId

The current playing reel (one element of this._reels). It is null if no reel is playing.

.animate

public this .animate(String reelId, Number fromX, Number y, Number toX)

reelId

ID of the animation reel being created

fromX

Starting x position (in the unit of sprite horizontal size) on the sprite map

y

y position on the sprite map (in the unit of sprite vertical size). Remains constant through the animation.

toX

End x position on the sprite map (in the unit of sprite horizontal size)

public this .animate(String reelId, Array frames)

reelId

ID of the animation reel being created

frames

Array of arrays containing the x and y values: [[x1,y1],[x2,y2],...]

public this .animate(String reelId, Number duration[, Number repeatCount])

reelId

ID of the animation reel to play

duration

Play the animation within a duration (in frames)

repeatCount

number of times to repeat the animation. Use -1 for infinitely

Method to setup animation reels or play pre-made reels. Animation works by changing the sprites over a duration. Only works for sprites built with the Crafty.sprite methods. See the Tween component for animation of 2D properties.

To setup an animation reel, pass the name of the reel (used to identify the reel and play it later), and either an array of absolute sprite positions or the start x on the sprite map, the y on the sprite map and then the end x on the sprite map.

To play a reel, pass the name of the reel and the duration it should play for (in frames). If you need to repeat the animation, simply pass in the amount of times the animation should repeat. To repeat forever, pass in -1.

Example

Crafty.sprite(16, "images/sprite.png", {
    PlayerSprite: [0,0]
});

Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite")
    .animate('PlayerRunning', 0, 0, 3) //setup animation
    .animate('PlayerRunning', 15, -1) // start animation

Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite")
    .animate('PlayerRunning', 0, 3, 0) //setup animation
    .animate('PlayerRunning', 15, -1) // start animation

See Also

• crafty.sprite

.updateSprite

private void .updateSprite()

This is called at every EnterFrame event when .animate() enables animation. It update the SpriteAnimation component when the slide in the sprite should be updated.

Example

this.bind("EnterFrame", this.updateSprite);

See Also

• crafty.sprite

.stop

public this .stop(void)

Stop any animation currently playing.

.reset

public this .reset(void)

Method will reset the entities sprite to its original.

.isPlaying

public Boolean .isPlaying([String reelId])

reelId

Determine if the animation reel with this reelId is playing.

Determines if an animation is currently playing. If a reel is passed, it will determine if the passed reel is playing.

Example

myEntity.isPlaying() //is any animation playing
myEntity.isPlaying('PlayerRunning') //is the PlayerRunning animation playing