FlipX for spritesheet animation

Phaser 3
1

Hi,

I am new to phaser and started with this tutorial:

In the section “Animations” it is written:

Note: Phaser supports flipping sprites to save on animation frames, but for the sake of this tutorial we’ll keep it old school.

Now, how can I flipX the whole animation or the whole spritesheet? A Discord user mentioned that I should flip each sprite when I play the animation, but how can I access each sprite when playing it?

2

Instead of creating left and right animations, you would create one walk animation and then flip the sprite in the update cycle.

function create() {
  this.anims.create({
    key: 'walk', // facing left
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });
}

function update() {
  if (cursors.left.isDown) {
    player.setFlipX(false);
    player.setVelocityX(-160);
    player.anims.play('walk', true);
  } else if (cursors.right.isDown) {
    player.setFlipX(true);
    player.setVelocityX(160);
    player.anims.play('walk', true);
  } else {
    player.setVelocityX(0);
    player.anims.play('turn');
  }
}
3

Hey, thank you a lot for first helping in Discord and now here. I did not expect that I can flip the player directly. I thought I must flip the underlying sprite, but now I see that the player is the sprite :+1:

1 Like