Dialogbox und Spiel verbinden

VNLE speichert den Ablauf deiner Geschichte. Der Player folgt diesem Ablauf. Deine Dialogbox zeigt das Ergebnis: Name, Bild, Text und mögliche Antworten. Dein Spiel übernimmt Inventar, Bewegung und andere Spielsysteme.

So arbeitet die Dialogbox

1. Der Spieler spricht Mira an. Dein Spiel sperrt die Bewegung, öffnet die Dialogbox und startet den passenden Startpunkt.
2. Bei einem Dialog liest die Oberfläche text, speaker und portrait aus der Player-Ansicht. Weiter ruft next() auf.
3. Bei einer Entscheidung erstellt sie für jede angebotene Antwort eine Schaltfläche. Der Klick ruft choose(option.id) auf.
4. Bedingungen, Variablenänderungen, Sprünge, Aufrufe und Rückkehr führt der Player aus, bis wieder ein sichtbarer Inhalt erreicht ist.
5. Eine Spielaktion wartet auf dein Spiel. give_item fügt im Beispiel einen Gegenstand hinzu und meldet den passenden Ausgang zurück. Erst dann läuft das Gespräch weiter.
6. Bei finished blendet dein Spiel die Dialogbox aus und gibt die Bewegung frei. Der Ende-Knoten beendet nur das Gespräch, nicht das Spiel.

Das JavaScript-Beispiel verwenden

vnle-player.mjs enthält den VNLE-Player. demo.mjs verbindet ihn mit der mitgelieferten Dialogbox. Öffne beide Dateien, um jede Aktion nachzuvollziehen.

import {StoryPlayer} from './vnle-player.mjs';
const story = await (await fetch('./story.json')).json();
const map = await (await fetch('./guide-map.json')).json();
const inventory = [];
const player = await StoryPlayer.create(story, {
  locale: 'en',
  assetBase: new URL('./', location.href).href,
  onChange(view) {
    // Update your dialogue box here. See demo.mjs for the complete UI.
    console.log(view.kind, view.speaker, view.text, view.portrait);
  },
  async onCommand(command) {
    if (command.key === 'give_item') {
      const itemId = command.arguments[map.input].value;
      if (!inventory.includes(itemId)) inventory.push(itemId);
      return {outcomeId: map.accepted};
    }
    throw new Error('Unknown game action: ' + command.key);
  }
});
await player.start(map.start);

Dialogbox im Browser ausprobieren · JavaScript-Quellcode ansehen

Sprache und Spielstand

player.language('de'); // Redraw the current line in German.
const saved = {player: player.snapshot(), inventory};
// Save the complete object with your game state.
await player.restore(saved.player);

Speichere Inventar und Dialogzustand gemeinsam. Lade beim Wiederherstellen auch das Inventar zurück. Ein Dialog-Spielstand enthält den Ausführungsstand und seine Variablen; er ersetzt nicht den restlichen Spielstand. Der Player prüft, ob der Ausführungsstand zum Story-Build gehört.

Fertige Beispielprojekte

Godot · Phaser