Criar seu primeiro gráfico de textura

O Editor de gráfico de textura é uma interface baseada em nós para a criação processual de texturas na Unreal Engine. Este guia orienta você na criação de um gráfico de textura que gera um padrão de xadrez de UV personalizado.

O gráfico oferece personalização para o número de blocos, cores, linhas de grade e setas. A construção desse gráfico explora alguns conceitos centrais e fluxos de trabalho associados a um gráfico de textura.

Antes de criar seu primeiro gráfico, é útil revisar o guia Primeiros passos com o Gráfico de textura para obter uma visão geral do editor e alguns conceitos gerais úteis.

Carregamento do plugin

O Editor de gráfico de textura é um plugin experimental que não é carregado por padrão quando você inicia a engine.

Para habilitar o plugin, siga estas etapas:

1. Na barra de menus, selecione Editar > Plugins.
2. Na barra de pesquisa, digite "gráfico de textura".
3. Habilite o plugin TextureGraph e selecione Sim na caixa de diálogo pop-up.
4. Reinicie a engine.

Ativo de gráfico de textura

Para criar um novo gráfico de textura, siga estas etapas:

1. Abra a Gaveta de Conteúdo e clique em Adicionar > Textura > Gráfico de textura.
2. Renomeie o novo ativo como "TG_UVChecker".
3. Salve o ativo e clique duas vezes nele para abrir o editor.

Construir o ladrilho de xadrez base

A base do padrão é um bloco de dois por dois que você pode repetir e editar.

Este guia constrói o padrão a partir do zero para explorar alguns fluxos de trabalho e controles de usuário.

Se você precisar de um padrão de xadrez rápido, pode explorar o nó Padrão, que tem opções para vários tipos de padrão.

Para começar a criar o padrão de xadrez, siga estas etapas:

1. Na paleta de nós, acesse a seção Procedural e arraste o nó Forma para o gráfico. Expanda o nó clicando na seta para baixo para visualizar todas as opções possíveis.
2. Altere ShapeType para um retângulo.
3. Clique e arraste o pin Saída para fora. Quando você libera a seleção, a paleta de nós é aberta. Pesquise e selecione Transformação na lista. Os nós Forma e Transformação se conectam automaticamente.
   1. Ao criar nós usando essa técnica, lembre-se de que a conexão se liga ao valor de entrada superior.
4. Expanda o nó Transformação e ajuste a Cobertura para 0,5, 0,5. O ajuste da cobertura na transformação dimensiona a imagem de entrada (nesse caso, um retângulo simples) para o valor especificado. Por padrão, a cor de preenchimento está vazia com cor ou valor alfa. Você pode definir a cor de preenchimento nos detalhes.
5. No nó Forma, arraste um segundo nó Transformação. Defina a Cobertura na segunda transformação como 0,5, 0,5 e o Deslocamento como 0,5, 0,5. Agora, você pode minimizar os nós de transformação para que eles ocupem menos espaço.
6. Clique com o botão direito do mouse na visualização do gráfico e, no menu, localize o nó Adicionar rolando para baixo até Matemática ou Pesquisa.

7. Conecte os valores de saída dos nós Transformação às entradas A e B do nó Adicionar. O resultado é uma única peça de xadrez de 4 quadrados.

   
8. À medida que você constrói seu gráfico, é importante mantê-lo organizado. Selecione todos os nós, clique com o botão direito do mouse no gráfico e, em seguida, pesquise e selecione Novo comentário. A caixa de comentários contém os quatro nós. Nomeie o comentário como "CheckerBlock".

Criar linhas divisórias

Com o bloco de xadrez básico, você pode sobrepor linhas divisórias e controlar a espessura e o valor do raio do canto.

Para adicionar as linhas divisórias, siga estas etapas:

1. Crie um nó Forma, defina a forma como retângulo e defina a largura e a altura como 0,9.
2. Arraste o pin de saída do nó Forma e, em seguida, pesquise e selecione Transformação.
3. No nó Transformação, defina o valor Repetir como 2.0,2.0.
4. Arraste o pin de saída e, em seguida, pesquise e selecione Inverter. Esse nó fornece os valores adequados para sua máscara de linha.

5. No nó Inverter, ative Fixar.

   
6. Com a estrutura básica para as linhas criada, você pode adicionar um mecanismo para ajustar a espessura da linha e o raio do canto das linhas. Clique com o botão direito do mouse no gráfico, pesquise e selecione Escalar.
7. Renomeie o nó como "Cantos arredondados" clicando com o botão direito do mouse no nó e selecionando Renomear. Conecte o nó ao pin Arredondamento do nó Forma. Defina o valor como 0,25.
8. Repita o processo três vezes para criar vários nós escalares e renomeie-os como "Linethickness", "SquareBase" e "LineMult".1 Arraste o pin LineThickness, depois pesquise e selecione Multiplicar na lista.
9. Conecte a saída LineMult ao pin B do nó Multiplicar e defina o valor como 0,1.
10. Arraste o pin SquareBase e, em seguida, pesquise e selecione Subtrair na lista.
11. Conecte a saída do nó Multiply ao valor B do nó Subtract.
12. Conecte o pin de saída de Subtrair aos valores Largura e Altura do nó Forma.
13. Selecione todos os nós e crie uma nova caixa de comentários ao redor deles para ajudar a organizar seu gráfico.

Criar setas

Para ajudar a indicar a orientação do padrão, você pode adicionar algumas setas no centro de cada quadrado.

Para adicionar esse elemento final, siga estas etapas:

1. Clique com o botão direito do mouse no gráfico, pesquise e selecione Forma. Repita essa etapa para criar dois nós Forma.
2. Defina a forma do primeiro nó como Triângulo e, em seguida, defina a largura como 0,6.
3. Arraste o pin de saída e, em seguida, pesquise e selecione Transformação. Defina o valor Deslocamento como 0,0,0,05.
4. Defina o segundo nó Forma como Retângulo, depois defina a largura como 0,1 e a altura como 0,4.
5. Arraste o pin de saída e, em seguida, pesquise e selecione Transformação. Defina o valor Deslocamento como 0,0,0,8.
6. Clique com o botão direito do mouse no gráfico, pesquise e selecione Adicionar. Conecte os pins de saída dos nós Transformação ao nó Adicionar.

7. Selecione o nó Adicionar e, na janela de visualização, clique no ícone de cadeado. Esse ícone bloqueia a visualização para o nó, mesmo quando você seleciona outros nós. A pré-visualização do cadeado permite que você edite os valores de transformação e veja o resultado final.

   
8. Transforme a forma de seta única em nossa base padrão de 4 ladrilhos quadrados. Para fazer isso, arraste o pin de saída do nó Adicionar e, em seguida, pesquise e selecione Transformação.
9. No nó Transformação, defina o valor Repetir como 2.0, 2.0.
10. Desmarque o cadeado na pré-visualização para ver outras pré-visualizações de nós.
11. As setas são um pouco grandes demais. Defina o valor Zoom como -0,1 para dimensionar cada ladrilho repetido. Um valor negativo reduz o zoom, resultando em uma seta menor.
12. A redução do zoom expõe a área vazia entre cada ladrilho. No painel Detalhes, clique no valor Cor de preechimento e defina o valor A (alfa) como 1. A cor já está definida como preta por padrão. O ajuste desses valores cria uma máscara sólida.
13. Selecione todos os nós e crie uma nova caixa de comentários ao redor deles para ajudar a organizar seu gráfico.

Conectar os componentes e adicionar cores

Agora, você tem os principais blocos de construção para criar um padrão de xadrez escalonável. É possível adicionar mais controles semelhantes à seção de linha de grade para ajustar o padrão para uso futuro.

1. Comece com o elemento mais importante, a cor do xadrez. Arraste 2 nós Cor a partir da paleta de nós.
2. Renomeie os nós como "CheckerColorA" e "CheckerColorB".
3. Ajuste os nós Cor para as cores desejadas do verificador no painel Detalhes.
4. Em CheckerColorA, arraste o pin de saída e, em seguida, pesquise e selecione Mesclagem. Nós de mesclagem são funções poderosas com muitas funcionalidades para operações de mesclagem complexas. Para este exemplo, mantenha as configurações padrão.
5. Anexe o pin de saída de CheckerColorB ao valor Plano de fundo do nó Mesclagem.
6. Do pin de saída do nó Adicionar em Checkerblock, arraste um novo nó Transformação.
7. Crie um novo nó Escalar e renomeie-o como "CheckerRepeat".
8. Defina o valor CheckerRepeat como 2,0.
9. Conecte o pin de saída de CheckerRepeat ao pin Repetir do nó Transformação recém-criado. A entrada escalar única aplica-se aos valores de repetição X e Y.

10. Conecte o pin de saída do nó Transformação ao valor Máscara do nó Mesclagem.

    

Cor da linha de grade

É possível repetir um fluxo de trabalho semelhante para as linhas de grade. Você já tem controles para a espessura e o arredondamento da linha, mas não tem uma configuração para a cor da linha.

1. Crie um novo nó Cor e renomeie-o como "LineColor".
2. Ajuste o nó LineColor para a cor desejada no painel Detalhes.
3. Arraste o pin de saída do nó LineColor e, em seguida, pesquise e selecione Mesclagem.
4. Conecte o pin de saída do nosso nó de Mesclagem do verificador anterior à entrada Plano de fundo do novo nó de Mesclagem.
5. Na caixa de comentários de GridLines, arraste o pino de saída do nó Inverter e, em seguida, procure e selecione Transformação.
6. Conecte o nó CheckerRepeat à entrada Repetir do novo nó de Transformação. É possível usar um pin de saída várias vezes.
7. Conecte o pin de saída do nó Transformação à entrada Máscara do novo nó de Mesclagem.

Cor da seta

Repita esse processo para adicionar as setas sobre o padrão de xadrez.

1. Crie um nó Cor e nomeie-o como "ArrowColor".
2. Ajuste o nó ArrowColor para a cor desejada no painel Detalhes.
3. Arraste o pin de saída do nó ArrowColor e, em seguida, pesquise e selecione Mesclagem.
4. Conecte o pin de saída do nosso nó de Mesclagem do verificador anterior à entrada Plano de fundo do novo nó de Mesclagem.
5. Na caixa de comentários de Seta, arraste o pin de saída do nó Transformação e, em seguida, pesquise e selecione Transformação.
6. Conecte o nó CheckerRepeat à entrada Repetir do novo nó de Transformação.
7. Conecte o pin de saída do nó Transformação à entrada Máscara do novo nó de Mesclagem.
8. Arraste o pin de saída do nó Mesclagem e, em seguida, pesquise e selecione Saída. Renomeie o nó Saída como "BaseColorOutput".

Saídas e exportação

O nó Saída tem configurações para atributos de textura comuns e o nome de saída, o caminho da pasta e a resolução.

É possível adicionar várias saídas a um único gráfico. Esse fluxo de trabalho é útil ao criar conjuntos de texturas mais complexos para materiais que exigem um mapa de cores, rugosidade, normal e metálico.

Para configurar vários tipos de saída, siga estas etapas:

1. Na caixa de comentários de GridLines, arraste o pin de saída do nó Transformação e, em seguida, pesquise e selecione BrightnessContrast.
2. Ajuste o Brilho para 0,5 para criar uma imagem em escala de cinza mais achatada.
3. Arraste a saída do nó BrightnessContrast para criar um novo nó Saída. Renomeie o nó como "RoughnessOutput".
4. No nó Transformação anterior, arraste o pin de saída e, em seguida, pesquise e selecione NormalFromHeightMap.
5. Arraste a saída do nó NormalFromHeightMap para criar um novo nó Saída. Renomeie o nó como "NormalOutput".

6. Ajuste os nomes de saída e as configurações de compressão para cada nó de saída.

   
7. Na barra do menu principal, clique em Exportar.

A janela de exportação é aberta e mostra os nós de saída como mapas potenciais para saída. Você pode selecionar ou desmarcar essas opções para iterar em um ou todos os mapas, conforme necessário. Clique em Exportar na janela para criar os novos mapas de textura.

Você pode usar o Editor de gráfico de textura para uma ampla variedade de fluxos de trabalho de textura, desde edições básicas em texturas existentes, criação de novas texturas, empacotamento, atlas ou combinação com Blueprints. Você pode usar gráficos de textura como utilitários de pipeline para ajudar em processos comuns.