Animation oncomplete callback

[mapacarta]

I am trying to call a function when animation end but this example http://labs.phaser.io/edit.html?src=src\animation\on complete callback.js doesn't work. Is there any other way to do this?

[rich]

It's all event based now. I've updated the example for you.

[mapacarta]

Thanks. Event based seems much better

[nhpb]

Can this be tied to a specific animation? I have multiple animations for my character, including an idle animation. I want the callback to fire only after specific attack animations are completed. However it seems that after the initial callback is completed, it continually runs the callback method - I assume because my single frame 'idle' animation is playing.

So, is a specific animation callback possible, or should I change the way I'm handling my idle animation?

Edit: After some more research I found I can call

player.anims.currentAnim.key === 'attack-front'

Inside of my oncomplete callback to check for specific animations.

Edit 2: However it seems with this method, the callback is still fired anytime the animation stops, even if it's not fully completed. Is there a way to check if the current frame of the animation is the last frame?

Edit 3: Found the answer with:

player.anims.currentFrame.index === 3

After checking if I have the correct animation key, I check to make sure I'm on the last frame in the animation. This seems to ensure that I can call my attack method only after the proper animation is fully complete.

[Kimeiga]

On 6/8/2018 at 6:46 AM, nhpb said:

Edit 3: Found the answer with:

player.anims.currentFrame.index === 3

After checking if I have the correct animation key, I check to make sure I'm on the last frame in the animation. This seems to ensure that I can call my attack method only after the proper animation is fully complete.

This seems kinda like a hardcoded solution, and I'm not sure what it's doing.

Hey there! I'm also trying to play an animation once the current animation completes with Phaser 3. I'm making a fighting game, and I would like to play my attack animations, and then playWhenCurrentAnimFinished my movement animations. That way, you can still move around while attacking, but the attacking animations have higher priority and play in entirety.

Personally, I don't know how to solve this with 

on('animationcomplete', ___, this);

because I don't know if it's possible to pass an animation name as an argument to the callback function.

SOS :)

[Kimeiga]

I wish something like this solution was in Phaser 3

player.anims.onComplete.addOnce(function() {      
    player.anims.play(name);    
}, this);

 

[NoxBrutalis]

this.on('animationcomplete', this.animComplete, this);

in the above, you register the that you want the event to fire. In my example, this.animComplete is a function that will be called back to. Now, in that function, you have access to the current animation and the frame also, like so:

 

animComplete(animation, frame)
    {
        if(animation.key === 'shoot')
        {
            this.animKeyStack.pop();
            this.currentAnim = this.animKeyStack[this.animKeyStack.length - 1];
            this.anims.play(this.currentAnim, true);
        }
    }

Hope that helps, or makes sense. The point is the event has both the animation it is firing from as well as the frame if you need it. Just specify them as arguments to the function you call.

[mapacarta]

This is how I do it in my game:

this.once('animationcomplete', function(){ ///this refers to an arcade sprite.
            ///do some stuff

}, this);

This way it only checks for the current animation, it removes the event afterwards I guess. 

[samme]

sprite.on('animationcomplete', function (anim, frame) {
  this.emit('animationcomplete_' + anim.key, anim, frame);
}, sprite);

sprite.on('animationcomplete_attack', function () {/*…*/});
sprite.on('animationcomplete_jump', function () {/*…*/});
sprite.on('animationcomplete_walk', function () {/*…*/});

 

[Kimeiga]

On 7/18/2018 at 8:24 AM, samme said:

sprite.on('animationcomplete', function (anim, frame) {
  this.emit('animationcomplete_' + anim.key, anim, frame);
}, sprite);

sprite.on('animationcomplete_attack', function () {/*…*/});
sprite.on('animationcomplete_jump', function () {/*…*/});
sprite.on('animationcomplete_walk', function () {/*…*/});

 

Are 'animationcomplete_attack' and the others autogenerated from the names of the animations?

[Kimeiga]

Is there a Phaser Animation State Machine?

[rich]

Yes, of course they're generated from the animation names - how could they not be?

 

[NoxBrutalis]

In the example you quoted, the name of the animation is being concatenated to the end of a user defined event. It's Samme's way of making ti so he only get's events when it's a specific animation. I didn't know you could do that actually, hence the like