Optimización del ciclo del juego: la batalla por el ritmo de fotogramas en el navegador

Para el observador casual, un juego es solo una serie de imágenes en movimiento. Pero para un desarrollador, un juego es un reloj implacable que marcha a gran velocidad. Para los emuladores retro y los juegos de arcade en HTML5, ese reloj no perdona. Si la sincronización se desvía aunque sea unos pocos milisegundos, el audio se distorsionará, el desplazamiento se “atascará” y la jugabilidad se sentirá poco receptiva.

En Recomendación 88, el mayor reto técnico no es solo ejecutar el juego, sino dominar Sincronización de fotogramas. JavaScript se creó originalmente para desplazar texto y hacer clic en botones, no para manejar la precisión de menos de un milisegundo que requería una placa de arcade de los años noventa. A continuación te explicamos cómo logramos dominar el motor del navegador para ofrecer una experiencia de juego fluida y constante a 60 FPS.

El fantasma de V-Sync: Por qué 60 Hz no siempre son 60 Hz

La mayoría de las consolas retro se diseñaron para televisores NTSC, que funcionan exactamente a 59,94 Hz. Sin embargo, las pantallas de computadora modernas suelen funcionar a un nivel fijo 60 Hz, 120 Hz, o 144 Hz.

Cuando ejecutas un juego a 59,94 Hz en un monitor de 60 Hz, te enfrentas a una pesadilla matemática. Cada pocos segundos, el monitor “se salta” un fotograma porque los tiempos no coinciden perfectamente. Esto da como resultado Micro-tartamudeo—ese molesto “salto” que se ve cuando un personaje se desplaza por la pantalla.

Nuestra solución: requestAnimationFrame y el reloj de audio web

En una aplicación web estándar, los desarrolladores utilizan setTimeout o setInterval para ejecutar código. Son demasiado “flexibles” para los videojuegos; el navegador puede retrasarlas cuando se sienta saturado.

En cambio, Rec0m88 utiliza un sistema de doble reloj:

1. Sincronización visual: Utilizamos requestAnimationFrame (rAF). Esto le indica al navegador: “Solo ejecuta el siguiente fotograma del juego cuando el monitor esté listo para mostrarlo”. Esto elimina el “desgarro de pantalla” y garantiza que el video se vea tan fluido como la seda.
2. Sincronización de audio: Dado que la frecuencia de actualización del monitor puede variar, utilizamos el Tiempo de contexto de la API de audio web como nuestro “Metrónomo” principal. El reloj de Web Audio es el temporizador más preciso del navegador. Al sincronizar nuestro bucle de juego de WebAssembly (WASM) con el búfer de audio, nos aseguramos de que el sonido nunca se desincronice de la acción.

El crujido en el audio: cómo resolver el “desbordamiento negativo del búfer”

¿Alguna vez has jugado a un juego en línea en el que el sonido se entrecorta o cruje al abrir una nueva pestaña? Eso es un Desbordamiento negativo del búfer. Esto ocurre porque el hilo principal del navegador estaba demasiado ocupado como para “suministrar” a la tarjeta de audio los siguientes milisegundos de sonido.

Para solucionar esto en Rec0m88, trasladamos el procesamiento de audio a un Web Worker.

• Lógica desacoplada: La lógica del juego se ejecuta en un hilo, y la mezcla de audio, en otro.
• Buffers circulares: Mantenemos un pequeño búfer de “anticipación” con muestras de audio. Si la CPU tiene un pico de actividad durante un milisegundo, el reproductor de audio recurre a este búfer, lo que le da tiempo al sistema para recuperarse sin que el usuario escuche ningún “chasquido”.”

Cómo manejar la fluctuación en un mundo JIT

JavaScript es un JIT (Justo a tiempo) lenguaje compilado. Esto significa que el navegador está “optimizando” constantemente el código mientras juegas. A veces, estas optimizaciones provocan un “bloqueo” momentáneo (que a menudo se conoce como “Jank”).

Para lograr una sincronización perfecta de los fotogramas, minimizamos la “recuperación de memoria” (GC). La GC es cuando el navegador detiene todas las operaciones para liberar la memoria no utilizada. Evitamos esto de la siguiente manera:

• Agrupación de objetos: Reutilizamos los mismos bloques de memoria para los sprites del juego y los paquetes P2P, en lugar de crear otros nuevos.
• Matrices tipadas: Utilizamos Uint8Array y Float32Array para manejar los datos del juego. Estos se almacenan en un área fija de la memoria que el navegador no tiene que “limpiar” con tanta frecuencia, lo que mantiene predecible el ciclo del juego.

La latencia entre la entrada y el fotón

“El ”Frame Pacing» no se trata solo de lo que ves, sino de lo que sientes. El tiempo que transcurre desde que presionas una tecla hasta que un píxel cambia de color se denomina Latencia entre la entrada y el fotón.

Al utilizar el API HID web y el API del control de videojuegos, evitamos la fila estándar de “eventos de teclado” del navegador. Esto nos permite consultar tu controlador al inicio de cada fotograma, justo antes de que se ejecute el núcleo WASM. De esta manera, nos aseguramos de que tu entrada se procese en el justo a continuación marco, lo que brinda esa sensación de “rapidez” que exigen los fanáticos de los juegos de arcade.

Por qué a los sitios de alto valor les importa el momento oportuno

El filtro de “contenido de bajo valor” de Google no solo analiza el texto; también analiza el experiencia del usuario. Un sitio que ofrece un emulador con retrasos y interrupciones es una herramienta de “baja calidad”. Al documentar nuestras dificultades con el control de fotogramas y al ofrecer un motor de alta precisión, demostramos que Rec0m88 es una plataforma de nivel profesional.

Hemos dedicado cientos de horas a ajustar la interacción entre la API de audio web, WebAssembly y la GPU para asegurarnos de que, cuando reproduzcas un clásico en nuestra plataforma, no solo funcione, sino que se sienta bien.

El Meta Desafío: Intenta abrir el “Monitor de rendimiento” de tu navegador mientras juegas a uno de nuestros juegos. Verás una línea plana y constante de 60 FPS, lo que demuestra la eficacia de nuestra arquitectura de control de fotogramas.