Progettare la GUI

Ora che hai fissato le basi, vedremo come creare un interfaccia utente (GUI) per il gioco con componenti UI riutilizzabili: una barra della vita, una dell'energia, una bomba e un contatore degli smeraldi. Arrivato alla fine di questo tutorial, avrai una GUI per il gioco, pronto per controllarla con GDScript o VisualScript:

../../_images/ui_gui_design_final_result.png

Il risultato finale

Imparerai anche a:

  1. Creare un componente UI flessibile

  2. Use scene inheritance

  3. Creare una UI complessa

Scarica i file del progetto ui_gui_design.zip ed estrai l'archivio. Importa il progetto start/ in Godot per seguire questo tutorial. La cartella end/ contiene i risultati finali.

Nota

Puoi vedere questo tutorial come video su YouTube.

Scomporre la UI

Andiamo ad analizzare l'UI e pianifichiamo i contenitori che useremo. Come in Progetta una schermata del titolo, partiremo con un MarginContainer. Poi, potremo creare fino a tre colonne:

  1. I contatori della vita e dell'energia a sinistra

  2. Le barre della vita e dell'energia

  3. I contatori delle bombe e degli smeraldi a destra

Ma l'etichetta della barra e l'indicatore sono due parti dello stesso elemento dell'interfaccia utente. Se li pensiamo in questo modo, rimangono due colonne:

  1. Le barre della vita e dell'energia a sinistra

  2. I contatori delle bombe e degli smeraldi a destra

This makes it easier to nest containers: we have some margins around the border of the screen using a MarginContainer, followed by an HBoxContainer to manage our two columns. The two bars stack on top of one another inside a VBoxContainer. And we'll need a last HBoxContainer in the right column to place the bomb and emerald counters side-by-side.

../../_images/ui_gui_step_tutorial_containers_structure.png

We get a clean UI layout with only 4 containers

We will need extra containers inside the individual UI components, but this gives us the main GUI scene's structure. With this plan in place, we can jump into Godot and create our GUI.

Create the base GUI

Ci sono due possibili approcci alla GUI: possiamo progettare elementi in scene separate e metterli insieme, oppure prototipare tutto in una singola scena e scomporlo successivamente. Vi consiglio di lavorare con una singola scena, perché in questo modo potete giocare più velocemente con il posizionamento e le proporzioni dell'interfaccia utente. Una volta che ha un bell'aspetto, è possibile salvare intere sezioni dell'albero dei nodi come sotto-scene riutilizzabili. Lo faremo in un attimo.

For now, let's start with a few containers.

Create a new scene and add a MarginContainer. Select the node and name it GUI.

We want our interface to anchor to the top of the screen. Select the GUI node and click the Layout button at the top of the viewport. Select the Top Wide option. The GUI node will anchor to the top edge of its parent, the viewport by default. It will resize automatically on the vertical axis to make space for its child UI components.

Save the scene as GUI.tscn. We will put the entire GUI in it.

With the MarginContainer selected, head to the inspector and scroll down to the custom constants section. Unfold it and click the field next to each of the Margin properties. Set them all to 20 pixels. Next, add an HBoxContainer node. This one will contain our two bars on the left and separate them from the two counters on the right.

Vogliamo, ora, ordinare le barre in verticale nel HBoxContainer`. Aggiungiamo un ``VBoxContainer``come figlio di ``HBoxContainer``e rinominiamolo come ``Bars. Selezioniamo il genitore HBoxContainer nuovamente e questa volta aggiungiamo un nuovo HBoxContainer``come figlio. Chiamiamolo ``Counters. Con questi quattro contenitori abbiamo la base per la nostra interfaccia utente.

../../_images/ui_gui_containers_structure_in_godot.png

You should have 4 containers that look like this

Nota

Possiamo procedere in questo modo, dato che prima mettiamo già l'interfaccia grafica e ci prendiamo un momento per pensare a quali contenitori possiamo utilizzare. Quando segui un tutorial come questo, potrebbe sembrarti strano. Ma appena comincerai a lavorare sui veri e propri videogiochi, ti sembrerà una procedura efficiente.

Create the bars' base

Ogni barra è divisa in due sub-elementi che allinierai orizzontalmente: La barra della salute sulla sinistra e la barra della forza sulla destra. Ancora una volta il HBoxContainer``è lo strumento perfetto per questo lavoro. Seleziona il nodo ``Bars e aggiungi un nuovo HBoxContainer``al suo interno. Rinominalo come ``Bar.

L'etichetta richiede almeno tre nodi: un NinePatchRect per lo sfondo, nella parte alta dove aggiungeremo una texture a sinistra, sia HP o EP, e una Label a destra per i valori. Possiamo innestare un nodo Control ogni volta che vogliamo. Possiamo usare il NinePatchRect come genitore per altri due elementi, così da comprimerli. In generale, se al contrario vuoi usare i contenitori, così da aiutarti da organizzare i componenti dell'interfaccia giocatore. Abbiamo bisogno di un MarginContainer`più tardi per aggiungere uno spazio tra la barra della vita e gli altri indicatori. Seleziona ``Bar e aggiungi un MarginContainer. Rinominalo``Count``. Al suo interno, aggiungi tre nodi:

  1. A NinePatchRect named Background

  2. A TextureRect named Title

  3. And a Label named Number

To add the nodes as siblings, always select the Count node first.

../../_images/ui_gui_step_tutorial_bar_template_1.png

Your scene tree should look like this. We're ready to throw in some textures

La nostra scena è ancora vuota. E' il momento per inserire qualche Texture. Per caricarle, vai sulla sezione File di Sistema alla sinistra della visualizzazione. Cerca in res://assets/GUI folder.

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

You should see a list of textures that we'll use to skin our interface.

Seleziona il Background nel riquadro Scena. Nell'inspector, puoi vedere le proprietà Texture. Nel riquadro File di Sistema clicca e trascina label_HP_bg.png nello slot Texture. Sembra deformato. Il MarginContainer genitore imposterà la dimensione a 0 finché non impostiamo la dimensione minima all'interno del contenitore. Seleziona il nodo Background. Nell'inspecto, scorri fino alla sezione Rect. Imposta Min Size in (100, 40). Puoi vedere che il Background si regolerà con i suoi contenitori genitori.

Poi, seleziona Title``e trascina``label_HP.png nel suo slot Texture. Seleziona il nodo Number, clicca sul campo dopo le proprietà Text e digita 10. In questo modo, puoi vedere entrambi i nodi nella visualizzazione. Dovrebbero allinearsi nella parte alta a sinistra del loro genitore MarginContainer.

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

Se selezioni entrambi i nodi, dovresti vedere qualcosa di questo tipo

Avendo un contenitore come loro diretto genitore, non possiamo muoverli liberamente: il nodo Count ripristinerà i suoi punti di ancoraggio, la sua dimensione e posizione. Prova a muovere e ridimensionare i nodi nella viewport. Poi, seleziona una delle tre texture e premi Ctrl + Su o Ctrl + Giù per riordinarli nel riquadro Scena. Torneranno alle dimensioni e posizione precedenti.

Parent containers control the size, the scale, the margins, and the anchors of their direct children. To modify the nodes, you must nest them inside a regular Control or another UI element. We'll use the Background as a parent for the Title and Number. Select both the Title and Number, and drag and drop them onto Background.

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

By using the Background node as the two textures' parent, we take control away from the Count MarginContainer

Seleziona il Titolo e nell'Ispettore cambia la sua proprietà Modalità di stiramento a Mantieni centrato. Poi trova la categoria Rect` nell'Ispettore e cambia la proprietà Size a (50, 40) in modo che occupi solo la metà sinistra dello sfondo. Poi, seleziona il nodo Number. Nella finestra, clicca sul menu Layout e clicca su Full Rect. Il nodo si ridimensionerà per adattarsi allo Sfondo. Vai nell'Ispettore e cambia la sua proprietà Align in Right, e la proprietà Valign in Center. Il testo dovrebbe scattare al centro del bordo destro dello Sfondo. Ridimensiona il nodo orizzontalmente, in modo che prenda la metà destra dello Sfondo e ci sia un po' di imbottitura con il bordo destro.

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

Ecco come dovrebbero apparire i riquadri di delimitazione dei nodi nella finestra. Tienilo approssimato, non hai bisogno di posizionarli troppo precisamente per ora.

Replace the Label's font

The label's font is too small. We need to replace it. Select the Number node and in the Inspector, scroll down to the Control class, and find the Custom Font category. Click the field next to the Font property and click on New Dynamic Font. Click on the field again and select Edit.

Entrerai nella risorsa Dynamic Font. Apri la categoria Font` e clicca sul campo accanto a Font Data. Clicca sul pulsante Carica. Nel browser dei file, naviga fino alla cartella assets/font e fai doppio clic su Comfortaa-Bold.ttf per aprirlo. Dovresti vedere l'aggiornamento del font nella finestra. Apri la categoria delle impostazioni per cambiare la dimensione del carattere. Imposta la proprietà Size ad un valore più alto, come 24 o 28.

Ora abbiamo bisogno che la linea di base del testo, il bordo inferiore del numero, si allinei con la texture HP sulla sinistra. Per farlo, sempre nella risorsa DynamicFont, puoi modificare la proprietà Bottom sotto la categoria Extra Spacing. Aggiunge un po' di imbottitura in basso al testo. Clicca sul nodo Number nella scheda Scene per tornare alle proprietà del nodo e cambia il Valign in Bottom. Per regolare la linea di base del testo, clicca nuovamente sul campo del font sotto la categoria Custom Font e regola la proprietà Bottom fino a quando il testo si allinea con il nodo Title. Ho usato un valore di 2 pixel.

../../_images/ui_gui_step_tutorial_number_baseline.png

With a Bottom value of 2 pixels, the Number aligns with the Title

Con questo, abbiamo finito la parte più difficile della GUI. Congratulazioni! Passiamo ai nodi più semplici.

Aggiungi la barra di avanzamento

Abbiamo bisogno di un ultimo elemento per completare la nostra barra della vita: l'indicatore stesso. Godot fornisce un nodo TextureProgress che ha tutto ciò di cui abbiamo bisogno.

Select the Bar node and add a TextureProgress inside of it. Name it Gauge. In the inspector unfold the Textures section. Head to the FileSystem dock and drag and drop the lifebar_bg.png texture onto the Under slot. Do the same with the lifebar_fill.png image and drop it onto the Progress slot. Under the Range class in the inspector, change the Value property to 50 to see the gauge fill up.

Con solo cinque nodi Control, la nostra prima barra è pronta all'uso.

../../_images/ui_gui_step_tutorial_bar_final.png

Ecco, la nostra barra della vita è pronta. Quest'ultima parte è stata veloce, vero? Questo grazie alla nostra robusta configurazione del container.

Progettare i contatori di bombe e smeraldi

I contatori delle bombe e degli smeraldi sono come il nodo Count della barra. Quindi lo duplicheremo e lo useremo come modello.

Under the Bar node, select Count and press Ctrl + D to duplicate it. Drag and drop the new node under the Counters HBoxContainer at the bottom of the scene tree. You should see it resize automatically. Don't worry about this for now, we'll fix the size soon.

Rinomina il nodo Count2 in Counter. A differenza delle barre, vogliamo che il numero sia a sinistra e un'icona a destra. La configurazione è la stessa: abbiamo bisogno di uno sfondo (un NinePatchRect), il titolo e i nodi numero. Il nodo Title è un TextureRect, quindi è quello che ci serve per visualizzare l'icona. Nell'albero della scena, seleziona il nodo Title e rinominalo in Icon.

../../_images/ui_gui_step_tutorial_counter_design_1.png

Ecco come dovrebbe apparire il tuo albero dei nodi

Con il nodo Icon selezionato, nell'ispettore, scorri in alto per vedere lo slot Texture. Vai al dock FileSystem sulla sinistra e seleziona la bombs_icon.png. Trascinala e rilasciala nello slot Texture. Nella scheda Scene seleziona entrambi i nodi Icon e Number. Clicca sul menu Layout nella barra degli strumenti nella parte superiore della finestra e seleziona Full Rect. Entrambi i nodi si aggiorneranno per adattarsi alla dimensione dello Sfondo.

../../_images/ui_gui_step_tutorial_counter_design_2.png

The nodes anchor to the entire Background, but their position is off

Let's change the Number's align properties to move it to the left and center of the Background. Select the Number node, change its Align property to left and the Valign property to center. Then resize its left edge a bit to add some padding between the left edge of the Background and the text.

../../_images/ui_gui_step_tutorial_counter_design_3.png

The Number node aligned to the left and center

Per sovrapporre l'icona e lo sfondo, abbiamo bisogno di alcune modifiche. Per prima cosa, il nostro sfondo è un po' troppo alto. Questo perché è all'interno di un contenitore di margine che è controllato dal nodo GUI più in alto. Seleziona il nodo GUI in cima all'albero della scena e ridimensionalo verticalmente in modo che sia il più sottile possibile. Vedrai che l'indicatore ti impedisce di renderlo troppo piccolo. Un contenitore non può essere più piccolo della dimensione minima dei suoi figli. Anche i margini del contenitore hanno il loro peso.

Select the Icon, click the Layout menu, and select Full Rect to re-center it. We need it to anchor to the Background's right edge. Open the Layout menu again and select Center Right. Move the icon up so it is centered vertically with the Background.

../../_images/ui_gui_step_tutorial_counter_design_4.png

L'icona della bomba si fissa sul bordo destro dello sfondo. Ridimensionare il contenitore del contatore per vedere il nodo dell'icona attaccarsi al suo lato destro

Because we duplicated the Counter from the bar's Count, the Number node's font is off. Select the Number node again, head to the Font property, and click it to access the DynamicFont resource. In the Extra Spacing section, change the Bottom value to 0 to reset the font's baseline. Our counter now works as expected.

Let's make the Counters anchor to the right edge of the viewport. To do so, we need to set the Bars container take all the available horizontal space it can. Select the Bars node and scroll down to the Size Flags category. In the Horizontal category, check the Expand value. The Bars node should resize and push the counter to the right side of the screen.

../../_images/ui_gui_step_tutorial_counter_design_5.png

An expanding container eats all the space it can from its parent, pushing everything else along the way

Trasformare la barra e il contatore in componenti UI riutilizzabili

We have one bar and one counter widget. But we need two of each. We may need to change the bars' design or their functionality later on. It'd be great if we could have a single scene to store a UI element's template, and child scenes to work on variations. Godot lets us do this with Inherited Scenes.

Let's save both the Counter and the Bar branches as separate scenes that we'll reduce to create the LifeBar, the EnergyBar, the BombCounter, and the EmeraldCounter. Select the Bar HBoxContainer. Right click on it and click on Save Branch as Scene. Save the scene as Bar.tscn. You should see the node branch turn it to a single Bar node.

Suggerimento

A scene is a tree of nodes. The topmost node is the tree's root, and the children at the bottom of the hierarchy are leaves. Any node other than the root along with one or more children is a branch. We can encapsulate node branches into separate scenes, or load and merge them from other scenes into the active one. Right click on any node in the Scene dock and select Save Branch as Scene or Merge from Scene.

Poi, seleziona il nodo Counter e fai lo stesso. Fai clic destro, Save Branch as Scene e salvalo come Counter.tscn. Una nuova icona di modifica della scena appare a destra dei nodi nell'albero della scena. Clicca su quella accanto a Bar per aprire la scena corrispondente. Ridimensiona il nodo Bar in modo che il suo bounding box si adatti al suo contenuto. Per il modo in cui abbiamo nominato e posizionato i nodi Control, siamo pronti ad ereditare questo modello e creare la barra vitale. Lo stesso vale per il Counter.

../../_images/ui_gui_step_tutorial_bar_template_scene.png

Senza ulteriori modifiche, la nostra barra è pronto all'uso

Usare l'ereditarietà della scena per creare i restanti elementi

We need two bars that work the same way: they should feature a label on the left, with some value, and a horizontal gauge on the right. The only difference is that one has the HP label and is green, while the other is called EP and is yellow. Godot gives us a powerful tool to create a common base to reuse for all bars in the game: inherited scenes.

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

Le scene ereditate ci aiutano a mantenere la scena della GUI pulita. Alla fine, avremo solo contenitori e un nodo per ogni componente dell'UI.

On an inherited scene, you can change any property of every node in the inspector, aside from its name. If you modify and save the parent scene, all the inherited scenes update to reflect the changes. If you change a value in the inherited scene, it will always override the parent's property. It's useful for UIs, as they often require variations of the same elements. In general, in UI design, buttons, panels etc. share a common base style and interactions. We don't want to copy it over to all variations manually.

Un'icona di ricarica apparirà accanto alle proprietà che sovrascrivi. Fai clic su di essa per ripristinare il valore di default della scena madre.

Nota

Think of scene inheritance like the node tree, or the extends keyword in GDScript. An inherited scene does everything like its parent, but you can override properties, resources and add extra nodes and scripts to extend its functionality.

Ereditare la scena della Barra per costruire la Barra della Vita

Go to Scene -> New Inherited Scene to create a new type of Bar. Select the Bar scene and open it. You should see a new [unsaved] tab, that's like your Bar, but with all nodes except the root in grey. Press Ctrl + S (Cmd + S on macOS) to save the new inherited scene and name it LifeBar.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

Non puoi rinominare i nodi grigi. Questo ti dice che hanno una scena madre

First, rename the root or top level node to LifeBar. We always want the root to describe exactly what this UI component is. The name differentiates this bar from the EnergyBar we'll create next. The other nodes inside the scene should describe the component's structure with broad terms, so it works with all inherited scenes. Like our TextureProgress and Number nodes.

Nota

If you've ever done web design, it's the same spirit as working with CSS: you create a base class, and add variations with modifier classes. From a base button class, you'll have button-green and button-red variations for the user to accept and refuse prompts. The new class contains the name of the parent element and an extra keyword to explain how it modifies it. When we create an inherited scene and change the name of the top level node, we're doing the same thing.

Progettare la Barra dell'Energia

We already setup the LifeBar's design with the main Bar scene. Now we need the EnergyBar.

Let's create a new inherited scene, and once again select the Bar.tscn scene and open it. Double-click on the Bar root node and rename it to EnergyBar. Save the new scene as EnergyBar.tscn. We need to replace the HP texture with EP one, and to change the textures on the gauge.

Head to the FileSystem dock on the left, select the Title node in the Scene tree and drag and drop the label_EP.png file onto the texture slot. Select the Number node and change the Text property to a different value like 14.

You'll notice the EP texture is smaller than the HP one. We should update the Number's font size to better fit it. A font is a resource. All the nodes in the entire project that use this resource will be affected by any property we change. You can try to change the size to a huge value like 40 and switch back to the LifeBar or the Bar scenes. You will see the text increased in size.

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

Se cambiamo la risorsa font, tutti i nodi che la usano sono influenzati

To change the font size on this node only, we must create a copy of the font resource. Select the Number node again and click on the wrench and screwdriver icon on the top right of the inspector. In the drop-down menu, select the Make Sub-Resources Unique option. Godot will find all the resources this node uses and create unique copies for us.

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

Usare questa opzione per creare copie uniche delle risorse per un nodo

Suggerimento

When you duplicate a node from the Scene tree, with Ctrl + D (Cmd + D on macOS), it shares its resources with the original node. You need to use Make Sub-Resources Unique before you can tweak the resources without affecting the source node.

Scroll down to the Custom Font section and open Font. Lower the Size to a smaller value like 20 or 22. You may also need to adjust the Bottom spacing value to align the text's baseline with the EP label on the left.

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

The EP Count widget, with a smaller font than its HP counterpart

Now, select the TextureProgress node. Drag the energy_bar_bg.png file onto the Under slot and do the same for energy_bar_fill.png and drop it onto the Progress texture slot.

You can resize the node vertically so that its bounding rectangle fits the gauge. Do the same with the Count node until its size aligns with that of the bar. Because the minimal size of TextureProgress is set based on its textures, you won't be able to downsize the Count node below that. That is also the size the Bar container will have. You may downscale this one as well.

Last but not least, the Background container has a minimum size that makes it a bit large. Select it and in the Rect section, change the Min Size property down to 80 pixels. It should resize automatically and the Title and Number nodes should reposition as well.

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

The Count looks better now it's a bit smaller

Suggerimento

The Count node's size affects the position of the TextureProgress. As we'll align our bars vertically in a moment, we're better off using the Counter's left margin to resize our EP label. This way both the EnergyBar's Count and the LifeBar's Count nodes are one hundred pixels wide, so both gauges will align perfectly.

Prepare the bomb and emerald counters

Let us now take care of the counters. Go to Scene -> New Inherited Scene and select the Counter.tscn as a base. Rename the root node as BombCounter too. Save the new scene as BombCounter.tscn. That's all for this scene.

../../_images/ui_gui_step_tutorial_design_counters_1.png

The bomb counter is the same as the original Counter scene

Go to Scene -> New Inherited Scene again and select Counter.tscn once more. Rename the root node EmeraldCounter and save the scene as EmeraldCounter.tscn. For this one, we mainly need to replace the bomb icon with the emerald icon. In the FileSystem tab, drag the emeralds_icon.png onto the Icon node's Texture slot. Icon already anchors to the right edge of the Background node so we can change its position and it will scale and reposition with the EmeraldCounter container. Shift the emerald icon a bit to the right and down. Use the Arrow Keys on the keyboard to nudge its position. Save, and we're done with all the UI elements.

../../_images/ui_gui_step_tutorial_design_counters_2.png

The emerald counter should look something like this

Add the UI components to the final GUI

Time to add all the UI elements to the main GUI scene. Open the GUI.tscn scene again, and delete the Bar and Counter nodes. In the FileSystem dock, find the LifeBar.tscn and drag and drop it onto the Bars container in the scene tree. Do the same for the EnergyBar. You should see them align vertically.

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

The LifeBar and the EnergyBar align automatically

Now, drag and drop the BombCounter.tscn and EmeraldCounter.tscn scenes onto the Counters node. They'll resize automatically.

../../_images/ui_gui_step_tutorial_assemble_final_gui_2.png

The nodes resize to take all the available vertical space

To let the EmeraldCounter and BombCounter use the size we defined in Counter.tscn, we need to change the Size Flags on the Counters container. Select the Counters node and unfold the Size Flags section in the Inspector. Uncheck the Fill tag for the Vertical property, and check Shrink Center so the container centers inside the HBoxContainer.

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

Now both counters have a decent size

Suggerimento

Change the Min Size property of the Counters container to control the height of the counters' background.

We have one small issue left with the EP label on the EnergyBar: the 2 bars should align vertically. Click the icon next to the EnergyBar node to open its scene. Select the Count node and scroll down to the Custom Constants section. Add a Margin Left of 20. In the Rect section set the node's Min Size back to 100, the same value as on the LifeBar. The Count should now have some margin on the left. If you save and go back to the GUI scene, it will be aligned vertically with the LifeBar.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

The 2 bars align perfectly

Nota

We could have set up the EnergyBar this way a few moments ago. But this shows you that you can go back to any scene anytime, tweak it, and see the changes propagate through the project!

Place the GUI onto the game's mockup

To wrap up the tutorial we're going to insert the GUI onto the game's mockup scene.

Head to the FileSystem dock and open LevelMockup.tscn.

Drag-and-drop the GUI.tscn scene right below the bg node and above the Characters. The GUI will scale to fit the entire viewport. Head to the Layout menu and select the Center Top option so it anchors to the top edge of the game window. Then resize the GUI to make it as small as possible vertically. Now you can see how the interface looks in the context of the game.

Congratulations for getting to the end of this long tutorial. You can find the final project here: ui_gui_design.zip.

../../_images/ui_gui_design_final_result.png

Il risultato finale

Nota

A final note about Responsive Design. If you resize the GUI, you'll see the nodes move, but the textures and text won't scale. The GUI also has a minimum size, based on the textures inside of it. In games, we don't need the interface to be as flexible as that of a website. You almost never want to support both landscape and portrait screen orientations. It's one or the other. In landscape orientation, the most common ratios range from 4:3 to 16:9. They are close to one another. That's why it's enough for the GUI elements to only move horizontally when we change the window size.