Grafica – I pulsanti

L’interfaccia di gioco, o UI (user interface, interfaccia utente) è creata da varie parti spesso pulsanti dove il giocatore può cliccare (interagire), e spesso sono associati più che altro ai vari menù che si trovano nel gioco, da quello iniziale ai vari menù che appaiono quando si eseguono determinate azioni. Come sempre a decidere quali azioni e cosa mostrare sei sempre tu. Oramai nei giochi, sia tripla A che indie, ci sono tante caratteristiche aggiuntive, per fare un esempio oramai classico è quello degli upgrade del personaggio, potenza, resistenza, energia ecc ecc. Il pulsante è l’oggetto più semplice che si possa creare, ma è anche uno strumento potente, versatile e diretto; diretto nel senso che sia un semplice PLAY o QUIT, o che abbia una icona che rappresenta quello che fa, il pulsante è la forma più diretta per comunicare al giocatore cosa può fare. Creare una UI (spesso si trova GUI, dove la G sta per game) per il proprio gioco è, di norma, attinente alla grafica, per esempio se fai un horror l’UI la immagini sanguinolenta (è solo un esempio) e non tipo cartoon game. La grafica è sempre uno degli aspetti top, ma come sempre essendo le tipologie infinite mi limiterò a darti i concetti base su come crearla in Blender. 

Spero tu abbia letto l’articolo precedente perché è da li che partirò continuando il file del giochino che sto creando per questa serie di tutorial, puoi anche scaricare il file QUA, ma sarebbe utile che tu abbia seguito la serie.

Tipologie 

Prima di iniziare con la pratica mi soffermo su un aspetto base della creazione della UI, i pulsanti possono essere di due tipi, il primo è quello diretto : il pulsante è unico e usando delle animazioni cambia il suo aspetto. Il secondo è, io lo chiamo, di tipo HTML cioè con cambio di mesh. Quale usare dipende sempre da te, in questo articolo tratterò il tipo diretto, che è anche il più semplice e malleabile, nelle varie parti del gioco. In entrambi i casi si può usare una texture per la parte grafica, inserendo in essa tutte le voci dei vari pulsanti sparsi per il gioco, in modo da avere una sola texture per tutte le UI.

Tipo diretto

Questa tipologia è usata spesso quando si ha un pulsante con una scritta, come quelli del menù iniziale, ma nulla ti vieta di usare una texture, come detto prima. Puoi usare qualsiasi oggetto, anche una mesh modellata da te, ma di solito si usa un Piano per evitare di caricare il motore di gioco. Quindi crea una nuova scena e chiamala index o menu (senza l’accento), aggiungi una camera e posizionala come hai fatto nei tutorial precedenti quelli dove hai creato una HUD, l’unica differenza è che userò una camera Orthographic con uno Scale di 18.000 (il parametro subito sotto il tipo di camera nelle opzioni), fondamentalmente il menù iniziale è come una HUD, anche se non va in overlay. Piccola nota : avvolte si trovano scene del gioco, anche in movimento, nella parte iniziale e il menù è una scena overlay, questo dipende sempre da come vuoi che il tuo gioco appaia agli occhi del giocatore

Inserisci adesso un Piano (Shift+A -Mesh – Plane), rinominalo come meglio credi, io uso il prefisso puls_nome in modo da capire la tipologia dell’oggetto, in questo caso puls_play, scalalo, in Edit Mode, a tuo piacimento, non è importante ai fini del tutorial, ricorda che è un pulsante, dagli un materiale base che andremo ad animare in seguito, dai lo stesso nome al materiale. Posizionalo dove meglio credi, questo sarà il menù principale, le posizioni standard sono tre (come in un file di testo o HTML) a sinistra, al centro o a destra; poi dipende molto da come vuoi mostrare i pulsanti al giocatore, li puoi mettere in linea in alto o in basso allo schermo, questo se vuoi (per esempio) mostrare una scena del gioco statica o dinamica (questo aspetto è un pò avanzato e non so se lo tratterò). Puoi usare un piano texturizzato con un render di una scena del gioco o una grafica fatta con un programma esterno (Gimp, Photoshop, ecc ecc), questo per non lasciare il fondo vuoto. Adesso inserisci un’oggetto Text (testo), senza modificarlo spostalo sopra il pulsante, un’attimino più in alto nell’asse Z e dagli un materiale base (puoi anche non rinominarlo), il testo è importante in questo caso per dire al giocatore cosa il pulsante fa. Per semplicità animerò solo il materiale del pulsante in modo da creare i tre aspetti base di un pulsante (base, mouse_over, click); seleziona il pulsante e cambia finestra Logic Editor con la Time Line. Nelle opzioni del materiale clicca su Shadless, come negli articoli precedenti in modo da non dover inserire una lampada, e col puntatore del mouse sullo spazio del Diffuse premi il tasto i. Hai inserito un keyframe sul materiale al frame 1, questo è lo stato base (o mouse_off), sposta il cursore al frame 2, cambia colore (non importa quale ai fini del tutorial) e inserisci un’altro keyframe, per ultimo fai la stessa operazione al frame 3. Prima di duplicare il pulsante per creare il menù completo, aggiungiamo una logica di base. Cambia la Time Line con la Logic Editor. Una cosa fondamentale è mostrare il puntatore del mouse a runtime, cosa che di default Blender tiene nascosta. Quindi seleziona la Camera, siamo sempre sulla nuova scena (index o menu), inserisci un Sensor Always e collegalo tramite un Controller And ad un Actuator Mouse, lasciando il tutto così com’è, l’opzione del Actuator è come una Property boolean True e False. Salva e fai partire il motore e vedrai il mouse, se non dovesse essere così controlla la riga di Mattoni. Seleziona nuovamente il pulsante e inserisci due Sensors Mouse, per entrambi dal menù a tendina Mouse Event seleziona Mouse Over, nel primo clicca sul pulsante Invert, rinomina il primo off e il secondo over, collegali tramite due Controller And a due Actuators Action, rinomina il primo frame_1 e il secondo frame _2, seleziona in entrambi l’azione puls_playAction (l’azione prende il nome dell’oggetto, quindi se hai rinominato il pulsante in modo diverso sarà tuonomeAction). Nel primo Actuator cambia i numeri di Star e di End entrambi a 1, mentre nel secondo Actuator a 2. Questo creerà un effetto roll over, cioè quando il mouse passa sopra il pulsante viene attivato il frame 2 e il pulsante cambia colore, mentre se il mouse non è sopra il pulsante, quindi già dall’inizio, è attivato il frame 1, salva e prova, se quando passi col mouse il pulsante cambia colore hai fatto tutto bene in caso rivedi questo passaggio. L’ultima parte è per il click del mouse, inserisci due Sensors Mouse rinomina il primo click e lascialo di default, il secondo rinominalo rilascio (o release) e clicca sul pulsante Invert. Collega il primo (click) tramite un And ad un Actuator  Action, seleziona l’azione del pulsante e inserisci per Start ed End 3, per far si che solo quando il puntatore del mouse è sopra il pulsante si può cliccare collega il Sensor Mouse over al Controller And del Sensor Mouse click. Collega il secondo Sensor Mouse (rilascio) all’And del Sensor Mouse over, questo per evitare di aggiungere un’altro mattone. Salva e prova. ti posto uno screen di tutta questa logica, clicca sull’immagine per ingrandirla, per una maggiore chiarezza posterò il file finale.

Adesso puoi duplicare il pulsante e il testo, se vuoi puoi imparentare il testo al pulsante è opzionale, cambia il testo per ogni pulsante a seconda del tipo di azione che vuoi che il pulsante esegua. Io ho fatto un menù iper minimal con due pulsanti uno per il play e uno per il quit. Con questo sistema puoi creare tutti i pulsanti che vuoi e inserirli nella varie scene, per una questione di tempo eviterò di creare tutti i pulsanti necessari ma li troverai nel file finale. Adesso non resta che aggiungere al click l’azione voluta. Seleziona il pulsante play, aggiungi un Actuator Scene e dal menù Mode seleziona Set Scene, nello spazio sottostante scegli la scena game. Salva e prova. Come avrai notato una volta che parte il gioco, il mouse resta visibile e crea dei problemi, questo perché nella scena principale non c’è nessuna indicazione che dice a Blender che il mouse non deve essere visibile. Quindi seleziona la Camera della scena game e inserisci la linea di Mattoni utile a non visualizzare il mouse, c’è già un Sensor Always quindi aggiungi solo un Actuator Mouse e collegalo al Controller And del Sensor Always, sposta il Mattone in alto per mantenere la logica pulita. Adesso torna alla scena del menù e seleziona il pulsante quit e aggiungi un Actuator Game, seleziona dal menù a tendina Game l’opzione Quit Game. Salva e prova, se hai fatto tutto bene i pulsanti dovrebbero funzionare come descritto, quit chiude il gioco, mentre play fa partire il gioco.

C’è un trucco per evitare di dover ricreare i pulsanti nelle varie scene, questo può essere utile anche per alcuni oggetti. Seleziona sia i pulsanti che i testi, premi CTRL+L e dal menù che appare seleziona Object to Scene -> game over, inserisco uno screenshot

Così facendo hai linkato questi quattro oggetti ad un’altra scene, ma essendo collegati (link infatti in inglese come sai è collegamento) non li puoi spostare, per farlo c’è un ulteriore passaggio da fare. Vai alla scena game over e seleziona nuovamente tutti gli oggetti, premi ALT+D e sposta gli oggetti duplicati dove vuoi, io li ho messi un pò sotto la scritta Game Over, adesso puoi cancellare gli oggetti linkati e hai esattamente gli stessi pulsanti con la logica già pronta. La stessa cosa puoi farla con la scena pausa, ma con la differenza che il pulsante play deve avere parte della logica del tasto P, in questo caso specifico è la parte che serve a fare ripartire il gioco dalla pausa e bisogna cambiare anche la scritta da play a resume. Quest’ultimo passaggio lo puoi fare come esercizio, naturalmente io l’ho già fatto e lo trovi sul file finale. 

Questa è solo la base per creare dei pulsanti semplici ma molto utili, un pulsante è parte di una GUI e può avere tante funzioni, non solo quello che abbiamo visto in questo articolo, gli esempi sono tantissimi, prendi il gioco che stai giocando e prova ad individuare nella GUI i pulsanti e vedrai che sono tanti, o pensa ad un gioco per smatphone è esclusivamente fatto a pulsanti nella maggior parte dei casi. Come detto ecco il FILE finale. Manca solo una piccola parte al completamento del giochino, ma che da a ogni gioco quel tocco grafico accattivante, le particelle che vedrai nel prossimo articolo, per ora è tutto e ricorda di fare molta pratica per memorizzare i passaggi di questo articolo.