TIP#4. Corrección de color con Unreal.

El pasado lunes os hablamos de la corrección de color en Unreal. Pero, ¿como se hace? Pues bien, primero haremos una captura (o varias) de nuestro juego en directamente desde el engine. Después necesitaremos ir a la página de documentación oficial de Unreal y copiar esta imagen del rango de colores:

Rango de colores sin retocar de Unreal.

Nos iremos a nuestro editor de imágenes de confianza (Gimp, Photoshop, etc) y pondremos nuestra captura del juego y la imagen del rango de colores. Haremos una copia del rango de colores y la ocultaremos, y la que hemos dejado visible la uniremos con la captura de la imagen del juego. Así todas las correcciones de color que hagamos a la captura del juego, se la estaremos haciendo también al rango de colores, que es el que nos llevaremos a Unreal después.

Captura sin modificar con el rango de colores inicial.

Luego, haremos las correcciones que creamos convenientes para darle el color que queramos al juego. Modificaremos los balances, los tonos, la saturación o lo que sea para conseguir el color que queremos que tiña el juego. Os aconsejamos que esta corrección no la hagáis solo con una captura, podríais estar obviando otros elementos de vuestro juego que igual no os gusta como quedan con esas correcciones de color que habéis hecho pensando que en otros elementos del juego sí quedaban bien.

Captura modificada con el rango de colores modificado.

Una vez tenemos la corrección que queremos, necesitamos llevarnos solo la imagen del rango de colores que se ha modificado, así que seleccionando la copia que hemos ocultado del rango de colores pero copiando la que hemos modificado, nos iremos a un nuevo archivo y pegaremos ese rango de colores cambiado y lo guardaremos en formato TGA.

Este archivo lo cargaremos en Unreal. Le daremos doble clic para abrirlo, y cambiaremos a ColorLookupTable el parámetro Texture Group del Level of Detail. Lo que suavizará todos los colores haciendo transiciones de uno a otro.

Modificamos la imagen de la corrección de color que acabamos de importar a Unreal.

Cerramos y dentro del World Outliner, en PostProcessVolume, buscaremos en el buscador el parámetro Unbound para asegurarnos que está activado.

Aseguramos que el parámetro Unbound está activado.

Finalmente, arrastraremos nuestro nuevo rango de colores al parámetro (lo buscamos de igual forma) Color Grading. En cuanto lo pongamos, veremos la diferencia.

Arrastramos la imagen del rango de colores que hemos creado en el parámetro de Color Grading.

A partir de aquí, se trata de hacer pruebas hasta que consigáis el efecto deseado. Si tenéis cualquier duda, no os lo penséis y ¡comentad!.

Iluminación en Unreal. Parte I: Corrección de color.

Si amigos, ha llegado el día. Lo que hemos ido retrasando durante meses ya está aquí. Un artículo hablando de la iluminación en Unreal. Pero tranquilos, no lo daremos todo hoy por varios motivos. Primero, para centrarnos y que no salga un texto más largo que un día sin pan. Y segundo, algo que nos ha costado meses ponernos a comentar, no lo quemaremos de una sola vez :D.

Más concretamente os hablaremos de la corrección de color, o color correction como dicen los guais. Como siempre, no somos expertos en el tema, pero después de ponernos un poco nerviosos por no saber como mejorar la iluminación que teníamos, nos dimos de bruces con una documentación que nos iluminó (JA! no esperabais ese juego de palabras, eh?). Enseguida os hablamos sobre ello, pero antes, maticemos cosas.

Antes de nada, hay que hablar sobre qué iluminación queremos en nuestro juego. Obviamente no estamos haciendo un juego de miedo, así que no queremos oscuridad. Todo lo contrario. Estamos haciendo un juego con un estilo visual muy cartoon, por lo que nos interesan los colores vivos e intensos.

Después de decidir qué queríamos conseguir nos pusimos a trastear con la iluminación de Unreal. ¡Vaya si trasteamos! Acabamos hartos de tanta configuración y no acabar de dar con la tecla para obtener lo que buscábamos. Así que volvimos al principio y nos quedamos con una iluminación muy básica (prácticamente la que viene por defecto) tocando la intensidad y la rotación por un tema de orientación de las sombras. Y así pasaron los meses mientras nos decíamos que no pasaba nada, que todo iría bien :_).

Todas las capturas que hemos ido subiendo al blog y nuestro twitter (¡síguenos por ahí!) se han hecho con esa iluminación básica, que aunque no esté del todo mal, es un poco… meh… Así que hace un par de meses nos pusimos a investigar más sobre el tema y dimos con distinta información sobre la corrección de color en Unreal. Ahí vimos un mundo nuevo.

¿Os habéis fijado que en una serie o película existe un color que tiñe la pantalla? Por ejemplo, ¿habéis visto como en gran parte de las imágenes de CSI Miami se nota una atmósfera prácticamente amarilla y en cambio otros CSI's tiran más a colores fríos como el azul? La corrección de color ya no es solo maquillar la luz para corregir imperfecciones. Hoy en día se utiliza para dotar a la imagen de temperatura para hacer llegar al espectador sin que se de cuenta el sentimiento que quieres que tenga y que sea coherente durante todo el metraje.

Imagen de CSI Miami.

Imagen de CSI Las Vegas.

Pues bien, si os fijáis en las capturas hechas hasta ahora del juego, la iluminación se puede resumir en una buena fuente de iluminación para que no apagara los colores que habíamos hecho previamente en las texturas. Pero hecho esto, el primer problema con el que nos topamos fue que al poner esa fuente de luz fuerte lo primero que recibes son unas sombras durísimas (oscuras, para que nos entendamos). Esto hace que, en general, se vea todo en extremos. Colorido en las caras donde da el sol y oscuro donde se está en sombra. Hasta aquí podríamos decir que tampoco se acaba el mundo. Es decir, si queremos una luz fuerte, es normal que aparezcan sombras duras. No deja de ser como un mediodía de verano. El problema que le veíamos, y que no sabíamos solucionar era que, en general, se veía todo azul. La sensación era fría a pesar de la luz intensa de mediodía. Y eso sí que necesitábamos corregirlo.

Así que, como hemos dicho, topamos con esa distinta información donde explica como aplicar una corrección de color al juego. Esto lo que hace es que, independientemente de como esté configurada la iluminación, teñirá el juego con la gama de colores que le digamos.

Vamos a mostraros un ejemplo para que entendáis mejor por donde vamos. Esto es el antes y después de una corrección de color de una escena del juego:

Antes de la corrección de color.

Después de la corrección de color.

¿Veis la diferencia? La primera imagen se ve fría, como si fuera una mañana de invierno soleada. En cambio, en la segunda imagen se ve todo mucho más cálido. Eso es porqué al corregir el color, le hemos puesto más amarillos y rojos (además de otros pequeños ajustes).

Esto que parece un detalle sin mucha importancia, nos dota para dar valor narrativo a nuestro juego si queremos. Puede parecer que en nuestro caso apenas se vea diferencia, quizás alguno de vosotros piense que no se hubiera dado cuenta del detalle. Pero podríamos aplicar una corrección de color mucho más drástica para darle al jugador información mucho más importante. Por ejemplo, si queremos hacer una misión que ocurra en el pasado (cosa que tenemos pensado), podríamos aplicar una corrección de color que hiciera que todo el juego se viera en tonos sepia.

Tonos sepia para dar sensación de paso del tiempo.

Como veréis, abre nuevas posibilidades, ya que también podríamos hacer que se viera en blanco y negro si la vida del jugador o del paquete está muy delicada. Pero todo esto ya lo veremos como lo vamos implementando.

Si os estáis preguntando como se hace esa corrección de color, no sufráis, este jueves publicaremos un TIP explicando el proceso paso a paso, así que, ¡estad atentos! De momento, os dejamos con un collage de algunas escenas del juego del antes y después de aplicar la corrección de color.

Antes de la corrección de color.

Después de la corrección de color.

Antes de la corrección de color.

Después de la corrección de color.

Obviamente, seguiremos trabajando en la iluminación e iremos informando sobre novedades, ya que no creemos que este sea el último artículo donde hablemos sobre el tema. Hay mucho que aprender :_D.

Esperamos que os haya resultado útil esta información :D.

Configuración de la iluminación global.

Dentro del apartado gráfico una de las partes más importantes y más influyentes en el resultado final del juego es la iluminación. Distintas configuraciones de la iluminación puede darle, a una misma escena, un aspecto más o menos emocional dependiendo de la luz que se le aplique, su intensidad, su color, etc.

Unity, desde la versión 5, incorpora una característica muy interesante en este aspecto y es la iluminación global. Aunque no vamos a explicar en qué consiste exactamente la iluminación global explicaremos cuatro cosas sobre el tema y siempre podéis ver el artículo en el manual de unity donde se comenta más detalladamente.

A grandes rasgos se puede decir que es la iluminación que afecta, directa e indirectamente, sobre un objeto.

La iluminación directa sobre un objeto es la iluminación de las fuentes de luz que tiene la propia escena y que inciden directamente en el objeto, como la luz del sol.

La iluminación indirecta seria la luz rebotada de otros objetos que tiene alrededor y que, dependiendo del material de estos objetos, también influye sobre la luz que se le aplica a nuestro objeto. Así por ejemplo, si tenemos una pared roja y justo al lado un cubo blanco, si la luz da directamente sobre la pared, el cubo se teñirá un poco de rojo, porque la luz que rebota sobre la pared roja influye sobre la superficie del cubo blanco.

Como una imagen vale más que mil palabras, a continuación se muestra un ejemplo visual de la iluminación global.

Ejemplo de iluminación global en Unity.

Como se puede ver, la imagen de la izquierda es sin iluminación (sólo con el color de cada objeto). La imagen del medio es sólo con iluminación directa. Y finalmente la imagen de la derecha es con la iluminación global, donde influye tanto la iluminación directa como la que se genera indirectamente.

Se puede apreciar como la iluminación incidente sobre la bola blanca hace iluminar el interior de la habitación. También se puede apreciar como la superficie de las bolas que están más cerca de las paredes se tiñen del color de esa pared.

Hay que decir también que hay varios niveles de iluminación global y que se aplican varias técnicas en una escena a parte de la luz directa e indirecta. Una misma escena con iluminación global, no se verá igual de bien en un juego en tiempo real que como imagen renderizada con un programa de edición como blender. Renderizar una escena con una muy buena iluminación tiene un coste de procesamiento muy elevado y no es factible llegar a ese nivel de detalle en un juego que se ejecuta todo en tiempo real. Lo más parecido a eso, sería usar una iluminación baked o pre-renderizada, que aunque no es a tiempo real, se puede acercar bastante al resultado final.

Bueno, hecha esta introducción sobre la iluminación global para los que no estaban muy familiarizados con ella, vamos a comentar como hemos configurado la iluminación de nuestro juego. Cabe decir que es una configuración que seguro se irá modificando y mejorando durante el desarrollo del juego, pero por el momento nos servirá para tener una base por donde empezar.

Primero vamos a mostrar una imagen de como quedaría un bloque de edificios con la iluminación por defecto de unity.

Escena con la iluminación por defecto de unity.

Por defecto es una iluminación decente, pero para nuestro caso, que queremos darle un toque más cartoon al juego, le falta algunos ajustes en la configuración.

Para quienes quieran aplicar una iluminación global a su escena, vamos a resumir los pasos para aplicar correctamente las luces. Decir que puede tener muchas configuraciones, la de a continuación es sólo una más, pero os puede servir para tener una base.

Dentro de unity, en la pestaña Lighting y subpestaña Scene, modificamos los siguientes valores:

• Ambient source: Color
• Ambient color: #544689 (aquí aplicarle el color que más os guste para vuestra escena)
• Activar la opción: Precomputed Realtime GI
• Realtime resolution: 0.5 (para nuestra escena en lowpoly y vista de lejos, es suficiente)
• Desactivar la opción: Baked GI (de momento no tendremos iluminación pre-renderizada)
• Desactivar la opción: Auto-build (la aplicaremos manualmente luego de hacer los cambios)

Crear un objeto Directional Light y arrastrarlo a nuestra escena. Esta fuente de luz simulará la luz del sol. Configuraremos los siguientes parámetros:

• Color: #F4E2ACFF
• Shadow Type: Shoft shadows
• Strength: 0.85 (si queréis le podéis bajar la intensidad para que no sean tan oscuras)

Después de configurar la iluminación global y crear nuestra fuente de luz es muy importante activar la opción Static de los objetos que queremos que se le aplique la iluminación global. Esta opción la encontraréis en la pestaña Inspector de cada objeto, a la derecha de su nombre. Esta opción indica que el objeto no se moverá y sobre el cuál la luz puede rebotar. Por lo tanto, a los objetos móviles, como nuestro coche, no se le podrá aplicar iluminación global y que esta rebote en el material de nuestro coche. Para estos casos, existe otro método, como las light probes pero que en este artículo no trataremos porque aún no nos hemos puesto con ellas.

También comentar que para nuestro caso en concreto, como queremos una estética cartoon de nuestro juego, hemos modificado el shader de los objetos, el cual también influye mucho en como se ve cuando se le aplica luz. Por defecto unity aplica el shader Standard a los objetos. En nuestro caso, hemos seleccionado el Legacy shaders/Diffuse, el cual aviva los colores del objeto y le da a la escena un toque más colorido.

A continuación mostramos la escena con una primera prueba de iluminación y la cuál nos servirá como base para ir mejorándola poco a poco durante el desarrollo del juego.

Escena del juego después de configurar la iluminación global.

Finalmente, para los que quieran profundizar más sobre la configuración de la iluminación global en unity, os dejamos este enlace a un tutorial oficial muy interesante y completo.

Esperamos que os haya sido útil y nos vemos en la siguiente entrada :).