Share
Le barre di ricarica dell'HUD sono elementi visivi in gioco che non necessariamente appartengono al mondo del gioco, ma sono un'indicazione per il giocatore di un periodo di tempo durante il quale può o non può eseguire un'azione.
Nei giochi di ruolo, nelle arene da battaglia multiplayer online (come League of Legends o DOTA), o anche in giochi di strategia in tempo reale, questi indicatori sono spesso fondamentali per il giocatore.
In questo tutorial, vedremo come implementare queste barre di cooldown, qualunque sia il linguaggio o lo strumento di codifica, basandosi sullo pseudo-codice e abbattendo i meccanismi utilizzati. Il tutorial non pretende di mostrare il migliore o l'unico modo per implementare barre di cooldown, ma semplicemente analizza e mostra un modo pratico e pratico per farlo.
Tutte le demo sono state realizzate con la versione stabile Construct 2 R168 e possono essere aperte ed eseguite nella sua versione gratuita. Il codice sorgente di tutti gli esempi viene commentato.
Tuffiamoci dentro.
Una barra di cooldown è principalmente un feedback visivo per la meccanica di cooldown stessa, e la meccanica di cooldown è fondamentalmente un timer. Considera un'azione che un personaggio compie. Nel momento in cui viene eseguita l'azione, viene avviato un timer e mentre questo timer esegue il conto alla rovescia, il personaggio non può eseguire di nuovo l'azione. Questo è il cooldown.
Dal punto di vista del codice, per evitare che l'azione venga eseguita durante il periodo di raffreddamento, viene impostata una variabile booleana vero quando viene eseguita l'azione. Quando si tenta di eseguire l'azione, il codice controlla che il valore della variabile booleana sia falso, e non consente l'azione da eseguire in altro modo. Alla fine del timer, la variabile booleana viene reimpostata su falso, consentendo l'azione da eseguire di nuovo.
Considera il seguente esempio come esempio di questo concetto:
Una volta che fai clic sul Azione pulsante, il personaggio esegue un'azione e il Azione il pulsante è disabilitato. Durante il cooldown, a intervalli regolari viene visualizzato il tempo rimanente nel cooldown. Alla fine del cooldown, il personaggio è pronto per eseguire nuovamente l'azione, quindi il Azione il pulsante è riattivato.
Diamo un'occhiata allo pseudo-codice:
// Un oggetto Character ha una variabile booleana "Cooldown", una variabile numerica "cTimer" e un'altra variabile numerica "cEndTime" sul pulsante cliccato txtHistory.text = txtHistory.text & newline & "Il personaggio esegue un'azione" Character.cTimer = 0 Character.cEndTime = txtTimer.text // L'oggetto di testo "Cooldown duration" Character.Cooldown = True Button.Enabled = False If Character.Cooldown = True Character.cTimer = Character.cTimer + dt Se Character.cTimer> = Character. cEndTime txtHistory.text = txtHistory.text & newline & "Il personaggio è pronto per eseguire un'azione" Character.cTimer = -1 Character.Cooldown = False Button.Enabled = True Else & Every 0.5 seconds txtHistory.text = txtHistory.text & newline & "L'azione è in cooldown." & Character.cEndTime - Character.cTimer e "secondi di recupero rimanenti".
Il Sul pulsante cliccato la funzione può essere eseguita solo se il pulsante è abilitato e il suo codice viene eseguito solo una volta dopo il clic. Questa è l'azione dell'utente che avvia il timer e imposta Calmati essere vero.
Quando si fa clic sul pulsante, il Variabile Character.cEndTime è il momento in cui termina il periodo di cooldown; questo valore è impostato in base al valore nel txtTimer oggetto di testo, visto accanto al Azione pulsante.
Anche a questo punto, il cTimer il valore è "ripristinato" su 0 poiché è un timer "nuovo", e Calmati è impostato per vero per consentire l'attivazione della seconda parte del codice. Infine, disabilitiamo il pulsante. (Potremmo semplicemente lasciarlo abilitato e aggiungere un'altra condizione al nostro Sul pulsante cliccato funzione che controlla se il valore di Calmati è falso prima di continuare, ma disabilitare il pulsante sembra un feedback migliore).
Nota: Nell'esempio, e questo pseudo-codice, non vi è alcun errore nell'impossibilità di inserire qualcosa di diverso da un numero in quell'oggetto di testo. Entrando in qualsiasi altra cosa sarà effettivamente impostato cEndTime essere 0-quindi, in pratica, nessun cooldown.
La riga 10 dello pseudo-codice sopra è eseguita ogni tick; controlla se il valore di Character.Cooldown è vero e, in caso affermativo, aggiunge il valore di dt al valore corrente di Character.cTimer.
dt, abbreviazione di "delta time", è una variabile di sistema che restituisce il tempo trascorso tra il rendering del fotogramma precedente e il rendering del fotogramma corrente. Ciò significa che, per quanto potente sia il computer del giocatore, e qualunque sia il framerate del gioco, possiamo assicurarci che il periodo di cooldown duri lo stesso tempo. (Se abbiamo definito il tempo di raffreddamento in termini di un numero di zecche o di fotogrammi che sono passati, la durata del periodo in secondi varierebbe su macchine diverse.) Il nome di questo dt variabile o il suo utilizzo può variare in base al tuo motore di codifica.
Se il cooldown è ancora attivo, controlliamo se il valore corrente di cTimer è più grande di O uguale a cEndTime; se è così, dobbiamo aver raggiunto la fine del periodo di cooldown. Mostriamo un po 'di feedback e impostiamo Character.Cooldown a falso in modo che questa sezione di codice non venga eseguita nuovamente fino a quando l'utente non fa clic su Azione pulsante. Riabilitiamo anche il Azione pulsante.
Se il cooldown è ancora attivo, visualizziamo invece un feedback che lo spiega. Questo specifico bit di feedback è in realtà la nostra "barra di cooldown" per questo esempio basato su testo.
Quindi questo è un cooldown di base meccanico basato su un timer di base. Per il resto di questo articolo, concentriamoci sul cooldown barre loro stessi e vediamo come implementarli.
Una barra di cooldown è in realtà solo uno sprite che cambia dimensione o visibilità nel tempo, durante un periodo di cooldown. È una meccanica di feedback per il giocatore di farle sapere quando sarà in grado di eseguire di nuovo l'azione.
Considera il seguente esempio:
Fai clic su un punto qualsiasi dello schermo per eseguire l'azione. Si noti che la barra verde diventa rossa durante il cooldown e cresce da una larghezza di 0 torna alla sua larghezza originale. Come nell'esempio testuale di base, puoi impostare la durata del raffreddamento.
In questo esempio, la barra (denominata CooldownBar) non è altro che uno sprite colorato che è allungato a una larghezza di 100 pixel. Quando viene eseguita l'azione, la sua larghezza è impostata su 0 pixel. Quindi, ogni segno di spunta che il Calmati la variabile è vero, la larghezza è impostata in base al valore corrente di cTimer.
Diamo un'occhiata allo pseudo-codice:
// Usando lo stesso oggetto "Character" come nell'esempio di base, questa volta l'oggetto è visibile sullo schermo Su qualsiasi clic del mouse & Character.Cooldown = False Character.cTimer = 0 Character.cEndTime = txtEndTimer.text Character.Cooldown = True CooldownBar.Width = 0 CooldownBar.AnimationFrame = 1 Se Character.Cooldown = True Character.cTimer = Character.cTimer + dt CooldownBar.Width = (CooldownBar.MaxWidth / Character.cEndTime) * Character.cTimer If Character.cTimer> = Character. cEndTime Character.cTimer = -1 Character.Cooldown = False CooldownBar.Width = CooldownBar.MaxWidth CooldownBar.AnimationFrame = 0
La meccanica di cooldown è molto simile a quella descritta nell'esempio precedente, quindi concentriamoci su CooldownBar si. L'oggetto ha due frame di animazione: un quadrato verde di 32 x 32 px e un quadrato di 32 x 32 px rosso. Ha anche un Larghezza massima variabile di istanza numerica impostata su 100 (pixel), la larghezza massima effettiva della barra.
Ogni segno di spunta, se Calmati è vero, CooldownBar.width è impostato su una frazione di CooldownBar.MaxWidth. Determiniamo questa frazione dividendo la larghezza massima della barra per il tempo di fine del cooldown, e quindi moltiplicando questo risultato per la corrente cTimer tempo.
All'inizio e alla fine del periodo di cooldown, ci assicuriamo anche di cambiare la cornice dell'animazione di conseguenza: al rosso, quando inizia il cooldown, e poi torna al verde una volta che il tempo di raffreddamento è terminato.
Potremmo andare un po 'oltre sull'aspetto visivo. Ecco alcuni pensieri:
Il punto di origine di CooldownBar è posto al centro, il che gli dà la sensazione di una crescita complessiva. Se preferisci, puoi impostare questo punto di origine sul bordo sinistro o destro dell'oggetto, per dargli un aspetto più "lineare".
Questo esempio è molto semplice; la barra stessa è composta solo da due fotogrammi di diverso colore per rinforzare l'aspetto di cooldown. Finché la barra è rossa, l'utente capisce che l'azione non può essere eseguita, poiché il rosso è generalmente un colore usato per indicare "stop". Ma non dimenticare i tuoi giocatori daltonici! Assicurati di utilizzare colori davvero diversi in modo che anche loro possano distinguere o utilizzare un altro metodo di feedback visivo oltre al cambio di colore.
È inoltre possibile aggiungere un contorno alla barra, un rettangolo fisso che consentirebbe all'utente di stimare meglio il tempo rimanente nel periodo di cooldown.
Ecco una rapida illustrazione dei punti precedenti:
È ancora una barra di ricarica molto semplice, e ce ne sono ancora di più da aggiungere alla grafica. La barra potrebbe consistere in un'animazione invece di solo due cornici colorate. Lo sprite sotto la barra potrebbe essere stilizzato in modo che il suo sfondo appaia trasparente, o potresti anche aggiungere un altro sprite su di esso per dare un'impressione "di vetro". Ci sono molti modi per stilizzare la barra di cooldown per adattarla al meglio al design del tuo gioco.
In alcuni giochi, il giocatore ha i bottoni abilità a sua disposizione. Questi pulsanti non mostrano solo il tempo di recupero o la disponibilità dell'abilità; sono anche un'interfaccia per l'utente per eseguire l'abilità indicata (spesso in aggiunta ad alcune scorciatoie da tastiera).
Considera questo esempio, in cui il clic su uno dei pulsanti getta l'arma appropriata e mostra anche il tempo di recupero rimanente:
Come puoi vedere, ogni pulsante abilità mostrerà una barra nera "unfilling" e un timer durante il suo periodo di cooldown. La barra nera è solo uno sprite di colore nero posto sopra il pulsante abilità con un'opacità del 45% e il timer è un oggetto di testo. Ogni istanza del pulsante abilità ha la sua istanza di questi SkillCover e txtSkillTimer oggetti.
Questa volta, il Calmati, sTime e Sendtime le variabili sono "associate" a ciascuna SkillButton esempio. Inoltre, il punto di origine per il SkillCover lo sprite nero è al suo bordo inferiore.
Considera questo pseudo-codice:
// Oggetto "SkillButton" con variabili "Cooldown" (booleano), "sTime" (numerico), "sEndTime" (numerico) e una specifica cornice di animazione per sapere quale istanza viene cliccata / selezionata. // Oggetto "SkillCover" con una variabile "Skill" impostata in base al frame di animazione dello SkillButton a cui sono correlati. // Oggetto "txtSkillTimer" con una variabile "Abilità" per lo stesso scopo di cui sopra. Su SkillButton cliccato & SkillButton.Cooldown = False SkillButton.sTime = 0 SkillButton.Cooldown = True Crea oggetti Proj e ProjImage ProjImage.AnimationFrame = SkillButton.AnimationFrame // Per lanciare un pugnale o una stella ninja txtSkillTimer.Skill = SkillButton.AnimationFrame & SkillCover.Skill = SkillButton.AnimationFrame Imposta la posizione di txtSkillTimer in fondo a SkillButton Imposta la posizione di SkillCover in fondo a SkillButton Imposta txtSkillTimer davanti a SkillButton Imposta SkillCover dietro a txtSkillTimer // Ancora davanti a SkillButton txtSkillTimer.Visible = True SkillCover.Visible = True SkillCover.Height = SkillButton.Height per ogni 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) Se SkillButton.sTime> = SkillButton.sEndTime SkillButton.sTime = -1 SkillButton.Cooldown = False txtSkillTimer.Skill = SkillButton.AnimationFrame & SkillCover.Skill = SkillButton.AnimationFrame txtSkillTimer.Visible = False SkillCover.Visible = False
Qui, selezioniamo l'istanza corretta di txtSkillTimer e SkillCover . (Questa è una tecnica di Construct 2: determiniamo le istanze corrette in base al valore di Abilità, che dovrebbe corrispondere al fotogramma dell'animazione della corrente SkillButton che è stato cliccato o selezionato nel Per ciascuno ciclo continuo.)
A differenza delle nostre barre di cooldown precedenti, SkillCover inizia "pieno", coprendo l'intera altezza del SkillButton, e poi, durante il cooldown, diminuisce lentamente, rivelando l'immagine del pulsante.
Per fare questo, noi lo diamo SkillCover un'altezza che corrisponde a quella di SkillButton per cominciare, e poi, ogni fotogramma, sottrarre (SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime da questa piena altezza. È fondamentalmente la stessa formula che abbiamo usato prima per calcolare la frazione del periodo di cooldown che è trascorso, ma al contrario.
Alcuni giochi formatteranno l'ora in modo diverso e permetteranno al giocatore di configurare il display che preferisce. Ad esempio, un minuto e quaranta secondi potrebbero essere visualizzati come 01:40 o come 100s. Per applicare questo nel tuo gioco, esegui un Se controllare, prima di visualizzare il testo di txtSkillTimer, per vedere quale formato ha selezionato il lettore e formattare il testo di conseguenza. Alcuni giochi o giocatori preferiscono addirittura non visualizzare l'ora come testo.
C'è altro che potresti fare con il SkillCover. Puoi giocare con la sua opacità per oscurare il pulsante più o meno del 45%. Poiché si tratta di uno sprite che copre un'altra immagine, puoi anche giocare con la sua modalità di fusione, ad esempio per desaturare l'immagine sottostante e rivelarne effettivamente i colori sempre di più man mano che il cooldown passa. Potresti anche prendere in considerazione l'aggiunta di effetti webGL o shader per adattarlo al resto dell'interfaccia utente o del design. Per quanto riguarda il bar di cooldown, dipende dalla tua immaginazione e dalla tua direzione artistica.
Abbiamo visto che una barra di cooldown è un feedback visivo per una meccanica semplice che impedisce l'esecuzione di un'azione per un certo periodo di tempo.
Puoi usare sprite semplici e allungare la loro larghezza o altezza nel tempo per segnalare all'utente che sta procedendo un cooldown. È possibile visualizzare il tempo residuo in testo normale, formattandolo in minuti o in secondi. Puoi persino applicare qualsiasi tipo di animazione, modalità di fusione o effetto shader che si adatti alla direzione artistica del tuo gioco.
Se ci pensi per un secondo, puoi anche usare questo metodo per controllare la velocità di fuoco di un'arma: finché la pistola è in raffreddamento, non spara a un altro proiettile, anche se il Fuoco la chiave è giù; nel momento in cui il raffreddamento è completo, può essere sparato un altro proiettile. In questo caso non è richiesta alcuna barra di raffreddamento.
È possibile scaricare tutti gli esempi e aprirli nella versione gratuita Construct 2 R168 o successiva.
Spero che tu abbia trovato questo articolo interessante, e non vedo l'ora di vedere i tuoi disegni di barre di cooldown.
Accentsconagua