Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to start a new animation B when animation A finished


hongping
 Share

Recommended Posts

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!

Link to comment
Share on other sites

  • 3 weeks later...

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?

Link to comment
Share on other sites

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');}
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :/

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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);    }}
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...