En este tutorial de Unreal Engine 4, aprenderá a dibujar colores en cualquier tipo de malla.
El dibujo de malla permite a los jugadores colorear los objetos del juego. Ejemplos de dibujo de malla: graffiti (goop) en
Super Mario Sunshine , geles en
Portal 2 y tinta en
Splatoon . El dibujo se puede usar como un elemento de juego o simplemente como un diseño gráfico. Sea como fuere, el dibujo por malla abre nuevas posibilidades para los diseñadores y artistas del juego.
Aunque este efecto se usa casi por igual en los ejemplos enumerados anteriormente, puede usar el dibujo de malla para muchos otros efectos. Por ejemplo, puedes pintar objetos con latas de pintura, dibujar heridas en los personajes o incluso dejar que los jugadores dibujen su propia cara.
En este tutorial, aprenderá a dibujar en una malla esquelética. Para hacer esto, haremos lo siguiente:
- Expande la malla a su forma UV
- Use el punto de intersección de trazado de línea para crear una máscara de malla esférica
- Renderice la malla expandida y la máscara esférica en el objetivo de renderizado usando la captura de escena
- Usa una máscara para mezclar texturas en el material del personaje.
Tenga en cuenta que este tutorial
no se trata de dibujar vértices. Dibujar vértices depende de la resolución de la malla y no se puede cambiar durante el juego. El método utilizado en este tutorial, por el contrario, funciona independientemente de la resolución de la malla y se puede utilizar durante el juego.
Nota: se entiende que ya conoce los conceptos básicos de trabajar con Unreal Engine. Si es nuevo en Unreal Engine, consulte nuestra serie de tutoriales Unreal Engine de 10 partes para principiantes .
Nota: este tutorial es la cuarta parte de una serie de tutoriales sobre el uso de objetivos de renderizado en Unreal Engine:
Llegar al trabajo
Comience descargando los
materiales para este tutorial. Descomprímalos, vaya a
MeshPainterStarter y abra
MeshPainter.uproject . Haga clic en
Reproducir para ver el personaje que colorearemos.
Al igual que en los tutoriales sobre nieve y hierba, este método también necesita una captura de escena. Para ahorrar tiempo, ya creé un plano para capturar la escena. Si desea obtener más información sobre las opciones de captura, lea nuestro tutorial sobre cómo
crear huellas en la nieve .
Primero, veamos cómo puedes dibujar en una malla.
Dibujo de malla
En la mayoría de los casos, las mallas con las que tiene que trabajar ya tienen un escáner UV. Por lo tanto, sería lógico crear una máscara usando el objetivo de renderizado y luego aplicarla a la malla. Sin embargo, generar una máscara directamente en un objetivo de renderizado (usando Dibujar material para renderizar objetivo) generalmente conduce a roturas en los depósitos UV.
Aquí hay un ejemplo de escaneo de cubos UV y textura de máscara esférica:
Y aquí está la máscara aplicada al cubo:
Como puede ver, la máscara esférica dimensional 2D no se dobla alrededor de las esquinas y no tiene en cuenta la geometría. Para generar la máscara correcta, una máscara esférica debe muestrear
posiciones en el mundo . ¿Cómo obtener acceso a posiciones en el mundo cuando se usa el nodo Dibujar material para renderizar destino?
Si estudiaste los métodos de dibujar con mallas, es posible que hayas encontrado un video de Ryan Brooke sobre el
dibujo de daño de personajes usando objetivos de renderizado (el método utilizado en mi tutorial se basa en su método). En el video, genera con éxito máscaras esféricas tridimensionales y las acumula en el objetivo de renderizado. Se las arregló para hacer esto porque creó un objetivo de renderizado para almacenar posiciones de malla en el mundo, que luego se pueden muestrear usando una máscara esférica. Veamos este método con más detalle.
Método Ryan
Este método consta de cuatro pasos. El primer paso es "desplegar" la malla deseada. Solo necesita mover todos los vértices para obtener la malla en su forma UV. Por ejemplo, aquí están las coordenadas UV del personaje:
Y aquí está el personaje después de desplegarse en Unreal:
Puede expandir la malla utilizando cálculos simples de los desplazamientos de las posiciones del mundo (que discutiremos a continuación).
El segundo paso es codificar las posiciones mundiales en el objetivo de renderizado. Esto se puede hacer estableciendo el color del material de barrido en
Absolute World Position y utilizando la captura de escena para capturar el barrido. Así es como se vería el objetivo de renderizado:
Nota: el objetivo de renderizado cambia de color porque el personaje está animado. Esto lleva a un cambio constante de posición en el mundo.
El tercer paso es crear máscaras esféricas. Habiendo accedido a las posiciones de malla en el mundo, podemos muestrearlas en una máscara esférica y luego dibujar una máscara esférica directamente en el segundo objetivo de renderizado.
El último paso es aplicar una máscara al material del personaje para mezclar colores, texturas o materiales. Aquí está la visualización de la tercera y cuarta etapa:
Ahora veamos mi método propuesto.
Método propuesto
Aunque el método de Ryan funciona, necesita lo siguiente:
- Dos renderizaciones de destino. El primero captura la malla no desarrollada y el segundo acumula máscaras esféricas.
- Un objetivo de renderizado para almacenar posiciones en el mundo
- Renderizar objetivo para recoger máscaras esféricas. Para cada actor en el que desee dibujar, necesitará un objetivo de renderizado separado.
El método descrito en este tutorial rechaza la segunda representación y la posición de destino de representación en el mundo. Esto es posible combinando el barrido y las máscaras esféricas en un solo material (material de barrido). Después de eso, el barrido se captura utilizando el modo compuesto aditivo para la acumulación de máscaras esféricas.
Vale la pena señalar que ambos métodos funcionan mejor cuando la malla no tiene UV superpuestos. Si se superponen los rayos UV, los píxeles tienen un espacio UV común y, por lo tanto, la misma información sobre las máscaras. Por ejemplo, ambas manos de un personaje pueden desplegarse en UV en el mismo espacio. Si se aplica una máscara a una mano, también se aplicará a la otra.
Ahora que nos hemos familiarizado con el método, comencemos creando un material de barrido.
Crear material plano
Vaya a la carpeta
Materiales y cree un nuevo material.
Póngale el nombre
M_Unwrap y luego ábralo.
Cambia las siguientes opciones:
- Modelo de sombreado: apagado. Gracias a esto, la captura de escena no capturará información de iluminación.
- Dos caras: habilitado. A veces, las caras expandidas pueden mirar hacia otro lado (esto depende de cómo se realizó el escaneo UV de la malla). El parámetro Two Sided garantiza que veamos todas las caras invertidas.
- Uso \ Utilizado con malla esquelética: habilitado. Cuando este parámetro está activado, se compilarán los sombreadores necesarios para que el material funcione en mallas esqueléticas.
A continuación ampliamos la malla. Para hacer esto, crea el siguiente diagrama. Tenga en cuenta que ya he creado los
parámetros CaptureSize y
UnwrapLocation en el
activo MPC_Global.
Por lo tanto, realizaremos un escaneo UV de la malla en la ubicación especificada y con el tamaño especificado. Tenga en cuenta que si el escaneo UV único de su malla está en un canal separado, deberá cambiar el
Índice de coordenadas del nodo
TextureCoordinate . Por ejemplo, si las coordenadas UV únicas están en el canal 1, entonces el
Índice de coordenadas debe establecerse en
1 .
La siguiente etapa es la creación de una máscara esférica. Para hacer esto, necesitamos dos parámetros: el punto de intersección y el radio de la esfera. Crea los nodos seleccionados:
Este esquema devolverá blanco para píxeles dentro de la máscara esférica y negro para píxeles fuera de ella. No se preocupe por establecer valores para los parámetros, porque lo haremos en forma roma.
Es importante establecer el nodo
Absolute World Position en
Absolute World Position (excluyendo las compensaciones de sombreado de material) . Esto es necesario porque la posición del píxel en el mundo cambiará debido al desenrollamiento. Excluir las compensaciones de sombreado de material nos proporciona una posición inicial en el mundo antes de la implementación.
Y eso es todo lo que se necesita para el material de barrido. Haga clic en
Aplicar y cierre el material. Luego, necesitamos aplicar el material al personaje para expandirlo.
Despliegue de personajes
En este tutorial, el plano de la pinza hará la implementación y la captura. Primero, necesitamos una instancia dinámica del material de barrido. Vaya a la carpeta
Blueprints y abra
BP_Capture . Luego agregue los nodos resaltados al
Evento BeginPlay . Asegúrese de que
Parent esté configurado en
M_Unwrap .
A continuación, necesitamos una función para realizar un barrido y captura. Cree una nueva función llamada
PaintActor . Luego cree las siguientes entradas:
- ActorToPaint: el tipo debe tener el valor Actor . Este es un actor para el que realizaremos un barrido y captura.
- HitLocation: escriba Vector . Este será el punto central de la máscara esférica.
- BrushRadius: tipo Float . El radio de la máscara esférica en unidades del mundo.
Aunque este método de dibujo puede funcionar con cualquier actor, solo verificaremos si el actor resultante se hereda de la clase
Character . Y para simplificar el código, almacenaremos el componente de malla de esqueleto en una variable, porque tendremos que referirnos a él varias veces. Para hacer esto, agregaremos los nodos seleccionados:
Ahora es el momento de desarrollar y aplicar una máscara esférica. Para hacer esto, agregue los nodos seleccionados al final de la cadena de nodos:
Esto es lo que hace cada línea:
- Primero, preservamos el material de origen de la malla para que podamos volver a aplicarlo más tarde. Luego aplicamos el material de barrido.
- Esta línea pasa el material de escaneo por el punto de intersección y el radio del pincel para aplicar una máscara esférica
Para probar el barrido, primero tenemos que trazar la línea desde el jugador para obtener el punto de intersección.
Obtener punto de intersección
Haga clic en
Compilar y vuelva al editor principal. Luego cierre
BP_Player . Abra la función
Disparar y agregue los nodos resaltados. Para este tutorial, configure
el Radio del pincel en
10 .
Haga clic en
Compilar y cierre
BP_Player . Haga clic en
Reproducir y luego
haga clic izquierdo en el personaje para profundizar y aplicar una máscara esférica.
Si no comprende por qué la máscara continúa moviéndose, esto se debe a que las partes se mueven en relación con la máscara esférica. Sin embargo, esto no es un problema, porque solo realizamos una captura de barrido en el momento de la intersección.
Ahora que hemos desenvuelto la malla, necesitamos hacer una captura de barrido.
Captura de barrido
Para empezar, sería bueno agregar un plano negro apagado detrás de la malla expandida. Esto evita las costuras en el borde de los depósitos UV. Abra
BP_Capture y luego agregue un componente
Plane llamado
BackgroundPlane . Para ahorrar tiempo, ya he creado material negro. Para el material, seleccione
M_Background .
En este tutorial, usamos
500 × 500 unidades para desplegar y capturar, por lo que el plano de fondo no debe ser inferior a estos tamaños. Establezca
Escala en (5.0, 5.0, 1.0) .
Dado que la posición del plano y la posición del barrido son las mismas, sería bueno desplazar el plano hacia abajo para evitar conflictos z. Para hacer esto, establezca el valor de
Ubicación (0.0, 0.0, -1.0) .
Luego necesitamos realizar una captura. Regrese a la función
PaintActor y agregue los nodos resaltados:
Entonces capturaremos la malla expandida, después de lo cual el material fuente de la malla se aplicará nuevamente.
En el esquema resultante, la captura de escena sobrescribe el contenido del objetivo de renderizado. Para que las máscaras esféricas se acumulen, necesitamos hacer que la captura de la escena se
agregue al contenido anterior. Para hacer esto, seleccione el componente
SceneCapture y configure
Scene Capture \ Composite Mode en
Additive .
Haga clic en
Compilar y luego cierre el plano. Ahora necesitamos usar renderizar objetivo en el material del personaje.
Uso de la máscara
Vaya a
Personajes \ Maniquí \ Materiales y abra
M_Mannequin . Luego agregue los nodos resaltados. Establezca la
Muestra de textura en
RT_Capture .
Este esquema mostrará un color rojo donde la máscara es blanca y naranja donde la máscara es negra. Sin embargo, podemos mezclar texturas o capas de materiales.
Haga clic en
Aplicar y cierre el material. Haga clic en
Reproducir y
haga clic izquierdo en el personaje para comenzar a dibujar.
¿A dónde ir después?
El proyecto terminado se puede descargar
desde aquí .
Aunque usamos máscaras esféricas en este tutorial, esta no es la única figura que se puede usar. Después de todo, ¡hay cubos, cilindros, conos y mucho más! Para obtener más información sobre estas formas de formas y cómo usarlas, puede leer las siguientes dos publicaciones:
Si quieres aprender otra forma de dibujar en una malla, lee el artículo de Tom Lohman
Rendering Wounds on Characters . En lugar de acumular máscaras esféricas, utiliza un número fijo de máscaras esféricas. La ventaja de este método es su bajo costo (que depende del número de máscaras esféricas) y la relativa simplicidad de animar las máscaras. La desventaja de este método es la restricción estricta del número de máscaras esféricas.