Animation lags when played for the fist time

Phaser 3
1

Hey everyone,

My question is quite basic. We have a game with lots of animations. One animation has a quite large spritesheet. When we play the animation for the first time the whole game lags for a couple of ms. Afterwards, there is absolutely no lag when we play the animation.

Is there any way to preload/prerender/preplay the animation? Below is the relevant code:

  1. Loading the spritesheet in the Boot Scene’s preload method:
 this.load.spritesheet('some-anim', /some-anim.png', {
      frameWidth: 160,
      frameHeight: 546,
      startFrame: 0,
      endFrame: 29
    });
  1. Creating an animation in the Boot Scene’s create method:
    this.anims.create({
      key: 'some-anim-key',
      frames: this.anims.generateFrameNames('some-anim'),
      frameRate: 30,
      repeat: -1
    });
  1. The Sprite class
export class MyAnim extends Phaser.GameObjects.Sprite {
  scene: Phaser.Scene;

  constructor(scene: Phaser.Scene) {
    super(scene, -1500, -1500, null);
    this.scene = scene;
    this.anims.load('anticipation');
    this.setAlpha(0);
    this.scene.add.existing(this);
  }
}
  1. Playing the animation in the game state:
this.myAnim = new MyAnim(this); //this points to the game scene.
this.myAnim.setAlpha(1);
this.myAnim.play('some-anim-key');

Thank you in advance for your help ! :slight_smile: