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, Aug 09 '13 at 15:55

score 1 · Answer 1 · answered Aug 11 '13 at 06:34

1

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!

answered Aug 11 '13 at 06:34

Lanny

11,244
1
22
30

I wasn't aware that BitmapAnimation changes the frame constantly over time. I only want the bitmap to animate when I press the move key... is it possible to control BitmapAnimation like that? – user3871 Aug 11 '13 at 14:37
You will have to add a listener to the Ticker, and update the stage during this time. – Lanny Aug 20 '13 at 01:30

score 0 · Answer 2 · answered Aug 11 '13 at 15:52

Additionally to what @Lanny already said: Whenever you have the left/right-key pressed you execute bmpAnimation.gotoAndPlay("walk_XXX"); each cycle, this results in always going to the first frame of that animation each cycle. Instead you should just start the animation once, when you press the left/right-key the first time and stop the animation when you release that key.

Sprite animation not animating correctly

2 Answers2