Design de interfaces com os nós de Controle

Computer displays, mobile phones, and TV screens come in all shapes and sizes. To ship a game, you’ll need to support different screen ratios and resolutions. It can be hard to build responsive interfaces that adapt to all platforms. Thankfully, Godot comes with robust tools to design and manage a responsive User Interface.

../../_images/godot_editor_ui.png

O editor do Godot é feito com o framework de interface do usuário da engine

Este guia irá ajudá-lo com o design da interface do usuário. Você vai aprender:

  • Os cinco nós de controle mais úteis para criar sua interface de jogos
  • Como trabalhar com a âncora de elementos da interface do usuário
  • Como colocar e organizar eficientemente sua interface de usuário usando contêineres
  • Os cinco contêineres mais comuns (mais tarde, você poderá ler mais sobre contêineres na página de documentação GUI Containers).

Para aprender como controlar a interface e conectá-la a outros scripts, leia: ref:Crie sua primeira interface de jogo em Godot <doc_ui_game_user_interface>.

Para desenhar sua UI, você irá usar os nós de Controle. Eles são os nós com ícones verdes no editor. Existem dezenas deles, para criar qualquer coisa desde barras de vida até aplicações complexas. O próprio editor do Godot é construído usando nós Controle.

Os nós de Controle possuem propriedades exclusivas que permitem que eles funcionem bem uns com os outros. Outros nós visuais, como Node2D e Sprite não possuem estas capacidades. Então para facilitar sua vida use os nós de Controle sempre que possível quando for construir suas UIs.

Todos os nós de controle compartilham as mesmas propriedades principais:

  1. Âncora (anchor)
  2. Retângulo delimitador (Bounding rectangle)
  3. Foco e foco vizinho (Focus e focus neighbor)
  4. Sinalizadores de tamanho (Size flags)
  5. Margem (Margin)
  6. O tema opcional da interface do usuário (The optional UI theme)

Depois de entender os conceitos básicos do nó de Controle, você levará menos tempo para aprender todos os nós que derivam dele.

Os 5 elementos de interface do usuário mais comuns

Godot vem com dezenas de nós de controle. Muitos deles estão aqui para ajudá-lo a criar plug-ins de editor e aplicações.

Para a maioria dos jogos, você só precisará de cinco tipos de elementos de interface do usuário e alguns contêineres. Esses cinco nós de controle são:

  1. Label: para exibir texto
  2. TextureRect: usado principalmente para planos de fundos, ou tudo o que deveria ser uma imagem estática
  3. TextureProgress: para barras de vida, barras de carregamento, horizontais, verticais ou radiais
  4. NinePatchRect: para painéis escalonáveis
  5. TextureButton: para criar botões
../../_images/five_most_common_nodes.png

Os 5 nós de Controle mais comuns para o design da interface de usuário

TextureRect

TextureRect exibe uma textura ou imagem dentro de uma interface do usuário. Parece semelhante ao nó Sprite, mas oferece vários modos de escala. Defina a propriedade Stretch Mode para alterar seu comportamento:

  • Scale On Expand (compat) redimensiona a textura para se ajustar ao retângulo delimitador do nó, somente se a propriedade expand for true; caso contrário, ele se comporta como o modo Keep. Modo padrão para compatibilidade com versões anteriores.
  • Scale scales the texture to fit the node’s bounding rectangle.
  • Tile repete a textura, mas não faz com que ela escale.
  • Keep e Keep Centered forçam a textura a permanecer no seu tamanho original, no canto superior esquerdo ou no centro do quadro, respectivamente.
  • Keep Aspect e Keep Aspect Centered dimensiona a textura, mas a força-a a manter sua proporção original, no canto superior esquerdo ou no centro do quadro, respectivamente.
  • Keep Aspect Covered funciona da mesma forma que Keep Aspect Centered, mas o lado mais curto se ajusta ao retângulo delimitador e o outro se encaixa aos limites do nó.

Assim como os nós Sprite, você pode modular a cor do TextureRect. Clique na propriedade Modulate e use o seletor de cores.

../../_images/five_common_nodes_textureframe.png

TextureRect modulado com uma cor vermelha

TextureButton

TextureButton é como TextureRect, exceto que tem 5 slots de textura: um para cada um dos estados do botão. Na maioria das vezes, você usará as texturas Normal, Pressed e Hover. Focused é útil se sua interface monitora a entrada do teclado. O sexto slot de imagem, o Click Mask, permite definir a área clicável usando uma imagem em preto e branco puro de 2 bits.

Na seção Base Button, você encontrará algumas caixas de seleção que mudam como o botão se comporta. Quando o Toggle Mode está ativado, o botão alternará entre os estados ativo e normal quando você pressioná-lo. O Disabled faz com que seja desabilitado por padrão, caso em que usará a textura Disabled. O TextureButton compartilha algumas propriedades com o quadro de textura: ele tem uma propriedade modulate, para alterar sua cor, e os modos Resize e Stretch para alterar seu comportamento de escala.

../../_images/five_common_nodes_texturebutton.png

TextureButton e seus 5 slots de textura

TextureProgress

Camadas TextureProgress usam até 3 sprites para criar uma barra de progresso. As texturas Under e Over se encaixam entre a de Progress, que exibe o valor da barra.

A propriedade Mode controla a direção na qual a barra cresce: horizontalmente, verticalmente ou radialmente. Se você defini-lo como radial, as propriedades Initial Angle e Fill Degrees permitem limitar o intervalo do medidor.

To animate the bar, you’ll want to look at the Range section. Set the Min and Max properties to define the range of the gauge. For instance, to represent a character’s life, you’ll want to set Min to 0, and Max to the character’s maximum life. Change the Value property to update the bar. If you leave the Min and Max values to the default of 0 and 100, and set the Value property to 40, 40% of the Progress texture will show up, and 60% of it will stay hidden.

../../_images/five_common_nodes_textureprogress.png

Barra TextureProgress, dois terços preenchidos

Rótulo

O Label exibe texto na tela. Você encontrará todas as suas propriedades na seção Label, no Inspetor. Escreva o texto na propriedade Text e verifique o Autowrap se você quiser que ele respeite o tamanho da caixa de texto. Se o Autowrap estiver desativado, você não poderá dimensionar o nó. Você pode alinhar o texto horizontalmente e verticalmente com Align e Valign, respectivamente.

../../_images/five_common_nodes_label.png

Imagem de um Label

NinePatchRect

NinePatchRect takes a texture split in 3 rows and 3 columns. The center and the sides tile when you scale the texture, but it never scales the corners. It is useful to build panels, dialog boxes and scalable backgrounds for your UI.

../../_images/five_common_nodes_ninepatchrect.png

NinePatchRect dimensionado com a propriedade min_size

Existem dois fluxos de trabalho para criar interfaces de usuário responsivas

Existem dois fluxos de trabalho para criar interfaces escalonáveis e flexíveis no Godot:

  1. Você tem muitos nós de contêiner à sua disposição que dimensionam e posicionam elementos de interface do usuário para você. Eles assumem o controle de seus filhos.
  2. Do outro lado, você tem o menu de layout. Ele ajuda você a ancorar, posicionar e redimensionar um elemento de interface do usuário dentro de seu pai.

As duas abordagens nem sempre são compatíveis. Como um contêiner controla seus filhos, você não pode usar o menu de layout neles. Cada contêiner tem um efeito específico, então você pode precisar aninhar vários deles para obter uma interface funcional. Com a abordagem de layout você trabalha de baixo para cima nos filhos. Como você não insere contêineres extras na cena, pode criar hierarquias mais limpas, mas é mais difícil organizar itens em uma linha, coluna, grade, etc.

À medida que você cria interfaces de usuário para seus jogos e ferramentas, você desenvolverá uma noção do que se encaixa melhor em cada situação.

Coloque os elementos da interface do usuário precisamente com âncoras

Nós de controle têm uma posição e tamanho, mas eles também têm âncoras e margens. As âncoras definem a origem ou o ponto de referência para as arestas esquerda, superior, direita e inferior do nó. Altere qualquer uma das quatro âncoras para alterar o ponto de referência das margens.

../../_images/anchor_property.png

A propriedade Anchor

Como alterar a âncora

Como qualquer propriedade, você pode editar os 4 pontos de ancoragem no Inspetor, mas essa não é a maneira mais conveniente. Quando você seleciona um nó de controle, o menu de layout aparece acima da janela de exibição, na barra de ferramentas. Ele fornece uma lista de ícones para definir todas as 4 âncoras com um único clique, em vez de usar as 4 propriedades do inspetor. O menu de layout só será exibido quando você selecionar um nó de controle.

../../_images/layout_menu.png

O menu de layout na viewport

Âncoras são relativas ao contêiner pai

Cada âncora é um valor entre 0 e 1. Para as âncoras esquerda e superior, um valor de 0 significa que sem qualquer margem, as arestas do nó serão alinhadas às arestas esquerda e superior de seu pai. Para as bordas direita e inferior, um valor de 1 significa que eles se alinharão às bordas direita e inferior do contêiner pai. Por outro lado, as margens representam uma distância para a posição da âncora em pixels, enquanto as âncoras são relativas ao tamanho do contêiner pai.

../../_images/ui_anchor_and_margins.png

As margens são relativas à posição da âncora, que é relativa às âncoras. Na prática, muitas vezes você deixará o contêiner atualizar as margens para você

As margens mudam com a âncora

As margens são atualizadas automaticamente quando você move ou redimensiona um nó de controle. Elas representam a distância entre as bordas do nó de controle e sua âncora, que é relativa ao nó ou contêiner de controle pai. É por isso que os nós de controle devem estar sempre dentro de um contêiner, como veremos daqui a pouco. Se não houver pai, as margens serão relativas ao Retângulo delimitador do próprio nó, definido na seção Rect, no inspetor.

../../_images/control_node_margin.png

Margens em um CenterContainer definidas para a âncora “Full Rect”

Tente alterar as âncoras ou aninhe seus nós de controle dentro de Contêineres: as margens serão atualizadas. Você raramente precisará editar as margens manualmente. Sempre tente encontrar um contêiner para ajudá-lo primeiro; O Godot vem com nós para resolver todos os casos comuns para você. Precisa adicionar espaço entre uma barra de vida e a borda da tela? Use o MarginContainer. Quer construir um menu vertical? Use o VBoxContainer. Mais sobre estes abaixo.

Use tags de tamanho para alterar como os elementos da interface do usuário preenchem o espaço disponível

Todo nó de controle possui sinalizadores de tamanho. Eles dizem aos contêineres como os elementos da interface do usuário devem ser dimensionados. Se você adicionar o sinalizador “Fill” à propriedade Horizontal ou Vertical, a caixa delimitadora do nó ocupará todo o espaço possível, mas respeitará seus irmãos e manterá seu tamanho. Se houver 3 nós TextureRect em um HBoxContainer, com os sinalizadores “Fill” nos dois eixos, cada um deles ocupará um terço do espaço disponível, mas não mais. O contêiner assumirá o nó e o redimensionará automaticamente.

../../_images/textureframe_in_box_container_fill.png

3 elementos de interface do usuário em um HBoxContainer, eles se alinham horizontalmente

O sinalizador “Expand” permite que o elemento da interface do usuário ocupe todo o espaço possível e empurre seus irmãos. Seu retângulo de delimitação crescerá nas bordas de seu pai ou até que seja bloqueado por outro nó de interface do usuário.

../../_images/textureframe_in_box_container_expand.png

O mesmo exemplo acima, mas o nó central tem o sinalizador de tamanho “Expand”

Você precisará de alguma prática para entender as tags de tamanho, já que o efeito delas pode mudar um pouco dependendo de como você configura sua interface.

Organize nós de controle automaticamente com contêineres

Os contêineres organizam automaticamente todos os Nós filhos de controle, incluindo outros contêineres em linhas, colunas e mais. Use-os para adicionar preenchimento ao redor da interface ou dos nós centrais em seus retângulos delimitadores. Todos os contêineres internos são atualizados no editor, assim você vê o efeito instantaneamente.

Os contêineres têm algumas propriedades especiais para controlar como eles organizam os elementos da interface do usuário. Para alterá-los, navegue até a seção Constantes personalizadas no Inspetor.

Os 5 contêineres mais úteis

Se você criar ferramentas, poderá precisar de todos os contêineres. Mas para a maioria dos jogos, um punhado será suficiente:

  • MarginContainer, para adicionar margens em torno da parte da interface do usuário
  • CenterContainer, para centralizar seus filhos em sua caixa delimitadora
  • VboxContainer e HboxContainer, para organizar elementos da interface do usuário em linhas ou colunas
  • GridContainer, para organizar nós de controles em um padrão semelhante a uma grade

CenterContainer centraliza todos os seus filhos dentro de seu retângulo delimitador. É um que você costuma usar para telas de título, se você quiser que as opções permaneçam no centro da viewport. Como ele centraliza tudo, você geralmente deseja um único contêiner aninhado dentro dele. Se você usar texturas e botões, eles serão empilhados.

../../_images/five_containers_centercontainer.png

CenterContainer em ação. A barra de vida é centralizada dentro de seu contêiner pai.

O MarginContainer adiciona uma margem em qualquer lado dos nós filhos. Adicione um MarginContainer que englobe toda a viewport para adicionar uma separação entre a borda da janela e a interface do usuário. Você pode definir uma margem no lado superior, esquerdo, direito ou inferior do contêiner. Não é necessário marcar a caixa de seleção: clique na caixa de valor correspondente e digite qualquer número. Ele será ativado automaticamente.

../../_images/five_containers_margincontainer.png

O MarginContainer adiciona uma margem de 40px ao redor da interface do usuário do jogo

Existem dois BoxContainers: VBoxContainer e HBoxContainer. Você não pode adicionar o próprio nó BoxContainer, pois ele é uma classe auxiliar, mas você pode usar contêineres verticais e horizontais. Eles organizam nós em linhas ou colunas. Use-os para alinhar itens em uma loja ou para construir grades complexas com linhas e colunas de tamanhos diferentes, pois você pode aninhá-los da forma que desejar.

../../_images/five_containers_boxcontainer.png

O HBoxContainer alinha horizontalmente os elementos da interface do usuário

VBoxContainer organiza automaticamente seus filhos em uma coluna. Isso os coloca um após o outro. Se você usar o parâmetro de separação, ele deixará um espaço entre seus filhos. HBoxContainer organiza elementos da interface do usuário em uma linha. É semelhante ao VBoxContainer, com um método extra add_spacer para adicionar um nó de controle espaçador antes de seu primeiro filho ou depois de seu último filho, a partir de um script.

O GridContainer permite organizar elementos da interface do usuário em um padrão semelhante a uma grade. Você só pode controlar o número de colunas que possui e definir o número de linhas sozinho, com base na contagem de seus filhos. Se você tem nove filhos e três colunas, você terá 9 ÷ 3 = 3 linhas. Adicione mais três filhos e você terá quatro linhas. Em outras palavras, ele criará novas linhas à medida que você adicionar mais texturas e botões. Como os contêineres de caixa, ele possui duas propriedades para definir a separação vertical e horizontal entre as linhas e colunas, respectivamente.

../../_images/five_containers_gridcontainer.png

Um GridContainer com 2 colunas. Ele dimensiona cada coluna automaticamente.

O sistema de interface do usuário do Godot é complexo e tem muito mais a oferecer. Para aprender a projetar uma interface mais avançada, vá até GUI Section dos documentos.