Control sprite animation speed

Question

How can I control the animation speed of a sprite using create JS?

When you press right and left, the sprite will run through the frames... I'd like to leave the fps at 60, but alter how fast the frames are looped through without altering the main game FPS rate.

See a demo here. Press right and left arrow to see.

I thought changing the bmp animation frequency property would do the trick...

bmpAnimation.frequency = 2;

But it did not work...

Or should I be using the jQuery animation?

Also, I noticed that each time I hit a random key, the animation plays 1 frame then goes back to first frame. Why is that?

Thanks!

olsn olsn · Accepted Answer · 2013-08-12T08:37:29

1) The frequency is a property of the spriteSheet-animation, not the bitmapAnimation itself.

So you would have to set the freuqency in the SpriteSheetData itself(http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html) or if you want to set it during runtime you could use:

bmpAnimation.spriteSheet.getAnimation("walk_right").frequency = 2;

Please also note that the frequency will be deprecated in the next version of EaselJS in favor of speed (bit this is in the NEXT version, so just something for you to keep in mind)

2) You are currently calling the gotoAndPlay() every frame (if walking), that means that every frame your animation will be set to the first frame of that animation, you could easily avoid this by using something like:

if ( dir == "right" and bmpAnimation.currentAnimation != "walk_right" ) {
    bmpAnimation.gotoAndPlay("walk_right");
}

But a better way would be to only call that method ONCE when you start walking and then again when you stop walking.

Control sprite animation speed

1 Answers