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

Sur ce tutoriel nous montrons comment mettre en place rapidement un chronomètre de jeu, par exemple utile pour minuter le temps passé sur un jeu, établir un compte à rebours etc, et l’afficher sur l’écran.

Démo du résultat de ce tutoriel

Nous allons utiliser 3 variables :

  • une variable monTimer : un objet de type Timer 
  • une variable chrono, une simple valeur numérique destinée à stocker le nombre de secondes écoulées depuis le lancement du timer
  • une variable chronoTexte, permettant de gérer l’affichage du chronomètre, donc de la variable chrono

Nous ajoutons d’abord ces trois variables à notre code :

  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 passables 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 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *