Share
Les barres de temps de recharge du HUD sont des éléments visuels du jeu qui n'appartiennent pas nécessairement au monde du jeu, mais indiquent au joueur la période au cours de laquelle il peut ou non effectuer une action..
Dans les jeux de rôle, les arènes de combat multijoueurs en ligne (comme League of Legends ou DOTA), ou même les jeux de stratégie en temps réel, ces indicateurs sont souvent essentiels pour le joueur..
Dans ce didacticiel, nous verrons comment implémenter ces barres de refroidissement, quel que soit votre langage de codage ou votre outil, en utilisant un pseudo-code et en décomposant les mécanismes utilisés. Le didacticiel ne prétend pas montrer le meilleur ni le seul moyen d'implémenter des barres de refroidissement, mais simplement une analyse et une méthode de travail pratique et pratique..
Toutes les démos ont été réalisées avec la version stable Construct 2 R168 et peuvent être ouvertes et exécutées dans sa version gratuite. Le code source de tous les exemples est commenté.
Plongeons dedans.
Une barre de temps de recharge est principalement un retour visuel pour le mécanicien du temps de recharge lui-même, et le mécanisme de refroidissement est essentiellement une minuterie. Considérez une action qu'un personnage effectue. Au moment où l'action est exécutée, un chronomètre démarre et pendant que ce chronomètre compte à rebours, le personnage ne peut plus exécuter l'action. C'est le temps de recharge.
Du point de vue du code, pour empêcher l’action d’être exécutée pendant le délai de récupération, une variable booléenne est définie sur vrai quand l'action est effectuée. En essayant d’effectuer votre action, le code vérifie que la valeur de la variable booléenne est faux, et ne permet pas que l'action soit effectuée autrement. À la fin du chronomètre, la variable booléenne est remise à faux, permettant à l'action d'être exécutée à nouveau.
Prenons l'exemple suivant pour illustrer ce concept:
Une fois que vous cliquez sur le action bouton, le personnage exécute une action et le action bouton est désactivé. Pendant le temps de recharge, le temps restant dans le temps de recharge est affiché à intervalles réguliers. À la fin du temps de recharge, le personnage est prêt à exécuter l'action à nouveau. Le action le bouton est réactivé.
Regardons le pseudo-code:
// Un objet personnage a une variable booléenne "Cooldown", une variable numérique "cTimer" et une autre variable numérique "cEndTime" sur le bouton cliqué txtHistory.text = txtHistory.text & newline & "Le personnage effectue une action" Character.cTimer = 0 Character.cEndTime = txtTimer.text // L'objet texte "Durée du temps de recharge" Character.Cooldown = True Button.Enabled = False Si Character.Cooldown = True Character.cTimer = Character.cTimer + dt If Character.cTimer> = Character. cEndTime txtHistory.text = txtHistory.text & newline & "Le personnage est prêt à effectuer une action" Character.cTimer = -1 Character.Cooldown = False Button.Enabled = True Sinon & Toutes les 0,5 secondes txtHistory.text = txtHistory.text & newline & "L'action est sur le temps de recharge." & Character.cEndTime - Character.cTimer & "secondes de temps de recharge restants."
le Sur le bouton cliqué Cette fonction ne peut être exécutée que si le bouton est activé et son code n’est exécuté qu’une fois après le clic. C’est l’action de l’utilisateur qui démarre le chronomètre et définit Refroidir être vrai.
Lorsque le bouton est cliqué, le Variable Character.cEndTime est le moment où le délai de récupération prendra fin; cette valeur est définie en fonction de la valeur dans le txtTimer objet texte, vu à côté du action bouton.
Également à ce stade, le cTimer la valeur est "réinitialiser" à 0 puisqu'il s'agit d'un "nouveau" minuteur, et Refroidir est réglé sur vrai pour permettre à la seconde partie du code de démarrer. Enfin, nous désactivons le bouton. (Nous pourrions simplement le laisser activé et ajouter une autre condition à notre Sur le bouton cliqué fonction vérifiant si la valeur de Refroidir est faux avant de continuer, mais la désactivation du bouton donne l'impression d'un meilleur retour d'informations.)
Remarque: Dans l'exemple et ce pseudo-code, il n'y a aucune erreur à intercepter pour vous empêcher d'entrer autre chose qu'un nombre dans cet objet texte. Entrer quoi que ce soit d'autre sera effectivement réglé cEndTime être 0-donc, fondamentalement, pas de temps de recharge du tout.
La ligne 10 du pseudo-code ci-dessus est exécutée à chaque tick; il vérifie si la valeur de Caractère.Cooldown est vrai et, si oui, ajoute la valeur de dt à la valeur actuelle de Caractère.
dt, En abrégé, "delta time" est une variable système qui renvoie le temps écoulé entre le rendu de l'image précédente et celui de l'image actuelle. Cela signifie que, quel que soit l'ordinateur du joueur, quelle que soit la vitesse de traitement utilisée, nous pouvons nous assurer que la période de recharge dure la même durée. (Si nous définissions la période de recharge en fonction d'un nombre de ticks ou de trames qui se sont écoulées, la durée de la période en secondes pourrait varier sur différentes machines.) dt variable ou son utilisation peut différer selon votre moteur de codage.
Si le temps de recharge est toujours actif, nous vérifions si la valeur actuelle de cTimer est supérieur ou égal à cEndTime; Si c'est le cas, nous devons avoir atteint la fin de la période de recharge. Nous affichons un peu de commentaires et définissons Caractère.Cooldown à faux afin que cette section de code ne s'exécutera pas jusqu'à ce que l'utilisateur clique sur le action bouton. Nous réactivons également le action bouton.
Si le temps de recharge est toujours actif, nous affichons des commentaires l'expliquant à la place. Cette information spécifique est en fait notre "barre de temps de recharge" pour cet exemple textuel..
Donc, c'est un temps de recharge de base mécanicien basé sur une minuterie de base. Pour le reste de cet article, concentrons-nous sur le temps de recharge les bars eux-mêmes et voir comment les mettre en œuvre.
Une barre de temps de recharge n'est en réalité qu'un sprite qui change de taille ou de visibilité au fil du temps, au cours d'une période de recharge. Il s’agit d’un mécanisme permettant au joueur de lui faire savoir quand il sera capable de jouer à nouveau l’action..
Prenons l'exemple suivant:
Cliquez n'importe où sur l'écran pour effectuer l'action. Notez que la barre verte vire au rouge pendant le temps de recharge et se développe sur une largeur de 0 retour à sa largeur d'origine. Comme dans l'exemple textuel de base, vous pouvez définir la durée du temps de recharge.
Dans cet exemple, la barre (nommée Barre de recharge) n’est rien de plus qu’une image-objet colorée étendue sur une largeur de 100 pixels. Lorsque l'action est effectuée, sa largeur est définie sur 0 pixel. Ensuite, chaque tick que le Refroidir variable est vrai, la largeur est définie en fonction de la valeur actuelle de cTimer.
Regardons le pseudo-code:
// En utilisant le même objet "Caractère" que dans l'exemple de base, cette fois, l'objet est visible à l'écran. Cliquez avec n'importe quel bouton de la souris & Character.Cooldown = False Character.cTimer = 0 Character.cEndTime = txtEndTimer.text Character.Cooldown = True CooldownBar.Width = 0 CooldownBar.AnimationFrame = 1 Si Character.Cooldown = True Character.cTimer = Character.cTimer + dt CooldownBar.Width = (CooldownBar.MaxWidth / Character.cEndTime) * Character.cTimer Si Character.cTimer> = Caract. cEndTime Character.cTimer = -1 Character.Cooldown = False CooldownBar.Width = CooldownBar.MaxWidth CooldownBar.AnimationFrame = 0
Le mécanisme de recharge lui-même est assez similaire à celui décrit dans l'exemple précédent, alors concentrons-nous sur le Barre de recharge lui-même. L'objet a deux images d'animation: un carré vert 32x32px et un carré rouge 32x32px. Il a aussi un Largeur maximale variable d'instance numérique définie sur 100 (pixels), la largeur maximale réelle de la barre.
Chaque tick, si Refroidir est vrai, CooldownBar.width est fixé à une fraction de CooldownBar.MaxWidth. Nous déterminons cette fraction en divisant la largeur maximale de la barre par le temps de fin du temps de recharge, puis en multipliant ce résultat par le nombre actuel. cTimer temps.
Au début et à la fin du temps de recharge, nous veillons également à modifier le cadre d'animation en conséquence: en rouge, lorsque le temps de recharge commence, puis de nouveau en vert une fois le temps de recharge terminé..
Nous pourrions aller un peu plus loin sur l'aspect visuel. Voici quelques réflexions:
Le point d'origine de Barre de recharge est placé en son centre, ce qui lui donne le sentiment d’une croissance globale. Si vous préférez, vous pouvez définir ce point d'origine sur le bord gauche ou droit de l'objet pour lui donner une impression plus "linéaire"..
Cet exemple est très basique. la barre elle-même n'est composée que de deux cadres de couleurs différentes pour renforcer l'aspect de temps de recharge. Tant que la barre est rouge, l'utilisateur comprend que l'action ne peut pas être effectuée, car le rouge est généralement une couleur utilisée pour signifier "arrêt". Mais n'oubliez pas vos joueurs daltoniens! Veillez à utiliser des couleurs vraiment différentes pour pouvoir les distinguer, ou utilisez une autre méthode de retour visuel en plus du changement de couleur..
Vous pouvez également ajouter un contour à la barre, un rectangle fixe qui permettrait à l'utilisateur de mieux estimer le temps restant dans la période de recharge..
Voici une rapide illustration des points précédents:
C'est toujours une barre de remplissage très basique, et il y a encore plus à ajouter aux visuels. La barre pourrait consister en une animation au lieu de deux images colorées. Le sprite situé sous la barre peut être stylisé de manière à ce que son arrière-plan apparaisse transparent, ou vous pouvez même ajouter un autre sprite dessus pour donner une impression "de verre". Il existe de nombreuses façons de styliser la barre de refroidissement pour l'adapter au mieux à la conception de votre jeu..
Dans certains jeux, le joueur dispose de boutons de compétences. Ces boutons n'affichent pas uniquement le temps de recharge ou la disponibilité de la compétence; ils constituent également une interface permettant à l'utilisateur d'effectuer la compétence indiquée (souvent en plus de certains raccourcis clavier).
Prenons cet exemple, dans lequel cliquer sur l'un des boutons lance l'arme appropriée et affiche également le temps de recharge restant:
Comme vous pouvez le constater, chaque bouton de compétence affiche une barre noire "non remplie" et une minuterie pendant son temps de recharge. La barre noire est simplement une image-objet de couleur noire placée sur le bouton de compétence avec une opacité de 45%, et le temporisateur est un objet texte. Chaque instance du bouton de compétence possède sa propre instance. SkillCover et txtSkillTimer objets.
Cette fois, le Refroidir, temps et heure de fin les variables sont "attachées" à chacune SkillButton exemple. En outre, le point d’origine de la SkillCover le sprite noir est à son bord inférieur.
Considérons ce pseudo-code:
// Object "SkillButton" avec les variables "Cooldown" (booléen), "sTime" (numérique), "sEndTime" (numérique) et une image d'animation spécifique pour savoir quelle instance est cliquée / sélectionnée. // Object "SkillCover" avec une variable "Skill" définie en fonction de la trame d'animation du SkillButton auquel ils sont liés. // Objet "txtSkillTimer" avec une variable "Compétence" dans le même but que ci-dessus. Sur SkillButton a cliqué sur & SkillButton.Cooldown = False SkillButton.sTime = 0 SkillButton.Cooldown = True Créer des objets Proj & ProjImage ProjImage.AnimationFrame = SkillButton.AnimationFrame // Pour lancer un dagger ou un ninja étoiles SkillCover.Skill = SkillButton.AnimationFrame Placez la position de txtSkillTimer au bas de SkillButton Set la position de SkillCover à la fin de la session. SkillBover.Height = SkillBtonton sTime SkillCover.height = SkillButton.Height - ((SkillButton.Height / SkillButton.sEndTime) * SkillButton. sTime) Si SkillButton.sTime> = SkillButton.sEndTime SkillButton.sTime = -1 SkillButton.Cooldown = False txtSkillTimer.Skill = S’équiper de
Ici, nous sélectionnons la bonne instance de txtSkillTimer et SkillCover . (Ceci est une technique de construction 2; nous déterminons les instances correctes en fonction de la valeur de Compétence, qui devrait correspondre à la trame d'animation du courant SkillButton qui a été cliqué ou sélectionné dans le Pour chaque boucle.)
Contrairement à nos anciennes barres de recharge, SkillCover commence "plein", couvrant toute la hauteur de la SkillButton, et puis, pendant le temps de recharge, diminue lentement, révélant l'image du bouton.
Pour ce faire, nous nous donnons SkillCover une hauteur qui correspond à celle de SkillButton pour commencer, puis chaque image, soustrayez (SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime à partir de cette pleine hauteur. C’est essentiellement la même formule que nous avons utilisée auparavant pour calculer la fraction de la période de recharge qui s’est écoulée, mais en sens inverse..
Certains jeux formateront l’heure différemment et permettront au joueur de configurer l’affichage qu’il préfère. Par exemple, une minute et quarante secondes peuvent être affichées comme suit: 1:40 ou comme 100s. Pour appliquer cela dans votre propre jeu, lancez un Si vérifier, avant d'afficher le texte de txtSkillTimer, pour voir quel format le lecteur a sélectionné et formatez le texte en conséquence. Certains jeux ou joueurs préfèrent même ne pas afficher l'heure sous forme de texte..
Vous pouvez faire plus avec le SkillCover. Vous pouvez jouer avec son opacité pour masquer le bouton plus ou moins de 45%. Puisqu'il s'agit d'un sprite qui recouvre une autre image, vous pouvez également jouer avec son mode de fusion, par exemple, pour désaturer l'image sous-jacente et révéler ses couleurs de plus en plus au fur et à mesure que le temps de recharge passe. Vous pouvez même envisager d'y ajouter des effets webGL ou shader afin de l'adapter au reste de votre interface utilisateur ou de votre conception. Quant à la barre de recharge, elle dépend de votre imagination et de votre direction artistique..
Nous avons vu qu'une barre de temps de recharge est un retour visuel pour un mécanicien simple qui empêche l'exécution d'une action pendant un certain temps..
Vous pouvez utiliser des sprites simples et étirer leur largeur ou leur hauteur avec le temps pour signaler à l'utilisateur qu'un temps de recharge est en cours. Vous pouvez afficher le temps restant en texte brut, en le mettant en forme en minutes ou en secondes. Vous pouvez même appliquer n'importe quel type d'animation, mode de fusion ou effet de shader qui conviendra à la direction artistique de votre jeu..
Si vous y réfléchissez une seconde, vous pouvez également utiliser cette méthode pour contrôler la cadence de tir d’une arme: tant que le fusil est en mode de récupération, il ne tirera pas un autre projectile, même si le Feu la clé est en panne; au moment où le temps de recharge est terminé, un autre projectile peut être tiré. Aucune barre de recharge n'est requise dans ce cas.
Vous pouvez télécharger tous les exemples et les ouvrir dans Construct 2, édition gratuite R168 ou ultérieure..
J'espère que vous avez trouvé cet article intéressant et j'ai hâte de voir vos propres créations de barres de recharge.
Accentsconagua