Animations Interrupt One Another

[frankdev]

Hello all, 

 

I was wondering if there was a way to make sure an animation plays until completion. In my code, I start one animation when a certain condition is met. I want the animation to play to completion even though the condition isn't met throughout. Is this possible using built in Phaser methods?

 

Thanks!

[lewster32]

An animation will play through to the end by default, unless interrupted, so the way to approach the problem is to ensure that you're not interrupting it by checking the isPlaying property, or using the onComplete event - or creatively using both, so that if you want an animation to happen AFTER the current one has finished, you could do something like this:

sprite.animations.play("anim1", 30, false);function playWhenFinished(name) {  // is this sprite currently animating?  if (sprite.isPlaying) {    // yes, so play the next animation when this one has finished    sprite.animations.onComplete.addOnce(function() {      sprite.animations.play(name, 30, false);    }, this);  }  else {    // no, so play the next animation now    sprite.animations.play(name, 30, false);    }}

You could then extend this with a bit more work to hold a queue of animations to play in sequence, removing each one as it gets played until the queue is emptied.

[frankdev]

Thanks!

[beuleal]

It was very helpfull! Thanks!

[pdillinger]

      var portal = game.add.sprite(portalX, portalY, 'portal-frog');      portal.animations.add('portal', Phaser.Animation.generateFrameNames('portal-', 0, 55));      portal.animations.add('portal-idle', Phaser.Animation.generateFrameNames('portal-', 56, 77));      portal.animations.play('portal', 10, false);      portal.animations.onComplete.addOnce(function () {        portal.animations.play('portal-idle', 10, true);      }, this);

Hi everyone!

I try to implement this approach but got a error:

Uncaught TypeError: Cannot read property 'addOnce' of undefined

 

For this line:

portal.animations.onComplete.addOnce(function () {

what i'm doing wrong?

Thanks!

[lewster32]

Sorry, try this instead:

portal.animations.currentAnim.onComplete.addOnce(function () {  portal.animations.play('portal-idle', 10, true);}, this);

[pdillinger]

Thanks lewster32 it works.

[Jacobross85]

This also works with Tweens I have come to find out after reading lewster32's answer: 

if( typeof markerMove !== 'undefined' ){ if( !markerMove.isRunning )  markerMove = this.add.tween(BasicGame.marker)   .to({ x: position }, 300, Phaser.Easing.Quadratic.InOut, true, 0, 0, false);} else {  markerMove = this.add.tween(BasicGame.marker)   .to({ x: position }, 300, Phaser.Easing.Quadratic.InOut, true, 0, 0, false);}

If anyone can make this a little more concise, I'd be interested to see that.