La fumée et les miroirs des bons comptes à rebours, première partie

Ce que vous allez créer

Les comptes à rebours sont des éléments simples qui apparaissent dans de nombreux jeux, mais leur conception peut facilement être négligée..

Avec quelques ajouts simples, cependant, une minuterie régulière peut être rendue beaucoup plus attrayante et adaptée à l'univers du jeu présenté, et ainsi améliorer grandement l'expérience du joueur..

Beaucoup de ces éléments sont inspirés par le discours "Juice it or lost it" de Martin Jonasson et Petri Purho sur la façon de rendre votre jeu plus "juteux". L'essentiel, c'est qu'il ne suffit pas de présenter les informations sous leur forme la plus élémentaire; vous devez également améliorer et accentuer ce qui se passe avec la couleur, les sons et le mouvement, ce qui rendra l'expérience plus agréable. Je recommande totalement de regarder cette conversation pour en apprendre davantage sur d'autres applications.

Dans cette série en deux parties, nous allons passer en revue ces éléments, puis les implémenter dans un simple projet Unity, pour lequel vous aurez besoin de la version la plus récente. Dans la prochaine partie 2, nous examinerons des éléments plus détaillés et nuancés.

Prêt? Allons-y!

Le but des comptes à rebours

Les minuteries dans les jeux peuvent servir à des fins différentes, qui ne se chevauchent pas nécessairement. Ceux-ci sont:

1. Vous avez X temps pour accomplir une tâche.
2. Vous devez survivre pendant une période X.

La conception d'une minuterie peut varier entre ces deux fonctions, car les informations nécessaires au lecteur changent d'application..

Quand on vous donne cinq minutes pour désamorcer une bombe Metal Gear Solid 2, vous devez connaître le exact combien de temps vous avez, car chaque seconde devient vitale pour le progrès et la planification globaux. Le chronométreur doit indiquer au joueur combien il en reste et l’avertir si ce montant devient trop bas..

Lorsque vous devez tenir pendant un certain temps, cet élément d'exactitude devient moins important. Bien sûr, il serait bien de connaître le temps exact en secondes qui vous est nécessaire pour survivre, mais le jeu peut également fonctionner sans ces informations. Cela pourrait même être amélioré, comme une information comme "il faut tenir quelques secondes de plus!" est plus facile à comprendre dans une situation stressante que "s'il vous plaît lire cette lecture de numéro dans le coin de l'écran", et peut améliorer l'immersion dans le monde du jeu.

Comment améliorer les comptes à rebours

Voyons maintenant les éléments qui rendront les comptes à rebours et les minuteries plus intéressants et plus attrayants..

1: Créez votre propre minuteur qui ne repose pas sur des chiffres et intégrez le minuteur au monde

Au lieu de simplement mettre un numéro quelque part, vous pouvez créer votre propre graphique de compte à rebours qui indiquera à l'utilisateur à peu près combien de temps il reste.

Une implémentation graphique en 2D nécessitera un peu de finesse, car vous devez vous assurer que le joueur sait correctement lire intuitivement l'idée de "qu'il ne reste plus beaucoup de temps et qu'il vous reste environ X secondes"..

Compte à rebours non numérique de Star Trek Generations. L’heure exacte n’est pas facilement lisible, mais le graphique permet au spectateur de déduire facilement qu’un compte à rebours a lieu et que le temps s’écoule.

Cela fonctionne très bien si vous utilisez des indicateurs environnementaux pour afficher les progrès et que les voix dans le jeu vous disent combien il en reste. Un numéro collé en haut de l'écran peut sembler non-diégétique et peut très bien prendre des joueurs en dehors du jeu..

Dans Half Life 2, Par exemple, vous devez défendre une position jusqu'à ce qu'un téléporteur ait facturé. Au début, une charge complète est affichée, qui doit ensuite être rechargée.

Charge complète pour un téléport en Half Life 2. L'élément est très visible à l'intérieur de la pièce par ailleurs peu décorée.

La charge est indiquée par des éléments de la machine qui s’allument et commencent à tourner, ce qui vous donne une horloge rudimentaire qui indique combien de temps il vous reste à tenir..

Après avoir été utilisé, le téléport doit être rechargé. Les éléments se rallument lentement, indiquant au joueur combien de temps il leur reste à tenir (de Half Life 2)

La charge de téléporteur est également un bon exemple de intégré afficher, qui est directement dans le monde du jeu. Celles-ci sont utiles car elles permettent au joueur de rester concentré sur le monde lui-même, tandis qu'une minuterie sur une couche d'interface graphique serait au-dessus du monde du jeu..

Une minuterie d'oxygène dans Métro dernière lumière, directement dans le monde du jeu

2: Faire ressembler les nombres à des nombres

Obtenez une police cool pour vos comptes à rebours! Certaines polices comme cette police à affichage numérique imitent les anciens affichages lumineux, qui étaient principalement utilisés pour les nombres dans les anciens affichages "numériques"..

Le joueur associera déjà ces polices à des minuteries et à des comptes à rebours, ce qui facilitera grandement sa lecture, comme s'il s'agissait de quelque chose comme Arial ou Times New Roman..

La lisibilité de base et la composition du texte s'appliquent également. N'empilez pas les chiffres verticalement, n'utilisez pas de chiffres romains, etc..

3: Donnez au joueur le montant en secondes, pas en minutes

La série Metal Gear Solid fait ce tour magnifique en disant "il ne vous reste que 500 secondes!" et ensuite afficher un nombre qui se lit comme "5:00".

Lorsque je l'ai joué pour la première fois, mon esprit a automatiquement complété cela pour se lire comme "5 minutes", mais c'était trompé. "500 secondes" est un format inhabituel mais correct dans le temps, et les gens en général ne sont pas formés pour interpréter correctement ce sujet..

L'effet est que les joueurs vont penser qu'ils ne disposent que de 5 minutes, alors qu'en réalité c'est 8 minutes et 20 secondes..

Mini-missions facultatives à Metal Gear Solid V: La douleur fantôme. Le temps est donné en secondes, le temps est obscurci

Cela n’a généralement pas d’inconvénients, car ils seront poussés par le délai très court et se concentreront sur la réalisation de la tâche Metal Gear Solid 2: désamorçage des bombes), ce qui les distrait du fait que cinq minutes se sont peut-être écoulées et qu'il est encore temps.

4: Faire une "minute" de 100 secondes

Cela va de pair avec indiquer au joueur le temps qu'il reste en secondes.

Un élément récurrent dans le MGS2 compte à rebours, c’est qu’ils n’ont pas un chiffre d’affaires de 60 secondes, mais un «chiffre d’affaires» de 100 secondes. Ce n'est pas réellement une minute pour passer à la suivante, mais les secondes sont répertoriées. Ainsi, au lieu de 01:00 qui devient 00:59, c'est 0100 qui devient 0099. Vous devez simplement obtenir la valeur elle-même, ce qui facilite la création d'un compte à rebours, car vous pouvez ignorer le calcul des minutes..

Un compte à rebours utilisé dans Metal Gear Solid 2: Les Fils de la Liberté. Notez que les chiffres sont à nouveau affichés en secondes, mais d’une manière qui ressemble à des compteurs de minutes et de secondes. Alors que le second symbole (") est également affiché, le groupe cible jeune ne l’est peut-être pas familier.

5: Utilisation de millisecondes et de fractions pour ajouter de la tension

Le fait d'afficher les millisecondes après le nombre principal le rend beaucoup plus intéressant!

C'est assez facile, car le temps peut déjà être stocké dans un float. Deux à trois nombres en virgule flottante constituent une bonne quantité toujours lisible et potentiellement utile au joueur..

6: Utiliser la couleur à votre avantage!

Lorsque la minuterie atteint un certain niveau, colorez le texte différemment. Le fait de le jaune fonctionne bien, car il fait ressortir la minuterie plus.

Une fois qu'il a atteint ses dernières secondes, rendez-le rouge, plus gros et clignote. Maintenant, le montant peu élevé ne peut être ignoré et crée une tension dans le lecteur.

Compte à rebours rouge de Metal Gear Solid V: La douleur fantôme

Construisons une minuterie simple avec ces choses!

Commençons maintenant à améliorer un temporisateur via un code. Nous allons tourner ceci:

Un affichage de base de la minuterie

Dans ceci:

Notre affichage amélioré de la minuterie

Nous allons utiliser quelques ressources spéciales que vous pouvez obtenir rapidement ou créer vous-même, ou obtenir des fichiers sources que vous pouvez télécharger en haut à droite de cet article..

Prêt? Allons-y!

Configuration et minuterie de base

Démarrez Unity et créez un nouveau projet.

Créez ensuite un objet de jeu vide, placez-le devant la caméra et ajoutez un objet textMesh via Composant> Mesh> TextMesh à cela. Ce sera l'affichage pour la minuterie dans le monde du jeu.

Nous utiliserons le 3d-textmesh pour l'instant, mais cela fonctionnera également dans d'autres domaines, comme l'interface de base de Unity. Pour le moment, le texte 3D présente également l’avantage de pouvoir être à l'intérieur le monde du jeu, comme mentionné précédemment, et non en haut du monde dans une couche graphique.

Notre nouveau texte en 3D ne sera pas affiché immédiatement; nous devons modifier quelques valeurs.

Définissez la taille du caractère sur 0,1, l'ancre à milieu gauche, l'alignement à centre, et la taille de la police à 80. Ajoutez également du texte de substitution dans le champ "texte". C'est juste pour que nous ayons quelque chose à regarder dans l'éditeur; en cours de jeu, cela sera directement adapté via code. 00:00 fera bien.

Puis créez un nouveau fichier appelé Compte à rebours.cs, ajoutez-le à notre objet timer, et ajoutez-y ce code:

utiliser UnityEngine; using System.Collections; Classe publique Countdown: MonoBehaviour float timer = 120f; void Update () timer - = Time.deltaTime; GetComponent() .text = timer.ToString (); 

Nous avons une variable appelée timer, qui tiendra le compte à rebours. En ce moment c'est à 120 secondes ou 2 minutes. Puis dans le Mettre à jour fonction, qui est appelée chaque image, on déduit Time.deltaTime. Ceci est un raccourci pour obtenir le temps réellement écoulé là-bas. Suite à cela, nous obtenons le textMesh composant de l'objet et adapter sa texte valeur pour être la minuterie, transformée en une chaîne.

Lorsque vous lancez le jeu, le texte affiche le nombre en diminution. Toutes nos félicitations! Vous avez construit une minuterie rudimentaire.

Mais c'est loin d'être engageant pour le moment. En outre, il montre 4 à 5 chiffres après le point décimal, et il continuera à entrer dans les valeurs négatives après avoir atteint zéro.

Faites que ça s'arrête à zéro

Un chronomètre négatif aura l'air cassé, alors assurons-nous que cela n'arrive pas. Adapter le Mettre à jour fonction à ressembler à ceci:

if (timer> 0f) timer - = Time.deltaTime;  else timer = 0f;  GetComponent() .text = timer.ToString ();

Cela ne fera que diminuer la minuterie si elle est réellement positive. Si cela devient négatif de toute façon (ce qui pourrait arriver quand on soustrait le temps écoulé), il sera mis à zéro.

Obtenez de plus beaux chiffres

Rappelez-vous cette super police d'affichage numérique que j'ai mentionnée ci-dessus? Allez le chercher et ajoutez-le à votre projet!

La section textmesh de l'inspecteur contient un champ pour la police. Faites-y glisser la police de vos éléments..

Et maintenant, notre minuterie aura l'air beaucoup plus nette!

Fixer la quantité de chiffres

À l’heure actuelle, le nombre de chiffres après la virgule varie, ce qui fait fluctuer le chronomètre de façon très variable. Corrigez cela en adaptant la ligne qui applique la valeur au texte pour ressembler à ceci:

GetComponent() .text = timer.ToString ("F2");

Cela coupera automatiquement tout après deux chiffres, en vous montrant constamment des dizaines et des centièmes de secondes.

Faire le changement de couleur

Ajoutons de la coloration adaptative! Adapter le Mettre à jour fonction à ressembler à ceci:

if (timer> 0f) timer - = Time.deltaTime;  else timer = 0f;  if (minuterie < 10f)  GetComponent() .color = Color.red;  else if (minuterie < 20f)  GetComponent() .color = Color.yellow;  GetComponent() .text = timer.ToString ("F2");

Et la minuterie devient jaune lorsqu'il reste moins de 20 secondes et rouge lorsqu'il reste moins de 10 secondes..

Le fichier Countdown.cs entier devrait ressembler à ceci:

utiliser UnityEngine; using System.Collections; Classe publique Countdown: MonoBehaviour float timer = 60f; public AudioClip soundBlip; void Update () if (timer> 0f) timer - = Time.deltaTime;  else timer = 0f;  if (minuterie < 10f)  GetComponent() .color = Color.red;  else if (minuterie < 20f)  GetComponent() .color = Color.yellow;  GetComponent() .text = timer.ToString ("F2");  

Et c'est tout! Nous avons maintenant un compte à rebours beaucoup plus engageant et intéressant.

Vous pouvez également consulter l'intégralité du projet dans les fichiers sources en haut à droite de cet article..

Conclusion

Nous avons examiné plusieurs éléments qui amélioreront les chronomètres dans les jeux, dont les leçons peuvent également être appliquées à de nombreux autres éléments. En outre, la minuterie que nous avons construite peut être facilement adaptée et insérée dans n’importe quel type de jeu. Elle constituera un élément intéressant sans que vous ayez à développer de nouveau son contenu..

Mais il y a plus! Dans la prochaine partie de cette série, nous examinerons encore plus d’éléments et continuerons à améliorer notre minuterie..