Zustandsänderungen von der Zeichnung trennen
Verwenden Sie requestAnimationFrame für die nächste visuelle Aktualisierung und übergeben Sie den Zeitstempel an einen kleinen Schleifenkoordinator. Aktualisieren Sie Positionen, Timer und Regeln anhand der verstrichenen Zeit und zeichnen Sie danach den aktuellen Zustand. Der Renderer sollte nicht entscheiden, ob eine Kollision stattgefunden hat; eine Kollisionsprüfung darf auch nicht davon abhängen, ob ein Sprite tatsächlich gezeichnet wurde.
Bewegen Sie für einen einfachen Plattformtest eine Markierung mit einer festgelegten Anzahl von Welteinheiten pro Sekunde horizontal. Führen Sie dieselbe Strecke auf einem 60-Hz-Display und einem Display mit hoher Bildwiederholrate aus. Legt die Markierung auf einem Display in derselben realen Zeit eine größere Strecke zurück, wird die Bewegung noch teilweise pro Callback statt pro Zeiteinheit berechnet.
Wählen Sie eine Wiederherstellungsrichtlinie für späte Frames
Eine lange Pause kann zu einem sehr großen Zeitintervall führen. Begrenzen Sie das verstrichene Intervall bei einem lockeren Echtzeitspiel, damit eine zurückkehrende Person nicht sieht, wie die Spielfigur mehrere Hindernisse überspringt. Verwenden Sie bei deterministischen Simulationen einen festen Aktualisierungsschritt mit Akkumulator, führen Sie nur eine begrenzte Zahl an Aufholschritten aus und zeichnen Sie bei Bedarf zwischen Simulationszuständen, um zu interpolieren.
Protokollieren Sie die längste Callback-Lücke während eines wiederholbaren Hindernisparcours und prüfen Sie das Spiel, nachdem Sie zu einer anderen Anwendung gewechselt und zurückgekehrt sind. Legen Sie ausdrücklich fest, ob das Spiel pausieren, teilweise aufholen oder beim letzten Zustand fortsetzen soll, statt diese Entscheidung einem einzelnen verspäteten Frame zu überlassen.
Fragen zu Browsergame-Schleife
Soll ich setInterval zum Zeichnen verwenden?
Verwenden Sie requestAnimationFrame für visuelle Arbeiten, da es in der Nähe von Repaint geplant ist und häufig für ausgeblendete Dokumente angehalten wird. Ein Timer kann weiterhin nichtvisuelle Aufgaben planen, sollte aber nicht als Anzeigeuhr behandelt werden.
Woher kommt der Frame-Zeitstempel?
Der Callback von requestAnimationFrame liefert einen hochauflösenden Zeitstempel. MDN beschreibt dessen Zeitverhalten und den einmaligen Aufruf. Berechnen Sie den Fortschritt anhand dieses Zeitstempels, statt die Callbacks zu zählen.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden