Arte técnico detrás del color intenso de I See Red

En esta publicación de invitado, Whiteboard Games detalla la historia del primer lanzamiento comercial del estudio, Veo Rojo, y comparte el pensamiento técnico que se utilizó en el enfoque único del juego hacia el color.

Somos Whiteboard Games, un estudio de desarrollo fundado en 2021, en Buenos Aires, Argentina, por cinco graduados universitarios que querían trazar su propio camino en la industria de los videojuegos. Desde entonces, Whiteboard ha crecido hasta un equipo de 30 jóvenes profesionales, y estás leyendo esta introducción porque estamos reunidos aquí hoy para hablar sobre nuestro primer lanzamiento comercial: Veo Rojo.

Veo Rojo es un frenético roguelite de disparos twin-stick que trata sobre la rabia, el combate, la venganza, la sangre, pasados trágicos y – sí, está en el nombre – ROJO. No es difícil de distinguir entre otros juegos, no solo por los entornos de ciencia ficción y la cámara cenital, sino también por una estética crucial: Te desafiarán a encontrar más colores que negro, blanco, gris y rojo. Esta es una decisión que se tomó desde el principio y está estrechamente vinculada tanto a los aspectos narrativos como a los de jugabilidad. Por supuesto, viene con sus desafíos: Hacer (y jugar) un juego con una paleta tan limitada no es para todos. ¿Cómo, entonces, lo hicimos? Sigue leyendo para averiguarlo.

Comencemos con un breve desvío histórico, para examinar cómo la apariencia evolucionó con el tiempo y las decisiones clave que llevaron a lo que Veo Rojo es hoy.

Todo comenzó con un proyecto de tesis para el curso de “Diseño y Programación de Videojuegos” en la Escuela de Arte Multimedia Da Vinci en Buenos Aires. De este trabajo, nació un juego que necesitaba ser artísticamente menos exigente ya que los estudiantes no tienen mucho financiamiento. En este punto, el color rojo aún no había tomado el control. Había azul, incluso verde, en el juego, pero no te encariñes demasiado porque los colores adicionales no estarán por mucho tiempo.

Tras completar el curso, nuestro equipo fundador no pudo dejar el proyecto, viendo un verdadero potencial comercial en él. Decidimos continuar el desarrollo fuera de la universidad y reunir un equipo, lo que llevó a establecer Whiteboard Games como un estudio. (Dato curioso: Algunos de nuestros profesores también vieron potencial y, cuando se les pidió ayuda, decidieron unirse al equipo.)

En este punto, las bases del juego ya se habían cubierto: un shooter de ciencia ficción de ritmo rápido sobre venganza roja y furiosa.

Pasaron meses e incluso años. En medio de conversaciones con editores e inversores, I See Red creció para tener muchos niveles interconectados - ahora no solo con enemigos humanos, sino también alienígenas - una enorme cantidad de pasivos, escenas cortadas y un estilo artístico aún más pulido. Con suficientes correcciones de errores, pruebas, contenido y mejoras de rendimiento (está bien, no hay necesidad de agradecernos), el juego se estaba preparando para ver la luz.

Finalmente llegó el momento del lanzamiento de la demo del juego. Habíamos participado en algunos eventos y concursos, y estábamos orgullosos de lo que habíamos creado. En esta etapa, decidimos planear un posible lanzamiento para consolas, pasando de HDRP a URP y cambiando la HD nítida por una estética aún más estilizada. También añadimos un sutil tono frío a los colores en escala de grises (sí, el azul ha vuelto... pero no le digas a nadie) para una sensación más metálica, y pulimos todo aún más. Hacer este cambio significó que tuvimos que desensamblar algunas características de HDRP en URP, pero estamos seguros de que el esfuerzo valió la pena.

Sumando a los niveles alienígenas de la etapa anterior, I See Red ahora también tenía enemigos robots, varios jefes, historia, QA, localización y más "hecho". Era hora de presionar el gran botón verde.

Sin duda fue un largo viaje con muchos desafíos y cambios en el camino, sin mencionar años de trabajo. Creemos que se siente y se ve increíble; y, si Reggie Fils-Aimé y otros entre los "ejecutivos más experimentados de la industria" lo dicen, no debemos estar locos. De todos modos, lo logramos y lo lanzamos. Pero la pregunta de cómo permaneció. Buenas noticias para todos ustedes, fanáticos del arte técnico: Es hora de ponerse técnico. (Advertencia de contenido: Nos esforzamos al máximo con la sangre.)

Pasamos mucho tiempo en la sangre porque es la principal retroalimentación visual que obtienes cuando golpeas a un enemigo o te golpean en el juego. Este elemento necesitaba ser claro y satisfactorio, y el rojo es el color más importante del juego, así que no había espacio para la pereza.

Queríamos pintar el mundo de rojo con sangre, así que necesitábamos un fuerte contraste entre el gris de los entornos y la sangre, así como variaciones para las calcomanías. Podríamos haber usado texturas para enmascarar las calcomanías, pero con la cantidad que necesitábamos terminaría siendo demasiado repetitivo. Por supuesto, no queríamos eso.

Lo que se nos ocurrió fue combinar ruido, el proyector de calcomanías URP y las coordenadas del mundo para que, dependiendo de dónde colocáramos las calcomanías, la forma cambiara. Usando esta técnica, logramos que el ancho, la altura, la suavidad de los bordes y la rugosidad de la sangre pudieran cambiarse mientras se animaban suavemente. Esto es útil cuando tenemos que generar, por ejemplo, un charco de sangre bajo un enemigo derrotado.

Al cambiar los colores del albedo y las propiedades de las máscaras de ruido, también podríamos generar diferentes tipos de sangre para alienígenas y robots, que tienen algo que se asemeja al aceite. Esto no solo fue para lograr una diferencia estética entre enemigos. También era igualmente importante desde una perspectiva de jugabilidad saber qué sangre es cuál, ya que los jugadores pueden adquirir una habilidad pasiva a través de la cual pueden "absorber" la sangre dejada atrás, con diferentes efectos: la sangre humana es neutral, la sangre alienígena daña y la sangre de robot sana.

Aparte de las calcomanías, también hay muchas partículas de sangre utilizadas en I See Red. Piensa en la habilidad pasiva de la que acabamos de hablar: Necesitábamos una forma de comunicar la absorción a los jugadores. El resultado es, por supuesto, los mini tornados de sangre.

Estos torbellinos espeluznantes se lograron utilizando tanto una textura en movimiento como un efecto de partículas. El efecto de partículas es una cinta modelada en 3D (una franja de polígonos) más un shader que desplaza la textura hacia arriba utilizando la UV principal. Haciendo esto, pudimos usar los datos personalizados del sistema de partículas para cambiar la velocidad, el flujo y la forma de la malla, así como agregar un desvanecimiento para las franjas para que el efecto pudiera aparecer y desaparecer suavemente en la parte superior e inferior del tornado. Toma esto, añade algunas cuerdas de sangre para un extra, y tienes un tornado de sangre inverso que absorbe sangre en el jugador.

Hablando de partículas, no podemos olvidar los efectos de partículas al impactar cuando el jugador o los enemigos son dañados. Estas partículas se generan en el mismo fotograma que el charco de sangre/decal que mencionamos, con ambos animándose para una transición fluida a través de una coroutine de código. Se generan en la dirección en la que iba la bala, generalmente opuesta al jugador.

Hacer esto a través del código resultó muy útil para personalizar el efecto, haciéndolo más grande si el daño era mayor, o si el enemigo estaba más cerca, o incluso si el efecto estaba cerca de una pared. Usamos raycasting para determinar cuánto tiempo podían ser el decal y las partículas antes de atravesar una pared y cuál debería ser la inclinación del decal (si necesita ir en una pared, por ejemplo). Luego pasamos esos valores a la animación, y ocurrió la magia.

Eso es mucha sangre. Mucho rojo. Dado que el juego utiliza una paleta limitada, necesitábamos asegurarnos de que la legibilidad no se perdiera en ningún aspecto. Las limitaciones de nuestro aspecto característico significaron que teníamos que ser creativos y usar muchas herramientas y trucos. Por ejemplo, las cosas rojas no siempre son rojas.

Podrías ver una puerta que tiene un contorno rojo y brilla, pero, una vez que pasas a través de ella, se vuelve gris. Lo mismo sucede con los enemigos, que son rojos mientras son hostiles y grises una vez que ya no son... bueno, ya no hostiles. A través de estas señales, el juego utiliza su color distintivo para comunicar qué cosas son de interés: áreas inexploradas, objetos importantes, obstáculos peligrosos y más. De alguna manera, es como si el jugador tuviera la "visión de detective" constantemente activada, y actualizándose constantemente para mostrar solo lo que es relevante en ese momento.

Pero, ¿y si no ves el rojo de la misma manera que nosotros? ¿Qué pasa si alguien que quiere jugar I See Red no puede percibir las diferencias entre el rojo y el gris, también? Ciertamente queremos que todos puedan experimentar "la Rabia", que es la misma razón por la que I See Red está disponible en 13 idiomas. Seguramente, muchos de los hablantes de esos 13 idiomas se beneficiarían de las características de accesibilidad. Entra en nuestro modo personalizado de daltonismo URP.

Mientras hacíamos I See Red, sabíamos que un universo en blanco, negro y rojo podría no ser legible para todos, así que ideamos una solución para implementar diferentes modos de daltonismo para que todos pudieran jugar. La mejor manera de hacer esto fue utilizando las características de Renderizado Scriptable en Unity y un shader simple. La idea principal detrás de esto es transformar cada valor en los diferentes canales utilizando una especie de Tabla de Consulta dentro del SRF que luego traduce esos valores en el shader para el Pase de Renderizado final. Debido a que el efecto necesitaba ejecutarse como un pase final sobre cada otro objeto que se estaba renderizando en el mundo, este pase se realiza después de que la UI se renderiza y es el pase final en cada cuadro en I See Red.

Después de investigar los diferentes tipos de daltonismo y cómo podríamos usar el Renderizado Scriptable para atenderlos al entender cómo cada persona podría percibir los colores en I See Red, pudimos crear diferentes modos para agudizar o modificar los colores en consecuencia: Protanomalía, Protanopía, Deuteranomalía, Deuteranopía, Tritanomalía, Tritanopía, Acromatomalía y Acromatopsia. Dependiendo de a quién le preguntes, el rojo del juego puede no verse tan rojo bajo estos, pero está bien para nosotros: Al final del día, lo más importante es que todos puedan disfrutar del juego. Hay muchos más sistemas en marcha para comunicar toda la rabia que necesitarás.

Finalmente, nuestra sangre es hermosa y para todos... al menos mientras tengan más de 14, 15, 16 o 17 años, dependiendo de dónde vivas. Pero la sangre ciertamente no es todo lo que compone la estética de I See Red. No olvidemos que el rojo viene de muchas maneras, tonos y formas, y lo mismo ocurre con el gris.

Tuvimos que encontrar una manera de crear un esquema de color que pudiera adaptarse a nuevos modelos sin rehacer la textura desde cero, lo que lleva mucho tiempo. En este punto, debemos ser sinceros: I See Red no es realmente negro, blanco y rojo, sino en realidad rojo, verde y azul, como la mayoría de los otros juegos. Mentimos al principio (lo siento), pero aún no se parece del todo a la mayoría de los otros juegos. Esto se debe a que usamos un Shader personalizado que aplica un Splatmap, que es una textura que combina múltiples texturas o máscaras en escala de grises en una, utilizando un canal diferente (rojo, verde, azul o alfa) por textura.

Esto nos permite tener un mejor control de los colores en el juego al controlar cada valor de canal individualmente dentro del motor, y ahorrar recursos al cargar menos texturas. También ayuda enormemente con el tiempo de iteración.

Tenemos sangre. Tenemos enemigos. Tenemos entornos. Tenemos los colores que necesitamos. Se siente bien. A continuación, podríamos hablar sobre nieblas personalizadas, iluminación y matemáticas de cámara, mapeo de tonos, o esa cosa genial con la perspectiva falsa en las escenas…

Sí, se podría decir mucho más, pero estaríamos aquí durante horas (y esto lleva tiempo escribir), así que mejor lo dejamos aquí. No más cosas técnicas. Simplemente ve y vívelo: Juega I See Red tú mismo y cuéntanos si ves algo relacionado con lo que hemos hablado aquí. Por último, pero no menos importante, no dudes en contactarnos o a las hermosas personas de Unity si quieres saber más.

Gracias por leer, ¡hasta la próxima!

Puedes descargar I See Red en Steam hoy. Después de jugar, descubre más historias de desarrolladores hechos con Unity.