PhaserJS
Fiche 2 - Plateformes

Tu sais sûrement ce qu'est la gravité. C'est la force physique qui te retient sur Terre dans tes activités de tous les jours. C'est une force qui agit en permanence et qui te tire toujours vers le bas.

Pour qu'un jeu vidéo soit un minimum réaliste, il faut un effet de gravité. Cette gravité devrait toujours agir, sauf quand on veut sauter (monter).

Il nous faut donc adapter notre code de plusieurs façons. D'abord, on doit changer ce que font les touches S et W/Z (W sur les claviers QWERTY et Z sur les claviers AZERTY)

• La touche S (Touche bas) ne devrait rien faire pour l'instant.

  La touche W/Z (Touche haut) devrait ajouter une plus grande vitesse (~500)

Maintenant, lorsque tu joues, tu sais juste monter rapidement vers le haut mais plus vers le bas... On va alors ajouter la gravité!

              this.player.body.setGravityY(800);
            

Voici la commande pour activer la gravité. Dans quelle fonction faut-il la placer? Dans preload, create ou update? Réflechis-bien!

Si tout se passe bien, tu sais voler maintenant en sautant!!

C'est bien gentil de pouvoir voler, mais on aimerait bien pouvoir retomber sur quelque chose. On va donc ajouter des plateformes!

Tout d'abord, tu vas devoir dessiner ta plateforme. Retourne sur pixilart.com et dessine une jolie plateforme 40x40.

Après avoir dessiné et importé ton image, tu peux load cette image dans le système. Ceci est fait comme tu as load (téléchargé) le joueur: en lui donnant un nom et en utilisant le nom de l'image.

Après avoir load l'image, tu sais faire apparaître une plateforme sur l'écran comme tu as fait apparaître le joueur. Souviens-toi, tu as utilisé la commande

              this.player = this.physics.add.sprite(400, 360, "player");
            

pour faire apparaître le joueur. Adapte la commande pour faire apparaître une plateforme!

Essaie d'adapter les coordonnées pour faire apparaître la plateforme sous ton Sprite. Est-ce que le personnage passe à travers la plateforme?

C'est qu'on doit créer une collision entre les deux objets!

              this.physics.add.collider(this.player, this.platform);
            

Ceci va ajouter une "collision" entre la palteforme et le joueur. Lance ton code, en faisant attention à avoir ton joueur au-dessus de la plateforme, et observe!

Gros problème! Le personnage emporte la plateforme!! Ce n'est vraiment pas le but!

En fait, il faut que la plateforme soit STATIQUE. Le joueur ne pourra alors plus l'emporter avec lui.

Une façon de la rendre statique est simplement en disant qu'elle ne peut pas bouger.

              this.platform.setImmovable(true);
            

Place ce code après avoir créé ta plateforme, mais avant d'ajouter la collision. Voilà, tu as créé la première partie de la plateforme!

Mais il n'y a qu'une plateforme pour l'instant... Rajoutons-en encore une, non?

Crée une nouvelle plateforme en utilisant

              this.platform2 = this.physics.add.sprite(XXX, YYY, "platform");
            

Rend cette plateforme immobile également!

              this.platform2.setImmovable(true);
            

Finalement, ajoute une collision entre le joueur et les plateformes!

              this.physics.add.collider(this.player, this.platform2);
            

Voilà! Tu as ajouté une nouvelle plateforme, platform2.

CHALLENGE: Ajoute encore 2 ou 3 plateformes et assure toi que tu puisses sauter d'une plateforme à l'autre.

Tu t'es sûrement rendu compte que c'est pénible d'ajouter les plateformes une à une! Et tu as entièrement raison! Pour résoudre cela, on va utiliser des groupes.

Commençons par créer un groupe.

              this.platforms = this.physics.add.group();
            

Remarque que j'utilise ici plateforms: ce n'est pas le même nom de variable qu'avant.

Pour ajouter une plateforme, il suffit d'ajouter une plateforme au groupe maintenant.

              this.platforms.create(XXX, YYY, "platform");
            

Maintenant essaie de rendre tout le groupe immobile et d'ajouter une collision avec le joueur!

Ça ne marche pas! Surprise! En fait, on ne sait pas rendre un groupe immobile. On sait par contre le rendre STATIQUE.

Lorsque tu crées ton groupe, change la ligne en

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

Maintenant, ajoute une collision avec le joueur et observe. Normalement, tu peux te poser sur les nouvelles plateformes.

Pour créer d'autres plateformes, il te suffit alors de répeter ce code:

              this.platforms.create(XXX, YYY, "platform");
            

Tu peux le répeter autant de fois que tu le souhaites.

CHALLENGE: Enlève les plateformes créées plus tôt en utilisant l'ancienne manière. Ajoute 10 plateformes sur ton écran et assure-toi que tu puisses sauter d'une plateforme à l'autre.

Le jeu est trop facile pour l'instant! Tu sais voler!!

Pour remédier à ça, tu peux ajouter une condition en plus pour pouvoir sauter, de cette façon:

              if(this.key_W.isDown && /* Touche la plateforme */) {
                // Sauter
              }
            

Pour vérifier si tu touches la plateforme, utilise dans ta condition (if)

              this.player.body.touching.down
            

Voilà, tu ne peux plus voler!

Challenge final: Fais commencer ton joueur à gauche du jeu. Ajoute des plateformes pour faire un jeu de parcours. Si tu es vraiment mordu.e, ajoute un drapeau (ou autre objet de victoire) à la fin du jeu! (Attention, la dernière partie est compliquée!)