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 a 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 displays a texture or image inside a UI. It seems similar to the Sprite node, but it offers multiple scaling modes. Set the Stretch Mode property to change its behavior:

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

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 5 slot per trama: uno per ciascuno degli stati dei pulsanti. Il più delle volte, userete le texture Normal, Pressed e Hover . è 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 ** 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 prints text to the screen. You’ll find all its properties in the Label section, in the Inspector. Write the text in the Text property, and check Autowrap if you want it to respect the textbox’s size. If Autowrap is off, you won’t be able to scale the node. You can align the text horizontally and vertically with Align and Valign, respectively.

../../_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 scaled with the min_size property

There are two workflows to build responsive UIs

There are two workflows to build scalable and flexible interfaces in Godot:

  1. You have many container nodes at your disposal that scale and place UI elements for you. They take control over their children.
  2. On the other side, you have the layout menu. It helps you to anchor, place and resize a UI element within its parent.

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.

As you create UIs for your games and tools, you’ll develop a sense for what fits best in each situation.

Place UI elements precisely with anchors

Control nodes have a position and size, but they also have anchors and margins. Anchors define the origin, or the reference point, for the Left, Top, Right and Bottom edges of the node. Change any of the 4 anchors to change the reference point of the margins.

../../_images/anchor_property.png

The anchor property

How to change the anchor

Like any properties, you can edit the 4 anchor points in the Inspector, but this is not the most convenient way. When you select a control node, the layout menu appears above the viewport, in the toolbar. It gives you a list of icons to set all 4 anchors with a single click, instead of using the inspector’s 4 properties. The layout menu will only show up when you select a control node.

../../_images/layout_menu.png

The layout menu in the viewport

Anchors are relative to the parent container

Each anchor is a value between 0 and 1. For the left and top anchors, a value of 0 means that without any margin, the node’s edges will align with the left and top edges of its parent. For the right and bottom edges, a value of 1 means they’ll align with the parent container’s right and bottom edges. On the other hand, margins represent a distance to the anchor position in pixels, while anchors are relative to the parent container’s size.

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

Margins change with the anchor

Margins update automatically when you move or resize a control node. They represent the distance from the control node’s edges to its anchor, which is relative to the parent control node or container. That’s why your control nodes should always be inside a container, as we’ll see in a moment. If there’s no parent, the margins will be relative to the node’s own bounding Rectangle, set in the Rect section, in the inspector.

../../_images/control_node_margin.png

Margins on a CenterContainer set to the «Full Rect» anchor

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.

Use size tags to change how UI elements fill the available space

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 UI elements in an HBoxContainer, they align horizontally

The «Expand» flag lets the UI element take all the space it can, and push against its siblings. Its bounding rectangle will grow against the edges of its parent, or until it’s blocked by another UI node.

../../_images/textureframe_in_box_container_expand.png

The same example as above, but the center node has the «Expand» size flag

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.

Arrange control nodes automatically with containers

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.

The 5 most useful containers

If you build tools, you might need all of the containers. But for most games, a handful will be enough:

  • MarginContainer, to add margins around part of the UI
  • CenterContainer, to center its children in its bounding box
  • VboxContainer and HboxContainer, to arrange UI elements in rows or columns
  • GridContainer, to arrange Controls nodes in a grid-like pattern

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 action. The life bar centers inside its parent container.

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

The MarginContainer adds a 40px margin around the Game User Interface

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

The HBoxContainer horizontally aligns UI elements

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

A GridContainer with 2 columns. It sizes each column automatically.

Godot’s UI system is complex, and has a lot more to offer. To learn how to design more advanced interfaces, head to the GUI section of the docs.