Spielerando

Phaser-Spiel mit KI: So vermeidest du alten Phaser-Code

Um ein Phaser-Spiel mit KI zu bauen, legst du das Projekt mit Phasers eigenem Starter an und weist deine KI dann auf die Skill-Dateien hin, die zu Phaser gehören. Das ist wichtig, weil eine KI oft ein älteres Phaser im Kopf hat und alter Code in der aktuellen Version scheitern kann.

Was ist Phaser, und warum passt es zu KI?

Phasers GitHub-Seite beschrieb es am 2. November 2026 als kostenloses, schnelles 2D-Framework für HTML5-Spiele im Browser auf Desktop und Handy. Es steht unter MIT-Lizenz, die angezeigte Version war 4.2.1. Ein Framework ist ein Satz fertiger Teile für eine Aufgabe, hier fürs Zeichnen, für Ton, Eingaben und Szenen.

Zu KI passt es aus drei Gründen: Spiele laufen im Browser, ein Coding-Werkzeug kann sie also leicht starten. Ein Phaser-Projekt besteht aus einfachen Dateien, ohne großen Editor drumherum. Und das Projekt selbst nennt Claude Code, Cursor, Codex, Antigravity und GitHub Copilot als Werkzeuge, die Phaser-Spiele aus normalen Beschreibungen bauen können.

Das Problem, das du kennen solltest

Phaser 4 ist ein großer Schritt gegenüber Phaser 3, und vieles, was eine KI über die Jahre gelesen hat, stammt aus Phaser 3. Du bekommst also womöglich Code für die falsche Version. Dann siehst du eine leere Seite oder einen Fehler über eine fehlende Funktion, während die KI versichert, alles sei in Ordnung.

Phaser hat dafür eine Antwort: Das Repository enthält Skills für KI-Agenten, also Dateien, die seine Hauptteile beschreiben, in einem Ordner namens skills/. Einer davon behandelt den Umstieg von Version 3 auf 4. Liest dein Werkzeug solche Dateien, muss es sich nicht mehr auf sein Gedächtnis verlassen.

So fängst du an

  1. Leg das Projekt an. Bitte deine KI, die Zeile unten auszuführen, oder mach es selbst. Du brauchst Node.js, und der Starter bietet offizielle Vorlagen zur Auswahl.
npm create @phaserjs/game@latest
  1. Hol die Skills dazu. Bitte deine KI, den Ordner skills/ von Phasers GitHub-Seite in dein Projekt zu kopieren.
  2. Sag ihr, dass sie sie nutzen soll, mit dem Text unten.

Spielerando kann das ergänzen. Während Phasers Skills das Framework erklären, zeigen dessen Baupläne, fertiger Code und Wiki, wie sich eine Mechanik verhalten sollte, und das erreicht deine KI über eine MCP-Verbindung. Die Anmeldung ist kostenlos, mit Google oder E-Mail, und niemand schaut sich dabei dein Spiel oder deinen Code an (so verbindest du es).

Beispiel: Kite Festival

Kite Festival ist ein erfundenes Seitwärtsspiel: Du steuerst einen Drachen zu einem fernen Turm, während Böen ihn zurückdrücken. In Phaser teilt sich ein Spiel in Szenen, und das ergibt einen guten ersten Plan: Titel, Flug, Punkte.

Gerade bei Szenen geht KI-Code gern kaputt, und beim ersten Mal siehst du es nicht. Du gewinnst, gehst zurück, drückst auf Start, und nun weht der Wind doppelt so stark oder der Drachen hängt fest, weil der erste Lauf etwas hinterlassen hat. Phasers Szenen lassen sich sauber als Diagramm darstellen, lass deine KI sie also zuerst zeichnen. Sie nutzt dafür Mermaid, ein Textformat, das du auf mermaid.live ansehen kannst. Achte besonders auf den Pfeil zurück zum Anfang.

Soll sich der Drachen gut anfühlen? Gutes Schweben besteht aus denselben Teilen wie variable Sprunghöhe.

Das sagst du deiner KI

Das ist ein Phaser-Projekt. Lies zuerst package.json und nenn mir die genaue Phaser-Version. Lies dann die Skill-Dateien im Ordner skills, die zu dieser Aufgabe passen, und sag mir, welche du gelesen hast. Findest du sie nicht, sag das und greif nicht heimlich auf dein Gedächtnis zurück.

Aufgabe: Kite Festival, ein Seitwärtsspiel mit drei Szenen: Titel, Flug und Punkte. Der Drachen steigt, solange ich die Maustaste halte, und sinkt, wenn ich loslasse. Böen drücken ihn zurück. Wer den fernen Turm erreicht, gewinnt die Runde.

Schreib vor jedem Code ein Mermaid-Diagramm der Szenen und aller Wege dazwischen, auch das erneute Spielen von der Punkte-Szene aus. Prüfe, ob ein zweiter Lauf genauso sauber beginnt wie der erste und nichts zurückbleibt. Bau dann nach dem Diagramm.

Nenn zu jeder genutzten Phaser-Funktion die Skill-Datei, die sie beschreibt. Gibt es keine, schreib „aus dem Gedächtnis“ dazu.

Oder spar dir das und schließ den MCP an: Dann findet deine KI das alles von selbst.MCP anschließen

So prüfst du es

  • Öffne package.json. Die Version muss zu dem passen, was die KI gesagt hat.
  • Spiel zweimal hintereinander. Gewinne, geh zum Titel zurück und spiel noch einmal. Der zweite Lauf sollte sich genau wie der erste anfühlen.
  • Zähl die Stellen mit „aus dem Gedächtnis“. Dort schaust du zuerst nach, wenn etwas kaputtgeht.
  • Halte die Taste und lass los, an beiden Enden des Bildschirms. Der Drachen sollte sichtbar bleiben oder so scheitern, wie es das Diagramm sagt.

Quellen

Stand: 2026-11-02