Cómo optimizar un juego web para móviles
Un juego web que va perfecto en el ordenador de desarrollo puede ser injugable en el teléfono de gama media que tiene la mayoría de la gente. Estas son las causas reales, por orden de impacto, y qué hacer con cada una.
Primero: el peso de lo que se descarga
Antes de que el rendimiento importe, el juego tiene que llegar. Cada segundo de descarga cuesta jugadores, y en una conexión móvil real los megabytes se notan.
Imágenes
Formatos modernos como AVIF y WebP reducen el tamaño a una fracción del PNG equivalente sin diferencia visible. Publicar varias anchuras y dejar que el navegador elija evita mandar una imagen de 1600 píxeles a una pantalla de 400.
Sonido
Los efectos cortos comprimidos y la música cargada solo cuando empieza la partida, nunca durante la carga inicial.
Código
Un motor de juego general puede pesar más que todo tu juego. Para un arcade 2D, escribir el bucle a mano suele salir más ligero y más predecible.
Segundo: el presupuesto de fotograma
A 60 imágenes por segundo tienes 16,6 milisegundos para calcular y dibujar todo. En un móvil de gama media, ese margen se agota antes de lo que parece.
Lo que más lo consume
- Crear objetos dentro del bucle: obliga al recolector de basura a intervenir y produce tirones periódicos.
- Leer propiedades del diseño de la página en cada fotograma, que fuerza recálculos.
- Dibujar la escena completa cuando solo se ha movido una parte.
Qué hacer
Reservar los objetos una vez y reutilizarlos, guardar en variables lo que no cambia y limitar el repintado a la zona afectada cuando el juego lo permita.
Tercero: la pantalla y el dedo
El rendimiento no sirve de nada si el juego no se puede controlar.
- Las zonas táctiles necesitan al menos el tamaño de una yema, no el de un cursor.
- El pulgar tapa la parte inferior de la pantalla: nada importante debe aparecer ahí.
- El área segura de los móviles con muesca o barra inferior hay que respetarla explícitamente.
Y una regla que se olvida siempre: el juego debe pausarse solo cuando la pestaña pasa a segundo plano. Si no, alguien vuelve de una llamada y encuentra la partida perdida.
Cómo medirlo de verdad
El emulador de móvil del navegador de escritorio sirve para comprobar la maquetación, no el rendimiento: usa el procesador de tu ordenador.
Lo que sí funciona:
- Conectar un teléfono real y usar la depuración remota del navegador.
- Limitar artificialmente el procesador a una cuarta parte para simular un dispositivo modesto.
- Grabar treinta segundos de partida y mirar los fotogramas largos, no la media.
La media engaña: un juego con media de 58 fotogramas y un parón de 300 milisegundos cada diez segundos se percibe como roto.
La batería también cuenta
Un juego que calienta el teléfono se cierra aunque funcione bien. Dibujar solo cuando algo cambia, detener el bucle en las pantallas estáticas y no mantener temporizadores activos de fondo son medidas baratas que alargan mucho la sesión media.
Si prefieres encargarlo
Las mismas métricas gobiernan cualquier página, no solo un juego. Así se aplican a la web de una empresa:
Desarrollo web para empresas: Desarrollo web para empresas centrado en velocidad real, accesibilidad y contenido indexable sin depender de JavaScript. Medición con Core Web Vitals.
Continuar leyendo
Si estás empezando el juego y no optimizando uno existente, conviene leer antes el recorrido completo:
Cómo se desarrolla un juego retro para navegador: Qué se conserva y qué se reconstruye al llevar un arcade clásico a la web: bucle de juego, sprites, colisiones y controles táctiles que funcionan de verdad.