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, bombas e contadores de 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 janela de exibição. 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

Selecione o Title e no Inspetor, mude sua propriedade Stretch Mode para Keep Centered. Em seguida, encontre a categoria Rect no Inspetor e altere a propriedade Size para (50, 40), de modo que ela só ocupe a metade esquerda do background. Em seguida, selecione o nó Number. No janela de exibição, clique no menu Layout e clique em Full Rect. O nó será redimensionado para caber no Background. Dirija-se ao Inspetor e altere sua propriedade Align para Right, e a propriedade Valign para Center. O texto deve se encaixar no centro da borda direita do Background. Redimensione o nó horizontalmente para que ele pegue a metade direita do Background e tenha um pouco de preenchimento com a borda direita.

../../_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 que a linha de base do texto, a borda inferior do número, alinhe com a textura de HP à esquerda. Para fazer isso, ainda no recurso DynamicFont, você pode ajustar a propriedade Bottom sob a categoria Extra Spacing. Ela adiciona preenchimento inferior ao texto. Clique no nó Number na aba Cena para retornar às propriedades do nó e mude 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.

Projetar os contadores de bombas e esmeraldas

Os contadores de bomba e esmeraldas são como o nó Count da barra. Então vamos duplicá-lo e usá-lo como modelo.

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.

Renomeie o nó Count2 para Counter. Ao contrário das barras, queremos que o número esteja à esquerda e um ícone fique à direita. A configuração é a mesma: precisamos de um background (um NinePatchRect), o título, e os nós de número. O nó Title é um TextureRect, então é o que precisamos para exibir o ícone. Na árvore de cena, selecione o nó Title e renomeie para 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

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

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.

Vamos fazer com que os Counters se encaixem na borda direita do viewport. Para isso, definiremos o contêiner Bars para expandir e ocupar todo o espaço horizontal. Selecione o nó Bars e role para baixo até a categoria Size Flags. Na categoria Horizontal, verifique o valor Expand. O nó Bars deve redimensionar e empurrar o contador para a direita da tela.

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

Vamos salvar os ramos Counter e Bar como cenas separadas que serão reduzidas para criar o LifeBar, o EnergyBar, o BombCounter e o EmeraldCounter. Selecione o HBoxContainer Bar. Clique com o botão direito nele e clique em Salvar Ramo como Cena. Salve a cena como Bar.tscn. Você deve ver o ramo virar um único nó Bar.

Dica

Uma cena é uma árvore de nós. O nó mais alto é a raiz da árvore e os filhos abaixo na hierarquia são folhas. Qualquer nó diferente da raiz junto com mais um filho é uma branch (ramo). Podemos encapsular ramificações de nós em cenas separadas ou carregá-las e mesclá-las de outras cenas na cena ativa. Clique com o botão direito em qualquer nó na aba Cena e selecione Salvar Ramo como Cena ou Fundir a Partir de Cena.

Então, selecione o nó Counter e faça o mesmo. Clique com o botão direito, Salvar Ramo como Cena, e salve-a como Counter.tscn. Um novo ícone de editar cena aparece à direita dos nós na árvore da cena. Clique no ícone próximo ao Bar para abrir a cena correspondente. Redimensione o nó Bar para que sua caixa delimitadora se ajuste ao seu conteúdo. Da maneira como nomeamos e colocamos os nós de Controle, estamos prontos para herdar esse modelo e criar a barra de vida. Mesma coisa para o Counter.

../../_images/ui_gui_step_tutorial_bar_template_scene.png

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

Use herança de cena para criar os elementos restantes

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.

Em uma cena herdada, você pode alterar qualquer propriedade de cada nó no inspetor, além de seu nome. Se você modificar e salvar a cena pai, todas as cenas herdadas serão atualizadas para refletir as alterações. Se você alterar um valor na cena herdada, ele sempre substituirá a propriedade do pai. É útil para interfaces de usuário, pois elas geralmente exigem variações dos mesmos elementos. Em geral, em design de interfaces de usuário, botões, painéis, etc. compartilham um estilo de base e interações em comum. Não queremos copiá-lo para todas as variações manualmente.

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 Ctrl+ S``(`Cmd + S` para macOS) 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 Ctrl+D``(`Cmd + D` para macOS), ele compartilha seus recursos com o 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 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 os contadores de bombas e esmeraldas

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

Vá para Cena -> Nova Cena Herdada novamente e selecione Counter.tscn mais uma vez. Renomeie o nó raiz EmeraldCounter e salve a cena como EmeraldCounter.tscn. Para este, precisamos principalmente substituir o ícone da bomba pelo ícone de esmeralda. Na aba Arquivos, arraste o emeralds_icon.png para o slot Texture do nó Icon. O Icon já se ancora na borda direita do nó Background``para que possamos mudar sua posição e ele irá escalonar e reposicionar com o contêiner ``EmeraldCounter. Mude o ícone de esmeralda um pouco para a direita e para baixo. Use as setas do teclado para ajustar sua posição. Salve, e concluímos todos os elementos da interface do usuário.

../../_images/ui_gui_step_tutorial_design_counters_2.png

O contador de esmeraldas deve ficar assim

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

Agora, arraste e solte as cenas BombCounter.tscn e EmeraldCounter.tscn no nó Counters. Eles serão redimensionados automaticamente.

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

Para permitir que EmeraldCounter e BombCounter usem o tamanho que definimos em Counter.tscn, precisamos alterar os Size Flags no contêiner Counters. Selecione o nó Counters e abra a seção Size Flags no Inspetor. Desmarque a tag Fill para a propriedade Vertical e marque Shrink Center para que o contêiner centralize dentro do 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.

Temos um pequeno problema com o rótulo EP na EnergyBar: as duas barras devem ser alinhadas verticalmente. Clique no ícone ao lado do nó EnergyBar para abrir sua cena. Selecione o nó Count e role para baixo até a seção Custom Constant. Adicione uma Margin Left de 20. Na seção Rect, configure o Min Size do nó de volta para 100, o mesmo valor que na LifeBar. O Count agora deve ter alguma margem à esquerda. Se você salvar e voltar para a cena GUI, ela estará alinhada verticalmente com a LifeBar.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

As duas barras alinham-se perfeitamente

Nota

Poderíamos ter configurado a EnergyBar dessa maneira já desde antes. Mas isso mostra que você pode voltar a qualquer cena a qualquer momento, ajustá-la e ver as mudanças se propagarem pelo projeto!

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.

Parabéns por chegar ao final deste longo tutorial. Você pode encontrar o projeto final aqui: ui_gui_design.zip.

../../_images/ui_gui_design_final_result.png

O resultado final

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.