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 personalizado.
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 Fortnite Textures > Icons.
Crie 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 no Navegador de Conteúdo para abrir o menu de contexto.
-
Selecione Material no menu de contexto.
-
Dê ao seu material o nome de 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 em Fab .
Para obter mais informações sobre nós de material e como eles funcionam, consulte Nós e configurações de material.
Nós de material
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 |
|---|---|
| Constant 3Vector Expression | Adiciona uma cor ao ícone e ao preenchimento de progresso. |
| Linear Gradient | Usado para adicionar uma máscara de fundo abaixo do ícone. Também usado como barra de progresso para mascarar o plano de fundo de acordo com o progresso. |
| Texture Sample | Fornece uma maneira de adicionar uma textura ao material de IU. |
| Linear Interpolation (Lerp) | Usado 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. |
| Texture Coordinate | Gera as coordenadas de textura UV do ícone na forma de um valor vetorial de dois canais. |
| Material Function > UI Scale | Funções de textura são uma subcategoria do nó Material Function. Isso fornece uma maneira de dimensionar os UV do ícone. |
| Material Function > UI SDF Circle | 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. |
| AppendVector | 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 conecte-os a MF_UI_Scale. |
| Clamp | Os UV do ícone são fixados entre 0 e 1 para garantir que o ícone não será agrupado ou ladrilhado. |
| ConstantBiasScale | 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. |
| Multiply | 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. |
| Ceil | 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 Details do editor de material, defina Material Domain como User Interface.
-
Defina o Blend Mode como Translucent.
Clique na imagem para ampliar.
Defina a 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
-
Multiplicar
-
Constant3Vector
-
-
Arraste o pin branco do nó Constant3Vector e conecte-o à entrada A do 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.
Agrupe nós e mova-os como uma unidade.(convert:false)
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 > Textures > Icons.
-
Clique com o botão direito na área do gráfico e adicione os seguintes nós ao gráfico:
-
TextureCoordinate
-
AppendVector
-
Clamp
-
TextureSample
-
Constant3Vector
-
Multiplicar
-
Constante
-
-
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.
Selecione o nó Constant no gráfico, clique com o botão direito do mouse e selecione Duplicate no menu suspenso.
-
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.
- Clique com o botão direito do mouse no nó e selecione Convert to Parameter no menu suspenso. Defina IconScaleX como o nome do parâmetro. Esse nó controlará o tamanho da escala para as coordenadas X do ícone.
Clique com o botão direito do mouse no nó e selecione Convert to Parameter no menu suspenso.](ScaleColor-03.gif)(convert:false)
-
Selecione o nó Constant na parte inferior do gráfico e adicione um valor padrão de 0,7.
-
Clique com o botão direito do mouse no nó e selecione Convert to Parameter no menu suspenso. Defina IconScaleY como o nome do parâmetro. Esse nó controlará o tamanho da escala para as coordenadas Y do ícone.
Clique com o botão direito do mouse no nó e selecione Convert to Parameter no menu suspenso. Defina o nome do parâmetro como IconScaleY.](ScaleColor-05.gif)(convert:false)
-
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ó de função de material para adicionar uma função ao material que dimensiona os UV do ícone.
Configure 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.
- Clique com o botão direito no gráfico e procure Material Function. Selecione MaterialFunction no menu suspenso.](MaterialFunction-00.gif)(convert:false)
-
No painel Details, clique no menu suspenso Material Function, 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.
Configure UV 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 Scale (V2) no nó MF_UI_Scale.
-
Arraste o pin Result do nó MF_UI_Scale e conecte-o à entrada branca no nó Clamp.
-
Selecione o nó Texture Sample para abrir suas opções no painel Details.
-
Abra o menu suspenso Texture.
-
Digite icon na barra de pesquisa.
-
Selecione um ícone no menu suspenso.
-
-
Arraste o pin branco do nó Clamp e conecte-o à entrada UVs do nó Texture Sample.
Arraste o pin branco no nó Clamp e conecte-o à entrada UVs no nó Texture Sample.
-
Arraste o RGB pin 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 Alpha no segundo nó LinearInterpolate (Lerp).
-
Arraste o primeiro nó Multiply e conecte-o à entrada B do segundo nó Multiply.
Arraste o primeiro nó Multiply e conecte-o à entrada B do segundo nó Multiply.
-
Selecione o nó Constant3Vector para abrir suas opções no painel Details.
-
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 do segundo nó Multiply e conecte-o à entrada B do primeiro nó LinearInterpolate (Lerp).
-
Arraste o pin branco do primeiro nó Multiply e conecte-o à entrada Alpha no primeiro nó LinearInterpolate (Lerp).
-
Arraste o pin branco do primeiro nó Multiply e conecte-o à entrada B do segundo nó LinearInterpolate (Lerp).
-
Arraste o pin branco do primeiro nó LinearInterpolate (Lerp) para a entrada Final Color 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.
Configure 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.
(convert:false)
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 essa 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:
-
Constante
-
ConstantBiasScale
-
LinearGradient
-
Step
-
Multiplicar
-
-
Selecione o nó Constant, clique com o botão direito do mouse no nó e selecione Duplicate no menu suspenso.
-
Selecione o primeiro nó Constant e dê a ele um valor de 5,0.
-
Clique com o botão direito no nó e selecione Turn into Parameter.
-
Defina TrackerProgress como o nome do parâmetro.
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 pin 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 Details.
-
Digite UI_SDF_Circle na barra de pesquisa.
-
Selecione UI_SDF_Circle no menu suspenso.
Clique com o botão direito do mouse no gráfico e digite MaterialFunctionCall na barra de pesquisa. No painel Details, pesquise e selecione UI_SDF_Circle no menu suspenso Material Function.](Mask-09.png)
-
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 Size(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 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 do 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 Create Material Instance no menu suspenso.
