PhaserJS
Fiche 10

On va maitenant ajouter des piques et des pièces dans notre jeu. Note que tu auras besoin des connaissances des fiches précédentes, dans lesquelles tu as codé le fonctionnement des objets qu'on compte ajouter. Tiled va uniquement nous aider à générer les objets plus simplement, mais ne va pas affecter leur utilité.

On retourne dans Tiled afin de créer d'autres calques. On ne va pas créer des calques de "tiles" (tuiles) cette fois, mais un calque d'objets. Ceci s'appelle un "object layer". Tu peux nommer le calque "coin" pour des pièces (par example).

On doit maintenant ajouter des objets dans ce calque. Le fonctionnement diffère par rapport aux calques d'avant, vu qu'on ne peut pas ajouter de tuiles dans ce calque. On doit ajouter des points, et plus tard dans notre code on devra indiquer à quoi correspondent ces points.

Appuie sur la touche "R" sur ton clavier pour ajouter des points dans ta map. Ceci ne fonctionne que si tu as bien séléctionné le calque d'objets. Alternativement, tu peux choisir "Insert Rectangle" dans la barre de séléction.

Maintenant tu peux placer tes objets où tu les veux. Note que tous les objets dans un même calque seront identiques.

Les objets seront simplement des petits rectangles sur ta map. Cela ressemblera plus ou moins à l'image suivante:

On va maintenant importer ces pièces dans notre jeu Phaser. Exporte le document entier (File > Export As), sous format json. Sur Replit, efface l'ancien document json, et importe-le nouveau. Tu dois également importer l'image de ta pièce, seule. Normalement, lorsque tu as téléchargé le tileset entier dans la fiche passée, tu as également téléchargé chaque tile séparemment. Pas besoin de toutes les importer, la pièce suffira pour le moment.

Dans la fonction preload, on doit charger la pièce, en plus du tileset qui est déjà chargé. Rappelle-toi que cela peut être fait de la manière suivante.

                this.load.image("img_coin", "assets/tile_50.png");
              

Ensuite, toujours dans create, après avoir chargé les plateformes, on va créer les pièces. On commence par créer un groupe d'objets statiques, comme d'habitude, grâce à la méthode this.physics.add.staticGroup(). Ensuite, pour chaque objet dans notre calque "coins", on crée une pièce. Cela se résume au code suivant:

                this.coins = this.physics.add.staticGroup();
                this.map.getObjectLayer('coins')['objects'].forEach(object => {
                  let obj = this.coins.create(object.x, object.y, "img_coin");
                  obj.setOrigin(0);
                });
              

Voici ce que fait le code:

• this.map.getObjectLayer('coins')['objects'] représente l'entièreté des objets dans le calque "coins".
• forEach va appliquer une même fonction à tous les objets.
• let obj = this.coins.create(object.x, object.y, "img_coin"); va créer un objet dans le groupe this.coins, qui s'appelle obj.
• obj.setOrigin(0); va centrer l'objet créé afin que le centre de l'objet s'aligne avec l'endroit où il devrait être posé.

Si tu as tout fait correctement, tu devrais voir les pièces apparaître dans ton jeu! Tu peux maintenant retourner à la Fiche 3 pour voir comment coder l'interaction entre les pièces et le joueur. Rappelle-toi que cela se fait grâce au code suivant.

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

Comme indiqué au début, le code d'interaction ne change pas, uniquement la manière de générer les pièces. Tu peux donc copier-coller ce que tu avais déjà! Pratique non?

À toi de jouer! Suis les mêmes étapes afin d'ajouter des piques à ton jeu. Tu vas devoir créer un autre calque d'objets, importer une autre image, et créer un nouveau groupe d'objets dans ton code. Ensuite, tu peux recycler ton code d'avant.

Tu as sans doute noté que Tiled nous aide à créer des maps bien plus simplement, et qu'on peut créer des maps bien plus complexes sans trop d'effort. Avant de continuer, on va explorer un outil très pratique qui va nous aider à générer nos maps plus simplement.

On peut facilement remplir un grand rectangle avec une même tuile. Place-toi sur un calque de tuiles (comme les plateformes ou l'arrière-plan), et séléctionne une tuile à placer. Appuies sur la touche "P", ou sélectionne l'outil "Shape Fill Tool", et glisse simplement sur le rectangle à remplir.

N'hésite pas à explorer d'autres fonctionnalités dans Tiled!

On va maintenant créer plusieurs niveaux au sein de notre jeu. Dans Phaser, cela s'appelle des "scènes".

Pour ce faire, on va devoir restructurer notre code un peu. Tout d'abord, crée un document dans ton code sur ReplIt qui s'appelle "level1.js". Tu l'auras deviné, ceci contiendra ton code pour le premier niveau.

Ce code sera plus ou moins identique à ce que nous avons pour l'instant, mais pas entièrement. Bouge les fonctions preload(), create() et update() dans ce nouveau fichier et copie la nouvelle en-tête au début du fichier. Note que les variables config et game doivent rester dans ton fichier "script.js".

              var Level1 = new Phaser.Class({
                Extends: Phaser.Scene,
                initialize: function() {
                    Phaser.Scene.call(this, { "key": "level1" });
                },
                preload,
                create,
                update
              });

              function preload() {
                // Contenu de preload
              }

              function create() {
                // Contenu de create
              }

              function update() {
                // Contenu de update
              }
            

Notre premier niveau, qui pour l'instant représente le jeu entier, est donc dans un nouveau fichier. Il est important d'indiquer qu'on a créé ce nouveau fichier et de l'importer dans le jeu. Pour ce faire, rends-toi sur le fichier "index.html", et rajoute une nouvelle balise script, comme indiqué dans le code suivant.

C'est important que le "level1.js" soit importé avant le "script.js", vu qu'on va se servir du premier dans le second.

Afin de faire en sorte que le code fonctionne à nouveau, on doit simplement indiquer, dans "script.js", que le jeu commence avec le premier niveau. Tu peux effacer les fonctions preload(), create() et update() du fichier, comme on les a déjà dans "level1.js". Ton document "script.js" ne devrait que contenir les lignes suivantes:

              var config = {
                type: Phaser.AUTO,
                width: 1000,
                height: 640,
                physics: {
                  default: 'arcade'
                },
                scene: [Level1]
              };

              const game = new Phaser.Game(config);
            

Note bien les changements par rapport à la variable config d'avant. Il n'y a plus de fonctions preload(), create() et update(), mais il y a uniquement des noms de scènes. Pour l'instant il n'y a qu'une scène, mais tu peux imaginer où iront les autres scènes.

À toi de jouer! Tu peux maintenant créer ton second niveau. Voici les étapes à suivre:

• Tout d'abord, dans Tiled, crée un nouveau document. Tu dois à nouveau importer ton tileset (format image), créer les calques de tiles "arrière plan" et "plateformes", les calques d'objets pour les pièces, les piques et l'objet de changement de niveau, et tu dois ajouter la propriété "solide". Une fois ton second niveau prêt, tu peux l'exporter sous format json comme "level2.json".
• Ensuite tu dois créer un nouveau document "level2.js" dans ReplIt, et l'importer dans ton code dans le document "index.html". N'oublie pas que cet import doit être avant l'import du fichier "script.js".
• Tu peux maintenant copier-coller le contenu de "level1.js", et changer le niveau en fonction. Il faudra sûrement adapter au moins les noms des fichiers (le "tileset.json"). Il faut aussi changer le nom de la scène (toute première ligne), ainsi que la clé ("key") de la scène (ligne 5).
• Dans ton code principal ("script.js"), tu peux ajouter Level2 à la liste de scènes, comme suit:

  
                  var config = {
                    type: Phaser.AUTO,
                    width: 1000,
                    height: 640,
                    physics: {
                      default: 'arcade'
                    },
                    scene: [Level1, Level2]
                  };
                

• Finalement, tu dois ajouter une fonctionnalité pour un passage du premier niveau au second. Rappelle-toi qu'on veut changer de niveau lorsqu'on touche un objet spécifique, dans le groupe this.level_changer (tu l'as peut-être nommé différemment). Ainsi, on veut remplir le code suivant:

  
                  this.physics.add.overlap(this.player, this.level_changer, function(player, coin) {
                    // ON VEUT REMPLIR CECI
                  }, null, this);
                

  Heureusement, il existe une manière très simple de changer de scènes. Il suffit d'utiliser la fonction this.scene.switch('level2');.