Control sprite animation speed using Create JS

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!

Answer 1

Here's your answer:

http://www.htmlgoodies.com/html5/client/html5-gaming-how-to-animate-sprites-in-canvas-with-easeljs.html#fbid=CLhV58xOZNe

This is cut and paste from the above link.

Tutorial 2: Controlling the animation speed and flipping the sprites The simplest way I’ve found to fix the animation’s speed is by using a modulus operator to avoid drawing/updating my sequence during each tick. There’s currently an open issue about this on EaselJS 0.3.2: https://github.com/gskinner/EaselJS/issues/60 To make the character walk normally from left to right, we just need to flip each frame.

EaselJS exposes a SpriteSheetUtils object for that and a flip() method.

// {nameOfFlippedSequence:["derivativeSequence", flipHorizontally, flipVertically, optionNameOfNextSequence]} spriteSheet = SpriteSheetUtils.flip( spriteSheet, { walk_right: ["walk_left", true, false, null] });

You’re essentially making a derivative sequence named “walk_right” based on the “walk_left” sequence that’s flipped horizontally. Finally, here is the code that slows down the speed animation and handles which sequence to play based on the character position:

function tick() { // To slow down the animation loop of the sprite, we're not redrawing during each tick // With a Modulo 4, we're dividing the speed by 4

var speedControl = Ticker.getTicks() % 4;

if (speedControl == 0) {
    // Hit testing the screen width, otherwise our sprite would disappear
    if (bmpSeq.x >= screen_width - 16) {
        // We've reached the right side of our screen
        // We need to walk left now to go back to our initial position
        bmpSeq.direction = -90;
        bmpSeq.gotoAndPlay("walk_left")
    }

    if (bmpSeq.x < 16) {
        // We've reached the left side of our screen
        // We need to walk right now
        bmpSeq.direction = 90;
        bmpSeq.gotoAndPlay("walk_right");
    }

    // Moving the sprite based on the direction & the speed
    if (bmpSeq.direction == 90) {
        bmpSeq.x += bmpSeq.vX;
        bmpSeq.y += bmpSeq.vY;
    }
    else {
        bmpSeq.x -= bmpSeq.vX;
        bmpSeq.y -= bmpSeq.vY;
    }

    // update the stage:
    stage.update();
}

}

Sorry the tick function pasted in weird - go to the link for better formatting

Answer 2

I'm not sure this is a solution. Or maybe I dont understand fully.

You want your spritesheet animation to go slower, but i guess you do not want all other elements to go slower, the solution above seems to slow down everything by only calling stage.update each fourth tick.

Or, if you only have one animation on stage, why not just reduce the framerate?