Share
Barele de cooldown HUD sunt elemente vizuale în joc care nu aparțin neapărat lumii jocului, dar sunt o indicație pentru jucătorul unei perioade de timp în care poate sau nu poate efectua o acțiune.
În jocurile de rol, în arenele de luptă multiplayer online (cum ar fi League of Legends sau DOTA), sau chiar jocuri de strategie în timp real, acești indicatori sunt adesea critici pentru jucător.
În acest tutorial, vom analiza modul de implementare a barelor de cooldown, indiferent de limbajul sau instrumentul de codare, bazându-vă pe pseudo-cod și degradând mecanica utilizată. Tutorialul nu pretinde ca arata cel mai bun sau singurul mod de a implementa barele de cooldown, ci doar analizeaza si afiseaza o modalitate practica si practica de a face acest lucru.
Toate demosurile au fost făcute cu versiunea stabilă Construct 2 R168 și pot fi deschise și executate în versiunea gratuită. Toate codurile sursă ale exemplelor sunt comentate.
Hai să ne aruncăm.
O bară de cooldown este cea mai mare parte un feedback vizual pentru mecanicul de cooldown în sine, iar mecanicul de cooldown este în esență un timer. Luați în considerare o acțiune pe care un personaj o realizează. În momentul în care se efectuează acțiunea, începe un cronometru și, în timp ce acest cronometru se numără în jos, caracterul nu poate efectua din nou acțiunea. Aceasta este cooldown-ul.
Din perspectiva codului, pentru a preveni acțiunea efectuată în timpul perioadei de cooldown, o variabilă booleană este setată la Adevărat când acțiunea este efectuată. Când încercați să efectuați acțiunea, codul verifică dacă valoarea variabilei Boolean este fals, și nu permite ca acțiunea să fie efectuată altfel. La sfârșitul temporizatorului, variabila booleană este readusă la fals, permițând reluarea acțiunii.
Luați în considerare următorul exemplu ca o ilustrare a acestui concept:
După ce faceți clic pe Acțiune butonul, caracterul efectuează o acțiune și Acțiune butonul este dezactivat. În timpul cooldown-ului, la intervale regulate este afișat timpul rămas în cooldown. La sfârșitul cooldown-ului, personajul este gata să efectueze din nou acțiunea, așa că Acțiune butonul este reactivat.
Să aruncăm o privire la pseudo-cod:
// Un obiect Caracterul are o variabilă booleană "Cooldown", o variabilă numerică "cTimer" și o altă variabilă numerică "cEndTime" Apăsată pe Button txtHistory.text = txtHistory.text & newline & "Caracterul efectuează o acțiune" Character.cTimer = 0 Character.cEndTime = txtTimer.text // Obiectul text "Durata cooldown" Character.Cooldown = True Button.Enabled = False Dacă Character.Cooldown = True Character.cTimer = Character.cTimer + dt Dacă Character.cTimer> = Character. cEndTime txtHistory.text = txtHistory.text & newline & "Caracterul este gata pentru a efectua o acțiune" Character.cTimer = -1 Character.Childown = False Button.Enabled = Adevărat și fiecare 0,5 secunde txtHistory.text = txtHistory.text & newline & "Acțiunea este în cooldown." & Character.cEndTime - Character.cTimer & "secunde de răcire rămas".
Pe butonul clicat funcția poate fi executată numai dacă butonul este activat și codul său este executat numai o dată după clic. Aceasta este acțiunea utilizatorului care pornește cronometrul și setează Răcire a fi Adevărat.
Când este apăsat butonul, butonul Character.cEndTime variabilă este momentul în care perioada de cooldown va termina; această valoare este stabilită pe baza valorii din txtTimer obiect text, văzut de lângă Acțiune buton.
De asemenea, în acest moment, cTimer valoarea este resetată la 0 deoarece este un "nou" cronometru, și Răcire este setat sa Adevărat pentru a permite ca partea a doua a codului să fie înlocuită. În cele din urmă, dezactivați butonul. (Am putea lăsa să fie activată și să adauge o altă condiție pentru noi Pe butonul clicat funcția de verificare dacă valoarea de Răcire este fals înainte de a continua, dar dezactivarea butonului pare a fi un feedback mai bun.)
Notă: În exemplul respectiv și în acest cod pseudo-cod, nu există nicio eroare pentru a vă împiedica să introduceți altceva decât un număr în acel obiect text. Introducerea altceva va fi setată în mod eficient cEndTime a fi 0-deci, practic, nici o cooldown deloc.
Linia 10 a pseudo-codului de mai sus este executată la fiecare tick; verifică dacă valoarea Character.Cooldown este Adevărat și, dacă da, adaugă valoarea lui dt la valoarea curentă de Character.cTimer.
dt, scurt pentru "delta time", este o variabilă de sistem care returnează timpul scurs între redarea cadrului precedent și redarea cadrului curent. Acest lucru înseamnă că, oricât de puternic ar fi computerul jucătorului, și indiferent de modul în care jocul rulează, putem asigura că perioada de cooldown durează același timp. (Dacă am definit perioada de cooldown în termenii unui număr de căpușe sau cadre care au trecut, lungimea perioadei în secunde ar varia de la diferite mașini.) Numele acestei dt variabilă sau utilizarea sa poate diferi în funcție de motorul dvs. de codificare.
Dacă cooldownul este încă activ, verificăm dacă valoarea curentă a lui cTimer este mai mare sau egal cu cEndTime; dacă este așa, trebuie să fi ajuns la sfârșitul perioadei de cooldown. Afișăm un pic de feedback și suntem pregătiți Character.Cooldown la fals astfel încât această secțiune de cod să nu se execute din nou până când utilizatorul nu face clic pe Acțiune buton. De asemenea, reactivăm Acțiune buton.
În cazul în care cooldown-ul este încă activ, afișăm feedback care explică acest lucru. Acest bit specific de feedback este de fapt "bara de cooldown" pentru acest exemplu bazat pe text.
Deci asta eo cooldown de bază mecanic bazat pe un cronometru de bază. Pentru restul acestui articol, să ne concentrăm asupra cooldown-ului baruri ei înșiși și să vezi cum să le implementezi.
O bară de cooldown este într-adevăr doar un sprite care modifică dimensiunea sau vizibilitatea în timp, în timpul unei perioade de cooldown. Este un mecanism de feedback pentru ca jucătorul să o informeze când va putea să efectueze din nou acțiunea.
Luați în considerare următorul exemplu:
Faceți clic pe oriunde pe ecran pentru a efectua acțiunea. Rețineți că bara verde devine roșie în timpul cooldown-ului și crește de la o lățime de 0 înapoi la lățimea inițială. Ca și în exemplul textual de bază, puteți seta durata cooldown.
În acest exemplu, bara (numită CooldownBar) nu este altceva decât un sprite colorat care este întins la o lățime de 100 de pixeli. Când acțiunea este efectuată, lățimea acesteia este setată la 0 pixeli. Apoi, fiecare bifați că Răcire este variabilă Adevărat, lățimea este stabilită pe baza valorii curente de cTimer.
Să aruncăm o privire la pseudo-cod:
// Folosind acelasi obiect "Character" ca in exemplul de baza, de data aceasta obiectul este vizibil pe ecran Pe orice click de mouse si Character.Cooldown = False Character.cTimer = 0 Character.cEndTime = txtEndTimer.text Character.Cooldown = True CooldownBar.Width = 0 CooldownBar.AnimationFrame = 1 Dacă Character.Cooldown = True Character.cTimer = Caracter.cTimer + dt CooldownBar.Width = (CooldownBar.MaxWidth / Character.cEndTime) * Character.cTimer Dacă Character.cTimer> = Caracter. cEndTime Character.cTimer = -1 Character.Cooldown = False CooldownBar.Width = CooldownBar.MaxWidth CooldownBar.AnimationFrame = 0
Mecanicul de cooldown în sine este destul de similar cu cel descris în exemplul anterior, așa că trebuie să ne concentrăm asupra CooldownBar în sine. Obiectul are două cadre de animație: un pătrat 32x32px verde și un pătrat roșu de 32x32px. De asemenea, are a Lățimea maximă variabila instanță numerică care este setată la 100 (pixeli), lățimea maximă efectivă a barei.
Fiecare bifați, dacă Răcire este Adevărat, CooldownBar.width este setat la o fracțiune de CooldownBar.MaxWidth. Se determină această fracție prin împărțirea lățimii maxime a barei la timpul de terminare a răcirii și apoi înmulțirea acestui rezultat cu curentul cTimer timp.
La începutul și la sfârșitul perioadei de cooldown, asiguram, de asemenea, schimbarea cadrului de animație în mod corespunzător: la roșu, când începe cooldownul și apoi înapoi la verde după ce se face cooldownul.
Am putea merge mai departe pe aspectul vizual. Iată câteva gânduri:
Punctul de origine al CooldownBar este stabilită în centrul său, ceea ce îi conferă sentimentul de creștere generală. Dacă preferați, puteți seta acest punct de origine la marginea din stânga sau la dreapta a obiectului, pentru a avea un sentiment mai liniar.
Acest exemplu este foarte simplu; barul în sine este compus numai din două cadre de culoare diferită pentru a întări aspectul de cooldown. Atâta timp cât bara este roșie, utilizatorul înțelege că acțiunea nu poate fi efectuată, deoarece roșul este, în general, o culoare care înseamnă "stop". Dar nu uita-ti jucatorii cu culori orb! Asigurați-vă că utilizați culori care sunt într-adevăr diferite, astfel încât chiar ei să poată spune diferența sau să utilizeze o altă metodă de feedback vizual în afară de schimbarea culorii.
De asemenea, puteți adăuga un contur în bara, un dreptunghi fix care ar permite utilizatorului să estimeze mai bine timpul rămas în perioada de cooldown.
Iată o ilustrare rapidă a punctelor anterioare:
Este încă un bar de bază de reîncărcare și există și mai multe detalii pe care le puteți adăuga vizualului. Bara ar putea consta dintr-o animație în loc de doar două cadre colorate. Sprite sub bara ar putea fi stilizat în așa fel încât fundalul său să apară transparent sau chiar să puteți adăuga o altă sprite peste acesta pentru a da o impresie "de sticlă". Există mai multe modalități de a stiliza bara de cooldown pentru a se potrivi designului jocului dvs. cel mai bine.
În unele jocuri, jucătorul are butoane de calificare la dispoziția lor. Aceste butoane nu afișează doar cooldownul sau disponibilitatea abilităților; acestea sunt, de asemenea, o interfață pentru utilizatorul de a efectua calificarea indicată (de multe ori în plus față de unele comenzi rapide de la tastatură).
Luați în considerare acest exemplu, în care apăsarea pe unul din butoane va arunca arma potrivită și va afișa și restul de răcire:
După cum puteți vedea, fiecare buton de calificare va afișa o bară neagră și un timer în timpul perioadei de cooldown. Bara neagră este doar un sprite colorat negru plasat peste butonul de calificare cu o opacitate de 45%, iar temporizatorul este un obiect text. Fiecare instanță a butonului de calificare are propriul său exemplu SkillCover și txtSkillTimer obiecte.
De data aceasta, Răcire, STIME și sEndTime variabilele sunt "atașate" fiecăruia SkillButton instanță. De asemenea, punctul de origine pentru SkillCover negru sprite este la marginea de jos.
Luați în considerare acest pseudo-cod:
// Obiect "SkillButton" cu variabilele "Cooldown" (boolean), "sTime" (numeric), "sEndTime" (numeric) și un cadru de animație specific pentru a afla care instanță este click / selectată. // Obiect "SkillCover" cu o variabilă "Abilitate" setată în funcție de cadrul de animație al SkillButton cu care sunt legate. // Obiect "txtSkillTimer" cu o variabilă "Skill" pentru același scop ca mai sus. Pe SkillButton ați făcut clic pe & SkillButton.Cooldown = False SkillButton.sTime = 0 SkillButton.Cooldown = Adevărat Creați Proj & ProjImage obiecte ProjImage.AnimationFrame = SkillButton.AnimationFrame // Să aruncați un pumnal sau o stea ninja txtSkillTimer.Skill = SkillButton.AnimationFrame & SkillCover.Skill = SkillButton.AnimationFrame Setați poziția lui txtSkillTimer în partea de jos a SkillButton Setați poziția SkillCover în partea de jos a SkillButton Setați txtSkillTimer în fața SkillButton Setați SkillCover în spatele txtSkillTimer // Încă în fața SkillButton txtSkillTimer.Visible = True SkillCover.Visible = True SkillCover.Height = SkillButton.Height Pentru fiecare SkillButton & SkillButton.Cooldown = Adevărat SkillButton.sTime = SkillButton.sTime + dt txtSkillTimer.Skill = SkillButton.AnimationFrame & SkillCover.Skill = SkillButton.AnimationFrame txtSkillTimer.text = SkillButton.sEndTime - SkillButton. sTime SkillCover.height = SkillButton.Height - ((SkillButton.Height / SkillButton.sEndTime) * SkillButton. sTime) Dacă SkillButton.sTime> = SkillButton.sEndTime SkillButton.sTime = -1 SkillButton.Cooldown = False txtSkillTimer.Skill = SkillButton.AnimationFrame & SkillCover.Skill = SkillButton.AnimationFrame txtSkillTimer.Visible = False SkillCover.Visible = False
Aici, selectăm instanța corectă din txtSkillTimer și SkillCover . (Aceasta este o tehnică Construct 2, determinăm instanțele corecte în funcție de valoarea lui Calificare, care ar trebui să corespundă cadrului de animație al curentului SkillButton care a fost sau a fost selectat în Pentru fiecare buclă.)
Spre deosebire de barele noastre anterioare de cooldown, SkillCover începe "plin", acoperind toată înălțimea SkillButton, și apoi, în timpul răcirii, scade încet, dezvăluind imaginea butonului.
Pentru a face asta, le dăm SkillCover o înălțime care se potrivește cu cea a lui SkillButton pentru a începe cu, și apoi, fiecare cadru, scade (SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime din această înălțime completă. Este în esență aceeași formulă pe care am folosit-o anterior pentru a calcula fracția perioadei de cooldown care a trecut, dar în sens invers.
Unele jocuri vor formata în mod diferit timpul și vor permite jucătorului să configureze afișajul pe care îl preferă. De exemplu, un minut și patruzeci de secunde ar putea fi afișate ca 01:40 sau ca 100s. Pentru a aplica acest lucru în propriul joc, rulați-o Dacă verificați, înainte de a afișa textul txtSkillTimer, pentru a vedea ce format a selectat playerul și pentru a formata textul în consecință. Unele jocuri sau jucători chiar preferă să nu afișeze timpul ca text.
Mai puteți face ceva cu SkillCover. Puteti juca cu opacitatea sa pentru a observa butonul mai mult sau mai putin de 45%. Deoarece este un sprite care acoperă o altă imagine, puteți juca, de asemenea, cu modul său de amestecare - de exemplu, pentru a desatura imaginea de bază și de a-și dezvălui, de fapt, culorile sale tot mai mult pe măsură ce trece cooldownul. Ați putea chiar să vă gândiți să adăugați efecte webGL sau shader pentru a se potrivi cu restul interfeței UI sau cu designul. În ceea ce privește bara de cooldown, depinde de imaginația și direcția artistică.
Am văzut că o bară de cooldown este un feedback vizual pentru un mecanic simplu care împiedică efectuarea unei acțiuni pentru o anumită perioadă de timp.
Puteți utiliza sprite simple și să vă întindeți lățimea sau înălțimea lor în timp, pentru a semnala utilizatorul dvs. că o cooldown se întâmplă. Puteți afișa timpul rămas în text simplu, formatându-l în câteva minute sau în câteva secunde. Puteți aplica chiar orice fel de animație, mod de amestecare sau efect de shader care se va potrivi direcției artistice a jocului dvs..
Dacă te gândești la asta pentru o secundă, poți folosi și această metodă pentru a controla rata focului pentru o armă: atâta timp cât pistolul este în cooldown, nu va trage un alt proiectil, chiar dacă Foc cheie este în jos; în momentul în care cooldownul este complet, poate fi lansat un alt proiectil. În acest caz, nu este necesară o bară de cooldown.
Puteți descărca toate exemplele și le puteți deschide în Construct 2 ediție gratuită R168 sau o versiune ulterioară.
Sper că ați găsit acest articol interesant și aștept cu nerăbdare să vă văd propriile modele de bare de cooldown.
Accentsconagua