Progetta una schermata del titolo

Nei prossimi due tutorial, costruirai due scene con UI (interfacce utente) responsive passo dopo passo usando il sistema UI dell'engine:

  1. Un menu principale.

  2. Una GUI con una barra della salute, barra dell'energia, un contatore per le monete e le bombe.

Imparerai come progettare le UI di gioco in modo efficiente e come usare i nodi Control di Godot. Questa pagina si concentra sulla parte visiva: tutto ciò che fai dall'editor. Per sapere come programmare una barra della vita, leggi Control the game's UI with code.

../../_images/ui_main_menu_design_final_result.png

La GUI che costruirai.

Scarica i file del progetto: ui_main_menu_design.zip ed estrai l'archivio. Importa il progetto start/ in Godot per seguire questo tutorial. La cartella end/ contiene il risultato finale. Troverai tutti gli sprite nella cartella start/assets/main_menu.

Nota

Leggi prima la Progettare le interfacce con i nodi Control per imparare come funziona il sistema UI di Godot.

Come progettare la tua GUI (interfaccia di gioco)

Per progettare una buona interfaccia utente, devi prima creare un modello approssimativo: un semplice disegno che si concentri sul posizionamento dei componenti dell'interfaccia utente, sulla loro dimensione e sull'interazione dell'utente. Carta e penna sono tutto ciò che ti serve. In questa fase non dovresti usare una grafica elaborata. Quindi, hai solo bisogno di semplici sprite e sei pronto ad entrare in Godot. Vuoi assicurarti che i giocatori possano orientarsi nell'interfaccia usando questo modello semplificato.

../../_images/ui_design_rough.png

Uno schizzo approssimativo o modello dell' Interfaccia Utente

Placeholder non deve necessariamente significare brutto, ma dovresti mantenere la grafica semplice e pulita. Evita effetti speciali, animazioni e illustrazioni dettagliate prima di far provare ai giocatori la tua interfaccia utente. Altrimenti:

  1. La grafica potrebbe distorcere la percezione dell'esperienza da parte dei giocatori e vi sfuggirà un prezioso feedback.

  2. Se la User Experience non funziona, dovrai rifare qualche sprite.

Suggerimento

Cerca sempre di far funzionare l'interfaccia con del semplice testo e dei riquadri. È facile sostituire le texture in un secondo momento. I progettisti professionisti di UX lavorano spesso con contorni e riquadri semplici in scala di grigi. Quando togli i colori e le immagini elaborate, è molto più facile ridimensionare e posizionare correttamente gli elementi dell'interfaccia utente. Ti aiuta a perfezionare le basi di progettazione su cui ti baserai.

Ci sono due modi di progettare la tua UI in Godot. Puoi:

  1. Costruire il tutto in una singola scena, e alla fine salvare alcuni rami come scene riutilizzabili.

  2. Crea scene di base per componenti riutilizzabili e crea componenti specifici che ereditano da esse.

Utilizzeremo il primo approccio, perché la prima versione della tua interfaccia utente potrebbe non funzionare come desideri. È probabile che butterai via delle parti e riadattaterai i componenti mentre procedi. Quando sei sicuro che tutto funzioni, è facile rendere alcune parti riutilizzabili, come vedrai di seguito.

../../_images/ui_main_menu_placeholder_assets.png

I file che troverai in Godot. La grafica sembra più pulita che sul disegno grezzo, ma sono comunque dei sostituti.

Progettare il menu principale

Prima di passare all'editor, vogliamo pianificare come annideremo i contenitori in base al nostro schizzo.

Suddividere lo schizzo dell'Interfaccia Utente

Ecco le mie tre regole pratiche per trovare i contenitori giusti:

  1. Suddividi l'interfaccia utente in caselle nidificate, dalla più grande che contiene tutto, alle più piccole, che racchiudono un widget, come una barra con la sua Label, un pannello o un pulsante.

  2. Se c'è un po 'di spazio intorno a un'area, usa un `` MarginContainer``.

  3. Se gli elementi sono disposti in righe o colonne, utilizzare un HBoxContainer o VBoxContainer.

Queste regole sono sufficienti per iniziare e funzionano bene con interfacce semplici.

Per il menu principale, il riquadro più grande è l'intera finestra di gioco. C'è dello spazio tra i bordi della finestra e i primi componenti: questo dovrebbe essere un MarginContainer. Poi, lo schermo è diviso in due colonne, quindi useremo un HBoxContainer. Nella colonna di sinistra, gestiremo le righe con un VBoxContainer. E nella colonna di destra, centreremo l'illustrazione con un CenterContainer.

../../_images/ui_mockup_break_down.png

Elementi dell' interfaccia, suddivisi usando le tre semplici regole.

Suggerimento

Containers adapt to the window's resolution and width-to-height ratio. Although we could place UI elements by hand, containers are faster, more precise, and responsive.

Preparare la scena del menu principale

Nota

This tutorial is based on a window size of 1366×768. To change the project's base window size, open Project > Project Settings at the top of the editor then change Display > Window > Size > Width to 1366 and Display > Window > Size > Height to 768.

Se dimentichi di modificare le dimensioni della finestra, ancoraggi e contenitori potrebbero non funzionare come previsto.

Creiamo il menu principale. Lo costruiremo in un'unica scena. Per creare una scena vuota, fare clic su Scena> Nuova scena.

We have to add a root node before we can save the scene. Your UI's root should be the outermost container or element. In this case it's a MarginContainer. MarginContainer is a good starting point for most interfaces, as you often need padding around the UI. Press Ctrl + S (Cmd + S on macOS) to save the scene to the disk. Name it MainMenu.

Select the MarginContainer again, and head to the inspector to define the margins' size. Scroll down the Control class, to the Custom Constants section. Unfold it. Set the margins as such:

  • Margin Right: 120

  • Margin Top: 80

  • Margin Left: 120

  • Margin Bottom: 80

We want the container to fit the window. In the toolbar above the Viewport, open the Layout menu and select the last option, Full Rect.

Aggiungi gli sprite dell'interfaccia utente

Seleziona MarginContainer e crea gli elementi dell'interfaccia utente come nodi TextureRect. Abbiamo bisogno:

  1. il titolo o il logo,

  2. le tre opzioni di testo come singoli nodi,

  3. la nota di versione,

  4. e l'illustrazione del menu principale.

Click the Add Node button or press Ctrl + A (Cmd + A on macOS) on your keyboard. Start to type TextureRect to find the corresponding node and press enter. With the new node selected, press Ctrl + D (Cmd + D on macOS) five times to create five extra TextureRect instances.

Click each of the nodes to select it. In the inspector, find the Texture property and click [empty] > Load. A file browser opens and lets you pick a sprite to load into the texture slot.

../../_images/ui_texturerect_load_texture.png

Il browser dei file ti consente di trovare e caricare le texture.

Ripeti l'operazione per tutti i nodi TextureRect. Dovresti avere il logo, l'illustrazione, le tre opzioni di menu e la nota di versione, ognuno come un nodo separato. Quindi, fai doppio clic su ciascuno dei nodi nella scheda Scena per rinominarli. Nulla è stato ancora inserito nei contenitori quindi dovrebbe sembrare disordinato.

../../_images/ui_main_menu_6_texturerect_nodes.png

I sei nodi con le texture caricate.

Nota

If you want to support localization in your game, use Labels for menu options instead of TextureRect.

Aggiungi contenitori per posizionare automaticamente gli elementi dell'interfaccia utente

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container's resize behavior, it's recommended to favor box containers.

Select the MarginContainer and add an HBoxContainer. Then, we need two containers as children of our HBoxContainer: a VBoxContainer for the menu options on the left, and a CenterContainer for the illustration on the right.

../../_images/ui_main_menu_containers_step_1.png

You should have four nested containers and the TextureRect nodes sitting aside from it.

In the node tree, select all the TextureRect nodes that should go on the left side: the logo, the menu options (Continue, NewGame, Options), and the version note. Drag and drop them into the VBoxContainer. The nodes should position automatically.

../../_images/ui_main_menu_containers_step_2.png

Containers automatically place and resize textures

We're left with two problems to solve:

  1. The characters on the right aren't centered.

  2. Non c'è spazio tra il logo e gli altri elementi dell'interfaccia utente.

To center the characters on the right, first select the CenterContainer. Then in the Inspector, scroll down to the Size Flags category and click on the field to the right of the Vertical property, and check Expand in addition to Fill. Do the same for the Horizontal property. This makes the CenterContainer expand into all available space while respecting its neighbour VBoxContainer. Finally, drag and drop the Characters node into the CenterContainer. The Characters element will center automatically.

../../_images/ui_main_menu_containers_step_3.png

The character node centers inside the right half of the screen as soon as you place it inside the CenterContainer.

Per distanziare le opzioni di menu e il logo a sinistra, useremo un ultimo contenitore e i relativi flag di dimensione. Selezionare VBoxContainer e premere Ctrl + A`(:kbd:`Cmd + A su macOS) per aggiungere un nuovo nodo al suo interno. Aggiungere un secondo VBoxContainer e denominarlo MenuOptions. Selezionare tutte e tre le opzioni di menu, Continue, NewGame e Options, quindi trascinarle all'interno del nuovo VBoxContainer. Il layout dell'interfaccia utente dovrebbe cambiare a malapena, se non del tutto.

../../_images/ui_main_menu_containers_step_4.png

Place the new container between the other two nodes to retain the UI's layout.

Ora che abbiamo raggruppato le opzioni di menu insieme, possiamo dire al loro contenitore di espandersi per occupare più spazio verticale possibile. Seleziona il nodo MenuOptions. Nell'Inspector, scorri verso il basso fino alla categoria Flag di dimensione. Fai clic sul campo a destra della proprietà Verticale e seleziona Espandi oltre a Riempi. Il contenitore si espande per occupare tutto lo spazio verticale disponibile rispettando i suoi vicini, gli elementi Logo e Versione.

To center the nodes in the VBoxContainer, scroll to the top of the Inspector and change the Alignment property to Center.

../../_images/ui_main_menu_containers_step_5.png

The menu options should center vertically in the UI's left column.

To wrap things up, let's add some separation between the menu options. Expand the Custom Constants category below Size Flags, and click the field next to the Separation parameter. Set it to 30. Once you press enter, the Separation property becomes active and Godot adds 30 pixels between menu options.

../../_images/ui_main_menu_design_final_result.png

L'interfaccia finale.

Without a single line of code, we have a precise and responsive main menu.

Congratulations for getting there! You can download the final menu ui_main_menu_design.zip to compare with your own. In the next tutorial, you'll create a Game User Interface with bars and item counters.

Suddividere lo schizzo dell'Interfaccia Utente

A responsive User Interface is all about making sure our UIs scale well on all screen types. TV screens and computer displays have different sizes and ratios. In Godot, we use containers to control the position and the size of UI elements.

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press Q to activate the Select Mode, select the container and click and drag on one of the container's corners to resize it. The UI components should flow inside of it.

You'll notice that although containers move sprites around, they don't scale them. This is normal. We want the UI system to handle different screen ratios, but we also need the entire game to adapt to different screen resolutions. To do this, Godot scales the entire window up and down.

You can change the scale mode in the project settings: click Project > Project Settings in the top menu. In the window's left column, look for the Display category. Click on the Window sub-category. On the right side of the window, you'll find a Stretch section. The three settings, Mode, Aspect, and Shrink, control the screen size. For more information, see Multiple resolutions.