Cómo PIGIAMA KASAMA redujo 218 MB del juego web Kasama: El Despertar

Kasama: El Despertar es un juego de aventura episódico, basado en la historia, creado por PIGIAMA KASAMA. Para crear este juego para la web, el equipo necesitaba optimizar el rendimiento en todos los dispositivos mientras mantenía una alta fidelidad visual. Aquí es cómo hicieron realidad su visión.

¿Cómo puede un estudio ofrecer una experiencia visualmente impresionante y emocionalmente atractiva en la web?

Después de pasar dos años haciendo juegos para otras marcas, el equipo de PIGIAMA KASAMA se sintió seguro de que un juego original, impulsado por una narrativa, encontraría una audiencia en la web. Mientras Kasama: El Despertar comenzó como un juego de lucha en VR y de escritorio, decidieron adaptar el juego a una aventura de rompecabezas episódica.

Para experimentar Kastania, hemos incrustado el juego a continuación para que lo disfrutes en navegadores de escritorio. Para móviles, por favor consulta la aplicación de Spatial.

Como desarrolladores de Unity desde hace mucho tiempo, los fundadores del estudio Matteo Fanchin y Paride Stella querían encontrar un socio para el desarrollo y lanzamiento de plataformas que compartiera prioridades similares, como la libertad de creación, alta fidelidad visual, grandes experiencias para los jugadores y soporte multiplataforma.

"Encontramos que Spatial es la plataforma definitiva para contenido generado por el usuario (UGC)." Al combinar sus capacidades de simplificación de procesos y la accesibilidad que ofrece a los jugadores con la flexibilidad que tenemos al construir con Unity, hemos podido llevar los límites de audio, visual y experiencia para un juego web," dice Fanchin.

El equipo de Espacial refleja el valor que el equipo de PIGIAMA KASAMA aportó a la colaboración. Jake Steinerman, jefe de relaciones con desarrolladores, dice: “Hemos construido la plataforma de tal manera que los creadores pueden tener experiencias de muy alta calidad en la web, móvil y VR. Cuando vimos las primeras versiones de Kasama: El Despertar y otro trabajo que hizo el equipo, sabíamos que teníamos que apoyarlo.

Desafiando el statu quo

A pesar de que el equipo de PIGIAMA KASAMA tiene creatividad, experiencia y apoyo de Unity y Spatial, su visión trajo muchos desafíos. Uno de los principales obstáculos fue optimizar el juego para el rendimiento en diferentes dispositivos mientras se mantenía una alta fidelidad visual. "Las limitaciones de WebGL nos obligaron a ser innovadores en cómo implementamos gráficos, mecánicas de juego y la experiencia general del usuario", explica Stella.

Para cumplir con sus expectativas visuales y de rendimiento, necesitaban comprimir el tamaño de la construcción sin sacrificar la calidad. Seleccionaron el Universal Render Pipeline (URP), Shader Graph, el Animation System de Unity, y la compresión de animación integrada para lograr esto.

Los resultados

• Redujo la memoria de textura del juego de 264 MB a 140 MB
• Corta el número de vértices de malla de 550,000 a 351,000
• Disminuyó la memoria de audio de 86 MB a 9 MB
• Se ha reducido el tamaño del sprite para la interfaz de usuario de 45 MB a 28 MB
• Se redujo el número de materiales únicos utilizados de 75 a 57
• Mejor rendimiento de 4 FPS al principio a un mínimo de 30 FPS en dispositivos de gama baja
• Acumuló más de 80,000 reproducciones en las primeras siete semanas desde su lanzamiento

Maximizando recursos limitados

Su enfoque de diseño fue ser muy consciente de sus restricciones de recursos desde el principio, pero también tener la flexibilidad y capacidad para aumentar o disminuir la fidelidad visual a su discreción. El poder de cómputo y las limitaciones de memoria demostraron ser sus mayores desafíos, y para mantener el rendimiento, tuvieron que reducir la resolución de algunas de las texturas. "Colocamos la textura de la más alta calidad donde era más visible", dice Stella.

El equipo utilizó la menor cantidad de recursos posible y ese enfoque afectó a todo. Mantuvieron los polígonos bajos y el tamaño de la textura pequeño para limitar el número de materiales tanto como fuera posible. También optimizaron las UVs, coordenadas de textura bidimensionales que corresponden con la información de los vértices de una geometría.

“Dado que los movimientos de la cámara son conocidos y muy restringidos, logramos proceder con una eliminación agresiva de oclusiones en todas las geometrías antes del proceso de texturización para que cada polígono y píxel se utilizara al máximo”, dice Fanchin. "Este proceso evita que Unity realice cálculos de renderizado para GameObjects que están completamente ocultos de la vista."

La animación fue otra área donde el equipo redujo tamaño. Utilizaron el Tipo de Animación Humanoide del Sistema de Animación de Unity, junto con el sistema de retargeting de animación Mecanim. Además, el proceso de compresión de animaciones integrado de Unity les ayudó a optimizar el rendimiento al disminuir el peso total de las animaciones en el proyecto. Esto fue especialmente útil para reducir las animaciones de captura de movimiento para la actuación facial del personaje, que tienden a ser excesivamente detalladas y pesadas.

Encontrando su luz

Una buena iluminación marca la diferencia y es difícil de lograr en un juego web", dice Stella, y el equipo quería asegurarse de que la calidad de la iluminación coincidiera con el resto de la fidelidad del juego. La iluminación también fue clave para la mecánica del juego. El equipo lo utilizó para crear tensión, guiar el movimiento de los jugadores y resaltar áreas u objetos importantes dentro del juego. Los efectos dinámicos enfatizaron momentos clave y transiciones en la historia.

"Queríamos utilizar iluminación horneada tanto como fuera posible." Esta es una forma de dar la percepción de una iluminación de alta calidad en plataformas que normalmente no ofrecen ese grado de fidelidad," dice Fanchin.

Uno de los desafíos más complejos del equipo fue la transición de la iluminación en el entorno sin cargar la escena y crear cambios de iluminación dinámicos cuando se encienden las luces. Usaron un sombreado personalizado que manipulaba los mapas de luz en tiempo real para hacer que todo fuera plano y dar la ilusión de luz dinámica. Stella explica que, "para lograr esto, es clave hacer el diseño del juego y el diseño del entorno como un proceso completo en lugar de separarlo. Cada elemento necesita servir al otro.

Usaron Shader Graph para desarrollar el shader personalizado, que fue particularmente útil durante lo que el equipo llama “la secuencia de la Pesadilla.” Cubre el mapa con una sustancia negra mientras neutraliza simultáneamente la iluminación, dejando el entorno en blanco y negro.

“Cuando el jugador enciende la luz, el shader invierte este efecto, creando la ilusión de que la luz se está activando y limpiando la sustancia negra de la zona iluminada”, dice Fanchin.

Este sombreado personalizado también fue extremadamente útil durante otro capítulo, en el que un gran número de castañas explotan. Manejar las castañas como entidades individuales era impráctico, por lo que las agruparon como una sola malla y utilizaron el sombreado para gestionar el temblor y las explosiones.

Cada castaña se mapea en la cuadrícula UV de izquierda a derecha, correspondiente a la secuencia de explosiones, con las castañas en la parte superior de las pilas explotando primero. El shader selecciona grupos predefinidos de castañas por índice, mientras que otro script coloca explosiones de sistemas de partículas en las ubicaciones precisas donde las castañas están a punto de detonar.

"Este enfoque nos permitió gestionar de manera eficiente una gran cantidad de geometría y dinámicas complejas sin sobrecargas de rendimiento, asegurando el cumplimiento de los requisitos de rendimiento web", explica Stella.

Debido a las limitaciones de tamaño de la construcción, también tomaron algunas decisiones artísticas para mejorar el rendimiento. Eligieron trabajar con áreas oscuras para ocultar elementos. Esto les ayudó a optimizar el número de polígonos y mallas con piel. "Hemos añadido mucho más detalle a las áreas más claras", dice Fanchin.

Gestionar la producción de audio

El diseño de sonido influyó en todo, desde el ritmo de la jugabilidad hasta el diseño de los entornos y las interacciones, y guía a los jugadores mientras profundiza su conexión emocional con la historia. El equipo de PIGIAMA KASAMA creó y produjo bandas sonoras para coincidir con el estado de ánimo y el ritmo de cada episodio. También trabajaron con artistas de voz y contrataron a un lingüista para inventar un idioma. Su objetivo era crear una experiencia auditiva que mejorara la calidad inmersiva del juego.

Siempre que una experiencia o un producto tiene un mal audio, lo escuchas. Si el audio es bueno, es invisible”, dice Stella.

Ejecutaron un riguroso proceso técnico de tres etapas para la producción de audio antes de implementarlo en el juego.

Etapa 1: Unificación y mezcla/masterización de clips de audio

La primera etapa requería unificar múltiples clips de audio, especialmente para sonidos en bucle como paisajes sonoros ambientales y la banda sonora del juego. Este proceso se extendió a ciertos efectos de sonido de un solo uso, que se superpusieron y consolidaron en pistas singulares. Estas modificaciones se integraron durante la fase de mezcla y masterización, asegurando que los clips unificados mantuvieran la consistencia en la dinámica de audio y el equilibrio general en diferentes entornos de reproducción. Esta etapa fue crucial para minimizar inconsistencias y asegurar experiencias auditivas cohesivas, particularmente para secuencias en bucle que necesitaban transitar sin problemas en el juego.

Etapa 2: Conversión de formato a estándares de compresión optimizados

En la segunda etapa, los archivos de audio originales de alta fidelidad, típicamente en formatos AIFF y FLAC, fueron convertidos al formato OGG. Una frecuencia de muestreo de 48 kHz y una profundidad de bits de 16 bits, cumpliendo con los estándares de la industria para mantener un equilibrio entre la calidad de audio y la eficiencia del rendimiento. Se utilizó el códec de compresión Vorbis, que permitió una reducción significativa del tamaño del archivo sin comprometer la calidad de audio perceptual.

Etapa 3: Implementación y ajuste fino de la unidad

La etapa final implicó la integración de los archivos de audio procesados en Unity. Esto incluyó la meticulosa selección de métodos de carga apropiados (por ejemplo, streaming para pistas más largas o precarga para efectos de sonido críticos) para optimizar el rendimiento durante el juego. El equipo ajustó finamente la configuración de compresión Vorbis para lograr un equilibrio entre la fidelidad de audio y la utilización de recursos.

Además, se tomaron decisiones cuidadosas sobre si los archivos de audio específicos debían ser manejados en mono o estéreo, según su papel en el diseño de sonido y los efectos de espacialización en el juego.

El riguroso proceso de optimización implementado en la etapa final resultó en importantes ganancias de almacenamiento y rendimiento. Al aprovechar el formato OGG y ajustar la configuración de compresión, los activos de audio se comprimieron a alrededor de 10 MB en total. Esto marca una reducción sustancial en comparación con los 500 MB estimados si se hubieran utilizado archivos AIFF sin comprimir, o la huella de 100 MB para los equivalentes MP3. Estos resultados no solo minimizaron el tamaño general del juego, sino que también aseguraron un uso eficiente de la memoria y un rendimiento de audio fluido durante el juego.

Desplegando en múltiples plataformas

Al asociarse con Spatial en un lanzamiento web multiplataforma, el equipo de PIGIAMA KASAMA adoptó URP, la tubería de elección de la plataforma. Como diseñadora con 15 años de experiencia en CGI, Stella utilizó muchas herramientas para diversos propósitos y quedó impresionada con las capacidades de URP.

URP funciona genial. Aprendí rápidamente cómo usarlo para lograr nuestro objetivo con Kasama: El Despertar. Creo que ha logrado prácticamente todo lo que había pensado, así que estoy muy feliz," dice.

La flexibilidad y eficiencia del pipeline de renderizado fueron particularmente importantes para el equipo al desplegar en plataformas web, ya que la compatibilidad multiplataforma y la personalización les ayudaron a escalar con facilidad.

El rendimiento se puede optimizar para cada plataforma, incluso en dispositivos de gama baja, y los desarrolladores pueden usar sus propios shaders. Está diseñado para hacerlo bien en el futuro", explica Steinerman. "Desde la perspectiva de una plataforma espacial, a medida que comenzamos a soportar futuras versiones de Unity, esperamos que URP también sea compatible allí."

Los servidores de Spatial crearon compilaciones individuales y optimizaron cada plataforma. Ayudaron al equipo de PIGIAMA KASAMA con su construcción de WebGL, y sus construcciones separadas para Android y iOS nativo. Tenían diferentes calidades objetivo para ciertas plataformas.

La profundidad de campo funciona bastante bien en WebGL, pero encontramos que es menos eficiente en algunos dispositivos móviles. Por otro lado, el audio en Android e iOS es mucho más eficiente," dice Fanchin. "Podríamos haber utilizado filtros y EQ, una herramienta de audio que permite a los desarrolladores ajustar el nivel de volumen de frecuencias específicas dentro de una fuente de audio, mejor en Android, pero eso no habría funcionado en WebGL."

Ajustaron ciertos elementos para que fueran compatibles con cada plataforma, mientras que otros fueron adaptados específicamente para la plataforma. Para WebGL, utilizamos una textura de mayor resolución ya que la pantalla suele ser más grande, e incorporamos texturas de menor resolución en pantallas móviles más pequeñas. En definitiva, el lanzamiento multiplataforma fue bastante fluido", concluye Stella.

Incluyendo a los jugadores en el viaje

Después de decidir hacer un juego web, el equipo de PIGIAMA KASAMA necesitaba encontrar una manera de desarrollar contenido de alta calidad en porciones manejables. Eligieron un sistema de lanzamiento episódico que les permitió recopilar comentarios de los jugadores después de cada episodio, los cuales podían incorporar en futuras entregas. También les ayudó a probar e iterar muy rápidamente.

"Hemos establecido una hoja de ruta flexible que nos permite ajustar el proceso de desarrollo en función de los comentarios de los jugadores y de la nueva tecnología", explica Stella. "Cada episodio está planeado con el futuro en mente, asegurando que la narrativa y las mecánicas de juego puedan evolucionar de forma natural con el tiempo."

Elegir este calendario de lanzamientos también trajo múltiples desafíos. El equipo necesita asegurar la consistencia a lo largo de los episodios, tanto en términos de calidad como de narración. Gestionar las expectativas de los jugadores también es un obstáculo potencial, ya que los lanzamientos episódicos requieren un delicado equilibrio entre ofrecer suficiente contenido para satisfacer a los jugadores y mantenerlos interesados en la próxima entrega.

En definitiva, el equipo ha aprendido mucho y está emocionado de llevar este conocimiento al segundo episodio. "Estamos orgullosos de seguir mostrando la calidad de la experiencia que un desarrollador puede crear para WebGL", dice Fanchin. "Como un pequeño estudio, estamos emocionados de ver lo que podemos lograr con avances tecnológicos como Unity 6 y WebGPU."

Posibilidades ampliadas con Unity 6

Unity 6 trae todo para poner la creación de juegos fácil y rápida directamente en tus manos, independientemente de dónde se encuentren tus jugadores. Descargar Unity 6 en el Unity Hub.