Der Game Loop von SkyWall: Einfach erklärt für Webentwickler

Wenn man ein 2D-Browsergame wie SkyWall entwickelt, dann bildet ein einziger technischer Kern das schlagende Herz des Spiels: der Game Loop. Ohne ihn bewegt sich nichts, reagiert nichts und wird nichts neu gezeichnet. In diesem Artikel erfährst du, wie der Game Loop funktioniert, warum er in JavaScript so wichtig ist und wie SkyWall damit flüssige Bewegung und stabile Performance erreicht.

Was ist ein Game Loop?

Ein Game Loop ist eine Endlosschleife, die in jedem Frame drei Dinge erledigt:

• Eingaben verarbeiten
  Zum Beispiel Tastatur oder Touch.
• Spielzustand aktualisieren
  Bewegung, Kollisionen, Monsterbewegungen, Timer.
• Alles neu zeichnen (Rendern)
  Der Canvas – also die Zeichenfläche, auf der Grafiken, Animationen und Spielelemente framebasiert gerendert werden – wird aktualisiert, Animationen laufen weiter.

Das geschieht bis zu 60-mal pro Sekunde.

Warum braucht SkyWall einen eigenen Game Loop?

SkyWall arbeitet mit Tile-Maps, beweglichen Elementen, Kollisionserkennung und KI-Logik. All diese Komponenten müssen kontinuierlich aktualisiert werden. Der Game Loop übernimmt:

• das Nachziehen der Spielfigur
• Bewegungsmuster der Monster
• Aktualisierung der Portale und Effekte
• Frame-genaues Timing für Animationen
• Performance-Steuerung auf schwächeren Geräten

Ohne den Loop wäre SkyWall statisch. Mit Game Loop bleibt alles synchron – unabhängig von der CPU oder Bildwiederholrate des Geräts.

Wichtig: die Delta-Time

Wenn der Browser mal kurz hängt oder ein Gerät langsamer ist, soll sich der Spieler trotzdem mit derselben Geschwindigkeit bewegen. Dafür verwendet SkyWall Delta-Time, also die Zeitdifferenz zwischen zwei Frames. Beispiel:

• schneller PC → 60 FPS → kleine Delta-Time
• langsamer Laptop → 30 FPS → große Delta-Time

Bewegungen werden dann relativ zur Delta-Time berechnet. Die Spielfigur, der Robot, läuft überall gleich schnell.

Rendering mit requestAnimationFrame()

Der Game Loop von SkyWall läuft über requestAnimationFrame(loop). Das hat zwei Vorteile:

• Der Browser optimiert die FPS selbst.
• Animationen laufen synchron mit dem Monitor.

Ein festes setInterval() wäre ungenau und erzeugt Ruckler – requestAnimationFrame dagegen ist standardisiert für alles, was schnell, sauber und animiert sein soll.

Optimiert für Performance

Damit SkyWall auch auf älteren Geräten gut läuft, nutzt es mehrere Performance-Techniken:

• Zeichnen nur bei Änderungen – nicht bei jedem Frame das komplette Canvas
• Vorberechnete Kollisionstabellen: Dabei werden mögliche Kollisionen bereits vorab in einer strukturierten Tabelle gespeichert, statt sie bei jedem Frame neu zu berechnen.
• Minimale Objektanzahl pro Frame: Es werden nur die Objekte berechnet und gezeichnet, die tatsächlich sichtbar sind.
• Sortierung statischer und dynamischer Elemente: Statische Elemente wie Wände müssen nicht ständig neu gezeichnet werden und können in einer eigenen Ebene liegen. Dynamische Objekte wie Spieler oder Monster werden separat gerendert, sodass das Spiel schneller reagiert und unnötige Zeichenoperationen vermieden werden.

Solche kleinen Optimierungen summieren sich und sorgen für ein flüssiges Spielgefühl.