ACH Dev log - Efectos de Portales
En Aventura en el Castillo de Hender hay "portales" que conectan dos puntos en el espacio y los uso para crear corredores de cuartos infinitos o escaleras que te regresan al mismo piso del que vienes. Esto es parte del diseño de niveles del juego.
Al principio hice las transiciones por los portales para que no se notaran, pero quedaron tan sutiles que en los playtest los jugadores no se daban cuenta de lo que pasaba y esto causaba confusión. Entonces se se hizo necesario agregar efectos visuales y de sonido para que los portales fueran mas aparentes.
Empece buscando algún asset ya echo y me encontré con este un shader de distorsión, el primer paso fue agregar algunos quads con este shader para señalar los lugares donde están los portales, se veía así:
un gran comienzo, pero solo este efecto no me parecía suficiente, en mi mente veia partículas de lineas alrededor de las dístorsiones, trate de hacer un mockup para imaginarlo mejor he hice esta imagen:
Básico, pero me ayudo a ajustar mis ideas, eventualmente buscando referencias recordé como se ven los lentes de algunos visores de realidad virtual:
Las lineas de Vive me parecieron las mas adecuadas, entonces empece un nuevo shader graph para crear este efecto.
la base para dibujar estas lineas concéntricas distorsionadas fue:
- empezar con un nodo de coordinadas polares
- multiplicarlo con una constante para la "densidad" de las lineas
- multiplicar por un nodo de Seno para convertir el rango en valores -1 a 1
- hacer un split y quedarnos con uno solo de los canales para tener un valor mas limpio.
El resto del efecto consiste en aplicar mascaras a las lineas y animación a las UVs de las coordinadas polares. Miremos esa distorsión de UV de cerca:
A las UVs de las lineas les sumamos un poco de ruido con un nodo de simple noise, ese ruido le aplicamos un offset constante en el eje Y para que la distorsion de las lineas se mueva a lo largo del tiempo.
Es tremenda la cantidad de efectos que se pueden lograr con esta formula de ruido mas coordenadas UV.
El efecto final se vio así:
Hay una ultima parte del shader que consiste en cambiar el color y opacidad de las lineas basado en el ángulo de vision, esto lo hice con un nodo de Fresnel y un nodo Lerp. Si miras el portal de frente las lineas no se ven tanto como cuando las miras de lado.
Y eso es por este devlog, hay muchas otras cosas que he hecho mientras trabajo en el juego, vamos a ver cuantas mas logro compartir por aca!