PhaserJS #4
Easy Map

Le jeu est trop facile pour l'instant tu ne trouves pas? On pourrait ajouter des piques pour le rendre plus compliqué!

D'abord, il te faut dessiner tes piques. Tu peux le faire, comme d'habitude, sur pixilart.com, mais si tu préferes un autre site sens-toi libre!

Ensuite, charges le dessin dans ton code, grâce à la commande this.load.image

              this.load.image("NOM DE L'OBJET", "NOM DE L'IMAGE");
            

Ce code doit bien sûr apparaître dans la fonction preload.

Ensuite, on va créer un groupe de spikes. De cette façon, on pourra facilement en ajouter plusieurs sans devoir trop changer notre code.

              this.spikes = this.physics.add.staticGroup();
            

Pour créer une pique, on utilise alors this.spikes.create. Il faut indiquer les coordonnées et l'object à faire spawner.

              this.spikes.create(X, Y, "NOM DE L'OBJET");
            

Normalement, si tu as tout bien fait, les piques apparaîssent mais n'ont aucun effet sur le joueur. Changeons cela!

On va ajouter un overlap entre le joueur et les piques, comme on a fait pour la pièce à la fiche précédente.

              this.physics.add.overlap(this.player, this.spikes, function(player, coin) {
                // Ce qui se passe lorsqu'on touche une pique
              }, null, this);
            

Ce qui doit se passer lorsqu'on touche une pique est que le joueur devrait revenir au début. Tu peux le remettre au début en changeant ses coordonnées X et Y:

              this.player.x = /*Quelque chose*/;
              this.player.y = /*Quelque chose*/;
            

Et voilà, on a des piques! Pas si dur que ça au final hein?

C'est long de devoir écrire une ligne de code par objet qu'on veut faire apparaître non? Ce serait plus simple si on pouvait dessiner notre map comme ceci au début et faire tout apparaître par soi-même non?

              '11111111111111111111111111'+
              '1               c        1'+
              '1    c     c     s     c 1'+
              '1 2  1  s  1  c  1  c  1 1'+
              '1 1     1     1     1    1'+
              '1                        1'+
              '1    c     c     s     s 1'+
              '1 c  1  s  1  c  1  c  1 1'+
              '1 1     1     1     1    1'+
              '1                        1'+
              '1    c     s     c     c 1'+
              '1 s  1  c  1  c  1  s  1 1'+
              '1 1     1     1     1    1'+
              '1                        1'+
              '1   c       c     c   c  1'+
              '11111111111111111111111111';
            

Faisons cela alors! Commencer par créer ta map. On va la stocker dans une constante qu'on appellera map. Tu peux créer cette constante tout en haut de ton code, avant la variable config.

              const map = '           ' +
                          '      11   ' +
                          '     1     ' +
                          '1 1       1' +
                          '       1   ';
            

Sois bien sûr que chaque ligne contienne le même nombre de charactères (Espaces compris), et que tu aies un "+" à la fin de chaque ligne.

Dans la fonction create, tu peux enlever la partie où tu fais apparaître toutes les palteformes. On va le faire en fonction de notre nouvelle constante, pour se simplifier la vie.

On doit avoir une variable "X" et une variable "Y" pour savoir où on est entrain de placer nos blocks.

              let X = 40;
              let Y = 40;
            

Ensuite, on deux boucles for l'une dans l'autre. C'est parce qu'on veut dessiner chaque ligne, et pour chaque ligne, on veut dessiner chaque block.

              for (let i = 0; i < 5; i++) {
                for (let j = 0; j < 11; j++) {
                  // Dessiner les blocks
                }
              }
            

Ici, j'ai mis 5 et 11 parce que j'ai 5 lignes et 11 caractères par ligne. Change les nombres pour que cela corresponde à ton dessin.

Après avoir dessiné chaque block, on veut changer les coordonnées X et Y auquels on dessine. Quand on change de ligne, on doit aussi remettre X au début.

              for (let i = 0; i < 5; i++) {
                for (let j = 0; j < 11; j++) {
                  // Dessiner les blocks
                  X += 40;
                }
                X = 40;
                Y += 40;
              }
            

Maintenant on veut dessiner un bloc, mais uniquement si le carachtère à cette place est un "1". On va donc créer une variable pour ce caractère et ensuite on dessine un bloc s'il vaut "1".

              let c = map[11*i+j];
              if (c === '1') {
                this.platforms.create(X, Y, "platform");
              }
            

De nouveau, si tu n'as pas 11 caractères par ligne, change le 11 en un autre nombre.

Maintenant ton code va dessiner toutes les plateformes tout seul!

On pourrait aussi ajouter nos piques dans la map directement. Pour ce faire, écris un "p" la où tu veux tes piques, et ajoute un else if dans ton code

              if (c === '1') {
                // ...
              } else if (c === 'p') {
                // Dessiner une pique aux coordonnées X et Y
              }
            

Challenge: Tu peux aussi faire pareil avec la pièce!

Tu te demandes surement pourquoi on a mis "1" pour les palteformes et non "p" (Ou une autre lettre). C'est parce qu'on pourrait avoir différents types de plateformes. Crées une deuxième plateforme et load la correctement dans ton code, sous le nom de "platform2"

Ensuite, si le carctère est égal à "2", tu vas simplement créer cette deuxième plateforme.

              if (c === '1') {
                // ...
              } (c === '2') {
                this.platforms.create(X, Y, "platform2");
              }
            

Maintenant, tu peux créer un joli long monde, avec différentes plateformes et obstacles.

Ce serait cool de pouvoir changer l'arrière-plan aussi non? Noir c'est un peu déprimant...

Commencer par soit dessiner soit trouver une image d'arrière-plan qui te plaît! Lorsque c'est le cas, load cette image comme tu as load toutes les autres.

Ensuite, dans la fonction create, on va afficher cette image. Sois sûr que c'est la première chose que tu fais, pour qu'elle apparaîsse bien derrière tout le reste.

              this.add.image(400, 250, 'background').setDisplaySize(800, 500);
            

On fait apparaître l'image au milieu de l'écran, et on change la taille pour remplir tout l'écran.

Tu verra surement que cela ne couvre quand même pas tout l'écran. Pour ce changer, on fait simplement apparaître plusieurs images:

              this.add.image(-1200, 250, 'background').setDisplaySize(800, 500);
              this.add.image(-400, 250, 'background').setDisplaySize(800, 500);
              this.add.image(400, 250, 'background').setDisplaySize(800, 500);
              this.add.image(1200, 250, 'background').setDisplaySize(800, 500);
              this.add.image(1600, 250, 'background').setDisplaySize(800, 500);
            

Voilà, tu as maintenant un joli arrière-plan! Tu peux alors rendre ton jeu aussi long que tu le veuilles :)