Disegnare 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.

Per progettare la tua Interfaccia Utente, userai i nodi Control. Questi nodi hanno icone verdi nell'editor. Ce ne sono a dozzine, per creare qualsiasi cosa, dalle barre della vita ad applicazioni complesse. Lo stesso editor di Godot é costruito usando nodi Control.

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 e focus adiacente
  4. Flag di dimensione
  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 (Modalità di Stiramento) 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 adattarsi 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 proprio come Keep Aspect Centered, ma il lato più corto si adatta al rettangolo di delimitazione e l'altro si aggancia ai limiti del nodo.

As with Sprite nodes, you can modulate the TextureRect's color. Click the Modulate property and use the color picker.

../../_images/five_common_nodes_textureframe.png

TextureRect modulato con un colore rosso

TextureButton

TextureButton is like TextureRect, except it has 6 texture slots: one for each of the button's states. Most of the time, you'll use the Normal, Pressed, and Hover textures. Focused is useful if your interface listens to the keyboard's input. The sixth image slot, the Click Mask, lets you define the clickable area using a 1-bit, pure black and white image.

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 ** consente di creare una barra di avanzamento con un massimo di 3 sprite. Le trame Under, Over sono intervallate da Progress, che mostra il contenuto della barra.

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

Per animare la barra, dovresti vedere la sezione Intervallo. Regola le proprietà `` Min '' e `` Max`` per impostare l'intervallo del misuratore. 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``, il Verrà visualizzato il 40% della trama `` 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 Etichetta, 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 e in verticale rispettivamente con Allinea e Allinea.

../../_images/five_common_nodes_label.png

Picture of a Label

NinePatchRect

NinePatchRect takes a texture split in 3 rows and 3 columns. The center and the sides tile when you scale the texture, but it never scales the corners. It is useful to build panels, dialog boxes and scalable backgrounds for your UI.

../../_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. Sono disponibili molti nodi contenitore che scalano e posizionano gli elementi dell'interfaccia utente. Prendono il controllo dei loro figli.
  2. Nell'altro lato c'è il menu di layout. Ti aiuta ad ancorare, rilasciare e ridimensionare un elemento dell'interfaccia utente all'interno del suo genitore.

The two approaches are not always compatible. Because a container controls its children, you cannot use the layout menu on them. Each container has a specific effect, so you may need to nest several of them to get a working interface. With the layout approach you work from the bottom up, on the children. As you don't insert extra containers in the scene it can make for cleaner hierarchies, but it's harder to arrange items in a row, column, grid, etc.

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 degli ancoraggi

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 di controllo, 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'ispettore. Il menu di progettazione verrà visualizzato solo quando si seleziona un nodo di controllo.

../../_images/layout_menu.png

The layout menu in the viewport

Le ancore sono relative al contenitore principale

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

Margins are relative to the anchor position, which is relative to the anchors. In practice, you'll often let the container update margins for you

I margini cambiano con l'ancora

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

../../_images/control_node_margin.png

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

Try to change the anchors or nest your Control nodes inside Containers: the margins will update. You'll rarely need to edit the margins manually. Always try to find a container to help you first; Godot comes with nodes to solve all the common cases for you. Need to add space between a lifebar and the border of the screen? Use the MarginContainer. Want to build a vertical menu? Use the VBoxContainer. More on these below.

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

Every control node has Size Flags. They tell containers how the UI elements should scale. If you add the "Fill" flag to the Horizontal or Vertical property, the node's bounding box will take all the space it can, but it'll respect its siblings and retain its size. If there are 3 TextureRect nodes in an HBoxContainer, with the "Fill" flags on both axes, they'll each take up to a third of the available space, but no more. The container will take over the node and resize it automatically.

../../_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 qui sopra, ma il nodo centra ha la proprietà di dimensione "Espandi"

You'll need some practice to understand the size tags, as their effect can change quite a bit depending on how you set up your interface.

Disponi i nodi Control automaticamente con i container

Containers automatically arrange all children Control nodes including other containers in rows, columns, and more. Use them to add padding around your interface or center nodes in their bounding rectangles. All built-in containers update in the editor, so you can see the effect instantly.

Containers have a few special properties to control how they arrange UI elements. To change them, navigate down to the Custom Constants section in the Inspector.

I 5 container 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, per aggiungere dei margini attorno a porzioni della 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 centers all its children inside of its bounding rectangle. It's one you typically use for title screens, if you want the options to stay in the center of the viewport. As it centers everything, you'll often want a single container nested inside it. If you use textures and buttons instead, they'll stack up.

../../_images/five_containers_centercontainer.png

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

The MarginContainer adds a margin on any side of the child nodes. Add a MarginContainer that encompasses the entire viewport to add a separation between the edge of the window and the UI. You can set a margin on the top, left, right, or bottom side of the container. No need to tick the checkbox: click the corresponding value box and type any number. It will activate automatically.

../../_images/five_containers_margincontainer.png

Il MarginContainer aggiunge un margine di 40px attorno alla GUI

There are two BoxContainers: VBoxContainer and HBoxContainer. You cannot add the BoxContainer node itself, as it is a helper class, but you can use vertical and horizontal box containers. They arrange nodes either in rows or columns. Use them to line up items in a shop, or to build complex grids with rows and columns of different sizes, as you can nest them to your heart's content.

../../_images/five_containers_boxcontainer.png

L'HBoxContainer allinea orizzontalmente gli elementi UI

VBoxContainer automatically arranges its children into a column. It puts them one after the other. If you use the separation parameter, it will leave a gap between its children. HBoxContainer arranges UI elements in a row. It's similar to the VBoxContainer, with an extra add_spacer method to add a spacer control node before its first child or after its last child, from a script.

The GridContainer lets you arrange UI elements in a grid-like pattern. You can only control the number of columns it has, and it will set the number of rows by itself, based on its children's count. If you have nine children and three columns, you will have 9÷3 = 3 rows. Add three more children and you'll have four rows. In other words, it will create new rows as you add more textures and buttons. Like the box containers, it has two properties to set the vertical and horizontal separation between the rows and columns respectively.

../../_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.