Was ist Kollisionserkennung?
Kollisionserkennung (englisch Collision Detection) prüft in jedem Bild, ob sich zwei Figuren eines Spiels berühren. Ohne sie fiele jeder Stern durch die Spielfigur hindurch, und kein Treffer würde je gezählt.
Das Spiel rechnet dabei nicht mit der Form der Bilder, sondern mit einfachen Hüllen aus Rechtecken oder Kreisen. Das ist schnell und fast immer genau genug.
Am Ende dieser Lektion
Notiz
Ich kann mit einem Rechtecktest und einem Kreistest erkennen, ob zwei Figuren kollidieren.
Schlüsselwörter
| Begriff | Was er bedeutet |
|---|---|
| Kollision | zwei Figuren berühren oder überdecken sich |
| Hitbox | das unsichtbare Rechteck, mit dem das Spiel eine Figur prüft |
| Überlappung | der Bereich, den zwei Hitboxen gemeinsam haben |
| Achse | eine Richtung auf der Leinwand: x läuft nach rechts, y nach unten |
| Radius | der Abstand vom Mittelpunkt eines Kreises zu seinem Rand |
| Abstand | wie weit zwei Mittelpunkte voneinander entfernt sind |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Eine Hitbox ist ein unsichtbares Rechteck
Auf der Leinwand hat jede Figur vier Zahlen: die Ecke oben links (x, y), die Breite und die Höhe. Das ist ihre Hitbox. Die Achse y läuft dabei nach unten, nicht nach oben.
Zwei Hitboxen überlappen sich, wenn beide Prüfungen stimmen. Auf der x-Achse muss jedes Rechteck vor dem Ende des anderen beginnen. Auf der y-Achse gilt dasselbe.
Ein Beispiel: vier Paare von Rechtecken
| Paar (x, y, Breite, Höhe) | Prüfung x | Prüfung y | Treffer |
|---|---|---|---|
| (0, 0, 10, 10) und (5, 5, 10, 10) | beginnt vor dem Ende: ja | ja | ja |
| (0, 0, 10, 10) und (20, 0, 10, 10) | zweites beginnt bei 20, erstes endet bei 10: nein | ja | nein |
| (0, 0, 10, 10) und (10, 0, 10, 10) | erstes endet bei 10, zweites beginnt bei 10: nein | ja | nein |
| (0, 0, 10, 10) und (9, 9, 10, 10) | ja, um 1 Pixel | ja, um 1 Pixel | ja |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Ein Rechtecktest im Browser
<canvas id="bild" width="300" height="80"></canvas>
Beim Kreistest zählt der Abstand der Mittelpunkte
Der Kreistest ist ein eigenes Beispiel dieser Lektion. Das Spiel des Labs nutzt nur Rechtecke. Zwei Kreise kollidieren, wenn der Abstand ihrer Mittelpunkte kleiner ist als die Summe der Radien.
Die Wurzel können Sie sich sparen. Vergleichen Sie stattdessen die Quadrate: dx mal dx plus dy mal dy gegen die Summe der Radien mal sich selbst.
Beispiel: drei Kreispaare mit Radius 5
| Mittelpunkte | dx, dy | Abstand zum Quadrat | Radien zum Quadrat | Treffer |
|---|---|---|---|---|
| (0, 0) und (3, 4) | 3, 4 | 25 | 100 | ja |
| (0, 0) und (6, 8) | 6, 8 | 100 | 100 | nein, nur am Rand |
| (0, 0) und (20, 0) | 20, 0 | 400 | 100 | nein |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Ein häufiger Fehler
Warnung
Viele mischen die Bezugspunkte. Bei einem Rechteck ist (x, y) die Ecke oben links, bei einem Kreis der Mittelpunkt. Wer die beiden Tests vertauscht, erhält Treffer, die um eine halbe Breite verschoben sind.
Das Lab rechnet den Rechtecktest nach
In game.js steht die Funktion overlaps mit genau diesem Test. Das Skript collide.py führt ihn in Python für sechs feste Paare von Rechtecken aus.
Es gibt englische Wörter aus: den Namen des Paares, einen Doppelpunkt und True oder False. Raten Sie vor dem Run, welche drei Paare sich treffen.
Sechs Paare von Rechtecken prüfen
docker exec jupyter python3 steps/collide.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Drei Paare treffen sich, drei nicht
Es gibt sechs Zeilen. overlapping, one inside the other und one corner inside ergeben True. apart, edges touching und same column, far apart ergeben False.
Das Paar edges touching ist die Besonderheit: Berühren sich zwei Kanten nur, zählt das nicht als Treffer. Das liegt am Zeichen kleiner statt kleiner gleich.