Grafica – Barra dell’energia

In questo tutorial inizia una serie mirata a completare un gioco, niente di entusiasmante, ma servirà per comprendere il processo nel creare la grafica per finire il gioco. Iniziando dalla barra dell’energia di questo articolo, poi il menù iniziale, il sistema di pausa e infine le particelle, il tutto per completare questa serie di tutorial dedicata alla grafica, ma con un’approccio diverso perché finirai il gioco che puoi scaricare QUA. Il gioco ha già la parte della logica del game play, si tratta di un semplice giochino dove il player deve scappare dagli avversari in uno spazio ridotto; la scelta di questa tipologia di gioco inusuale è, come detto, mirata al fine didattico e a mostrare una logica un pò più complessa spiegata nel testo che trovi all’apertura del file. Detto questo, prova il gioco, dai un’occhiata al file selezionando i vari oggetti che trovi elencati nel testo della logica e cerca di comprendere il suo funzionamento. Naturalmente se hai dei dubbi puoi sempre chiedere nella pagina Facebook.

La barra dell’energia

Come prima cosa bisogna creare una nuova scena che sarà la HUD del gioco, se non sai come fare ti rimando alla lettura dell’articolo precedente. Quindi crea la scena, rinominala HUD, e aggiungi la Camera, un piano e rinominalo come meglio credi, io l’ho chiamato Ebar, che come per il testo, nell’articolo citato precedentemente, avrà una precisa posizione e dimensione. Entra in Edit Mode (questo ti evita di dover applicare le trasformazioni agli oggetti in un secondo momento) scala il piano sull’asse Y di 0.25 (S-Y-0.25), e di due unità sull’asse X (S-X-2), posizionalo dove meglio credi, io l’ho metto in alto a destra in modo da avere libera lettura delle Properties in debug mode, la posizione è irrilevante per il tutorial, ma può essere utile per capire (e questo sarà fatto in seguito) come ottimizzare lo spazio dello schermo in base ai dati che si vuole mostrare. Entra nuovamente in Edit Mode e fa si che il Pivot point (il puntino arancione, se usi Blender con la grafica di default) si trovi sul lato sinistro del piano (che da ora in poi chiamerò Ebar), come evidenziato nell’immagine

Prima di creare le animazioni necessarie per dare vita alla barra dell’energia, aggiungi un materiale, rinominalo come meglio credi, e dagli un Diffuse sul verde e azzera la Specular, e metti la spunta sul campo Shadless nella tab Shading subito sotto la Specular, in questo modo non ci sarà bisogno di nessuna lampada. Adesso cambia la finestra Logic Editor (quella dei Mattoni) nella Time Line. Riduci il numero di End dell’animazione da 250 a 100, posiziona il cursore sul Frame 0 (basta premere la freccia sinistra una volta). Andrò ad animare l’Ebar scalandola, verrà automaticamente ridotta verso il Pivot Point e il materiale da verde a rosso, sarà Blender ad interpolare il colore. Ho bisogno però di spendere qualche riga sull’animazione in questo specifico caso. Animando l’Ebar da 0 a 100 si ridurrà fino a sparire cambiando colore man mano che si riduce, e fin qua nulla di particolare, ma nella parte logica del gioco bisogna pensare all’opposto, cioè il Frame 0 equivale alla posizione 100 dell’energia e 0 energia al Frame 100 dell’animazione, questo perché ogni animazione parte da un numero più basso (di solito 1 o 0) e viene eseguita nel tempo, in questo caso specifico si può avere un pò di confusione visto che i numeri saranno invertiti.

Adesso col cursore al Frame 0 e il puntatore del mouse posizionato nella 3D View premi il tasto I e scegli dal menù che appare Scaling, posiziona il cursore al Frame 100 e scala l’Ebar sull’asse X fino a zero, puoi anche semplicemente premere S-X-0 e inserisci un’altro KeyFrame premendo I e scegliendo Scaling. Facendo partire l’animazione puoi ben notare che l’Ebar si riduce ed è proprio il risultato che voglio ottenere. C’è da precisare anche che in questo caso specifico non ha importanza il tipo di interpolazione (che puoi cambiare andando sulla finestra Graph Editor e col puntatore del mouse sulla finestra premi T e scegli l’interpolazione che preferisci, di solito per una interpolazione di questo tipo si usa quella Linear) perché l’energia del player non si ridurrà lentamente ma a porzioni, vedrai più avanti. Per animare il materiale posiziona il cursore della Time Line sul frame 0 e il puntatore del mouse sullo spazio dove scegli il colore nella tab del Diffuse sulle proprietà del materiale e premi I, come puoi notare adesso quel rettangolo è bordato di giallo il che indica che ha un KeyFrame, posiziona adesso il cursore della Time Line al Frame 100 e cambia colore, metti un rosso (puoi anche usare i colori che vuoi) e col puntatore del mouse sul medesimo rettangolo premi nuovamente la I. Adesso l’animazione è completa, cliccando sul Play se la barra si riduce e il colore passa da verde a rosso passando per un’arancione, se hai fatto tutto correttamente, se così non dovesse essere rifai questa parte di tutorial. 

La Logica

Come prima cosa metti la scena HUD come Scene Overlay, se non sai come fare rileggi l’articolo precedente, fai partire il motore di gioco per verificare che la HUD sia visibile a run time.
Quello che voglio fare è che ogni volta che il player viene a contatto con uno dei nemici perde l’energia, come accade in moltissimi giochi, per farlo ho bisogno di determinare una collisione; come ho spesso ripetuto in altri tutorial meno Mattoni si hanno meno il motore deve calcolare, in questo caso specifico ho già una riga di Mattoni con la collisione tra il player e l’enemy ed è proprio sulla logica di quest’ultimo, lo puoi vedere nel file di testo, ma eccoti un’immagine

Come spiega il file, quando l’enemy collide con il player si distrugge e invia un messaggio (se hai letto attentamente il file sai a chi invia il messaggio e a cosa serve). Inserisci un’Actuator Message, perché voglio che venga inviato un messaggio alla Ebar; si potrebbe anche fare una logica incrociata, cioè selezionare i due oggetti (enemy ed Ebar) e collegare il Controller dell’enemy ad un’Actuator della Ebar, ma come sai (l’ho detto spesso) preferisco mandare un messaggio direttamente all’oggetto interessato che incrociare la logica, perché è più leggibile e se voglio modificarla in un secondo momento so già dove andare; tu puoi benissimo fare come vuoi, è solo un mio modo di lavorare. Nell’Actuator Message che hai inserito cerca nel campo To l’Ebar e scrivi il Subject che meglio credi, io ho scritto ouch, collegalo al Controller della collisione, eccoti uno screenshot

Così facendo soltanto l’Ebar riceverà il messaggio. Adesso spostati sulla scena HUD e seleziona l’Ebar, puoi anche selezionarla direttamente dall’Outliner. Inserisci una Property Integer, lascia il valore a 0 e rinominala come meglio credi, io l’ho chiamata energia, userai questa Property come guida per le animazioni creata in precedenza. Inserisci un Sensor Message e scrivi sul Subject quello che hai scritto nell’Actuator Message dell’enemy, inserisci un’Actuator Property cambia il Mode su Add, scegli la Property e scrivi il valore 20, puoi inserire il valore che vuoi, questo valore fa aumentare la Property quindi dipende dal risultato che vuoi ottenere nel tuo gioco. Collega i Mattoni tra di loro tramite un Controller And e per provare se il tutto funziona metti la Property in debug e fai partire il gioco, se quando avviene la collisione tra i due oggetti (enemy e player) la Property energia sale di valore hai fatto tutto bene, in caso rivedi questa parte di logica.
Adesso bisogna dire a Blender che quando la Property energia cambia di usare l’animazione in relazione al valore modificato, in pratica quando il valore scende o sale Blender sposta il cursore dell’animazione esattamente di quanto è variato il valore, esempio se l’energia totale è 100 e il danno è 20, lui sposterò il cursore al Frame 20, questo è collegato al discorso di pensare in maniera inversa infatti l’energia scende a 80, la stessa cosa (e lo vedrai più avanti) quando deve incrementare il valore della Property. Per farsi che questo accada inserisci un Sensor Property e l’Evaluation Type da Equal a Changed e seleziona la Property, non c’è bisogno di specificare il numero del valore perché lo farà l’Actuator. Inserisci ora un’Actuator Action, cambia il mode da Play a Property, scegli l’azione, ci sono due azioni in lista una è quella del piano e una è quella del materiale il nome dell’azione dipende da come li hai rinominati. sul campo Property seleziona l’unica che è in lista. Collega i due Mattoni tramite un Controller And. Questo per quanto riguarda il movimento della barra, per il colore del materiale inserisci un’altro Actuator Action e settalo esattamente come quello precedente e cambia solo il valore del campo Layer da 0 a 1, eccoti uno screen

Adesso prova il gioco per verificare che tutto funzioni, in caso contrario rivedi la logica. Bene, a questo punto il grosso del lavoro è fatto, Adesso bisogna fare in modo che l’energia del player aumenti, nella scena principale (game) al secondo layer c’è un’oggetto che si chiama energia, questo oggetto è richiamato da una Empty che si chiama spawn_energia, se hai capito il file di testo che spiega la logica che ho già implementato sai che alla ricezione di un dato messaggio viene innescato un loop che permette alla Empty di creare un solo oggetto energia per volta, il momento per fare partire questo loop lo decidi tu, per questo giochino non è molto difficile capire quando farlo partire basta pensarci un’attimo. Io voglio che il loop parta quando la Property energia della Ebar è a un dato valore, basta scegliere un numero minore di 100 e inviare il messaggio alla Empty spawn_energia per innescare il loop, molto semplice. Seleziona l’Ebar (se non lo è) e inserisci un Sensor Property, lascia la configurazione di default (Equal), scegli la Property energia (o come l’hai chiamata tu) e, per questo esempio, scrivi il valore 60; quindi quando l’animazione sarà al Frame 60, cioè 40 di energia rimanenti (sempre per il discorso dell’animazione inversa al valore della Property), in questo modo quando il valore raggiunge quel dato numero parte il loop; inserisci un’Actuator Message, scegli dall’elenco degli oggetti spawn_energia e scrivi il Subject ok_go, questo perché la logica l’ho già creata in precedenza, se stai facendo un gioco tuo puoi inserire il Subject che vuoi. L’unica modifica che puoi fare è cambiare il valore del Sensor Delay nello State 3 dell’oggetto spawn_energia, adesso è impostato a 8 secondi, cioè al momento che riceve il messaggio ok_go passano 8 secondi prima che viene creato l’oggetto energia (il medipack per intenderci) nella scena. Adesso che l’oggetto energia appare sulla scena una volta che entra in collisione col player viene distrutto e questo è più che normale perché è come se il player prendesse l’oggetto per farne uso, cioè aumentare la sua energia, quello che voglio ora è che la Property energia dell’Ebar diminuisca di valore in modo da fare aumentare l’energia (sempre per il discorso dell’inversione tra animazione e Property.) Seleziona l’oggetto energia e nella riga della collisione con il player aggiungi un’Actuator Message (si uso sempre i messaggi), nel campo To scegli l’Ebar e nel campo Subject scrivi quello che vuoi, io ho scritto medipack. Seleziona adesso l’Ebar e inserisci un Sensor Message e scrivi il soggetto che hai scelto, o quello che ti ho consigliato io; inserisci un’Actuator Property e cambia il Mode da Assign ad Add, scegli la Property energia e scrivi il valore -40, il mio medipack da 40 di energia in più al player, puoi anche impostarlo come vuoi, basta che faccia salire l’energia di un bel pò in modo da farla uscire da quel valore che innesca il loop del medipack. Prova il gioco e vedi se una volta che l’energia è scesa di quel dato valore appare il medipack e quando il player lo prende l’energia sale. Ti ricordo sempre di rinominare i Mattoni in modo da capire a cosa servono anche se sono collassati.
Un’ultimo accorgimento per chiudere il tutorial è quello che quando l’energia arriva a zero il gioco finisce. Inserisci un Sensor Property alla Ebar e questa volta cambia l’Evaluation Type su Interval, scegli la Property e scrivi 100 su Minimum e 120 su Maximum, questo perché può capitare che il giocatore abbia preso alcuni medipack e che quindi il valore unico di 100 (che è zero energia) venga superato, spesso bisogna calcolare un pò tutte le variabili casuali quando si crea un gioco. Una volta che questa valutazione risulta vera (True) il gioco si chiude, almeno per ora lascio la conclusione così; inserisci un’Actuator Game e dal menù a tendina scegli Quit Game, collegali tra loro con un Controller And.

Avrai notato che in debug ho lasciato alcune Property, mentre giochi infatti puoi vedere l’andamento del loop del medipak attraverso la Boolean ok_go, il conteggio dei nemici con count_enem e l’energia se hai messo la Property energia in debug. Puoi aumentare se vuoi la velocità dei nemici cambiando il valore Velocity dell’Actuator Steergin da 3 a 5, non di più perché poi diventa impossibile.

Per questo tutorial è tutto, nel prossimo farò il sistema di pausa del gioco e il game over. Come sempre fai pratica sulle cose che hai imparato adesso e su quelle precedenti mischiandole tra loro.