L'interfaccia di un gioco ha un compito difficile: dare al giocatore tutte le informazioni che gli servono senza distrarlo da ciò che succede sullo schermo. Una barra della salute illeggibile, un menu che non si naviga con il gamepad o un HUD che esce dai bordi su uno schermo ultra-largo sono problemi frequenti, e quasi sempre evitabili con un po' di pianificazione.
HUD: solo ciò che serve, quando serve
L'HUD (heads-up display) è l'insieme degli elementi sovrapposti al gioco: salute, munizioni, minimappa, punteggio, obiettivo attuale. Il primo passo è chiedersi, per ogni elemento, quanto spesso il giocatore ne ha bisogno.
| Frequenza d'uso | Esempi | Trattamento |
|---|---|---|
| Continua | Salute in un gioco d'azione, mirino | Sempre visibile, in posizione stabile |
| Occasionale | Munizioni di riserva, valuta | Visibile quando cambia o su richiesta |
| Rara | Statistiche dettagliate, mappa completa | In un menu o in una schermata dedicata |
Molti giochi nascondono elementi quando non servono: la barra della salute compare quando si subisce un danno e svanisce dopo qualche secondo a salute piena. Meno elementi permanenti significa uno schermo più pulito e una maggiore attenzione su quelli rimasti.
Informazioni nel mondo di gioco
Un'alternativa all'HUD tradizionale è portare le informazioni dentro la scena: barre della salute sopra i nemici, numeri del danno che fluttuano dal punto colpito, indicatori a terra per le aree pericolose. Questi elementi devono comunque restare leggibili, con dimensioni minime garantite anche quando l'oggetto è lontano.
Ancoraggi e risoluzioni
Un gioco deve funzionare su schermi con proporzioni diverse: 16:9, 16:10, 21:9, i 4:3 di alcuni tablet, i formati allungati dei telefoni. Posizionare gli elementi con coordinate assolute in pixel non funziona: su uno schermo più largo resterebbero ammassati a sinistra.
La soluzione sono gli ancoraggi. Ogni elemento viene agganciato a un punto dello schermo, come l'angolo in alto a sinistra, il centro in basso o il bordo destro, e posizionato con un margine rispetto a quel punto. La salute ancorata in alto a sinistra resta in alto a sinistra su qualunque schermo.
Scalatura
Per le dimensioni si usa di solito una risoluzione di riferimento, per esempio 1920 × 1080, e un fattore di scala calcolato dall'altezza reale dello schermo. Basare la scala sull'altezza evita che sugli schermi ultra-larghi l'interfaccia diventi enorme.
Con la pixel art conviene limitare la scala a fattori interi, 2×, 3×, 4×, per evitare pixel di dimensioni irregolari. Lo spazio in eccesso si lascia ai margini o si riempie con lo sfondo.
Aree sicure
Sui televisori una parte del bordo dell'immagine può essere tagliata, e sui telefoni ci sono fori della fotocamera e angoli arrotondati. Gli elementi importanti vanno tenuti all'interno di un'area sicura, ricavata dalle informazioni fornite dal sistema o configurabile nelle opzioni del gioco.
Menu e navigazione
Un menu pensato solo per il mouse diventa un ostacolo per chi gioca con il gamepad o la tastiera. Alcune regole essenziali:
- un elemento sempre selezionato, evidenziato in modo chiaro, non solo con un cambio di colore leggero;
- navigazione prevedibile: premendo giù si va all'elemento sottostante, e i bordi si comportano in modo coerente, per esempio tornando all'inizio della lista;
- tasto indietro coerente in tutte le schermate;
- conferma per le azioni distruttive, come cancellare un salvataggio o uscire senza salvare;
- memoria della posizione: tornando a un menu, la selezione resta dove era stata lasciata.
I motori offrono sistemi per definire i vicini di ogni elemento automaticamente o a mano. Conviene verificare ogni schermata usando solo il gamepad, poi solo la tastiera.
Leggibilità
Il testo e i simboli devono essere leggibili in condizioni reali: su un televisore visto dal divano, su un telefono all'aperto, su uno schermo piccolo di un portatile.
- dimensione del testo adeguata alla distanza di visione, con un'opzione per aumentarla;
- contrasto sufficiente rispetto allo sfondo, aiutato da contorni o pannelli semitrasparenti quando lo sfondo cambia;
- non affidarsi solo al colore: un oggetto raro può avere un bordo di colore diverso, ma anche un'icona o un nome che lo distingua, a beneficio di chi ha difficoltà nel distinguere i colori;
- icone coerenti con il dispositivo: se si usa il gamepad, i suggerimenti mostrano i pulsanti del gamepad, non i tasti della tastiera.
Separare logica e interfaccia
Dal punto di vista del codice, l'interfaccia non dovrebbe contenere logica di gioco. La barra della salute mostra il valore della salute, non lo calcola. Un approccio pulito prevede che il gioco esponga i dati, come salute, munizioni e obiettivi, ed emetta eventi quando cambiano; l'interfaccia ascolta e aggiorna la visualizzazione. In questo modo si può ridisegnare completamente l'HUD senza toccare la logica, e la logica si può testare senza interfaccia.
Anche le animazioni dell'interfaccia contano: una barra che scende gradualmente, con una porzione che indica il danno appena subito, comunica molto meglio di un numero che cambia di colpo.
In sintesi
- L'HUD mostra in modo permanente solo le informazioni usate di continuo.
- Ancoraggi, scala basata sull'altezza e aree sicure adattano l'interfaccia a ogni schermo.
- I menu devono funzionare con gamepad e tastiera, con selezione chiara e navigazione prevedibile.
- Dimensione del testo, contrasto e simboli non solo cromatici garantiscono la leggibilità.
- L'interfaccia mostra i dati del gioco senza contenerne la logica.
