O material de Medidor é perfeito para uso na IU. Esse material pode ser referenciado em um widget de imagem UMG para rastrear sua saúde, eliminações ou coleção de itens e moeda no jogo. Use este tutorial para criar seu próprio material de Medidor e usá-lo em um design de IU personalizada.
Esse material pode substituir o visual padrão do Fortnite pelo material personalizado que você cria para rastrear a saúde, os escudos ou outro tipo de estatística centrada no jogador.
Este material usa ícones em seu design. O Unreal Editor para Fortnite (UEFN) vem nativamente com vários ícones. Encontre os ícones nas pastas do Fortnite Texturas > Ícones.
Criar um material
Todos os materiais são criados no Navegador de Conteúdo. Para organizar seu projeto, crie uma pasta para armazenar todos os seus materiais.
Clique com o botão direito do mouse noNavegador de Conteúdo para abrir o menu de Contexto.
Selecione Material no menu de contexto.
Dê ao seu material o nome M_Meter.
Clique duas vezes na miniatura do material para abrir o Editor de Material.
Para criar o material do medidor, você precisará baixar o Laboratório de materiais de IU na Fab.
Para obter mais informações sobre nós de material e como eles funcionam, consulte Nós de material e configurações.
Nós de materiais
Veja a seguir uma lista dos nós de material usados neste tutorial e sua finalidade no produto final. Para pular esta explicação e começar a criar o material, clique aqui.
| Nó de material | Objetivo |
|---|---|
Adiciona uma cor ao ícone e ao preenchimento de progresso. | |
Usado para adicionar uma máscara de plano de fundo abaixo do Ícone. Também usado como barra de progresso para mascarar o plano de fundo de acordo com o progresso. | |
Fornece uma maneira de adicionar uma textura ao material de IU. | |
Usada para sobrepor o ícone colorido sobre uma cor de plano de fundo, bem como criar a máscara para o ícone sobre o plano de fundo. | |
Gera as coordenadas de textura de UV do ícone, na forma de um valor vetorial de dois canais. | |
Função de material > Escala da IU | Funções de textura são uma subcategoria do nó Material Function. Isso fornece uma maneira de dimensionar os UV do ícone. |
Função de material > Círculo de SDF da IU | Fornece uma maneira de mascarar a barra de progresso atrás do ícone e quanto do círculo é preenchido com a cor de plano de fundo. Normalmente, essa função de material é usada para traçar um círculo no material. Pode ser substituída por outras funções de material de forma SDF (por exemplo, caixa de SDF da IU) do ambiente de material da IU para gerar uma forma diferente. |
Usado para dimensionar os eixos X e Y do ícone uniformemente, onde anexamos dois parâmetros escalares. Um para dimensionar o X do ícone e outro para o Y do ícone e conectá-los a MF_UI_Scale. | |
Os UV do ícone são fixados entre 0 e 1 para garantir que o ícone não será agrupado ou ladrilhado. | |
Usado para criar um intervalo de 0 a 10 para o parâmetro escalar de progresso no dispositivo Rastreador. O ConstantBiasScale recebe o valor definido do parâmetro, deduz o valor de polarização e o multiplica pelo valor da escala. | |
O nó Multiply usa duas entradas, as multiplica e gera o resultado. Neste exemplo, os canais RGB de uma textura são multiplicados por um nó Vector3 para colorir o plano de fundo. Além disso, LinearGradient é multiplicado por um Vector3 para colorir o ícone. | |
Step | Cria um limite para as coordenadas X e Y. O limite cria um contêiner para o material de fundo na IU. Os nós Step transformam os valores acima de um limite para 1 e abaixo do limite para 0. Isso gera a máscara para uma barra de progresso em que há uma separação clara entre uma área preenchida e não preenchida. |
Aceita os valores de UGradient do gradiente linear, arredonda-os para o próximo número inteiro e gera o resultado. Isso nos permite criar facilmente um plano de fundo sólido básico. | |
Constant | Fornece uma maneira de adicionar um valor a um atributo de material. |
Prepare o nó Main Material
Antes de adicionar nós de material, prepare o material a ser usado na IU alterando as configurações no Nó Main Material (MMN). As configurações no MMN determinam quais entradas estão disponíveis no MMN e onde o material pode ser usado.
Selecione o nó MMN.
No painel Detalhes do Editor de Material, defina o Domínio do material como Interface do usuário.
Defina o Modo de mesclagem como Translúcido.
Clique na imagem para ampliar.
Definir cor do progresso
Comece o material do medidor definindo a Cor do progresso, que pode ser identificada no UMG por meio do widget de imagem. Você pode usar essa cor do progresso para criar um design de IU personalizado.
Clique com o botão direito do mouse no Gráfico de material para abrir o menu de nós.
Digite Linear Gradient na barra de pesquisa. Selecione LinearGradient no menu suspenso. O nó aparece no gráfico.
Repita as etapas um e dois para adicionar os seguintes nós ao Gráfico de material:
Ceil
Multiply
Constant3vector
Arraste o pin branco no nó Constant3Vector e conecte-o à entrada A no nó Multiply. A forma na janela de visualização muda de cor.
Selecione o nó de material Constant3Vector no Gráfico de material. O nó é destacado no gráfico para indicar que você o selecionou.
Clique no quadrado preto do nó para abrir a Roda de cores. Selecione uma cor na roda de cores para o material.
Arraste o pin UGradient no nó Linear Gradient e conecte-o à entrada esquerda no nó Ceil.
Arraste o pin direito no nó Ceil e conecte-o à entrada B no nó Multiply.
Essa configuração de nó fornece a cor para o contêiner de IU.
Clique com o botão direito na área do gráfico e adicione um nó LinearInterpolate ao gráfico.
Arraste o nó Multiply e conecte-o à entrada A no primeiro nó LinearInterpolate.
Essa parte do material é usada para acompanhar o progresso em um medidor, preenchendo o plano de fundo de um contêiner.
Para agrupar nós e movê-los como uma unidade, faça o seguinte:
Clique com o botão esquerdo e arraste em torno de um grupo de nós. Todos os nós selecionados são realçados.
Pegue um nó e arraste pelo gráfico, todos os nós selecionados se movem juntos como uma só peça.
Configure o dimensionamento e a cor do ícone
Para essa seção do material, você escolherá, dimensionará um ícone e selecionará uma cor para o ícone no material e na IU. Os ícones podem ser encontrados nas pastas Fortnite > Texturas > Ícones.
Clique com o botão direito na área do gráfico e adicione os seguintes nós ao gráfico:
TextureCoordinate
AppendVector
Fixar
TextureSample
Constant3vector
Multiply
Constant
Selecione o nó Constant no gráfico, clique com o botão direito do mouse e selecione Duplicate no menu suspenso. Outro nó Constant aparece no primeiro. Mova o nó duplicado para baixo do original.
Duplicar o nó Multiply.
Duplique o nó LinearInterpolate (Lerp).
Selecione o nó Constant superior no gráfico e adicione um Valor padrão de 0,7.undefined
Clique com o botão direito do mouse no nó e selecione Converter em parâmetro no menu suspenso. Defina IconScaleX como o nome do parâmetro. Esse nó controlará o tamanho da escala para as coordenadas X do ícone.
Selecione o nó inferior Constant no gráfico e adicione um Valor padrão de 0,7.
Clique com o botão direito do mouse no nó e selecione Converter em parâmetro no menu suspenso. Defina IconScaleY como o nome do parâmetro. Esse nó controlará o tamanho da escala para as coordenadas Y do ícone.
Arraste o nó de parâmetro IconScaleX e conecte-o à entrada A no nó AppendVector.
Arraste o nó de parâmetro IconScaleY e conecte-o à entrada B no nó AppendVector.
Os valores de IconScale X e Y definidos no nó de parâmetro podem ser controlados fora do material quando transformados em uma instância de material.
Em seguida, você precisará criar um nó Material Function para adicionar uma função ao material que dimensiona os UV do ícone.
Configurar uma função de material: UI_Scale
Nesta etapa, você aprenderá a criar uma função de material e pesquisar funções para usar com o nó.
Clique com o botão direito do mouse no gráfico e digite MaterialFunction na barra de pesquisa. Selecione MaterialFunctionCall no menu suspenso. O nó MaterialFunctionCall aparece no gráfico.
No painel Detalhes, clique no menu suspenso Função de material, digite UI_Scale na barra de pesquisa e selecione MF_UI_Scale no menu suspenso. O nó MaterialFunctionCall se transforma no nó UI Scale.
A função UI_Scale fornece uma maneira de aumentar ou diminuir a escala dos UV do ícone usando funções de material. Funções de material só podem ser usadas em um material por meio do nó de função de material.
Configurar UVs de ícone
Em seguida, você adicionará um ícone e uma cor de ícone ao material que será dimensionado ao obter as informações dos parâmetros e do dimensionamento da IU.
Arraste o nó TextureCoordinate e conecte-o à entrada UVs (V2) no nó MF_UI_Scale.
Arraste o nó AppendVector e conecte-o à entrada Escala (V2) no nó MF_UI_Scale.
Arraste o pino Result no nó MF_UI_Scale e conecte-o à entrada branca no nó Clamp.
Selecione o nó Texture Sample para abrir suas opções no painel Detalhes.
Abra o menu suspenso Textura.
Digite ícone na barra de pesquisa.
Selecione um ícone no menu suspenso.
Arraste o pin branco no nó Clamp e conecte-o à entrada UVs no nó Texture Sample.
Arraste o pin RGB no nó Texture Sample e conecte-o à entrada A no primeiro nó Multiply.
Arraste o pin A no nó Texture Sample e conecte-o à entrada B no primeiro nó Multiply.
Arraste o pin A no nó Texture Sample novamente e conecte-o à entrada Alfa no segundo nó LinearInterpolate (Lerp).
Arraste o primeiro nó Multiply e conecte-o à entrada B no segundo nó Multiply.
Selecione o nó Constant3Vector para abrir suas opções no painel Detalhes.
Clique no campo Constant para abrir a Roda de cores.
Selecione uma cor para o ícone na roda de cores.
Arraste o pin branco do nó Constant3Vector e conecte-o à entrada A no segundo nó Multiply.
Arraste o pin branco no segundo nó Multiply e conecte-o à entrada B no primeiro nó LinearInterpolate (Lerp).
Arraste o pin branco no primeiro nó Multiply e conecte-o à entrada Alfa no primeiro nó LinearInterpolate (Lerp).
Arraste o pin branco no primeiro nó Multiply e conecte-o à entrada B no segundo nó LinearInterpolate (Lerp).
Arraste o pin branco no primeiro nó LinearInterpolate (Lerp) para a entrada Cor final no nó Main Material.
O ícone agora aparece na janela de visualização do material.
Em seguida, você configurará a máscara para a barra de progresso. Isso funciona revelando apenas a parte do material que corresponde ao aumento de eliminações, assim como no gif abaixo.
Configurar uma máscara de barra de progresso
A última etapa do material é criar uma máscara para a barra de progresso que pode ser chamada em um widget ou no Sequencer para animar o material de IU, fazendo com que a barra de progresso seja preenchida com a cor do material conforme o jogador elimina inimigos.
Você precisa criar espaço para a próxima série de nós. Selecione todos os nós atualmente existentes clicando com o botão esquerdo e arrastando em torno deles. Em seguida, mova-os para a esquerda como um único grupo.
Você precisará conectar a configuração da máscara ao segundo nó LinearInterpolate (Lerp). Selecione o segundo nó LinearInterpolate (Lerp) e mova-o para a direita em direção ao nó Main Material. Veja a seguir como deve ser a configuração do nó nesse ponto.
Clique na imagem para ampliar.
Para esta seção do material, você precisará mascarar as propriedades do material com base nas coordenadas X e Y no contêiner. Essas coordenadas também serão usadas para revelar o material à medida que as eliminações de jogadores aumentarem.
Clique com o botão direito na área do gráfico e adicione os seguintes nós ao gráfico:
Constant
ConstantBiasScale
LinearGradient
Step
Multiply
Selecione o nó Constant, clique com o botão direito do mouse no nó e selecione Duplicar no menu suspenso.
Selecione o primeiro nó Constant e atribua a ele um valor de 5,0.
Clique com o botão direito no nó e selecione Transformar em parâmetro.
Defina o nome do parâmetro como TrackerProgress.
Esse parâmetro será usado no UMG e no Sequencer para rastrear as eliminações do jogador e fazer com que o material seja revelado no contêiner.
Arraste o pin branco do nó Tracker Progress e conecte-o ao nó ConstantBiasScale.
Selecione o nó ConstantBiasScale e, no painel Details, defina o valor de polarização como 0 e dimensione como 0,1. Isso normaliza TrackerProgress para o valor de 0-10 do rastreador.
Arraste o nó ConstantBiasScale e conecte-o à entrada Y no nó Step.
Arraste o pino VGradient no nó LinearGradient e conecte-o à entrada X no nó Step.
Arraste o pin branco no nó Step e conecte-o à entrada B no nó Multiply.
Selecione o segundo nó Constant e dê a ele um valor de 0,9.
Clique com o botão direito do mouse no gráfico e digite MaterialFunctionCall na barra de pesquisa.
Selecione o nó Material Function para que suas opções sejam abertas no painel Detalhes.
Digite UI_SDF_Circle na barra de pesquisa.
Selecione UI_SDF_Circle no menu suspenso.
Essa função de material controla o tamanho do contêiner por meio do nó Constant e determina a forma do contêiner de material. Neste caso, é um contêiner de círculo.
Arraste o segundo nó Constant e conecte-o à entrada Tamanho(s) no nó MF_UI_SDF_Circle.
Arraste o pin Fill no nó MF_UI_SDF_Circle e conecte-o à entrada A no nó Multiply.
Arraste o pin branco do nó Multiply e conecte-o à entrada A no segundo nó LinearInterpolate (Lerp).
Arraste o pin branco no segundo nó LinearInterpolate (Lerp) e conecte-o à entrada Opacity no nó Main Material.
O material está completo, a configuração completa do nó deve se parecer com a imagem abaixo.
Clique na imagem para ampliar.
Para usar esse material com UMG, transforme-o em uma instância de material. Os parâmetros de uma instância de material podem ser substituídos, ativados ou desativados e chamados no UMG e no Sequencer para animar a IU com a qual o material é usado.
Para criar uma instância de material:
Clique com o botão direito na miniatura do material no Navegador de conteúdo.
Selecione Criar instância de material no menu suspenso.