PhaserJS
Fiche 3

Lorsque tu tombes des plateformes, tu tombes dans le vide et tu descends à l'infini... Ce n'est pas le but! Faisons en sorte de perdre lorsqu'on tombe trop bas!

Pour voir les coordonnées en X et en Y du joueur, on utilise

              this.player.x;
              this.player.y;
            

Essaie de les logguer dans la console dans la fonction update

              console.log(/* Coordonnées X */);
              console.log(/* Coordonnées Y */);
            

Observe les nombres changer lorsque tu bouges. Ce sont les bonnes coordonnées!

Pour perdre, on va vérifier si la coordonnée Y est trop haute. Si (

if

) elle l'est, on va changer rétablir les coordonnées X et Y au début du jeu.

              if(/* Coordonnée Y */ > /* Nombre que tu veux */) {
                /* Coordonnée X */ = /* X de départ */;
                /* Coordonnée Y */ = /* Y de départ */;
              }
            

Ton personnage devrait maintenant reapparaître au début de la partie lorsqu'il tombe dans le vide.

On va maintenant ajouter un objet de victoire! Dessine ce joli objet en Pixel Art. Tu peux utiliser à nouveau pixilart.com.

Une fois dessiné, ajoute ton nouvel objet dans ton projet, comme tu l'as bien fait avec tes autres dessins.

Maintenant, il faut load ton personnage.

              this.load.image("coin", "coin.png");
            

Une fois ton image chargée dans le projet, on veut la faire apparaître quelque part. De nouveau, facile!

              this.coin = this.physics.add.sprite(500, 160, "coin");
            

Tu devras bien sûr changer les coordonnées X (500) et Y (160) dans ton jeu!

Et maintenant, la partie compliquée! Accroche-toi!

Dans la fonction update, on va vérifier si tu touches la pièce de victoire. Si c'est le cas, on va arrêter le jeu, et afficher que tu as gagné!

Pour faire quelque chose lorsque tu touches la pièce, on utilise ce code:

              this.physics.add.overlap(this.player, this.coin, function(player, coin) {
                // Ce qu'on fait lorsqu'on touche la pièce
              }, null, this);
            

Pour être sûr.e que tout fonctionne bien, console.log le mot "Touché". Souviens-toi que pour logguer un mot, il faut faire

              console.log(/* Mon mot entre guillemets */);
            

Ça marche? Super!

Maintenant, on va faire disparaître la pièce. Sinon, tu vas juste continuer de gagner à l'infini, vu que tu continues à la toucher!

              coin.destroy();
            

Essaie maintenant: la pièce devrait s'effacer lorsqu'on la touche.

Maintenant, on ajoute le texte. Pour ce faire, on va d'abord créer le texte:

              let victoryText = this.add.text(0, 0, "VICTOIRE");
            

On a créé le texte de victoire, mais on ne l'affiche pas encore! Pour l'afficher, on peut faire

              Phaser.Display.Align.In.Center(victoryText, this.add.zone(400, 250, 400, 250));
            

Ce code a l'air plutôt compliqué non? On va le parcourir section par section:

1. Phaser.Display.Align.In.Center dit au programme d'afficher quelque chose numéro 1 au milieu de quelque chose numéro 2
2. victoryText est le quelque chose numéro 1, qu'on veut afficher à l'écran
3. this.add.zone(400, 250, 400, 250) est le quelque chose numéro 2, la zone dans laquelle on veut afficher notre texte.

Excellent! Mais le texte est un peu petit non? Comment pourrait-on l'agrandir?

On va changer la variable "victoryText" en

              let victoryText = this.add.text(0, 0, "VICTOIRE", {
                fontSize: "50px",
              });
            

De la même façon, on peut aussi ajouter une couleur:

              let victoryText = this.add.text(0, 0, "VICTOIRE", {
                fontSize: "50px",
                color: "#d53636",
              });
            

Tu peux bien sûr choisir ta propre taille d'écriture et ta propre couleur!

Finalement, on aimerait faire en sorte que le jeu se finisse lorsqu'on prend la pièce! On va simplement mettre le jeu sur pause, et ne jamais le "dé-pauser"

              this.physics.pause();
            

Imagine que tu veuilles un monde plus long que ton écran, et que tu puisses le traverser facilement. Il faudrait que le monde bouge avec ton personnage.

C'est facile à faire! Dans la fonction create, ajoute

              this.cameras.main.startFollow(this.player);
            

Ceci fera en sorte que la caméra suivera ton personnage partout. Tu peux maintenant créer un très très grand monde. Ceci étant dit, il serait préférable que la caméra ne suive notre personnage que dans la direction horizontale (l'axe des X).

Pour cela, ajoute cette ligne dans la fonction update:

              this.cameras.main.setFollowOffset(0, this.player.y-250);
            

Petit problème: maintenant, lorsque tu gagnes, le texte n'est plus au milieu 😓

Pour rémédier à cela, change le code où tu crées le texte comme ceci (il faut juste ajouter .setScrollFactor(0)):

              let victoryText = this.add.text(0, 0, "VICTOIRE", {
                color: "#d53636",
                fontSize: "70px"
              }).setScrollFactor(0);
            

VOILA! Tu peux maintenant commencer à construire un monde bien plus long qu'avant. Crée un joli jeu de parcours qu'on peut essayer!