Créer une page d’accueil ou un menu lancé avec un clic de souris

Sur ce tutoriel nous montrons comment mettre en place rapidement un menu ou une page d’accueil comportant un bouton. En cliquant sur ce bouton, on lance alors le niveau

Ce tuto nécessite d’avoir des connaissances de base sur la gestion des scenes multiples : voir le tutoriel de création de plusieurs niveaux.

Démo du résultat de ce tutoriel : a suivre

class menu extends Phaser.Scene {
  constructor() {
    super({ key: "menu" });
  }
  //on charge les images
  preload() {
    this.load.image("menu_fond", "...");
    this.load.image("imageBoutonPlay", "...");
  }

  create() {
   // on place les éléments de fond
    this.add
      .image(0, 0, "menu_fond")
      .setOrigin(0)
      .setDepth(0);

    //on ajoute un bouton de clic, nommé bouton_play
    var bouton_play = this.add.image(300, 450, "imageBoutonPlay").setDepth(1);
   
    //=========================================================
    //on rend le bouton interratif
    bouton_play.setInteractive();

    //Cas ou la souris passe sur le bouton play
    bouton_play.on("pointerover", () => {
      ....
    });
    
    //Cas ou la souris ne passe plus sur le bouton play
    bouton_play.on("pointerout", () => {
    ...
    });


    //Cas ou la sourris clique sur le bouton play :
    // on lance le niveau 1
    bouton_play.on("pointerup", () => {
      this.scene.start("niveau 1");
    });
  }
}
 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *