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:
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.
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 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:
- Os gráficos podem distorcer a percepção dos jogadores sobre a experiência e você perderá um feedback valioso.
- 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:
- Construa tudo em uma única cena e, eventualmente, salve alguns ramos como cenas reutilizáveis.
- 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.
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:
- 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.
- Se houver algum preenchimento em torno de uma área, use um
MarginContainer
.
- 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
.
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:
- O título ou logotipo,
- As três opções de texto, como nós individuais,
- A nota de versão,
- 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.
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.
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.
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.
Ficamos com dois problemas para resolver:
- Os caracteres da direita não estão centralizados.
- 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.
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.
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.
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.
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.