# Szenen & Storyboard

<span style="white-space: pre-wrap;">Das </span>**Storyboard**<span style="white-space: pre-wrap;"> ist deine Arbeitsfläche. Jede </span>**Szene**<span style="white-space: pre-wrap;"> ist ein Baustein (Kachel) mit Text, Medien und Funktionen. Durch </span>**Verbindungen**<span style="white-space: pre-wrap;"> (z. B. QR, Wegpunkt, Button) entsteht ein spielbarer Ablauf.</span>

## Grundbegriffe

- **Szene**: Inhaltlicher Schritt (Text, Bild/Video/Audio, UI-Elemente, Logik).
- **Einstiegsszene**: Startpunkt deines Spiels (grün markiert).
- **Verbindung**: Regel, die zur nächsten Szene führt (z. B. „QR X scannen“).
- **Feature**: Zusatz in einer Szene (z. B. Dialog, Countdown, Foto-Challenge).
- **Variablen/Inventar**: Spiellogik &amp; Fortschritt (Zähler, Flags, Items).

## Arbeiten im Storyboard

1. **Szene anlegen**: Szene aus der Werkzeugleiste aufs Canvas ziehen.
2. **Inhalt bearbeiten**: Doppelklick auf die Kachel → Editor (WYSIWYG).
3. **Funktion hinzufügen**: Feature-Modal öffnen → z. B. Button/QR/Wegpunkt.
4. **Verbindung erstellen**: In der Feature-Maske Zielszene wählen (oder im Canvas ziehen).
5. **Vorschau testen**: „Vorschau“ starten, Abfolge und Logik prüfen.

## Szenentypische Inhalte

- **Text**<span style="white-space: pre-wrap;"> (Handlung/Anweisung), </span>**Bild/Video/Audio**
- **UI-Elemente**: Button, Eingabefeld, Dialog/Chat (DialogV2), Szenenanimation
- **Logik**: Variablen setzen/prüfen, Timer/Countdown, Hinweise
- **Interaktion**: QR-Scan, NFC, Wegpunkte (statisch/dynamisch), Foto-(Challenge|Vergleich)
- **Stil**: Hintergrundfarbe/-bild, benutzerdefiniertes CSS/JS (fortgeschritten)

## Flows modellieren

- **Linear**: A → B → C (klassisch, schnell produziert)
- **Verzweigungen**: Entscheidungen / alternative Wege (Buttons, Variablen)
- **Ortsbasiert**: Szenen zwischen Wegpunkten (Navigation + Story)
- **Sammelaufgaben**: Mehrere Ziele in beliebiger Reihenfolge (Variablen zählen)
- **Zeitbasierte Events**: Countdown löst Fallback/Alarm aus

## Best Practices

- **Szenen kurz halten**<span style="white-space: pre-wrap;"> (Mobile-Lesbarkeit).</span>
- **Eine Aufgabe pro Szene**<span style="white-space: pre-wrap;"> (kognitiv klar).</span>
- **Konsistente Benennung**<span style="white-space: pre-wrap;">: </span>`<span class="editor-theme-code">01_Einstieg</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">10_Bridge</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">99_Ende</span>`.
- **Fehlertoleranz**: Fallbacks (Hinweise, alternative Wege).
- **Testen**<span style="white-space: pre-wrap;"> mit echter Bewegung/Gerät (GPS, Scanner, Audio-Lautstärke).</span>

## Veröffentlichung

- <span style="white-space: pre-wrap;">Inhalte fertigstellen → </span>**Release-Cockpit**<span style="white-space: pre-wrap;"> prüfen (Status, Medien, Standort, Preis/Kalender) → </span>**Publish**.

## FAQ

**Mehrsprachig?**<span style="white-space: pre-wrap;"> Pro Sprache eigene Szenen oder Text-Varianten pflegen.</span>  
**Rätsel „soft-lock“ vermeiden?**<span style="white-space: pre-wrap;"> Hinweise/Skip einbauen (Badge/XP entsprechend werten).</span>