Animating attacks midair

Phaser 3
1

I am making a platformer like game that allows the player to move left and right, and allows the player to attack. The problem is that when the player is moving left or right (by holding the left or right buttons) and then attack using the down button (while holding the left or right button), the attack animation does not stop and pauses at the last frame and the player continues to move left or right without the walking animation.

this is the code for walking left or right

if (this.cursors.left.isDown)
    {
        player.setFlipX(false);
        player.setVelocityX(-walkVelocity);
        if (direction != 'left')
        {
            player.anims.play('playerWalk');
        }
        direction = 'left';
        trueDirection = 'left';
    }
    else if (this.cursors.right.isDown)
    {
        player.setFlipX(true);
        player.setVelocityX(walkVelocity);
        if (direction != 'right')
        {
            player.anims.play('playerWalk');
        }
        direction = 'right';
        trueDirection = 'right';
    }
    else if (!attacking)
    {
        if (direction != 'none')
        {
            player.anims.play('playerIdle');
        }
        direction = 'none';
        //ignore the grappling part, this is another unrelated mechanic in the game
        //for this scenario, assume the grappling variable is equal to false
        if (grappling == false)
        {
            player.setVelocityX(0);
        }
    }

this is the code for attacking

if (this.cursors.down.isDown && !attacking)
    {
        //the player sword animation shows the player striking a sword
        player.anims.play('playerSword');
        attacking = true;
        grappling = false;
        // Listen for the animation to finish
        player.on('animationcomplete', function (animation, frame) {
            attacking = false;
        });
    }

all of the code above was in the update function

2

to further clarify, lets say the user is holding right to make the player move right. The user then hits the down arrow to attack while moving right. It plays the attack animation but then pauses on the last frame and does not continue to do the walking animation. If the user lifts their finger from the right arrow then presses it again the walking animation will resume like normal, and after the player lifts their finger from the right arrow, normal animations resume.

3

From the code, it looks like that direction value is not reset after the player attacks, and so in this check:

     if (direction != 'left')
      {
          player.anims.play('playerWalk');
      }

If the direction was already set to left, there is no trigger to play the walk animation again. This would result in the issue you are describing where you need to let go of the left arrow key, and then press the key again to get the animation to play.

There are a few different ways to handle this, but one quick solution would be to update your event listener for the animationcomplete event to check if a direction is currently set, and if so, play that animation.

One other thing I would recommend would be tied to your event listener for the animationcomplete event. With how the logic is currently setup, every time the player attacks, you are registering a new event listener on the player game object. This could cause the code to be invoked multiple times each time that event listener is added.

You could keep the logic in the current spot, but change from the on method to the once method to make sure your callback function is invoked only one time for each attack. Another option would be to move this event listener outside of the update function and into the the create function, or another spot in your code that runs only 1 time.

Also, for the callback listener, if you are only interested in being made aware of when the attack animation is finished, I would recommend updating your event listener to listen for that specific animation completed event. Example:

Phaser.Animations.Events.ANIMATION_COMPLETE_KEY + 'playerSword'

This will make sure your event listener does listen for another other player animations if you add them later on.