Nel precedente articolo ci siamo avventurati nell'ambiente di sviluppo di Godot, creato il primo progetto ed introdotto i concetti di nodo e scena. Abbiamo eseguito il progetto per vedere la prima schermata di "gioco", una semplice finestra con il logo di Godot (la faccina sorridente che potete osservare qui a destra), ma il risultato non è stato ciò che ci aspettavamo.
Ridimensionare la finestra di esecuzione
Dopo aver premuto il tasto di esecuzione, il "gioco" viene eseguito nell'IDE (Integrated Development Environment - ambiente di sviluppo integrato) di Godot, in una finestra di DEBUG che, impostazione predefinita, ha dimensioni di 1152x548 pixel, un po' troppo grande per il logo, che ha dimensioni di 128x128 pixel. Inoltre il logo è solo parzialmente visualizzato, essendo visibile solo l'angolo in basso a destra.
Ridimensioniamo la finestra di esecuzione:
- nella barra dei menu, andare in Projects>Project Settings e selezionare Window;
- cambiare la dimensioni di Viewport Width e Viewport Height, per esempio in 800 e 600, infine premere <CLOSE>.
- Eseguendo nuovamente il progetto la finestra sarà più piccola, ma rimane da sistemare la posizione del logo.
Il resto del Viewport
Torniamo nel Viewport e osserviamo gli altri elementi che contiene:
- in alto a sinistra ci sono i pulsanti per lo zoom-in e zoom-out per avere una visiona più o meno grande dell'area di gioco, e un pulsantino per centrare la visuale. Provate per esempio a premere il "-" e vedreta un'area più ampia, poi provate a premere gli altri per vedere l'effetto.
- In alto a destra c'è un pulsantino chiamato "Distraction Free Mode" che, se premuto, mostrerà solo l'area del Viewport, coprendo il resto della UI (premendolo di nuovo torna tutto come prima).
Premendo il tasto "-" per eseguire un zoom-out si vede una porzione più ampia dell'area di gioco. Avendo ridimensionato la finestra di esecuziore a 800x600 pixel, Godot mostra i contorni dell'area di gioco e, in alto a sinistra, il logo. Da notare che la croce rossa rappresenta la scena principale Node2D, e che il logo (Sprite2D) è centrato sulla croce. Da notare inoltre la Toolbar in alto a sinistra.
Il sistema di coordinate nei videogiochi
Quando si lavora nello spazio bidimensionale, Godot segue le regole della computer grafica: un punto sullo schermo è rappresentato da una coppia di coordinate cartesiane (x, y) solo che, diversamente da quanto abbiamo studiato a scuola, l'origine O di coordinate (0, 0) è l'angolo in alto a sinistra dello schermo, l'asse x ha direzione verso destra, l'asse y punta verso il basso.
Solo le coordinate positive sono visibili sullo schermo, eventuali immagini (o parti di esse) posizionate su coordinate negative non saranno visualizzate: per questo motivo il logo è solo parzialmente visibile, per renderlo interamente visibile bisogna spostarlo.
LA TOOLBAR DEI PULSANTI
Nella parte superiore del Viewport c'è la barra dei pulsanti, i primi 4 dei quali sono di uso frequente; per impostazione predefinita è semre selezionato il pulsante di selezione (Select Mode, il primo da sinistra), seguito da quelli di spostamento (Move Mode), rotazione (Rotate Mode) e ridimensionamento (Scale Mode).
Per spostare l'immagine del logo:
- selezionare la scena Node2D (con un click del tasto sinistro del mouse);
- selezionare il pulsante di spostamento (con un click del tasto sinistro del mouse);
- premere e tewnere premuto il tasto sinistro del mouse sulla scena, trascinandola nella nuova posizione desiderata, infine rilasciare il tasto;
- osservare nell'Inspector Dock le nuove coordinate (x, y) della scena.
Eseguendo di nuovo il progetto (con il pulsante <Play> in alto a destra) verrà visualizzata la scena centrandone le coordinate nel punto di arrivo del trascinamento. Le nuove coordinate si possono anche inserire a mano nell'Inspector Dock: per esempio inserendo come coordinate x=400.0 e y=150.0 ed eseguendo il progetto, il centro della scena sarà in quel punto.
Il principio di funzionamento dei bottoni di rotazione e ridimensionamento è identico: a ciascun pulsante corrispondono dei campi nell'Inspector Dock, quindi le relative azioni si possono fare sia usando il mouse con click/trascina/rilascia oggetti nella finestra principale del Viewport che modificando manualmente i valori all'interno dell'Inspector Dock.
Nell'Inspector Dock, a fianco dei valori modificati rispetto all'impostazione predefinita, appare una piccola icona con la forma di una semicirconferenza che termina con una punta di freccia orientata in senso antiorario; si tratta dell'icona di reset (rispristino) ai valori predefiniti: ad esempio, premendola per il campo Position, i valori (x, y) verranno ripristinati a (0, 0).
Se compare un'iconcina a forma di lucchetto, come nel caso del ridimensionamento (Scale) significa che la modifica di un valore coinvolge automaticamente anche l'altro: ad esempio, se si inserisce il valore 2.0 per la x, anche la y assumerà lo stesso valore. Se non si vuole la modifica contemporanea bisogna fare click sull'icona per slegare i valori. Anche il ridimensionamento si può fare con il mouse:
- selezionare l'immagine;
- selezionare il pulsante di ridimensionamento;
- puntare il mouse sul quadratino rosso, clickare e trascinarlo verso destra/sinistra (ridimensionerà la larghezza); se l'operazione viene effettuata sul quadratino verde e si trascina il mouse in alto/basso, il ridimensionamento avviene in altezza. Per mantenere le proporzioni dell'immagine bisogna ridimensionare contemporaneamente nelle 2 direzioni: premere sulla tastiera il tasto per le maiuscole <MAIUSC> (o <SHIFT> o una freccia verso l'alto) e trascinare il mouse per ingrandire/rimpicciolire l'immagine.
Per ruotare un'immagine con il mouse bisogna selezinare l'immagine, premere il pulsante ri rotazione, clickare sull'immagine e trascinare il mouse nella direzione di rotazione.
Posiziona relativa di oggetti in una scena
Il sistema di coordinate considerato fino ad ora è assoluto relativamente alle coordinate della finestra. All'interno di una scena è possibile collocare oggetti come le immagini prendendo come riferimento la posizione della scena stessa; l'Inspector Dock mostrerà tali coordinate come relative rispetto al centro della scena, ossia mostrerà valori di scostamento o offset.
Inseriamo la seguente immagine (hello-godot.png) nella scena; per farlo copiamo innanzitutto l'immagine nella cartella del progetto, dove c'è anche il logo (icon.svg). Questa immagine ha dimensioni 500x100 pixel.
Creiamo un nuovo nodo nella scena, con lo stesso procedimento visto nell'articolo precedente (che qui riassumo): selezioniamo la nostra scena principale Node2D e con il tasto + aggiungiamo un nodo, ricerchiamo sprite e facciamo doppio click su Sprite2D che rinominiamo in Sprite2Dhello per distinguerlo dal precedente (per rinominarlo basta clikarci sopra e cambiare il nome). Selezioniamo Sprite2Dhello nello SceneDock, andiamo nell'Inspection Dock e nella proprietà Texture facciamo click su <empty> e poi <Load>.
Selezioniamo l'immagine hello-godot.png e il risultato sarà che viene posizionata esattamente sulla croce rossa che rappresenta la posizione della scena nella nostra finestra, sovrapponendosi al logo. Notiamo Sprite2Dhello è selezionato nello SceneDock, quindi l'Inspection Dock visualizza le sue proprietà; bisogna osservare la parte Node2D al di sotto di Sprite2D (vedi figura), dove ci sono le coordinate relative de centro dell'immagine rispetto alla scena: x=0 e y=0 indica che è esattamente al centro della scena (che noi abbiamo precedentemente spostato nella finestra).
Dobbiamo spostare la nuova immagine verso il basso, o usando il mouse e trascinandola verso, oppure inserendo un valore per la coordinata y nell'Inspection Dock, per esempio y=150.
A questo punta non resta che eseguire il progetto per verificare ciò che abbiamo fatto e, se tutto è a posto, salvare il progetto dal menù Scene>Save Scene.
Riepilogo
Godot è un game engine con un ambiente di sviluppo integrato studiato appositamente per la creazione di videogiochi. Un videogame in Godot si realizza all'interno di un progetto organizzato in file e directory/cartelle. Un progetto è costituito da una o più scene dove una scena rappresenta una sezione di gioco. Ciascuna scena è un insieme di nodi, gli elementi di base del gioco, ad esempio le immagini dei personaggi. Le immagini sono nodi chiamati sprite, in particolare Sprite2D nel caso della grafica bidimensionale. Le immagini possono essere spostate, ruotate e ridimensionate a piacimento all'interno di una scena.
Completata una scena, è necessario inserire la logica di gioco, ossia le regole che gestiscono il comportamento degli elementi a video. Ciò è possibile usando un linguaggio di programmazione apposito chiamato GDScript: sarà l'argomento dei prossimi articicoli.
