Grafica – Creare una HUD, il testo

Dopo la breve introduzione dell’articolo precedente è doveroso iniziare con la pratica su come si crea una HUD e sul primo elemento, forse quello più importante, che è il testo. La sequenza per la creazione della HUD è semplice e sempre uguale, si tratta di creare una Scena separata ed aggiungere alla Camera del gioco la Scena creata in overlay. Detto così magari è troppo semplice, ma in sostanza è questo.

Creare una HUD

Inserisci una nuova Scena, dal pulsante + in alto tra la scelta del motore da utilizzare e il layout, come in figura

scegliendo New avrai una Scena nuova completamente vuota. Rinominala HUD, per rinominarla basta cliccare sul nome, rinomina anche la scena principale, come vuoi, di solito si associa il nome di quello che la Scena è nel gioco, per esempio se è l’intro del gioco si chimerà intro, se è il menù, menù, e così via; io l’ho chiamata main. Per spostarti da una Scena all’altra puoi usare il menù a tendina che trovi a sinistra del nome, dove hai creato la Scena, oppure cliccare sul nome della Scena che vuoi visualizzare nell’Outliner.

Come ben sai per renderizzare una Scena, anche il Game Engine renderizza, c’è bisogno di una Camera e almeno una luce, senza Camera il render non parte (Blender ti avverte che non c’è la Camera) e senza luce la Scena sarà nera. Quindi, vai alla vista dall’alto (Tn7) e aggiungi una Camera (Shift + A -> Camera), adesso vai alla vista frontale o laterale, non importa devo spostare la Camera verso l’alto sull’asse Z, diciamo di 20 unità, quindi premi G e poi Z e digita 20 sul tastierino numerico o sui numeri in alto alle lettere (se per caso sei su un portatile). Inserisci una Lampada Hemi e spostala sempre sull’asse Z di 10 unità. Per fare una prova al volo inserisci un cubo, dagli un materiale, di qualsiasi colore è solo una prova e poi spostati alla Scena principale (main nel mio caso). Cancella il cubo nella scena main, per non confonderti; seleziona la Camera e spostati sulla sua vista (Tn0), passiamo alla logica. Inserisci un Sensor Always e attiva il TRUE level triggering i tre puntini in alto (il primo pulsante sulla sinistra), un Controller And e un’Actuator Scene, nell’Actuator cambia il Mode in Add Overlay Scene e scegli dal campo che appare la Scena HUD, ricorda di collegare i Mattoni fra di loro se no la logica non funziona, se fai partire il motore di gioco puoi vedere la Scena HUD. Questo è il sistema per creare una Scena che sia sempre in primo piano mentre il gioco va in esecuzione, infatti se aggiungi un oggetto nella scena main puoi notare che il cubo della HUD verrà visualizzato sopra, questo esempio è per farti capire come agisce una scena in Overlay. Una volta assimilato questo semplice passaggio puoi creare una HUD senza problemi, ma quello che la Scena mostra lo decidi tu a seconda del tipo di gioco che stai sviluppando e di quello che vuoi mostrare a video al giocatore.

Il Testo

Uno degli elementi più importanti di una HUD è il testo con il quale si può mostrare a video una quantità enorme di informazioni, come il punteggio, dei messaggi, un timer, il numero del livello ecc ecc. Ci sono due tipologie di testo : quello statico e quello dinamico. Il testo statico serve come base per molte cose, un’esempio è la parola punteggio messa da una parte e il punteggio stesso (testo dinamico) posto accanto; un testo statico può anche mostrare dei messaggi, per esempio l’obbiettivo di gioco, o delle informazioni relative a quello che devi fare, come ho detto molte volte questo dipende sempre dal tipo di gioco e non c’è una regola fissa.

Il testo dinamico invece mostra a video le variabili di gioco (o nel caso di Blender le Properties), e può rappresentare qualsiasi dato che cambia durante l’esecuzione del gioco, quindi punteggi, energia (anche se è più gradevole usare una barra per l’energia), un timer, ecc ecc. Per fare un esempio veloce ti guiderò nel creare un finto punteggio.

Spostati nella Scena HUD e cancella il cubo, inserisci un oggetto Text dalla vista Camera (Tn0), tale oggetto ha varie opzioni che puoi vedere nella finestra delle Proprietà sull’icona con la lettera F, fondamentalmente queste opzioni sono un pò come in un software di video scrittura, dagli una rapida occhiata e magari in seguito fai varie prove per vedere come poter usufruire di tali opzioni, personalmente ne ho usate alcune e penso che quella più utile sia sulla tab Font che permette di cambiare il tipo di carattere, comunque smanettando capirai a cosa servono. Torniamo al nostro esempio, questo che hai inserito lo userai come testo statico, premi il tasto Tab (quello a sinistra della Q) ed entri in Edit Mode così puoi cambiare la dicitura del testo, io ho scritto Score :, i due punti sono superflui è un modo per dare uno stacco ai due tipi di testo. Posizionalo in alto a sinistra non troppo appiccicato all’angolo della Camera, lascia un pò di spazio sopra e a sinistra, come mostro nell’immagine seguente

Inserisci un’altro oggetto Text e spostalo accanto a quello precedentemente creato. Una piccola nota (dolente) purtroppo il testo di base nel GE non viene visualizzato ottimizzato e bisogna farlo tramite script, infatti se fai partire il motore di gioco puoi notare che i testi non sono perfetti, ma non è il tema di questo tutorial il miglioramento del testo, ne farò uno più avanti, ma torniamo al tutorial. Ecco come si presentano i testi nel mio file

Adesso visto che voglio che il mio secondo testo sia dinamico e rappresenti il punteggio devo dargli una Property, si proprio come un oggetto qualsiasi, ma voglio anche che non mostri nulla all’inizio del gioco, quindi entra in Edit Mode (tasto Tab) e cancella la parola Text. Vai sulla finestra dei Mattoni e apri (sempre se non è aperta) la tab delle Properties, come puoi notare c’è un campo in più che è Add Text Game Property che permette di aggiungere una Property, dei vari tipi come di consueto, ma che è direttamente collegata all’oggetto testo rendendolo dinamico. Quindi clicca il pulsante e cambia la Property da String a Integer, perché voglio che sia una successione di numeri interi e non una Stringa, che è una variabile (o Property) per aggiungere testo, puoi anche lasciare di tipo String non cambia molto perché diamo dei numeri che possono essere ben rappresentati come del testo o parole che dir si voglia, ma in questo caso è meglio usare una Property appropriata. Rinomina l’oggetto testo dinamico come vuoi, io l’ho chiamato punteggio. Spostati sulla scena main, puoi inserire la logica per incrementare il punteggio su un qualsiasi oggetto della scena, anche sulla camera, in questo esempio è irrilevante, la parte importante è che tu capisca come fare cambiare il testo dinamico in modo da mostrare a video il punteggio (in questo caso). Per comodità userò Suzanne (la testa di scimmia), tu puoi usare l’oggetto che vuoi. Siccome è un’esempio e non abbiamo una logica complessa che ci permette di raccogliere degli oggetti per incrementare il punteggio (per dirne una) userò un tasto, quindi inserisci un Sensor Keyboard e assegnagli il tasto che vuoi, io uso la barra spaziatrice, collegalo ad un Controller And e collega il Controller ad un’Actuator Message, si in questo esempio mandiamo semplicemente un messaggio al testo e quando il testo riceve il messaggio incrementa la Property, niente di speciale ma efficace. Si può anche creare una logica incrociata, cioè selezionando i due oggetti (Suzanne e il testo) si può passare l’impulso del Sensor Keyboard (in questo caso) direttamente all’Actuator che incrementa la Property, ma personalmente ho sempre preferito usare i messaggi che la logica incrociata, perché se si hanno tanti mattoni la cosa può portare confusione e poi non si capisce più a chi il Sensor invia l’impulso o da dove ne arriva uno che innesca un’Actuator. Puoi anche provare se vuoi, ma per ora mandiamo il messaggio. Nel campo To dell’Actuator Message inserisci l’oggetto testo dinamico, ecco un caso pratico del rinominare gli oggetti io l’ho chiamato punteggio quindi scelgo l’oggetto punteggio. Nel campo Subject bisogna inserire il soggetto del messaggio che verrà richiamato dal Sensor posto nell’oggetto punteggio (il testo dinamico), bisogna trovare una parola unica che abbia un senso logico e che abbia un senso per noi, per te o per chi crea il gioco, e magari sia di facile comprensione per chi magari lavora in team e scambia i file, quindi quando si sceglie una parola per un messaggio, o anche il nome di un oggetto una Property, bisogna farlo con molta logica. Nella mia esperienza ho notato che ponendo anche un paio di parole si può raggiungere il risultato voluto, in questo caso trovo utile scrivere incrementa_score o anche soltanto incr_score, una volta trovata la tua formula cerca di usarla sempre, in questo modo potrai anche a distanza di tempo modificare i tuoi file. Eccoti uno screenshot della logica

Naturalmente fra i due Mattoni c’è il Controller And. Passa alla Scena HUD, seleziona l’oggetto testo dinamico, il punteggio, e aggiungi un Sensor Message, un Controller And e un’Actuator Property. Sul Sensor scrivi il subject dell’Actuator Message dell’oggetto nella Scena main, nel mio caso incr_score, nell’Actuator cambia il Mode da Assign ad Add, seleziona la Property Text e nel campo Value inserisci il numero 1, o il punteggio che vuoi, è sempre relativo al gioco che stai facendo. Collega tutti i mattoni e torna alla Scena main. Fai partire il motore di gioco e premi il tasto che hai scelto per incrementare la Property. Come vedi ogni volta che viene premuto il tasto il punteggio sale di 1 o del numero che hai inserito tu.

Se hai capito il meccanismo per creare un HUD e questa prima base sui testi puoi fare delle prove e sperimentare magari creando un piccolo giochino in modo da memorizzare questi concetti base definitivamente e farli tuoi. In realtà ci sarebbe molto da scrivere sui testi dinamici e spero di poterlo fare in altri tutorial, ma per ora è tutto, nel prossimo articolo vedrai come creare una HUD graficamente accattivante.

Metto a disposizione il FILE creato da me in questo tutorial in modo che tu lo possa visionare.