Interface de usuário personalizada: informações do jogador | Unreal Editor para Fortnite Documentação

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.

Interface de usuário de jogador das Tartarugas Ninja

O detalhamento básico das etapas é o seguinte:

Baixe o tutorial do Lab de Material de IU gratuitamente e faça experiências com suas próprias configurações de interface de usuário.

Clique na imagem para expandir.

Vamos mergulhar direto!

Como configurar os widgets personalizados

No Navegador de Conteúdo, abra a pasta UI, selecione Widgets e abra o Blueprint de widget PlayerInfoBlock.

No lado esquerdo, você verá a aba Hierarquia, que funciona exatamente como o Outliner 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 backplate, contendo um plano de fundo tingido de cinza, um contorno branco e um contorno laranja.

Ao importar imagens para usar na IU, certifique-se de escolher Grupo de texturas para IU e Configurações de compressão para UserInterface2D(RGBA8).

Nome do Jogador

Esse componente é composto por dois elementos: um Nome do Jogador Ativo e um Nome do Jogador Inativo, que serão exibidos quando o jogador estiver vivo, eliminado ou desconectado in-game.

Interface de usuário do Nome de Jogador Inativo

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 Visibilidade como Visível e, para Inativo, defina-o como Oculto. Isso será mostrado somente em determinadas condições.

Defina Substituição de Largura como 220,0 para que os 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 revestimento escolhido in-game.

O componente está vinculado a uma instância de material chamada MI_UI_PlayerCard, encontrada na pasta interface de usuário, Instâncias de Material.

Você pode personalizar essa instância de material de acordo com sua preferência 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 que a região geral pode ter.

Em seguida, temos a imagem da placa traseira de vida, chamada MI_UI_Health_Backplate. Esse material da interface do usuário também é fornecido em Fortnite, Interface de usuário, Materiais. Ele é altamente personalizável e pode oferecer muitas opções para mostrar a barra de vida do jogador logo de cara.

Na parte superior da placa traseira, há uma caixa de pilha composta de dois componentes: uma barra de vida e uma sombra chamada Health_Image e Health_Shadow, respectivamente.

Health_Image é um material de IU de barra de progresso personalizável. Se você abrir a instância de material, poderá ampliar alterando o Tamanho da 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 vida e escudo do Fortnite normalmente variam de 0 a 100, é importante definir o Multiplicador como 0,01 para que os valores de vida e escudo sejam exibidos corretamente aos jogadores.

A barra Health_Shadow é uma sobreposição sombreada simples 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 de usuário da barra de progresso.

Shield_Image usa uma instância de material básica de barra de progresso, que é uma versão simplificada do material Health_Image.

Como 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 Ver vinculações clicando em Janela > Ver vinculações ou selecionando Ver vinculações na parte inferior da tela e encaixando-a.
Para ver a lista HUDPlayerInfoViewModel das visualizações de visualização:
1. Abra a janela Modelos de Visualização selecionando Janela, Modelos de Visualização.
2. Acesse +Modelo de Visualização e selecione HUD - Base do modelo de visualização de informações do jogador.
3. 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 ficar assim:
Repita as etapas de 1 a 3 para o elemento NameInactive_Text.
Para modificar as configurações de visibilidade do nome inativo, adicione um novo widget a NameInactive_Text e selecione Visibilidade no menu suspenso.
Clique no campo vazio à direita e selecione Funções de Conversão, Para visibilidade (booleano).
A seleção dessa opção faz com que três novos campos sejam exibidos. Clique no ícone Link ao lado de Está visível. No menu, selecione HUDPlayerInfoViewModel e Ao eliminar.
Set Visibilidade Real como Não pode ter acertos testados (apenas o próprio elemento) abaixo. Deixe Visibilidade como False em Collapsed. Quando o jogador for eliminado ou desconectado, o nome substituirá NameActive_Text, mas quando o jogador estiver vivo, ele permanecerá Collapse.
A vinculação final NameInactive_Text deve ter a seguinte aparência:
Pressione Compilar para enviar as alterações. A definição dos nomes dos jogadores agora está concluída.

Ícone do avatar do jogador

Escolha Profile_Image na Hierarquia ou clique na área do ícone do jogador na tela de visualização da interface de usuário.
Clique em + Adicionar Widget Profile_Image.
Acesse Profile_Image, Pincel e pressione Selecionar. Essa vinculação observa essencialmente 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 > Set parâmetro de textura.
Digite Textura no campo Nome do parâmetro. Para encontrar o nome desse campo, abra a instância de material de avatar de jogador.

Para as funções Definir parâmetro de vetor/escalar/textura, certifique-se de que os nomes dos parâmetros da instância de Material correspondam exatamente ao campo de nome do parâmetro.
Clique no ícone de 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 na Hierarquia ou clique na área da barra de vida na tela de visualização da interface de usuário.
Clique em + Adicionar Widget Health_Image.
Acesse Profile_Image, Pincel e pressione Selecionar.
Clique dentro do campo vazio à direita e selecione Funções de conversão > Set parâmetro escalar.
Digite Progressão no campo Nome do parâmetro . Para encontrar o nome desse campo, abra a instância de material de avatar de jogador.
Clique no ícone Link ao lado de Valor e selecione HUDPlayerInfoViewModel, Vida.
1. O progresso fornece uma porcentagem da vida restante do jogador e, como o Multiplicador foi definido como 0,1, cada ponto de porcentagem moverá a barra de progresso em 1/100. Você pode testar isso alterando arbitrariamente o valor de porcentagem na instância do material para ver o movimento da barra de progresso.
  
  Clique na imagem para expandir.
A vinculação finalizada deve ter esta aparência:
Para a barra de escudo, repita as etapas 1 a 6, mas escolha Escudo em vez de Vida.
A vinculação finalizada para 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.

Selecione PlayerInfoBlock_Overlay na 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). A seleção dessa opção faz com que três novos campos sejam exibidos.
Clique no ícone Link ao lado de Está visível. No menu, selecione HUDPlayerInfoViewModel e Está desconectado.
Defina Visibilidade como True como Recolhido e Visibilidade como False como Não pode ter acertos testados (apenas o próprio elemento).
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á informações in-game!

Como criar uma pilha de jogadores

Esta seção mostrará como criar um widget que exibe jogadores adicionais do esquadrão junto com o jogador que controla.

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 de usuário para abrir uma nova janela do editor.
No painel Paleta, arraste um elemento Sobreposição até 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 - Lista de informações de equipe/jogador de esquadrão do Controlador do HUD.
Acesse o painel Detalhes e pressione +Adicionar extensão de 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 de widget de entrada, selecione PlayerInfoBlock criado anteriormente. Abaixo, selecione HUDPlayerInfoViewModel como Modelo de visualização de entrada.
Na seção Modelo de espaço, você pode ajustar o espaçamento entre cada widget e o alinhamento e visualizar como um determinado número de widgets ficaria no jogo.

Clique 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 Set Items, e selecione-o em seguida. Se PlayerInfoStack_ViewModel_Extension não aparecer na sua lista, pressione Compilar e ela aparecerá.
No campo vazio à direita, selecione HUDPlayerInfoListViewModel > Matriz de informações da equipe/jogadores do esquadrão. Ela 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 Setar Itens.
Pressione Compilar para salvar as alterações. Agora, você está pronto para adicioná-los ao seu jogo usando o dispositivo Controlador do HUD.

Se você quiser criar um widget para o jogador que controla, separado do resto do esquadrão:

Crie um novo widget para o jogador que está controlando e configure os vínculos de visualização da mesma forma que fez anteriormente usando Dispositivo - Controlador do HUD, Modelo de visualização de informações do jogador.
Coloque esse widget sob o widget pai que tem 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 dispositivo 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 Exibir HUD esteja definido como Sim e Mostrar Informações da Equipe esteja definido como Não.
Role para baixo até Substituir Widget de Info do Jogador e arraste o widget HUDInfoStack até 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.

É isso! 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.

%tmnt-Câmeras-and-controls-in-Unreal-Editor-for-Fortnite:topic%