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. A main menu.
  2. A game UI with a health bar, energy bar, bomb and money counters.

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

The GUI you’re going to create.

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

Read the Design de interfaces com os nós de Controle first to learn how Godot’s UI system works.

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. The graphics might skew the players’ perception of the experience and you’ll miss out on valuable feedback.
  2. If the User Experience doesn’t work, you’ll have to redo some 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. Build it all in a single scene, and eventually save some branches as reusable scenes.
  2. Build template scenes for reusable components and create specific components that inherit from your base scenes.

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

The files you’ll find in Godot. The graphics look cleaner than on the rough design, but they’re still placeholders.

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. Break down the UI into nested boxes, from the largest that contains everything, to the smallest ones, that encompass one widget, like a bar with its label, a panel or a button.
  2. If there’s some padding around an area, use a MarginContainer.
  3. If the elements are arranged in rows or columns, use an HBoxContainer or 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

Interface building blocks, broken down using the three rules of thumb.

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

Let’s create the main menu. We’ll build it in a single scene. To create an empty scene, click on Scene > New Scene.

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. the title or logo,
  2. the three text options as individual nodes,
  3. the version note,
  4. and the main menu’s illustration.

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.

Click each of the nodes to select it. In the inspector, find the Texture property and click [empty] > Load. A file browser opens and lets you pick a sprite to load into the texture slot.

../../_images/ui_texturerect_load_texture.png

The file browser lets you find and load textures.

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

The six nodes with textures loaded.

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

You should have four nested containers and the TextureRect nodes sitting aside from it.

In the node tree, select all the TextureRect nodes that should go on the left side: the logo, the menu options (Continue, NewGame, Options), and the version note. Drag and drop them into the VBoxContainer. The nodes should position automatically.

../../_images/ui_main_menu_containers_step_2.png

Contêineres automaticamente posicionam e redimensionam texturas

Ficamos com dois problemas para resolver:

  1. The characters on the right aren’t centered.
  2. There’s no space between the logo and the other UI elements.

To center the characters on the right, first select the CenterContainer. Then in the Inspector, scroll down to the Size Flags category and click on the field to the right of the Vertical property, and check Expand in addition to Fill. Do the same for the Horizontal property. This makes the CenterContainer expand into all available space while respecting its neighbour VBoxContainer. Finally, drag and drop the Characters node into the CenterContainer. The Characters element will center automatically.

../../_images/ui_main_menu_containers_step_3.png

The character node centers inside the right half of the screen as soon as you place it inside the CenterContainer.

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

Place the new container between the other two nodes to retain the UI’s layout.

Now we grouped the menu options together, we can tell their container to expand to take as much vertical space as possible. Select the MenuOptions node. In the Inspector, scroll down to the Size Flags category. Click on the field to the right of the Vertical property, and check Expand in addition to Fill. The container expands to take all the available vertical space while respecting its neighbors, the Logo and Version elements.

To center the nodes in the VBoxContainer, scroll to the top of the Inspector and change the Alignment property to Center.

../../_images/ui_main_menu_containers_step_5.png

The menu options should center vertically in the UI’s left column.

To wrap things up, let’s add some separation between the menu options. Expand the Custom Constants category below Size Flags, and click the field next to the Separation parameter. Set it to 30. Once you press enter, the Separation property becomes active and Godot adds 30 pixels between menu options.

../../_images/ui_main_menu_design_final_result.png

The final interface.

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.

You can change the scale mode in the project settings: click Project > Project Settings in the top menu. In the window’s left column, look for the Display category. Click on the Window sub-category. On the right side of the window, you’ll find a Stretch section. The three settings, Mode, Aspect, and Shrink, control the screen size. For more information, see Multiple resolutions.