5 fundamentos para crear juegos web

Imagina ofrecer a los jugadores una experiencia de juego rápida y accesible sin barreras como descargas de mercados móviles o registros de cuentas. La capacidad de encontrar jugadores en todas partes a través de navegadores o integrados en aplicaciones nativas a través de una vista web está al alcance de tu mano, y las posibilidades con juegos basados en la web son infinitas.

Recientemente, hemos visto un aumento en la participación de los jugadores en plataformas web, especialmente en móviles, y la tendencia no muestra signos de desaceleración. En 2023, el mercado global de juegos de navegador generó aproximadamente 15.03 mil millones de dólares estadounidenses en ingresos. A pesar del creciente auge de los géneros de juegos en consola y móvil, en 2028, se proyecta que el segmento aumente a 22.33 mil millones de dólares estadounidenses en ingresos anuales.

Este completo libro electrónico ayudará tanto a los creadores aspirantes como a los desarrolladores experimentados a profundizar y comprender cinco fundamentos para construir juegos web eficientes utilizando Unity Web. Incluye un vistazo detrás de escena de cómo títulos populares como ¡Listo, preparado, a cocinar!, Kasama: El Despertar, SquadBlast y Proyecto Prismatic cobran vida en la web.

Cubre las siguientes ideas:

1. Priorizar la planificación y el prototipado

2. Construir una interfaz de usuario dinámica

3. Crea una experiencia audiovisual cohesiva

4. Optimizar. Optimizar. Optimizar.

5. Adopta múltiples plataformas web

1. Priorizar la planificación y el prototipado

Una de las principales ventajas de la plataforma web es la velocidad con la que puedes compartir tu juego con jugadores de todo el mundo. Sin embargo, para garantizar una gran experiencia, tu juego necesita estar construido sobre una base de diseño sólida.

Esbozando una visión

Establecer una visión clara ayuda a guiar a un equipo a lo largo del proceso de desarrollo. Los estudios Stratton querían ampliar los límites de lo que se podía lograr en un juego basado en navegador tanto desde una perspectiva de rendimiento como de fidelidad visual. Su objetivo era ofrecer una experiencia de jugador de primera clase que rivalizara con las plataformas tradicionales en un entorno web.

“Esta visión fue el ancla que nos mantuvo alineados durante la creación de prototipos y la iteración, y nos ayudó a tomar decisiones coherentes y con propósito a lo largo del desarrollo”, dice Josh Loveridge, el director general de Stratton Studios.

El primer paso para crear el juego fue asegurarse de que pudieran lograr el entorno vibrante que habían imaginado mientras mantenían un rendimiento sólido, especialmente dadas las limitaciones del hardware de gama media que estaban apuntando. Esto proporcionó una sólida base técnica para el resto del desarrollo del juego.

"Comenzamos construyendo una escena de prueba con una gran distancia de dibujo, lo que nos permitió evaluar si podíamos renderizar el denso follaje, el terreno variado y los intrincados detalles que eran cruciales para la estética del juego", dice Loveridge. Aprovechando la nueva API gráfica WebGPU, probamos la escena para asegurarnos de que no solo se viera tan exuberante como queríamos, sino que también funcionara bien en diferentes dispositivos.

Prueba desde el principio

Al principio, el equipo de ULTRAHORSE se centró en desarrollar sus principales mecánicas de juego. Querían concretar el aspecto de shooter multijugador de desplazamiento lateral y acción rápida para asegurarse de que fuera divertido y atractivo. Comenzaron con pantallas más grandes, consolas y PC para conseguir la sensación básica correcta.

A partir de ahí, nos movimos rápidamente a las pruebas de jugadores. Incluso con nuestra versión beta temprana, la pusimos frente a los jugadores en línea a través de servicios como Antidote, y betas tempranas en eventos como el WASD Expo en Londres", dice el CEO y cofundador Anatolijs Ropotovs. "Esto nos permitió validar nuestras mecánicas principales y obtener comentarios inmediatos sobre lo que funcionaba y lo que no."

El PIGIAMA KASAMA equipo refleja la idea de prototipado rápido y de probar ideas desde el principio. La creación de Kasama: El Despertar comenzó con la definición del personaje y la escritura de un esquema narrativo. Querían que la historia, el protagonista y la jugabilidad se conectaran profundamente. Comenzaron creando un entorno 3D simple en Gravity Sketch VR, luego lo trasladaron a Unity para construir y probar su mecánica principal del rompecabezas.

Este enfoque práctico les permitió ver si el mecánico funcionaba bien antes de invertir demasiado tiempo en él. Una vez que estaban seguros de la mecánica y la historia, decidieron hacer del juego una aventura de rompecabezas, que les parecía la opción perfecta para la experiencia que querían crear.

"Pasamos por múltiples iteraciones durante las pruebas hasta que el equipo se siente seguro de que las interacciones funcionan." Una vez que clavamos la jugabilidad principal, pasamos al arte conceptual, asegurándonos de que se alineara con la historia del juego y la vibra general", dice Paride Stella, cofundador de PIGIAMA KASAMA.

Adaptándose a los obstáculos

Como suele ocurrir en el desarrollo de videojuegos, Stratton Studios ajustó su visión inicial a medida que se encontraron con limitaciones técnicas y descubrieron mejores ideas durante la creación de prototipos.

Refinar para asegurar el mejor resultado posible es parte del proceso creativo. Por ejemplo, un cambio significativo que tuvimos que hacer involucró el diseño de niveles", explica Loveridge. "Inicialmente, imaginamos entornos más abiertos y de forma libre, pero a medida que avanzamos, quedó claro que este enfoque no funcionaría de manera eficiente con el sistema de recorte de oclusión de losetas hexagonales que estábamos implementando.

Para mantener el rendimiento, especialmente en un entorno basado en la web, optimizaron el proceso de renderizado reduciendo drásticamente la topología en pantalla. Esto les llevó a reestructurar el diseño de niveles en cuadrantes de losetas hexagonales, lo que les ayudó a gestionar mejor la visibilidad y el recorte, y luego se centraron en puntos de estrangulación claros. Este juego mejorado y garantizó que el juego funcionara sin problemas en una amplia gama de dispositivos. El ajuste fue crucial para equilibrar su visión creativa con los requisitos de rendimiento técnico.

Si bien una buena planificación puede reducir el impacto de los desafíos que surgen durante el desarrollo, es importante tener en cuenta que esto no evitará por completo los obstáculos en el camino.

2. Construir una interfaz de usuario dinámica

Mientras que la web es la plataforma más accesible para llegar a los jugadores en todas partes, no todos los navegadores son iguales. Las variaciones en el tamaño de la pantalla, la orientación horizontal frente a la vertical y las consideraciones de la interfaz de usuario para la aplicación que aloja tu juego son todos aspectos a tener en cuenta al diseñar la interfaz de usuario de tu juego.

Manteniendo la experiencia del jugador en mente

A medida que el Coatsink equipo comenzó a desarrollar ¡Listo, preparado, a cocinar!, se dieron cuenta rápidamente de que había mucho que tenían que tener en cuenta para la interfaz de usuario. Al principio, estaban preocupados por asegurar que tanto los jugadores como los usuarios de videollamadas que no jugaban pudieran participar. Necesitaban refinar la funcionalidad de espectación existente que mantiene a los jugadores en línea de manera constante mientras ofrece a otros usuarios una experiencia de visualización positiva.

"La experiencia de espectar siempre fue una prioridad para nosotros al diseñar otros aspectos del juego", explica Kamil Bazydlo, un diseñador junior en Coatsink. "No es una característica común en todos los géneros de juegos en otras plataformas, pero dado que los jugadores están en una videollamada, era importante enfatizar la participación inclusiva de los usuarios a lo largo del juego."

También comenzaron a mirar la orientación de la pantalla desde el principio. Dado que el juego fue creado inicialmente para escritorio, se construyó con una orientación horizontal. Cuando se pasaron a lo móvil, tuvieron que soportar tanto las perspectivas en paisaje como en retrato. En Messenger, los jugadores sostienen sus pantallas como un teléfono ya que están en una videollamada, así que si el teléfono se rota, la cámara se pone de lado, lo cual no es ideal. "Esto fue una gran consideración cuando diseñamos los entornos para apoyar eso", dice Ross Furmidge, jefe de programación de Coatsink.

Superando los desafíos de la interfaz de usuario

Uno de los mayores desafíos que enfrentó el equipo de ULTRAHORSE fue crear una experiencia de juego que fuera igualmente agradable, ya sea que estés usando un ratón y teclado, un controlador o una pantalla táctil. Esto fue crucial para su visión de construir un juego verdaderamente multiplataforma.

"Inicialmente, experimentamos con diferentes estilos de juego, pero descubrimos que muchos formatos de tiradores tradicionales favorecían un método de entrada sobre otros." Esto es en realidad cómo llegamos al formato de shooter de desplazamiento lateral para SquadBlast," dice Ropotovs. "Nos dimos cuenta de que un plano 2D permitía una puntería precisa con un ratón, un movimiento intuitivo con un controlador y controles táctiles simples y autoexplicativos en dispositivos móviles."

Un desafío inesperado surgió a medida que el equipo pasaba del desarrollo web en PC al desarrollo web móvil. Inicialmente, desarrollaron una experiencia de PC completamente pulida que incluía elementos de mouse flotante en la experiencia de usuario. Esto les permitió crear una interfaz rica y detallada que aprovechaba las pantallas más grandes y el control preciso del ratón. Utilizaron descripciones emergentes, estados de desplazamiento y estructuras de menú más complejas para transmitir información y opciones al jugador.

Esto llevó a algunas decisiones difíciles sobre qué información mostrar y cómo presentarla. El equipo tuvo que hacer que la interfaz de usuario fuera más autoexplicativa, ya que no podían confiar en los estados de desplazamiento o en las herramientas complejas que funcionan bien en PC. Cada elemento tenía que ser comprensible de un vistazo, lo que les obligó a refinar el lenguaje visual y la iconografía.

Ajustando según el espacio de la pantalla

El equipo de ULTRAHORSE también se encontró con obstáculos al diseñar para entradas táctiles. En PC, podían asumir un control preciso del cursor, pero en móvil, tenían que tener en cuenta toques de dedo menos precisos y posibles clics erróneos. Esto les llevó a hacer que los objetivos táctiles fueran más grandes y a que el espaciado entre los elementos de la interfaz de usuario fuera más generoso, lo que redujo aún más la cantidad de información que podían mostrar a la vez.

También descubrieron la importancia de los componentes de interfaz de usuario escalables y flexibles. Dada la variedad de tamaños de dispositivos móviles y relaciones de aspecto, necesitaban que su interfaz de usuario se adaptara sin problemas a diferentes configuraciones de pantalla y DPI. Esto les llevó a desarrollar un sistema de interfaz de usuario más robusto que pudiera ajustarse automáticamente según el espacio de pantalla disponible. El uso de este proceso de simplificación para la web móvil ayudó a mejorar SquadBlast’s UI en todas las plataformas.

Repensando los controles del juego

¡Listo, preparado, a cocinar! se puede jugar en una amplia variedad de dispositivos con diferentes tamaños de pantalla y relaciones de aspecto, pero la ventana de visualización del juego no se extiende por toda la pantalla ya que reserva espacio para elementos como el feed de video de Meta y los controles de la plataforma. Estos no son parte de la aplicación del juego en sí, por lo que no aparecen en el Editor de Unity cuando los desarrolladores están trabajando en el juego.

"Tuvimos que tener eso en cuenta al colocar cualquier elemento de la interfaz de usuario en la pantalla", dice Bazydlo. "Hemos obtenido el rango aproximado de cuánto espacio en pantalla ocupan estos elementos de la plataforma y trabajamos con nuestro equipo de control de calidad para identificar cuál sería la relación de aspecto más estrecha a la que dirigirnos."

En dispositivos móviles, los controles específicos del dispositivo están en la parte inferior de la pantalla. Dado que el juego fue diseñado teniendo en cuenta la orientación horizontal, el equipo utilizó la parte inferior de la pantalla para mostrar algunos elementos de la interfaz de usuario en lugar de para entradas críticas del juego.

Cuando el título se lanzó suavemente en los EE. UU., el equipo incorporó análisis directamente en la aplicación, lo cual fue clave para identificar cuándo los jugadores salían del juego. Al principio, notaron que los usuarios se estaban desconectando antes de que el juego se cargara.

Vimos que cuando el menú estaba un poco más ocupado y su flujo hacia el juego era demasiado largo para los usuarios en el vestíbulo, se desconectaban rápidamente. Tan pronto como entraron en el juego, la mayoría de los jugadores continuaron jugándolo en su totalidad", dice Furmidge. "Estos fueron datos instrumentales para nosotros, y los análisis fueron un gran factor en muchas de nuestras decisiones."

3. Crea una experiencia audiovisual cohesiva

Al aprovechar gráficos avanzados y audio dinámico, los creadores pueden elevar la experiencia de juego independientemente de las optimizaciones requeridas para los navegadores. Aunque es más fácil decirlo que hacerlo y los cuellos de botella comunes deben ser considerados cuidadosamente, a medida que la tecnología evoluciona, el potencial para una alta fidelidad visual y de audio en la web es más prometedor que nunca.

Lograr niveles más altos de complejidad gráfica

El equipo de Stratton Studios estaba buscando crear un juego con alta fidelidad visual y un entorno detallado. Esto requería más potencia gráfica y flexibilidad de la que WebGL podía proporcionar.

"WebGL, aunque es capaz, tiene ciertos cuellos de botella en el rendimiento y limitaciones, como la falta de sombreadores de cómputo y la piel de GPU que nos habrían obligado a comprometer nuestra visión artística", dice Loveridge.

Decidieron mudarse a WebGPU para lograr niveles de complejidad gráfica mucho más altos, incluyendo sombreado más avanzado, efectos de iluminación y texturas intrincadas a través de sombreadores de cómputo. Esto les permitió crear entornos densos y exuberantes y mantener una tasa de frames alta y constante, incluso en un navegador.

El rendimiento mejorado de WebGPU, impulsado por la capacidad de utilizar aún más la tarjeta gráfica de los dispositivos, fue esencial para ofrecer la rica y envolvente experiencia que imaginaron, asegurando que los jugadores pudieran disfrutar del juego con el nivel de detalle y suavidad típicamente reservados para los juegos de escritorio y consola.

Gestionar el rendimiento y WebGPU

Mientras WebGPU ofrecía las capacidades avanzadas que el equipo de Stratton Studios necesitaba, también presentaba un conjunto único de desafíos que debían abordar para mantener su visión artística. Uno de los principales desafíos fue optimizar el rendimiento en una amplia gama de dispositivos. Dado que WebGPU todavía es relativamente nuevo, garantizar un rendimiento y compatibilidad consistentes requirió un ajuste significativo, y incorporaron algunas medidas de seguridad.

Otro desafío fue gestionar la complejidad de los shaders y las técnicas de renderizado que utilizaron. “Mientras que WebGPU permite técnicas de renderizado más sofisticadas como el skinning en GPU y los shaders de cómputo, también hay más potencial para cuellos de botella en el rendimiento si no se manejan con cuidado”, dice Loveridge. "Tuvimos que optimizar meticulosamente nuestros shaders y simplificarlos para asegurarnos de que pudiéramos ofrecer visuales de alta calidad sin causar caídas en la tasa de fotogramas u otros problemas de rendimiento como picos de recolección de basura (GC)."

Dado que WebGPU es relativamente nuevo, a veces llevó a un comportamiento inesperado para el equipo, como pantallas negras aleatorias o píxeles NaN que causan un aumento de brillo, particularmente en configuraciones de hardware menos comunes. Para superar esto, invirtieron tiempo adicional en pruebas rigurosas en dispositivos y navegadores, asegurando que el juego funcionara de manera consistente y se viera como se pretendía, independientemente de la plataforma.

"Para abordar estos desafíos, implementamos un sistema de monitoreo de rendimiento robusto que nos permitió detectar y abordar problemas en tiempo real durante el desarrollo", dice Loveridge. "WebGPU nos permitió alcanzar nuestra visión artística, pero requirió una gestión cuidadosa y un compromiso para superar los obstáculos que conlleva trabajar en la vanguardia de la tecnología web."

Encontrando la luz

"Una buena iluminación marca la diferencia y es difícil de lograr en un juego web", dice Stella, y el equipo de PIGIAMA KASAMA 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", explica el cofundador Matteo 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. "Para lograr esto," dice Stella, "es clave hacer el diseño del juego y el diseño del entorno como un proceso integral en lugar de separarlos. Cada elemento necesita servir al otro.

Utilizaron Shader Graph para desarrollar el sombreado 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 sombreado revierte este efecto, creando la ilusión de que la luz se está activando y limpiando la sustancia negra de la zona iluminada”, dice Fanchin.

Debido a sus recursos limitados, también tomaron algunas decisiones artísticas para mejorar el rendimiento. Eligieron trabajar con áreas oscuras para ocultar elementos, lo que 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.

Gestionando la producción de audio

In Kasama: El Despertar, el audio influyó en todo, desde el ritmo de la jugabilidad hasta el diseño de los entornos y las interacciones. También 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.

El equipo llevó a cabo un riguroso proceso técnico de tres etapas para la producción de audio antes de implementarlo.

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

La primera etapa requirió 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 garantizar 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. Esta conversión se realizó con 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 Unity

La etapa final implicó la integración de los archivos de audio procesados en Unity. Esto incluyó la selección meticulosa de métodos de carga apropiados (por ejemplo, transmisión para pistas más largas o precarga para efectos de sonido críticos) para optimizar el rendimiento durante el juego. Los ajustes de compresión Vorbis se ajustaron para lograr el equilibrio óptimo 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 manejarse en mono o estéreo, según su papel en el diseño de sonido y los efectos de espacialización deseados 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.

4. Optimizar. Optimizar. Optimizar.

Para evitar la pérdida de jugadores, quieres asegurarte de que puedan entrar en tu juego lo más rápido posible y tener una gran experiencia durante todo el tiempo. Las expectativas son altas y el tiempo es esencial, por lo que es clave optimizar, probar y optimizar un poco más para asegurar que los usuarios se mantengan comprometidos.

Reducir el tamaño del archivo

Para reducir el tamaño del archivo, el equipo de Coatsink utilizó AssetBundles, un archivo de archivo que contiene activos no relacionados con el código específicos de la plataforma. Los alojaron en un servidor externo y luego los descargaron cuando se ejecutó la compilación para ayudar a los usuarios a entrar en el vestíbulo del juego lo más rápido posible.

También utilizaron el Addressable Asset System para cargar activos bajo demanda. Esto les ayudó a dividir los paquetes en los grupos requeridos para las diferentes partes del juego y contribuyó en gran medida a la reducción del 25% en el tiempo de carga.

"De esta manera, tenemos la cantidad mínima de activos para que los lobbies ayuden a los jugadores a entrar temprano, la cantidad mínima para cada nivel y algunos paquetes comunes con activos comunes para diferentes niveles", explica el desarrollador Andrei M. "El objetivo es tener la menor cantidad de archivos para descargar posible, ya que HTTP/2 no está en todas partes, y queremos tener la menor cantidad de activos no requeridos dentro posible."

El equipo creó un flujo de trabajo que les ayudó a detectar si un usuario estaba en móvil o en escritorio cuando iniciaron el juego. En una plantilla web, durante una carga, podrían determinar si el dispositivo era móvil y, si era así, cambiarían los datos y los directorios de activos para utilizar activos optimizados para la plataforma.

Creamos nuestro propio sistema de construcción doble, que produjo dos versiones que no eran completamente diferentes. Hace referencia a diferentes atlas y cambia tanto el tipo de compresión como el tamaño. "Son dos visiones diferentes de los activos basadas en la misma base de código", dice Andrei M.

Los estudios Stratton pudieron hacer reducciones significativas tanto en el tamaño de los archivos como en los tiempos de carga a lo largo del proceso de desarrollo. Inicialmente, el tamaño del juego era de aproximadamente 400 MB, lo cual era demasiado grande para una experiencia basada en la web.

"A través de una serie de optimizaciones, incluyendo la compresión de activos, la división de código y el aprovechamiento del Sistema de Activos Direccionables de Unity, logramos reducir con éxito el tamaño del paquete inicial a 29 MB", explica Loveridge.

Esta drástica reducción no solo acortó significativamente los tiempos de carga, sino que también hizo Project Prismatic mucho más accesible a un público más amplio, asegurando cargas iniciales más rápidas y una experiencia de jugador más fluida en general.

El equipo de ULTRAHORSE redujo el tamaño del paquete de descarga inicial de 200 MB a 133 MB en el lanzamiento. Luego lo dividieron entre 21 MB para paquetes obligatorios y 112 MB para paquetes bajo demanda. "El tiempo de carga de la CPU es más de tres veces más rápido que al principio", dice Ropotovs. "El perfilado, la optimización y la desactivación de paquetes innecesarios fueron una gran parte de ello."

Optimizando los tiempos de carga

Los estudios Stratton se centraron en reducir el tamaño de la carga útil, mejorar la entrega de activos y aumentar la eficiencia general para optimizar los tiempos de carga. El equipo utilizó la compresión de activos integrada de Unity para minimizar el tamaño de las texturas, el audio y otros activos, junto con el atlas de texturas en general.

Implementaron la carga diferida para activos no esenciales, lo que permitió que el juego cargara primero los componentes críticos y luego cargara progresivamente contenido adicional en segundo plano según fuera necesario a través del marco de Addressables.

Utilizaron el Sistema de Activos Direccionables para gestionar y cargar activos de manera eficiente bajo demanda. Esto les permitió cargar dinámicamente activos a medida que los jugadores avanzaban en el juego, asegurando que solo se cargara la información necesaria en cualquier momento.

El marco de Cloud Content Delivery (CCD) de Unity ayudó al equipo a entregar activos desde servidores geográficamente más cercanos. Esto redujo la latencia y aceleró los tiempos de descarga para los jugadores en todas partes, ya que los activos se cargan en segundo plano.

Se aseguraron de que los activos se almacenaran localmente en el dispositivo del jugador después de la primera carga, lo que permitía tiempos de carga subsiguientes mucho más rápidos. El equipo también dividió el código en partes más pequeñas y manejables para cargar solo el código esencial para la jugabilidad inicial de forma anticipada y hacer que las características y módulos adicionales se carguen de forma asíncrona.

Herramientas de prueba y depuración

Para abordar las limitaciones de rendimiento que encontraron al usar WebGPU, el equipo de Stratton Studios utilizó el Frame Debugger para identificar los elementos que más recursos consumen, como texturas de alta resolución, sombreadores complejos y distancias de dibujo extensas. A partir de ahí, implementaron una serie de optimizaciones destinadas a reducir la carga sin sacrificar significativamente la calidad visual.

“Utilizamos atlas de texturas para minimizar el número de cargas de texturas, reducir el conteo de polígonos en áreas menos críticas y emplear pinturas mate para topologías lejanas para ahorrar en costos de renderizado”, dice Loveridge. "También aplicamos técnicas de nivel de detalle (LOD) para gestionar la representación de objetos lejanos de manera más eficiente."

El principal desafío fue encontrar un equilibrio entre el rendimiento y la calidad visual. “Al centrarnos en optimizar los aspectos más exigentes del juego y hacer un uso inteligente de las herramientas disponibles en Unity, pudimos ofrecer una experiencia visualmente rica que funcionó bien en una amplia gama de dispositivos”, dice Loveridge. "Este enfoque nos permitió alcanzar nuestros objetivos artísticos mientras asegurábamos que el juego siguiera siendo accesible y agradable para todos los jugadores, independientemente de su hardware."

Para depurar Project Prismatic, el equipo también se basó en el Unity Profiler para rastrear sus métricas de rendimiento, incluyendo el uso de CPU y GPU, la asignación de memoria y las tasas de fotogramas. Les ayudó a identificar cuellos de botella en el rendimiento y a optimizar el rendimiento del juego, particularmente en áreas que consumen muchos recursos.

Por último, Unity Cloud Diagnostics les ayudó a recopilar informes de fallos y excepciones de los usuarios en el campo. Les proporcionó valiosas ideas sobre problemas que pueden no haberse detectado durante el desarrollo.

5. Adopta múltiples plataformas web

Un consejo que escuchamos de los expertos de estudio una y otra vez es "encontrar a los jugadores donde están." Desarrollar para la web te da la oportunidad de ofrecer a los jugadores una experiencia de juego fácil, rápida y accesible. Con más opciones de hardware, velocidades de conexión más rápidas y dispositivos potentes en manos de más jugadores que nunca, es importante considerar todas tus opciones para implementar en varias plataformas web.

Ajuste fino en todas las plataformas

Al asociarse con Spatial en un lanzamiento web multiplataforma, el equipo de PIGIAMA KASAMA adoptó el Universal Render Pipeline (URP), la opción de pipeline de la plataforma. 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. Desde la perspectiva de la plataforma Spatial, a medida que comenzamos a soportar futuras versiones de Unity, esperamos que URP también sea compatible allí", explica Jake Steinerman, jefe de relaciones con desarrolladores de Spatial.

Los servidores de Spatial crearon versiones individuales para cada plataforma. 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", dice Fanchin. Por otro lado, el audio en Android e iOS es mucho más eficiente. 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", dice Stella. En general, el lanzamiento multiplataforma fue bastante fluido.

Renderizando con facilidad

Los estudios Stratton también aprovecharon URP para lograr un equilibrio entre rendimiento y extensibilidad. Una característica clave era la capacidad de URP para crear fácilmente pases de pipeline de renderizado personalizados. Esta flexibilidad permitió al equipo ajustar el proceso de renderizado para satisfacer sus necesidades específicas, optimizar ciertos efectos visuales e implementar sombreadores personalizados que mejoraron la apariencia y la sensación general del juego sin comprometer el rendimiento.

"Aprecié particularmente la modularidad de URP, que nos permitió habilitar o deshabilitar ciertas características según las capacidades de la plataforma objetivo." Esto facilitó la optimización del juego para diferentes dispositivos mientras se mantenía una experiencia visual coherente," dice Loveridge.

Beneficiándose de un lanzamiento multiplataforma

Hay numerosos beneficios al lanzar un juego en múltiples plataformas, aunque esto puede añadir diferencias en el flujo de trabajo a considerar durante la planificación.

Al tener SquadBlast disponible en la web y otras plataformas, podemos llegar a una audiencia mucho más amplia. Los jugadores pueden unirse fácilmente a un juego sin necesidad de descargar o instalar nada, lo que reduce significativamente la barrera de entrada", dice Ropotovs.

La distribución también es un factor importante para el equipo de ULTRAHORSE, y tener una versión web abre un mundo completamente nuevo de canales a los que el equipo no habría tenido acceso de otra manera.

Inicialmente lanzaron SquadBlast en su propio portal web en SquadBlast.com. Esto les dio un gran campo de pruebas para iterar rápidamente, obtener comentarios inmediatos de los jugadores y hacer mejoras rápidas. A partir de ahí, se expandieron a portales de juegos en línea más grandes como CrazyGames, lo que ha sido un cambio radical para el equipo.

Estos sitios tienen un alcance masivo: estamos hablando de decenas de millones de usuarios activos mensuales. Al poner SquadBlast en estos portales, hemos podido llevar nuestro juego ante una enorme audiencia que quizás nunca habríamos alcanzado a través de otros canales de distribución", explica Ropotovs.

El equipo también está viendo oportunidades con otras plataformas que integran juegos web, como aplicaciones de mensajería y plataformas de redes sociales. Como dice Ropotovs, "el alcance potencial aquí es asombroso, y las optimizaciones mucho mejoradas para la tecnología web móvil con Unity 6 desbloquearán toda una nueva generación de plataformas para incorporar juegos."

Conclusión

En este libro electrónico, cubrimos cinco fundamentos para construir juegos web exitosos. Preguntamos a nuestros expertos por su mejor consejo al desarrollar para la web.

Si estás considerando desarrollar un juego web, portar tu juego de otra plataforma a la web, o simplemente estás buscando nueva información, esperamos que las ideas de los expertos hayan sido valiosas e inspiradoras.

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. Descarga Unity 6 en el Unity Hub.