Cómo crear tu primer grafo de texturas

Texture Graph Editor es una interfaz basada en nodos para la creación procedimental de texturas en Unreal Engine. Esta página te guiará a través de la creación de un grafo de textura que genere un patrón de damero de UV.

El grafo permite personalizar el número de teselas, los colores, líneas de cuadrícula y flechas. En la construcción de este grafo se exploran algunos conceptos básicos y procesos de trabajo asociados a un grafo de textura.

Antes de construir tu primer grafo, es útil repasar la guía Primeros pasos con los grafos de texturas para tener una visión general del editor y conocer útiles conceptos generales.

Cómo cargar el complemento

Texture Graph Editor es un complemento experimental que no se carga por defecto al arrancar el motor.

Sigue estos pasos para habilitar el complemento:

1. En la barra de menús, selecciona Editar > Complementos.
2. En la barra de búsqueda, escribe «texture graph».
3. Activa el complemento TextureGraph y selecciona Sí en el cuadro de diálogo emergente.
4. Reinicia el motor.

Recurso de grafo de textura

Para crear un nuevo grafo de textura, sigue estos pasos:

1. Abre el Almacén de contenido y haz clic en Añadir > Textura > Grafo de textura.
2. Cambia el nombre del nuevo recurso a «TG_UVChecker».
3. Guarda el recurso y luego haz doble clic para abrir el editor.

Cómo construir la tesela de damero base

La base del patrón es una tesela de dos por dos que puedes repetir y editar.

Esta guía compila el patrón desde cero para explorar algunos procesos de trabajo y controles del usuario.

Si necesitas un patrón de damero rápido, puedes explorar el nodo Pattern, que tiene opciones para varios tipos de patrón estándar.

Para empezar a crear el patrón de damero, sigue estos pasos:

1. Desde la paleta de nodos, accede a la sección Procedural y luego arrastra el nodo Shape a tu grafo. Amplía el nodo haciendo clic en la flecha hacia abajo para ver todas las opciones posibles.
2. Cambia el ShapeType a un rectángulo.
3. Haz clic y arrastra el pin Output. Al soltar la selección, se abre la paleta de nodos. Busca y selecciona Transform en la lista. Los nodos Shape y Transform se conectan automáticamente.
   1. Cuando crees un nodo utilizando esta técnica, recuerda que la conexión se realiza en el valor de entrada superior.
4. Amplía el nodo Transform y ajusta Coverage en 0.5, 0.5. Ajustar la cobertura en la transformación escala la imagen de entrada (en este caso, un simple rectángulo) al valor especificado. De forma predeterminada, el color de relleno está vacío con color o valor alfa. Puedes establecer el color de relleno en los detalles.
5. Desde el nodo Shape, arrastra un segundo nodo Transform. Establece Coverage en la segunda transformación a 0.5, 0.5 y Offset a 0.5, 0.5. Ahora puedes minimizar el nodo Transform para que ocupe menos espacio.
6. Haz clic derecho en la vista del grafo y, en el menú, busca el nodo Add desplazándote hasta los operadores matemáticos o buscándolo.

7. Conecta los valores de salida de los nodos Transform a la entrada A y B del nodo Add. El resultado es una única tesela de damero de 4 cuadrados.

   
8. A medida que construyes el grafo, es importante mantenerlo organizado. Selecciona todos los nodos, haz clic derecho en el grafo y, a continuación, busca y selecciona Nuevo comentario. El cuadro de comentarios contiene los cuatro nodos. Dale al comentario el nombre «CheckerBlock».

Cómo crear líneas divisorias

Con el bloque de damero básico, puedes superponer líneas divisorias y controlar el grosor y el valor del radio de las esquinas.

Para añadir líneas divisorias, sigue estos pasos:

1. Crea un nodo Shape, establece la forma en un rectángulo y establece la anchura y la altura en 0.9.
2. Arrastra el pin de salida del nodo Shape y, a continuación, busca y selecciona Transform.
3. En el nodo Transform, establece el valor de Repetir en 2.0,2.0.
4. Arrastra el pin de salida y, a continuación, busca y selecciona el nodo Invert. Este nodo te da el valor adecuado para la máscara de tu línea.

5. En el nodo Invert, habilita Clamp.

   
6. Con la estructura básica de las líneas creada, puedes añadir un mecanismo para ajustar el grosor de línea y el radio de las esquinas de las líneas. Haz clic derecho en el grafo y, a continuación, busca y selecciona Escalar.
7. Cambia el nombre del nodo a «Rounded Corners» haciendo clic con el botón derecho en el nodo y seleccionando Cambiar nombre. Conecta el nodo al pin Rounding del nodo Shape. Define el valor en 0.25.
8. Repite el proceso tres veces para crear varios nodos escalares y cámbiales el nombre a LineThickness, SquareBase y LineMult.1. Arrastra el pin LineThickness y, a continuación, busca y selecciona Multiply en la lista.
9. Conecta la salida LineMult al pin B del nodo Multiply y establece el valor en 0.1.
10. Arrastra el pin SquareBase y, a continuación, busca y selecciona Subtract en la lista.
11. Conecta la salida del nodo Multiply al valor B del nodo Subtract.
12. Conecta el pin de salida de Subtract a los valores de Width y Height del nodo Shape.
13. Selecciona todos los nodos y crea una nueva caja de comentarios a su alrededor para ayudar a organizar tu grafo.

Cómo crear flechas

Para ayudar a detectar la orientación del patrón, puedes añadir algunas flechas hacia el centro de cada cuadrado.

Para añadir este último elemento, sigue estos pasos:

1. Haz clic derecho en el grafo y, a continuación, busca y selecciona Shape. Repite este paso para crear dos nodos Shape.
2. Ajusta la forma del primer nodo en Triángulo y luego ajusta la anchura en 0.6.
3. Arrastra el pin de salida y, a continuación, busca y selecciona el nodo Transform. Establece el valor de Desfase en 0.0, 0.05.
4. Establece el segundo nodo Shape en Rectángulo, luego ajusta la anchura en 0.1 y la altura en 0.4.
5. Arrastra el pin de salida y, a continuación, busca y selecciona Transform. Establece el valor de Desfase en 0.0, 0.8.
6. Haz clic derecho en el grafo y, a continuación, busca y selecciona Add. Conecta los pines de salida de los nodos Transform al nodo Add.

7. Selecciona el nodo Add y, a continuación, en la ventana de vista previa, haz clic en el icono del candado. Este icono bloquea la previsualización del nodo aunque selecciones otro nodo. La vista previa de bloqueo te permite editar los valores de transformación y ver el resultado final.

   
8. Transforma la forma de una sola flecha en nuestra base de tesela de 4 cuadrados estándar. Para ello, arrastra el pin de salida del nodo Add. Luego busca y selecciona Transform.
9. En el nodo Transform, establece el valor de Repetir en 2.0.
10. Desmarca el bloqueo de previsualización para ver otras vistas previas de nodos.
11. Las flechas son un poco grandes. Establece el valor de Zoom en -0.1 para escalar cada tesela repetida. Un valor negativo produce un alejamiento, lo que da como resultado una flecha más pequeña.
12. Alejarse deja al descubierto el área vacía entre cada tesela. En el panel Detalles, haz clic en el valor Color de relleno y establece el valor A (alfa) en 1. El color ya está ajustado en negro de forma predeterminada. Ajustar estos valores crea un enmascarado sólido.
13. Selecciona todos los nodos y crea una nueva caja de comentarios a su alrededor para ayudar a organizar tu grafo.

Cómo conectar los componentes y añadir color

Ahora tienes tus bloques de creación principales para hacer un patrón de damero escalable. Puedes añadir más controles similares a la sección de la línea de cuadrícula para ajustar el patrón para un uso futuro.

1. Empieza por el elemento más importante, el color del damero. Arrastra 2 nodos Color desde la paleta de nodos.
2. Cambia el nombre de los nodos a «CheckerColorA» y «CheckerColorB».
3. Ajusta los nodos Color a los colores de damero que quieras en el panel Detalles.
4. Desde CheckerColorA, arrastra el pin de salida y, a continuación, busca y selecciona Blend. Los nodos Blend son potentes funciones con muchas prestaciones para operaciones de mezcla complejas. Para este ejemplo, mantén la configuración predeterminada.
5. Añade el pin de salida de CheckerColorB al valor Background del nodo Blend.
6. Desde el pin salida del nodo Add en tu CheckerBlock, arrastra un nuevo nodo Transform.
7. Crea un nuevo nodo Scalar y cámbiale el nombre a «CheckerRepeat».
8. Establece el valor de CheckerRepeat en 2.0.
9. Conecta el pin salida de CheckerRepeat al pin Repeat de nodo Transform recién creado. La entrada escalar única se aplica tanto al valor de repetición de X como de Y.

10. Conecta el pin de salida del nodo Transform al valor de Mask del nodo Blend.

    

Color de línea de cuadrícula

Puedes repetir un proceso de trabajo similar para las líneas de tu cuadrícula. Ya tienes controles para el grosor y el redondeo de la línea, pero no tienes un ajuste para el color.

1. Crea un nuevo nodo Color y nómbralo «LineColor».
2. Ajusta el nodo LineColor al color que desees en el panel Detalles.
3. Arrastra el pin de salida del nodo LineColor y, a continuación, busca y selecciona Blend.
4. Conecta el pin de salida de nuestro anterior nodo NBlend del damero a la entrada Background del nuevo nodo Blend.
5. En el cuadro de comentarios de GridLines, arrastra el pin de salida del nodo Invert y, a continuación, busca y selecciona Transform.
6. Conecta el nodo CheckerRepeat a la entrada Repeat del nuevo nodo Transform. Puedes utilizar un pin de salida varias veces.
7. Conecta el pin de salida del nodo Transform a la entrada Mask del nuevo nodo Blend.

Color de flecha

Repite este proceso para añadir tus flechas sobre el patrón de cuadros.

1. Crea un nodo Color y nómbralo «ArrowColor».
2. Ajusta el nodo ArrowColor al color que desees en el panel Detalles.
3. Arrastra el pin de salida del nodo ArrowColor y, a continuación, busca y selecciona Blend.
4. Conecta el pin de salida de nuestro anterior nodo NBlend del damero a la entrada Background del nuevo nodo Blend.
5. En el cuadro de comentarios de Arrow, arrastra el pin de salida del nodo Transform y, a continuación, busca y selecciona Transform.
6. Conecta el nodo CheckerRepeat a la entrada Repeat del nuevo nodo Transform.
7. Conecta el pin de salida del nodo Transform a la entrada Mask del nuevo nodo Blend.
8. Arrastra el pin de salida del nodo Blend y, a continuación, busca y selecciona Output. Cambia el nombre del nodo de salida a «BaseColorOutput».

Salidas y exportación

El nodo Output tiene ajustes para atributos de textura comunes y el nombre de la salida, para la ruta de carpetas y para la resolución.

Puedes añadir varias salidas a un mismo grafo. Este proceso de trabajo es útil para crear conjuntos de texturas más complejos para materiales que requieran un mapa de color, rugosidad, normal y metálico.

Para configurar varios tipos de salida, sigue estos pasos:

1. En el cuadro de comentarios de GridLines, arrastra el pin de salida del nodo Transform y, a continuación, busca y selecciona BrightnessContrast.
2. Ajusta el brillo a 0.5 para crear una imagen en escala de grises más compacta.
3. Arrastra la salida del nodo BrightnessContrast para crear un nuevo nodo Output. Cambia el nombre del nodo a «RoughnessOutput».
4. Desde el nodo Transform anterior, arrastra el pin de salida y, a continuación, busca y selecciona NormalFromHeightMap.
5. Arrastra la salida del nodo NormalFromHeightMap para crear un nuevo nodo Output. Cambia el nombre del nodo a «NormalOutput».

6. Ajusta los nombres de salida y la configuración de compresión de cada nodo de salida.

   
7. En la barra del menú principal, haz clic en Exportar.

Se abre la ventana de exportación y se muestran los nodos de salida como posibles mapa de salida. Puedes seleccionar o anular la selección para iterar en un mapa o en todos, según sea necesario. Haz clic en Exportar en la ventana para crear el nuevo mapa de texturas.

Puedes utilizar el editor de texturas para una amplia gama de procesos de trabajo de texturas, desde ediciones básicas a texturas existentes, creación de nuevas texturas, empaquetado, creación de atlas o combinaciones con blueprints. Puedes utilizar grafos de texturas como utilidades de canalización para ayudarte en procesos comunes.