Há duas maneiras de criar um material de interface do usuário personalizado para o seu projeto:
Coleção de materiais: uma coleção de materiais que têm todas as funcionalidades de interface pré-construídas no material.
Material-pai personalizado: um material criado do zero usando funções de material.
Coleção de Materiais
A Coleção de Materiais é uma série de materiais e texturas de medidores altamente personalizáveis. Você pode encontrar a coleção de materiais no Navegador de Conteúdo, em Fortnite > IU > Materiais. Os materiais são divididos em dois tipos:
Materiais de medidor: normalmente usados como barras de progresso.
Texturas: normalmente usadas para iconografia e perfil de jogadores.
O material_collection_device tem um exemplo de como a coleção de materiais pode ser usada com Verse para exibir as texturas e os materiais, bem como usar os parâmetros das instâncias de material para alterar dinamicamente os materiais da interface quando eventos de dano acontecem no jogo.
Material-pai personalizado
Para criar um material pai personalizado para um widget de imagem UMG, você precisa definir o Domínio do Material como Interface do Usuário para o Nó Main Material. Esse material pai utiliza funções de materiais que tornam o material mais dinâmico.
Materiais são convertidos em instâncias de material para garantir a reutilização eficiente do material pai e uma interface mais amigável que permite personalizar os parâmetros do material. Os parâmetros do material são então atualizados na IU por meio das propriedades do widget UMG vinculadas.
Quaisquer alterações feitas em um material pai após a conversão serão propagadas em todas as suas instâncias de material.
No Navegador de Conteúdo, abra as pastas IU > Dispositivos > Controlador do HUD > MaterialInstances. Encontre e abra o material da barra de escudo chamado MI_HCD01_ShieldBar clicando duas vezes na miniatura. Isso abre a instância de material no Editor de Instância de Material.
Na seção anterior, Como definir parâmetros do dispositivo, foi explicado como a propriedade Progresso da instância de material era usada para atualizar a barra de escudo no HUD quando um jogador sofre dano de escudo ou conserta seu escudo. Essas mudanças são alcançadas usando as informações do jogador do Controlador HUD para informar à instância de material em que direção deslizar na barra com base nessas informações.
Materiais
O motivo pelo qual uma instância de material pode escutar a função de um dispositivo está no fato de ela ter parâmetros configurados em seu material pai. Os materiais da interface do usuário usam funções de material para criar ritmos ou padrões cronometrados no material que podem ser utilizados por meio de instâncias de material para atualizar as informações do jogador no HUD.
Este modelo usa as mesmas funções de material que o projeto UI Material Lab. Para entender melhor os diferentes tipos de funções de material e como elas foram usadas, consulte a página de detalhamento das funções de material do projeto UI Material Lab.
Abaixo está uma tabela que descreve os diferentes materiais criados para o projeto e como usá-los.
| Lista de materiais do projeto | Uso |
|---|---|
M_DropShadow | Cria uma sombra projetada para exibir sob uma forma. Permite quadrado, círculo, hexágono ou uma forma personalizada (usando uma textura). As formas personalizadas não permitem suavizar a sombra. |
M_IconWithbackground | Cria um ícone com segundo plano e contorno. |
M_Meter | Cria um medidor de barra simples para o dispositivo Interação Habilidosa. |
M_Notches | Cria entalhes decorativos uniformemente espaçados. Usado com M_Meter para criar um medidor de barras com entalhes para o dispositivo Interação Habilidosa. |
M_ProgressBar_Basic | Cria uma barra de progresso que tem cantos arredondados ou angulados com preenchimento e contorno de gradiente. |
M_ProgressBar_Orb | Cria uma barra de progresso na forma de um orbe que é preenchida conforme avança. Tem uma textura de ícone no centro do orbe. |
M_Texture_Complex | Permite o dimensionamento e/ou deformação de uma textura personalizada. Por exemplo, pode ser usado para criar um efeito de faísca ou subaquático. |
M_Texture_SImple | Permite a coloração de texturas simples. Pode ser usado com uma textura simples em preto e branco ou uma textura com muitos canais (usando canais RGB). |
M_Wave | Cria uma onda com bolhas flutuando até o topo. |
Grupos de parâmetros
Abra as diferentes instâncias de material do modelo para ver os diferentes parâmetros listados nos Grupos de Parâmetros. Estes são os parâmetros editáveis de funções de material que podem ser vinculados a dispositivos e atualizados no HUD.
Grupos de parâmetros podem ser editados no Editor de Instância de Material somente se estiverem marcados.
Para editar os parâmetros no Editor de Instância de Material, abra o Navegador de Conteúdo e as pastas de IU > Dispositivos > SkilledInteraction > MaterialInstances, em seguida localize e abra a instância de material MI_SID03_Water.
Comece alterando a cor da água, clique duas vezes nos parâmetros para Cor do Líquido 1 e Cor do Líquido 2. Isso abre a roda de cores. Mude a água para uma cor diferente. No exemplo abaixo, a cor da água é alterada de azul para verde.
Observe as bolhas com atenção. Se você tiver a janela do Editor de Instância de Material selecionada, deverá ver as bolhas no material flutuando para cima. Você pode alterar o tamanho das bolhas habilitando os parâmetros de tamanho CapturesStartSize e CapturesMiddleSize e, em seguida, editando seus parâmetros. Se o tamanho do parâmetro for muito grande, as bolhas aparentemente desaparecerão atrás de uma parede.
Parâmetros como esses podem ser definidos em Vinculações de Visualização e usados por funções de dispositivo para atualizar as informações do jogador.
Migre instâncias de material e recursos de textura para usar em seus próprios projetos.
Texturas
Texturas são usadas na IU para adicionar detalhes e nuances que não são possíveis apenas com materiais. Se você decidir usar texturas em seus designs de IU, esteja ciente de que texturas consomem muita memória.
Usando a Textura de Interação Habilidosa e as amostras combinadas de Textura e Material, você pode ver o quanto da IU é feita com texturas. Na amostra Textura, quando você desativa o widget Plataforma Traseira, as únicas partes da IU que ficam visíveis são a mensagem, a barra de vida e o contador de eliminações.
O método preferido para criar a aparência das caixas estilizadas na placa traseira é usar uma textura. A complexidade do design e da forma seria difícil de reproduzir no UMG. Materiais de IU só podem ser usados para criar formas primitivas básicas, adicionar um traçado ao redor da forma do material e adicionar gradientes à forma e ao traçado do material.
A amostra de IU com material e textura mostra como a mesclagem de texturas e materiais cria uma aparência refinada para a IU. A IU é composta de três texturas que compõem o design da placa traseira e a imagem da criatura.
A imagem da criatura é colocada em camadas no topo de um widget de imagem. O widget de imagem não usa uma instância de material. Em vez disso, a opção Pincel cria um retângulo branco na camada abaixo da imagem da criatura. O tamanho e as dimensões do retângulo são controlados no painel Detalhes usando as opções de tamanho da imagem.
No painel Hierarquia, os widgets que precedem os outros na lista ficam na camada de segundo plano, com cada widget adicional sobre o widget anterior na lista.
Uma instância de material é usada como uma sombra projetada para a fotografia da criatura no design.
Texturas SDF
O Campo de Distância Sinalizado (SDF) é uma função que usa a posição como entrada e gera a distância a partir dessa posição. Por exemplo, na imagem abaixo, o centro do radial é 1, o que significa totalmente branco, mas à medida que avança em direção à borda, faz a transição para 0, totalmente preto. Usando esse conceito, os SDFs oferecem uma maneira de especificar um intervalo de valores entre 0 e 1 para aplicar um efeito.
Isso significa que você pode:
Obter valores entre 0,5 e 1,0 e aplicar uma cor sólida.
Obter valores entre 0,49 e 0,0 e aplicar uma cor de esmaecimento que imite um brilho.
As texturas normais não fazem isso porque as texturas normais são 1 (brancas) ou 0 (pretas). Os SDFs fornecem todos esses dados entre 0 e 1.
Esses conceitos também podem ser aplicados à fotografia. Se uma fotografia é salva como um arquivo .png, o arquivo tem efeitos aplicados a ele, mas não há uma gama completa de detalhes de cores e iluminação na imagem. Portanto, há menos personalização que pode ser feita com a imagem, porque editar a imagem para que fique mais clara ou escura pode fazer com que ela perca detalhes ou que eles fiquem estourados.
Se essa mesma imagem tivesse sido tirada com uma câmera DSRL, o arquivo raw, que tem todas as informações de cor e iluminação, poderia ser personalizado quanto ao nível de granularidade, como tornar as partes escuras mais claras sem perder os detalhes nessas áreas escuras e vice-versa.
Consulte as pastas IU > textura > SDF para obter a visualização completa das texturas SDF para criar sua própria IU de aparência única.
Há uma pasta chamada Ícones cheia de ícones SDF.
Texturas SDF em materiais
A maioria dos materiais de IU é composta por materiais 2D planos que usam valores binários de 0 e 1 para definir a parte externa e interna do material. Em materiais 2D, quando texturas SDF são usadas em um nó de amostra de textura e associadas a uma função de material SDF, a IU pode ser ajustada manipulando-se alguns valores no material da IU.
Alterar diferentes valores em um material de IU usando texturas SDF e nós de material produz alguns efeitos diferentes, como:
Sombras
Desfoque
Brilho
Luminosidade
Contornos
Animações
Dimensionamento
As texturas SDF fazem com que os materiais da IU pareçam mais dinâmicos e únicos, pois fornecem uma maneira fácil de aumentar a escala sem perder a qualidade, enquanto os ativos regulares perdem a qualidade quando são ampliados ou reduzidos. As texturas SDF têm melhor otimização para fazer facilmente todos os efeitos usando apenas uma textura, criando um gráfico de material mais limpo.
Por outro lado, texturas regulares em preto e branco não são facilmente manipuladas no gráfico de material e dependem do uso de várias texturas. Na imagem acima, a maneira mais simples de adicionar brilho às texturas é colocando a textura em camadas sobre um gradiente radial, em vez de criar um gráfico de material detalhado para obter um resultado semelhante.
Nó de material Smooth Step
Os nós de material do tipo Step geralmente criam uma transição rígida nos materiais, por exemplo, de 0 a 0.25 diretamente. O nó Smooth Step, por outro lado, usa funções SDF para criar uma transição suave em materiais de IU. Os materiais de IU no modelo que usam texturas SDF estão usando o nó de material Smooth Step para criar uma transição suave do centro do material para a borda externa.
Conclusões
Aqui estão algumas sugestões importantes sobre o uso de materiais e texturas para ativos de IU:
Usar funções de material economiza tempo com nós de materiais predefinidos que fazem referência a funções nos seus materiais de barra de escudo e vida, bem como materiais de IU de plataforma traseira que fazem com que eles reajam a eventos no jogo.
Os materiais e texturas SDF criam uma interface do usuário com uma aparência mais dinâmica.
Entender como colocar seus widgets de imagem em camadas significa a diferença entre uma IU de aparência básica e uma IU visualmente mais interessante.
Texturas devem ser usadas para elementos de design que são visualmente complexos e não podem ser produzidos com materiais.