Projetar a GUI

Agora que você aprendeu o básico, vamos ver como construir uma Interface de Jogo do Usuário (Game User Interface - GUI) com componentes de interface do usuário reutilizáveis: uma barra de vida, uma barra de energia e contadores de bombas e esmeraldas. No final deste tutorial, você terá uma GUI de jogo, pronta para controlar com GDscript ou VisualScript:

../../_images/ui_gui_design_final_result.png

O resultado final

Você também aprenderá a:

  1. Crie componentes de interface do usuário flexíveis
  2. Usar a herança de cena
  3. Construir uma interface com o usuário complexa

Baixe os arquivos do projeto: ui_gui_design.zip e extraia o arquivo. Importe o projeto start/ no Godot para seguir este tutorial. A pasta end/ contém o resultado final.

Nota

Você pode assistir a este tutorial em um vídeo no Youtube.

Desmembrando a interface do usuário

Vamos desmembrar a interface do usuário final e planejar os contêineres que usaremos. Como em Faça o design de uma tela de menu, ele começa com um MarginContainer. Então, podemos ver até três colunas:

  1. Os contadores de vida e energia à esquerda
  2. As barras de vida e energia
  3. Os contadores de bombas e esmeraldas à direita

Mas o rótulo da barra e o medidor são duas partes do mesmo elemento da interface do usuário. Se pensarmos neles desta maneira, ficamos com duas colunas:

  1. As barras de vida e energia à esquerda
  2. Os contadores de bombas e esmeraldas à direita

Isto torna mais fácil aninhar contêineres: nós temos algumas margens ao redor da borda da tela usando um MarginContainer, seguido por um HBoxContainer para gerenciar nossas duas colunas. As duas barras são empilhadas umas em cima das outras dentro de um VBoxContainer. E precisaremos de um último HBoxContainer na coluna da direita para colocar os contadores de bombas e esmeraldas lado-a-lado.

../../_images/ui_gui_step_tutorial_containers_structure.png

Ficamos com um layout de interface limpo com apenas 4 contêineres

Vamos precisar de contêineres extras dentro dos componentes individuais da UI, mas isso nos dá a estrutura da cena principal da GUI. Com este plano, podemos entrar no Godot e criar nossa GUI.

Crie a GUI base

Existem duas abordagens possíveis para a GUI: podemos projetar elementos em cenas separadas e colocá-los juntos, ou prototipar tudo em uma única cena e dividi-la depois. Eu recomendo trabalhar com uma única cena, já que você pode brincar com a colocação da sua interface do usuário e proporções mais rapidamente dessa maneira. Quando estiver bom, você pode salvar seções inteiras da árvore de nós como sub-cenas reutilizáveis. Nós faremos isso em um momento.

Por enquanto, vamos começar com alguns contêineres.

Crie uma nova cena e adicione um MarginContainer. Selecione o nó e nomeie-o como GUI.

Queremos que nossa interface ancore no topo da tela. Selecione o nó `` GUI`` e clique no botão Layout na parte superior da janela de exibição. Selecione a opção “Top Wide”. O nó `` GUI`` irá ancorar na borda superior de seu pai, a janela de exibição por padrão. Ele será redimensionado automaticamente no eixo vertical para criar espaço para seus componentes de UI filho.

Salve a cena como GUI.tscn. Nós vamos colocar a GUI inteira dentro dela.

Com o MarginContainer selecionado, vá para o inspetor e desça até a seção de constantes personalizadas. Abra-o e clique no campo ao lado de cada uma das propriedades Margin. Defina todos eles para pixels 20. Em seguida, adicione um nó HBoxContainer. Este conterá nossas duas barras à esquerda e as separará dos dois contadores à direita.

Queremos empilhar as barras verticalmente dentro do HBoxContainer. Adicionae um VBoxContainer como filho de HBoxContainer e nomeie-o Bars. Selecione o pai HBoxContainer novamente e desta vez, adicione outro HBoxContainer como filho dele. Chame de “Counters”. Com esses quatro contêineres, temos a base para nossa cena de GUI.

../../_images/ui_gui_containers_structure_in_godot.png

Você deve ter 4 contêineres parecidos com este

Nota

Podemos trabalhar dessa maneira porque primeiro desmembramos o design da interface do usuário e levamos alguns momentos para pensar nos recipientes que usaríamos. Quando você segue um tutorial como esse, pode parecer estranho. Mas quando você estiver trabalhando em jogos reais, verá que é um fluxo de trabalho eficiente.

Crie as barras de base

Cada barra é dividida em dois subelementos que se alinham horizontalmente: o rótulo com a contagem de integridade à esquerda e o indicador à direita. Mais uma vez, o HBoxContainer é a ferramenta perfeita para o trabalho. Selecione o nó Bars e adicione um novo HBoxContainer dentro dele. Nomeie-o Bar.

O rótulo em si requer pelo menos três nós: um NinePatchRect para o fundo, em cima do qual vamos adicionar uma textura à esquerda, HP ou EP, e Label à direita para o valor. Nós podemos aninhar os nós Control como quisermos. Nós poderíamos usar o NinePatchRect como pai para os outros dois elementos, já que os engloba. Em geral, você deseja usar contêineres, pois sua função é ajudar a organizar os componentes da interface do usuário. Vamos precisar de um MarginContainer mais tarde para adicionar algum espaço entre a contagem de vida e o medidor. Selecione a Bar e adicione um MarginContainer. Nomeie-o como contagem. Dentro dele, adicione três nós:

  1. Um NinePatchRect chamado Background
  2. Um TextureRect chamado Title
  3. E um Label chamado Number

Para adicionar os nós como irmãos, sempre selecione primeiro o nó Count.

../../_images/ui_gui_step_tutorial_bar_template_1.png

Sua árvore de cenas deve ficar assim. Estamos prontos para jogar algumas texturas

Nossa cena ainda está vazia. É hora de jogar algumas texturas. Para carregar as texturas, vá para a aba FileSystem à esquerda da viewport. Navegue até a pasta res://assets/GUI.

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

Você deve ver uma lista de texturas que usaremos para aplicar a nossa interface.

Selecione o Background na seção Scene. No Inspetor, você deve ver uma propriedade Texture. Na aba FileSystem, clique e arraste label_HP_bg.png para o slot de Texture. Ele fica espremido. O MarginContainer pai forçará seu tamanho a 0 até forçarmos que os elementos dentro do contêiner tenham um tamanho mínimo. Selecione o nó Background. No inspetor, role para baixo até a seção Rect. Defina o Min Size para (100, 40). Você deve ver o redimensionamento do Background junto com seus contêineres pai.

Em seguida, selecione o Title e arraste e solte label_HP.png em seu slot Texture. Selecione o nó Number, clique no campo ao lado da propriedade Text e digite 10. Dessa forma, podemos ver os dois nós na viewport. Eles devem se empilhar no canto superior esquerdo de seu pai MarginContainer.

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

Se você selecionar ambos os nós, você deve ver algo como isto

Como eles têm um contêiner como seu pai direto, nós não podemos movê-los livremente: o nó Count irá sempre resetar suas âncoras, seu tamanho e posição. Tente mover e redimensionar os nós na viewport. Em seguida, selecione uma das três texturas e pressione Ctrl Up ou Ctrl Down para reordená-las no dock de cena. Eles vão voltar ao seu tamanho e posição anteriores.

Contêineres pai controlam o tamanho, a escala, as margens e as âncoras de seus filhos diretos. Para modificar os nós, você deve aninhá-los dentro de um controle regular ou outro elemento da interface do usuário. Vamos usar o Background como pai para o Title e Number. Selecione o Title e Number, arraste-os e solte-os no Background.

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

Usando o nó Background como o pai das duas texturas, retiramos o controle do Count MarginContainer

Select the Title and in the Inspector, change its Stretch Mode property to Keep Centered. Next find the Rect category in the Inspector and change the Size property to (50, 40) so it only takes the left half of the background. Next, select the Number node. In the viewport, click the Layout menu and click Full Rect. The node will resize to fit the Background. Head to the Inspector and change its Align property to Right, and the VAlign property to Center. The text should snap to the center of the Background’s right edge. Resize the node horizontally, so it takes the right half of the Background and there’s a bit of padding with the right edge.

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

Veja como as caixas delimitadoras dos nós devem aparecer na viewport. Mantenha-o grosseiro, você não precisa colocá-los com muita precisão por agora.

Substitua a fonte do Rótulo

A fonte do rótulo é muito pequena. Precisamos substituí-la. Selecione o nó Number e no Inspetor, desça até a classe Control e encontre a categoria Custom Font. Clique no campo ao lado da propriedade Font e clique em New Dynamic Font. Clique no campo novamente e selecione Editar.

Você entrará no recurso Dynamic Font. Abra a categoria Font e clique no campo próximo a Font Data. Clique no botão Load. No navegador de arquivos, navegue até a pasta assets/font e dê um duplo clique em Comfortaa-Bold.ttf para abri-lo. Você deve ver a atualização da fonte na viewport. Abra a categoria de configurações para alterar o tamanho da fonte. Configure a propriedade Size para um valor mais alto, como 24 ou 28.

Agora precisamos da linha de base do texto, a borda inferior do número, para alinhar com a textura da HP à esquerda. Para fazer isso, ainda no recurso DynamicFont, você pode ajustar a propriedade Bottom sob a categoria Extra Spacing. Adicione um preenchimento inferior ao texto. Clique no nó Number na aba Scene para retornar às propriedades do nó e mudar o VAlign para Bottom. Para ajustar a linha de base do texto, clique no campo da fonte sob a categoria Custom Font novamente e ajuste a propriedade Bottom até que o texto se alinhe com o nó Title. Eu usei um valor de 2 pixels.

../../_images/ui_gui_step_tutorial_number_baseline.png

Com um valor inferior de 2 pixels, o número alinha com o título

Com isso, terminamos a parte mais difícil da GUI. Parabéns! Vamos seguir para os nós mais simples.

Adicione a barra de progressão

Precisamos de um último elemento para completar nossa barra de vida: o próprio medidor. O Godot vem com um nó TextureProgress que tem tudo que precisamos.

Selecione o nó Bar e adicione um TextureProgress dentro dele. Nomeie-o Gauge. No inspetor, abra a seção texturas. Dirija-se à aba FileSystem e arraste e solte a textura lifebar_bg.png no slot Under. Faça o mesmo com a imagem lifebar_fill.png e solte-a no slot Progress. Sob a classe Range no inspetor, mude a propriedade Value para 50 para ver o medidor se encher.

Com apenas cinco nós Control, nossa primeira barra está pronta para uso.

../../_images/ui_gui_step_tutorial_bar_final.png

É isso, nossa barra de vida está pronta. Esta última parte foi rápida, não foi? Isso graças à nossa configuração robusta de contêineres.

Design the bomb and emerald counters

The bomb and emerald counters are like the bar’s Count node. So we’ll duplicate it and use it as a template.

Sob o nó Bar, selecione Count e pressione Ctrl D para duplicá-lo. Arraste e solte o novo nó sob o Counters HBoxContainer na parte inferior da árvore de cena. Você deve vê-lo redimensionar automaticamente. Não se preocupe com isso por enquanto, vamos corrigir o tamanho em breve.

Rename the Count2 node to Counter. Unlike the bars, we want the number to be on the left, and an icon to sit on the right. The setup is the same: we need a background (a NinePatchRect), the title, and the number nodes. The Title node is a TextureRect, so it’s what we need to display the icon. In the scene tree, select the Title node, and rename it to Icon.

../../_images/ui_gui_step_tutorial_counter_design_1.png

Veja como sua árvore de nó deve parecer até agora

Com o nó Icon selecionado, no inspetor, role até o topo para ver o slot Texture. Dirija-se à doca FileSystem à esquerda e selecione o bombs_icon.png. Arraste e solte no slot Texture. Na aba Scene, selecione os nós Icon e Number. Clique no menu Layout na barra de ferramentas na parte superior da viewport e selecione Full Rect. Ambos os nós serão atualizados para se ajustarem ao tamanho do Background.

../../_images/ui_gui_step_tutorial_counter_design_2.png

Os nós ancoram em todo o plano de fundo, mas sua posição está desativada

Vamos alterar as propriedades de alinhamento do Number para movê-lo para a esquerda e para o centro do Background. Selecione o nó Number, altere sua propriedade Align para a esquerda e a propriedade VAlign para o centro. Em seguida, redimensione um pouco a borda esquerda para adicionar um preenchimento entre a borda esquerda do Background e o texto.

../../_images/ui_gui_step_tutorial_counter_design_3.png

O nó Number alinhado à esquerda e ao centro

Para sobrepor o ícone e o fundo, precisamos de alguns ajustes. Primeiro, nosso background está um pouco alto demais. É porque está dentro de um contêiner de margem que é controlado pelo nó da interface superior. Selecione o nó GUI na parte superior da árvore de cena e diminua o tamanho verticalmente para que fique o mais fino possível. Você verá que o medidor impede que você o torne muito pequeno. Um contêiner não pode ser menor que o tamanho mínimo de seus filhos. As margens do contêiner também pesam.

Selecione o ícone, clique no menu Layout e selecione Full Rect para voltar a centralizá-lo. Precisamos que ele ancore a borda direita do Background. Abra o menu Layout novamente e selecione Center Right. Mova o ícone para cima de modo que ele esteja centralizado verticalmente com o Background.

../../_images/ui_gui_step_tutorial_counter_design_4.png

O ícone da bomba ancora na borda direita do Background. Redimensione o contêiner Counter para ver o nó Ícone ficar no lado direito

Como duplicamos o Counter do Count da barra, a fonte do nó Number está desativada. Selecione o nó Number novamente, vá para a propriedade Font e clique nele para acessar o recurso DynamicFont. Na seção Extra Spacing, altere o valor Bottom para 0 para redefinir a linha de base da fonte. Nosso contador agora funciona como esperado.

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

Um contêiner em expansão consome todo o espaço possível de seu pai, empurrando todo o resto ao longo do caminho

Transforme a barra e o contador em componentes de interface do usuário reutilizáveis

Temos uma barra e um widget contador. Mas precisamos de dois de cada um. Talvez seja necessário alterar o design das barras ou sua funcionalidade posteriormente. Seria ótimo se pudéssemos ter uma única cena para armazenar o modelo de um elemento de interface do usuário e cenas filhas para trabalhar com variações. O Godot nos permite fazer isso com Cenas Herdadas.

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.

Dica

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.

Then, select the Counter node and do the same. Right click, Save Branch as Scene, and save it as Counter.tscn. A new edit scene icon appears to the right of the nodes in the scene tree. Click on the one next to Bar to open the corresponding scene. Resize the Bar node so that its bounding box fits its content. The way we named and placed the Control nodes, we’re ready to inherit this template and create the life bar. It’s the same for the Counter.

../../_images/ui_gui_step_tutorial_bar_template_scene.png

Sem alterações extras, nossa Barra está pronta para uso

Use scene inheritance to create the remaining elements

Precisamos de duas barras que funcionem da mesma maneira: elas devem ter uma etiqueta à esquerda, com algum valor, e uma barra horizontal à direita. A única diferença é que um tem o rótulo HP e é verde, enquanto o outro tem o rótulo HP e é amarelo. O Godot nos oferece uma ferramenta poderosa para criar uma base comum para reutilizar todas as barras do jogo: **cenas herdadas **.

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

Cenas herdadas nos ajudam a manter a cena da GUI limpa. No final, teremos apenas contêineres e um nó para cada componente da interface do usuário.

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.

Um ícone de recarregamento aparecerá ao lado das propriedades que você substituir. Clique nele para redefinir o valor para o padrão da cena pai.

Nota

Pense na herança de cena como a árvore de nós ou como a palavra-chave extends no GDScript. Uma cena herdada faz tudo como seu pai, mas você pode substituir propriedades, recursos e adicionar nós e scripts extras para estender sua funcionalidade.

Herdar a Cena da Barra para construir a LifeBar

Vá para Scene -> New Inherited Scene para criar um novo tipo de Bar. Selecione a cena Bar e abra-a. Você deve ver uma nova aba [não-salva], que é como a sua Bar, mas com todos os nós exceto a raiz em cinza. Pressione Meta + S para salvar a nova cena herdada e nomeie-a como LifeBar.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

Você não pode renomear nós acinzentados. Isso quer dizer que eles têm uma cena pai

Primeiro, renomeie a raiz ou o nó de nível superior para LifeBar. Nós sempre queremos que a raiz descreva exatamente o que é esse componente da interface do usuário. O nome diferencia esta barra do EnergyBar que criaremos em seguida. Os outros nós dentro da cena devem descrever a estrutura do componente com termos gerais, para que funcione com todas as cenas herdadas. Como nossos nós TextureProgress e Number.

Nota

Se você já fez web design, é o mesmo espírito que trabalhar com CSS: você cria uma classe base e adiciona variações com classes modificadoras. A partir de uma classe de botão base, você terá variações de botão verde e botão vermelho para o usuário aceitar e recusar prompts. A nova classe contém o nome do elemento pai e uma palavra-chave extra para explicar como ela é modificada. Quando criamos uma cena herdada e mudamos o nome do nó de nível superior, estamos fazendo a mesma coisa.

Projete o EnergyBar

Nós já configuramos o design do LifeBar com a cena principal Bar. Agora precisamos do EnergyBar.

Vamos criar uma nova cena herdada e, mais uma vez, selecionar a cena Bar.tscn e abri-la. Clique duas vezes no nó raiz Bar e renomeie-o para EnergyBar. Salve a nova cena como EnergyBar.tscn. Precisamos substituir a textura HP por uma EP e mudar as texturas no medidor.

Dirija-se à aba FileSystem à esquerda, selecione o nó Title na árvore Scene e arraste e solte o arquivo label_EP.png no slot de texturas. Selecione o nó Number e mude a propriedade Text para um valor diferente como 14.

Você notará que a textura do EP é menor que a da HP. Devemos atualizar o tamanho da fonte do Number para melhor ajustá-lo. Uma fonte é um recurso. Todos os nós em todo o projeto que usam esse recurso serão afetados por qualquer propriedade que mudarmos. Você pode tentar mudar o tamanho para um valor enorme como 40 e voltar para as cenas LifeBar ou Bar. Você verá o texto aumentar de tamanho.

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

Se alterarmos o recurso de fonte, todos os nós que a usam serão afetados

Para alterar o tamanho da fonte apenas neste nó, devemos criar uma cópia do recurso de fonte. Selecione o nó Number novamente e clique no ícone de chave inglesa e chave de fenda no canto superior direito do inspetor. No menu suspenso, selecione a opção Tornar Únicos os Sub-recursos. O Godot encontrará todos os recursos que este nó usa e criará cópias exclusivas para nós.

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

Use esta opção para criar cópias exclusivas dos recursos para um nó

Dica

Quando você duplica um nó da árvore Scene, com Meta+D, ele compartilha seus recursos com o nó original. Você precisa usar o Make Sub-Resources Unique antes de poder ajustar os recursos sem afetar o nó de origem.

Role para baixo até a seção Custom Font e abra Font. Abaixe o Size para um valor menor como 20 ou 22. Você também pode precisar ajustar o valor de espaçamento Bottom para alinhar a linha de base do texto com o rótulo EP à esquerda.

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

O widget Count do EP, com uma fonte menor que a do HP

Agora, selecione o nó TextureProgress. Arraste o arquivo energy_bar_bg.png para o slot Under e faça o mesmo para energy_bar_fill.png e solte-o no slot de textura Progress.

Você pode redimensionar o nó verticalmente para que seu retângulo delimitador se ajuste ao medidor. Faça o mesmo com o nó Count até que seu tamanho se alinhe com o da barra. Como o tamanho mínimo de TextureProgress é definido com base em suas texturas, você não será capaz de diminuir o tamanho do nó Count abaixo dele. Esse também é o tamanho que o contêiner Bar terá. Você pode diminuí-lo também.

Por último, mas não menos importante, o contêiner Background tem um tamanho mínimo que o torna um pouco grande. Selecione-o e na seção Rect, altere a propriedade Min Size para os pixels 80. Ele deve ser redimensionado automaticamente e os nós Title e Number devem ser reposicionados também.

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

O Count parece melhor agora, é um pouco menor

Dica

O tamanho do nó Count afeta a posição do TextureProgress. Como alinharemos nossas barras verticalmente em em seguida, é melhor usarmos a margem esquerda do Count para redimensionar o rótulo do EP. Dessa forma, os nós Count do EnergyBar e Count do LifeBar têm cem pixels de largura, portanto, os dois medidores se alinharão perfeitamente.

Prepare the bomb and emerald counters

Vamos agora cuidar dos contadores. Vá para Scene -> New Inherited Scene e selecione o Counter.tscn como base. Renomeie o nó raiz como BombCounter também. Salve a nova cena como BombCounter.tscn. Isso é tudo para esta cena.

../../_images/ui_gui_step_tutorial_design_counters_1.png

O contador da bomba é o mesmo que a cena do Counter original

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 little 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

Adicione os componentes da interface do usuário à GUI final

Hora de adicionar todos os elementos da interface do usuário à cena principal da GUI. Abra a cena GUI.tscn novamente, e apague os nós Bar e Counter. Na aba FileSystem, encontre o LifeBar.tscn e arraste-o e solte-o no contêiner Bars na árvore da cena. Faça o mesmo para o EnergyBar. Você deve vê-los alinhar verticalmente.

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

A LifeBar e a EnergyBar se alinham automaticamente

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

Os nós são redimensionados para ocupar todo o espaço vertical disponível

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

Agora ambos os contadores têm um tamanho decente

Dica

Altere a propriedade Min Size do contêiner Counters para controlar a altura do plano de fundo dos contadores.

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

As duas barras alinham-se perfeitamente

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!

Coloque a GUI no protótipo do jogo

Para finalizar o tutorial, vamos inserir a GUI na cena do protótipo do jogo.

Vá para a aba FileSystem e abra LevelMockup.tscn.

Arraste e solte a cena GUI.tscn logo abaixo do nó bg e acima dos Characters. A GUI será dimensionada para se ajustar à viewport inteira. Dirija-se ao menu Layout e selecione a opção Center Top para ancorar na borda superior da janela do jogo. Em seguida, redimensione a GUI para torná-la o menor possível na vertical. Agora você pode ver como a interface se parece no contexto do jogo.

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

O resultado final

Nota

Uma nota final sobre o Design Responsivo. Se você redimensionar a GUI, verá os nós se moverem, mas as texturas e o texto não serão dimensionadas. A GUI também tem um tamanho mínimo, baseado nas texturas dentro dela. Nos jogos, não precisamos que a interface seja tão flexível quanto a de um website. Você quase nunca precisa suportar ambas as orientações de paisagem e retrato. É uma ou outra. Na orientação de paisagem, as proporções mais comuns variam de 4:3 a 16:9. Elas estão próximas uma da outra. É por isso que é suficiente que os elementos da GUI apenas se movam horizontalmente quando alteramos o tamanho da janela.