Faça o design de uma tela de menu

Nos próximos dois tutoriais, você vai construir duas cenas de UI (interface de usuário, do inglês, user interface) responsivas passo-a-passo utilizando o sistema de UI da engine:

  1. Um menu principal.
  2. Uma interface gráfica de jogo com uma barra de vida, barra de energia, contador de bombas e de dinheiro.

Você aprenderá a projetar a interface do usuário do jogo de maneira eficiente e a usar os nós de controle do Godot. Esta página se concentra na parte visual: tudo que você faz no editor. Para aprender como codificar uma barra de vida, leia Controlar a interface do jogo com código.

../../_images/ui_main_menu_design_final_result.png

A GUI que você vai criar.

Faça o download dos arquivos do projeto: ui_main_menu_design.zip e extraia o arquivo. Importe o projeto start/ no Godot para seguir este tutorial. A pasta end/ contém o resultado final. Você encontrará todos os sprites na pasta start/assets/main_menu.

Nota

Leia o Design de interfaces com os nós de Controle primeiro para entender como o sistema de Interface do Usuário do Godot funciona.

Como criar sua interface com o usuário do jogo

Para projetar uma boa interface do usuário, primeiro você deve criar um modelo preliminar: uma versão de desenho simples que enfoca o posicionamento de seus componentes de UI, seu tamanho e interação com o usuário. Caneta e papel é tudo que você precisa. Você não deve usar gráficos extravagantes e finais neste estágio. Então, você só precisa de simples sprites para reservar espaços e você está pronto para o Godot. Você quer ter certeza de que os jogadores possam encontrar seu caminho pela interface usando esses espaços reservados.

../../_images/ui_design_rough.png

O esboço de plano ou protótipo da interface do usuário

O espaço reservado não precisa ser feio, mas você deve manter os gráficos simples e limpos. Evite efeitos especiais, animações e ilustrações detalhadas antes de fazer com que os jogadores testem sua interface do usuário. De outra forma:

  1. Os gráficos podem distorcer a percepção dos jogadores sobre a experiência e você perderá um feedback valioso.
  2. Se a Experiência do Usuário não funcionar, você terá que refazer alguns sprites.

Dica

Sempre tente fazer a interface funcionar com texto e caixas simples primeiro. É fácil substituir as texturas mais tarde. Os designers profissionais de experiência costumam trabalhar com contornos e caixas simples em escala de cinza. Quando você tira as cores e visuais extravagantes, é muito mais fácil dimensionar e posicionar corretamente os elementos da interface do usuário. Isto ajuda a refinar a base do design que você vai construir.

Existem duas maneiras de projetar sua interface do usuário no Godot. Você pode:

  1. Construa tudo em uma única cena e, eventualmente, salve alguns ramos como cenas reutilizáveis.
  2. Crie modelos de cenas para componentes reutilizáveis e crie componentes específicos que herdam de suas cenas base.

Usaremos a primeira abordagem, porque a primeira versão da sua interface do usuário pode não funcionar tão bem quanto você gostaria. É provável que você jogue partes fora e redesenhe os componentes à medida que avança. Quando você tem certeza de que tudo funciona, é fácil tornar algumas peças reutilizáveis, como você verá abaixo.

../../_images/ui_main_menu_placeholder_assets.png

Os arquivos que você encontrará no Godot. Os gráficos parecem mais limpos do que no esboço de projeto, mas ainda são marcadores de espaço.

Projetar o menu principal

Antes de entrarmos no editor, queremos planejar como aninharemos os contêineres com base em nossa imagem do protótipo.

Divida o protótipo da interface do usuário

Aqui estão minhas três regras básicas para encontrar os contêineres certos:

  1. Divida a interface do usuário em caixas aninhadas, desde a maior que contém tudo, até as menores, que abrangem um widget, como uma barra com seu rótulo, um painel ou um botão.
  2. Se houver algum preenchimento em torno de uma área, use um MarginContainer.
  3. Se os elementos estiverem dispostos em linhas ou colunas, use um HBoxContainer ou VBoxContainer.

Essas regras são suficientes para começar e funcionam bem para interfaces simples.

Para o menu principal, a maior caixa é a janela inteira do jogo. Há espaçamento entre as bordas da janela e os primeiros componentes: isso deve ser um MarginContainer. Então, a tela é dividida em duas colunas, então usaremos um HBoxContainer. Na coluna da esquerda, vamos gerenciar as linhas com um VBoxContainer. E na coluna da direita, vamos centralizar a ilustração com um CenterContainer.

../../_images/ui_mockup_break_down.png

Blocos de construção de interface, divididos usando as três regras básicas.

Dica

Os contêineres se adaptam à resolução da janela e à proporção largura / altura. Embora pudéssemos colocar os elementos da interface do usuário manualmente, os contêineres são mais rápidos, mais precisos e responsivos.

Prepare a cena do Menu Principal

Vamos criar o menu principal. Nós vamos construí-lo em uma única cena. Para criar uma cena vazia, clique no menu Cena -> Nova Cena.

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

Selecione o MarginContainer novamente e vá até o inspetor para definir o tamanho das margens. Desça a classe Control, até a seção Custom Constants. Abra isso. Defina as margens como:

  • Margem direita: 120
  • Topo da Margem: 80
  • Margem à esquerda: 120
  • Margem Inferior: 80

Queremos que o contêiner se encaixe na janela. No Viewport, abra o menu Layout e selecione a última opção, Full Rect.

Adicione as sprites da interface do usuário

Selecione o MarginContainer e crie os elementos da interface do usuário como nós TextureRect. Nós precisamos:

  1. O título ou logotipo,
  2. As três opções de texto, como nós individuais,
  3. A nota de versão,
  4. E a ilustração do menu principal.

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

Clique em cada um dos nós para selecioná-lo. No inspetor, encontre a propriedade Texture e clique em [empty] -> Load . Um navegador de arquivos será aberto e permitirá escolher um sprite para carregar no slot de textura.

../../_images/ui_texturerect_load_texture.png

O navegador de arquivos permite encontrar e carregar texturas.

Repita a operação para todos os nós do tipo TextureRect. Você deve ter o logotipo, a ilustração, as três opções de menu e a nota de versão, cada uma como um nó separado. Em seguida, clique duas vezes em cada um dos nós na guia Cena para renomeá-los.

../../_images/ui_main_menu_6_texturerect_nodes.png

Os seis nós, com texturas carregadas.

Nota

Se você quer apoiar a localização no seu jogo, use Labels para opções de menu ao invés de TextureRect.

Adicionar contêineres para colocar elementos da interface do usuário automaticamente

Nosso menu principal tem alguma margem ao redor das bordas da tela. É dividido em duas partes: à esquerda, você tem o logotipo e as opções de menu. À direita, você tem os personagens. Podemos usar um dos dois contêineres para conseguir isso: HSplitContainer ou HBoxContainer. Os contêineres divididos dividem a área em dois: um lado esquerdo e um lado direito ou um lado superior e um lado inferior. Eles também permitem que o usuário redimensione as áreas esquerda e direita usando uma barra interativa. Por outro lado, o HBoxContainer apenas se divide em tantas colunas quanto suas filhas. Embora você possa desativar o comportamento de redimensionamento do contêiner de divisão, recomendo favorecer os box contêineres.

Selecione o MarginContainer e adicione um HBoxContainer. Então, precisamos de dois contêineres como filhos de nosso HBoxContainer: um VBoxContainer para as opções de menu à esquerda, e um CenterContainer para a ilustração à direita.

../../_images/ui_main_menu_containers_step_1.png

Você deve ter quatro contêineres aninhados e os nós TextureRect separados deles.

Na árvore de nós, selecione todos os nós TextureRect que devem ir no lado esquerdo: a logo, as opções de menu e a nota de versão. Arraste e solte-os no VBoxContainer. Os nós devem se posicionar automaticamente.

../../_images/ui_main_menu_containers_step_2.png

Contêineres automaticamente posicionam e redimensionam texturas

Ficamos com dois problemas para resolver:

  1. Os caracteres da direita não estão centralizados.
  2. Não há espaço entre o logotipo e os outros elementos da interface do usuário.

Para centralizar os caracteres à direita, primeiro selecione o CenterContainer. Então, no inspetor, desça para a categoria Size Flags e clique no campo à direita da propriedade Vertical, e marque Expand além de Fill. Faça o mesmo com a propriedade Horizontal. Isso faz o CenterContainer se expandir para todo o espaço disponível respeitando o VBoxContainer vizinho. Finalmente, arraste e solte o nó Characters no CenterContainer. O elemento Characteres será centralizado automaticamente.

../../_images/ui_main_menu_containers_step_3.png

O nó de caractere centraliza-se dentro da metade direita da tela assim que você o coloca dentro do Contêiner Central.

To space out the menu options and the logo on the left, we’ll use one final container and its size flags. Select the VBoxContainer and press Meta + A to add a new node inside it. Add a second VBoxContainer and name it MenuOptions. Select all three menu options, Continue, NewGame and Options, and drag and drop them inside the new VBoxContainer. The UI’s layout should barely change, if at all.

../../_images/ui_main_menu_containers_step_4.png

Coloque o novo contêiner entre os outros dois Nodes para manter o layout da interface do usuário.

Agora que agrupamos as opções do menu, podemos mandar o contêiner expandir para tomar todo o espaço vertical que conseguir. Selecione o nó MenuOptions. No Inspetor, vá para a categoria Size Flags. Clique no campo à direita da propriedade Vertical, e marque Expand em adição a Fill. O contêiner expande para ocupar todo o espaço vertical disponível respeitando seus vizinhos, os elementos Logo e Version.

Para centralizar os nós no VBoxContainer, vá até o topo do Inspetor e altere a propriedade Alignment para Center.

../../_images/ui_main_menu_containers_step_5.png

As opções do menu devem centralizar verticalmente na coluna esquerda da interface do usuário.

Para terminar, vamos adicionar uma separação entre as opções do menu. Expanda a categoria Custom Constants abaixo de Size Flags, e clique no campo próximo ao parâmetro Separation. Defina-o como 30. Depois de pressionar enter, a propriedade Separation fica ativa e a Godot adiciona 30 pixels entre as opções do menu.

../../_images/ui_main_menu_design_final_result.png

A interface final.

Sem uma única linha de código, temos um menu principal preciso e responsívo.

Parabéns por chegar aqui! Você pode baixar o menu final ui_main_menu_design.zip para comparar com o seu próprio. No próximo tutorial, você criará uma interface do usuário do jogo com barras e contadores de itens.

Divida o protótipo da interface do usuário

Uma interface de usuário responsiva tem tudo a ver com a certeza de que nossas interfaces de usuário sejam bem dimensionadas em todos os tipos de tela. Telas de TV e monitores de computador têm diferentes tamanhos e proporções. No Godot, usamos contêineres para controlar a posição e o tamanho dos elementos da interface do usuário.

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

Você notará que, embora os contêineres movam as sprites, eles não as escalonam. Isto é normal. Queremos que o sistema de interface do usuário manipule diferentes proporções de tela, mas também precisamos que o jogo inteiro se adapte a diferentes resoluções de tela. Para fazer isso, Godot escala a janela inteira para cima e para baixo.

Você pode alterar o modo de escala nas configurações do projeto: clique em Projeto > Configurações do Projeto no menu superior. Na coluna esquerda da janela, procure a categoria Display. Clique na subcategoria Window. No lado direito da janela, você encontrará a seção Stretch. As três configurações, Mode, Aspect e Shrink, controlam o tamanho da tela. Para mais informações, consulte Multiple resolutions.