Come faccio a guidare un ciclo di animazione a 60fps con Dart e il web?

Question

Come si guida un ciclo di animazione o un loop di gioco a 60 fps in un'applicazione Web Dart?

Answer 1

Utilizzare window.animationFrame, il cugino basato sul futuro del tradizionale window.requestAnimationFrame.

Dart si è spostato per utilizzare Future e Stream come modi più orientati agli oggetti per gestire operazioni asincrone. Il callback basato su callback (vecchio 'n sballato) requestAnimationFrame viene sostituito dal futuro (nuova hotness) animationFrame.

Ecco un esempio:

import 'dart:html'; 

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

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

La firma del animationFrame assomiglia:

Future<num> animationFrame(); 

Si noti come animationFrame restituisce un futuro che completa con un num, che detiene una "ad alte prestazioni timer "simile a window.performance.now(). Lo num è un delta crescente in modo monotono tra ora e quando la pagina è iniziata. Ha una risoluzione di microsecondi.

The Future termina proprio prima che il browser riguardi il disegno della pagina. Aggiorna lo stato del tuo mondo e disegna tutto quando questo Futuro è completato.

È necessario richiedere un nuovo futuro da animationFrame su ogni frame, se si desidera che l'animazione o il ciclo continui. In questo esempio, i registri gameLoop() vengono notificati sul fotogramma dell'animazione successivo.

BTW c'è un pacchetto di pub denominato game_loop, che potrebbe risultare utile.