class SceneA extends Phaser.Scene {

  constructor() {

    super({ key: "SceneA" });

  }

​

  preload() {

    this.load.image("bg", "https://assets.codepen.io/9367036/forest1.jpg");

  }

​

  create() {

    let background = this.add.image(0, 0, "bg").setOrigin(0, 0);

    background.displayWidth = config.width;

    background.displayHeight = config.height;

​

    let playText = this.add.text(400, 300, "Scène B", {

      fontSize: "32px",

      color: "#ffffff",

      backgroundColor: "#000000",

      padding: { x: 20, y: 5 },

      align: "center"

    });

    playText.setOrigin(0.5);

    playText.setInteractive({ useHandCursor: true });

​

    playText.once("pointerdown", () => {

      const fx = this.cameras.main.postFX.addWipe();

      this.scene.transition({

        target: "SceneB",

        duration: 1000,

        moveBelow: true,

        onUpdate: (progress) => {

          fx.progress = progress;

        }

      });

    });

  }

​

  update() {}

}

​

class SceneB extends Phaser.Scene {

  constructor() {

    super({ key: "SceneB" });

  }

​

  preload() {

    this.load.image("bg2", "https://assets.codepen.io/9367036/forest3.jpg");

  }

​

  create() {

    let background = this.add.image(0, 0, "bg2").setOrigin(0, 0);

    background.displayWidth = config.width;

    background.displayHeight = config.height;

​

    let playText = this.add.text(400, 300, "Scène A", {

      fontSize: "32px",

      color: "#000000",

      backgroundColor: "#ffffff",

      padding: { x: 20, y: 5 },

      align: "center"

    });

    playText.setOrigin(0.5);

    playText.setInteractive({ useHandCursor: true });

​

    playText.once("pointerdown", () => {

      const fx = this.cameras.main.postFX.addWipe();

      this.scene.transition({

        target: "SceneA",

        duration: 1000,

        moveBelow: true,

        onUpdate: (progress) => {

          fx.progress = progress;

        }

      });

    });

  }

​

  update() {}

}

​

const config = {

  type: Phaser.AUTO,

  width: 800,

  height: 400,

  scene: [SceneA, SceneB]

};

​

const game = new Phaser.Game(config);

​

//activateControls(["LMB"]);

​