Launch event at the end of an animation with phaser 3

using the animationcomplete event is doable for you scenario, however StateMachine probably be better depending on how complicated your animation is. this is a good article on how to create one: https://www.mkelly.me/blog/phaser-finite-state-machine/

Below is a copy of my extended version from above to do complicated attack combo chaining. but also is super useful for going between states i.e JUMPING, IDLE, RUNNING, ROLLING etc

• enter, exit will only be called once
• execute() is an update loop called in your scene update() method
• and depends on your event, im expecting my animationcomplete event to be called multiple times, otherwise you can just use .once() instead of .on so you dont need to remove the event listener with .off
• take note on how i use the event listener .once and .on in the enter(). how .off is used in exit(). and how im continue to listen to isDOWN during the update() loop
• the idea of below code is, when user hit attack once from IDLE state it will come to Attack1State, during this state, user might still holding the key (isDOWN), so you are expecting the user to let go and trigger .on key up event, but limiting it to only one time event preventing multiple presses ( ATTACK.once() ). On the 2nd isDown during update() loops is where i check other conditions, it if match transition to another state. if the user did not press another ATTACK button before the animation ends than we send the object back to IDLE state and reset the counter. after animation ends. I also given a tiny window of buffer to allow user press it again with the delay

note: it is written in typescript

    8 class Attack1State extends State {
    9     ANIMATION_END: boolean = false
   10     enter({ref, stateData}) {
   11         var { ATTACK } = ref.KEYS
   12         ref.play("hero_attack1_animation")
   13         ref.body.setVelocityX(0)
   14        
   15         ATTACK.once('up', ()=>{
   16             stateData.ATTACK_COUNT++
   17         }) 
   18        
   19         ref.on('animationcomplete', this._animationEnd, this)
   20     }  
   21     excecute({ref, stateData}) {
   22         var { ATTACK } = ref.KEYS
   23         if (ATTACK.isDown && stateData.ATTACK_COUNT == 1 && this.ANIMATION_END && ['idle','move'].includes(this.stateMachine.prev_state)) {
   24             this.stateMachine.transition('attack2')
   25         }
   26     }  
   27     exit({ref}) {
   28         ref.off('animationcomplete', this._animationEnd, this)
   29     }  
   30     private _animationEnd(animation) {
   31         var self = this
   32         if (animation.key !== 'hero_attack1_animation') return
   33         this.ANIMATION_END = true
   34         this.stateMachine.stateArgs.scene.time.addEvent({
   35             delay: 500,
   36             callback:() => {                                                                                                                          
   37                 if (this.stateMachine.stateArgs.stateData.ATTACK_COUNT == 1) {
   38                     self.stateMachine.transition('idle')
   39                     this.stateMachine.stateArgs.stateData.ATTACK_COUNT = 0
   40                 } 
   41         }})
   42     }  
   43 }      
   44