class PreloadScene extends Phaser.Scene {

  constructor() {

    super({ key: "PreloadScene" });

    this.currentWidth = 0;

  }

​

  preload() {

    const boxX = 240;

    const boxY = 290;

    const boxWidth = 320;

    const boxHeight = 20;

​

    let progressBox = this.add.graphics();

    progressBox.fillStyle(0x222222, 0.8);

    progressBox.fillRoundedRect(boxX, boxY, boxWidth, boxHeight, boxHeight / 2);

​

    let loadingText = this.add

      .text(config.width / 2, config.height / 2, "Chargement", {

        fontSize: "20px",

        fill: "#ffffff"

      })

      .setOrigin(0.5, 0.5);

​

    let progressBar = this.add.graphics();

    this.load.on("progress", (value) => {

      let targetWidth = (boxWidth - 10) * value;

​

      this.tweens.add({

        targets: this,

        currentWidth: targetWidth,

        duration: 500,

        ease: "Linear",

        onUpdate: () => {

          progressBar.clear();

          progressBar.fillStyle(0x00ff00, 1);

          progressBar.fillRoundedRect(

            boxX + 5,

            boxY + 5,

            this.currentWidth,

            boxHeight - 10,

            (boxHeight - 10) / 2

          );

        },

        onComplete: () => {

          loadingText.setText("Chargement ✔");

        }

      });

    });

​

    this.load.on("complete", () => {

      this.time.delayedCall(1500, () => {

        this.cameras.main.fadeOut(1000, 0, 0, 0);

      });

      this.cameras.main.on("camerafadeoutcomplete", () => {

        this.scene.start("SceneA");

      });

    });

​

    // Préchargement des ressources

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

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

  }

​

  create() {}

}

​

class SceneA extends Phaser.Scene {

  constructor() {

    super({ key: "SceneA" });

  }

​

  preload() {}

​

  create() {

    this.cameras.main.fadeIn(500, 0, 0, 0);

​

    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() {}

​

  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: [PreloadScene, SceneA, SceneB]

};

​

const game = new Phaser.Game(config);

​

//activateControls(["LMB"]);

​