Devlog #3: Edge Case World Switching. Español/Spanish version.

Hoy quiero platicarles un poco sobre cómo funciona este sistema técnicamente y las decisiones que tomé al crearlo. La idea surgió inspirada en "Bullet Train" de Epic Games, donde usan un shader para mostrar cómo el mundo se "desvanece" al final de un nivel (¡y se veía increíble!). Tomé eso como base, seguí un tutorial para hacer un shader similar y... terminé con lo que ven aquí.

Aquí un rapido video que lo muestra: https://youtu.be/tsNSRPnZyOI

Desde el principio, tenía claras algunas cosas que el sistema de cambio debía hacer:

1. Lo obvio: Cambiar entre los dos mundos.
   • Al presionar el botón de cambio, el jugador es enviado a uno u otro mundo.
   • La implementación fue sencilla: el personaje guarda una referencia al nivel del mundo real y al nivel de "Genesis".
2. Guardar posición y rotación:
   • Antes de teletransportar al jugador, el juego guarda su ubicación y rotación actuales.
   • Luego, un algoritmo sencillo intercambia las variables de los mundos, para que el jugador siempre regrese al mismo punto exacto.
3. Transición para cargas pesadas:
   • Sabía que, al crecer la complejidad de los niveles, el tiempo de carga aumentaría.
   • Solución: agregué una transición breve y cargué el nuevo nivel en segundo plano (asíncronamente) mientras se reproduce.
     • Básicamente, una "pantalla de carga disfrazada"

Esta parte requirió varias iteraciones para sincronizar todo correctamente. Los detalles clave:

1. Dos escenarios, dos ritmos:
   • Dependiendo de si el jugador entraba o salía de Genesis (es decir, si el efecto debía mostrar "cargando el juego" o "desconectando del juego"), los tiempos de las animaciones cambiaban.
   • Como se ve en la imagen de arriba:
     • Al entrar a Genesis: Primero se reproduce la animación, y justo cuando el visor se coloca, se activa la carga del nivel.
2. El visor: Cronometría milimétrica
   • La animación de ponerse/quitarse el visor necesitaba sincronizarse a la perfección con la transición.
   • ¿Solución? Etiquetas de animación (animation tags) que disparan un evento vinculado al Blueprint de transición.

En cuanto a la parte visual de la animación, todo se controla mediante una línea de tiempo que modifica un parámetro escalar en el shader de postprocesado de transición. A medida que este valor aumenta o disminuye, el shader va cambiando su apariencia (como pueden ver en este video: https://youtu.be/w-M--fwXuWM). Controlar este valor en tiempo real es tan simple como ajustar una curva en la línea de tiempo.

El único elemento que faltaba era el efecto de desvanecimiento a blanco y negro al inicio y final de cada transición. Aquí es donde @jdwaugh, nuestro animador principal, tuvo una gran idea: implementar un widget de UI que apareciera y desapareciera entre las animaciones y la secuencia de transición. Una vez implementado, el resultado final es lo que pueden apreciar.

¡Fue un verdadero gusto trabajar en este sistema y creo que el resultado quedó excelente! Muchas gracias por leernos. Estén atentos porque en las próximas semanas habrá más devlogs de otros miembros del equipo.

¡Nos vemos pronto! 

 Amerhane

trad. por Sam 🍄