# 🧩 Grundkonzepte

# 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>

# Karten & Wegpunkte

<span style="white-space: pre-wrap;">Karten verbinden deine Story mit der realen Welt. </span>**Wegpunkte**<span style="white-space: pre-wrap;"> markieren Ziele auf der Karte und steuern Fortschritt.</span>

## Wegpunkt-Arten

- **Wegpunkt (statisch)**: Feste Koordinate (Lat/Lng) – ideal für reale Orte/Stationen.
- **Dynamischer Wegpunkt (Locationless)**: Ziel wird relativ zur Spielerlage oder mittels Suche (z. B. „nächste Kirche“) gesetzt.
- **QR/NFC als „Ort“**: Physischer Marker ersetzt GPS-Ankunft.

## Grundworkflow

1. **Startpunkt setzen**<span style="white-space: pre-wrap;"> (Release-Cockpit → Standort).</span>
2. **Wegpunkt-Feature**<span style="white-space: pre-wrap;"> in der Szene hinzufügen:</span>
    - Titel / Beschreibung
    - **Radius**<span style="white-space: pre-wrap;"> (z. B. 30–50 m; Innenstadt kleiner, offenes Gelände größer)</span>
    - <span style="white-space: pre-wrap;">Ggf. </span>**Ankunfts-Aktion**<span style="white-space: pre-wrap;"> (automatisch zur Zielszene springen, Hinweis zeigen)</span>
3. **Zielszene**<span style="white-space: pre-wrap;"> wählen (nach Erreichen).</span>
4. **Test**: Vorschau + reales Gerät (GPS-Genauigkeit, Empfang).

## UX-Tipps

- **Orientierung**: Kurze Anweisung („Gehe zur Brücke, Nordseite“), Bild hilft.
- **Sicherheitszonen**: Keine verbotenen/gefährlichen Bereiche als Ziel.
- **Radius balancieren**: klein = präzise, groß = frustarm; Umfeld entscheidet.
- **Offline-Fähigkeit**: Beschreibungen so formulieren, dass Weg ohne Karte machbar bleibt.

## Dynamische Wegpunkte

- **Anwendungsfälle**: Stadtrallye ab beliebigem Start, spontane Routen.
- **Logik**: Ziel per API/Filter bestimmen → Wegpunkt setzen → Ankunft prüfen.
- **Fallback**: Wenn kein passendes Ziel gefunden → alternative Aufgabe zeigen.

## Zusammenspiel mit QR/NFC

- **Kombination**<span style="white-space: pre-wrap;">: GPS bringt zum Ort, </span>**QR/NFC**<span style="white-space: pre-wrap;"> bestätigt die Station.</span>
- **Anti-Spoofing**: QR/NFC nur am Ort sichtbar/erreichbar platzieren; ggf. Code rotieren.

## Karte &amp; POIs

- **POIs im Release-Cockpit**<span style="white-space: pre-wrap;"> (Parken, Treffpunkt, Einstieg).</span>
- **In-Game Hinweis**: Adresse/Koordinate zusätzlich erwähnen.

## Performance

- **Marker begrenzen**, Cluster nutzen.
- **Bilder komprimieren**<span style="white-space: pre-wrap;"> (Kachel-Overlays, 360°).</span>

## FAQ

**GPS springt?**<span style="white-space: pre-wrap;"> Größeren Radius wählen; hohen Gebäudecanyon beachten.</span>  
**Kein Standortzugriff?**<span style="white-space: pre-wrap;"> Nutzerberechtigung erklären + alternative Hinweise geben.</span>  
**Locationless unscharf?**<span style="white-space: pre-wrap;"> Suchfilter enger fassen oder Mindest-POI-Dichte prüfen.</span>

# Assets & Medien

Medien geben deiner Story Charakter und Lesbarkeit. Nutze sie gezielt und performant.

## Asset-Arten

- **Bilder**: Titelbild, Galerie 1–5, Szenenbilder, Overlays
- **Audio**: Voice-over, Sound-FX, Musik (Wiederholung/lautstärke beachten)
- **Video**: Trailer, Szenen-Clips, eingebettete Sequenzen
- **360°**: Panoramen mit Hotspots (Pannellum-basiert)
- **Dateien**: optionale Downloads (sparsam)

## Anforderungen (Empfehlungen)

- **Bilder**: JPG/WEBP, ≥ 1600 px (Titel 16:9), &lt; 2 MB
- **Audio**: MP3/OGG, 128–192 kbps, mono bei Voice-over
- **Video**: MP4/H.264 oder YouTube-Embed; Trailer 15–60 s
- **360°**: 4k equirectangular, Hotspots dezent

## Titelbild &amp; Galerie

- <span style="white-space: pre-wrap;">Titelbild ist </span>**Pflicht**<span style="white-space: pre-wrap;"> für öffentliche Szenarios (Listen/Karten).</span>
- Galerie zeigt 1–5 zusätzliche Eindrücke (Lightbox).
- **Motivwahl**: hell, kontrastreich, ohne kleinteiligen Text.

## Szenen-Medien

- Über Feature-Modals einfügen (Video/Audio/360°, Hintergrundbild/-farbe).
- **Autoplay dezent**; Nutzerkontrolle priorisieren.
- **Barrierefreiheit**: Untertitel/Transkript bei Voice-over; Alternativtext bei Schlüsselbildern.

## Performance-Tipps

- **Komprimieren**<span style="white-space: pre-wrap;"> (TinyPNG, Squoosh).</span>
- **Lazy-Load**<span style="white-space: pre-wrap;"> in langen Szenen.</span>
- **Wiederverwenden**<span style="white-space: pre-wrap;"> (Asset-Bibliothek statt Mehrfach-Upload).</span>

## Rechte &amp; Sicherheit

- <span style="white-space: pre-wrap;">Nur Medien verwenden, an denen du </span>**Nutzungsrechte**<span style="white-space: pre-wrap;"> hast.</span>
- Keine sensiblen personenbezogenen Inhalte.
- Standortfotos: Privatflächen respektieren.

## 360° Best Practices

- Hotspots klar benennen (Icon + kurzer Text).
- Übergänge zwischen Panoramen mit Pfeilen/Minimap erklären.
- Mobile-Handhabung prüfen (Gyro/Touch).

## Audio Best Practices

- <span style="white-space: pre-wrap;">Lautstärke auf </span>**-16 LUFS**<span style="white-space: pre-wrap;"> (Sprachcontent) normalisieren.</span>
- Musik geloopt? Weicher Loop-Punkt.
- In Außenumgebung: kurze Schnipsel statt Dauerbeschallung.

## Trailer (YouTube)

- <span style="white-space: pre-wrap;">11-stellige ID eintragen, </span>**öffentlich**/„nicht gelistet“.
- <span style="white-space: pre-wrap;">Hook in den ersten </span>**3–5 Sekunden**.
- Untertitel aktivieren.

## FAQ

**Bilder wirken pixelig?**<span style="white-space: pre-wrap;"> Größere Auflösung hochladen, korrektes Seitenverhältnis.</span>  
**Video startet nicht?**<span style="white-space: pre-wrap;"> Mobile Autoplay-Regeln → Nutzerinteraktion verlangen.</span>  
**Audio zu leise?**<span style="white-space: pre-wrap;"> Normalisieren, Headroom prüfen, kein extremes Low-Cut.</span>