A personalização de texturas de interface de usuário é demorada e exige conhecimento profundo das funções e configurações do material. Para tornar as texturas de interface de usuário personalizadas mais acessíveis, o Unreal Editor para Fortnite (UEFN) tem uma série de texturas altamente personalizáveis.
Pastas de Materiais de Interface de Usuário
A pasta Materiais de Interface de Usuário fica no Navegador de Conteúdo em: Fortnite, Interface de Usuário, Materiais.
A pasta Materiais contém dois tipos de materiais de interface de usuário:
Materiais de medidor: normalmente usados para medir vida e escudos. (Consulte mais informações em: Coleções de Materiais de Interface de Usuário.)
Texturas: geralmente usadas como imagem de segundo plano ou em animações da interface de usuário.
Texturas pertencem às seguintes categorias de parâmetros:
Textura de SDF | Efeitos de Textura | Máscara de Textura |
Uma forma de textura com contorno difuso. Você pode definir parâmetros que personalizam:
Também pode girar e suavizar as texturas. | Uma textura com nove efeitos especiais personalizáveis diferentes. Todos os efeitos são acionados por funções de material que você personaliza usando entradas de parâmetros. | Uma máscara de textura oculta partes da textura com base nas suas entradas. Você pode definir parâmetros que fornecem uma forma de personalizar:
|
 |  |  |
Criar uma instância de Material
Para usar uma textura da pasta de interface de usuário, você deve primeiro transformá-la em uma instância de material. Instâncias de material usam menos memória do que materiais ou texturas e são muito mais personalizáveis no UMG devido aos parâmetros disponíveis.
Os parâmetros são manipulados no modelo de visualização, onde são vinculados a uma função de dispositivo ou código Verse que manipula o material para se comportar de uma determinada maneira.
Para criar uma instância de material a partir de um material, siga estas etapas:
Abra as pastas: Projeto, Fortnite, Interface de Usuário, Materiais.
Clique na imagem para ampliar. Clique com o botão direito em um material para abrir o menu de contexto suspenso.
Selecione Criar instância de material no menu suspenso.
Clique na imagem para ampliar.
Uma instância de material é gerada automaticamente na pasta principal do projeto.
Textura SDF
A textura de SDF pode substituir a imagem de ícone de avatar padrão da pessoa jogadora ou ser usada para iconografia. Uma textura de SDF tem vários parâmetros personalizáveis que você usa para determinar a aparência do ícone, torná-lo difuso ou nítido, criar um efeito de brilho para que o ícone se pareça com um letreiro de neon e muito mais.
Todos os parâmetros de uma textura podem ser usados com o modelo de visualização no UMG e no código Verse por meio dos campos em Verse. Use a tabela abaixo para saber mais sobre o uso dos diferentes parâmetros.
Base da R.X.O.
Os parâmetros básicos para a textura de SDF.
Parâmetro | Descrição | GIF |
Textura | Selecione uma textura de SDF no menu suspenso. | |
Cor | Selecione uma cor para a textura. |  |
Brilho Máximo | Aumenta e diminui o brilho da aresta da forma. Valores mais próximos de 0 consolidam o contorno da forma. Valores mais próximos de 1 aumentam o brilho do contorno da forma. Os parâmetros adicionais de GlowMax dependem do valor de GlowMax. |  |
Rotação | Gira a textura a partir do centro. Um valor de 0,25 gira a textura 90° para a esquerda. Um valor de -0,25 gira 90° para a direita. |  |
Quantidade de Suavização de Textura | Determina o nível de suavização aplicado nas arestas da textura de SDF quando os parâmetros GlowMax estiverem em uso. Valores altos aumentam a quantidade de suavização e valores baixos diminuem a quantidade de suavização. |  |
Cor das Sombras
Determina a cor da sombra da textura.
Parâmetro | Descrição | GIF |
Brilho Máximo da Sombra | Determina a quantidade de brilho da sombra da textura. Valores mais próximos de 0 solidificam o contorno da forma. Valores mais próximos de 1 aumentam o brilho do contorno da forma. |  |
Deslocamento X da Sombra | Determina a quantidade de deslocamento da sombra da textura ao longo do eixo X. Valores maiores afastam a sombra da textura. Valores menores aproximam a sombra da textura. |  |
Deslocamento Y da Sombra | Determina a quantidade de deslocamento da sombra da textura ao longo do eixo Y. Valores maiores afastam a sombra da textura. Valores menores aproximam a sombra da textura. |  |
Opacidade da Sombra | Determina a opacidade da sombra da textura. Valores mais próximos de 1 aumentam a opacidade da cor selecionada. Valores mais próximos de 0 diminuem a opacidade da cor. |  |
Rotação da Sombra | Gire a sombra da textura do centro. Um valor de 0,25 gira a sombra da textura 90° para a esquerda. |  |
Espessura da Sombra | Determina a espessura da sombra da textura. Valores maiores aumentam a espessura da sombra. Valores menores diminuem a espessura. |  |
Traçado
Parâmetros que afetam a aparência do traço da textura.
Parâmetro | Descrição | GIF |
Cor do Traço Interno | Determina a cor do traço interno da textura. |  |
Brilho Máximo do Traço Interno | Determina a quantidade máxima de brilho do contorno interno da textura. InnerStrokeGlowMax depende do valor de GlowMax. O valor máximo de GlowMax definido determina o valor máximo de brilho para InnerStrokeGlowMax e OuterStrokeGlowMax. |  |
Espessura do Traço Interno | Determina a espessura do traço interno. Valores maiores aumentam a espessura do traço e valores menores a reduzem. |  |
Brilho Máximo da Espessura do Traço Interno | Determina a espessura do brilho do contorno interno da textura. Valores maiores aumentam a espessura do brilho do traço, enquanto valores menores reduzem a espessura do brilho do traço interno da textura. InnerStrokeThicknessGlowMax depende do valor de GlowMax. O valor máximo de GlowMax definido determina o valor máximo de brilho para InnerStrokeGlowMax, InnerStrokeThicknessGlowMax e OuterStrokeGlowMax. |  |
Cor do Traço Externo | Determina a cor do traço externo. |  |
Brilho Máximo do Traço Externo | Determina a quantidade de brilho do traço externo da textura. Valores mais próximos de 0 consolidam o contorno da forma. Valores mais próximos de 1 aumentam o brilho do contorno da forma. OuterStrokeGlowMax depende do valor de GlowMax. O valor máximo de GlowMax definido determina o valor máximo de brilho para InnerStrokeGlowMax, InnerStrokeThicknessGlowMax e OuterStrokeGlowMax. |  |
Espessura do Traço Externo | Determina a espessura do traço externo da textura. Valores maiores aumentam a espessura do traço e valores menores a reduzem. |  |
Brilho Máximo da Espessura do Traço Externo | Determina a espessura do brilho do contorno externo da textura. Valores maiores aumentam a espessura do brilho do traço e valores menores a reduzem. |  |
Efeitos de textura
As texturas têm vários efeitos personalizáveis que podem transformar aparência dela:
Ladrilho
Distorcer
Pixelar
Rebater
Meio-tom
Gradiente Escalonado
E mais…
Os parâmetros podem ser combinados e direcionados com o modelo de visualização no UMG e no código Verse por meio de campos em Verse. Use a tabela abaixo para saber mais sobre os diferentes parâmetros.
Textura básica
Os parâmetros básicos para a textura. Selecione uma textura no menu suspenso.
Parâmetro | Descrição | GIF |
Textura | Selecione uma textura no menu suspenso. |  |
Ladrilhamento X | Ladrilha a textura ao longo do eixo X. Um valor de 1 não ladrilha a textura. Valores acima de 1 ladrilham ao longo do eixo X. É melhor usar números inteiros para que esse parâmetro tenha imagens completas. |  |
Ladrilhamento Y | Ladrilha a textura ao longo do eixo Y. Um valor de 1 não ladrilha a textura. Valores acima de 1 ladrilham a textura ao longo do eixo Y. É melhor usar números inteiros para que este parâmetro tenha imagens completas. |  |
Translação X | Move a textura ao longo do eixo X. Você pode animar a textura direcionando o parâmetro Translação X com o Sequencer dentro do UMG. |  |
Translação Y | Move a textura ao longo do eixo Y. Você pode animar a textura ajustando o parâmetro Translação Y com o Sequencer dentro do UMG. |  |
Velocidade da Translação X | Determina a velocidade de translação ao longo do eixo X. |  |
Velocidade da Translação Y | Determina a velocidade da translação no eixo Y. |  |
Dimensionamento
Parâmetros que oferecem uma forma de alterar a escala e o tamanho da textura. Cria um efeito de sombreamento na textura.
Parâmetro | Descrição | GIF |
Está Escalonando | Determina o efeito de escala na textura. Essa opção fica visível apenas quando os outros parâmetros de escala também estão em uso. |  |
Velocidade Máxima de Escalonamento | Determina a velocidade máxima do efeito de escala na textura. |  |
Velocidade Mínima de Escalonamento | Determina a velocidade mínima do efeito de escala na textura. |  |
Tamanho Inicial | O tamanho da textura no início da animação. |  |
Tamanho Intermediário | O tamanho da textura no meio da animação. |  |
Tamanho Final | O tamanho da textura no final da animação. |  |
Distorção
Parâmetros permitem adicionar um efeito de distorção à textura.
Para alterar a aparência de um ícone, parâmetros de distorção adicionais devem ser usados juntamente com o parâmetro IsWarping.
Parâmetro | Descrição | GIF |
Está Distorcendo | Determina a quantidade do efeito de distorção na textura. |  |
Amplitude X | Aplica um efeito de alongamento ao longo do eixo X. |  |
Amplitude Y | Aplica um efeito de alongamento ao longo do eixo Y. |  |
Frequência X | Aplica um efeito de onda senoidal à textura ao longo do eixo X. |  |
Frequência Y | Aplica um efeito de onda senoidal à textura ao longo do eixo Y. |  |
Velocidade de Distorção | Determina a velocidade do efeito de distorção na textura. |  |
Pixelar
Parâmetros que permitem pixelizar a aparência da textura.
Parâmetro | Descrição | GIF |
Está Pixelizado | Adiciona um efeito de pixel à textura. Um valor de 0 não aplica o efeito de pixel à textura. Um valor de 1 pixeliza completamente a textura. |  |
Número de Pixels | Determina o número de pixels que a textura tem. Um valor de 1 transforma a textura em um quadrado. Adicionar mais pixels cria uma forma pixelizada. |  |
Rebater
Parâmetros que permitem adicionar um efeito de rebate à textura.
Parâmetro | Descrição | GIF |
Está Rebatendo | Determina a taxa de rebate do efeito. Essa opção só fica visível quando os outros parâmetros de rebate também estão em uso. |  |
Velocidade de Rebate | Determina a velocidade com que a textura rebate. |  |
Rebate X | Determina a quantidade de efeito de rebate a ser aplicado ao longo do eixo X. |  |
Rebate Y | Determina a quantidade de efeito de rebate a ser aplicado ao longo do eixo Y. |  |
Meio-tom
Parâmetros que produzem um efeito de ponto de tinta de quadrinhos na textura.
Parâmetro | Descrição | GIF |
É Meio-tom | Determina se o efeito está em uso e a opacidade do efeito de meio-tom. Valores maiores aumentam a opacidade do efeito, enquanto valores menores a diminuem. |  |
Densidade de Pontos | Aumenta a densidade dos pontos no efeito. Valores maiores aumentam o número de pontos e reduzem o tamanho deles. Valores menores diminuem o número de pontos e aumentam o tamanho deles. |  |
Brilho Máximo dos Pontos | Determina a quantidade máxima de brilho aplicado ao redor dos pontos. Valores positivos fazem com que os pontos apareçam como estrelas, valores negativos fazem com que apareçam como círculos. |  |
Brilho Mínimo dos Pontos | Determina a quantidade mínima de brilho ao redor dos pontos. Os valores podem ser usados para alterar a cor do segundo plano e dos pontos. Valores iguais ou maiores que 5 fazem com que o efeito esmaeça, compondo uma única cor. Da mesma maneira, valores menores que -7 fazem com que o efeito esmaeça, compondo uma única cor. |  |
Tamanho Máximo dos Pontos | Determina o tamanho máximo dos pontos. |  |
Tamanho Mínimo dos Pontos | Determina o tamanho mínimo dos pontos. |  |
Cor 1 do Gradiente | Determina a cor principal do efeito de meio-tom. |  |
Cor 2 do Gradiente | Determina a cor secundária do efeito de meio-tom. |  |
Velocidade X de Panorâmica de Meio-Tom | Determina a velocidade com que os pontos se deslocam pelo eixo X. |  |
Velocidade Y de Panorâmica de Meio-Tom | Determina a velocidade com que os pontos percorrem o eixo Y. |  |
Rotação de Meio-Tom | Gira a direção em que os pontos se deslocam. |  |
Gradiente Escalonado
Parâmetros que permitem adicionar um gradiente escalonado à textura.
Esses parâmetros dependem dos parâmetros de Cor de Matiz.
Parâmetro | Descrição | GIF |
É Gradiente Escalonado | Determina se o efeito de gradiente escalonado foi aplicado à textura. |  |
Quantidade de Gradiente Escalonado | Determina a quantidade de gradiente escalonado a ser aplicada à textura. IsSteppedGradient deve ser habilitado com um valor abaixo de 1,0 para que este parâmetro funcione. |  |
Cor de Matiz
Esses parâmetros permitem adicionar cores à textura para criar um efeito de gradiente nela.
Parâmetro | Descrição | GIF |
Opacidade do Gradiente de Matiz | Determina a opacidade das cores no gradiente. Valores menores diminuem a opacidade da textura e valores maiores aumentam a opacidade. |  |
Cor do Matiz 1 | Determina a primeira cor no gradiente. |  |
Posição da Cor do Matiz 1 | Determina a posição da primeira cor no gradiente. Esta opção só funciona quando a opção TintGradientOn está selecionada e tem um valor definido. |  |
Cor do Matiz 2 | Determina a segunda cor no gradiente. |  |
Posição da Cor do Matiz 2 | Determina a posição para a segunda cor no gradiente. Valores maiores deslocam o gradiente para começar no lado oposto. Valores menores aumentam a aparência da seleção da segunda cor. Esta opção só funciona quando a opção Tint GradientOn está selecionada e tem um valor definido. | |
Cor do Matiz 3 | Determina a terceira cor no gradiente. | |
Posição da Cor do Matiz 3 | Determina a posição para a segunda cor no gradiente. Valores maiores deslocam o gradiente para começar no lado oposto. Valores menores aumentam a aparência da seleção da segunda cor. Esta opção só funciona quando a opção TintGradientOn está selecionada e tem um valor definido. | |
Gradiente de Matiz Ligado | Determina se o efeito de gradiente é aplicado à textura. | |
Rotação do Gradiente de Matiz | Gira a direção do gradiente. |  |
Gradiente Radial de Matiz | Transforma o gradiente em um gradiente radial. | |
Tamanho do Gradiente Radial de Matiz | Determina o tamanho do gradiente radial. |
Cor Alfa
Parâmetros que permitem adicionar transparência, cor e gradiente a uma textura que tenha alfa.
Esses parâmetros funcionam melhor em texturas que têm cores, como uma imagem de personagem ou uma textura em preto e branco.
Parâmetro | Descrição | GIF |
Opacidade da Alfa | Determina a opacidade das cores alfa na textura. Valores menores diminuem a opacidade da textura e valores maiores aumentam a opacidade. |  |
Cor Alfa 1 | Determina a primeira cor no gradiente. |  |
Posição da Cor Alfa 1 | Determina a posição da primeira cor no gradiente. Esta opção só funciona quando a opção AlphaGradientOn está selecionada e tem um valor definido. |  |
Cor Alfa 2 | Determina a segunda cor no gradiente. |  |
Posição da Cor Alfa 2 | Determina a posição para a segunda cor no gradiente. Valores maiores deslocam o gradiente para começar no lado oposto. Valores menores aumentam a aparência da seleção da segunda cor. Esta opção só funciona quando a opção AlphaGradientOn está selecionada e tem um valor definido. |  |
Cor Alfa 3 | Determina a terceira cor no gradiente. |  |
Posição de Cor Alfa 3 | Determina a posição da terceira cor no gradiente. Valores maiores deslocam o gradiente para começar no lado oposto. Valores menores aumentam a aparência da seleção da terceira cor. Esta opção só funciona quando a opção AlphaGradientOn está selecionada e tem um valor definido. |  |
Gradiente da Alfa Ligado | Determina se o gradiente é aplicado à textura. |  |
Rotação do Gradiente da Alfa | Gira a direção do gradiente. |  |
Gradiente Radial da Alfa | Transforma o gradiente em um gradiente radial. |  |
Tamanho do Gradiente Radial da Alfa | Determina o tamanho do gradiente radial. |  |
Máscara de Textura
A máscara de textura usa parâmetros que podem mascarar o ícone ou o avatar da pessoa jogadora e adicionar elementos de contorno ao ícone ou à imagem do avatar.
O material da máscara de textura tem vários parâmetros personalizáveis que você utiliza com o modelo de visualização no UMG e no código Verse por meio de campos em Verse. Use a tabela abaixo para saber mais sobre o uso dos diferentes parâmetros.
Textura
Parâmetros que determinam a aparência da textura.
Parâmetro | Descrição | GIF |
Textura | Selecione uma textura no menu suspenso. |  |
Textura Alfa | Determina a cor alfa da textura. Um valor igual a 1 significa branco. Valores abaixo de 1 diminuem o valor de branco e se mesclam com a cor de fundo. |  |
Posição X da Textura | Posiciona a textura ao longo do eixo X. |  |
Posição Y de Textura | Posiciona a textura ao longo do eixo Y. |  |
Escala X da Textura | Dimensiona a textura ao longo do eixo X. |  |
Escala Y da Textura | Dimensiona a textura ao longo do eixo Y. |  |
Preencher
Parâmetros que determinam a aparência do gradiente aplicado ao segundo plano.
Parâmetro | Descrição | GIF |
Textura de Preenchimento Personalizada | Selecione uma textura de preenchimento no menu suspenso. | |
Alfa de Preenchimento | Determina a cor alfa da máscara. Um valor de 1 significa branco, valores abaixo de 1 diminuem o valor de branco e se mesclam com a cor de fundo. |  |
Cor de Preenchimento 1 | Determina a primeira cor no gradiente. |  |
Posição do Gradiente de Cor de Preenchimento 1 | Determina a posição da primeira cor no gradiente. |  |
Cor de Preenchimento 2 | Determina a segunda cor no gradiente. |  |
Posição do Gradiente de Cor de Preenchimento 2 | Determina a posição para a segunda cor no gradiente. Valores maiores deslocam o gradiente para começar no lado oposto. Valores menores aumentam a aparência da seleção da segunda cor. |  |
Cor de Preenchimento 3 | Determina a terceira cor no gradiente. |  |
Posição do Gradiente de Cor de Preenchimento 3 | Determina a posição da terceira cor no gradiente. Valores maiores deslocam o gradiente para começar no lado oposto. Valores menores aumentam a aparência da seleção da terceira cor. |  |
Tamanho do Gradiente Radial da Cor de Preenchimento | Determina o tamanho do gradiente no segundo plano. |  |
Tipo de Gradiente de Preenchimento | Altera o tipo de gradiente de radial para linear. |  |
Brilho | Determina a quantidade de brilho do segundo plano. | |
Rotação do Preenchimento do Gradiente Linear | Gira o gradiente em torno de um círculo. A opção LinearGradientFillRotation depende dos valores definidos na opção FillGradientType. |  |
Forma | Determina a forma da máscara ao redor da textura. |  |
Rotação da Forma | Gira a forma da máscara ao redor da textura. |  |
Tamanho da Forma | Determina o tamanho da forma da máscara ao redor da textura. |  |
Raio do Canto Inferior esquerdo | A alteração desse parâmetro adiciona um canto arredondado ao canto inferior esquerdo com base no valor usado. |  |
Raio do Canto Inferior Direito | Alterar esse parâmetro adiciona um canto arredondado ao canto inferior direito com base no valor usado. |  |
Raio do Canto Superior Esquerdo | Alterar esse parâmetro adiciona um canto arredondado ao canto superior esquerdo com base no valor usado. |  |
Raio do Canto Superior Direito | A alteração desse parâmetro adiciona um canto arredondado ao canto superior direito com base no valor usado. |  |
Contorno
Parâmetros que determinam a aparência do contorno ao redor da máscara.
Parâmetro | Descrição | GIF |
Espessura da Lacuna | Determina o tamanho da lacuna entre o contorno e a textura. A opção GapThickness depende de a opção OutlineAlpha ter um valor definido acima de 0,40. |  |
Alfa do Contorno | Determina a cor alfa do contorno. Um valor de 1 significa a cor alfa completa, valores abaixo de 1 diminuem o valor da cor e se mesclam com o segundo plano. |  |
Cor do Contorno 1 | Determina a primeira cor no gradiente do contorno. |  |
Posição da Cor do Contorno 1 | Determina a posição da primeira cor no gradiente do contorno. |  |
Cor do Contorno 2 | Determina a segunda cor no gradiente do contorno. |  |
Posição da Cor do Contorno 2 | Determina a posição da segunda cor no gradiente do contorno. |  |
Cor do Contorno 3 | Determina a terceira cor no gradiente do contorno. |  |
Posição da Cor do Contorno 3 | Determina a posição da terceira cor no gradiente do contorno. |  |
Espessura do Contorno | Determina a espessura do contorno. |  |
Máscara de Textura
Parâmetros para alterar a aparência da máscara de textura.
Parâmetro | Descrição | GIF |
Mostrar Prévia da Máscara | Determina a opacidade da prévia máscara. Um valor de 0 significa que a prévia está invisível, e um valor de 1 significa que a máscara está completamente visível. Esse parâmetro fica visível apenas quando as opções MaskWidth e MaskHeight têm valores maiores que 0,0. |  |
Posição X da Máscara | Posicione a máscara ao longo do eixo X. |  |
Posição Y da Máscara | Posicione a máscara ao longo do eixo Y. |  |
Altura da Máscara | Determina a altura da máscara. |  |
Largura da Máscara | Determina a largura da máscara. |  |
Declive
Parâmetros que determinam o grau de inclinação a ser aplicado ao segundo plano e ao contorno da máscara.
Parâmetro | Descrição | GIF |
Inclinação X | Inclina o segundo plano e o contorno da máscara ao longo do eixo X. |  |
Inclinação Y | Inclina o segundo plano e o contorno da máscara ao longo do eixo Y. |  |