Crie barras de vida e escudo personalizadas no Unreal Motion Graphics (UMG) usando materiais de IU, texturas de IU e vários widgets na paleta para substituir a interface de usuário (IU) padrão do Fortnite. As barras de vida e escudo podem ser adicionadas a uma identificação ou colocadas separadamente no HUD.
O design e o posicionamento das barras de vida e escudo são exclusivos de cada jogo e levam em consideração o tipo de jogo (jogo de luta, cooperativo multijogador, interpretação e muito mais).
Configurar instâncias de materiais sem modificar materiais
Neste exemplo, você usará uma variedade de materiais que foram criados no UEFN. Eles incluem uma barra de progresso no formato de um retângulo (caixa) e um círculo. A barra de progresso retangular também tem uma opção para transformá-la em seções.
Os materiais foram configurados usando uma combinação de Funções de Material do Laboratório de Material de IU, parâmetros que são expostos à Instância de Material e um pouco de matemática para fazer tudo funcionar.
É uma prática recomendada usar materiais para widgets. Os materiais são atualizados dinamicamente com base nos dados de jogo, o que ajuda a otimizar a IU e fornece uma maneira de adicionar efeitos especiais. Texturas são usadas apenas para um design mais complicado que não pode ser obtido facilmente com funções matemáticas.
Para obter mais informações sobre como usar materiais como parte do design e da implementação da IU, consulte Materiais úteis da IU. O tutorial tem mais informações sobre o uso de Campos de distância assinados (SDFs) para criar materiais de barra de progresso dinâmico no UEFN e na UE.
Uma instância de material cria instâncias de um material com parâmetros que podem ajustar facilmente a aparência desse material sem recompilá-lo. Para criar uma instância de um material, clique com o botão direito do mouse em um Material e selecione Criar instância de material.
Para obter mais informações sobre instâncias de materiais, consulte Como criar e usar instâncias de materiais na documentação da Unreal Engine.
Existem alguns parâmetros expostos no UEFN. No material de exemplo, o parâmetro Progress altera o quanto a barra é preenchida. O intervalo é normalizado para 0-100 usando o nó ConstantBiasScale em M_CircleProgressBar para que se ajuste ao intervalo de PV do Fortnite.
Você pode mudar a Cor do Plano de Fundo (BGColor) e a Cor do Líquido, que são gradientes. Depois, visualize suas alterações na janela de visualização à esquerda.
Você pode fazer quantas instâncias de material precisar para vários propósitos. Neste exemplo, dois materiais são usados, um para PV e outro para escudo.
Práticas recomendadas de layout de widgets
No UMG, use o painel Canvas apenas se precisar de uma posição absoluta na tela ou precisar manipular com precisão onde vários widgets são colocados.
Para widgets menores, use:
Sobreposição
Caixas de Empilhamento
Caixas de Tamanho (se precisar restringir seu widget a um tamanho específico)
Painel de Grade (se quiser manter o dimensionamento do seu contêiner, mas quiser manipular a posição de widgets-filho)
Quando os materiais estiverem prontos, crie um Blueprint de widget no Navegador de Conteúdo e clique duas vezes na miniatura do widget para abrir o Editor UMG.
Como usar um painel Canvas
Neste exemplo, o painel Canvas é usado para colocar as barras de vida e escudo em uma posição absoluta no HUD, ancorando os widgets a determinadas partes da tela.
Para elementos individuais do HUD, é melhor usar uma combinação dos seguintes widgets:
Sobreposição: se você precisar pôr um widget um em cima do outro
Caixas de pilha: se você precisar definir seus widgets na horizontal ou na vertical
Caixas de tamanho: se você precisar restringir seu widget a um tamanho específico
Painel de grade: se você quiser manter o dimensionamento do seu contêiner, mas quiser manipular a posição de widgets-filho dentro dele
Com isso em mente, comece a definir os widgets de vida e escudo.
Crie um contêiner para toda a IU do HUD. Para isso, use um Painel Canvas como o contêiner para abrigar todos os elementos individuais do HUD.
Para este exemplo, vida e escudos serão ancorados na parte inferior central da tela.
Aninhe uma Caixa de Pilha sob o Canvas para criar o contêiner para Vida e Escudos. Para esse design, esses elementos serão empilhados da esquerda para a direita.
Se quiser definir os widgets em uma caixa de pilha verticalmente, altere a configuração Orientation no painel Detalhes em Comportamento > Orientação.
Renomeie seus widgets selecionando-os e pressionando F2 à medida que os adiciona à Hierarquia para melhorar a organização.
Selecione a Caixa de Empilhamento na Hierarquia e, no painel Detalhes, você verá uma opção de Âncoras. Abra a opção pressionando Shift + Control. Anime a caixa de empilhamento na parte inferior central do HUD selecionando a opção na Linha 3, Coluna 2.
A caixa de pilha deve estar ancorada na parte inferior agora. O ícone de flor mostra onde o widget está ancorado no painel de tela (painel Canvas).
Desloque a Caixa de Empilhamento para cima, para que ela não fique presa na borda inferior da tela. Faça isso editando a opção Posição Y.
Valores positivos deslocam o widget para baixo, enquanto valores negativos o deslocam para cima.
Marque a caixa de seleção Dimensionar para conteúdo para garantir que o contêiner sempre seja redimensionado para o conteúdo dentro dele.
Como configurar a barra de PV e texto
Agora que o contêiner de vida e escudos está pronto, configure o widget de vida e escudos.
Aninhe uma Sobreposição sob a Caixa de Empilhamento e renomeie-a como HPOverlay. Isso faz com que o texto de PV seja sobreposto à barra de PV da rodada.
Aninhe uma Imagem em HPOverlay e renomeie-a como HPBar. Isso fornece uma maneira de adicionar a instância de material que você criou acima ao seu widget.
Selecione HPBar na Hierarquia, em Detalhes sob Pincel > Imagem, selecione sua Instância de Material de Barra de vida personalizada.
Para alterar o tamanho da instância de material, você pode personalizar a propriedade Image Size abaixo.
Aninhe um Bloco de Texto em HPOverlay e renomeie-o como HPText. Assim, você pode adicionar texto na parte superior da barra de vida do círculo.
Selecione o Bloco de Texto e, em Detalhes, defina o alinhamento Horizontal e Vertical como Centro. Isso garante que o texto fique sempre alinhado ao centro com HPBar.
Clique para ampliar a imagem.
Altere o tamanho da fonte em Aparência > Fonte > Tamanho para que caiba na barra de PV.
Clique para ampliar a imagem.
Clique em Compilar. Agora você tem uma barra de PV e um texto de PV prontos!
Como configurar a barra de escudo e o texto
Para configurar sua barra de escudo e seu texto, repita os mesmos passos acima. Dessa vez, adicione um espaço entre a barra de PV e a barra de escudo. Como HPShieldsContainer é uma caixa de pilha, ela automaticamente coloca os widgets-filho horizontalmente.
Use um widget de imagem dentro da caixa de pilha para adicionar um espaço entre suas barras de vida e escudo. Configure o widget de imagem em branco fazendo o seguinte:
Aninhe uma Imagem sob a Caixa de Empilhamento.
Defina as propriedades do pincel da imagem como Desenhar como se não houvesse.
Isso significa que nada aparecerá no seu widget, mas o widget de imagem ainda ocupa espaço no seu layout. Assim, você pode gerenciar facilmente o espaçamento entre os elementos em uma caixa de pilha sem precisar depender de preenchimento.
Configure o Widget de escudo usando o mesmo processo que a barra de vida.
Para criar a barra de escudo mais rapidamente, duplique o HDOverlay clicando com o botão direito do mouse em HDOverlay na hierarquia e selecionando Duplicate.
Aninhe ShieldOverlay sob a Imagem Espaçadora para que ele apareça no final da Caixa de Empilhamento.
Os dois tipos de barras aparecem lado a lado no seu widget!
Renomeie suas variáveis para ShieldOverlay, ShieldBar e ShieldText, conforme visto na imagem de Hierarquia de widgets abaixo.
Agora você já pode criar as vinculações que adicionam funcionalidades às barras de progresso de vida e escudo.
Ver Vinculações
Como adicionar um modelo de visualização
Um modelo de visualização fornece uma maneira de adicionar funcionalidade de dispositivo a um Blueprint de widget. O modelo de visualização usa vinculações de visualização para identificar widgets no Blueprint e representar graficamente a funcionalidade do dispositivo para esse widget.
O modelo de visualização de informações do jogador do controlador do HUD fornece uma maneira de substituir partes do seu HUD por um widget personalizado.
Selecione Janela > Modelos de Visualização para abrir e adicionar um Modelo de visualização ao seu widget.
Na janela Modelo de visualização, selecione +Modelo de visualização. Será aberta uma janela mostrando todos os modelos de visualização atualmente disponíveis para uso.
Há dois tipos de modelos de visualização de controle do HUD disponíveis:
Selecione Dispositivo - Controlador do HUD - Modelo de visualização Lista de informações do jogador de equipe/esquadrão nas opções HUDPlayerInfoListViewModel. Com base nas informações acima, você deseja exibir apenas as informações do jogador que controla e não de sua equipe/esquadrão.
Selecione Dispositivo - Controlador do HUD - Modelo de visualização de informações do jogador se quiser criar widgets separados para o jogador de controle e seu esquadrão/equipe, use as propriedades em Dispositivo - Controlador do HUD - Modelo de visualização de informações do jogador para cada um desses widgets. Em seguida, você precisará criar um widget de pilha de esquadrão que vincule os modelos de visualização da lista de informações do jogador da equipe/esquadrão a seus modelos de visualização.
O modelo de visualização de lista de informações do jogador de equipe/esquadrão tem as mesmas informações que o modelo de visualização de informações do jogador do controlador do HUD, mas é usado de maneira diferente com base no cenário.
Selecione Modelo de visualização Lista de informações do jogador de equipe/esquadrão nas opções HUDPlayerInfoListViewModel. Com base nas informações acima, você deseja exibir apenas as informações do jogador que controla e não de sua equipe/esquadrão.
Agora é hora de configurar as vinculações que vinculam os dados do modelo de visualização ao seu widget!
Configurar Vinculações de Visualização de texto
Selecione Janela > Vinculações de Visualização para abrir a janela Vinculações de Visualização.
Selecione HPText na sua Hierarquia e selecione Adicionar Widget em Vinculações de Visualização para vincular HPText a mostrar seu Número de vida atual. Aparece uma vinculação vazia.
A caixa à esquerda é a Propriedade do Widget, e a caixa à direita representa os dados que você deseja vincular à Propriedade do Widget. Clique na caixa da esquerda e uma lista de propriedades do Bloco de Texto HPText será exibida. Selecione a propriedade Texto para passar os números de PV para essa propriedade.
A caixa à direita são os dados que você deseja transmitir para a propriedade de widget selecionada. No entanto, a propriedade "Text" aceita apenas dados do tipo "Text". Como o número de PV do Fortnite vem em um tipo Float (ou seja, Double), será necessário convertê-lo no tipo de texto apropriado. Clique na caixa à direita e selecione Funções de Conversão > Para Texto (Dupla).
Uma grande lista de opções é exibida. As configurações mais importantes geralmente estão na parte superior, enquanto o restante das configurações fornece uma maneira de formatar o valor final que é transmitido para sua propriedade Text.
Clique na imagem para ampliar.
Selecione o Ícone de link ao lado de Valor e, em seguida, selecione o Valor de vida no Modelo de visualização do Controlador do HUD.
Clique no campo vazio e selecione HUDPlayerInfoListViewmodel na coluna da esquerda, expanda Informações do Jogador Controlador à direita e selecione Vida.
Isso passa a propriedade Health: um tipo float (por exemplo: double), por meio da função To Text (Double) Conversion. To Text (Double) converte a vida em um tipo de texto, para que seja exibida no widget. A vida convertida é então passada para a propriedade Text do seu widget HDText.
Repita as etapas acima para configurar o widget ShieldText. As mesmas vinculações também mostrarão os números do escudo.
Definir parâmetro de material
Para obter mais detalhes sobre como funciona Definir parâmetro de material, consulte Definir Parâmetro de Material na documentação da Unreal Engine.
Agora, é hora de configurar a barra de progresso do círculo. O progresso muda com base nos níveis de vida e escudo dos jogadores.
Configure uma vinculação vazia para a HPBar do círculo.
Na caixa esquerda, selecione HPBar > Pincel. O pincel contém a instância de material da sua barra de PV do círculo.
Na caixa à direita, selecione Funções de Conversão > Definir Parâmetro Escalar.
Em Nome do Parâmetro, insira o nome do parâmetro que altera o progresso da sua barra de progresso.
Para procurar esse nome de parâmetro, abra a instância de material de sua barra de PV e observe os valores de parâmetros à direita.
O parâmetro que controla a barra de progresso é chamado de Progresso. Insira esse nome no campo Nome do parâmetro.
É importante que o nome do parâmetro seja o mesmo que o parâmetro na sua instância de material. Caso contrário, o material não funcionará no jogo.
Selecione o Ícone de link ao lado de Valor. Semelhante a ToText, vincule a Saúde do jogador a Valor.
Este é o resultado final da vinculação das estatísticas de vida e escudo no modelo de visualização. Agora, sempre que a vida do jogador mudar, ela passará a propriedade Health para a instância de material da barra de PV e atualizará o parâmetro escalar de Progresso.
Repita o mesmo para sua barra de escudo. Em vez de fazer a vinculação à propriedade Vida, ele deve ser vinculado à propriedade Escudo.
Agora as vinculações de PV e Escudo estão configuradas! É hora de exibir seu widget no HUD.
Configuração do Dispositivo Controlador do HUD
Coloque um dispositivo Controlador do HUD no seu nível.
No painel Detalhes do dispositivo, verifique se:
Mostrar HUD = Sim
No campo Substituir Widget de Informações do Jogador, use o widget que contém a Vida e os Escudos personalizados.
Clique na imagem para ampliar.
Selecione Iniciar Sessão, você deverá ver o widget Vida e Escudos no seu HUD! Teste sua IU recebendo dano e vendo-a atualizar suas estatísticas no HUD.
Outros exemplos de barras de progresso
O material retângulo pode ser encontrado em Fortnite > IU > Material, você pode personalizar a caixa básica para usar como plano de fundo de várias formas, para qualquer widget!
Crie uma instância de material a partir disso e comece a usá-la com UMG!
Usando as informações aqui e os materiais que fornecemos, tente criar estas barras de progresso:
Usando uma textura como plano de fundo para enquadrar seu avatar de jogador, nome de exibição e barra de PV.
Usando uma combinação de texturas, ícones, materiais de barra de progresso e o material Retângulo em Fortnite > IU > Material para estilizar barras de progresso básicas.
Barra de PV e escudo seccionada junto com o avatar do jogador e o nome de exibição.
