Nesta seção, você aprenderá a criar sobreposições de interface de usuário totalmente personalizadas para os seus jogos, seguindo as etapas para recriar a interface de usuário de jogador do modelo Fliperama das Tartarugas Ninja.
O detalhamento básico das etapas é o seguinte:
Adicione vinculações de visualização a cada elemento de widget interativo.
Crie uma pilha de informações do jogador para vários jogadores simultâneos.
Configure o dispositivo controlador do HUD para exibir a interface de usuário personalizada.
Baixe o pacote de texturas Ambiente de Material da interface de usuário gratuitamente e experimente suas próprias configurações de interface de usuário!
Clique na imagem para ampliar.
Vamos lá!
Configurar widgets personalizados
No Navegador de conteúdo, acesse Todos > [NOME do seu projeto] > IU > Widgets e abra o Blueprint de widget UW_HUD_PlayerInfoBlock.
No lado esquerdo, você verá a guia Hierarquia, que funciona exatamente como o Organizador da janela principal do editor e exibe os vários componentes do widget finalizado.
Placa Traseira
A seção superior é composta por três imagens de placa traseira que definem a aparência em camadas da IU. Esses incluem:
Backplate1_Image - a camada de fundo com tonalidade cinza
Backplate2_Image - a camada de contorno laranja
Backplate3_Image - a camada de contorno branco
Juntas, essas imagens criam o estilo emoldurado do painel de informações do jogador.
Ao importar imagens para usar na sua interface de usuário, certifique-se de escolher Grupo de textura para IU e Configurações de compactação para Interface de usuário2D(RGBA8).
Nome do Jogador
Este componente é composto por dois elementos, um Nome do jogador ativo e um Nome do jogador inativo, que aparecerão quando o jogador estiver vivo, eliminado ou desconectado do jogo.
Escolha duas cores distintas que informarão aos jogadores quem da equipe está ativo no momento e quem foi eliminado.
Para o nome do jogador ativo, defina a Visibilidade como Visível e para o nome do jogador inativo, defina-o como Oculto. Isso será mostrado somente em determinadas condições.
Defina a Substituição de largura como 220,0 para que nomes de jogadores mais longos não se sobreponham ao ícone do avatar do jogador.
Ícone do avatar do jogador
Esse componente mostra o retrato do personagem do jogador com base no visual escolhido no jogo.
O componente está vinculado a uma instância de material chamada MI_UI_PlayerCard, encontrada na pasta IU > Material Instances.
Você pode personalizar essa instância de material de acordo com suas preferências, alterando as configurações no painel Detalhes. Tente importar sua própria imagem e adicionar algumas cores de contorno.
Neste exemplo, a imagem escolhida é uma imagem transparente vazia que será conectada posteriormente ao revestimento do personagem.
Vida
Esse componente contém as regiões que exibirão os níveis de vida e escudo do jogador.
No nível pai, você pode ver a caixa de tamanho que determina o tamanho permitido para a região geral.
A próxima é a imagem da placa de fundo de saúde, chamada MI_UI_Health_Backplate. Este material de interface do usuário também é fornecido em Fortnite > IU > Materiais. Ele é altamente personalizável e pode oferecer muitas opções para mostrar a barra de vida do jogador logo de cara.
No topo da placa traseira há uma caixa de pilha composta de dois componentes: uma barra de saúde e uma sombra chamada Health_Image e Health_Shadow, respectivamente.
Health_Image é um material personalizável da IU da barra de progresso. Se você abrir a instância do material, poderá aumentar o zoom alterando o Tamanho da Pré-visualização.
Tente alterar algumas das configurações no painel Detalhes para ver como elas afetam o material existente.
Como os valores dos parâmetros escalares (o estado de preenchimento da barra de progresso) variam de 0 a 1, e os valores de saúde e escudo do Fortnite geralmente variam de 0 a 100, é importante definir o Multiplicador como 0,01 para que os valores de saúde e escudo sejam exibidos corretamente aos jogadores.
A barra Health_Shadow é uma simples sobreposição sombreada adicionada para fins estéticos.
Escudo
O componente de escudo é composto por um fundo Shields_Container que mostra a área vazia do escudo em cinza escuro e uma Shields_Image que contém o material da interface do usuário da barra de progresso.
O Shield_Image usa uma instância básica de material de barra de progresso, que é uma versão simplificada do material Health_Image.
Adicionar vinculações de visualização
Agora que você criou os componentes principais da interface de usuário para o jogo, vamos praticar a adição de vinculações de visualização, que permitirão que cada um dos componentes seja atualizado com base nos dados que receberem de uma sessão ao vivo.
Nome do Jogador
Para que o nome de um jogador apareça no campo correto, siga estas etapas:
Abra a aba Vinculações de Visualização clicando em Janela > Vinculações de Visualização ou selecionando Vinculações de Visualização na parte inferior da tela e encaixando-a.
Para ver a lista HUDPlayerInfoViewModelBase de vinculações de visualização:
1. Abra a janela Modelos de visualização selecionando Janela > Modelos de visualização.
1. Vá em +Viewmodel e selecione HUD - base do modelo de visualização de informações do jogador.
1. Clique em Dispositivo - Controlador do HUD - Modelo de visualização de informações do jogador e clique em Selecionar.
Selecione NameActive_Text na lista Hierarquia ou clicando na área "Nome do Jogador" da tela de pré-visualização da interface de usuário.
Clique em + Adicionar Widget NameActive_Text e selecione Texto no menu suspenso.
No campo vazio à direita, selecione HUDPlayerInfoViewmodel e Nome do Jogador no menu suspenso que se segue.
A vinculação final deve ter a seguinte aparência:
Repita as etapas 1 a 3 para o elemento NameInactive_Text.
Para modificar as configurações de visibilidade no nome inativo, adicione um novo widget em NameInactive_Text e selecione Visibilidade no menu suspenso.
Clique no campo vazio à direita e selecione Funções de Conversão > Para visibilidade (booleano) > Selecionar.
A seleção dessa opção faz com que três novos campos sejam exibidos. Clique no ícone Link ao lado de É Visível. No menu, selecione HUDPlayerInfoViewModel e É eliminado.
Defina Visibilidade de Verdadeiro como Não pode ter acertos testados (apenas o próprio elemento) abaixo. Deixe Visibilidade de Falso em Recolhido. Quando o jogador for eliminado ou desconectado, o nome substituirá o NameActive_Text, mas quando o jogador estiver vivo, ele permanecerá recolhido.
A vinculação final NameInactive_Text deve ficar assim:
Clique em Compilar para enviar as alterações e pronto, os nomes dos jogadores estão prontos!
Ícone do avatar do jogador
Escolha Profile_Image em Hierarquia ou clique na área do ícone do player na tela de visualização da IU.
Clique em + Adicionar Widget Profile_Image.
Vá para Profile_Image > Pincel e pressione Selecionar. Essa vinculação basicamente analisa a configuração de pincel selecionada no painel de detalhes Profile_Image.
Clique dentro do campo vazio à direita e selecione Funções de conversão > Definir parâmetro de textura.
Digite Textura no campo Nome do parâmetro. Para encontrar o nome desse campo, abra a instância do material do avatar do jogador.
Para funções Definir parâmetro vetorial/escalar/textura, certifique-se de que os nomes dos parâmetros da instância do material sejam uma correspondência exata com o campo nome do parâmetro.
Clique no ícone Link ao lado do campo Valor e selecione HUDPlayerInfoViewModel > Ícone de Avatar do Jogador.
A vinculação finalizada deve ter a seguinte aparência:
Vida e Escudo
Escolha Health_Image em Hierarquia ou clique na área da barra de vida na tela de visualização da IU.
Clique em + Adicionar widget Health_Image.
Vá para Profile_Image > Pincel e pressione Selecionar.
Clique dentro do campo vazio à direita e selecione Funções de conversão > Definir parâmetro escalar.
Digite Progresso no campo Nome do parâmetro. Para encontrar o nome desse campo, abra a instância do material do avatar do jogador.
Clique no ícone Link ao lado de Valor e selecione HUDPlayerInfoViewModel > Vida.
O progresso fornece uma porcentagem da saúde restante do jogador e, como o Multiplicador foi definido como 0.1, cada ponto percentual moverá a barra de progresso em 1/100. Você pode testar essa configuração alterando arbitrariamente o valor da porcentagem na instância do material para ver a movimentação da barra de progresso.
Porcentagem de vida Clique na imagem para ampliar.
A vinculação finalizada deve ter a seguinte aparência:
Para a barra de escudo, repita os passos 1 a 6, mas escolha Escudo em vez de Vida.
A vinculação finalizada para o escudo deve ter a seguinte aparência:
Pressione Compilar para enviar as alterações.
Widget completo
Essa associação garante que todo o widget seja exibido somente depois que o jogador estiver conectado ao jogo.
Escolha PlayerInfoBlock_Overlay em Hierarquia.
Selecione + Adicionar widget PlayerInfoBlock_Overlay e escolha Visibilidade no menu suspenso.
Clique no campo vazio à direita e selecione Funções de Conversão > Para visibilidade (booleano) > Selecionar. A seleção dessa opção faz com que três novos campos sejam exibidos.
Clique no ícone Link ao lado de É Visível. No menu, selecione HUDPlayerInfoViewModel e Está desconectado.
Defina Visibilidade verdadeira como Recolhido e Visibilidade falsa como Não testável por acerto (Somente próprio).
A vinculação final deve ter a seguinte aparência. Pressione Compilar para salvar as alterações.
Pronto. Agora, você tem um widget de interface de usuário totalmente configurado que exibirá as informações do jogo.
Criar uma pilha de jogadores
Esta seção mostrará como criar um widget de usuário que exibe jogadores adicionais do esquadrão junto com o jogador controlador.
Para começar, crie um novo Blueprint de widget clicando com o botão direito no Navegador de Conteúdo e selecionando Interface do usuário > Blueprint de widget.
Selecione Widget de usuário na caixa de diálogo e renomeie-o para HUDInfoStack.
Clique duas vezes no widget do usuário para abrir uma nova janela do Editor.
No painel Paleta , arraste um elemento Sobreposiçãopara o painel Hierarquia para começar.
Arraste uma caixa de empilhamento até o nível abaixo da sobreposição e renomeie-a para PlayerInfoStack.
No painel Modelos de Visualização, pressione +Modelo de visualização e selecione Dispositivo - Controlador do HUD - Lista de informações do jogador da equipe/esquadrão.
Vá para o painel Detalhes e pressione +Adicionar extensão do modelo de visualização. Isso permite que PlayerInfoStack aceite uma classe de widget de entrada.
Se não vir essas opções, tente compilar o widget mais uma vez.
Para a classe Widget de entrada, selecione o PlayerInfoBlock criado anteriormente. Abaixo, selecione HUDPlayerInfoViewmodel como Modelo de visualização de entrada.
Na seção Modelo de espaço , é possível ajustar o espaçamento entre cada widget e o alinhamento, além de visualizar a aparência de um determinado número de widgets no jogo.
Espaçamento entre widgetsClique no gif para expandir.
No painel Vinculações de Visualização, clique em +Adicionar widget e, em seguida, escolha HUDInfoStack. Selecione PlayerInfoStack_Viewmodel_Extension, expanda-o para ver Definir itens e selecione-o em seguida. Se PlayerInfoStack_Viewmodel_Extension não aparecer na sua lista, pressione Compilar e ele deverá aparecer.
No campo vazio à direita, selecione HUDPlayerInfoListViewModel > Matriz de informações dos jogadores do time/esquadrão. Isso passa a matriz de modelos de visualização de informações do jogador para a extensão recém-configurada com uma função chamada Definir Itens.
Pressione Compilar para salvar as alterações. Agora você está pronto para adicioná-los ao seu jogo usando o dispositivo Controlador do HUD.
Caso queira criar um widget separado do restante do esquadrão para o jogador controlador:
Crie um novo widget para seu player de controle e configure as vinculações de visualização da mesma forma que você fez anteriormente usando o Dispositivo - modelo de visualização de informações do controlador HUD.
Coloque esse widget sob o widget pai que contém a caixa de empilhamento.
Crie uma vinculação para esse widget. No campo esquerdo, selecione Dispositivo, Controlador do HUD, Modelo de visualização de informações do jogador. No campo direito, selecione Dispositivo - controlador do HUD, lista de informações de jogadores da equipe/esquadrão > Informações do jogador controlador.
Configurar o Controlador do HUD
Procure o dispositivo Controlador do HUD no navegador de conteúdo e arraste-o até a cena.
Nas opções do usuário, escolha o que você quer que o jogador veja e certifique-se de que Mostrar HUD esteja definido como Sim e Mostrar informações da equipe esteja definido como Não.
Role para baixo até Substituição do widget de informações do jogador e arraste o widget HUDInfoStack para o campo vazio. Certifique-se de que esse seja o widget de empilhamento recém-criado, e não o widget original que você criou.
Clique em Salvar.
Pronto! Sua nova interface de usuário deve ser exibida agora quando você testar o jogo.
A seguir
Em seguida, você aprenderá a configurar as câmeras e os dispositivos de controle para seu jogo de rolagem lateral.
