Animation keep restarting with update() instead of playing normally in Phaser 3

Question

I'm using the latest version of Phaser 3, javascript only (no TS).

I have my main scene that contains an update to a Sprite object within its self update method, like so:

MainGame.js

export default class MainGame extends Phaser.Scene
{
   create ()
   {
          this.player = new Player({
               scene: this,
               x    : 100,
               y    : 100
          });
   }

   update () 
   {
       this.player.update();
   }

The Player object update method looks like this:

Player.js

export default class Player extends Phaser.GameObjects.Sprite
{
   constructor(config)
   {
       super(config.scene, config.x, config.y, 'player');
       this.scene = config.scene;
       this.scene.add.existing(this);
   }

   update() {
      this.anims.play('idle_loop');
   }

For some reason, the loop is stuck at frame 1, because it keeps restarting the animation loop over and over (I guess it restarts each time update() is called).

My issue: Instead of looping the sprite animation, the loop keep restarting so fast it only display the 1st frame of the loop.

Notes: Everything else (the Atlas used for the animation, the loading etc..) works fine, in fact if I move that play() call from update() to the create methode, no problems.

Answer 1

The issue is, that you need to pass a second parameter, with the value of true, to the play function (link to the documentation). So that phaser doesn't restart the animation, and ignores this call, as long as it is still playing.

Something like this:

... 
update () {
    this.anims.play('idle_loop', true);
}