compilador - dart web example

¿Cómo conduzco un bucle de animación a 60 fps con Dart y la web?

Question

¿Cómo conduzco un bucle de animación o juego a 60 fps en una aplicación web Dart?

Answer 1

Use window.animationFrame , el primo basado en el futuro del window.requestAnimationFrame tradicional.

Dart ha estado cambiando para usar Future y Stream como formas más orientadas a objetos para manejar operaciones asíncronas. El requestAnimationFrame basado en callback (old ''n busted) es reemplazado por el animationFrame basado en Future (nuevo hotness).

Aquí hay una muestra:

import ''dart:html'';

gameLoop(num delta) {
  // do stuff
  window.animationFrame.then(gameLoop);
}

void main() {
  window.animationFrame.then(gameLoop);
}

La firma de animationFrame ve así:

Future<num> animationFrame();

Observe cómo animationFrame devuelve un Futuro que se completa con un num , que contiene un "temporizador de alto rendimiento" similar a window.performance.now() . El num es un delta monótonamente creciente entre ahora y cuando comenzó la página. Tiene resolución de microsegundos.

El futuro se completa justo antes de que el navegador se ocupe del dibujo de la página. Actualiza el estado de tu mundo y dibuja todo cuando este futuro se complete.

Debe solicitar un nuevo Future desde animationFrame en cada fotograma, si desea que la animación o el ciclo continúen. En este ejemplo, gameLoop() registra para ser notificado en el siguiente cuadro de animación.

Por cierto, hay un paquete de pub llamado game_loop , que puede ser útil.