The Smoke & Mirrors of Good Countdowns, Parte 1

Cosa starai creando

I countdown sono elementi semplici che appaiono in molti giochi, tuttavia il loro design può essere facilmente trascurato.

Con alcune semplici aggiunte, però, un timer normale può essere reso molto più coinvolgente e adatto all'universo del gioco presentato, e quindi migliorare notevolmente l'esperienza del giocatore.

Molti di questi elementi sono ispirati dal discorso "Juice it o lose it" di Martin Jonasson e Petri Purho su come rendere il gioco più "succoso". La linea di fondo è che non è sufficiente presentare semplicemente le informazioni nella sua forma più base; è inoltre necessario migliorare e accentuare ciò che sta accadendo con colori, suoni e movimento, che renderanno l'intera esperienza molto più coinvolgente. Consiglio vivamente di guardare quel discorso anche per conoscere altre applicazioni.

In questa serie in due parti, passeremo attraverso questi elementi e quindi li implementeremo in un semplice progetto Unity, per il quale avrete bisogno della versione più recente. Nella prossima parte 2, vedremo elementi più dettagliati e sfumati.

Pronto? Andiamo!

Lo scopo del conto alla rovescia

I timer nei giochi possono servire a scopi diversi, che non necessariamente si sovrappongono alle applicazioni. Questi sono:

1. Hai tempo X per svolgere un compito.
2. Hai bisogno di sopravvivere per X quantità di tempo.

Il design di un timer può cambiare tra questi due, in quanto le informazioni necessarie per il giocatore cambia nella sua applicazione.

Quando ti danno cinque minuti per disinnescare una bomba Metal Gear Solid 2, devi conoscere il esatto la quantità di tempo che hai, poiché ogni secondo diventa vitale per il progresso e la pianificazione generale. Il timer deve comunicare al giocatore quanto ne rimane e avvisarlo se tale importo sta diventando critico.

Quando devi resistere per un certo periodo di tempo, quell'elemento di esattezza diventa meno importante. Anche se sarebbe bello sapere esattamente l'intervallo di tempo in secondi necessario per sopravvivere, il gioco può funzionare anche senza tali informazioni. Potrebbe anche essere migliorato, come un'informazione come "è necessario resistere per qualche secondo in più!" è più facilmente comprensibile in una situazione stressante rispetto a "leggi la lettura di questo numero nell'angolo dello schermo" e può migliorare l'immersione all'interno del gameworld.

Come migliorare i conti alla rovescia

Ora diamo un'occhiata agli elementi che renderanno più interessanti e coinvolgenti conto alla rovescia e timer.

1: Crea il tuo timer che non fa affidamento sui numeri e incorpora il timer nel mondo

Invece di mettere un numero da qualche parte, puoi creare il tuo grafico di conto alla rovescia che indicherà all'utente quanto tempo è rimasto.

Un'implementazione grafica 2D richiederà un po 'di delicatezza, in quanto è necessario assicurarsi che il lettore possa correttamente intuire e leggere l'idea che "il tempo sta per scadere e sono rimasti all'incirca X secondi".

Conto alla rovescia non numerico da Star Trek Generations. L'ora esatta non è facilmente leggibile, ma il grafico consente a un osservatore di dedurre facilmente che sta accadendo un conto alla rovescia e che il tempo sta per scadere

Funziona molto bene se usi indicatori ambientali per mostrare i progressi, e le voci di gioco ti dicono quanto rimane. Un numero incollato sulla parte superiore dello schermo può sembrare non-diegetico e potrebbe benissimo prendere alcuni giocatori fuori dal gioco.

Nel Half Life 2, per esempio, è necessario difendere una posizione fino a quando un teletrasporto non si è caricato. All'inizio viene visualizzata una carica completa, che deve essere nuovamente ricaricata.

Carica completa per un teletrasporto in Half Life 2. L'elemento è molto visibile all'interno della stanza altrimenti scarsamente decorata.

La ricarica viene mostrata dagli elementi della macchina che si accendono e iniziano a girare, offrendoti un orologio rudimentale che trasmette quanto più a lungo devi resistere.

Dopo essere stato utilizzato, il teletrasporto deve essere ricaricato. Gli elementi si illuminano di nuovo lentamente, dando al giocatore un'indicazione per quanto tempo ancora devono resistere (da Half-Life 2)

Il costo del teletrasporto è anche un buon esempio di inserito display, che è direttamente nel mondo del gioco. Questi sono utili in quanto mantengono il giocatore focalizzato sul mondo stesso, mentre un timer su un livello GUI sarebbe in cima al mondo del gioco.

Un timer di ossigeno in Metro: Last Light, direttamente all'interno del gameworld

2: Fai i numeri come numeri

Ottieni un font divertente per i tuoi countdown! Alcuni tipi di carattere come questo Digital Display Font emulano i vecchi display lightup, che venivano utilizzati principalmente per i numeri nei vecchi display "digitali".

Il giocatore assocerà questi font a timer e countdown e renderà la lettura molto più semplice, come se fosse in qualcosa come Arial o Times New Roman.

Si applicano anche la leggibilità di base e la composizione del testo. Non impilare i numeri verticalmente, non utilizzare numeri romani, ecc.

3: Dai al giocatore l'importo in secondi, non in minuti

La serie Metal Gear Solid fa questo meraviglioso trucco dove si dice "hai solo 500 secondi rimasti!" e quindi visualizza un numero che si legge come "5:00".

Quando l'ho suonato per la prima volta, la mia mente ha completato il completamento automatico per leggere come "5 minuti", ma è stato ingannato. "500 secondi" è un formato non comune ma corretto per il tempo, e le persone in generale non sono addestrate a riprenderlo correttamente.

L'effetto è che i giocatori penseranno che hanno solo 5 minuti, mentre in realtà sono 8 minuti e 20 secondi.

Mini missioni opzionali in Metal Gear Solid V: The Phantom Pain. Il tempo è espresso in secondi, oscurando la quantità in minuti

Questo di solito non ha inconvenienti, in quanto saranno stimolati dal limite di tempo ristretto e concentrarsi sulla realizzazione del compito (in Metal Gear Solid 2: disinnescare le bombe), che li distrae dal fatto che potrebbero essere passati cinque minuti, e c'è ancora tempo.

4: Crea un "minuto" lungo 100 secondi

Questo va di pari passo con il dire al giocatore la quantità di tempo rimasto in secondi.

Un elemento ricorrente nel MGS2 il conto alla rovescia è che non hanno un fatturato di 60 secondi, ma "giri d'affari" di 100 secondi. Questo non è in realtà un minuto che passa a quello successivo, ma i secondi vengono elencati. Quindi invece di 01:00 che diventa 00:59, è 0100 che diventa 0099. Devi solo ottenere il valore stesso, il che rende un conto alla rovescia effettivamente più facile da creare, dato che puoi saltare il calcolo dei minuti.

Un conto alla rovescia usato in Metal Gear Solid 2: Sons of Liberty. Nota i numeri visualizzati di nuovo in secondi totali, ma in un modo che assomiglia a contatori minuti e secondi. Mentre viene mostrato anche il secondo simbolo ("), il giovane gruppo demografico non ha familiarità con esso.

5: Utilizzo di millisecondi e frazioni per aggiungere tensione

Avere millisecondi visualizzati dopo il numero principale lo rende molto più interessante!

Questo è piuttosto facile, dato che il tempo può essere già memorizzato in un float. Da due a tre numeri in virgola mobile sono una buona quantità che è ancora leggibile e potenzialmente utile per il giocatore.

6: Usa il colore a tuo vantaggio!

Quando il timer raggiunge una certa quantità bassa, coloralo in modo diverso. Renderlo giallo funziona bene, in quanto fa risaltare maggiormente il timer.

Quando raggiunge i suoi ultimi secondi, fallo diventare rosso, più grande e lampeggiare. Ora la bassa quantità non può essere ignorata e crea tensione nel lettore.

Conto alla rovescia rosso da Metal Gear Solid V: The Phantom Pain

Costruiamo un semplice timer con queste cose!

Ora cominciamo a migliorare il timer tramite codice. Gireremo questo:

Un display del timer di base

In questo:

Il nostro display del timer migliorato

Utilizzeremo alcune risorse speciali che puoi rapidamente ottenere o creare da te, oppure ottenere dai file sorgente che puoi scaricare in alto a destra di questo articolo.

Pronto? Andiamo!

Setup e timer di base

Avvia Unity e crea un nuovo progetto.

Quindi crea un oggetto di gioco vuoto, posizionalo davanti alla telecamera e aggiungi una textMesh tramite Componente> Mesh> TextMesh ad esso. Questo sarà il display per il timer nel gameworld.

Per ora utilizzeremo 3d-textmesh, ma funzionerà anche su altre aree, come l'interfaccia di base di Unity. Per ora, il testo in 3D ha anche il vantaggio che può essere dentro il mondo dei gameti, come detto prima, e non in cima del mondo all'interno di un livello di interfaccia grafica.

Il nostro nuovo testo 3D non verrà visualizzato immediatamente; dobbiamo modificare alcuni valori.

Imposta la dimensione del carattere su 0.1, l'ancora a mezzo a sinistra, l'allineamento a centro, e la dimensione del carattere a 80. Aggiungi anche del testo segnaposto nel campo "testo". Questo è solo così abbiamo qualcosa da guardare nell'editor; durante il gameplay effettivo, questo sarà adattato direttamente tramite codice. 00:00 farà bene.

Quindi creare un nuovo file chiamato Countdown.cs, aggiungilo al nostro oggetto timer e aggiungilo a questo codice:

usando UnityEngine; usando System.Collections; conto alla rovescia classe pubblica: MonoBehaviour float timer = 120f; void Update () timer - = Time.deltaTime; GetComponent() .text = timer.ToString (); 

Abbiamo una variabile chiamata timer, che manterrà il conto alla rovescia. In questo momento è a 120 secondi o 2 minuti. Quindi nel Aggiornare funzione, che viene chiamata ogni frame, deduciamo Time.deltaTime. Questa è una scorciatoia per ottenere il tempo effettivamente trascorso lì. In seguito, otteniamo il textMesh componente dall'oggetto e adattarlo testo valore per essere il timer, trasformato in una stringa.

Quando esegui ora il gioco, textmesh mostrerà il numero decrescente. Congratulazioni! Hai costruito un timer rudimentale.

Ma è ancora lontano dall'essere coinvolgente. Inoltre, mostra da 4 a 5 numeri dopo il punto decimale, e continuerà a scendere in valori negativi dopo aver raggiunto lo zero.

Fermati a zero

Un timer negativo sembrerà rotto, quindi assicuriamoci che ciò non accada. Adattare il Aggiornare funzione per assomigliare a questo:

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

Questo diminuirà il timer solo se è effettivamente positivo. Se dovesse comunque diventare negativo (cosa che potrebbe accadere quando sottrae il tempo trascorso), verrà impostato a zero.

Ottieni numeri più belli

Ricordi quel carattere digitale del display digitale che ho menzionato sopra? Vai a prenderlo e aggiungilo al tuo progetto!

La sezione textmesh nell'ispettore ha un campo per il carattere, quindi trascina il font dalle tue risorse lì.

E ora il nostro timer sarà molto più ordinato!

Correggere la quantità di numeri

Al momento la quantità di numeri dopo il punto decimale varia, il che rende il timer fluttuante selvaggiamente. Risolvilo adattando la linea che applica il valore al testo per assomigliare a questo:

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

Questo taglierà automaticamente tutto dopo due numeri, mostrandoti costantemente decine e centesimi di secondo.

Fai il cambio di colore

Aggiungiamo un po 'di colorazione adattiva! Adattare il Aggiornare funzione per assomigliare a questo:

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

E il timer diventerà giallo se restano meno di 20 secondi e rosso quando resteranno meno di 10 secondi.

L'intero file Countdown.cs dovrebbe assomigliare a questo:

usando UnityEngine; usando System.Collections; conto alla rovescia classe pubblica: MonoBehaviour float timer = 60f; pubblico AudioClip soundBlip; void Update () if (timer> 0f) timer - = Time.deltaTime;  else timer = 0f;  if (timer < 10f)  GetComponent() .color = Color.red;  else if (timer < 20f)  GetComponent() .color = Color.yellow;  GetComponent() .text = timer.ToString ("F2");  

E questo è tutto! Ora abbiamo un conto alla rovescia molto più coinvolgente e interessante.

Puoi anche guardare il progetto completo nei file sorgente in alto a destra di questo articolo.

Conclusione

Abbiamo dato un'occhiata a diversi elementi che miglioreranno i timer nei giochi, le cui lezioni possono essere applicate anche a molti altri elementi. Inoltre, il timer che abbiamo costruito può essere facilmente adattato e inserito in qualsiasi tipo di gioco, e sarà un elemento interessante senza che tu debba sviluppare nuovamente il suo contenuto.

Ma c'è di più! Nella prossima parte di questa serie, esamineremo ancora più elementi e continueremo a migliorare il nostro timer.