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 inicial
  2. Um UI de jogo com uma barra de vida, barra de energia e contador de bombas e dinheiro

You will learn how to design game UIs efficiently, and how to use Godot’s Control nodes. This page focuses on the visual part: everything you do from the editor. To learn how to code a life bar, read 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.

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

Placeholder doesn’t have to mean ugly, but you should keep the graphics simple and clean. Avoid special effects, animation, and detailed illustration before you have players playtest your UI. Otherwise:

  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 construir em uma única cena. Para criar uma cena vazia, clique no menu Cena -> Nova Cena.

Temos que adicionar um nó raiz antes que possamos salvar a cena. A raiz da sua interface do usuário deve ser o contêiner ou elemento externo. Neste caso, é um MarginContainer. MarginContainer é um bom ponto de partida para a maioria das interfaces, já que muitas vezes você precisa preencher a interface do usuário. Pressione Meta+S para salvar a cena no disco. Nomeie-o 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

We want the container to fit the window. In the toolbar above the Viewport, open the Layout menu and select the last option, 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

Clique no botão Add Node ou pressione Meta+A no seu teclado. Comece a digitar TextureRect para encontrar o nó correspondente e pressione enter. Com o novo nó selecionado, pressione Meta+D cinco vezes para criar cinco instâncias extras TextureRect.

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 é aberto e permite escolher uma sprite para carregar no slot de textura.

../../_images/ui_texturerect_load_texture.png

O navegador de arquivos permite encontrar e carregar texturas

Repeat the operation for all TextureRect nodes. You should have the logo, the illustration, the three menu options and the version note, each as a separate node. Then, double click on each of the nodes in the Scene tab to rename them. Nothing has been placed in containers yet so this should look messy.

../../_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, role abaixo 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 seu vizinho VBoxContainer. Finalmente, arraste e solte os caracteres no CenterContainer. O elemento Caracteres 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 CenterContainer

Para espaçar as opções de menu e o logotipo à esquerda, usaremos um contêiner final e suas flags de tamanho. Selecione VBoxContainer e pressione Meta+A para adicionar um novo nó dentro dele. Adicione um segundo VBoxContainer e nomeie-o como “MenuOptions”. Selecione todas as três opções de menu, Continue, NewGame e Options, e arraste e solte-as dentro do novo VBoxContainer. A disposição da interface do usuário deve mudar pouco, isso se mudar.

../../_images/ui_main_menu_containers_step_4.png

Coloque o novo contêiner entre os outros dois nós para manter o layout da interface do usuário

Agora agrupamos as opções de menu juntas, podemos dizer que o contêiner delas é expandido para ocupar o máximo de espaço vertical possível. Selecione o nó MenuOptions. No Inspetor, role para baixo até a categoria Size Flags. Clique no campo à direita da propriedade Vertical e marque Expand além de Fill . O contêiner se expande para ocupar todo o espaço vertical disponível. Mas respeita 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 envolver as coisas, vamos adicionar alguma 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 o 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.

A ordem em que você aninha é importante. Para ver se sua interface do usuário se adapta bem a diferentes proporções de tela, selecione o nó raiz, pressione a tecla Q para ativar o modo de seleção, selecione o contêiner e clique e arraste em um dos cantos do contêiner para redimensioná-lo. Os componentes de interface do usuário devem fluir dentro dele.

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 no menu Projeto -> Configurações do Projeto. Na coluna da 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: ref:doc_multiple_resolutions.