Sprite animation repeats forever

Phaser 3
1

Hi There.

Can you help - I just started playing with Phaser and I can’t play Sprite animation only once. It repeats for ever. If change true to false in the player.anims.play command, it only plays the first frame of the animation.
I just want the animation to play and then stop on the last frame.

function preload() {
this.load.spritesheet(‘ship’, ‘assets/images/player.png’, { frameWidth: 194, frameHeight: 201 });
}

function create() {
this.anims.create({
key: ‘left’,
frames: this.anims.generateFrameNumbers(‘ship’, { start: 2, end: 0 }),
frameRate: 8,
repeat: 0
})
}

function update() {
if (cursors.left.isDown)
{
player.setVelocityX(-500)
player.anims.play(‘left’, true);
}
}

What am i doing wrong. Cheers for your help.

2

Hi,
You call the animation inside of update, and update runs usually at 60fps, so you call player.anims.play 60 time per second.
You must create a function startAnimation for example with a flag to true, once the cursors.left.isUp you put back the flag to false
Here’s a very basic example

var animationIsplaying = false;

function preload() {
  this.load.spritesheet(‘ship’, ‘assets/images/player.png’, { frameWidth: 194, frameHeight: 201 });
}

function create() {
  this.anims.create({
    key: ‘left’,
    frames: this.anims.generateFrameNumbers(‘ship’, { start: 2, end: 0 }),
    frameRate: 8,
    repeat: 0
  });
}

function update() {
  if (cursors.left.isDown)
  {
    player.setVelocityX(-500);
    startAnimation();
  }
  if (cursors.left.isUp)
  {
  animationIsPlaying = false;
  }
}

function startAnimation()
{
  if(animationIsPlaying === false)
  {
    animationIsPlaying = true;
    player.anims.play(‘left’, true);
  }
}
3

I see - thanks for your help. That fact was certainly not made clear by the tutorial I followed.
I’m surprised that Phaser doesn’t handle that for you.

4

Phaser can’t knows what you want to do, you can play an anim and stop it when you want with player.anims.stop() or pause()/resume()
But if you starts an anim, and once stopped you start it again like in the update loop, Phaser was just doing what you tell him to do, your problem is more a logic problem.

5

Hi @Martin_Turner and wellcome,

As @BlunT76 says, your code is correct.

The purpose of the second param of player.anims.play (ignoreIfplaying) is ignore a call when is playing (more info in docs ).
If you need to change the frame when the animation completes or stops you must use the animationcomplete-key event
Here an example:

All official animation examples here.

Regards.

6

update() is called every frame, so anything you do there will happen forever.