Phaser Scene lifecycle methods

Apr 14, 2024 • Home • Edit

---

This post goes over Phaser Scene lifecycle methods:

1. constructor
2. init
3. preload
4. create
5. update

import Phaser from 'phaser';

class MyScene extends Phaser.Scene {
  constructor() {
    console.log(1);
  }

  init() {
    console.log(2);
  }

  preload() {
    console.log(3);
  }

  create() {
    console.log(4);
  }

  update() {
    console.log(5);
  }
}

constructor

constructor is called first when the Scene class is instantiated:

export class Boot extends Phaser.Scene {
  constructor() {
    // ...
  }
}

Use it to set the Scene key:

export class Boot extends Phaser.Scene {
  constructor() {
    super('mySceneKey'); // super({ key: 'mySceneKey' });
  }
}

init

init is called after constructor and before preload:

export class Boot extends Phaser.Scene {
  init(data) {
    // ...
  }
}

It’s called every time the Scene starts/restarts and can receive optional data:

this.scene.start('mySceneKey', { myData: 'foo' });

preload

preload is called after init and before create:

export class Boot extends Phaser.Scene {
  preload() {
    // ...
  }
}

Use it to load assets:

export class Boot extends Phaser.Scene {
  preload() {
    this.load.image('myImageKey', 'path/to/image.png');
  }
}

create

create is called after preload and before update:

export class Boot extends Phaser.Scene {
  create() {
    // ...
  }
}

Use it to render sprites, tilemaps, etc. and attach listeners:

export class Boot extends Phaser.Scene {
  create() {
    this.add.image(0, 0, 'myImageKey');
  }
}

update

update is the game loop and it’s called every step:

export class Boot extends Phaser.Scene {
  update(time, delta) {
    // ...
  }
}

Use it to check game logic such as gameobject collisions and controller inputs:

export class Boot extends Phaser.Scene {
  update() {
    if (this.cursors.up.isDown && this.player.body.touching.down) {
      this.player.body.setVelocityY(-100);
    }
  }
}