Was ist eine Game Loop?
Eine Game Loop (Spielschleife) ist der Code, der in einem Spiel immer wieder läuft. Er rechnet aus, was sich geändert hat, und zeichnet dann ein neues Bild. Wer sie versteht, versteht, warum sich in jedem Spiel etwas bewegt, auch wenn niemand eine Taste drückt.
Denken Sie an ein Daumenkino. Jede Seite ist ein Bild, und schnelles Blättern erzeugt Bewegung. Ein Spiel blättert etwa sechzigmal pro Sekunde.
Am Ende dieser Lektion
Notiz
Ich kann erklären, was eine Game Loop in jedem Bild tut: erst Update, dann Draw.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Bild (Frame) | ein einzelnes Bild des Spiels, das viele Male pro Sekunde gezeichnet wird | |
| Game Loop | der Code, der für jedes Bild einmal läuft: erst Update, dann Draw | |
| Update | der Schritt, der rechnet: Positionen, Punkte und Leben ändern sich | |
| Draw | der Schritt, der zeichnet: Er malt das Ergebnis des Updates, rechnet aber nichts | |
| Konstante | eine benannte Zahl am Anfang des Codes, die Sie an einer Stelle ändern | PLAYER_SPEED = 6 |
| Bildrate | wie viele Bilder pro Sekunde gezeichnet werden | 60 Bilder pro Sekunde |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Jedes Bild hat zwei Schritte
Im Update rechnet das Spiel: Es bewegt Figuren, prüft Treffer und zählt Punkte. Im Draw zeichnet es das Ergebnis auf die Leinwand.
Die Reihenfolge zählt. Würde das Spiel zuerst zeichnen, sähen Spielende immer den Stand von vor einem Bild. Danach beginnt das nächste Bild, und alles läuft von vorn.
Eine eigene Game Loop im Browser
<canvas id="bild" width="300" height="60"></canvas>
Der Browser ruft die Schleife immer wieder auf
Die Funktion requestAnimationFrame bittet den Browser um einen Aufruf vor dem nächsten Bild. Am Ende der Schleife ruft sich die Funktion so selbst wieder auf. Das ist der ganze Trick.
Der Browser wählt den Takt passend zum Bildschirm. Bei 60 Bildern pro Sekunde bleiben jedem Bild gut 16 Millisekunden für Update und Draw.
Wie viel Zeit hat ein Bild?
| Bilder pro Sekunde | Rechnung | Zeit pro Bild |
|---|---|---|
| 30 | 1000 ms geteilt durch 30 | etwa 33 ms |
| 60 | 1000 ms geteilt durch 60 | etwa 17 ms |
| 120 | 1000 ms geteilt durch 120 | etwa 8 ms |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Die Position nach n Bildern
Bewegt sich eine Figur in jedem Bild um denselben Schritt, ist ihre Position leicht zu berechnen: Startwert plus Schritt mal Anzahl der Bilder. Im Spiel kommt eine Grenze dazu, damit die Figur nicht aus der Leinwand läuft.
Die Tabelle zeigt ein Beispiel mit Start 10 und Schritt 6. Dieselbe Rechnung machen Sie gleich in der Aufgabe.
Ein Beispiel: Start 10, Schritt 6
| Nach Bild | Rechnung | Position x |
|---|---|---|
| 1 | 10 + 6 | 16 |
| 2 | 16 + 6 | 22 |
| 3 | 22 + 6 | 28 |
| 4 | 28 + 6 | 34 |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Das Lab liest die Game Loop
Das Lab enthält das kleine Spiel "Catch the stars" in drei Dateien. Sie spielen es im Browser über den Link Preview. Das Skript loop.py liest nur den Code der Datei game.js.
Es gibt englische Wörter aus: die Konstanten, ob requestAnimationFrame vorkommt, und die Namen der Funktionen. Danach zeigt sizes.py, wie groß die drei Dateien sind.
Die Konstanten und Funktionen auflisten
docker exec jupyter python3 steps/loop.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Was die Ausgabe über das Spiel verrät
Das Skript nennt neun Konstanten, darunter GRAVITY = 0.15, PLAYER_SPEED = 6 und SPAWN_EVERY = 50. Dann folgt uses requestAnimationFrame: True.
Zuletzt kommt die Liste der Funktionen mit update, draw und loop. Die Schleife ruft also erst update, dann draw und dann wieder sich selbst.
Ein häufiger Fehler
Warnung
Viele rechnen im Draw: Sie ändern dort die Position und wundern sich über wirre Ergebnisse. Draw malt nur. Alles, was sich ändert, gehört ins Update.
Die Größe der drei Dateien messen
docker exec jupyter python3 steps/sizes.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.