Adventure Builder Pro

Was ist Adventure Builder Pro?

Adventure Builder Pro ist ein Werkzeug für alle, die Text-Adventure-Spiele erstellen möchten – ohne Programmieren zu müssen. Du gestaltest alles im Browser: Orte, Gegenstände, Charaktere, Rätsel und Geschichte. Das Ergebnis ist eine JSON-Datei, die du mit dem Player spielen kannst.

Der Arbeitsablauf

Die Editor-Tabs auf einen Blick

Neue Editor-Features

Minimalstruktur eines Spiels (JSON)

Jedes Spiel besteht im Kern aus diesen Bausteinen:

{
  "title": "Mein Abenteuer",
  "author": "Dein Name",
  "startLocation": "ort_id",    // Startort des Spielers
  "defaultTheme": "modern",     // Visuelles Thema
  "locations": {},             // Alle Orte
  "items": {},                 // Alle Gegenstände
  "npcs": {},                  // Alle Charaktere
  "recipes": [],               // Kombinierrezepte
  "flags": {},                 // Spielzustände
  "sounds": {},                // 🔊 Sound-Bibliothek (optional)
  "gameEnds": { "win": [], "lose": [] },
  "cutscenes": {},             // Story-Sequenzen
  "displaySettings": {}       // Layout-Einstellungen
}

Ort-Eigenschaften

{
  "ort_id": {
    "name": "Dunkler Keller",
    "description": "Es riecht modrig hier unten.",
    "image": "https://...",         // Bild oder Video (WebM/MP4)
    "imageLoop": true,            // Video wiederholen?
    "sound": "data:audio/...",     // Hintergrundmusik
    "soundLoop": true,
    "silence": false,            // Alle Sounds stummschalten
    "theme": "dark",              // Ort-spezifisches Theme
    "exitTransition": "fade",    // Übergangseffekt beim Verlassen
    "exits": {},
    "objects": [],
    "npcs": [],
    "conditionalNpcs": [],
    "playCutscene": "keller_intro", // Cutscene beim Betreten
    "playCutsceneOnce": true
  }
}

Ausgänge (Exits)

A) Einfache Ausgänge

Richtwörter als Keys oder beliebige Texte – was du schreibst, erscheint als Button.

"exits": {
  "N": "wald_nord",           // Standard: N S O W H R
  "Durch die Tür": "raum_2", // Eigener Text möglich
  "Ins Wasser": "see"
}

B) Ausgang mit Flag-Bedingung

Der Ausgang ist nur nutzbar wenn eine bestimmte Flag gesetzt ist.

"exits": {
  "N": {
    "to": "geheimraum",
    "requireFlag": "tuer_offen",
    "deniedMessage": "Die Tür ist noch verschlossen."
  }
}

C) Ausgang mit Item-Bedingung

Der Spieler muss ein bestimmtes Item im Inventar haben.

"exits": {
  "O": {
    "to": "schatzkammer",
    "requireItem": "goldener_schluessel",
    "deniedMessage": "Du brauchst den goldenen Schlüssel!"
  }
}

D) Ausgang mit kombinierten Bedingungen

"exits": {
  "Portal": {
    "to": "andere_dimension",
    "requireFlag": "portal_aktiviert",
    "requireItem": "magischer_kristall",
    "deniedMessage": "Das Portal reagiert nicht..."
  }
}

// Objekt im Ort: Eisentür
{
  "itemName": "Eisentür",
  "canTake": false,
  "usableWith": [{
    "itemId": "rost_schluessel",
    "success": "Die Tür quietscht auf!",
    "setFlag": "tuer_offen",
    "removeItem": true
  }]
}

// Ausgang des Ortes
"N": {
  "to": "naechster_raum",
  "requireFlag": "tuer_offen",
  "deniedMessage": "Die Tür ist verschlossen!"
}

Objekte im Ort

Objekte sind Dinge, die der Spieler sieht und mit denen er interagieren kann – anfassen, untersuchen, ein Item darauf anwenden.

A) Einfaches nehmbares Objekt

{
  "itemId": "rost_schluessel",  // Referenz auf ein definiertes Item
  "canTake": true
}

B) Objekt mit Item-Anwendung (usableWith)

Was passiert, wenn ein Spieler ein bestimmtes Item aus dem Inventar auf dieses Objekt anwendet?

{
  "itemId": "truhe",
  "canTake": false,
  "failMessage": "Das bringt hier nichts.",
  "usableWith": [{
    "itemId": "schluessel",
    "actionLabel": "🔓 Aufschließen",
    "success": "Die Truhe öffnet sich!",
    "changeObject": "offene_truhe",  // Objekt wird ersetzt
    "spawnObject": "gold",         // Neues Objekt erscheint
    "spawnCanTake": true,
    "removeItem": true,            // Schlüssel wird verbraucht
    "setFlag": "truhe_geoeffnet",
    "playCutscene": "truhe_oeffnen"
  }]
}

C) Direkte Aktion (ohne Item) Direct Action

Ein Button der immer sichtbar ist – zum Untersuchen, Zählen, Aktivieren.

"usableWith": [{
  "itemName": "",                    // Leer = kein Item nötig
  "actionLabel": "🔍 Untersuchen",
  "success": "Du findest einen versteckten Hinweis!",
  "spawnObject": "hinweis",
  "spawnCanTake": true
}]

D) Mehrfach-Verwendung (Quantity)

Der Button ist nur eine begrenzte Anzahl von Malen nutzbar.

"usableWith": [{
  "itemName": "",
  "actionLabel": "🍪 Keks nehmen",
  "success": "Lecker! Du nimmst einen Keks.",
  "quantity": 5,
  "quantityMessage": "Die Dose ist leer!",
  "spawnObject": "keks",
  "spawnCanTake": true
}]

E) Bedingte NPCs im Ort

Manche Charaktere erscheinen nur unter bestimmten Bedingungen.

"conditionalNpcs": [
  { "npcId": "geist_id",  "requireFlag": "mitternacht" },
  { "npcId": "drache_id", "forbidFlag": "drache_besiegt" }
]

Direct Action: Item sofort ins Inventar

Mit givesItemId in einem usableWith-Eintrag (ohne Item = Direct Action) landet ein Item sofort im Inventar des Spielers – kein zweiter Klick nötig. Perfekt für „Kiste durchsuchen", „Schublade öffnen" oder „Brief aufheben".

{
  "itemId": "werkzeugkiste",
  "canTake": false,
  "usableWith": [
    {
      "actionLabel": "🔧 Durchsuchen",
      "givesItemId": "schraubendreher",
      "message": "Du findest einen Schraubendreher!",
      "removeObject": true,
      "setFlag": "kiste_durchsucht"
    }
  ]
}

Das actionLabel erscheint als Button direkt am Objekt (kein Item im Inventar nötig). Nach dem Klick geht der Schraubendreher sofort ins Inventar, die Kiste verschwindet und der Flag kiste_durchsucht wird gesetzt.

Objekt-Aktion als Modal-Fenster (modal: true)

Standardmäßig erscheint die Erfolgsmeldung einer Objekt-Aktion als kurze Toast-Meldung. Mit modal: true wird sie stattdessen als bleibendes Modal-Fenster angezeigt – ideal für längere Texte wie Rezepte, Briefe oder Hinweisschilder.

"usableWith": [
  {
    "actionLabel": "📜 Brief lesen",
    "message": "Liebe Anna, ...\n\nDein Papa",
    "modal": true,
    "title": "📜 Ein Brief"
  }
]

Items definieren

Alle Items werden zentral im Tab 📦 Objekte angelegt. Jedes Item bekommt eine eindeutige ID – so kann es überall im Spiel referenziert werden, ohne dass das Spiel kaputt geht wenn du den Namen änderst.

"items": {
  "goldener_schluessel": {
    "id": "goldener_schluessel",
    "name": "🔑 Goldener Schlüssel",
    "description": "Ein prächtiger Schlüssel aus purem Gold.",
    "image": "data:image/png;base64,...",  // auch WebM/MP4 möglich
    "sfx": "snd_1234_abc"  // 🔊 Sound-ID aus der Bibliothek – spielt beim Aufnehmen
  }
}

Selbst-Verwendung (selfUse)

Was passiert, wenn der Spieler ein Item direkt im Inventar benutzt?

"heiltrank": {
  "name": "💊 Heiltrank",
  "selfUse": {
    "message": "Du trinkst den Heiltrank. +20 HP!",
    "healHP": 20,
    "removeAfterUse": true
  }
}

Inventar-Freischaltung

Normalerweise ist das Inventar von Anfang an sichtbar. Mit dieser Mechanik bleibt es versteckt, bis der Spieler ein bestimmtes Objekt aufnimmt – eine Tasche, einen Rucksack, eine magische Truhe.

Basis-Definition

"haendler": {
  "name": "Alter Händler",
  "dialog": "Willkommen! Was darf es sein?",  // Statischer Text
  "portrait": "data:image/png;base64,...",          // Bild oder Video
  "portraitSize": "medium",                         // small/medium/large/full
  "playCutscene": "haendler_intro",                  // Cutscene VOR Dialog
  "playCutsceneOnce": true,
  "playCutsceneAfter": "haendler_abschied",             // Cutscene NACH Dialog
  "givesItems": [],
  "receivesItems": [],
  "dialogTree": {}   // Verzweigter Dialog → Kapitel 5
}

NPC gibt Items (givesItems)

Der Spieler erhält beim Gespräch ein oder mehrere Items – kostenlos, ohne Gegenleistung.

"givesItems": [{
  "name": "Heiltrank",
  "description": "Stellt Lebenspunkte wieder her",
  "playCutscene": "trank_geschenk",
  "playCutsceneOnce": true
}]

NPC nimmt Items (receivesItems – Tausch)

A) Einfacher Tausch

"receivesItems": [{
  "itemId": "altes_schwert",
  "message": "Ein feines Stück! Hier, nimm das dafür.",
  "givesItemId": "neues_schwert",
  "setFlag": "upgrade_erhalten"
}]

B) Tausch mit Bedingungen

"receivesItems": [{
  "itemId": "brief",
  "message": "Danke für die Lieferung!",
  "givesItemId": "belohnung",
  "requireFlag": "quest_aktiv",          // Muss gesetzt sein
  "requireFlagNotSet": "brief_abgegeben", // Muss NICHT gesetzt sein
  "failTitle": "❌ Abgelehnt",
  "failMessage": "Das kann ich jetzt nicht annehmen.",
  "setFlag": "brief_abgegeben"
}]

Kampfsystem (HP-basiert)

Wenn ein NPC maxHP gesetzt hat, kann er mit Items angegriffen werden. Der Spieler klickt auf den NPC → wählt ein Waffen-Item → der NPC verliert HP. Bei 0 HP: onDefeat.

"drache": {
  "name": "Roter Drache",
  "maxHP": 100,
  "counterDamage": 15,       // Schaden beim Gegenschlag (opt.)
  "usableWith": [{
    "itemName": "Drachenschwert",
    "damage": 25,
    "success": "Du triffst den Drachen!",
    "onDefeat": {
      "message": "Der Drache ist besiegt! 🎉",
      "givesItem": "drachenschuppe",
      "teleportTo": "thronsaal",
      "setFlag": "drache_besiegt",
      "clearFlag": "drache_lebt",
      "playCutscene": "sieg_drache"
    }
  }]
}

Was sind Dialog-Bäume?

Statt einem starren Dialog-Satz kann jeder NPC jetzt einen echten Gesprächsbaum führen. Der Spieler wählt Antworten, die die Geschichte in verschiedene Richtungen lenken. Flags können gesetzt, Items vergeben und Cutscenes ausgelöst werden.

Aufbau: Knoten und Antworten

Ein Dialog-Baum besteht aus Knoten. Jeder Knoten ist ein Gesprächs-Moment. Der Knoten mit der ID start ist immer der Einstieg.

"dialogTree": {
  "start": {
    "npcText": "Was kann ich für dich tun?",
    "choices": [
      {
        "text": "Ich brauche Informationen.",
        "next": "info_knoten"
      },
      {
        "text": "Hier ist der Brief für dich.",
        "next": "brief_uebergeben",
        "requireFlag": "brief_gefunden"  // Nur sichtbar wenn Flag gesetzt
      },
      {
        "text": "Auf Wiedersehen!",
        "next": null              // null = Gespräch endet
      }
    ]
  },

  "info_knoten": {
    "npcText": "Der Schlüssel liegt im alten Turm!",
    "setFlag": "hinweis_erhalten",     // Flag beim Betreten
    "choices": [
      { "text": "Danke!", "next": null }
    ]
  }
}

flagBranch: Automatische Umleitung

Wenn der Spieler denselben NPC nach einem wichtigen Ereignis erneut anspricht, soll dieser anders reagieren. Dafür gibt es flagBranch: Wenn eine Flag gesetzt ist, leitet der Spieler automatisch zu einem anderen Knoten um.

"start": {
  "flagBranch": [
    { "flag": "brummi_zurueck", "goto": "nach_brummi" },
    { "flagNot": "quest_aktiv", "goto": "kein_quest" }
  ],
  "npcText": "Ich fahre nicht ohne Brummi!",
  // Wird nur gezeigt wenn KEIN Branch greift
  ...
},
"nach_brummi": {
  "npcText": "BRUMMI! 🎉 Jetzt bin ich bereit!",
  "choices": [
    { "text": "Na dann – ab ins Kino!", "next": null }
  ]
}

Einrichten im Editor

Was ist eine Cutscene?

Eine Cutscene ist eine Abfolge von Slides – jede mit einem Bild (oder Video), einem Text und optionaler Musik. Der Spieler klickt sich durch und sieht so eine Geschichte, eine Erklärung oder einen dramatischen Moment.

"cutscenes": {
  "wald_intro": [
    {
      "image": "data:image/png;base64,...",
      "text": "Es war einmal ein dunkler Wald...",
      "bgm": "data:audio/mpeg;base64,...",
      "bgmLoop": true,
      "theme": "dark",
      "transition": "fade"
    },
    {
      "image": "data:image/png;base64,...",
      "text": "Ein Held betrat ihn..."
    }
  ]
}

10 Trigger – überall einsetzbar

Cutscenes können an 10 verschiedenen Stellen ausgelöst werden. Alle sind vollständig im Editor konfigurierbar:

JSON für Flag-basierten Trigger (Nr. 10)

"cutsceneTriggers": [{
  "requireFlag": "schatz_gefunden",
  "playCutscene": "siegesfeier",
  "playOnce": true
}]

Was sind Flags?

Eine Flag ist ein einfacher Schalter: entweder ein (true) oder aus (false). Damit kann das Spiel sich merken, was der Spieler schon gemacht hat: eine Tür geöffnet, einen Kampf gewonnen, einen Brief abgegeben.

"flags": {
  "tuer_offen": false,
  "schatz_gefunden": false,
  "quest_aktiv": true    // true = Flag startet schon gesetzt
}

Flags setzen und löschen

Flags können an vielen Stellen gesetzt oder gelöscht werden:

Automatische Flags

Flags als Bedingungen verwenden

Fast überall im System kann eine Flag als Bedingung geprüft werden:

So funktioniert Crafting

Der Spieler wählt im Inventar zwei Items aus und klickt "Kombinieren". Gibt es ein passendes Rezept, verschwinden beide Items und das Ergebnis erscheint. Gibt es keins – passiert nichts.

"recipes": [
  {
    "item1Id": "eimer_wasser",      // Item-ID (empfohlen)
    "item2Id": "seife",
    "resultId": "eimer_seifenwasser",
    "message": "Du mischst die Seife ins Wasser – es schäumt!",
    "playCutscene": "misch_animation",  // Optional
    "playCutsceneOnce": true,
    "sfx": "snd_1234_abc"              // 🔊 Sound aus der Bibliothek (optional)
  }
]

Aufbau einer Endbedingung

Ein Ende besteht aus einer Bedingung (was muss eingetreten sein?) und optional zusätzlichen Bedingungen, einer Cutscene, einem Teleport und der Abschlussmeldung.

"gameEnds": {
  "win": [{
    "type": "flag",               // item | flag | location
    "value": "papa_informiert",  // ID oder Name je nach Typ
    "requireFlag": "basti_gluecklich", // Zusatzbedingung
    "playCutscene": "fahrt_ins_kino", // Cutscene davor
    "teleportTo": "kino",          // Ort nach Cutscene
    "message": {
      "title": "🎬 ZOO VERRÜCKT 3!",
      "message": "Du hast den Samstag gerettet!",
      "buttonText": "🍿 Film ab!"
    }
  }],
  "lose": [{
    "type": "flag",
    "value": "player_dead",
    "message": "Du bist gestorben..."
  }]
}

Alle Felder einer Endbedingung

Reihenfolge der Ereignisse

Tod-Szenarien mit verschiedenen Meldungen

"lose": [
  {
    "type": "flag", "value": "player_dead",
    "requireFlag": "vergiftet",
    "message": "Das Gift war zu stark..."
  },
  {
    "type": "flag", "value": "player_dead",
    "requireFlag": "im_kampf",
    "message": "Du wurdest im Kampf besiegt..."
  },
  {
    "type": "flag", "value": "player_dead",
    "message": "Du bist gestorben."  // Fallback
  }
]

Was ist das Aufgaben-System?

Mit dem Aufgaben-System kannst du dem Spieler eine sichtbare Liste von Zielen mit Fortschrittsbalken anzeigen. Jedes Ziel ist an ein Flag gebunden – sobald das Flag im Spielverlauf gesetzt wird, gilt das Ziel als erfüllt und wird visuell abgehakt.

Einrichten im Editor

Tab 🎨 Anzeige → Abschnitt 🎯 Aufgaben / Ziele.

JSON-Struktur

{
  "displaySettings": {
    "goalsEnabled":  true,
    "goalsTitle":    "🎯 Aufgaben",
    "goalsPosition": "sidebar",  // "sidebar" | "accordion" | "modal"
    "goals": [
      {
        "text":        "Pizza bestellen",
        "flag":        "pizza_bestellt",
        "secret":      false
      },
      {
        "text":        "Geheimende finden",
        "flag":        "geheim_ende",
        "secret":      true,
        "secretLabel": "???"   // bis Flag erfüllt
      }
    ]
  }
}

Die drei Anzeigeoptionen

Features im Player

Was ist TTS?

Adventure Builder Pro nutzt die eingebaute Web Speech API des Browsers – kein Internet nötig, DSGVO-konform. Wenn TTS aktiviert ist, kann der Spieler mit der Maus über Elemente fahren und sie werden vorgelesen.

Was wird vorgelesen?

Auto-Stimmen-Wahl

ABP wählt automatisch die beste verfügbare deutsche Stimme:

Die Wahl des Teilnehmenden wird dauerhaft gespeichert – die Stimme bleibt beim nächsten Spielstart erhalten.

Designer-Einstellungen

Wie es funktioniert

Im ⚙️-Einstellungsmenü gibt es einen 💾 Spielstand-Bereich mit einem Speicherslot. Der Stand wird im localStorage des Browsers gespeichert – kein Server, kein Internet nötig.

Was wird gespeichert?

Wichtig zu wissen

Wie es funktioniert

ABP misst die Spielzeit automatisch – ab dem Spielstart bis zum Spielende. Die Zeit läuft im Hintergrund, auch wenn das ⚙️-Menü geöffnet ist. Beim Neustart wird die Uhr zurückgesetzt.

Timer im HUD anzeigen

Wenn aktiviert, erscheint ein grüner ⏱️ Spielzeit-Kasten in der Sidebar. Format: MM:SS (unter einer Stunde) oder H:MM:SS (ab einer Stunde). Mit TTS vorlesbar per Hover.

JSON: "displaySettings": { "showTimerInHUD": true }

Spielzeit am Spielende

Die finale Spielzeit erscheint automatisch in der Sieg- oder Niederlage-Meldung. Mit TTS wird sie in natürlicher Sprache vorgelesen:

Anzeige:  01:23
TTS:      „1 Minute und 23 Sekunden"

Editor-Usability – neue Funktionen

🖌️ Editor-Themes

Unter ⚙️ Einstellungen → Editor-Theme stehen 5 Farbthemen zur Wahl: 🌈 Bunt, ⚫ Dark, 🔘 Schlicht, 🔵 Klassisch und 🎮 Minecraft. Jedes Theme ändert Hintergrundfarbe, Buttons, Header und Sidebar. Die Wahl wird im Browser gespeichert (nicht im Spiel-JSON).

⚙️ Einstellungen-Tab

Der neue Tab ⚙️ Einstellungen fasst Spiel-Informationen (Titel, Autor, Version), Editor-Theme, Spielmodi, TTS, Kampf-System und alle Anzeige-Einstellungen an einem Ort zusammen. Der Header-Button „⚙️ Einstellungen" öffnet direkt diesen Tab statt einem Modal.

↕ Akkordeon-Zyklus

Der ↕-Button rechts in der Titelleiste von ORTE, Features und Anzeige schaltet zwischen drei Zuständen durch: Alle auf → Alle zu → Merker (gespeicherter Zustand). Der Editor merkt sich welche Akkordeons offen waren und kehrt auf Wunsch dorthin zurück.

⏱ Zuletzt bearbeitet

Ab 3 Orten zeigt die Orts-Sidebar oben die 3 zuletzt bearbeiteten Orte als Schnellzugriff an. Spart Scrollen bei großen Spielen.

⧉ Objekt duplizieren

Jedes Objekt in einem Ort hat jetzt einen ⧉-Button (Duplizieren). Ein Klick erstellt eine identische Kopie direkt darunter – inklusive aller Verwendungen, Flags und Bedingungen.

🔍 Schnellsuche

In der Sidebar der Tabs NPCs, Flags und Sounds gibt es jetzt ein Suchfeld zum schnellen Filtern der Liste.

🎮 Spieltitel im Header

Nach dem Laden oder Anlegen eines Spiels erscheint der Spieltitel rechts neben dem „Adventure Builder Pro"-Logo im Header. Er aktualisiert sich automatisch wenn du den Titel im Tab ⚙️ Einstellungen → 📋 Spiel-Informationen änderst.

💾 Export-Dateiname = Spieltitel

Beim Export heißt die JSON-Datei jetzt automatisch nach dem Spieltitel – z.B. Mission_Zoo_verrueckt.json. Sonderzeichen werden entfernt, Leerzeichen durch _ ersetzt. Umlaute bleiben erhalten.

📋 Spiel-Informationen inline

Titel, Autor, Version und Startort sind jetzt direkt im Tab ⚙️ Einstellungen → 📋 Spiel-Informationen inline editierbar – kein Modal mehr nötig. Der Header-Button „⚙️ Einstellungen" öffnet direkt diesen Tab.

🚩 Flag setzen beim Nehmen (canTake)

Objekte mit canTake: true können jetzt ein setFlag erhalten. Sobald der Spieler das Objekt aufnimmt, wird dieser Flag automatisch auf true gesetzt. Im Editor erscheint dafür ein Dropdown „🚩 Flag setzen beim Nehmen" im Objekt-Modal (Hinzufügen + Bearbeiten). Dies ist z.B. nützlich um bedingte Ortsbeschreibungen auszulösen (Tasche nehmen → tasche_genommen → Beschreibung ändert sich).

🏁 Spielende – Verzögerung & Partikeldesigner

Unter ⚙️ Einstellungen → 🏁 Spielende kannst du die Ende-Meldung fein einstellen:

• ⏱️ Verzögerung – Slider 0–5s (Standard: 2s). Wähle wie lange es dauert bis die Gewinn/Verlier-Meldung nach dem auslösenden Event erscheint.
• 🎨 Partikel-Effekt – drei Modi: 🎉 Emojis (frei konfigurierbar), 🎊 Konfetti (geometrische Farbflächen), 🚫 Keiner
• ✏️ Emojis konfigurieren – eigene Emojis eingeben oder aus 8 Schnellauswahl-Presets wählen (Party, Sterne, Sieg, Herzen, Natur, Space, Action, Games)
• 🔢 Menge – Slider 10–200 Partikel
• ⚡ Geschwindigkeit – 🐢 Langsam / ▶️ Normal / ⚡ Schnell

📝 forbidFlag in konditionalen Beschreibungen

Konditionale Ortsbeschreibungen unterstützen jetzt ein zweites Dropdown 🚫 Flag (darf NICHT gesetzt sein). Damit lassen sich Beschreibungen exakter steuern: z.B. „zeige diesen Text wenn Flag A gesetzt ist, aber nur solange Flag B noch nicht gesetzt ist". Außerdem gibt es einen ↑ Nach-oben-Button um die Reihenfolge der Einträge zu ändern – wichtig, da immer der erste passende Eintrag gewinnt (spezifischste Bedingungen müssen oben stehen).

Sound-Bibliothek für Hintergrundmusik

Hintergrundmusik eines Ortes wird jetzt über die 🔊 Sound-Bibliothek referenziert statt direkt als Base64 gespeichert. Im Ort-Editor erscheint ein Dropdown mit allen Bibliotheks-Sounds. Bestehende JSON-Spiele mit direkt eingebetteter Musik werden beim Laden automatisch migriert.

Vorteil: Dieselbe Musik kann mehreren Orten zugewiesen werden ohne den JSON-Export zu vergrößern. Unter Tab 🔊 Sounds sieht man bei jedem Sound wo er eingesetzt wird (z.B. „🎵 Hintergrundmusik: Küche").

Verfügbare Themes

Anzeige-Einstellungen (displaySettings)

"displaySettings": {
  // ── Inventar ──────────────────────────────────────────────
  "inventoryPosition":     "right",   // right | left | bottom
  "allowInventoryChange":  true,
  "inventoryHiddenAtStart":false,
  "unlockInventoryItemId": "",
  "inventoryLayout":       "vertical",  // horizontal | vertical
  "inventoryColumns":      "1",
  "inventoryWidth":        "300",

  // ── Thumbnails ────────────────────────────────────────────
  "thumbSizeInventory":    70,
  "thumbSizeRoomObjects":  80,
  "thumbSizeNPCs":         80,
  "thumbSizeModal":        300,

  // ── Layout ────────────────────────────────────────────────
  "roomLayout":            "horizontal",
  "compactMode":           "normal",
  "locationImageSize":     "full",      // hidden | small | medium | full
  "containerMaxWidth":     1400,
  "showObjectText":        true,
  "showNPCText":           true,
  "showInventoryText":     true,
  "hideEmptySectionTitles":false,

  // ── 3-Wege-Spielmodus ──────────────────────────────────────
  "parserEnabled":         true,
  "textOnlyMode":          false,
  "textModeImages":        true,
  "terminalWidth":         "full",      // full | 600px | 700px | 800px …
  "showModeGrafik":        true,
  "showModeParser":        true,
  "showModeText":          true,

  // ── HP-System ─────────────────────────────────────────────
  "playerHPEnabled":       false,
  "playerStartHP":         100,
  "playerMaxHP":           100,
  "hpSectionTitle":        "❤️ Spieler",
  "hpUnit":                "HP",

  // ── Skill-System ──────────────────────────────────────────
  "skillSystemEnabled":    false,
  "skillStartValue":       0,
  "skillMaxValue":         100,
  "skillSectionTitle":     "⭐ Erfahrung",
  "skillLabel":            "XP",

  // ── Aufgaben-System ────────────────────────────────────────
  "goalsEnabled":          false,
  "goalsTitle":            "🎯 Aufgaben",
  "goalsPosition":         "sidebar",   // sidebar | accordion | modal
  "goals": [
    { "text": "Ziel-Text", "flag": "flag_name", "secret": false }
  ]
}

↩️ Undo / Redo

Jede Änderung im Editor ist rückgängig machbar – bis zu 50 Schritte zurück. Kein versehentliches Löschen ist mehr permanent.

🔍 Globale Suche

Das Suchfeld oben rechts in der Toolbar durchsucht das gesamte Spiel in Echtzeit – Orte, NPCs, Items und Flags. Ein Klick auf ein Ergebnis springt direkt zur richtigen Stelle.

🗺️ Orts-Graph

Der neue Graph-Tab zeigt alle Orte als interaktive Knotenpunkte und alle Verbindungen (Exits) als Pfeile dazwischen. Ideal um den Überblick bei komplexen Spielen zu behalten.

📌 Verbesserte Orts-Liste

Die Orts-Liste in der linken Sidebar zeigt jetzt auf einen Blick:

• Miniaturvorschau (48×36 px) des Ortsbildes – sofort erkennbar welcher Ort was ist
• ⭐ Startort-Markierung
• 👤2 Anzahl NPCs
• 📦3 Anzahl Objekte
• 🚪2 Anzahl Ausgänge
• ⚠️ Validierungswarnung

🏷️ Item-ID Umbenennung mit automatischem Referenz-Update

Im Tab 📦 Objekte kann die interne Item-ID direkt bearbeitet werden. Wenn du eine ID änderst, aktualisiert der Editor automatisch alle Verweise im gesamten Spiel:

Was ist der Parser-Modus?

Jedes Spiel kann optional per Freitext gespielt werden. Ein Toggle-Button im Player-Header schaltet zwischen Klick-Modus und Parser-Modus um. Beide Modi laufen parallel – der Spieler kann jederzeit wechseln, ohne den Spielstand zu verlieren.

Vollständiges Vokabular

🗺️ Gehen

📦 Nehmen

NIMM · NEHME · AUFHEBEN · AUFNEHMEN · GREIF · STECKE EIN · SAMMLE

🗑️ Ablegen

LEGE AB · ABLEGEN · WIRF WEG · WEGWERFEN · ABGEBEN

🔍 Untersuchen

UNTERSUCHE · SCHAU AN · BETRACHTE · PRÜFE · INSPIZIERE · X · LOOK · L

Zeigt die Beschreibung eines Objekts oder Items – ohne eine Aktion auszulösen.

🔎 Durchsuchen

DURCHSUCHE · DURCHSUCHEN · SUCHE IN · WÜHLE IN · FILZE · STÖBERE IN · KRAME IN · GRABE IN

Löst Direkt-Aktionen an Raumobjekten aus – ideal für Objekte die man "durchsuchen", "öffnen" oder "aktivieren" kann ohne ein Item zu brauchen.

🔧 Benutzen (solo)

BENUTZE · VERWENDE · NUTZE · SETZE EIN · WENDE AN · KOMBINIERE · MISCHE

Erkennt automatisch ob das Argument ein Inventar-Item (→ auf passendes Raumobjekt anwenden) oder ein Raumobjekt (→ Direkt-Aktion) ist.

⚗️ Benutzen mit

Prüft zuerst Rezept (beide Items im Inventar), dann Raumobjekt. Reihenfolge ist egal.

🎁 Geben an NPC

💬 Sprechen · 🚪 Öffnen · 🎒 Inventar · ❓ Hilfe

Parser-Tipps für Game Designer

Item: "Goldener Schlüssel"
Synonyme: schluessel, rost, key

"usableWith": [{
  "itemName": "",
  "actionLabel": "🔍 Durchsuchen",
  "success": "Du wühlst zwischen den Kissen... 5 Euro!"
}]

Komplettlösung per Parser: Pizza-Katastrophe

SCHAU DICH UM
BENUTZE TELEFON
DURCHSUCHE SOFA-KISSEN
NIMM 5 EURO
GEHE IN DIE KÜCHE
DURCHSUCHE KEKSDOSE
NIMM KEKSE
GEHE ZURÜCK INS ZIMMER
NIMM STAUBSAUGER
BENUTZE STAUBSAUGER MIT STAUB
GIB STAUBSAUGER AN MAMA
NIMM 3 EURO
KOMBINIERE 5 EURO MIT 3 EURO
GEHE ZUR HAUSTÜR
GIB 8 EURO AN MARCO
-- oder: GIB KEKSE AN MARCO

Was ist die Sound-Bibliothek?

Neben der Hintergrundmusik pro Ort unterstützt ABP jetzt auch Soundeffekte (SFX) – kurze Klänge die bei konkreten Spielereignissen abgespielt werden. Alle Sounds werden einmalig in der zentralen Bibliothek gespeichert. Objekte, Rezepte und Items referenzieren den Sound dann nur noch per ID – kein doppeltes Speichern derselben Audiodatei.

JSON-Struktur der Bibliothek

"sounds": {
  "snd_1234_abc": {
    "name": "💥 Explosion",
    "data": "data:audio/mp3;base64,..."
  },
  "snd_5678_xyz": {
    "name": "🔑 Tür knarrt",
    "data": "data:audio/mp3;base64,..."
  }
}

Die IDs werden automatisch generiert. Du referenzierst sie überall im Spiel als einfacher String – z.B. "sfx": "snd_1234_abc".

SFX-Felder – wo einsetzbar

Beispiel: Schlüssel mit Pickup-Sound

"rost_schluessel": {
  "name": "🔑 Rostiger Schlüssel",
  "description": "Ein alter, verrosteter Schlüssel.",
  "sfx": "snd_1234_abc"  // Knarr-Sound aus der Bibliothek
}

Beispiel: Tür öffnen mit SFX

"usableWith": [{
  "itemId": "rost_schluessel",
  "success": "Die Tür quietscht auf!",
  "setFlag": "tuer_offen",
  "removeItem": true,
  "sfx": "snd_5678_xyz"  // Tür-knarrt-Sound
}]

Sound-Bibliothek im Editor verwalten

Technische Hinweise

Was ist das?

Der Player kann eine JSON-Datei automatisch laden wenn der Dateiname als URL-Parameter übergeben wird. Damit kann ein Spiel direkt über einen Link gestartet werden – ohne dass der Spieler erst eine Datei auswählen muss.

URL-Format

player.html?JSON=pizza-katastrophe
player.html?JSON=pizza-katastrophe.json   // .json optional
player.html?game=zoo-verrueckt            // auch ?game= wird erkannt

Auf der Homepage einsetzen

Statt für jedes Spiel eine eigene Standalone-HTML-Datei (Packager) zu erzeugen, kannst du einfach die JSON-Datei hochladen und direkt verlinken:

<!-- Statt: -->
<a href="pizza-katastrophe.html">Spielen</a>

<!-- Einfacher: -->
<a href="player.html?JSON=pizza-katastrophe">Spielen</a>

Vollständige Grundstruktur

{
  // === PFLICHT ===
  "title": "Spielname",
  "startLocation": "ort_id",

  // === OPTIONAL ===
  "author": "Dein Name",
  "version": "1.0",
  "defaultTheme": "modern",
  "startInventory": ["item_id_1", "item_id_2"],

  // === KERN-DATEN ===
  "locations": { /* Orte */ },
  "items": { /* Gegenstände */ },
  "npcs": { /* Charaktere */ },
  "recipes": [ /* Rezepte */ ],
  "quests": [ /* Aufgaben */ ],
  "flags": { /* Spielzustände */ },
  "sounds": { /* 🔊 Sound-Bibliothek */ },
  "cutscenes": { /* Story-Sequenzen */ },
  "gameEnds": { "win": [], "lose": [] },
  "displaySettings": { /* Layout */ }
}

usableWith – alle Felder

Vor dem ersten Test

📁 Grundstruktur

• startLocation ist gesetzt und der Ort existiert
• Alle Orte haben Name und Beschreibung
• Kein Ort verweist auf einen nicht-existierenden Ort (Exits)
• Mindestens eine Sieg-Bedingung ist definiert

📦 Items & Inventar

• Alle Items die in Rezepten, Exits oder usableWith verwendet werden, sind in items definiert
• Wenn Inventar-Freischaltung: Freischalt-Item liegt als Raumobjekt vor, nicht als Tausch-Item

🗨️ NPCs & Dialog

• Jeder NPC hat entweder einen statischen Dialog oder einen Dialog-Baum mit start-Knoten
• receivesItems verweist auf Items die der Spieler auch wirklich finden kann
• flagBranch-Ziel-Knoten existieren im Dialog-Baum

🏁 Spielende

• Spielende-Bedingungen sind erreichbar (kein unlösbares Spiel)
• Wenn teleportTo gesetzt: Ziel-Ort existiert
• Wenn playCutscene gesetzt: Cutscene-ID existiert
• message ist ausgefüllt (title + message + buttonText empfohlen)

🎬 Cutscenes

• Alle referenzierten Cutscene-IDs existieren in cutscenes
• game_intro vorhanden (optional, aber empfohlen)
• playCutsceneOnce: true gesetzt wo nötig

🚩 Flags

• Alle Flags die als Bedingung verwendet werden, sind in flags definiert
• Flag-Namen sind konsistent (exakt gleich geschrieben)

Namenskonventionen

Story-Struktur

• Tutorial-Ort: Der erste Ort sollte die Grundmechaniken erklären – am besten durch Handeln, nicht durch langen Text
• Klare Ziele: Der Spieler sollte immer wissen was als nächstes zu tun ist – NPCs geben Hinweise
• Belohnungen: Nach jedem Rätsel eine Belohnung – ein neues Item, eine Cutscene, eine neue Tür
• Mehrere Wege: Dialog-Bäume und bedingte Ausgänge ermöglichen verschiedene Spielwege

Balance & Schwierigkeit

• Kampfsystem: Feinde mit 100–200 HP, Waffen mit 20–40 Schaden gibt 3–8 Treffer pro Kampf
• Rezepte: Nicht mehr als 2–3 Kombinationsschritte hintereinander – sonst wird's frustierend
• Hinweise: Wenn Rätsel schwer sind, sollte mindestens ein NPC einen Tipp geben können
• Sackgassen vermeiden: Teste jeden möglichen Weg – gibt es eine unbeabsichtigte Situation wo der Spieler feststeckt?

Atmosphäre & Stil

• Themes konsequent einsetzen: Wechsle das Theme nur bei wichtigen Momenten – zu viele Wechsel wirken unruhig
• Beschreibungen: Atmosphäre geht vor Fakten. "Es riecht modrig, ein Tropfen fällt in die Stille" ist besser als "Ein Keller, 3x4 Meter."
• NPC-Persönlichkeit: Jeder NPC sollte eine eigene Sprache haben – Händler reden von Profit, Wachen von Pflicht
• Cutscenes sparsam: Cutscenes sind emotionale Höhepunkte – zu viele davon verlieren ihre Wirkung

Typische Spielmuster als Vorlage

🔑 Schlüssel-Tür

Item finden → an Objekt verwenden → Flag setzen → Ausgang freischalten. Das klassischste Muster.

📜 Boten-Quest

Item A von NPC A erhalten → Item A zu NPC B bringen → Belohnung erhalten. Gut für strukturierte Quests.

⚗️ Mehrstufiges Crafting

Item A + Item B = Item C → Item C + Item D = Item E → Item E auf Objekt anwenden. Gut für Rätsel die Vorausdenken erfordern.

⚔️ Boss mit Belohnung

NPC mit maxHP → mit Waffe bekämpfen → onDefeat gibt Item und setzt Flag → Game End wird ausgelöst.

🎭 Geschichte mit mehreren Enden

Dialog-Baum mit setFlag → verschiedene Flags führen zu verschiedenen Win-Bedingungen mit unterschiedlichen Meldungen und Cutscenes.

Quests werden durch Flags ersetzt

Der Quest-Tab wurde aus dem Editor entfernt, weil das Quest-System im Player nie implementiert war – Quests wurden im JSON gespeichert, aber nie angezeigt oder ausgewertet.

So baust du Quest-Mechaniken mit Flags

Alles was ein Quest-System leisten soll, lässt sich vollständig mit dem Flag-System abbilden:

// Schritt 1: Rezept – Mehl + Wasser = Teig
{ "item1": "mehl", "item2": "wasser", "result": "teig" }

// Schritt 2: NPC nimmt das Brot entgegen
"receivesItems": [{
  "itemId": "brot",
  "message": "Danke! Hier hast du deine Belohnung.",
  "givesItemId": "gold",
  "setFlag": "brot_abgegeben"
}]

// Schritt 3: Spielende wenn Quest abgeschlossen
"win": [{
  "type": "flag",
  "value": "brot_abgegeben",
  "message": "Du hast die Aufgabe erfüllt!"
}]