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.

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 documento:ui_introduction_to_the_ui_system 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.

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 partes reutilizáveis, como você verá abaixo.

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.

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

Nota

This tutorial is based on a window size of 1366×768. To change the project's base window size, open Project > Project Settings at the top of the editor then change Display > Window > Size > Width to 1366 and Display > Window > Size > Height to 768.

If you forget to change the window size, anchors and containers may not behave as expected.

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.

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 :kbd: Ctrl + S (: kbd:` Cmd + S` no macOS) 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

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.

Clique no botão Add Node ou pressione Ctrl + A (Cmd + A no macOS) no seu teclado. Comece a digitar TextureRect para encontrar o nó correspondente e pressione enter. Com o novo nó selecionado, pressione Ctrl + D (Cmd + D on macOS) cinco vezes para criar cinco instâncias extras de 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 será aberto e permitirá escolher um sprite para carregar no slot de textura.

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.

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

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container's resize behavior, I recommend to favor box containers.

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.

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.

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.

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

Para espaçar as opções de menu e o logotipo à esquerda, usaremos um ultimo contêiner e suas flags de tamanho. Selecione VBoxContainer e pressione Ctrl+A para adicionar um novo Node dentro dele. Adicione um segundo VBoxContainer e nomeie-o como MenuOptions. Selecione todas as três menu de opções, Continue, NewGame e Options, arraste eles e solte-os dentro do novo VBoxContainer. A Interface de Usuário deve mudar um pouco, isso se mudar.

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.

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 o Godot adiciona 30 pixels entre as opções do menu.

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, 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 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.