Share
HUD nedkjølingsstenger er visuelle elementer i spillet som ikke nødvendigvis tilhører spillets verden, men er en indikasjon for spilleren av en tidsperiode der hun kan eller ikke kan utføre en handling.
I rollespill, multiplayer online kamp arenaer (som League of Legends eller DOTA), eller til og med sanntids strategispill, er disse indikatorene ofte kritiske for spilleren.
I denne opplæringen vil vi se på hvordan du implementerer disse nedkjølingsbjelkene, uansett hvilket kodingspråk eller verktøy du bruker, basert på pseudokode og bryte ned mekanikken som brukes. Opplæringen hevder ikke å vise den beste eller den eneste måten å implementere nedkjølingsstenger på, men bare analyserer og viser en fungerende, praktisk måte å gjøre det på.
Alle demoene ble laget med Construct 2 R168 stabil versjon, og kan åpnes og utføres i sin gratis versjon. Alle eksempler kildekoden er kommentert.
La oss dykke inn.
En nedkjølingsbjelke er for det meste en visuell tilbakemelding for nedkjølingsmekanikeren selv, og nedkjølingsmekanikeren er i utgangspunktet en timer. Tenk på en handling som et tegn utfører. I det øyeblikket handlingen utføres, starter en timer, og mens denne timeren teller ned, kan tegnet ikke utføre handlingen igjen. Det er nedkjølingen.
Fra et kodespektiv, for å forhindre at handlingen utføres under nedkjølingsperioden, er en boolsk variabel satt til ekte når handlingen utføres. Når du prøver å utføre handlingen din, kontrollerer koden at verdien av den boolske variabelen er falsk, og tillater ikke at handlingen utføres på annen måte. På slutten av timeren settes den boolske variabelen tilbake til falsk, slik at handlingen kan utføres på nytt.
Vurder følgende eksempel som en illustrasjon av dette konseptet:
Når du klikker på Handling knappen, tegnet utfører en handling, og Handling knappen er deaktivert. Under avkjøling, vises den gjenværende tiden i nedkjølingen med jevne mellomrom. På slutten av nedkjølingen er tegnet klar til å utføre handlingen igjen, så Handling knappen er aktivert igjen.
La oss ta en titt på pseudokoden:
// Et objekt Karakter har en boolesk variabel "Cooldown", en numerisk variabel "cTimer" og en annen numerisk variabel "cEndTime" På klikket knapp txtHistory.text = txtHistory.text & newline & "Karakteret utfører en handling" Character.cTimer = 0 Character.cEndTime = txtTimer.text // Tekstobjektet "Cooldown duration" Character.Cooldown = True Button.Enabled = False Hvis Character.Cooldown = True Character.cTimer = Character.cTimer + dt Hvis Character.cTimer> = Character. cEndTime txtHistory.text = txtHistory.text & newline & "Karakteret er klar til å utføre en handling" Character.cTimer = -1 Character.Cooldown = False Button.Enabled = True Else og hvert 0.5 sekund txtHistory.text = txtHistory.text & newline & "Handlingen er på avkjøling." & Character.cEndTime - Character.cTimer & "sekunder med nedkjøling gjenværende."
De På klikket knapp funksjonen kan kun utføres hvis knappen er aktivert, og koden er bare utført en gang etter klikket. Det er brukerens handling som starter timeren og settene Ro deg ned å være ekte.
Når knappen er klikket, vil Character.cEndTime variabel er tiden da nedkjølingsperioden vil bli ferdig; denne verdien er satt basert på verdien i txtTimer tekstobjekt, sett ved siden av Handling knapp.
Også på dette punktet, cTimer verdien er "reset" til 0 siden det er en "ny" timer, og Ro deg ned er satt til ekte for å la den andre delen av koden sparke inn. Endelig deaktiverer vi knappen. (Vi kunne bare la den være aktivert og legge til en annen betingelse for vår På klikket knapp funksjon sjekker om verdien av Ro deg ned er falsk før du fortsetter, men deaktiverer knappen føles som bedre tilbakemelding.)
Merk: I eksemplet og denne pseudokoden er det ingen feil å fange for å hindre deg i å skrive inn noe annet enn et tall i den tekstobjektet. Å skrive inn noe annet vil effektivt sette inn cEndTime å være 0-så i utgangspunktet ingen nedkjøling i det hele tatt.
Linje 10 av den ovennevnte pseudokoden utføres hver tick; det sjekker om verdien av Character.Cooldown er ekte og, hvis så, legger til verdien av dt til nåværende verdi av Character.cTimer.
dt, kort for "delta tid", er en systemvariabel som returnerer tiden som har gått mellom gjengivelsen av den forrige rammen og gjengivelsen av gjeldende ramme. Dette betyr at, uansett hvor kraftig spilleren er, og uansett hvor mye spillet går til, kan vi sikre at nedkjølingsperioden varer like mye tid. (Hvis vi definerte nedkjølingsperioden når det gjelder antall ticks eller rammer som har gått, vil lengden på perioden i sekunder variere på forskjellige maskiner.) Navnet på dette dt variabel eller bruken av den kan variere i henhold til kodemaskinen din.
Hvis nedkjøpet fortsatt er aktivt, kontrollerer vi om gjeldende verdi av cTimer er større enn eller lik cEndTime; I så fall må vi ha nådd slutten av nedkjølingsperioden. Vi viser litt tilbakemelding, og sett Character.Cooldown til falsk slik at denne delen av koden ikke vil utføres igjen før brukeren klikker på Handling knapp. Vi aktiverer også Handling knapp.
Hvis nedkjøpet fortsatt er aktivt, viser vi tilbakemelding som forklarer dette i stedet. Denne spesifikke tilbakemeldingen er faktisk vår "nedkjølingslinje" for dette tekstbaserte eksempelet.
Så det er en grunnleggende nedkjøling mekaniker basert på en grunnleggende timer. For resten av denne artikkelen, la oss fokusere på nedkjøling barer seg selv, og se hvordan de skal implementeres.
En cooldown bar er egentlig bare en sprite som endrer størrelse eller synlighet over tid, i løpet av en nedkjølingsperiode. Det er en tilbakemeldingsmekaniker for spilleren å gi henne beskjed når hun vil kunne utføre handlingen igjen.
Vurder følgende eksempel:
Klikk hvor som helst på skjermen for å utføre handlingen. Legg merke til at den grønne linjen blir rød under nedkjølingen, og vokser fra en bredde på 0 tilbake til sin opprinnelige bredde. Som i det grunnleggende teksteksemplet, kan du angi nedkjølingsvarigheten.
I dette eksemplet, baren (oppkalt CooldownBar) er ingenting mer enn en farget sprite som strekkes til en bredde på 100 piksler. Når handlingen utføres, er bredden satt til 0 piksler. Deretter, krysser alle som Ro deg ned variabel er ekte, bredden er satt basert på gjeldende verdi av cTimer.
La oss ta en titt på pseudokoden:
// Bruk av samme "Character" -objekt som i det grunnleggende eksempelet, denne gangen er objektet synlig på skjermen. På et hvilket som helst museklikk og Character.Cooldown = False Character.cTimer = 0 Character.cEndTime = txtEndTimer.text Character.Cooldown = True CooldownBar.Width = 0 CooldownBar.AnimationFrame = 1 Hvis Character.Cooldown = True Character.cTimer = Character.cTimer + dt CooldownBar.Width = (CooldownBar.MaxWidth / Character.cEndTime) * Character.cTimer Hvis Character.cTimer> = Character. cEndTime Character.cTimer = -1 Character.Cooldown = False CooldownBar.Width = CooldownBar.MaxWidth CooldownBar.AnimationFrame = 0
Den nedkjølende mekanikeren i seg selv er ganske lik den som er beskrevet i forrige eksempel, så la oss fokusere på CooldownBar seg selv. Objektet har to animasjonsrammer: en grønn 32x32px firkant og en rød 32x32px firkant. Den har også a MaxWidth numerisk instansvariabel som er satt til 100 (piksler), den faktiske maksimale bredden på linjen.
Hvert kryss, hvis Ro deg ned er ekte, CooldownBar.width er satt til en brøkdel av CooldownBar.MaxWidth. Vi bestemmer denne fraksjonen ved å dividere maksimal bredde på linjen ved nedkjølingstiden, og deretter multiplisere dette resultatet med gjeldende cTimer tid.
Ved starten og slutten av nedkjølingsperioden, sørger vi også for å endre animasjonsrammen tilsvarende: til rødt, når nedkjølingen starter, og deretter tilbake til grønt når nedkjølingen er ferdig.
Vi kunne gå litt lenger på det visuelle aspektet. Her er noen tanker:
Opprinnelsesstedet til CooldownBar er satt i sentrum, noe som gir den følelsen av total vekst. Hvis du foretrekker det, kan du sette dette opprinnelsespunktet til venstre eller høyre kant av objektet, for å gi det en mer "lineær" følelse.
Dette eksemplet er veldig grunnleggende; Selve linjen består bare av to rammer med forskjellig farge for å forsterke nedkjølingsaspektet. Så lenge baren er rød forstår brukeren at handlingen ikke kan utføres, da rød er vanligvis en farge som pleide å bety "stopp". Men ikke glem dine fargeblinde spillere! Sørg for å bruke farger som er veldig forskjellige, slik at selv de kan fortelle forskjellen, eller bruke en annen metode for visuell tilbakemelding i tillegg til fargeendringen.
Du kan også legge til en oversikt over linjen, et fast rektangel som gjør det mulig for brukeren å bedre estimere tiden som gjenstår i nedkjølingsperioden.
Her er en rask illustrasjon av de forrige punktene:
Det er fortsatt en veldig grunnleggende påfyllingslinje, og det er enda mer du kan legge til på bildene. Baren kan bestå av en animasjon i stedet for bare to farget rammer. Sprite under baren kan styliseres på en slik måte at bakgrunnen ser ut som gjennomsiktig, eller du kan til og med legge til en annen sprite over det for å gi et "glass" inntrykk. Det er mange måter å stilisere nedkjølingslinjen på for å passe til designets design.
I noen spill har spilleren ferdighetsknapper til disposisjon. Disse knappene viser ikke bare nedkjølingen eller tilgjengeligheten av ferdigheten; de er også et grensesnitt for brukeren å utføre den angitte ferdigheten (ofte i tillegg til noen hurtigtaster).
Tenk på dette eksempelet, hvor du klikker på en av knappene vil kaste det riktige våpenet og også vise nedkjølingen som gjenstår:
Som du kan se, vil hver ferdighetsknapp vise en "unfilling" svart bar og en tidsur i løpet av nedkjølingsperioden. Den svarte linjen er bare en svart farget sprite plassert over ferdighetsknappen med en opasitet på 45%, og timeren er et tekstobjekt. Hver forekomst av ferdighetsknappen har sin egen forekomst av disse SkillCover og txtSkillTimer objekter.
Denne gangen, den Ro deg ned, stime og sEndTime variabler er "festet" til hver SkillButton forekomst. Også opprinnelsespunktet for SkillCover svart sprite er på den nederste kanten.
Vurder denne pseudokoden:
// Objekt "SkillButton" med variabler "Cooldown" (boolean), "sTime" (numerisk), "sEndTime" (numerisk) og en bestemt animasjonsramme for å vite hvilken forekomst som blir klikket / valgt. // Objekt "SkillCover" med en variabel "Skill" sett i samsvar med animasjonsrammen til SkillButton de er relatert til. // Objekt "txtSkillTimer" med en variabel "Ferdighet" for samme formål som ovenfor. På SkillButton klikket & SkillButton.Cooldown = False SkillButton.sTime = 0 SkillButton.Cooldown = True Opprett Proj & ProjImage-objekter ProjImage.AnimationFrame = SkillButton.AnimationFrame // For å enten kaste en dolk eller en ninja-stjerne txtSkillTimer.Skill = SkillButton.AnimationFrame & SkillCover.Skill = SkillButton.AnimationFrame Sett txtSkillTimer posisjon til bunnen av SkillButton Sett SkillCover posisjon til bunnen av SkillButton Set txtSkillTimer foran SkillButton Sett SkillCover bak txtSkillTimer // Still foran SkillButton txtSkillTimer.Visible = True SkillCover.Visible = True SkillCover.Height = SkillButton.Height For hver SkillButton & SkillButton.Cooldown = True 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) Hvis SkillButton.sTime> = SkillButton.sEndTime SkillButton.sTime = -1 SkillButton.Cooldown = False txtSkillTimer.Skill = SkillButton.AnimationFrame & SkillCover.Skill = SkillButton.AnimationFrame txtSkillTimer.Visible = False SkillCover.Visible = False Skill
Her velger vi riktig forekomst av txtSkillTimer og SkillCover . (Dette er en Konstruksjon 2-teknikk, vi bestemmer de riktige forekomstene i henhold til verdien av Ferdighet, som skal stemme overens med animasjonsrammen for gjeldende SkillButton det ble enten klikket eller valgt i For hver sløyfe.)
I motsetning til våre tidligere nedkjølingsstenger, SkillCover starter ut "full", som dekker hele høyden av SkillButton, og deretter, under nedkjølingen, reduseres sakte, noe som viser bildet av knappen.
For å gjøre dette, gir vi SkillCover en høyde som stemmer overens med SkillButton til å begynne med, og deretter trekke hver ramme av (SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime fra denne fulle høyden. Det er i utgangspunktet den samme formelen vi brukte før for å beregne brøkdelen av nedkjølingsperioden som er gått, men i omvendt.
Noen spill vil formatere tiden annerledes og tillate spilleren å konfigurere skjermen hun foretrekker. For eksempel kan ett minutt og førti sekunder vises som 01:40 eller som 100s. For å bruke dette i ditt eget spill, kjør en Hvis sjekk, før du viser teksten til txtSkillTimer, for å se hvilket format spilleren har valgt, og format teksten i samsvar med dette. Noen spill eller spillere foretrekker ikke å vise tiden som tekst i det hele tatt.
Det er mer du kan gjøre med SkillCover. Du kan spille med sin uigennytthet for å skjule knappen mer eller mindre enn 45%. Siden det er en sprite som dekker et annet bilde, kan du også spille med blandingsmodus, for eksempel å desaturere det underliggende bildet og faktisk avsløre farger mer og mer etter hvert som nedkjølingen passerer. Du kan til og med vurdere å legge til webGL- eller shader-effekter for å passe til resten av brukergrensesnittet eller designen din. Når det gjelder kjølebaren, er det opp til fantasien og kunstnerisk retning.
Vi har sett at en nedkjølingsbøyle er en visuell tilbakemelding for en enkel mekaniker som forhindrer at en handling utføres i en viss tid.
Du kan bruke enkle sprites og strekke bredden eller høyden over tid for å signalisere brukeren at en nedkjøling skjer. Du kan vise gjenværende tid i ren tekst, formater den enten i minutter eller sekunder. Du kan til og med bruke noen form for animasjon, blandemodus eller skyggereffekt som passer til den kunstneriske retningen til spillet ditt.
Hvis du tenker på det for et sekund, kan du også bruke denne metoden til å kontrollere brannmengden for et våpen: så lenge pistolen er på avkjøling, vil den ikke skyte et annet prosjektil, selv om Brann nøkkelen er nede; I det øyeblikket nedkjølingen er fullført, kan et annet prosjektil bli sparket. Ingen avkjølingslinje er nødvendig i dette tilfellet.
Du kan laste ned alle eksemplene og åpne dem i Construct 2 gratis utgave R168 eller senere.
Jeg håper du fant denne artikkelen interessant, og jeg gleder meg til å se dine egne design av cooldown barer.
Accentsconagua