AnimatedSprite with array of frames

[Bob John]

Hi guys.

 

 

I have a question, how can I animate the sprite using an array of frames?

example:

 

const bodySpriteAnimation = new AnimatedSprite(_frames);
const FRAMES_ANIMATION = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
bodySpriteAnimation.animationSpeed = 0.1;
bodySpriteAnimation.play()

My FRAMES_ANIMATION array is the list of frames to run through the animation

would happen like this:

1. FRAME 1 ~ WAIT FOR END ~ EXECUTE NEXT ITEM OF FRAMES_ANIMATION

2. FRAME 1 ~ WAIT FOR END ~ EXECUTE NEXT ITEM OF FRAMES_ANIMATION

3. FRAME 2 ~ WAIT FOR END ~ EXECUTE NEXT ITEM OF FRAMES_ANIMATION

...

 

But I don't know how to start

[jonforum]

map and sort your frame list by  key name ! 

Animations finish with numbers  _0001 ,_0002 ...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

[ivan.popelyshev]

start by looking to AnimatedSprite sources, its not a rocket science: https://github.com/pixijs/pixi.js/blob/dev/packages/sprite-animated/src/AnimatedSprite.ts 

Whatever you pass to constructor - you can debug by placing a breakpoint in it.

[Bob John]

 

@jonforum I need it to be in the order of the frame list.

 

@ivan.popelyshev I tried to do this:

        const MOVE_ANIMATION = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
        const bodySpriteAnimation = new AnimatedSprite(_frames);
        bodySpriteAnimation.gotoAndStop(0)
        bodySpriteAnimation.animationSpeed = 0.1;
        for (let i = 0; i < MOVE_ANIMATION.length; i++){
            bodySpriteAnimation.gotoAndStop(MOVE_ANIMATION[i])
        }
        app.stage.addChild(bodySpriteAnimation);

but inside the loop, I don't know how to wait for the animation to finish before executing the next, in this code, the animation stops at the first item in the array of frames, because the animation has not finished playing. I thought about using onComplete from AnimatedSprite, but I don't know where to start