Sprite animation not animating correctly

Question

I'm trying to get a sprite to animate and flip depending on which key I press (move left, move right).

Right now the sprite is appearing on screen, but the sprite isn't animating correctly... Following the sprite sheet, frames 0-9 should be him walking left, and 10-19 should be him walking right.

I try to achieve that with:

spriteSheet = new createjs.SpriteSheet({
    images: [imgMonsterARun],
    frames: {width: 64, height: 64, regX: 32, regY: 32},
    animations: { walk_left: [0, 9], walk_right: [10, 19]
    }
});

enter image description here

Also, he should flip around depending on which key I hit, left or right. I thought I was doing that with

if (key == left) {
bmpAnimation.gotoAndPlay("walk_left");

and

if (key == right) {
bmpAnimation.gotoAndPlay("walk_right");

But those just switch him around, but don't play remainder of animation frames.

demo with code here

Thanks

When you hit top and bottom key, the animation seems to work fine... — alexmngn

Lanny Lanny · Accepted Answer · 2013-08-11T06:34:53

It looks like you are only updating the stage when you respond to key presses, which will just update the stage once.

Try throwing a stage.update() into the empty tick function in the main JS file. This ensures the stage is constantly redrawn, which redraws your animating sprite as it changes frames.

The stage needs to be redrawn any time content changes, and SpriteSheet/BitmapAnimation change the frame constantly over time.

Cheers!

Sprite animation not animating correctly

2 Answers