VNLEWIKIGeschichten entwickeln. Welten verbinden.English
VNLE Handbuch

Phaser

Das Beispiel verwendet Phaser 3.90 und den VNLE-JavaScript-Player. Es zeigt dieselbe Geschichte in einer Phaser-Szene, einschließlich Porträt, Entscheidungen, Inventar und Spielstand.

Phaser-Beispiel spielen · Web-Beispiele herunterladen

Lokal starten

  1. Entpacke die ZIP-Datei. Öffne den entpackten Ordner in Visual Studio Code.
  2. Installiere dort die Erweiterung Live Server von Ritwick Dey. Klicke mit rechts auf examples/phaser/index.html und wähle Open with Live Server.
  3. Dein Browser öffnet das Spiel. Wähle Talk to Mira, Continue und die Kaufantwort. Dateien werden über den lokalen Webserver geladen; die HTML-Datei nicht einfach doppelklicken.

Die Dateien verstehen

examples/phaser/index.html  Page and Phaser library
examples/phaser/game.mjs    Scene, buttons, inventory, portrait
examples/phaser/phaser.min.js Phaser 3.90
examples/harbour/vnle-player.mjs VNLE player
examples/harbour/story.json Story data
examples/harbour/guide-map.json Example IDs
examples/harbour/assets/    Images

Mit deinem Phaser-Spiel verbinden

game.mjs lädt story.json und guide-map.json in preload. create richtet den Player ein. draw aktualisiert die Oberfläche. Der Continue-Button ruft player.next() auf; Antwortknöpfe rufen player.choose(id) auf. Übernimm zunächst diese Szene. Ersetze anschließend die Inventarliste im onCommand-Block durch dein Inventarsystem.

Nutze einen festen conversation state in deinem Spiel: Beim Start Bewegung sperren, bei finished die Dialogelemente ausblenden und Bewegung wieder freigeben. Passe anschließend Farben und Positionen in draw und create an deine Spieloberfläche an.

Alle Player-Aufrufe und Spielaktionen