Ajouter un chronomètre sur l’écran de jeu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Démo du résultat de ce tutoriel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

var chronoTexte;
  var monTimer;
  var chrono = 0;

Mise en place du Timer (Chronomètre)

Sous phaser, la façon la plus propre de mettre en place un chronomètre est de passer par un timer, plus précisément un objet de type TimerEvent, que l’on crée au travers du gestionnaire Time de phaser.

Le fonctionnement simplifié est le suivant : à la création du timer, ce dernier va exécuter au bout de delay milli-secondes une fonction callback, et ré-exécutera cette dernière en boucle toutes les delay milli-secondes si le mode loop (boucle) a été défini sur true dans sa configuration.

Au sein de la fonction create(), on ajoutera la ligne suivante pour déclencher la fonction compteUneSeconde toute les 100à milli-secondes :

  monTimer = this.time.addEvent({
      delay: 1000,
      callback: compteUneSeconde,
      callbackScope: this,
      loop: true
});

Attention, une fois créé le timer est lancé automatiquement, sauf si on précise de ne pas le lancer dans ses options de configuration.

On ajoute enfin la fonction de callback compteUneSeconde() qui s’exécutera ici toutes les 1000 ms :

function compteUneSeconde () {
    chrono= chrono+1; // on incremente le chronometre d'une unite
}

pour des raisons de simplicité, nous avons utilisé ici une variable chrono, incrémenter à chaque tick du timer. Mais on aurait pu aussi demander directement au timer de nous retourner le nombre de secondes écoulées depuis son lancement. ceci se fait via les méthodes getElapsedSeconds() ou getElapsed() qui retournent respectivement le nombre de secondes et millisecondes écoulées depuis le lancement du chronomètre.

Affichage du chronomètre sur la fenêtre de jeu

Dans la fonction create(), nous ajoutons un objet texte pour afficher le chronomètre, aux coordonnées (16, 100). Notre texte s’affiche en haut à droite de l’écran. Si vous avez un scrolling, il est important que l’affichage suive votre écran et non le déplacement du personnage. Aussi on appliquera la méthode setScrollFactor(0) sur notre texte. Désormais ce dernier reste toujours à l’écran, meme quand la caméra bouge – attention : quand vous utilisez scrollFactor(0) les coordonnées appliquées sont celle de l’écran, non plus celles du monde. –

chronoText = this.add.text(16, 100, "Chrono: 0", {
    fontSize: "24px",
    fill: "#FFFFFF" //Couleur de l'écriture
});
chronoText.setScrollFactor(0);

Il faut enfin mettre à jour cet affichage à chaque seconde écoulée. on modifie la fonction callback compteUneSeconde() pour mettre à jour le texte de chronoText :

function compteUneSeconde () {
    chrono= chrono+1; // on incremente le chronometre d'une unite
    chronoText.setText("Chrono: "+ chono); // mise à jour de l'affichage
}

Pour aller un peu plus loin :

arrêter / relancer le chronomètre

La méthode reset() permet de réinitialiser la configuration du timer.

Pour arrêter le chronomètre, on utilisera :

monTimer.reset({paused : true});

Comme monTimer n’est pas vraiment un chronomètre mais plutôt un événement relancé en boucle; il est possible de le “relancer” et réinitialisant sa configuration. pour relancer le chronomètre on écrira alors :

monTimer.reset({ delay: 1000,
      callback: compteUneSeconde,
      callbackScope: this,
      loop: true});

Pour détruire entièrement le timer (et libérer de la mémoire), on utilisera simplement la méthode remove() – il ne sera plus possible de relancer le timer par la suite, il faudra en créer un nouveau – :

monTimer.remove();

exemple : pilotage du chronomètre au clavier

Pour stopper / relancer ou réinitialiser un chronomètre, on pourra utiliser ces méthodes, et un booléen indiquant si le chronomètre est en pause ou pas. Dans les morceaux de code ci-dessous, on pilote le chronomètre avec les boutons S et R :

On initialise d’abord les deux boutons ainsi qu’un booléen stopped hors de toute fonction :

var bouton_stop_resume;
var bouton_reset;
var stopped = false;

On les associe aux touches S et T dans create() :

// dans la fonction create : 
bouton_stop_resume = this.input.keyboard.addKey("S");
bouton_reset = this.input.keyboard.addKey("R");

On pilote enfin le chronomètre et sa valeur avec ces boutons dans la update() :

// reset du chrono (bouton R)
if (Phaser.Input.Keyboard.JustDown(bouton_reset)) {
   chrono = 0;
   chronoText.setText("Chrono: " + chrono);
   monTimer.reset({ delay:1000, callback: compteUneSeconde, callbackScope: this,
                  loop: true});
}

// pause / reprise (bouton S)
if (Phaser.Input.Keyboard.JustDown(bouton_stop_resume)) {
   if (stopped == false) {  // on stoppe le timer
   monTimer.reset({ paused: true });
   stopped = true; // on met a jour le booleen
   } else {
   monTimer.reset({ delay:1000, callback: compteUneSeconde, callbackScope: this,
                  loop: true});
   stopped = false; // on met a jour le booleen
}

liste des options du timerEvent à passer entre { ...}

il est possible d’utiliser les options suivantes lors de la création ou rest du timer, à utiliser selon vos besoins ;

OPTION	TYPE	DEFAUT	DESCRIPTION
`delay`	nombre	0	délai en millisecondes avant le lancement de la fonction callback
`startAt`	nombre	1	délai en millisecondes avant départ du timer, en cas de boucle ou de répétitions
`paused`	booléen	false	à passer à true si le timer doit etre mis en pause
`repeat`	nombre	0	nombre de répétitions du timer, si pas de boucles.
`loop`	booléen	false	à passer à vrai pour boucler sur le timer
`callback`	fonction		Fonction à lancer après expiration du délai
`callbackScope`	fonction	0	Environnement devant lancer la fonction de callback, en général this
`args`	tableau		Paramètres pour la fonction de callback. Utile pour les opérations avancées ou les gens qui codent proprement.
`timeScale`	nombre	1	Facteur d’accélération / décelération du timer