Mejoras gráficas

Pixel art & sombras dinámicas

A medida que creamos los nuevos mapas de Adam and Ricky vamos encontrando cada vez más el estilo gráfico de pixel art que queremos para el juego.

Hemos incrementado el nivel de detalle para todo prácticamente, desde el césped de los mapas hasta los assets más grandes. Tenemos claro que eso implica mucho más tiempo, pero el resultado bien merece la pena.

Otra de las mejoras gráficas que hemos incorporado aparte de incrementar el detalle de nuestro pixel art han sido la creación de sombras dinámicas para estancias u objetos que emitieran luz utilizando shaders de oclusión.

Agua

Shader porn

Le hemos dado bastantes vueltas a cómo representar los lagos, ríos y en general cualquier charco de agua que aparezca en Adam and Ricky con algo de realismo. A pesar de que es un juego pixel art y alguna gente nos ha dicho que puede parecer demasiado HD creemos que, en este caso, tenemos que mantener el diseño de sistema de agua tal como lo hemos planteado porque es un factor bastante distintivo a nivel gráfico.

Antes de daros la chapa de cómo lo hemos montado os pasamos un video para que veáis el resultado final:

Como se aprecia en el vídeo, el agua refleja a Adam.
En realidad refleja cualquier tipo de objeto que esté en contacto con ella, players, enemigos, rocas, elementos decorativos, etc.

Para crear este efecto de reflexión duplicamos los sprites que entran en contacto con el agua, los flipeamos y los colocamos en una capa de render por debajo de la capa que contiene la shader del agua. Esta shader no es más que una shader de distorsión animada con blending.

Los sprites pueden ser duplicados de forma dinámica o estar duplicados antes de compilar el juego. Los dinámicos son todos aquellos que puedan entrar o salir de la zona de agua, mientras que los que no son dinámicos son objetos que van a estar de forma estática, por ejemplo, los bordes que delimitan el suelo con el charco de agua, rocas, etc.

Luego, igual que hacemos fuera del agua, organizamos todo por capas para darle profundidad a lo que se muestra por debajo del agua.


SORTING_ORDER_BACKGROUND_WATER_OVER_EFFECTS_MAX = -10;
SORTING_ORDER_BACKGROUND_WATER_OVER_EFFECTS_MIN = -20;
SORTING_ORDER_BACKGROUND_WATER = -30;
SORTING_ORDER_BACKGROUND_WATER_MIRROR = -31;
SORTING_ORDER_BACKGROUND_WATER_CLOUD_MIRROR = -32;
SORTING_ORDER_BACKGROUND_WATER_LIVING_MAX = -40;
SORTING_ORDER_BACKGROUND_WATER_LIVING_MIN = -60;
SORTING_ORDER_BACKGROUND_WATER_PROPS_MAX = -70;
SORTING_ORDER_BACKGROUND_WATER_PROPS_MIN = -80;
SORTING_ORDER_BACKGROUND_WATER_WALLS_MAX = -90;
SORTING_ORDER_BACKGROUND_WATER_WALLS_MIN = -100;

De esta manera podemos controlar que los peces estén por encima de rocas del fondo y la vegetación esté por encima de la propia agua sin verse afectada por la shader de distorsión.

Por último, para hacer que el agua interaccione con el entorno y sea menos aburrida le añadimos un par de propiedades:

  • Al pasar por encima o detectar que algún objeto impacta, crea un efecto de water splash.
  • Puede cambiar de color si el contenedor de agua no es demasiado grande (charcos). Útil cuando un nazi explota cerca y toda su sangre cae en el agua.
  • Si caen objetos en ella se hunden y si alguno de ellos emite sangre deja manchas de sangre que van diluyéndose con el tiempo.
  • Si los personajes o enemigos están en llamas, acercándose al agua pueden hacer desaparecer el fuego.

Y eso es todo por ahora, no nos enrollamos más. Nos vemos en el próximo post!

Leave a Reply



Adam and Ricky

DEV LOG CATEGORIES

Latest Tweets