How to start a new animation B when animation A finished

[hongping]

Hi,

 

I try to do two animations, animation A and animation B. I want animation B to start when animation A completed. How can I do that? 

 

Also, I try to explore the isPlaying/isFinished member, they are not updated as I am expecting when the animation finished. Anyway to make sure of it?

 

Thanks!

[rich]

yourSprite.events.onAnimationComplete(startAnimationB, this);

function startAnimationB() {

  yourSprite.play('animB');

}

[rich]

Just to add that the startAnimationB function will be called whenever any animation finishes, but it's sent the animation as the second parameter, so you can branch and decide what to do.

[localGhost]

Hello,

 

this code somehow didn't work for me. It fails with "Uncaught TypeError: Property 'onAnimationComplete' of object #<Object> is not a function" error.

Looking into source, it seems quite sensible, since in the Phaser.Signal constructor we have:

this.onAnimationComplete = null;

I probably managed to do it this way:

sprite.events.onAnimationComplete = new Phaser.Signal();sprite.events.onAnimationComplete.add(function() { sprite.play('animB'); });

Is it correct? Is there a better way?

[powerfear]

If you want to play another animation when a specific animation finish you should keep a reference to the animation when you add it like this:

var anim = sprite.animations.add(...);anim.onComplete.add(functionToCall, this);function functionToCall() {    sprite.play('animB');}

[playh5]

Hi, I have this code but I got an error "playStance is not defined" can you help me? Thanks!

opponentSprite.animations.play('box');opponentSprite.events.onAnimationComplete.add(playStance,this);	playStance:function(){   opponentSprite.animations.play('stance');},

Note: I'm using texture atlas

[localGhost]

Wild guess: this.playStance won't fix it?

[playh5]

Hi, thanks! but the function doesn't fire up. I put

console.log('complete');

inside the playStance function

[localGhost]

No idea.

As a sidenote, your handler function (playStance) will actually receive sprite and animation as two parameters.

So probably you would need to do it this way:

playStance:function(sprite){    sprite.animations.play('stance');},

You may also check for which animation was completed when event fires or maybe you would prefer to use onAnimationComplete.addOnce(...).

However that doesn't concern console logging :/

[playh5]

Initially the sprite is in stance animation so in the create function I have this

opponentSprite = this.game.add.sprite(this.game.world.centerX+25,this.game.world.centerY+25,'opponent');opponentSprite.anchor.setTo(0.5,0.5);opponentSprite.animations.add('stance',Phaser.Animation.generateFrameNames('BunnyBoxer',0,6,'',4),5,2);opponentSprite.animations.add('box',Phaser.Animation.generateFrameNames('BunnyBoxer',7,9,'',4),24,2);opponentSprite.animations.play('stance');opponentSprite.events.onAnimationComplete.add(this.playStance,this);

and then the button is clicked, the sprite will go to box frame names

checkEqual:function(){	opponentSprite.animations.play('box');},

when the box animation finished should go to stance animation again

playStance:function(){   opponentSprite.animations.play('stance');   console.log('complete');},

But it doesn't go back to stance animation, it keeps playing the box animation since I click the button. Do I'm missing something? Thanks!

[localGhost]

I don't see what we do sufficiently different aside from what I said already: use the function parameter inside the playStance function. Check this (I've used an animation from the Phaser bundle):

Main.prototype = {    preload: function() {        game.load.atlasJSONHash('bot', 'running_bot.png', 'running_bot.json');    },        create: function () {        this.bot = game.add.sprite(100, 100, 'bot');        this.bot.animations.add('first', [0, 1]);        this.bot.animations.add('second', [7, 8, 9, 10]);        this.bot.animations.play('first', 2, false);        this.bot.events.onAnimationComplete.add(this.animCompleteCallback, this);                game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR).onDown.add(this.changeAnim, this);    },        changeAnim: function() {        this.bot.animations.play('second', 1, false);    },        animCompleteCallback: function(sprite, anim) {        sprite.animations.play('first', 2, false);    }}

[playh5]

Thank you very much it worked now. One thing I missed out is the false which is for the loop of animation.