Wie fahre ich eine Animationsschleife mit 60fps mit Dart und dem Web?

Question

Wie fahre ich eine Animationsschleife oder Spielschleife mit 60fps in einer Dart-Webanwendung?

Answer 1

Verwenden Sie window.animationFrame, die Zukunft basierte Cousin der traditionellen window.requestAnimationFrame.

Dart wurde verschoben, um Future und Stream als eher objektorientierte Methoden für asynchrone Operationen zu verwenden. Der Callback-basierte (alte 'n Busted) requestAnimationFrame wird durch den Future-basierten (neue Hotness) animationFrame ersetzt. Hier

ist ein Beispiel:

import 'dart:html'; 

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

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

Die Signatur von animationFrame wie folgt aussieht:

Future<num> animationFrame(); 

Beachten Sie, wie animationFrame gibt eine Zukunft, die mit einem num abgeschlossen ist, die eine „hohe Leistung hält Timer "ähnlich wie window.performance.now(). Die num ist ein monoton wachsendes Delta zwischen jetzt und wann die Seite gestartet wurde. Es hat Mikrosekundenauflösung.

Die Zukunft wird abgeschlossen, bevor der Browser über das Zeichnen der Seite steht. Aktualisieren Sie den Zustand Ihrer Welt und zeichnen Sie alles, wenn diese Zukunft abgeschlossen ist.

Sie müssen einen neuen Future from animationFrame für jeden Frame anfordern, wenn die Animation oder der Loop fortgesetzt werden soll. In diesem Beispiel werden gameLoop() Register für den nächsten Animationsrahmen gemeldet.

BTW gibt es ein Pub-Paket namens game_loop, die Sie nützlich finden könnten.