Progettare le interfacce con i nodi Control

Schermi di computer, cellulari, e televisori sono di tutte le forme e dimensioni. Per pubblicare un gioco, avrai bisogno di supportare diverse proporzioni e risoluzioni di schermi. Può essere complicato costruire interfacce reattive che si adattano a tutte le piattaforme. Per fortuna, Godot è munito di strumenti robusti per progettare e gestire un'Interfaccia Utente reattiva.

../../_images/godot_editor_ui.png

L'editor di Godot è creato con il framework UI del motore stesso

Questa guida ti insegnerà le basi della progettazione UI. Imparerai:

  • I cinque nodi di controllo più utili per costruire l'interfaccia dei tuoi giochi

  • Come lavorare con l'ancora degli elementi UI

  • Come piazzare e ordinare efficientemente la tua interfaccia utente usando i contenitori

  • I cinque contenitori più comuni (puoi scoprire di più sui contenitori nella pagina della documentazione GUI Containers).

Per imparare come controllare l'interfaccia e connetterla agli altri script, leggi Costruisci la tua prima Interfaccia Utente in Godot.

To design your UI, you'll use the Control nodes. These are the nodes with green icons in the editor. There are dozens of them, for creating anything from life bars to complex applications. Godot's editor itself is built using Control nodes.

I nodi di controllo hanno proprietá uniche che consentono loro di funzionare bene insieme. Altri nodi visuali, come Node2D e Sprite non hanno queste capacitá. Per questo per renderti la vita piú facile usa i nodi Control ovunque sia possibile per costruire le tue UI.

Tutti i nodi di controllo condividono le stesse proprietà principali:

  1. Ancora

  2. Rettangolo di delimitazione

  3. Focus and focus neighbor

  4. Size flags

  5. Margine

  6. Il tema di UI opzionale

Una volta che capisci le basi del nodo Control, ci metterai meno tempo ad imparare tutti i nodi che derivano da esso.

I 5 elementi UI piú comuni

Godot viene fornito con dozzine di nodi di controllo. Molti di loro sono qui per aiutarti a costruire plugin dell'editor e applicazioni.

Per la maggior parte dei giochi, avrai bisogno solo di cinque tipi di elementi UI, e alcuni Container. Questi cinque nodi Control sono:

  1. Etichetta: per mostrare del testo

  2. TextureRect: usato per lo piú per gli sfondi, o qualsiasi cosa che dovrebbe essere un immagine statica

  3. TextureProgress: per barre della vita, barre di caricamento, orizzontali, verticali o radiali

  4. NinePatchRect: per pannelli scalabili

  5. TextureButton: per creare pulsanti

../../_images/five_most_common_nodes.png

I 5 nodi Control piú comuni per disegnare una Interfaccia Utente

TextureRect

TextureRect mostra una texture o un'immagine dentro l'Interfaccia Utente. Sembra simile al nodo Sprite, ma offre molteplici modalitá di ridimensionamento. Imposta la proprietà Stretch Mode per cambiare il suo comportamento:

  • Scale On Expand (compat) scala la texture per adattarsi al rettangolo di delimitazione del nodo solo se la proprietà expand è true; altrimenti, si comporta come la modalità Keep. Modalità predefinita per la compatibilità all'indietro.

  • Scale scala la texture per adattarla al rettangolo di delimitazione del nodo.

  • Tile ripete la texture, ma non la scala.

  • Keep e Keep Centered forza la texture a mantenere la sua dimensione originale, rispettivamente nell'angolo in alto a sinistra e nel centro del frame.

  • Keep Aspect e Keep Aspect Centered scala la texture ma la forza a mantenere il rapporto di aspetto originale, rispettivamente nell'angolo in alto a sinistra e nel centro del frame.

  • Keep Aspect Covered funziona come Keep Aspect Centered ma il lato più corto si aggancia al rettangolo di delimitazione e l'altro al limite del nodo.

Come per i nodi Sprite, è possibile modulare il colore di TextureRect. Fare clic sulla proprietà Modulate e utilizzare il selezionatore di colori.

../../_images/five_common_nodes_textureframe.png

TextureRect modulato con un colore rosso

TextureButton

** TextureButton ** è simile a TextureRect, tranne per il fatto che ha 6 slot per le texture: uno per ciascuno degli stati dei pulsanti. Il più delle volte, userete le texture Normal, Pressed e Hover. Focused è utile se l'interfaccia è in ascolto dell'input da tastiera. La sesta area immagine, la Clic Mask, consente di definire l'area in cui è possibile fare clic utilizzando un'immagine in bianco e nero a 1 bit.

Nella sezione Base Button, troverai alcune caselle di controllo che cambiano il comportamento del pulsante. Quando Toggle Mode è attivo, il pulsante commuta tra gli stati attivo e normale quando lo si preme. `` Disabled`` lo disabilita di default, nel qual caso utilizzerà la texture Disabled. TextureButton condivide alcune proprietà con il frame texture: ha una proprietà modulate, per cambiarne il colore, e Resize e Stretch per cambiare il suo comportamento in scala.

../../_images/five_common_nodes_texturebutton.png

TextureButton e i suoi 5 slot di consistenza

TextureProgress

** TextureProgress ** sovrappone fino a 3 sprite per creare una barra di avanzamento. Le texture Under e Over racchiudono quella Progress, che mostra il valore della barra.

La proprietà Mode controlla la direzione verso cui la barra cresce: orizzontale, verticale o radiale. Se lo si imposta su radiale, le proprietà Initial Angle e Fill Degrees consentono di limitare l'intervallo dell'indicatore.

Per animare la barra, dovresti vedere la sezione Intervallo. Regola le proprietà Min e Max per impostare l'intervallo dell' indicatore. Ad esempio, per rappresentare la vita di un personaggio, devi impostare Min su 0 `` e ``Max sulla vita massima del personaggio. Cambia la proprietà Value per aggiornare la barra. Se si lasciano i valori Min e Max nei valori predefiniti di 0 e 100 e si imposta la proprietà Value su 40, verrà visualizzato il 40% della texture Progress e il 60% rimarrà nascosto.

../../_images/five_common_nodes_textureprogress.png

Barra TextureProgress, riempita per due terzi

Etichetta

Label stampa il testo sullo schermo. Troverai tutte le sue proprietà nella sezione Label, nell'Inspector. Digita il testo nella proprietà Text e seleziona Autowrap se desideri che rispetti le dimensioni della casella di testo. Se Autowrap è disabilitato, non sarà possibile ridimensionare il nodo. È possibile allineare il testo in orizzontale con Align e in verticale con Valign.

../../_images/five_common_nodes_label.png

Immagine di un Nodo Label

NinePatchRect

NinePatchRect prende una texture divisa in 3 righe e 3 colonne. Il centro e i lati si estendono quando si scala la texture, ma non scala mai gli angoli. È utile per costruire pannelli, finestre di dialogo e sfondi scalabili per la vostra interfaccia utente.

../../_images/five_common_nodes_ninepatchrect.png

NinePatchRect scalato con la proprietà min _size

Esistono due flussi di lavoro per la creazione di UI reattive

Esistono due flussi di lavoro per la creazione di interfacce flessibili e scalabili in Godot:

  1. Place UI elements precisely with anchors: Use the Layout menu to place and resize a UI element relative to its parent.

  2. Arrange control nodes automatically with containers: Use container nodes to automatically scale and place UI elements.

I due approcci non sono sempre compatibili. Poiché un contenitore controlla i propri figli, non è possibile utilizzare il menu delle disposizioni su di essi. Ogni contenitore ha un effetto specifico, quindi potrebbe essere necessario nidificarne diversi per ottenere un'interfaccia funzionante. Con l'approccio alla disposizione si lavora dal basso verso l'alto, nei bambini. Poiché non si inseriscono ulteriori contenitori nella scena, è possibile rendere più pulite le gerarchie, ma è più difficile organizzare gli elementi in una riga, colonna, griglia, ecc.

Man mano che crei le interfacce utente per i tuoi giochi e strumenti, svilupperai un senso di ciò che meglio si adatta a ogni situazione.

Piazzare perfettamente gli elementi dell'interfaccia utente attraverso l'uso delle ancore

I nodi Control hanno una posizione e una dimensione, ma hanno anche ancore e margini. Le ancore definiscono l'origine o il punto di riferimento per i bordi sinistro, superiore, destro e inferiore del nodo. Cambia una delle 4 ancore per cambiare il punto di riferimento dei margini.

../../_images/anchor_property.png

Proprietà dell'ancora

Come cambiare l'ancora

Come qualsiasi altra proprietà, puoi modificare i 4 punti di ancoraggio nell'Inspector, ma questo non è il modo più conveniente. Quando si seleziona un nodo Control, il menu di configurazione appare sopra la finestra del display sulla barra degli strumenti. Offre un elenco di icone per impostare le 4 ancore con un solo clic, invece di utilizzare le 4 proprietà dell'Inspector. Il menu di progettazione verrà visualizzato solo quando si seleziona un nodo Control.

../../_images/layout_menu.png

The layout menu in the viewport

Le ancore sono relative al contenitore genitore

Ogni ancora ha un valore compreso tra 0 e 1. Per le ancore di sinistra e superiore, un valore di 0 significa che non vi è margine, i bordi del nodo si allineeranno con i bordi sinistro e superiore del suo genitore. Per i bordi destro e inferiore, un valore di 1 indica che si allineeranno con i bordi destro e inferiore del contenitore principale. D'altra parte, i margini rappresentano una distanza dalla posizione dell'ancoraggio in pixel, mentre gli ancoraggi sono relativi alla dimensione del contenitore padre.

../../_images/ui_anchor_and_margins.png

I margini sono relativi alla posizione dell'ancora, che è relativa alle ancore. In pratica, lascerai spesso che il contenitore aggiorni i margini per te

I margini cambiano con l'ancora

I margini vengono aggiornati automaticamente quando si sposta o si ridimensiona un nodo Control. Rappresentano la distanza tra i bordi del nodo Control e le sue ancore, che è relativa al nodo Control padre o contenitore. Quindi i tuoi nodi Control devono essere sempre all'interno di un contenitore, come vedremo tra poco. Se non vi è un nodo padre, i margini saranno relativi al rettangolo di delimitazione del nodo stesso, impostato nella sezione Rect, nell' Inspector.

../../_images/control_node_margin.png

I margini in un CenterContainer impostato sull'ancoraggio "Full Rect"

Prova a cambiare le ancore o annidare i nodi Control nei contenitori: i margini verranno aggiornati. Raramente sarà necessario modificare i margini manualmente. Cerca sempre di trovare un contenitore per aiutarti prima; Godot possiede dei nodi per risolvere tutti i casi più comuni. Devi aggiungere spazio tra una barra della vita e il bordo dello schermo? Usa MarginContainer. Vuoi creare un menu verticale? Utilizza VBoxContainer. Maggiori informazioni su questi di seguito.

Usa i tag size per cambiare il modo in cui gli elementi dell'interfaccia utente riempiono lo spazio disponibile

Ogni nodo Control ha le Size Flags. Dicono ai contenitori come ridimensionare gli elementi dell'interfaccia utente. Se aggiungi il flag "Riempi" alla proprietà Orizzontale o Verticale, il rettangolo di delimitazione del nodo occuperà più spazio possibile, ma rispetterà i suoi fratelli e manterrà le sue dimensioni. Se in un HBoxContainer sono presenti 3 nodi TextureRect, con flag "Riempi" su entrambi gli assi, ciascuno occuperà fino a un terzo dello spazio disponibile, ma non di più. Il contenitore prenderà il nodo e lo ridimensionerà automaticamente.

../../_images/textureframe_in_box_container_fill.png

3 elementi UI in un HBoxContainer, si allineano orizzontalmente

La proprietà "Espandi" lascia che l'elemento UI prenda tutto lo spazio disponibile, e spinga contro i suoi fratelli. Il suo rettangolo delimitatore crescerà adiacente ai lati del suo nodo genitore, o fintanto che è bloccato da un altro nodo UI.

../../_images/textureframe_in_box_container_expand.png

Lo stesso esempio come sopra, ma il nodo centrale ha la proprietà di dimensione "Espandi"

Avrai bisogno di un po 'di pratica per capire i size tag, in quanto il loro effetto può cambiare un po' a seconda della configurazione della tua interfaccia.

Disponi i nodi Control automaticamente con i contenitori

I contenitori organizzano automaticamente tutti i nodi Control figli, inclusi altri contenitori in righe, colonne e altro. Usali per aggiungere dello spazio libero intorno all'interfaccia o centrare i nodi nei loro rettangoli di delimitazione. Tutti i contenitori integrati si aggiornano nell'editor, in modo da poter vedere immediatamente l'effetto.

I contenitori hanno alcune proprietà speciali per controllare il modo in cui dispongono gli elementi dell'interfaccia utente. Per modificarle, scorri verso il basso fino alla sezione Custom Constants nell' Inspector.

I 5 contenitori più utili

Se fai delle applicazioni o tool, potresti avere bisogno di tutti i container. Ma per la maggior parte dei giochi, pochi sono necessari:

  • MarginContainer, to add margins around parts of the UI

  • CenterContainer, per centrare i figli nel suo box delimitatore

  • VBoxContainer e HBoxContainer, per disporre elementi UI in righe o colonne

  • GridContainer, per disporre nodi Control in una griglia

CenterContainer centra tutti i suoi figli all'interno del suo rettangolo di delimitazione. In genere si utilizza per le schermate dei titoli, se si desidera che le opzioni rimangano al centro della finestra. Poiché centra tutto, spesso vorrai un singolo container al suo interno. Se invece usi texture e pulsanti, si sovrapporranno.

../../_images/five_containers_centercontainer.png

CenterContainer in azione. La barra della vita si centra all'interno del container padre.

MarginContainer aggiunge un margine su ciascuno dei lati dei nodi figli. Aggiungi un MarginContainer che occupi l'intera finestra per aggiungere una separazione tra il bordo della finestra e l'interfaccia utente. Puoi impostare un margine sul alto superiore, sinistro, destro o inferiore del container. Non è necessario selezionare la casella: fai clic sulla casella del valore corrispondente e digitare un numero qualsiasi. Si attiverà automaticamente.

../../_images/five_containers_margincontainer.png

Il MarginContainer aggiunge un margine di 40px attorno alla GUI

Esistono due BoxContainer: VBoxContainer e HBoxContainer. Non è possibile aggiungere il nodo BoxContainer stesso, in quanto si tratta di una classe di supporto, ma è possibile utilizzare container box verticali e orizzontali. Organizzano i nodi in righe o colonne. Usali per allineare gli articoli in un negozio o per costruire griglie complesse con righe e colonne di dimensioni diverse, in quanto puoi inserli come più ti aggradano.

../../_images/five_containers_boxcontainer.png

L'HBoxContainer allinea orizzontalmente gli elementi UI

VBoxContainer organizza automaticamente i suoi figli in una colonna. Li mette uno dopo l'altro. Se si utilizza il parametro separazione, lascerà uno spazio tra i suoi figli. HBoxContainer dispone gli elementi dell'interfaccia utente in una riga. È simile al VBoxContainer, con un ulteriore metodo `` add_spacer`` per aggiungere un nodo Control spaziatore prima del suo primo figlio o dopo il suo ultimo figlio, da uno script.

GridContainer consente di disporre gli elementi dell'interfaccia utente in un modello a griglia. Puoi controllare solo il numero di colonne che ha e da solo imposterà il numero di righe, in base al numero di figli. Se hai nove figli e tre colonne, avrai 9 ÷ 3 = 3 righe. Aggiungi altri tre figli e avrai quattro righe. In altre parole, creerà nuove righe man mano che aggiungi più texture e pulsanti. Come i contenitori box, ha due proprietà per impostare rispettivamente la separazione verticale e orizzontale tra le righe e le colonne.

../../_images/five_containers_gridcontainer.png

Un GridContainer con 2 colonne. Dimensiona ogni colonna automaticamente.

Il sistema UI di Godot è complesso ed ha molto altro da offrire. Per imparare come progettare interfacce più avanzate visita la GUI section della documentazione.