Cree un sombreador de pantalla de computadora animado futurista en el editor de Unreal 3

El Editor de Unreal 3 es una poderosa herramienta de desarrollo de juegos que se envía gratis con la mayoría de los juegos de Unreal 3 (Unreal Tournament, Gears of War, Roboblitz). Se está convirtiendo rápidamente en una herramienta estándar en la industria del desarrollo de juegos y es conocida por poner mucho poder directamente en las manos del artista, particularmente a través de su editor de material basado en nodos..

Este tutorial ofrece una introducción al editor de material de Unreal y no asume ningún conocimiento previo de la herramienta, o la presencia de cualquier otra herramienta, excepto el editor en sí. A través de la creación de un material de "monitor parpadeante" (o "sombreado"), este tutorial mostrará algunas de las cosas poderosas que son capaces con el editor de materiales..

Este tutorial se creó utilizando la versión de Unreal Editor que se envió con Unreal Tournament 3, pero es probable que funcione con otras versiones del editor..

Vista previa de efecto final

Paso 1

Primero necesita obtener los archivos que usaremos para crear nuestro sombreador. Puedes recuperarlos usando el enlace de descarga a continuación. Necesitará los archivos Text.tga y Panner.tga, ya que los usaremos para crear un sombreado de 'pantalla de computadora' (completo con pulsos y una advertencia roja parpadeante).

Archivos de textura

descargar

Paso 2

Inicie el Editor de Unreal iniciando primero la interfaz de Unreal, que se encuentra en la carpeta "Binarios" de cualquier juego basado en Unreal que posea (es posible que deba buscar UnrealFrontend.exe). Ejecute el UnrealFrontend.exe y luego haga clic en el botón 'editor' para iniciar el editor.

Paso 3

El Editor de Unreal es una herramienta compleja, pero solo nos estamos enfocando en una pequeña sección. Una vez que se abra, haga clic en el botón 'Generic Browser' para abrir el 'Generic Browser', que es la herramienta de administración de activos de Unreal..

Etapa 4

En el 'Explorador genérico', haga clic en "Archivo> Importar". Navega hasta donde guardaste las imágenes de origen del Paso 1 y selecciona Text.tga. Después de un momento aparecerá un diálogo de opciones de importación. Todos los valores predeterminados están bien, excepto uno; donde el cuadro de diálogo solicita el nombre de un 'Paquete', escriba 'Monitor ". Siga estos mismos pasos para Panner.tga. Unreal organiza los activos en' Paquetes ', y ahora nuestras dos imágenes de origen deben importarse en un paquete llamado 'Monitor' (ver segunda imagen).

Paso 5

Ahora que hemos importado nuestras imágenes de origen, podemos configurar nuestro sombreado. Para hacer esto, haga clic derecho en el fondo gris del 'Navegador genérico' y seleccione 'Nuevo material'. En el siguiente cuadro de diálogo, asigne un nombre al material como 'Pantalla'. Al hacer clic en Aceptar, se abrirá el 'Editor de materiales'..

Paso 6

¡Ahora es donde las cosas se ponen divertidas! Hay cuatro áreas principales en el 'Editor de materiales': el área grande de gris en el centro es el espacio de trabajo, y contiene entradas en los canales principales del sombreador, el área oscura a la izquierda es una vista previa en 3D del material, el espacio a lo largo de la parte inferior de la pantalla son las opciones de material, y la columna del lado derecho es una lista de todas las expresiones de material (nodos) que puede usar para construir su material.

Desplácese por esa lista hasta que encuentre una llamada 'Muestra de textura'. La muestra de textura "Arrastrar y soltar" en el área de trabajo (con el botón izquierdo del ratón) y se creará un nodo "Muestra de textura". Puede mover el nodo haciendo clic en él para seleccionarlo, y luego "ctr l + clic izquierdo" y arrastrando alrededor. Puede navegar por el área de trabajo haciendo clic derecho en el fondo gris y arrastrando.

Paso 7

Mueva el 'Editor de materiales' fuera del camino por un momento, para que pueda ver el 'Navegador genérico' nuevamente. Haga clic en la imagen de origen 'Texto' que importamos anteriormente para seleccionarla. Inmediatamente, vuelva al 'Editor de materiales' y seleccione el nodo de muestra de textura. Debajo de las opciones debe haber una línea que diga "Textura: Ninguna". Haga clic en la flecha verde, en el lado derecho de esa línea, para vincular la selección del 'Navegador genérico' con la 'Muestra de textura'.

Paso 8

Agregue otro nodo 'Muestra de textura' y vincule ese a la imagen de origen del "Panoramizador", de la misma manera que vinculó la imagen 'Texto'. No vamos a usar esto todavía, pero eventualmente lo haremos. Deberías tener algo como la imagen de abajo..

Paso 9

Aunque hemos colocado nuestras imágenes de origen en el espacio de trabajo, todavía tenemos que "conectarlas" a las entradas del material. Haga clic y arrastre en el cuadrado NEGRO a la izquierda de la muestra de textura 'Texto' llamada. Esta es una 'salida'. Las salidas están siempre a la izquierda de un nodo. Debería aparecer un cable, siguiendo el cursor mientras arrastra. Suelte el cursor en el canal de entrada "Emisivo" del sombreador..

La "imagen de texto" verde debe aparecer en la vista previa del objeto a la izquierda. Por defecto, el objeto de vista previa es una esfera, pero es posible que encuentre un cilindro o un cubo para ser mejor. Hay botones en la parte superior de la ventana de vista previa que alternan entre los objetos de vista previa.

Paso 10

Haga clic en la primera de las tres marcas de verificación. Esto aplica tus cambios al material. ¡Felicidades, has construido un shader en Unreal! Desafortunadamente, es muy aburrido, por lo que el resto de este tutorial tratará de mejorarlo. Ahora es un buen momento para guardar su paquete en el 'Navegador genérico'.

Paso 11

Para empezar, supongamos que estamos tratando de crear una pantalla de monitor más antigua, como algo que verías en una base militar de la guerra fría. Darle un 'parpadeo' a la pantalla es una buena manera de introducir algo de vida en el material. Una de las maneras más fáciles de hacer esto es cambiar rápidamente entre dos versiones de nuestra imagen 'Texto'.

Haga clic derecho en la pestaña de salida NEGRA de la muestra de textura 'Texto', y elija 'Romper enlace'. Desde la lista 'Expresión del material', haga clic y arrastre un nodo de cada uno de los siguientes: Multiplicar, Constante, Interpolación lineal, Tiempo y Seno. Intenta organizarlos de forma similar a la imagen de abajo..

Paso 12

Ahora conecte la muestra de textura 'Texto' a una de las entradas de la multiplicación. Conecte el nodo 'Constante' a la otra entrada de la multiplicación. Recuerde, las entradas están siempre en el lado derecho de un nodo, y las salidas están en el lado izquierdo. El 'Editor de materiales' de Unreal siempre fluye de derecha a izquierda. Una vez que haya conectado la muestra de textura 'Constante' y 'Texto', haga clic en el nodo 'Constante'. En las opciones que se encuentran en la parte inferior del editor, debería ver un tipo de buzón con la etiqueta 'R'. Puede cambiar el valor de la constante allí. Cambie a '1.2'. Esto nos da una versión más brillante de nuestra imagen de 'Texto' que sale del nodo múltiple.

Paso 13

El nodo 'Interpolación lineal' le permite desvanecerse de una imagen a otra, o en nuestro caso, entre nuestra imagen original 'Texto' y nuestra nueva versión más brillante. Conecte los nodos como se muestra en la imagen de abajo.

Lo único que nos falta ahora es un alfa para manejar cómo se mezclan las dos versiones de nuestra imagen 'Texto'. La entrada 'alfa' del nodo 'Interpolar lineal' requiere un cuidado especial, no todo puede entrar en él. Se limita a un solo 'canal' de información. Vamos a entrar en eso más tarde.

Paso 14

'Sine' y 'Time' son una combinación de nodos comunes que le dan un valor que oscila constantemente entre '0' y '1' (bueno, técnicamente '-1', pero eso no es un gran problema). Es importante tener en cuenta que Unreal verá un valor de '0' como el color negro. Un valor de '1' será blanco. Así que configure los nodos 'Sine' y 'Time' como a continuación, y luego conecte el 'Interpolate Lineal' a la entrada 'Emisiva' del material, y obtendrá un material que tiene un buen pulso. Si el efecto no es lo suficientemente exagerado para usted, entonces puede aumentar la constante hasta un número mayor. Experimenta para ver lo que obtienes!

Paso 15

Este efecto es excelente para una pantalla de pulsos, pero para que parezca que la pantalla está parpadeando, necesitamos aumentar la velocidad del pulso. Haga clic en el nodo 'Sine' y cambie su 'Período' de '1.0' a '0.1'. Ahora realmente debería verse como un viejo monitor CRT con un parpadeo mal.

Paso 16

Para ordenar un poco las cosas, mantenga presionado "Alt + Control" y haga clic en la parte superior izquierda, sobre todos nuestros nodos. Arrastre hacia la parte inferior derecha y creará un cuadro de selección. Cuando lo sueltes, se seleccionarán todos los nodos en los que encajaste. Presione la tecla 'c' para crear un cuadro de comentario, y nombre el cuadro 'Parpadeo'. Ahora, al hacer clic en el nombre 'Parpadeo' podrá mover todo el grupo (mantenga presionada la tecla de control y arrastre). Mueve el grupo 'Parpadeo' un poco hacia la derecha para darte más espacio.

Paso 17

Ahora vamos a usar la muestra de textura 'Panner' que agregamos anteriormente para hacer que nuestro monitor de sombreado parezca que tiene un problema de actualización / escaneo. Haz esto, haremos una barra horizontal de desplazamiento a través de la imagen..

Vaya a la lista de 'Expresiones materiales' y agregue un nodo 'Panner'. Este nodo le permite desplazarse por un nodo de muestra de textura. Conecte el nodo 'Panner' con nuestra muestra de textura 'Panner', y luego conéctelo a la entrada 'Emissive' del material. Por defecto, el nodo 'Panner' tiene una velocidad de '0', así que haga clic en él y cambie su 'Velocidad Y' a '-0.2'. El único problema con esto ahora es que es un rollo blanco, y debemos mezclarlo con nuestro parpadeo verde.

Paso 18

Desde la lista de 'Expresiones materiales', arrastre un nodo 'Agregar' y un nodo 'Máscara de componente', y conéctelos como la siguiente imagen (todas las imágenes en color en Unreal están compuestas por tres canales en escala de grises, 8 bits: un rojo , un verde y un azul). El nodo 'Máscara de componente' nos permite seleccionar un solo canal y aislarlo. Seleccione el nodo 'Máscara de componente' y, en sus opciones, marque la casilla junto a 'G' (para verde). Conecte el nodo 'Máscara de componente' al nodo 'Agregar', junto con nuestra Muestra de textura 'Panorámica', pero no use la salida NEGRA de la Muestra de textura, use la VERDE en su lugar. Voy a entrar en más por qué más tarde.

Ahora tenemos nuestros dos efectos superpuestos, pero es TODO blanco. Está bien. Así es como se verá nuestro último canal 'Verde'. Vamos a recrear un resultado a todo color al final..

Paso 19

Seleccione la 'Máscara de componente', 'Sine', 'Agregar', 'Panner' y nuestros nodos de muestra de textura 'Panner', y presione 'C'. Asígnele a su grupo el nombre 'Barra horizontal' y luego arrastre los dos grupos para mejorarlos un poco..

Es posible que haya notado que la palabra "Error" en la imagen original del "Texto" ya no aparece en la ventana de vista previa del material. Esto se debe a que estaba completamente ROJO en la imagen original del 'Texto', y ya que estamos usando el canal VERDE solo ahora, no lo veremos. Aislaremos el canal ROJO de la muestra de textura 'Texto', y haremos nuestro efecto final en eso.

Paso 20

A estas alturas ya debería saber lo suficiente como para crear la siguiente imagen desde cero. Es muy similar a la combinación que usamos para crear el efecto de parpadeo. Puede hacer clic derecho en la muestra de textura 'Texto' anterior, y elegir 'Duplicar' para crear una segunda copia para usar aquí.

Hay tres diferencias principales entre esta combinación y la configuración 'Parpadeo'.

  1. El nodo 'Constante' se establece en '6', lo que significa que la imagen será mucho más brillante.
  2. El 'Período' del nodo 'Sine' se dejó en '1', el valor predeterminado.
  3. Esta configuración utiliza la salida ROJA de la muestra de textura 'Texto', en lugar de la salida NEGRA (la salida NEGRA es una combinación de los canales ROJO, VERDE y AZUL, pero solo queremos el canal ROJO esta vez).

Si nos fijamos en la ventana de vista previa del material, tenemos una versión en escala de grises de la palabra "Fallo". Esta es una representación en blanco y negro de lo que sea rojo en nuestro material final. Agrupe estos nodos y llámelos 'PulsingRedFail'

Paso 21

Para combinar todo nuestro trabajo en un único resultado a todo color, use un nodo 'Agregar' de la lista 'Expresión del material'. Esto le permite recrear una imagen multicanal de canales de 8 bits separados. Debería tener una bonita pantalla verde de 'principios de la década de 1990' con una advertencia roja parpadeante en la parte inferior.

Si ve una pantalla verde azulado, compruebe que su grupo de 'Barra horizontal' está configurado correctamente (y solo está utilizando el canal verde de la muestra de textura 'Panorámica'.

Resultados finales

Aquí está el material final, y cómo se ve aplicado al modelo..

Haga clic en la imagen para una versión de alta Rez


Ahora debería tener una comprensión básica del Editor de materiales en Unreal, junto con algo de experiencia con algunos de los nodos más comunes. Hay muchos efectos sorprendentes que puedes crear con esta herramienta, así que diviértete experimentando!