RPG-Dialogue-Editor

RPG-Dialog und RPG-Editor

Wir basteln uns ein Spiel.

Ein Klassiker unter den PC-Spielen ist der Typ des RPG – des Role Playing Game – in der wir für den Hauptcharakter Entscheidungen fällen. Ob Monkey Island, Mass Effect oder Stray, fast alle modernen und viele ältere Spiele haben Rollenspiel-Anteile.

Für ein browserbasiertes Spiel ist eine naheliegende Variante die Form des Dialogs, der sich gut mit HTML- und Javascript-Bordmitteln umsetzten lässt.

Idee

Definiere die Dialog-Strukturen in einem gut lesbaren und leicht editierebaren Format. Die Konfigurationsdateien sollen man in einem einfach Text-Editor bearbeiten können. Ich entscheide mit für JSON.

Im weiteren werden zwei Programme benötigt:

• eines, welches die vorhandenen JSON-Dateien einliest und daraus den Dialog im Web-Browser erzeugt
• ein weiters, welches das Bearbeiten der Dialog-Dateien vereinfacht, denn eigentlich wollen wir JSONs nicht von Hand bearbeiten

Programmiert sind sie in Typescript, was sich leicht zu Javascript übersetzen lässt, aber anders als Javascript relativ typsicher ist.

Das grundlegende Format sieht so aus. Ich habe es mit anderen RPG-Formaten verglichen, und alle machen es sehr ähnlich. Aber es scheint sich bisher kein wirklicher Standard etabliert zu haben, komisch eigentlich.

{
  "meta": {
    "name": "welcome",
    "npcs": [{ "name": "Yannick" }]
  },
  "graph": {
    "intro": {
      "q": "Light, stranger! I haven't seen your face here before. New to Anning Anchorage?",
      "o": [
        { "a": "Hello. That's because I just arrived.", "next": "dia0" },
        { "a": "Light! My ... ehm, ship ... has a battery problem", "next": "dia9" },
        { "a": "I have no idea why you should bother.", "next": "dia1" }
      ],
    },
    "FINAL": { "q": "---EOC---", "o": [] },
    "dia1": {
      "q": "Why so grumpy? You whale lice always have a lack of surface simulation, huh?",
      "o": [
        { "a": "Why would you care?", "next": "dia2" },
        { "a": "Yeah, it's been some rough weeks.", "next": "dia3" },
        {
          "a": "Oh, how creative, Whale lice – because I came with a freighter. Seems I met the station's joker.",
          "next": "dia2"
        }
      ],
    },

 ...    

  }
}

Das im Paket enthaltene Script kann den konfigurieren Dialog in einem frei konfigurierbaren HTML-Fragment darstellen. So sieht's ohne weitere Stylings aus:

Mit dem im Paket enthaltenen Editor können vorhandene JSON-Dokumente bearbeitet werden oder neue Dialoge definiert werden. Der Graph zeigt die einzelnen Dialogpunkte und Antwort-Optionen an, sowie folgende Punkte im im Dialogablauf. Die Konfugration von NPCs – Non-Playable-Characters – kann hier ebenfalls erfolgen.

Cool, nä?

So sieht das ganze dann mit ein wenig CSS-Stylings und Bildern für die NPCs aus.

Im Spiel, mit mehr Grafik und etwas mehr Chi-Chi, kann es dann so aussehen.

Projekt auf Github: github.com/IkarosKappler/rpg-dialogue-js

Projekt auf NPM: npmjs.com/package/rpg-dialogue-js

Live-Demo des Ediror: plotboilerplate.io/rpg-dialogue/dist/tests/editor.html

Live-Demo des Dialogs: plotboilerplate.io/rpg-dialogue/dist/tests/test-dialogue-multi.html

Viel Spaß!