Codey’s animation looks great moving to the right. But if we apply the exact same logic to move left, Codey looks like they’re being blown back by some wind or doing the moonwalk. (While it’s cool, it isn’t exactly what we’re going for).

As a fix, we need to set the .flipX property of the animation to be true or false depending on which direction we want our sprite to turn.

class ExampleScene extends Phaser.Scene {
  // … Previous code
  update() {
    if (gameState.cursors.right.isDown) {
      gameState.exampleSprite.setVelocityX(100);
      gameState.exampleSprite.anims.play('movement', true);
      // The sprite is facing its original direction
      gameState.exampleSprite.flipX = false;
    } else if ( gameState.cursors.left.isDown) {
      gameState.exampleSprite.setVelocityX(-100);
      gameState.exampleSprite.anims.play('movement', true);
      // The sprite is facing its flipped direction
      gameState.exampleSprite.flipX = true;
    }
  }
}

When our Sprite is moving to the right, we assign .flipX to false, since our sprite sheet original has the sprite facing the right. Otherwise, when moving left, we assign .flipX to true so that the sprite flips horizontally and will face left.

By manipulating .flipX we can animate our sprite with a sprite sheet that faces one direction!

Let’s now add this into our game!