# 📘Einführung

# Storyboard-Doku – Start & Inhaltsverzeichnis

> **Kurz gesagt:**<span style="white-space: pre-wrap;"> Diese Doku zeigt dir, wie du mit dem Storyboard von </span>**scenario.app**<span style="white-space: pre-wrap;"> interaktive Erlebnisse baust – von der ersten Szene bis zum Release.</span>

[![Storyboard Screenshot](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/grafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/grafik.png)

<span style="white-space: pre-wrap;">Das </span>**Storyboard**<span style="white-space: pre-wrap;"> ist der visuelle Editor hinter scenario.app. Du erstellst damit Szenen, verknüpfst Orte, Medien &amp; Logik und kompilierst alles zu einem spielbaren Erlebnis (App/Web).</span>  
<span style="white-space: pre-wrap;">Ideal für </span>**Tourismus**<span style="white-space: pre-wrap;">, </span>**Education**<span style="white-space: pre-wrap;">, </span>**Events**<span style="white-space: pre-wrap;">, </span>**Escape-/Rallye-Games**<span style="white-space: pre-wrap;"> und </span>**Location-based Storytelling**.

**Highlights**

- Szenen &amp; Verzweigungen grafisch denken
- Karten &amp; Wegpunkte (statisch + dynamisch)
- Medien nahtlos einbinden (Bild, Audio, Video)
- Feature-Bausteine: Waypoint, Pano360, Dialog V2, Embedded Audio/Video u. v. m.
- Compiler &amp; Runtime rein in JavaScript – schnell, portabel, offline-tauglich

---

## Für wen ist diese Doku?

- **Creator:innen**<span style="white-space: pre-wrap;"> – die schnell produktiv werden wollen</span>
- **Teams/Orgs**<span style="white-space: pre-wrap;"> – die Standards, Workflows &amp; Qualität sichern möchten</span>
- **Dev-Nerds**<span style="white-space: pre-wrap;"> – die tiefer in Compiler/Runtime, API &amp; Deployment einsteigen</span>

---

## So nutzt du diese Doku

1. **Schnellstart**<span style="white-space: pre-wrap;"> lesen → erstes Mini-Projekt bauen.</span>
2. **Grundkonzepte**<span style="white-space: pre-wrap;"> verstehen → Szenen, Karten, Assets.</span>
3. **Features**<span style="white-space: pre-wrap;"> gezielt nachschlagen → Waypoint, Pano360, Dialog V2 etc.</span>
4. **Hacks &amp; Tipps**<span style="white-space: pre-wrap;"> für Feinschliff &amp; Performance.</span>
5. **API &amp; Backend**<span style="white-space: pre-wrap;"> nutzen, wenn du integrierst/automatisierst.</span>

---

# Schnellstart

# In 10 Sekunden zur ersten Szene

> <span style="white-space: pre-wrap;">Dieser Quick-Start führt dich vom Login bis zur </span>**laufenden Vorschau**.  
> <span style="white-space: pre-wrap;">Du brauchst nur einen Account für </span>**storyboard.scenario.app**.

---

<video autoplay="" controls="" height="490" id="bkmrk--2" src="https://docs.scenario.app/attachments/44?open=true" width="871"></video>## 1) Anmelden &amp; Projekt öffnen

1. <span style="white-space: pre-wrap;">Öffne </span>**storyboard.scenario.app**<span style="white-space: pre-wrap;"> und logge dich ein.</span>
2. <span style="white-space: pre-wrap;">Wähle ein vorhandenes Projekt </span>**oder**<span style="white-space: pre-wrap;"> erstelle ein neues.</span>

**Optional:**<span style="white-space: pre-wrap;"> Lege dir eine leere Arbeitsfläche („Canvas“) bereit, damit du die erste Szene frei platzieren kannst.</span>

---

## 2) Erste Szene anlegen

1. **Szene**<span style="white-space: pre-wrap;"> aus der linken Leiste </span>**auf das Canvas ziehen**.
2. <span style="white-space: pre-wrap;">Benenne die Szene (z. B. „Start“). </span>
3. **Doppelklick**<span style="white-space: pre-wrap;"> auf den </span>**Vorschaubereich**<span style="white-space: pre-wrap;"> der Kachel → der </span>**WYSIWYG-Editor**<span style="white-space: pre-wrap;"> öffnet sich.</span>
4. <span style="white-space: pre-wrap;">Fülle </span>**Titel**<span style="white-space: pre-wrap;">, </span>**Text**<span style="white-space: pre-wrap;">, optional </span>**Medien**<span style="white-space: pre-wrap;"> (Bild, Audio, Video) aus.</span>
5. **Speichern**.

<p class="callout info"><span style="white-space: pre-wrap;">Tipp: Halte Szenennamen kurz &amp; sprechend – z. B. </span>`<span class="editor-theme-code">Start</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">Brücke</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">Fundort_Tag</span>`<span style="white-space: pre-wrap;">. Die erste Szene muss immer </span>`<span class="editor-theme-code">[[Start]]</span>`heißen.</p>

---

## 3) Inhalte bearbeiten (WYSIWYG)

- <span style="white-space: pre-wrap;">Der </span>**Vorschaubereich**<span style="white-space: pre-wrap;"> in der Kachel zeigt dir sofort den Stand.</span>
- Im Editor kannst du Formatierungen, Bilder, Audio/Video, Buttons etc. nutzen.
- <span style="white-space: pre-wrap;">Über </span>**⌘/Ctrl + Z**<span style="white-space: pre-wrap;"> rückgängig, </span>**⌘/Ctrl + S**<span style="white-space: pre-wrap;"> speichert.</span>

[![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/5k9grafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/5k9grafik.png)

## 4) Szenen verbinden (Logik &amp; Navigation)

<span style="white-space: pre-wrap;">Du kannst Szenen per </span>**Funktion**<span style="white-space: pre-wrap;"> miteinander verknüpfen – einfach </span>**+**<span style="white-space: pre-wrap;"> Button innerhalb der Kachel klicken.</span>

**Typische Verbindungen:**

- **QR-Code:**<span style="white-space: pre-wrap;"> Spielende scannen vor Ort einen Code → nächste Szene.</span>
- **Waypoint (Geo):**<span style="white-space: pre-wrap;"> Eintritt in einen </span>**Standort-Radius**<span style="white-space: pre-wrap;"> schaltet die nächste Szene frei.</span>
- **Dialog/Buttons:**<span style="white-space: pre-wrap;"> Aus der Szene heraus per Button weiterleiten.</span>
- **Zeit/Ereignis:**<span style="white-space: pre-wrap;"> Verzögertes Freischalten, Hinweise, Inventar-Bedingungen.</span>

  
[![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/Ez8grafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/Ez8grafik.png)

> Best Practice: Baue kurze, klare Pfade. Lange Ketten erst testen, dann erweitern.

---

## 5) Medien &amp; Extras

- **Bilder**<span style="white-space: pre-wrap;"> (Poster), </span>**Audio**<span style="white-space: pre-wrap;"> (SFX, Voice), </span>**Video**<span style="white-space: pre-wrap;"> (mp4/YouTube) direkt an Szenen binden.</span>
- <span style="white-space: pre-wrap;">Für </span>**360°**<span style="white-space: pre-wrap;">, </span>**Dialog V2**<span style="white-space: pre-wrap;">, </span>**Embedded Audio/Video**: passendes Feature in der Szene öffnen und konfigurieren.
- **QR/NFC**: Codes/Tags im Editor hinterlegen und testen.

---

## 6) Testen in der Vorschau

1. <span style="white-space: pre-wrap;">Rechts oben </span>**„Vorschau“**<span style="white-space: pre-wrap;"> starten.</span>
2. <span style="white-space: pre-wrap;">Durch den Flow klicken </span>**oder**<span style="white-space: pre-wrap;"> QR/Waypoint-Bedingungen mit den Test-Tools simulieren.</span>
3. Ergebnisse notieren, Anpassungen vornehmen, erneut testen.

[![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/HJkgrafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/HJkgrafik.png)

---

## Mini-Cheat-Sheet

- **Drag &amp; Drop**: Kacheln frei anordnen; mit Zoom/Fullscreen den Überblick behalten.
- **Doppelklick**<span style="white-space: pre-wrap;"> auf Kachel-Vorschau: Szene im WYSIWYG öffnen.</span>
- **Verbindungen**: Über die Funktionsliste hinzufügen oder bearbeiten.
- **Speichern**<span style="white-space: pre-wrap;">: </span>**⌘/Ctrl + S**.
- **Rückgängig/Wiederholen**<span style="white-space: pre-wrap;">: </span>**⌘/Ctrl + Z**<span style="white-space: pre-wrap;"> / </span>**⌘/Ctrl + Shift + Z**.

---

## Häufige Fragen (kurz)

**Nichts passiert in der Vorschau?**  
<span style="white-space: pre-wrap;">→ Prüfe, ob eine </span>**Verbindung**<span style="white-space: pre-wrap;"> zur nächsten Szene existiert und ob Bedingungen (QR/Waypoint) </span>**erfüllt**<span style="white-space: pre-wrap;"> werden.</span>

**Waypoint triggert nicht?**  
→ Radius groß genug? Test-Position in der Vorschau korrekt gesetzt?

**QR führt ins Leere?**  
<span style="white-space: pre-wrap;">→ Richtigen </span>**Ziel-Knoten**<span style="white-space: pre-wrap;"> gewählt? Szene veröffentlicht/gespeichert?</span>

---

## Nächste Schritte

- **Grundkonzepte**<span style="white-space: pre-wrap;"> lesen (Szenen, Karte &amp; Wegpunkte, Medien).</span>
- **Features**<span style="white-space: pre-wrap;"> im Detail durcharbeiten (Waypoint, QR, Dialog V2, 360°, Embedded Audio/Video).</span>
- **Hacks &amp; Tipps**<span style="white-space: pre-wrap;"> für Performance und Feinschliff übernehmen.</span>

# Begriffe & Glossar

<p class="callout info">Schnelles Nachschlagen zentraler Begriffe rund um das scenario.app-Storyboard.</p>

## Grundbegriffe

**Projekt**  
Container für alle Inhalte (Szenen, Medien, Einstellungen) eines Spiels/Erlebnisses.

**Canvas**  
<span style="white-space: pre-wrap;">Arbeitsfläche, auf der du </span>**Szenen**<span style="white-space: pre-wrap;"> als Kacheln platzierst und verbindest.</span>

**Szene (Node)**  
Inhaltseinheit mit Text/Medien/Interaktionen. Hat Ein- und Ausgänge zu anderen Szenen.

**Vorschau**  
Laufzeit-Simulation deines Projekts. Hier testest du Flows, QR/Waypoint, Medien.

**Feature**  
Erweiterter Funktionsbaustein in einer Szene (z. B. Waypoint, Dialog V2, 360°, Embedded Video/Audio).

**Compiler / Runtime**  
Compiler erzeugt das lauffähige Paket (Web/App); Runtime führt die Logik clientseitig aus.

---

## Elemente &amp; Knoten

**Kachel**  
Visuelle Repräsentation einer Szene auf dem Canvas. Doppelklick → Editor.

**Pin / Connector**  
Andockpunkt an der Kachel für Verbindungen (Pfeile) zu Ziel-Szenen.

**Verbindung (Edge)**  
Kante zwischen zwei Szenen. Kann Bedingungen haben (QR, Geo, Inventar, Timer …).

**Startszene**  
Die erste Szene von deinem Szenario muss immer \[\[Start\]\] heißen. Die Szene mit dem Titel \[\[End\]\] beendet das Spiel.

---

## Navigation &amp; Logik

**Button-Weiterleitung**  
Interaktion innerhalb einer Szene, die zu einer Ziel-Szene führt.

**Bedingung**  
Regel, die erfüllt sein muss, damit eine Verbindung aktiv wird (z. B. „QR gescannt“).

**Timer / Delay**  
Zeitbasierte Bedingung. Schaltet erst nach Ablauf X frei oder zeigt Hinweise an.

**Variablen / Flags**  
<span style="white-space: pre-wrap;">Zustände im Spiel (z. B. </span>`<span class="editor-theme-code">hasKey=true</span>`). Steuern Sichtbarkeit/Verlauf.

---

## Ortsbezogene Funktionen

**Waypoint (Geolocation)**  
Erkennt Betreten eines Geo-Radius (lat/lng + Meter). Löst Verzweigungen aus.

**Geofence**  
Der definierte Radius um einen Punkt; innerhalb davon gilt „am Ort“.

**Simulationsposition**  
<span style="white-space: pre-wrap;">Virtuelle Position in der </span>**Vorschau**, um Waypoints ohne GPS vor Ort zu testen.

---

## Codes &amp; Tags

**QR-Code**  
Optischer Code, der beim Scannen eine Verzweigung oder Aktion auslöst.

**NFC-Tag**  
Kontaktloser Tag, der beim Antippen (Gerät) einen Flow triggert.

---

## Medien

**Posterbild**  
Vorschaubild einer Szene (wird in Kachel/Listen angezeigt).

**Embedded Video/Audio**  
Medien, die innerhalb der Szene abgespielt werden (mp4/YouTube; mp3/Wavesurfer).

**Untertitel**  
Zeitbasierte Texte für Audio/Video. Unterstützt Mehrsprachigkeit.

---

## Dialog &amp; 360°

**Dialog V2**  
Sequenzieller Dialog mit Rollen, Avatar, Farben und Verzweigungen.

**Pano360**  
360-Grad-Bild/Scene mit Hotspots. Unterstützt Navigations-/Info-Hotspots.

---

## Gamification &amp; Inventar

**Punkte &amp; Badges**  
Belohnungssystem. Wird beim Abschluss von Aufgaben/Szenen vergeben.

**Inventar (virtuell)**  
Sammelbare Items, die Logik/Verlauf beeinflussen (z. B. Schlüssel, Hinweise).

---

## Internationalisierung (i18n)

**Locale / Sprache**  
Projekt- bzw. Nutzer-Sprache. Inhalte können pro Sprache gepflegt werden.

**Fallback**  
Ersatzsprache, wenn ein Text in der Ziel-Locale fehlt.

---

## Betrieb &amp; Release

**Build / Release**  
Erzeugtes Paket aus dem Compiler, das veröffentlicht/getestet werden kann.

**Debug-Modus**  
Erweiterte Protokolle &amp; UI zum Fehlersuchen in Vorschau/Laufzeit.

**Changelog**  
Dokumentierte Änderungen pro Version (Features, Fixes, Breaking Changes).

---

## Administration

**Rollen &amp; Rechte**  
Zugriffskontrolle für Bearbeiten, Veröffentlichen, Admin-Funktionen.

**Organisation**  
Team/Unternehmen mit Lizenz, Nutzern, Projekten und ggf. Abrechnung.

---

## Abkürzungen

- **QR**<span style="white-space: pre-wrap;"> – Quick Response Code</span>
- **NFC**<span style="white-space: pre-wrap;"> – Near Field Communication</span>
- **GPS**<span style="white-space: pre-wrap;"> – Global Positioning System</span>
- **i18n**<span style="white-space: pre-wrap;"> – Internationalization (Internationalisierung)</span>
- **CI**<span style="white-space: pre-wrap;"> – Corporate Identity (Branding/Design)</span>
- **UX/UI**<span style="white-space: pre-wrap;"> – User Experience / User Interface</span>

---

## Konventionen (Empfehlungen)

- **Szenennamen:**<span style="white-space: pre-wrap;"> kurz &amp; eindeutig, z. B. </span>`<span class="editor-theme-code">Start</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">Bruecke_Nacht</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">Station_01</span>`.
- **Medien:**<span style="white-space: pre-wrap;"> web-optimiert, sprechende Dateinamen (</span>`<span class="editor-theme-code">station01_poster.webp</span>`).
- **Farben/Design:**<span style="white-space: pre-wrap;"> zentral definieren (CI), nicht pro Szene neu erfinden.</span>
- **Verbindungen:**<span style="white-space: pre-wrap;"> lieber </span>**kurze Pfade**<span style="white-space: pre-wrap;"> + häufig testen, statt lange Ketten.</span>

---

## Siehe auch

\[\[Schnellstart\]\] • \[\[Szenen &amp; Storyboard\]\] • \[\[Karten &amp; Wegpunkte\]\] • \[\[Features/Waypoint\]\] • \[\[Features/QR &amp; NFC\]\] • \[\[Hacks &amp; Tipps\]\]