CODEWITHSUNDEEP
javascriptjqueryanimationspritecreatejs
user3871
user3871

Reputation: 12708

Sprite animation not animating correctly

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

Upvotes: 0

Views: 1045

Answers (2)

Olaf Horstmann
Olaf Horstmann

Reputation: 16882

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.

Upvotes: 0

Lanny
Lanny

Reputation: 11294

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!

Upvotes: 1

Related Questions