Webcam-Spiele: Wie ich ein Dinosaurier-Laufspiel gebaut habe
Ich wollte ein Laufspiel machen, in dem ein Tastendruck nicht als Laufen zählt. Wenn der Spieler stehen bleibt, muss auch die Figur stehen bleiben. Findet er noch einmal einen Gang höher, soll die Flucht leichter werden. Und wenn er nur mit den Armen vor der Kamera wedelt, soll das Spiel den Unterschied merken.
Aus dieser Idee wurde Dino Survival, ein Browserspiel, in dem du auf der Stelle läufst, um einem T-Rex zu entkommen. In einem Satz klingt das einfach. Es zu bauen bedeutete, eine viel schwierigere Frage zu lösen: Wie macht eine Webcam aus einem sich bewegenden Körper einen Controller, der sich fair anfühlt?
Warum Webcam-Spiele einen anderen Controller brauchen
Die meisten Endless-Runner-Spiele reduzieren Bewegung auf einen Knopf, eine Wischgeste oder ein automatisches Vorwärtstempo. Das ist praktisch, weil die Eingabe eindeutig ist. Eine Taste ist entweder gedrückt oder nicht.
Ein Körper ist unordentlicher. Menschen haben unterschiedliche Größen, Räume, Kamerawinkel und Laufstile. Knie können unter dem Bildrand verschwinden. Kleidung kann ein Gelenk verdecken. Eine Kamera bei schwachem Licht kann einen Körperpunkt wackeln lassen, obwohl die Person ruhig steht.
Ich konnte also nicht einfach eine Pose direkt auf ein Tempo abbilden. Ich brauchte eine Pipeline, die Bewegung über die Zeit beobachtet, Rauschen aussortiert und trotzdem schnell genug reagiert, damit es sich verbunden anfühlt:
- Den Browser um Kamerazugriff bitten.
- In jedem Videobild die Körperpunkte schätzen.
- Die abwechselnde Beinbewegung und die Bewegung des ganzen Körpers messen.
- Die jüngsten Schritte pro Minute in ein stabiles Spieltempo umrechnen.
- Mit diesem Tempo den Läufer bewegen und den Abstand zum Dinosaurier verändern.
Den Kamerazugriff regelt der Browser über MediaDevices.getUserMedia(). Dino Survival fordert nur Video an und nimmt die Frontkamera, wenn es eine gibt. Die Livebilder verarbeitet dann das Posenmodell im Browser.
Körperpunkte sind noch kein Laufen
Dino Survival nutzt MediaPipe Pose Landmarker im Videomodus. Das Modell kann 33 Körperpunkte liefern, aber mehr Daten ergeben nicht automatisch einen besseren Controller.
Für die Schrittfrequenz konzentriere ich mich auf eine kleinere Gruppe: Schultern, Hüften, Knie und Knöchel. Schultern und Hüften ergeben eine grobe Achse des Oberkörpers. Knie und Knöchel zeigen, wie sich die Beine im Verhältnis zu dieser Achse bewegen.
Diese relative Messung ist wichtig. Würde ich nur messen, wie hoch ein Knie auf dem Bildschirm erscheint, könnten ein schief stehendes Handy oder ein Spieler abseits der Mitte das Ergebnis verfälschen. Wenn ich die Beinbewegung entlang der eigenen Körperachse des Spielers betrachte, hängt der Detektor weniger davon ab, wie die Kamera aufgestellt ist.
Das Spiel prüft auch, dass beide Hüften und beide Knie sichtbar sind. Sind sie es nicht, bittet es den Spieler, einen Schritt zurückzugehen, statt sich leise aus unvollständigen Daten ein Tempo auszudenken. Bei einem Bewegungssteuerungsspiel ist ehrliche Rückmeldung besser, als so zu tun, als sei die Eingabe verlässlich.
Aus abwechselnden Beinen eine Schrittfrequenz machen
Laufen auf der Stelle erzeugt ein sich wiederholendes Muster. Ein Knie hebt sich, erreicht einen Höhepunkt und sinkt. Dann macht das andere Bein dasselbe. Der Detektor beobachtet die Bewegung von Knie und Knöchel und sucht nach diesen abwechselnden Höhepunkten.
Für jedes Bein nutze ich anpassbare Schwellenwerte, weil eine feste Zahl nicht zu jedem Körper und jeder Kamera passt. Ein größerer Spieler erzeugt auf dem Bildschirm vielleicht eine viel größere Bewegung als ein kleinerer, der weiter hinten steht. Der Detektor lernt sich einen passenden lokalen Bereich, und eine harte Obergrenze verhindert, dass diese Anpassung zu großzügig wird.
Nach einem gültigen Höhepunkt hat dasselbe Bein eine kurze Sperrzeit von 130 Millisekunden. Das verhindert, dass das Zittern der Körperpunkte am oberen Ende eines Kniehubs zu zwei oder drei eingebildeten Schritten wird. Gültige Schritte kommen in ein gleitendes Drei-Sekunden-Fenster, das lang genug ist, um die Zahl zu glätten, und kurz genug, um eine echte Änderung der Anstrengung zu bemerken.
Kommt etwa 1,1 Sekunden lang kein Schritt, fällt die Schrittfrequenz zurück auf Leerlauf. Dieses entschiedene Zurücksetzen gefällt mir besser als ein langes, langsames Abklingen. Hört der Spieler auf, soll das Spiel auch aufhören.
Wie ich Armewedeln am Sprinten gehindert habe
Frühe Bewegungssysteme belohnen oft jede Aktivität im Bild. Das öffnet eine naheliegende Abkürzung: Füße stillhalten und die Hände bewegen. Und es lässt Kamerawackeln wie Sport aussehen.
Dino Survival fügt ein zweites Tor hinzu, das auf den Hüften beruht. Es sucht in einem kurzen Zeitfenster nach echtem senkrechtem Wippen des Körpers. Die Schrittfrequenz zählt nur, wenn das abwechselnde Beinmuster und dieses größere Bewegungssignal zusammenpassen.
Dabei wird niemandes Lauftechnik benotet. Es wird nur ein Beleg dafür verlangt, dass der Unterkörper die Arbeit macht. Armbewegung allein öffnet das Tor nicht, und winziges Rauschen bei der Posenschätzung schiebt den Läufer nicht voran.
Das war für mich eine der größten Lehren beim Bauen von Webcam-Spielen: Gute Eingabe heißt nicht, möglichst viel Bewegung zu erkennen. Es heißt, die richtige Bewegung zu erkennen und klar zu sagen, wenn die Kamera sie nicht sehen kann.
Von Schritten pro Minute zur Dinosaurierjagd
Der Detektor liefert Schritte pro Minute, aber das Spiel braucht keine Labormessung. Es braucht ein klares, spielbares Signal. Ich ordne das Ergebnis drei verständlichen Anstrengungsstufen zu: Joggen bei etwa 70 Schritten pro Minute, Laufen bei 120 und Sprinten bei 160.
Diese Stufen werden zu einem normierten Tempo. Die Survival-Engine nutzt dieses Tempo, um den Spieler in Richtung eines Fluchtziels von 50 Einheiten voranzubringen. Gleichzeitig hat der Dinosaurier seine eigene Geschwindigkeit, die im Lauf der Jagd zunimmt.
Der Abstand verändert sich nach dem Unterschied zwischen diesen beiden Geschwindigkeiten. Bist du schneller als der Dinosaurier, schaffst du Platz. Lässt du nach, holt er auf. Erreichst du den Jeep, bist du entkommen. Fällt der Abstand auf null, ist die Jagd vorbei.
Das unterscheidet das Spiel von einem normalen Dinosaurier-Laufspiel. Der Dinosaurier ist nicht bloß ein Timer mit Zähnen. Er ist eine sichtbare Erklärung für deine aktuelle Anstrengung.
Die Welt bewegt sich nur, wenn du dich bewegst
Der Pfad besteht aus einer Folge von Dschungelbildern. Ich ordne diese Bilder der zurückgelegten Strecke zu und nicht der Uhrzeit. Hört der Spieler auf zu laufen, friert die Umgebung ein. Läuft er wieder los, setzt sich der Pfad unter dem Läufer in Bewegung.
Größe und Position des Dinosauriers hängen am Abstand. Je näher er kommt, desto mehr Platz nimmt er in der Szene ein. Staub, Tempolinien und die Tempoanzeige bringen dieselbe Botschaft. Mehrere kleine Hinweise beantworten alle eine Frage: Komme ich davon?
Die Zeichenschleife läuft mit requestAnimationFrame(), womit der Browser Animationsarbeit vor dem nächsten Neuzeichnen ausführt. Ich berechne mit dem Zeitstempel des Callbacks die vergangene Zeit, damit die Bewegung auf Zeit beruht und nicht davon ausgeht, dass jedes Gerät gleich viele Bilder pro Sekunde zeichnet.
Außerdem benutze ich einen vorgerenderten Läufer, statt die echte Person in jedem Bild aus dem Hintergrund herauszulösen und in die Szene zu setzen. Das verringert den Aufwand für die Bildverarbeitung auf Handys und gibt dem Spiel eine einheitliche Figur. Die Webcam ist der Controller, nicht die fertige Grafik.
Warum die Kalibrierung zum Spieldesign gehört
Die Kameraeinrichtung ist keine technische Seite, die ich vor dem Spieler verstecken könnte. Sie ist das erste Level.
Dino Survival zeigt eine Positionshilfe und wartet, bis die nötigen Körperpunkte sichtbar sind. Es sagt dir, wann du zurücktreten sollst, und gibt dir einen kurzen Countdown vor der Jagd. In diesem Moment steht die Abmachung: Halte den Unterkörper im Bild, lauf auf der Stelle, und das Spiel folgt dir.
Es gibt auch einen Tastatur-Demomodus. Damit kann jemand das Spiel ohne Kameraerlaubnis ausprobieren, es auf einem nicht unterstützten Gerät testen oder einfach erst die Regeln verstehen. Das volle Erlebnis ist trotzdem die Kameraversion, denn die körperliche Verbindung zwischen Anstrengung und Flucht ist der Kern.
Was ich beim Bauen von Dino Survival gelernt habe
Das Schwierigste war nicht, einen T-Rex zu zeichnen. Es war zu entscheiden, was als Schritt zählen soll.
Ein verlässlicher Körper-Controller braucht mehrere bescheidene Prüfungen, die zusammenarbeiten. Körperpunkte zeigen, wo der Körper ist. Abwechselnde Höhepunkte von Knie und Knöchel deuten auf eine Schrittfrequenz hin. Die Hüftbewegung bestätigt, dass der Spieler wirklich läuft. Ein gleitendes Fenster glättet das Ergebnis. Ein schneller Leerlauf-Reset hält das Aufhören ehrlich. Die Spiel-Engine macht aus diesem Signal dann einen Abstand, den der Spieler versteht, ohne eine Anleitung zu lesen.
Das ist für mich der Reiz von Bewegungssteuerung im Browser. Die Technik verschwindet, wenn die Rückmeldung stimmt. Du denkst nicht an Körperpunkte, Schwellenwerte oder Zeitstempel. Du siehst einen Dinosaurier, hörst ihn näher kommen und rennst.
Die Design- und Forschungsseite findest du hier: Warum ich Dino Survival für die richtige Art Bewegungsspiel halte.
Du kannst Dino Survival kostenlos im Browser spielen. Es gibt keinen Download. Wie dieselbe Webcam-Pipeline Bewegungen des Oberkörpers verarbeitet, liest du in Monster Punch als Online-Boxspiel. Mehr Spiele, die sofort starten, findest du in meinem Ratgeber zu kostenlosen Spielen ohne Download.