utiliser les Tweens pour activer une plate-forme mobile via un levier

Nous exposons dans ce tutoriel un mécanisme hyper puissant de phaser : les Tweens. Un tween est un outil permettant de programmer des changements de statut, des déplacements, des zoom et bien d’autre transformations, et de les appliquer sur un objet ou un groupe d’objet.

C’est un outil très puissant qui peut avoir son utilité pour déplacer des plate-formes par exemple, ou pour gérer le mouvement d’ennemis et autres PNJ. Nous ne ferons ici qu’effleurer les possibilités des tweens, mais il est possible de réaliser avec un nombre incroyables de transformations. Nous allons ici proposer un jeu dans lequel un personnage peut aller sur un levier et l’activer pour animer une plate-forme qui va monter et descendre, ou le désactiver autrement

Les notions abordées sur ce tutoriel sont :

la mise en place d’un Tween simple,
son activation / désactivation par un

Démo du résultat à obtenir avec ce tutoriel

Base de départ pour ce tutoriel

Nous partons d’une base constituée d’un jeu dans lequel un personnage est présent sur un monde de taille fixe avec une gravité prédéfinie. Ce personnage peut aller à gauche, à droite, et sauter avec la flèche du haut s’il touche le sol. Les animations sur ce personnage ont été définies. Cette base a été créée à partir du tutoriel Créer son premier jeu de plate-forme en découvrant Phaser sur lequel on a enlevé toute la partie “plateformes flottantes”, “génération des étoiles”, “génération du score”, “génération des bombes”.

Cette base est directement accessible sur codesandbox sous forme de template: lorsque vous créez une nouvelle sandbox, choisissez « explore templates » et et recherchez dans la barre de recherche « phaser-base»

I - Ajout de la plate-forme mobile

I.1 - Chargement de l’asset, et placement de la plate-forme

Nous allons utiliser le spritesheet tiny_blue_platform.png présenté ci-dessous (clic droit sur l’image et enregistrer pour le récupérer). Il s’agit d’une image de 200 x 32 pixels.

Nous plaçons le fichier tiny_blue_platform.png dans le répertoire src/assets. Dans la fonction preload(), on charge notre fichier tiny_blue_platform.png que l’on référence avec le mot clé “img_plateforme_mobile” :

this.load.image("img_plateforme_mobile", "src/assets/tiny_blue_platform.png");

En dehors de toute fonction nous ajoutons tout d’abord la variable plateforme_mobile qui va référencer notre plate-forme :

var plateforme_mobile;

Nous plaçons ensuite la plate-forme mobile en tant que sprite; Dans la fonction create() on ajoute la ligne suivante pour placer la plate-forme en coordonnées (350, 450) avec la texture img_plateforme_mobile.

plateforme_mobile = this.physics.add.sprite(
    350,
    450,
    "img_plateforme_mobile"
  );

Pourquoi un sprite() et non pas un staticSprite() ? tout simplement parce que la plate-forme étant emmenée à bouger, il est nécessaire qu’elle soit un sprite pour que sa hitbox soit calculée automatiquement quand on la déplacera. Mais du coup cette plate-forme va être sujette à al gravité et pourrait être poussée par le joueur. Pour éviter cela, nous rajoutons dans la fonction create() juste après la création de la plate-forme les deux lignes suivantes qui désactivent respectivement la gravité et la possibilité de pousser l’objet :

  plateforme_mobile.body.allowGravity = false;
  plateforme_mobile.body.immovable = true;

Notre plateforme est prête.

I.2 - Création du Tween de déplacement

Nous créons ensuite le tween. Un tween repose sur une configuration sous forme de liste json.

Comme nous allons définir notre tween dans la fonction create() mais l’activerons / désactiverons dans la fonction update(), il est nécessaire de pouvoir y accéder dans ces deux fonctions, donc de créer la référence du tween en dehors de toute fonction. Ainsi, ajoutez en variable globale la ligne suivante :

var tween_mouvement;

Créons maintenant notre tween. Un tween repose entièrement sur une configuration sous forme de liste json dans laquelle on décrit de nombreuses options de morphing, de déplacement, et de temporalité. Ici nous n’utilisons qu’une petite partie des options de configuration possibles. Mais il est même possible d’associer des fonctions de callback (rappel) à différents moments de l’exécution d’un tween.

Le mouvement envisagé ici est le suivant : lorsqu’activée, la plate-forme va monter de 300 pixels en 2 secondes, puis faire une pause de 1 seconde, puis revenir à son point de départ en 2 secondes, attendre à nouveau 1 seconde et recommencer en boucle.

Dans la fonction create() , après la création de plateforme_mobile, on crée notre tween en ajoutant les instructions suivantes. La signification de chaque élément est présenté en commentaire et détaillée ci-après :

 tween_mouvement = this.tweens.add({
    targets: [plateforme_mobile],  // on applique le tween sur platefprme_mobile
    paused: true, // de base le tween est en pause
    ease: "Linear",  // concerne la vitesse de mouvement : linéaire ici 
    duration: 2000,  // durée de l'animation pour monter 
    yoyo: true,   // mode yoyo : une fois terminé on "rembobine" le déplacement 
    y: "-=300",   // on va déplacer la plateforme de 300 pixel vers le haut par rapport a sa position
    delay: 0,     // délai avant le début du tween une fois ce dernier activé
    hold: 1000,   // délai avant le yoyo : temps qeu al plate-forme reste en haut
    repeatDelay: 1000, // deléi avant la répétition : temps que la plate-forme reste en bas
    repeat: -1 // répétition infinie 
  });

Détail des éléments de la liste :

(a faire 😉 mais les commentaires sont assez parlants)

Notre tween est prêt mais inactif. Pour lancer un tween, on pourra utiliser sa méthode resume(). Pour le mettre en pause, on utilisera sa méthode pause(). Dans une seconde partie, nous allons le relier à un levier et l’activer / désactiver à volonté.

II - Ajout du levier et activation du Tween

Nous créons ici un levier et son interaction. Cette interaction se fait si deux conditions sont réunies : 1) le personnage est sur le levier et 2) il appuie sur la barre espace.

II.1 - Chargement de l’asset, et placement du levier

Nous allons utiliser le spritesheet levier présenté ci-dessous (clic droit sur l’image et enregistrer pour le récupérer). Il s’agit d’une image de 60 x 60 pixels. L’avantage de cette image est sa symétrie : en mode miroir, le levier semble activé de l’autre coté.

Nous plaçons le fichier levier.png dans le répertoire src/assets. Dans la fonction preload(), on charge notre fichier levier.png que l’on référence avec le mot clé “img_levier” :

this.load.image("img_levier", "src/assets/levier.png");

En dehors de toute fonction nous ajoutons tout d’abord la variable levier qui va référencer notre levier:

var levier;

Nous plaçons ensuite notre levier en tant que sprite statique; Dans la fonction create() on ajoute la ligne suivante pour placer le levier en coordonnées (700, 538) avec la texture img_levier :

 levier = this.physics.add.staticSprite(700, 538, "img_levier");

Notre levier est visuellement placé. Il ne manque plus qu’à l’associer au tween lors d’une activation.

II.2 - Activation du levier et lancement / pause du tween

Pour activer ou désactiver le levier, il va falloir tout d’abord stocker son état dans le jeu. Est-il activé ou désactivé? Le plus simple est de stocker cet élément en tant qu’attribut de levier! On rajoute donc un attribut active à l’objet levier, qui prendra comme valeur true si le levier est activé, et false sinon.

Au départ, le levier est désactivé. Dans la fonction create(), après la création de levier, on ajoute :

 levier.active = false;

Reste plus qu’à activer le levier dans la fonction update(). Nous allons utiliser 2 fonctions de Phaser particulièrement utiles (déjà présentées en détail dans le tutoriel ouvrir une porte en appuyant sur espace) :

Phaser.Input.Keyboard.JustDown() : permet de détecter quand une touche vient d’etre pressée.
this.physics.overlap() est une fonction qui prend deux paramètres de type sprite, et renvoie true si les hitbox de ces deux objets s’intersectent (this est un élément plus complexe qu’il n’y parait. Il représente ici la scène en question)

L’algorithme à mettre en place est le suivant : si les deux conditions “appui sur une touche espace” et “superposition entre la hitbox du player et celle du levier” sont vérifiées, on lance le code d’activation / désactivation du levier :

Activer levier revient à faire passer son état levier.active à true, à inverser son image de texture (levier.flipX à true) et à lancer le tween tween_mouvement grâce à sa méthode resume().
Desactiver levier revient à faire passer son état levier.active à false, à ne pas inverser son image de texture (levier.flipX à false) et à mettre en pause le tween tween_mouvement grâce à sa méthode pause().

Nous réutilisons ici la variable clavier que nous avions défini en tant qu’écouteur clavier avec un createCursorKeys() dans le tutoriel de base. Dans la fonction update() on ajoute donc le code suivant qui décrit précisément l’algorithme évoqué :

  // activation du levier : on est dessus et on appuie sur espace
  if (
    Phaser.Input.Keyboard.JustDown(clavier.space) == true &&
    this.physics.overlap(player, levier) == true
  ) {
    // si le levier etait activé, on le désactive et stoppe la plateforme
    if (levier.active == true) {
      levier.active = false; // on désactive le levier
      levier.flipX = false; // permet d'inverser l'image
      tween_mouvement.pause();  // on stoppe le tween
    }
    // sinon :  on l'active et stoppe la plateforme
    else {
      levier.active = true; // on active le levier 
      levier.flipX = true; // on tourne l'image du levier
      tween_mouvement.resume();  // on relance le tween
    }
  }

Il ne vous reste plus qu’à tester votre levier en l’activant / désactivant plusieurs fois.