Tecnología de Juegos: Sugar Party

Sugar Party es un videojuego que hicimos 5 compañeros del máster para la asignatura de Tecnología de Juegos: Jessica Mejías como artista y Carlos Castillo, Luis Lalueza, Raquel Jarillo y yo como programadores. Luis además era el "Team Lead", y yo hice de Quality Assurance. Además, la música nos la hizo mi mejor amigo, Jorge Villar.

Es un juego multijugador de tablero del estilo de Mario Party o Wii Party, en el que hay que girar una ruleta para mover casillas (en lugar de tirar un dado) y según en qué casilla caigas puedes perder o ganar puntos o bien jugar un minijuego con el resto de jugadores. Todos los personajes y demás elementos del juego son dulces y golosinas.

Los cuatro minijuegos que hemos añadido son:

• Blow it Up: Cada jugador tiene un globo de chicle que debe inflar pulsando lo más rápido posible el botón de acción.
• Sweet Rain: Los jugadores están sobre una plataforma de algodón de azúcar y deben esquivar las gotas de lluvia de galleta.
• Jellyasticity: Los jugadores están saltando sin parar sobre bolas de gominola y deben tratar de atrapar la máxima cantidad de dulces que van apareciendo en el aire.
• Candy Count: Aparecen varios dulces moviéndose entre piruletas y los jugadores deben contar la cantidad exacta del dulce indicado.

El jugador que alcance 100 puntos, gana, y se convierte en el más dulce =)

Rendering Avanzado: Subsurface Scattering + Silhouette Shading (proyecto de investigación)

Por último, para la asignatura de Rendering Avanzado hemos realizado un proyecto de investigación. La temática era libre, siempre que tuviera que ver con todo lo relacionado con el temario de la asignatura. Nosotras quisimos investigar sobre cómo hacer que los modelos de dulces, golosinas, piruletas, etc. pareciesen más "realistas" (pero sin quitarle el estilo cartoon), es decir, que no tuvieran una apariencia de plástico. Para ello, realizamos un shader personalizado, o más bien dos shaders en uno, para tener nuestros dulces con Subsurface Scattering y siluetas.

Seguro que todos hemos acercado alguna vez la mano a una bombilla o a una vela, y hemos visto cómo la piel más fina entre los dedos se volvía anaranjada. Esto es porque parte de la luz atraviesa la piel, rebota y sale por un punto distinto.

Las golosinas y los algodones de azúcar también tienen esta propiedad, llamada Subsurface Scattering, así que se la añadimos a nuestro juego. Para implementar el shader, nos basamos en el código desarrollado por Marc Bouchard y Colin Barré-Brisebois de EA para el motor gráfico Frostbite.

Además, quisimos añadir siluetas a los modelos del juego, para darle una apariencia más cartoon. El Toon Shader de Unity3D no nos convencía, ya que aplanaba demasiado los objetos, así que también lo implementamos nosotras mismas. He aquí la comparación:

En la próxima entrada pondré el vídeo de presentación del juego y hablaré más de él, pero pongo aquí un adelanto, para mostrar cómo quedó nuestro shader personalizado de Subsurface Scattering con siluetas. Personalmente, me encanta esta imagen:

El vídeo con varias escenas del juego con el shader es el siguiente:

Rendering Avanzado: Ray Tracing

La segunda práctica de Rendering Avanzado consistía en realizar un Trazador de Rayos (Ray Tracing), también con OpenGL y C++. Para ello, implementamos varios algoritmos y los probamos en varias escenas distintas.

• Nuestro algoritmo de traza de rayos con tres luces de colores, sombras, reflexiones, corrección gamma y photo exposure:

• Supermuestreo en el lanzamiento de rayos para reducir los bordes dentados (antialiasing):

• Método Monte Carlo:

• Niebla:

• Subsurface Scattering (de color verde):

• Cornell Box:

Para implementar el Subsurface Scattering, modificamos un algoritmo que creamos también para esta asignatura y que presentaré en la siguiente entrada.

Rendering Avanzado: El Viaje Alucinante

Para la asignatura de Rendering Avanzado, mi compañera Jessica Mejías y yo hicimos dos prácticas y un trabajo de investigación.

La primera práctica consistía en hacer un recorrido a lo largo de una vena en OpenGL y que en algún momento se produjera una transformación. Nosotras hicimos nuestra transformación de modo que la vena se fuera dañando poco a poco y que luego, para reparar la vena con algún tipo de medicamento, tuviera lugar una criogenización.

Nuestra vena tiene forma de corazón, y consiste en un cilindro generado proceduralmente siguiendo un conjunto de curvas de Bézier enlazadas que dan forma a la vena, y por cuyos puntos pasa la cámara.

Como comenté antes, en primer lugar la vena se va dañando poco a poco, como si sufriera un deterioro fibrótico:

Luego hay un instante de ruido, supuestamente en el momento de la toma del medicamento, y entonces empieza la criogenización, muy poco a poco, hasta terminar completamente congelada. Los glóbulos blancos y rojos que están en posiciones aleatorias dentro de la vena también sufren la transformación.

Hemos utilizado ruido de Perlin seamless (sin costuras) tanto en el shader de fragmentos como en el de vértices de la vena, para dar el color y también las protuberancias de las paredes de la vena, a modo de displacement mapping. Para las transformaciones, creamos un shader personalizado que utiliza un mapa celular modificado. Todos los shaders los hemos programado usando GLSL.

El usuario puede controlar la cámara desde el teclado (modo automático o manual, movimiento, rotación, zoom), además de elegir el modo de renderizado (polígonos rellenos, modo alámbrico o puntos) y si el movimiento es lineal o corresponde a los latidos del corazón.

En el vídeo el movimiento de la cámara a veces no parece del todo fluido debido a la calidad del vídeo, pero en nuestra práctica el movimiento sí es fluido, ya que se consigue interpolando entre los puntos de las curvas de Bézier.

Simulaciones físicas

Para la asignatura de Animación Avanzada, realicé varias simulaciones físicas en C++ con Visual Studio, utilizando distintos métodos:

• Masa-muelle y ODEs (ecuaciones diferenciales ordinarias):

• Sólidos articulados:

• Simulador de fluidos:

Shaders

En la entrada anterior expuse algunas imágenes de texturas procedurales programadas en CPU. Hoy pondré varios enlaces de shaders, algunos también de texturas procedurales pero esta vez programadas en GPU.

Todos estos shaders los he hecho con Jessica Mejías para la asignatura de Procesadores Gráficos y Aplicaciones en Tiempo Real.

El primero es un shader que hicimos para San Valentín. Era el primer shader que hacíamos, y lo cierto es que me encantó la experiencia. Estuvimos experimentando con colores hasta que decidimos hacerlo en tonos rojizos/rosados y azulados, para hacer el contraste entre frío y calor. Lo llamamos San Shadertín ;)

Después, tuvimos que hacer un shader que mostrara una esfera con teselas del estilo de Gaudí. Para este trabajo, hicimos varios shaders. En primer lugar, conseguimos crear unas teselas que nos gustaban, que cambian de forma y color con el tiempo:

Después creamos otro con apariencia más "celular", que podríamos utilizar más adelante para otra práctica de otra asignatura para crear la transformación caótica de una vena, cuya idea inicial era una especie de virus totalmente surrealista.

Después, creamos el shader de la esfera con las teselas, metiendo un mar con "teselas" celulares para hacer como cáusticas. Hay que decir que en este vídeo no habíamos conseguido todavía que la textura de la esfera fuera seamless (sin costuras), pero ese mismo día, más tarde, lo conseguimos y nos dio tiempo a entregarlo arreglado!

Por último, creamos un vídeo recopilatorio con los shaders que habíamos hecho, con diferentes colores, diferentes transformaciones, arena en vez de mar, degradados... hasta hicimos algo parecido a un terremoto:

Texturas procedurales (CPU)

Programar texturas procedurales es algo que, sorprendentemente, me ha gustado mucho. Las primeras las programé en CPU, mapas de ruido de Perlin y celular:

Para el mapa de ruido de Perlin, se obtienen varios resultados duplicando varias veces el número de particiones (de 2 a 256) y después se interpolan todos ellos para conseguir el resultado final:

Una vez obtenido el mapa de ruido de Perlin, programar el celular fue bastante simple, y experimentando se pueden obtener curiosos resultados:

Juntando mapa de Perlin con celular:

Todas las texturas obtenidas son seamless (sin costuras).

Las texturas procedurales progamadas en GPU (shaders) las mostraré en la siguiente entrada.

Multirresolución

Olvidaba comentar una de las prácticas que más me ha gustado (y costado) del primer cuatrimestre. El trabajo era totalmente libre, pero tenía que ser algo sobre multirresolución, así que varios alumnos decidimos experimentar con algoritmos de multirresolución. Yo, en particular, con colapso de facetas y de aristas.

• Colapso de facetas:

El algoritmo que desarrollé calcula el área media de todas las facetas de la malla, y colapsa todas aquellas facetas cuya área sea menor que el doble del valor del área media. Pero tiene un gran inconveniente: sólo sirve para mallas en las que sus facetas estén agrupadas de 4 en 4 de la siguiente forma:

Para mallas de este estilo, obtenemos los resultados deseados:

Pero habría que extender el algoritmo para mallas con facetas agrupadas de diferentes formas:

• Colapso de aristas (1):

El algoritmo que desarrollé selecciona la menor arista de la malla, elimina uno de sus vértices, junto con todos los triángulos que lo contienen y retriangula el agujero; todos los triángulos que contenían el vértice eliminado pasan a contener el otro vértice de la arista colapsada:

Crea una segunda malla (malla simplificada que se va construyendo a partir de la original). Encuentra la arista más corta, selecciona el vértice a a eliminar y guarda en una lista todos sus vértices vecinos menos el vértice b que lo va a reemplazar. Elimina los vértices repetidos de la lista y los ordena de forma que cada uno sea vecino del anterior (formando el borde del agujero). Añade los nuevos triángulos (que taparían el agujero), formados por el vértice b y todos los pares de vértices consecutivos de la lista, así como todos los triángulos que no contienen el vértice a eliminado. Añade todos los vértices y elimina los no referenciados (el vértice a).

Da buenos resultados, pero es poco eficiente (tiene alto coste computacional):

• Colapso de aristas (2):

Implementé un segundo algoritmo de colapso de aristas, mucho más eficiente. Funciona para cualquier número de iteraciones y para cualquier malla. Selecciona la arista a colapsar (según el criterio de selección elegido), formada por los vértices a y b. Para cada triángulo t: Si t contiene a a y a b, se elimina el triángulo t. Si t contiene a a pero no a b, sustituye a por b en el triángulo t.

Comparando distintos criterios de selección de arista:

• Colapso de aristas (3):

Por último, desarrollé un tercer algoritmo de colapso de aristas más eficiente (a la tercera va la vencida), que tarda menos tiempo en simplificar una malla. Crea una lista de aristas a colapsar de una sola vez en lugar de colapsar una arista en cada iteración. Calcula el área media de todos los triángulos de la malla, y selecciona para colapsar toda arista que sea la menor de las aristas de cada triángulo que tenga menor área que el área media. Puede simplificar mallas mucho mayores mucho más rápido.

Otras prácticas del primer cuatrimestre

De nuevo ha pasado más de un mes desde la última entrada. Este segundo cuatrimestre está siendo demencial. Si algún futuro alumno del Máster me lee, que no se confíe. No dejan de repetirte que el segundo cuatrimestre está muy sobrecargado de trabajo, pero piensas "no será para tanto", y luego te pasas los fines de semana trabajando, sin dormir. Pero bueno, poco a poco van saliendo cosas chulas, así que merece la pena =D

Todavía hay alguna práctica del primer cuatrimestre que no he comentado aquí:

- Para Realidad Virtual e Interacción, 3 compañeros y yo diseñamos un simulador de escenarios virtuales con Realidad Aumentada y guantes hápticos para que el usuario pudiera visitar lugares ficticios (como los escenarios de sus películas o series favoritas) o reales (como ruinas y otros lugares históricos). Con el simulador, se podría ir a Nueva Zelanda a visitar la Comarca, recorrer un templo romano e incluso dar la mano al mismo Napoleón.

- Para la misma asignatura, también había que hacer un trabajo sobre usabilidad, eligiendo como ejemplo el software que quisiéramos; en mi caso, elegí el videojuego Heroes of the Storm (de Blizzard, que en ese momento estaba en fase alfa (a la que yo tenía acceso), gracias a lo que pude encontrar algún pequeño defecto de usabilidad. Así que busqué unos principios de usabilidad específicos para videojuegos. Pero quise ir más allá, y encontré también unos principios de usabilidad específicos para videojuegos online multijugador (MMO). No voy a comentar aquí más detalles, pero por si alguien quiere echarle un vistazo, los autores de estos principios son David Pinelle, Tadeusz Stach y Carl Gutwin.

- Para Modelado y Comportamiento de Personajes, he realizado cinco pequeños vídeos para mostrar los 12 principios de la animación, con un modelo de personaje bastante peculiar: un monstruo con forma de bola con una gran boca, brazos y patas, y con una antena con un ojo. Cuando tenga más tiempo, haré un pequeño montaje y lo subiré a youtube.

- También realizamos dos compañeras y yo una escena en OpenGL con iluminación de Phong, pero lo que debería ser un cubo rotando, en realidad mostraba un folio. No pudimos arreglarlo a tiempo, así que intentaremos mejorarlo (si nos da tiempo) para Junio.

Estos días, gracias a Rendering Avanzado, me he enganchado a la creación de texturas procedurales. Intentaré poner pronto algunos ejemplos! =D

Juegos de varias asignaturas

Hace más de un mes que no escribo ninguna entrada a causa de los exámenes y los trabajos de clase... pero tanto trabajo ha merecido la pena. He hecho varios juegos para prácticas de algunas asignaturas.

Para la asignatura de Animación por Computador, he hecho un pequeño juego de tipo runner con mi gata Sally como protagonista. Tiene un "modo normal", con un escenario relativamente corto para aprender a jugar, y un "modo infinito" donde los escenarios se van generando de forma aleatoria, y se van eliminando una vez son sobrepasados.

Para Fundamentos Matemáticos y Físicos para Informática Gráfica, he hecho dos prácticas:


1. Tiro parabólico: Aproveché esta práctica para hacer un pequeño minijuego en el que, con una catapulta, hay que lanzar proyectiles a unos orcos en el Abismo de Helm (el Señor de los Anillos). Se pueden cambiar la dirección, el ángulo y la velocidad del lanzamiento.

2. Masa-muelle: Aquí me inspiré en la típica caja sorpresa de la que sale un muelle con un payaso. Se pueden cambiar la posición y velocidad iniciales, la masa del objeto y el coeficiente del muelle.

Para Modelado y Comportamiento de Personajes, mi compañera Jessica y yo hicimos un minijuego en el que unos personajes se persiguen y huyen unos de otros. Para la inteligencia artificial, utilizamos la herramienta RAIN.