A interface de usuário (IU) de um jogo é tudo com que o jogador interage visualmente, como menus, telas de pausa, inventário, caixas de diálogo e o "heads-up display" do jogador, ou HUD. O HUD é qualquer parte da interface que permanece visível na tela durante o jogo, como a vida do jogador, o equipamento ou os indicadores de objetivos.
Agora que seu personagem sabe coletar itens, você aprenderá a usar o sistema UMG (Unreal Motion Graphics) da Unreal Engine para criar um HUD que mostra ao jogador quais chaves ele coletou. Com o UMG, você pode fazer o design de um HUD arrastando e organizando elementos da interface de usuário em um editor visual. Assim, você saberá exatamente o que o jogador verá no jogo.
Antes de começar
Você deve compreender os tópicos abordados nas seções anteriores de Como projetar uma aventura de quebra-cabeça:
Noções básicas de Blueprints, como variáveis, funções, gráficos de evento e adição de nós.
Você precisará dos seguintes ativos de Criar uma chave:
Classe de Blueprint
BP_KeyClasse de Blueprint
BP_AdventureCharacterEnumeração
Enum_KeyType
Criar um Blueprint de Widget
O UMG inclui um tipo especial de Blueprint chamado widget, que você usará para criar vários elementos da interface de usuário. Para começar a criação do seu HUD, crie um ativo de Blueprint de Widget.
Para criar um Blueprint de Widget, faça o seguinte:
No Navegador de Conteúdo, vá para Content > AdventureGame > Designer > Blueprints e crie uma pasta chamada
Widgetspara armazenar os ativos da interface.Na nova pasta Widgets, crie um ativo clicando com o botão direito do mouse em uma área vazia da pasta e selecionando Interface de usuário > Blueprint de Widget.
Na janela Escolha a classe-pai, clique em Widget de usuário.
Digite um nome para seu widget. Este tutorial usa
WBP_PlayerHUD.Clique duas vezes no blueprint para abri-lo.
Explore o Editor de Blueprint de Widget
Os Blueprints de Widget são abertos em um editor de widget especial que contém dois modos: Designer e Gráfico. Para alternar entre os modos, use os botões próximos ao canto superior direito do editor.
No modo Designer, você pode adicionar e editar partes individuais da interface.
No lado esquerdo do editor de widget, a Paleta contém todos os diferentes tipos de widget que você pode adicionar à interface. O painel Hierarquia mostra a estrutura dos componentes da interface. A ordem e o aninhamento dos widgets nesse painel afetam o layout e a renderização da interface.
A grade no meio da janela é o designer visual. Assim como nos gráficos de evento do Blueprints, use a roda de rolagem do mouse para aumentar e diminuir o zoom e use o botão direito do mouse para mover o design.
O nível de zoom no canto superior esquerdo da grade é atualizado conforme você aproxima ou afasta o zoom. Zoom 1:1 significa que você visualiza a interface em uma escala de 100%, mostrando como os elementos da interface aparecerão no jogo. Se o jogador executar o jogo em uma tela menor, a Unreal Engine usará o dimensionamento de DPI para ajustar a interface a essa tela.
O canto inferior esquerdo da grade contém informações sobre a predefinição de tamanho de tela atual. O tamanho de tela que o Blueprint de widget está pré-visualizando. Por padrão, está definido para uma tela de televisão de 720p.
Começar com um painel de tela
Na aba Paleta, os widgets são classificados por tipo. Widgets do tipo Painel não exibem nada na tela; eles são como contêineres que controlam o layout e o posicionamento dos widgets colocados dentro deles. Os painéis são úteis para o dimensionamento automático da interface para se ajustar a diferentes tamanhos de tela de TV e resoluções de monitor.
Painéis de Tela são o tipo de widget de painel mais flexível, perfeitos para HUDs. Enquanto outros painéis organizam os widgets em um determinado layout ou orientação, os painéis de tela usam âncoras para posicionar os widgets exatamente onde você os deseja na tela, garantindo que tudo permaneça no lugar se a tela mudar de tamanho.
Para criar um painel de tela, siga estas etapas:
Na aba Paleta, pesquise
Canvase arraste um painel de tela para o painel Hierarquia em cima de [WBP_PlayerHUD] para que fique aninhado embaixo.Um retângulo aparece na área do designer visual, no centro da janela.
Essa tela é o widget-raiz da interface. Todo Blueprint de Widget deve ter um widget-raiz, o elemento de interface de usuário de nível superior que contém todos os outros widgets. Quando você coloca outro widget dentro da tela, há uma relação hierárquica entre os dois em que a tela é o pai e o outro widget é o filho.
Por padrão, um painel de tela tem 1920x1080 pixels e representa a tela inteira. Essa é uma resolução comum e um ótimo ponto de partida para o trabalho, portanto mantenha o tamanho da tela. No tempo de execução, a Unreal Engine dimensiona a interface para se encaixar na tela do jogador.
Construir o layout do seu HUD
Agora que tem uma tela, você ancorará áreas para a vida do jogador e o inventário no canto superior esquerdo da interface.
Quando uma pessoa olha para uma tela, tende a olhar primeiro perto do canto superior esquerdo, que é o melhor lugar para informações importantes, como a vida do jogador.
Para definir as áreas de texto na tela, siga estas etapas:
Em Paleta, pesquise
Sobreposiçãoe arraste um painel Sobreposição para a Hierarquia para que fique aninhado como um widget-filho no painel de telaSobreposições são um tipo de painel que empilha vários widgets no mesmo espaço. São úteis para adicionar uma imagem de fundo atrás de elementos da interface, ou um ícone estático ou rótulo de texto sobre os elementos dela. Para esta HUD, você colocará um efeito de desfoque por trás do texto da interface para facilitar a leitura.
Selecione a nova sobreposição. Como o painel é filho da tela, ele tem um ponto de fixação no canto superior esquerdo dela.
Neste tutorial, o ponto de fixação será deixado aqui. No painel Detalhes, você pode usar a propriedade Âncora para mover o ponto de fixação.
No painel Detalhes, defina Posição X e a Posição Y como
20. É o número de pixels de distância nos quais o painel de sobreposição está posicionado. Adicionar um deslocamento melhora a aparência da IU e evita que o texto seja cortado da aresta da tela.Para definir a área em que você desenhará o texto da interface, arraste as alças na caixa delimitadora do painel de sobreposição para redimensioná-lo até que tenha cerca de 250 pixels de largura e 200 pixels de altura.
Ou então, no painel Detalhes, use Tamanho X e Tamanho Y para redimensioná-lo.
Essa área exibirá a vida (PV) do jogador e os nomes das chaves que ele coletou.
Na Paleta, pesquise e arraste um painel Caixa Vertical para que seja filho na Sobreposição. Esse tipo de painel organiza os elementos de interface de usuário verticalmente, como na coluna de uma tabela.
Adicione dois painéis Caixa horizontal como filhos de Caixa vertical. As caixas horizontais organizam os elementos de interface de usuário dentro delas horizontalmente, como na linha de uma tabela. Uma caixa horizontal é um contêiner para as informações de vida do jogador, e a outra caixa horizontal é um contêiner para um rótulo de chaves coletadas.
As caixas vertical e horizontal são widgets de layout. Esses painéis são como organizadores invisíveis. Eles não têm um quadro visível no designer e são redimensionados de acordo com o conteúdo.
Cada tipo de caixa alinha e organiza o texto que você adicionará à interface:
O painel Sobreposição habilita a sobreposição. Portanto, a caixa vertical força o alinhamento vertical das caixas horizontais em vez de empilhá-las umas sobre as outras.
Você terá duas caixas de texto na primeira linha. Ao adicionar caixas horizontais, você pode controlar o alinhamento e o espaçamento de cada caixa de texto na linha.
Adicionar rótulos de texto
Agora que você definiu a estrutura do HUD, pode adicionar o texto estático que não mudará com base no que acontece no jogo.
Você precisará de um rótulo PV antes da vida do jogador e de Chaves coletadas antes da lista de nomes de chave. Por enquanto, você também adicionará um marcador de posição para o valor atual de PV do jogador. Em uma seção posterior desta série de tutoriais, você transformará esse marcador de posição em uma variável que reflete a vida real do jogador.
Para adicionar rótulos de texto para a vida (PV) do jogador, siga estas etapas:
Na Paleta, pesquise
textoe arraste dois widgets de Texto para a Hierarquia como filhos da primeira Caixa horizontal.Adicione um widget de Texto, não uma Caixa de texto.
Selecione o primeiro widget de Texto em Caixa horizontal. No painel Detalhes, na seção Espaço (Espaço de caixa horizontal), defina o Preenchimento como
5. Isso define o texto para 5 pixels da borda da caixa horizontal.Na seção Conteúdo, defina o Texto para
PV:.Na seção Aparência, clique na amostra de cores perto de Cor e opacidade e escolha uma cor para seu texto. Este tutorial usa verde (Hex sRGB =
78FF3FFF).Selecione o segundo widget de Texto. Na parte superior do painel Detalhes, renomeie o widget de
TextBlockcomotxtHP. Nas próximas partes deste tutorial, você precisará fazer referência a esse widget, por isso dê a ele um nome de variável único e descritivo agora.Mude o Preenchimento para
5e Texto para100.
Para adicionar um rótulo de texto para as chaves que o jogador coletou, siga estas etapas:
Na Paleta, arraste um widget de Texto para ser filho da segunda Caixa horizontal.
Mude o Preenchimento para
5e Texto paraChaves coletadas:.Para
Cor e opacidade, escolha uma cor. Este tutorial usa laranja (Hex sRGB =FF6200FF).
Agora que há um texto em cada caixa horizontal, você pode ver a estrutura flexível desse layout. Se você selecionar uma caixa horizontal ou widget de texto, serão exibidos botões de seta nas arestas desse widget. Clique nas setas para reorganizar os widgets. Usando as opções de alinhamento e preenchimento de cada widget de texto, você tem muito controle sobre o espaçamento entre elementos na mesma linha e em linhas diferentes.
Adicionar espaço para uma variável
Em um jogo, a maior parte do HUD do jogador precisa ser atualizada durante a jogabilidade por causa das ações realizadas, como receber dano, receber ou usar itens ou obter um poder. Para fazer isso no projeto, conecte o HUD a uma variável que rastreia as chaves do jogador, para que possa ser atualizada conforme o jogador as coletar.
Para adicionar uma caixa de texto de entrada para exibir a lista de chaves, siga estas etapas:
Na Paleta, pesquise e arraste uma caixa de texto (multilinha) para se tornar o último filho da caixa vertical. Este widget de entrada aceita várias linhas de texto inseridas pelo usuário. No entanto, você pode usar a lógica do gráfico de evento para adicionar texto a esse widget quando o usuário coletar uma chave.
Na Hierarquia, selecione a caixa de texto. No painel Detalhes, mude o nome para
txtKeys.Você também pode visualizar e alterar o nome de um widget clicando com o botão direito na Hierarquia.
No designer visual, você verá que a caixa de texto de entrada vem com um fundo padrão. Remova-o:
Perto da parte superior do painel Detalhes, expanda Preenchimento e defina os seguintes valores para preencher a caixa de texto com um recuo:
Esquerda:
15Parte superior, Direita e Parte inferior:
4
Na seção Estilo, expanda Estilo > Normal da imagem de fundo e clique na amostra de cores perto de Matiz.
Altere Hex sRGB para
FFFFFF00para tornar o fundo transparente e clique em OK.
Como esse widget não tem um estilo de fonte padrão, você precisará definir as propriedades da fonte. Na seção Estilo, expanda Estilo do texto > Fonte e defina o seguinte:
Mude Família de fontes para Roboto.
Mude o Tipo de letra para Negrito.
Mude o Tamanho para
24.Mude a Cor para branco.
Com txtKeys selecionado, no topo do painel Detalhes, você verá que É variável está habilitado. As caixas de texto esperam texto inserido pelo usuário, portanto são configuradas automaticamente como variáveis. Com É variável habilitado, você poderá referenciar e usar txtKeys no gráfico de evento do Blueprint de Widget.
Camadas em efeito especial
Você pode facilitar a leitura do texto do HUD desfocando o fundo da caixa delimitadora da sobreposição. Use a funcionalidade de camadas do painel de sobreposição para adicionar um efeito de desfoque atrás das caixas vertical e horizontal.
Para usar um widget para desfocar a área da tela atrás do texto do HUD, siga estas etapas:
Na Paleta, pesquise
desfoquee arraste um widget de Desfoque de plano de fundo para a Hierarquia como filho da Sobreposição.O editor adiciona o Desfoque de segundo plano à parte inferior da lista, por isso arraste-o de modo que seja o primeiro filho em Sobreposição, acima da Caixa vertical.
No painel Detalhes, na seção Aparência, defina "Intensidade do desfoque" como
2.O uso de efeitos de desfoque grandes aumenta o tempo de execução da GPU. Para obter uma alternativa mais barata, você também pode usar um widget de Borda opaco ou aplicar uma textura com um widget de Imagem.
Faça o efeito preencher as dimensões do widget de sobreposição:
Na seção Espaço (espaço de sobreposição), perto de Alinhamento horizontal, clique em Preencher verticalmente.
Ao lado de Alinhamento vertical, selecione Preencher verticalmente.
Este é um exemplo de como o texto da interface de usuário aparece sem um fundo desfocado e com um efeito de desfoque exagerado:
Construir a lógica do HUD
Para finalizar o Blueprint de widget, você criará a lógica que exibe o nome de qualquer chave que o jogador pegar.
Configurar blocos de criação para coletas de chave
Antes de começar a criar a lógica que adiciona nomes de chave ao HUD, você precisará dos seguintes elementos:
Uma variável de matriz que rastreia as chaves do jogador.
Uma função que o Blueprint do personagem pode chamar quando o jogador encontrar uma nova chave.
Para acionar a execução da lógica do HUD de outros Blueprints, você usará uma função em vez do gráfico de evento. A função receberá a chave coletada pelo jogador, a salvará na variável nomeada e inserirá na caixa txtKeys os nomes das chaves que estão nessa variável.
Para adicionar uma nova variável e uma função que rastreia as chaves do jogador, siga estas etapas:
No canto superior direito da janela, clique em Gráfico para editar o gráfico de evento do Blueprint de Widget. Este gráfico funciona igual aos outros Blueprints em que você trabalhou até agora.
A variável
txtKeysestá listada no painel à esquerda da janela.Crie uma função que executará toda a lógica do HUD quando chamada:
Na seção Funções, clique no botão de mais (+) para adicionar uma função. Uma nova aba para essa função aparecerá acima do gráfico.
Nomeie a função como
fnAddKeyHUD.Com a função selecionada, no painel Detalhes, na seção Entradas, clique em + para adicionar uma nova entrada de função.
Dê o nome de
KeyTypepara a entrada e altere seu tipo para Tipo de chave de enumeração.
No painel Meu Blueprint, crie uma variável de matriz para armazenar as chaves do jogador:
Na seção Variáveis, clique em + para criar uma nova variável.
Chame a variável de
KeysToDisplay.Mude o tipo para Tipo de chave de enum. Este é o enum que você fez com as opções de tipo de chave Vermelha, Amarela e Azul.
Clique com o botão direito no tipo de variável para transformá-la em uma matriz. Ou use o painel Detalhes para alterar o tipo de contêiner.
Você pode passar a matriz de chaves do Blueprint do personagem para a função em vez de recriá-la aqui, mas rastrear as chaves de forma independente no HUD oferece mais flexibilidade se quiser realizar lógicas específicas do HUD, como exibir imagens para cada chave.
Para exibir os nomes das chaves na caixa de texto de múltiplas linhas, você precisará combiná-los em uma string.
Na seçãoLocal Variables (Variáveis locais), clique no botão + para adicionar uma nova variável. Dê o nome de
Chavese mude seu tipo para String e seu tipo de contêiner para Single (Único).
Imprima as chaves do jogador na tela
Agora você pode começar a adicionar lógica à função fnAddKeyHUD.
Quando essa função é chamada, ela começa com um KeyType vermelho, amarelo ou azul. Você precisa adicionar esse tipo de chave à matriz KeysToDisplay, adicionar todas as chaves à variável de string e converter a string em texto para exibi-la na tela.
Primeiro, para criar a matriz KeysToDisplay, siga estas etapas:
Na visualização de Gráfico do Blueprint de Widget, visualize a aba fnAddKeyHUD.
Para criar a matriz KeysToDisplay, adicione um nó Add Unique após o nó de entrada da função.
Para a matriz de destino, conecte uma referência à variável KeysToDisplay.
Como segunda entrada, conecte a entrada da função Tipo de chave.
O nó Add Unique obtém uma matriz e um novo valor e adiciona esse valor à matriz (se ainda não estiver na matriz). Esse nó garante que os nomes das chaves não aparecerão no HUD mais de uma vez.
Para combinar todas as chaves coletadas na string Keys (Chaves), siga estas etapas:
Faz um loop por cada item na matriz KeysToDisplay. Após o nó Add Unique, adicione um nó For Each Loop.
Conecte outra referência de KeysToDisplay à entrada da matriz do loop.
Para cada item (ou elemento) na matriz, ou cada iteração do loop, você precisa converter esse elemento em uma string, adicioná-la à variável de string Keys e adicionar uma nova linha após o nome da chave (pressionando Enter no teclado).
Lembre-se: toda lógica conectada ao pin de execução de Corpo do Loop é executada uma vez por item da matriz. Quando o loop terminar, a execução passará pelo pin Concluído.
Clique com o botão direito no grafo de nós, pesquise
Anexar stringe adicione um nó Append do tipo string. Isso combina as entradas de string para formar um único valor de retorno de string.Configure o nó Append para adicionar o novo elemento de matriz ao conteúdo atual da variável Keys e uma quebra de linha:
Conecte uma referência a Keys na entrada A.
Para a entrada B, conecte o pin Elemento de Matriz no nó do loop. A Unreal Engine adiciona um nó Enum to String para converter o valor.
Clique em Adicionar pin para adicionar uma entrada C. Clique na caixa de texto e pressione Shift + Enter para adicionar uma nova linha.
Arraste o pin Valor de retorno do nó Append e adicione um nó Set Keys.
Conecte o pin de execução da saída do loop ao nó Set Keys.
Quando o corpo do loop for concluído, você terá uma string longa com os nomes de todas as chaves do jogador.
Para passar a string Keys à caixa de texto de TxtKeys do HUD, siga estas etapas:
Arraste do pin de execução Concluído do loop e adicione um nó SetText (Multi-Line Text Box).
Se não encontrar esse nó, desabilite Sensível ao contexto próximo ao canto superior direito da lista de ações do nó.
O nó SetText recebe uma entrada de texto e a exibe em uma caixa de texto-alvo.
Configure o nó SetText (Multi-Line Text Box):
Para o Alvo, conecte uma referência a TxtKeys.
Para In Text, conecte uma referência a Keys. A Unreal Engine adiciona um nó To Text (String) que converte a string Keys em texto.
O texto é um tipo de dados separado. Enquanto as strings são para programação e depuração, o texto é projetado para texto voltado para o usuário e permite translação e formatação.
Compile e salve o Blueprint.
A função fnAddKeyHUD concluída deve ficar assim:
Se você copiar esse trecho de código para o projeto, precisará conectar os pins do nó da entrada da função ao nó Add Unique.
Seu HUD está pronto! Agora você precisa adicioná-lo ao seu personagem jogável para que seja exibido na tela quando você iniciar o jogo.
Atualizar o personagem jogável
Para concluir a configuração do HUD, você precisa adicionar uma lógica ao Blueprint do personagem que adiciona o widget do HUD quando o jogo é iniciado e o atualiza quando o jogador pega uma chave.
Chamar FnAddKeyHUD do Blueprint do personagem
Conecte a lógica da chave em BP_AdventureCharacter à lógica do HUD para que adicionar uma chave ao jogador também adicione uma chave ao HUD.
Para acionar o HUD quando o jogador recebe uma chave, siga estas etapas:
Abra o Blueprint
BP_AdventureCharacter. No painel Meu Blueprint, na seção Variáveis, clique em + para adicionar uma nova variável.Chame a variável de
HUDe mude o tipo para HUD do jogador WBP (referência ao objeto).Isso armazena o widget de HUD criado no gráfico de evento do personagem.
Vá para a seção do Event Graph em que o evento fnBPIAddKey adiciona uma nova chave à matriz HeldKeys do jogador.
Na seção Gráficos do painel Meu Blueprint, expanda EventGraph e clique duas vezes em um evento para ir até essa área do gráfico.
Após o nó Add, conecte um nó FnAddKeyHUD.
Configure o nó FnAddKeyHUD:
Para o Alvo, conecte uma referência à variável HUD.
Para Tipo de chave, conecte o pin ao pin Tipo de chave do nó Event fnBPIAddKey.
Agora, isso obtém a nova chave do jogador e chama a função FnAddKeyHUD no Blueprint de Widget do HUD.
Salve e compile seu blueprint.
Exibir o HUD no início do jogo
Para criar um HUD quando o jogador surgir no nível, siga estas etapas:
Encontre um espaço vazio no gráfico de evento do personagem e adicione um nó Event Possessed. Este é o evento transmitido quando o jogador assume o controle do personagem jogável ou se apodera dele.
Clique com o botão direito no nó Event Possessed e selecione Adicionar chamada à função-pai para assegurar que a lógica de Event Possessed na classe de personagem-pai ainda será executada. Conecte os pins de execução e Novo controle de cada nó.
No canto superior direito do Blueprint do personagem, você verá que ele é derivado da classe de Blueprint
BP_FirstPersonCharacter. Isso significa que o personagem usa a lógica de si mesmo e a do pai. Se adicionar um evento ao Blueprint do personagem que já exista no pai, você o substituirá. Ao substituir um evento, faça também a chamada da versão do pai para que a lógica seja executada antes de adicionar a sua.Para criar o HUD, conecte um nó Create Widget e altere a classe para HUD do jogador WBP. Isso criará uma instância do Blueprint do seu widget.
Depois do nó Create Widget, adicione um nó Set HUD, conectando os dois pins. Isso salvará o novo Blueprint de widget na variável.
Para exibir o objeto do HUD na tela, adicione um nó Add to Viewport. Defina o Alvo como a variável do HUD.
Embora você possa conectar o Create Widget diretamente ao nó Add to Viewport, este tutorial separa a criação do widget do desenho na tela. Isso é útil quando você deseja que o widget esteja pronto, mas oculto até um determinado momento, como um alerta de combinação que aparece depois que o jogador acerta vários golpes. Se um widget tiver muitas animações, efeitos e sons, pode ser melhor carregá-lo com antecedência para evitar atrasos na jogabilidade.
Compile e salve.
A nova lógica de Blueprint do personagem deve ficar assim:
Testar o HUD
Clique em Jogar para testar seu jogo. Quando o jogo começar, você verá os rótulos "PV" e "Chaves coletadas" do jogador exibidos no HUD. Tocar em uma chave deve adicionar o nome da chave ao HUD.
Se quiser, faça ajustes no HUD. Algumas coisas que você pode tentar por conta própria são:
Ajustar o tamanho do painel de sobreposição.
Alterar tamanhos e estilos de fonte.
Mover a posição para outras áreas além do canto superior esquerdo.
Adicionar diferentes widgets para fundos, como texturas ou materiais.
Para aprimorar seu HUD, experimente substituir os rótulos de texto por ícones. Para fazer isso, importe uma imagem para o Navegador de Conteúdo e adicione-a ao HUD com um widget de imagem. Para obter mais informações sobre como importar ativos para o Unreal Editor, consulte Importing Assets Directly.
Como projetar HUDs eficientes
Aqui estão mais algumas estratégias de design para criar um HUD limpo e amigável ao jogador.
Facilite a leitura:
Use texto de alto contraste, fontes limpas e tamanhos de fonte apropriados. Certifique-se de que o HUD está legível a uma distância de visualização típica da tela e quando o jogador estiver se movendo em um ambiente movimentado, não apenas enquanto estiver parado.
Mantenha a clareza e a concisão:
Mostre ao jogador somente o que o jogador precisa no momento e oculte ou minimize as informações menos relevantes até que elas sejam necessárias. No entanto, o jogador deve sempre ser capaz de ver rapidamente o que precisa para poder tomar decisões com confiança.
Adicione feedback:
Quando o HUD for atualizado (como ao pegar uma chave), use uma animação curta, mudança de cor ou som para avisar o jogador da mudança.
Priorize o tamanho e a posição:
Informações importantes devem ser destacadas. Use texto maior e cores ousadas, ou coloque essas informações perto do canto superior esquerdo ou do centro, que é onde os jogadores naturalmente olham primeiro.
Próxima
Na próxima seção, você continuará adicionando mais elementos de jogabilidade ao nível e aprenderá a programar um interruptor para realizar uma ação quando pressionado.