# Storyboard
Storyboard-Doku – kompakte, praxisnahe Dokumentation für das scenario.app-Storyboard. Dieses Buch bündelt Grundlagen, Features, Best Practices und Betrieb – klar strukturiert, durchsuchbar und teamtauglich.
Inhalte:
- Einführung: Ziele, Begriffe, Schnellstart
- Grundkonzepte: Szenen, Verbindungen, Karte & Wegpunkte, Medien
- Editor & UI: Oberfläche, Design/Branding, Internationalisierung, Templates
- Features: Waypoint, Pano360, Dialog V2, Embedded Audio/Video, QR/NFC, PhotoCompare, Gamification, Compiler/Runtime
- Hacks & Tipps: CSS/JS-Snippets, Performance, Debugging
- API & Backend: WordPress-Integration, PHP-API, Stripe/Webhooks, Lizenzen
- Deployment & Betrieb: Konfiguration, Backups, Monitoring, Changelog
- FAQ & Troubleshooting: Häufige Fragen & typische Fehlerbilder
So nutzt du die Doku: 1) Einführung lesen, 2) gewünschtes Feature nachschlagen, 3) Hacks übernehmen, 4) Betrieb & Updates beachten. Hinweis: Einige Seiten sind Platzhalter und werden laufend ergänzt. Mitarbeit willkommen – kurze, konkrete Beispiele und Screenshots helfen dem ganzen Team.
# 📘Einführung
# Storyboard-Doku – Start & Inhaltsverzeichnis
> **Kurz gesagt:** Diese Doku zeigt dir, wie du mit dem Storyboard von **scenario.app** interaktive Erlebnisse baust – von der ersten Szene bis zum Release.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/grafik.png)
Das **Storyboard** ist der visuelle Editor hinter scenario.app. Du erstellst damit Szenen, verknüpfst Orte, Medien & Logik und kompilierst alles zu einem spielbaren Erlebnis (App/Web).Ideal für **Tourismus**, **Education**, **Events**, **Escape-/Rallye-Games** und **Location-based Storytelling**.
**Highlights**
- Szenen & Verzweigungen grafisch denken
- Karten & Wegpunkte (statisch + dynamisch)
- Medien nahtlos einbinden (Bild, Audio, Video)
- Feature-Bausteine: Waypoint, Pano360, Dialog V2, Embedded Audio/Video u. v. m.
- Compiler & Runtime rein in JavaScript – schnell, portabel, offline-tauglich
---
## Für wen ist diese Doku?
- **Creator:innen** – die schnell produktiv werden wollen
- **Teams/Orgs** – die Standards, Workflows & Qualität sichern möchten
- **Dev-Nerds** – die tiefer in Compiler/Runtime, API & Deployment einsteigen
---
## So nutzt du diese Doku
1. **Schnellstart** lesen → erstes Mini-Projekt bauen.
2. **Grundkonzepte** verstehen → Szenen, Karten, Assets.
3. **Features** gezielt nachschlagen → Waypoint, Pano360, Dialog V2 etc.
4. **Hacks & Tipps** für Feinschliff & Performance.
5. **API & Backend** nutzen, wenn du integrierst/automatisierst.
---
# Schnellstart
# In 10 Sekunden zur ersten Szene
> Dieser Quick-Start führt dich vom Login bis zur **laufenden Vorschau**.
> Du brauchst nur einen Account für **storyboard.scenario.app**.
---
## 1) Anmelden & Projekt öffnen
1. Öffne **storyboard.scenario.app** und logge dich ein.
2. Wähle ein vorhandenes Projekt **oder** erstelle ein neues.
**Optional:** Lege dir eine leere Arbeitsfläche („Canvas“) bereit, damit du die erste Szene frei platzieren kannst.
---
## 2) Erste Szene anlegen
1. **Szene** aus der linken Leiste **auf das Canvas ziehen**.
2. Benenne die Szene (z. B. „Start“).
3. **Doppelklick** auf den **Vorschaubereich** der Kachel → der **WYSIWYG-Editor** öffnet sich.
4. Fülle **Titel**, **Text**, optional **Medien** (Bild, Audio, Video) aus.
5. **Speichern**.
Tipp: Halte Szenennamen kurz & sprechend – z. B. `Start`, `Brücke`, `Fundort_Tag`. Die erste Szene muss immer `[[Start]]`heißen.
---
## 3) Inhalte bearbeiten (WYSIWYG)
- Der **Vorschaubereich** in der Kachel zeigt dir sofort den Stand.
- Im Editor kannst du Formatierungen, Bilder, Audio/Video, Buttons etc. nutzen.
- Über **⌘/Ctrl + Z** rückgängig, **⌘/Ctrl + S** speichert.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/5k9grafik.png)
## 4) Szenen verbinden (Logik & Navigation)
Du kannst Szenen per **Funktion** miteinander verknüpfen – einfach **+** Button innerhalb der Kachel klicken.
**Typische Verbindungen:**
- **QR-Code:** Spielende scannen vor Ort einen Code → nächste Szene.
- **Waypoint (Geo):** Eintritt in einen **Standort-Radius** schaltet die nächste Szene frei.
- **Dialog/Buttons:** Aus der Szene heraus per Button weiterleiten.
- **Zeit/Ereignis:** Verzögertes Freischalten, Hinweise, Inventar-Bedingungen.
[](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 & Extras
- **Bilder** (Poster), **Audio** (SFX, Voice), **Video** (mp4/YouTube) direkt an Szenen binden.
- Für **360°**, **Dialog V2**, **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. Rechts oben **„Vorschau“** starten.
2. Durch den Flow klicken **oder** QR/Waypoint-Bedingungen mit den Test-Tools simulieren.
3. Ergebnisse notieren, Anpassungen vornehmen, erneut testen.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/HJkgrafik.png)
---
## Mini-Cheat-Sheet
- **Drag & Drop**: Kacheln frei anordnen; mit Zoom/Fullscreen den Überblick behalten.
- **Doppelklick** auf Kachel-Vorschau: Szene im WYSIWYG öffnen.
- **Verbindungen**: Über die Funktionsliste hinzufügen oder bearbeiten.
- **Speichern**: **⌘/Ctrl + S**.
- **Rückgängig/Wiederholen**: **⌘/Ctrl + Z** / **⌘/Ctrl + Shift + Z**.
---
## Häufige Fragen (kurz)
**Nichts passiert in der Vorschau?**
→ Prüfe, ob eine **Verbindung** zur nächsten Szene existiert und ob Bedingungen (QR/Waypoint) **erfüllt** werden.
**Waypoint triggert nicht?**
→ Radius groß genug? Test-Position in der Vorschau korrekt gesetzt?
**QR führt ins Leere?**
→ Richtigen **Ziel-Knoten** gewählt? Szene veröffentlicht/gespeichert?
---
## Nächste Schritte
- **Grundkonzepte** lesen (Szenen, Karte & Wegpunkte, Medien).
- **Features** im Detail durcharbeiten (Waypoint, QR, Dialog V2, 360°, Embedded Audio/Video).
- **Hacks & Tipps** für Performance und Feinschliff übernehmen.
# Begriffe & Glossar
Schnelles Nachschlagen zentraler Begriffe rund um das scenario.app-Storyboard.
## Grundbegriffe
**Projekt**
Container für alle Inhalte (Szenen, Medien, Einstellungen) eines Spiels/Erlebnisses.
**Canvas**
Arbeitsfläche, auf der du **Szenen** als Kacheln platzierst und verbindest.
**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 & 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 & 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**
Zustände im Spiel (z. B. `hasKey=true`). 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**
Virtuelle Position in der **Vorschau**, um Waypoints ohne GPS vor Ort zu testen.
---
## Codes & 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 & 360°
**Dialog V2**
Sequenzieller Dialog mit Rollen, Avatar, Farben und Verzweigungen.
**Pano360**
360-Grad-Bild/Scene mit Hotspots. Unterstützt Navigations-/Info-Hotspots.
---
## Gamification & Inventar
**Punkte & 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 & Release
**Build / Release**
Erzeugtes Paket aus dem Compiler, das veröffentlicht/getestet werden kann.
**Debug-Modus**
Erweiterte Protokolle & UI zum Fehlersuchen in Vorschau/Laufzeit.
**Changelog**
Dokumentierte Änderungen pro Version (Features, Fixes, Breaking Changes).
---
## Administration
**Rollen & Rechte**
Zugriffskontrolle für Bearbeiten, Veröffentlichen, Admin-Funktionen.
**Organisation**
Team/Unternehmen mit Lizenz, Nutzern, Projekten und ggf. Abrechnung.
---
## Abkürzungen
- **QR** – Quick Response Code
- **NFC** – Near Field Communication
- **GPS** – Global Positioning System
- **i18n** – Internationalization (Internationalisierung)
- **CI** – Corporate Identity (Branding/Design)
- **UX/UI** – User Experience / User Interface
---
## Konventionen (Empfehlungen)
- **Szenennamen:** kurz & eindeutig, z. B. `Start`, `Bruecke_Nacht`, `Station_01`.
- **Medien:** web-optimiert, sprechende Dateinamen (`station01_poster.webp`).
- **Farben/Design:** zentral definieren (CI), nicht pro Szene neu erfinden.
- **Verbindungen:** lieber **kurze Pfade** + häufig testen, statt lange Ketten.
---
## Siehe auch
\[\[Schnellstart\]\] • \[\[Szenen & Storyboard\]\] • \[\[Karten & Wegpunkte\]\] • \[\[Features/Waypoint\]\] • \[\[Features/QR & NFC\]\] • \[\[Hacks & Tipps\]\]
# 🧩 Grundkonzepte
# Szenen & Storyboard
Das **Storyboard** ist deine Arbeitsfläche. Jede **Szene** ist ein Baustein (Kachel) mit Text, Medien und Funktionen. Durch **Verbindungen** (z. B. QR, Wegpunkt, Button) entsteht ein spielbarer Ablauf.
## 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 & 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** (Handlung/Anweisung), **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** (Mobile-Lesbarkeit).
- **Eine Aufgabe pro Szene** (kognitiv klar).
- **Konsistente Benennung**: `01_Einstieg`, `10_Bridge`, `99_Ende`.
- **Fehlertoleranz**: Fallbacks (Hinweise, alternative Wege).
- **Testen** mit echter Bewegung/Gerät (GPS, Scanner, Audio-Lautstärke).
## Veröffentlichung
- Inhalte fertigstellen → **Release-Cockpit** prüfen (Status, Medien, Standort, Preis/Kalender) → **Publish**.
## FAQ
**Mehrsprachig?** Pro Sprache eigene Szenen oder Text-Varianten pflegen.
**Rätsel „soft-lock“ vermeiden?** Hinweise/Skip einbauen (Badge/XP entsprechend werten).
# Karten & Wegpunkte
Karten verbinden deine Story mit der realen Welt. **Wegpunkte** markieren Ziele auf der Karte und steuern Fortschritt.
## 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** (Release-Cockpit → Standort).
2. **Wegpunkt-Feature** in der Szene hinzufügen:
- Titel / Beschreibung
- **Radius** (z. B. 30–50 m; Innenstadt kleiner, offenes Gelände größer)
- Ggf. **Ankunfts-Aktion** (automatisch zur Zielszene springen, Hinweis zeigen)
3. **Zielszene** wählen (nach Erreichen).
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**: GPS bringt zum Ort, **QR/NFC** bestätigt die Station.
- **Anti-Spoofing**: QR/NFC nur am Ort sichtbar/erreichbar platzieren; ggf. Code rotieren.
## Karte & POIs
- **POIs im Release-Cockpit** (Parken, Treffpunkt, Einstieg).
- **In-Game Hinweis**: Adresse/Koordinate zusätzlich erwähnen.
## Performance
- **Marker begrenzen**, Cluster nutzen.
- **Bilder komprimieren** (Kachel-Overlays, 360°).
## FAQ
**GPS springt?** Größeren Radius wählen; hohen Gebäudecanyon beachten.
**Kein Standortzugriff?** Nutzerberechtigung erklären + alternative Hinweise geben.
**Locationless unscharf?** Suchfilter enger fassen oder Mindest-POI-Dichte prüfen.
# 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), < 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 & Galerie
- Titelbild ist **Pflicht** für öffentliche Szenarios (Listen/Karten).
- 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** (TinyPNG, Squoosh).
- **Lazy-Load** in langen Szenen.
- **Wiederverwenden** (Asset-Bibliothek statt Mehrfach-Upload).
## Rechte & Sicherheit
- Nur Medien verwenden, an denen du **Nutzungsrechte** hast.
- 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
- Lautstärke auf **-16 LUFS** (Sprachcontent) normalisieren.
- Musik geloopt? Weicher Loop-Punkt.
- In Außenumgebung: kurze Schnipsel statt Dauerbeschallung.
## Trailer (YouTube)
- 11-stellige ID eintragen, **öffentlich**/„nicht gelistet“.
- Hook in den ersten **3–5 Sekunden**.
- Untertitel aktivieren.
## FAQ
**Bilder wirken pixelig?** Größere Auflösung hochladen, korrektes Seitenverhältnis.
**Video startet nicht?** Mobile Autoplay-Regeln → Nutzerinteraktion verlangen.
**Audio zu leise?** Normalisieren, Headroom prüfen, kein extremes Low-Cut.
# 🎨 Editor & UI
# Oberfläche
Die **Storyboard-Oberfläche** ist deine Leinwand für Szenen, Logik und Medien. Hier erstellst du Flows, verzweigst Entscheidungen und startest die Vorschau.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/7Zngrafik.png)
## 1) Kopfbereich
- **Breadcrumb / Projekttitel (links)**
Zeigt den aktuellen Pfad/Projektnamen.
**Tipp:** Den Text einfach **anklicken und direkt eintippen** → das ist dein **Spieltitel**.
- **Werkzeug-Icons (rechts, projektweit)**
Je nach Plan/Rolle u. a.: Styles/Theme, Projekteinstellungen, Medien/Dateien, Analytics.
- **Vorschau (blauer Button)**
Startet die Live-Preview des aktuellen Stands.
---
## 2) Arbeitsfläche (Leinwand)
- Freies **Drag-&-Drop**-Canvas zum Platzieren und Ordnen deiner **Karten**:
- **Szenen** (Inhalte & Features)
- **Master / Globale Sektion**`[[ ]]` (einmalig)
- **Bedingungen** (Verzweigungen)
- **Spielende**`[[End]]` (einmalig)
- **Notizen** (gelbe Zettel, rein redaktionell)
- Reihenfolge und Abstand dienen nur der Übersicht; die **Logik entsteht durch Verknüpfungen** (Buttons, Wegpunkte, etc.).
---
## 3) Floating-Dock (unten, mittig)
Von **links nach rechts**:
1. **Neue Szene** – Beliebig oft. Normale Content-Szene mit Features.
2. **Master / Globale Sektion `[[ ]]`** – **Einmal pro Projekt**. Enthält globale Elemente (z. B. Stylesheets, Masterszene-JS, Funktionen). Wirkt szenenübergreifend.
3. **Bedingung** – Logik-Knoten, der anhand von Variablen/Inventar/Status **verzweigt** (z. B. „wenn Schlüssel → A, sonst → B“).
4. **Spielende `[[End]]`** – **Einmal pro Projekt**. Markiert das Ende/den Abschluss.
5. **Notiz** – Gelber Zettel für Hinweise/To-dos. Hat keinen Einfluss aufs Spiel.
---
## 4) Ansicht & Navigation (unten rechts)
- **Lupe / + / –** → Suche & Zoom.
- **„Fit to screen“** → Alles einpassen/zentrieren.
- **Vollbild** → Arbeitsfläche maximieren.
---
## 5) Statusleiste (ganz unten)
- Projekt-/Build-Infos, Copyright.
- **Systemstatus**: API/Compiler **Online/Offline**.
- Quelle (z. B. **lokal**) & Lizenz.
---
## 6) Typische Aktionen
- **Szenen anlegen** über das Dock, per Drag-&-Drop positionieren.
- **Öffnen/Bearbeiten**: Karte anklicken → Szenen-Editor (Features: Wegpunkt, QR/NFC, Dialog, Medien, Inventar, Variablen, Hinweise, Countdown, Team-Sync …).
- **Verknüpfen**: In Szenen Buttons/Zielszene setzen oder Trigger (Wegpunkt, QR/NFC) konfigurieren.
- **Vorschau** jederzeit starten, um den Flow zu testen.
---
## 7) Praktische Hinweise
- **Projekttitel** schnell ändern: **Breadcrumb-Text anklicken und direkt tippen**.
- **Ordnung**: Benenne Szenen sprechend („01-Intro“, „20-Rätsel-Brücke“, „99-Ende“).
- **Global denken**: Stylesheets & Masterszene-JS wirken **überall** – sparsam, mit Klassen arbeiten.
- **Testen**: Regelmäßig Vorschau nutzen; Entscheidungswege und Fallbacks prüfen.
- **Team-Flows**: Bei individuellen Schritten **Team-Sync deaktivieren** (Feature in der Szene), anschließend wieder zusammenführen.
---
## 8) Mini-Shortcuts
- **Drag-&-Drop**: Karten verschieben, sauber ausrichten.
- **Zoom**: Strg/Cmd + Mausrad (oder Buttons).
- **Fit**: „Alles einpassen“ klick → Überblick zurück.
---
**Merke:** Kopfzeile = **Projekt & Vorschau**, Arbeitsfläche = **Story planen**, Floating-Dock = **Bausteine anlegen**, Statusleiste = **Gesundheitscheck**. So behältst du Struktur und kommst schnell von der Idee zur spielbaren Szene.
# Vorschau
# Was du hier alles testen kannst
Die **Vorschau** zeigt deine Story **wie in der App**, direkt im Browser. Links läuft das Spiel im Smartphone-Frame, rechts hast du **Quicklinks** zum gezielten Testen einzelner Trigger.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/vaOgrafik.png)
---
## Grundbedienung
- **Start / Schließen** (oben rechts im Frame) – Vorschau starten bzw. beenden.
- **Live-Reload**: Speichere eine Szene im Editor → die Vorschau lässt sich sofort neu starten.
---
## Quicklinks (rechte Spalte)
Hier kannst du typische Sensor-/Ortsaktionen **simulieren**, ohne vor Ort zu sein:
- **Wegpunkt → „Gehe zu“**
Simuliert, dass du den Wegpunkt erreichst (innerhalb des Radius). So prüfst du **Autoselect** und Folgeszenen.
- **QR-Code → „Scannen“**
Löst einen Scan mit dem hinterlegten **Wert** aus (praktisch für Testlauf ohne Kamera).
- (falls vorhanden) **Weitere Trigger** erscheinen analog – du kannst sie gezielt abfeuern und den Flow prüfen.
> Die Quicklinks sind rein fürs Testen – sie sind in der echten App **nicht sichtbar**.
---
## UI & Funktionen im Phone-Frame
Unten im Spiel-UI findest du – je nach Projekt – u. a.:
- **Karte / Ziele** – öffnet die Map mit Wegpunkten.
- **Hinweise** – kleines Badge zeigt neue Hinweise/Lösung an (zeitgesteuert testbar).
- **Inventar** – Gegenstände ansehen (Bilder **zoombar**).
- **Hilfe/Info** – projektspezifische Hilfe.
- **Menü (…)** – weitere Aktionen (z. B. Einstellungen, Neustart – abhängig vom Projekt).
Alles verhält sich wie auf dem Gerät: Dialoge, Buttons, Eingabefelder, Medien (Audio/Video), Hotspots, Foto-/Fotovergleich-Flows etc.
---
## Was du in der Vorschau besonders gut testen kannst
- **Szenenfluss & Übergänge** (In/Out-Transitions).
- **Bedingungen** (Variablen, Inventar-Checks, Pfadverzweigungen).
- **Wegpunkt-Logik** (Autoselect vs. manuell) via **„Gehe zu“**.
- **QR-/NFC-Ersatztests** (QR über Quicklink; NFC lässt sich in der Vorschau i. d. R. nicht real scannen).
- **Hinweise & Countdown** (Zeitpunkte, Texte).
- **Audio/Video** inkl. **End-Buttons** und **Fallback-Szenen**.
- **Team-Sync deaktivieren**: Prüfe, ob eine Szene **lokal** bleibt und die nächste wieder synchronisiert.
---
## Grenzen der Browser-Vorschau
- **GPS/Kompass** werden nicht real genutzt – nutze dafür die **Quicklinks**.
- **Kamera/NFC** nur eingeschränkt/gar nicht verfügbar (QR per Quicklink testbar).
- Geräte-Eigenheiten (Leistung, Displaygröße, Autoplay-Richtlinien) können abweichen – am Ende **immer auf einem echten Gerät** testen.
---
## Tipp
Wenn du schnell zu einer Szene springen willst, setze dort **temporär** einen Button „Zur Szene X“ oder nutze Quicklinks für die relevanten Trigger. So iterierst du rasch an Texten, Farben, Übergängen und Logik.
# 🧰 Features
Hier findest du **alle Bausteine des Storyboards** – von Orten & Triggern (Wegpunkte, QR/NFC) über Interaktionen und Medien (Dialog, Eingabe, Foto, Audio/Video) bis zu Layout & Logik (Hintergründe, Hotspots, Inventar, Variablen, Hinweise, Countdown, Team-Sync). Zu jedem Feature: Felder, App-Verhalten und Praxis-Tipps.
# Wegpunkt (Map Waypoint)
Mit dem **Wegpunkt**-Feature platzierst du einen Punkt auf der Karte, der – je nach Einstellung – eine Szene öffnet oder leise im Hintergrund als „Proximity-Trigger“ arbeitet.
---
### Felder & Optionen
**Karte & Marker**
- **Marker ziehen/klicken**: Setze die Position direkt in der Karte.
- **Aktuelle Position verwenden**: Übernimmt deine Gerätestandort-Koordinaten.
**Breitengrad / Längengrad**
- Exakte GPS-Koordinaten des Wegpunkts. Du kannst sie manuell eintragen oder aus der Karte übernehmen.
**Zielszene**
- Szene, die beim Auslösen geöffnet wird.
**Popup-Text**
- Kurzer Text, der im Spiel im Karten-Popup erscheint (z. B. „Gehe hierhin und tippe!“ oder Zusatzinfos).
**Radius (Meter)**
- Entfernung, in der der Wegpunkt „erreicht“ gilt.
- Typische Werte: **7-15 m** in Städten, **20–30 m** in freiem Gelände.
**Unsichtbar?**
- Ist aktiv, **wird der Marker nicht auf der Karte angezeigt**.
- Der Wegpunkt wird bei erreichen automatisch ausgelöst. Autoselect nicht erforderlich.
**Automatisch ausgewählt?**
- **An**: Die Zielszene wird **automatisch** geöffnet, sobald die Spielenden **in den Radius** kommen (kein Tippen nötig).
- **Aus**: Die Spielenden müssen den **Marker manuell auf der Karte auswählen**.> Hinweis: Bei **unsichtbaren** Wegpunkten ist dieser Punkt nicht notwendig.
---
### Verhalten in der App
1. **Sichtbarer Marker, Auto-Select AN**
- Betritt das Team den Radius, **öffnet** sich die **Zielszene sofort**.
- Das Popup ist optional – oft wird gar nicht mehr getippt.
2. **Sichtbarer Marker, Auto-Select AUS**
- Der Marker ist auf der Karte sichtbar.
3. **Unsichtbarer Marker, Auto-Select AN**
- Kein Marker auf der Karte.
- **Silent Trigger**: Beim Betreten des Radius öffnet sich die Zielszene automatisch. Ideal für Überraschungen oder „geheime“ Punkte.
---
## Erstellen aus der Toolbox (scenario.app)
[](https://docs.scenario.app/uploads/images/gallery/2025-09/2iAgrafik.png)Wegpunkte lassen sich **direkt aus den Aufzeichnungen** der **Toolbox** in **scenario.app** erzeugen:
- Szenenkachel -> Funktion hinzufügen -> Spot aus Toolbox
- Wähle einen Punkt aus und **„Als Wegpunkt übernehmen“**.
Die **Koordinaten** werden automatisch **vorbefüllt** – du ergänzt nur noch Radius, Zielszene, Sichtbarkeit etc.
---
## Praxis-Tipps
- **Radius passend wählen**:
- Innenstadt: 7–15 m, damit es nicht zufällig auslöst.
- Park/Wald: 20–30 m, um GPS-Schwankungen abzufangen.
- **Unsichtbar + Auto-Select** für unerwartete Ereignisse („Story-Beat“).
- **Sichtbar + Auto-Select AUS** für klare Navigation: Spielende sehen das Ziel und müssen es bewusst antippen.
- **Popup-Text** kurz und call-to-action-artig halten („Tippe hier, um die Aufgabe zu starten“).
- **Kein GPS?** Plane Alternativen (QR/NFC) oder großzügigere Radien bei schwieriger Empfangslage.
---
## Häufige Fragen
**Was passiert, wenn ich Auto-Select aktiviere und die Zielszene fehlt?**
Es wird keine Szene geöffnet. Nutze in diesem Fall besser Auto-Select **aus** (Info-Marker) oder füge eine Zielszene hinzu.
**Kann ich Wegpunkte nur mit der Karte setzen?**
Nein. Du kannst Koordinaten **manuell** eintragen oder **aus Toolbox-Aufzeichnungen** übernehmen.
**Löst ein Wegpunkt auch aus, wenn er unsichtbar ist?**
Ja – immer. Egal ob **Auto-Select** aktiv ist oder nicht **und** das Team im **Radius** steht.
---
## Kurz-Anleitung
1. **Wegpunkt hinzufügen** → Marker auf Karte setzen oder **Aktuelle Position** nutzen.
2. **Zielszene** wählen (optional leer lassen für Info-Punkt).
3. **Popup-Text** (optional) eintragen.
4. **Radius** festlegen.
5. Sichtbarkeit & **Auto-Select** gemäß gewünschtem Verhalten setzen.
6. Speichern – fertig.
So steuerst du präzise, **wann** und **wie** Spielende Inhalte entdecken: sichtbar & interaktiv oder unsichtbar & automatisch.
# Wegpunkt (dynamisch)
### Dynamischer OSM-Wegpunkt
Der **dynamische Wegpunkt** sucht zur **Laufzeit im Spiel** nach echten Objekten in der Nähe (aus **OpenStreetMap**, kurz *OSM*). So kannst du Aufgaben wie „Finde eine **Bushaltestelle** in 400 m“ bauen – ohne die exakten Koordinaten vorher zu kennen. Falls im Suchradius **nichts gefunden** wird, greift ein **Fallback-Ziel** (projektiert aus der aktuellen Spielerposition).
- Wähle eine Preset-Kategorie (z. B. **Bushaltestelle**, **Bäckerei**, **Trinkwasser**, **Bankautomat** …).
- Alternativ kannst du rechts ein eigenes **OSM-Tag** eintragen, z. B. `amenity=drinking_water` oder `shop=bakery`.
- Es wird das **nächstgelegene** passende OSM-Objekt im Suchbereich verwendet.
**Suchradius OSM (m)**
- Umkreis, in dem gesucht wird (vom **aktuellen Spielerstandort** aus).
- Je größer, desto höher die Trefferchance – aber ggf. längerer Weg.
**Titel (Popup)**
- Text für das Karten-Popup des **gefundenen** Ziels (z. B. „Ziel in deiner Nähe“).
**Ankunfts-Radius (m)**
- Abstand, in dem das Ziel als **erreicht** gilt.
**Typ**
- **Sichtbar**: Marker ist auf der Karte sichtbar.
- **Unsichtbar**: Kein Marker – ideal für „Silent-Trigger“ in Kombination mit Autoselect.
**Autoselect**
- **Ja**: Zielszene öffnet **automatisch**, sobald Spielende im **Ankunfts-Radius** sind.
- **Nein**: Spielende müssen den Marker **manuell** antippen (nur sinnvoll bei **sichtbar**).
---
- Erzeugt ein **projektiertes Ziel** in der gewählten Richtung (**N, NE, E, …**) und Entfernung.
- Bezugspunkt ist die **momentane Spielerposition** beim Erstellen des Ziels.
- Wenn verfügbar, werden projzierte Ziele immer auf Straßen oder Wege gelegt.
**Fallback-Titel**
- Popup-Text des **projektierten** Ziels (z. B. „Projiziertes Ziel“).
**Zielszene**
- Szene, die beim Erreichen (OSM-Treffer **oder** Fallback) geöffnet wird.
- Lässt du die Zielszene leer, fungiert der Punkt nur als Info-/Navigationsziel.
---
## Verhalten in der App
Für die Projektion von Wegpunkten aus der OSM Datenbank ist eine Internetverbindung erforderlich!
1. **Ermitteln des Ziels**
- Beim Betreten der Szene wird über OSM das **nächstgelegene Objekt** zur gewählten Kategorie im **Suchradius** gesucht.
- Wird **etwas gefunden**, wird dieses Objekt als Ziel gesetzt (Marker an dessen Koordinate, Popup-Titel wie oben).
- Wird **nichts gefunden**, erstellt das Spiel **sofort** das **Fallback-Ziel** in der gewählten Richtung und Distanz.
2. **Navigation & Auslösen**
- **Sichtbar + Autoselect = Ja**: Betritt das Team den **Ankunfts-Radius**, öffnet sich die **Zielszene automatisch**.
- **Sichtbar + Autoselect = Nein**: Marker muss **angetippt** werden (nur innerhalb des Ankunfts-Radius „aktiv“).
- **Unsichtbar + Autoselect = Ja**: **Silent-Trigger** ohne Markeranzeige.
- **Unsichtbar + Autoselect = Nein**: Nicht empfohlen (kein klickbares Ziel).
3. **Bewegung & Aktualisierung**
- Das Ziel wird **beim Erzeugen** festgelegt und anschließend **beibehalten**, damit alle im Team zum **gleichen** Ziel laufen.
4. **Offline-/Datenlage**
- Für die OSM-Suche ist **Netzverbindung** nötig. Ohne Treffer oder ohne Internet greift **sofort** der **Fallback**.
---
## Praxis-Tipps
- **Trefferqualität**: Wähle präzise `key=value`-Tags (z. B. `amenity=drinking_water`) statt zu allgemeiner Kategorien.
- **Suchradius**: Stadt: 200–400 m, ländlich: 400–800 m.
- **Ankunfts-Radius** großzügig wählen (10–30 m Stadt, 20–50 m Gelände), um GPS-Drift abzufangen.
- **Unsichtbar + Autoselect** für Überraschungen; **sichtbar + manuell** für bewusstes Interagieren.
- **Fallback** so setzen, dass er **spielbar** bleibt (keine Privatgrundstücke, Gewässer etc.).
- **Team-Konsistenz**: Ziele werden nach der ersten Bestimmung **fixiert**, damit alle dasselbe Ziel sehen.
---
### OSM-Kategorien für dynamische Wegpunkte
Damit der **dynamische Wegpunkt** ein passendes Ziel findet, muss eine **OSM-Kategorie** gewählt werden. Diese basiert auf den sogenannten **Tags** von [https://wiki.openstreetmap.org/wiki/Map\_features](https://wiki.openstreetmap.org/wiki/Map_features).
---
### Häufig genutzte `key=value` Beispiele
#### Infrastruktur & Transport
#### Vollständige Liste
Eine ausführliche Übersicht aller OSM-Tags findest du hier:
[https://wiki.openstreetmap.org/wiki/Map\_features](https://wiki.openstreetmap.org/wiki/Map_features "OSM Map Wiki")
---
### Tipp
- Du kannst **einfach eine Preset-Kategorie wählen** (z. B. Bushaltestelle).
- Oder du trägst direkt ein **Tag im Format `key=value`** ein (z. B. `amenity=drinking_water`).
- Je präziser der Wert, desto **genauer die Treffer** im Spiel.
So entstehen ortsabhängige Aufgaben, die sich **an echte Umgebung** anpassen – inklusive robuster **Fallback-Navigation**, falls vor Ort kein passendes OSM-Objekt existiert.
# 360° / Foto Hotspot-Editor
Mit dem **Hotspot-Editor** platzierst du klickbare Punkte direkt in einem **360°-Panorama** oder **normalen Foto**. Hotspots können Szenen öffnen, Infos zeigen oder eigenes JS ausführen.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/JLcgrafik.png)
## Bild & View
- **Bild-URL / Bild wählen**
Wähle ein 360°-Bild (equirectangular) oder ein normales Foto. Upload über die Medienauswahl ist möglich.
- **HFOV**
„Horizontal Field of View“ – Zoomstufe der Startansicht (z. B. **100**).
- **Kompass (Ja/Nein)**
Blendet einen Kompass/Heading-Indikator ein.
**Tipp:** Das Kreuz **„Hier Hotspot erstellen“** setzt einen neuen Hotspot an der angeklickten Stelle.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/XtXgrafik.png)
## Hotspot bearbeiten
**Label**
Beschriftung (z. B. „Weiter“, „Info“).
**Typ**
- **Button** – Rechteckiger Button mit Text.
- (Weitere Typen – z. B. Icon/Point – falls in deinem Projekt aktiv – verhalten sich entsprechend.)
**CSS-Klasse**
Optionale Klasse zur Feinstilierung (z. B. `hs-primary`, eigenes Theme).
**Yaw / Pitch**
Exakte Ausrichtung des Hotspots (horizontale/vertikale Winkel). Diese Werte werden beim Platzieren automatisch gesetzt und können feinjustiert werden.
**Zielszene (optional)**
Szene, die beim Klick geöffnet wird. Leer lassen = **keine Navigation** (nur Popup/JS).
**Farben & Stil**
- **Text/Icon-Farbe**
- **Hintergrund** (z. B. `rgba(0,0,0,.5)` für halbtransparent)
- **Border-Farbe**
- **Schriftgröße**, **Radius**, **Padding**
**Popup verwenden**
Zeigt beim Klick ein kleines Popup (Titel/Label). In der Vorschau mit **Shift-Klick** testen.
**onClick JS (optional)**
Eigener JavaScript-Code, der beim Klick ausgeführt wird
(z. B. `console.log('clicked')`, Tracking, komplexe Logik).
> Für Standard-Navigation **nicht nötig** – dafür reicht die Zielszene.
**Editor-Shortcuts**
- **Alt-Klick**: onClick-JS sofort testen (im Editor).
- **Shift-Klick**: Popup-Vorschau öffnen.
---
## Verhalten in der App
- Hotspots liegen **über** dem 360°/Foto und folgen der Perspektive.
- Klick/Tap auf den Hotspot:
1. führt **onClick JS** aus (falls vorhanden),
2. öffnet optional das **Popup**,
3. navigiert – wenn gesetzt – in die **Zielszene**.
- Kompass und Start-HFOV werden aus den Einstellungen übernommen.
---
## Praxis-Tipps
- **Assets**: 360° equirectangular **2:1** (z. B. 4096×2048). Normale Fotos gern 1920 px Breite+.
- **Lesbarkeit**: Halbtransparente Hintergründe (`rgba`) und ausreichender Kontrast.
- **Fokus**: Wichtige Hotspots nicht zu nah am Zenith/Nadir (starke Verzerrung).
- **Mobile UX**: Wenige, klare Hotspots; Abstand zwischen Hotspots für Touch-Ziele.
- **Navigation**: Für „Weiter“-Ketten reicht **Zielszene** – JS nur bei Sonderfällen.
- **Testing**: HFOV & Startblick einmal am Gerät prüfen; ggf. Yaw/Pitch leicht nachstellen.
---
## Kurz-Workflow
1. **Bild wählen** → **HFOV/Kompass** setzen.
2. Im Viewer **„Hier Hotspot erstellen“** klicken.
3. **Label**, **Typ**, **Zielszene** (optional) und **Stil** einstellen.
4. (Optional) **Popup** aktivieren oder **onClick JS** hinterlegen.
5. **Übernehmen** → weitere Hotspots hinzufügen → **Speichern**.
# Dialog V2 – Chat
**Dialog V2** simuliert einen echten Chat-Verlauf zwischen frei definierbaren **Charakteren** – mit Tipp-Indikator, Pausen, Bildern und Audio. Ideal für Story-Beats, Hinweise „aus dem Off“ oder kurze Gespräche, die sich natürlich anfühlen.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/UR4grafik.png)
## Editor-Aufbau
**Linke Spalte – Charaktere**
- **Neu**: Charakter anlegen.
- Pro Charakter:
- **Name**
- **Avatar** (Medienbibliothek/Upload)
- **Sprechblasen-Farbe** (Bubble)
- **Textfarbe**
- **Seite**: **links** / **rechts**
> Charaktere kannst du mehrmals in der Sequenz verwenden; Stil & Seite kommen automatisch mit.
**Rechte Spalte – Nachrichten-Sequenz**
- Zeitliche Abfolge des Chats.
- Über **„Neue Nachricht“** fügst du Bausteine hinzu:
1. **text** – Chatnachricht (Emoji & einfache Formatierung erlaubt)
2. **image** – Bild (öffnet sich antippbar in groß)
3. **audio** – MP3 mit kleinem Player
4. **typing** ***Xms*** – Tipp-Indikator des gewählten Charakters für **X** Millisekunden
5. **pause** ***Xms*** – Leerlauf/Verzögerung ohne Tipp-Blase
- Reihenfolge per Drag & Drop ändern.
- Jede Zeile zeigt: **Charakter** + **Aktion** (z. B. `Byte · typing 2000ms`, `Byte · text: Hallo!`).
**Speichern** übernimmt die komplette Chatdefinition in die Szene.
---
## Felder je Nachricht
- **Charakter**: Wer „spricht“ / tippt.
- **Typ**: `text`, `image`, `audio`, `typing`, `pause`.
- **Inhalt**:
- `text`: Nachrichtentext
- `image`: Medienauswahl (ein Bild)
- `audio`: MP3 aus Medienbibliothek
- `typing`: Dauer in Millisekunden
- `pause`: Dauer in Millisekunden
---
Verhalten in der App
1. Läuft **Schritt für Schritt** von oben nach unten.
2. `typing` zeigt die bekannte **…-Blase** des Charakters für die angegebene Dauer.
3. `pause` wartet stumm (kein Tipp-Indikator).
4. `text` erscheint in der **Bubble** des Charakters (links/rechts gemäß Einstellung).
5. `image` ist antippbar (Zoom/Lightbox).
6. `audio` rendert einen kleinen **Player** (Play/Pause).
7. Der Chat **scrollt automatisch** nach unten.
> Ende der Sequenz = Chat ist abgeschlossen. Für die Navigation hängst du **normale Buttons** (oder andere Features) unter den Chat in derselben Szene an – z. B. „Weiter“ oder zwei Entscheidungs-Buttons.
---
## Charakter-Stile
Jeder Charakter bringt sein eigenes „Theme“ mit:
- **Bubble-Farbe** (Hintergrund)
- **Textfarbe** (Kontrast beachten!)
- **Seite** (links/rechts) – schafft visuelle Trennung
- **Avatar** (rundet die Chat-Anmutung ab)
Dadurch wirkt der Dialog wie ein echter Messenger-Chat.
---
## Gute Praxis & Tipps
- **Natürlichkeit**: Kurze `typing`-Phasen (800–2500 ms) vor wichtigen Nachrichten steigern Glaubwürdigkeit.
- **Tempo**: Nutze `pause` zwischendurch als **Atempausen** oder Dramaturgie-Beat.
- **Kontrast**: Achte auf gute Lesbarkeit von Text/Bubble (hell/dunkel).
- **Medien sparsam**: Einzelne Bilder/Snippets wirken stärker als ein „Flood“.
- **Audio-Hinweis**: Im Text ankündigen („Hör dir das an: 🎧“), damit Spielende wissen, dass ein Player folgt.
- **Entscheidungen**: Direkt nach dem Chat **Buttons** hinzufügen (z. B. „Zur Karte“, „Hinweis ansehen“, „Mission starten“).
- **Team-Konsistenz**: Die Sequenz ist deterministisch – alle sehen **denselben Ablauf**.
---
## Kurz-Workflow
1. **Charakter(e)** anlegen (Name, Avatar, Farben, Seite).
2. In der **Nachrichten-Sequenz**`typing`/`pause` und `text`/`image`/`audio` in gewünschter Reihenfolge anlegen.
3. **Speichern**.
4. Unter dem Chat bei Bedarf **Buttons** (separates Feature) hinzufügen, um zur nächsten Szene zu führen.
Fertig – Dialog V2 liefert dir glaubwürdige, fein getimte Chats, die sich perfekt in deine Story einfügen.
# Video einbetten (Embedded Video)
Spiele ein **MP4-Video** direkt in der Szene ab – mit Posterbild, optionalem Vollbild, Seek-Sperre und **Aktionen nach Videoende** (Text + Buttons).
---
## Felder
**MP4-URL**
Direkter Link zur MP4-Datei (H.264/AVC + AAC empfohlen).
**Poster-URL****(optional)**
Bild, das vor dem Start angezeigt wird (Vorschaubild/Thumbnail).
**Rahmenfarbe / Hintergrundfarbe / Textfarbe**
Stil des Players (Rahmen), der Fläche um den Player und von Player-Textelementen/Hinweisen.
**Vollbild erlauben**
Schaltet den Vollbild-Button ein/aus.
**Springen im Video erlauben**
- **An**: Nutzer dürfen scrubben/kapitelweise springen.
- **Aus**: Seek gesperrt → lineares Ansehen (z. B. für Pflicht-Clips/Story).
**Fallback bei Fehler – Zielszene**
Wenn das Video **nicht geladen** oder **abgespielt** werden kann (Offline, Codec, URL), wird diese Szene geöffnet (z. B. „Alternative Aufgabe“).
---
## Aktionen nach Videoende
**Text über Buttons****(optional)**
Kurzer Hinweis über den End-Buttons (z. B. „Wie möchtest du weiter machen?“).
**+ Button hinzufügen**
Beliebig viele End-Buttons mit **Beschriftung** und **Zielszene**.
- Der **„Wiederholen“**-Button ist (falls eingeblendet) der Standard-Rücksprung und startet das Video erneut.
- Die Buttons erscheinen **erst, wenn das Video wirklich zu Ende ist** (kein Timer-Trick).
---
## Verhalten in der App
1. Posterbild wird angezeigt, bis der/die Spieler:in **Play** drückt.
2. Abhängig von der Seek-Einstellung kann man **spulen** oder sieht das Video **linear**.
3. **Am Ende** blendet die App – falls konfiguriert – **Text + End-Buttons** ein.
4. Tritt ein **Fehler** auf, wird die **Fallback-Zielszene** geöffnet.
---
## Best Practices
- **Encoding:** MP4 (H.264, AAC), **720p**/1080p; Bitrate moderat (2–6 Mbit/s).
- **Größe/Ladezeit:** Möglichst < 50 MB; bei Mobilfunk eher 5–20 MB anstreben.
- **Poster:** Ruhiges, klares Motiv; Seitenverhältnis = Video.
- **Barrierefreiheit:** Untertitel separat anbieten (z. B. als „Untertitel anzeigen“-Button).
- **Didaktik:** „Springen erlauben“ AUS für Pflicht-Briefings; EIN für freie Tutorials.
- **Fallback testen:** Einmal Flugmodus aktivieren → prüfen, ob deine Fallback-Szene logisch weiterführt.
---
## Kurz-Workflow
1. MP4 & Poster hochladen → **URLs eintragen**.
2. Player-Farben wählen, **Vollbild/Seek** konfigurieren.
3. **Fallback-Zielszene** setzen.
4. **Aktionen nach Videoende**: Info-Text + Buttons (z. B. „Zur Aufgabe“, „Wiederholen“).
5. Speichern, auf Gerät testen.
# AudioPlayer mp3 (embedded Audio)
Mit **Audio einbetten** spielst du eine **MP3** direkt in der Szene ab – optional mit **Posterbild**, verschiedenen **Player-Styles**, **Fallback-Szene** und **Buttons nach Ende**. Außerdem kannst du **Untertitel/Transkripte** pro Zeitbereich hinterlegen.
---
## Felder
**MP3-URL**
Direkter Link zur MP3. (Empf.: 128–192 kbps, stereo, < 10–20 MB)
**MP3-Datei auswählen oder hochladen**
Öffnet die Medienauswahl mit Upload.
**Poster-URL****(optional)**
Bild, das über/bei dem Player gezeigt wird (z. B. Cover, Sprecher:in).
**Posterbild auswählen oder hochladen**
Medienauswahl für das Poster.
**Player-Style**
- **Standard (mit Poster)** – Player unter einem Posterbild.
- **Embedded** – flacher Player ohne großes Poster (kompakt).
- **Round****(falls verfügbar)** – runder Play-Button mit Mini-Waveform.
**Fallback-Szene**
Wird geöffnet, wenn die Audiodatei **nicht geladen** oder **abgespielt** werden kann (offline/URL/Codec).
**Untertitel** → **Untertitel bearbeiten**
Öffnet den Untertitel-Editor (siehe unten).
**Text über Buttons****(optional)**
Kurzer Hinweis, der **nach dem Abspielen** über den End-Buttons erscheint (z. B. „Wie möchtest du weiter machen?“).
**Textfarbe**
Farbe des obigen Hinweistexts (Hex, z. B. `#FFF`).
**+ Button hinzufügen**
Fügt **End-Buttons** mit **Beschriftung** und **Zielszene** hinzu.
> Die Buttons erscheinen **erst, wenn das Audio wirklich zu Ende ist** – nicht per Timer.
---
## Untertitel-Editor
[](https://docs.scenario.app/uploads/images/gallery/2025-09/5wIgrafik.png)
- Oben siehst du eine **Waveform**.
- **Bereich markieren** → unten Text eintippen → Eintrag wird erzeugt.
- Jeder Eintrag zeigt **Start–Ende** und **Text**; mit ► spielst du den Ausschnitt ab.
- **Untertitel importieren (VTT)**: Lade eine **WEBVTT**-Datei, die automatisch in Zeitbereiche + Texte übernommen wird.
- **Fertig – Untertitel speichern**: übernimmt alle Einträge in die Szene.
> Untertitel werden synchron zum Audio angezeigt (barrierearm, auch für laute Umgebungen).
---
## Verhalten in der App
1. Poster (falls gesetzt) + Player werden angezeigt.
2. Play startet die Wiedergabe; je nach Style wird eine **Waveform** mit Laufzeitregler gezeigt.
3. **Untertitel** laufen synchron mit.
4. Nach **Audioende** blendet die App – falls konfiguriert – **Hinweistext + End-Buttons** ein.
5. Bei Lade-/Abspielfehler öffnet die **Fallback-Szene**.
---
## Best Practices
- **Audioqualität**: 44.1 kHz, 128–192 kbps MP3 reicht mobil völlig.
- **Trimmen**: Stille am Anfang/Ende entfernen → schnelleres Empfinden.
- **Lautheit**: Auf ~–16 LUFS normalisieren, Clipping vermeiden.
- **Poster**: Ruhiges, kontrastreiches Motiv; wirkt professioneller.
- **Untertitel**: Kurze, sinnvolle Segmente (2–6 s), Satzumbrüche vermeiden.
- **Didaktik**: Buttons „Wiederholen“, „Weiter zur Aufgabe“, „Zur Karte“ anbieten.
---
## Kurz-Workflow
1. **MP3** und optional **Poster** wählen/hochladen.
2. **Player-Style** setzen, **Fallback-Szene** wählen.
3. **Untertitel bearbeiten** (oder **VTT importieren**).
4. **Text über Buttons** + **End-Buttons** definieren.
5. **Speichern** und auf dem Gerät testen.
# QR-Codes
Mit der **QR-Code**-Funktion verknüpfst du einen Code mit einer Szene oder nutzt ihn als universellen Einstieg ins Spiel. Codes können direkt im Editor erzeugt **oder aus der Toolbox-Aufzeichnung übernommen** werden (praktisch, wenn du QR-Spots vor Ort bereits gescannt/geloggt hast).
### Felder & Regeln
**Wert**
- Muss **alphanumerisch** sein (A–Z, a–z, 0–9).
- **Keine** Leer-, Sonder- oder Umlautzeichen.
- Frei wählbar **oder** über **„Zufall“** automatisch generierbar (empfohlen).
- Tipp: Verwende 10–16 Zeichen, z. B. `SCN_RIcey42kYX`.
**Zielszene**
- Szene, die nach dem Scan **geöffnet** wird.
---
## Verhalten in der App
**Im Spiel scannen**
- QR wird über den In-Game-Scanner gelesen.
- Bei gültigem Wert öffnet sich **direkt die Zielszene**.
**Über die „QR-Code suchen“-Funktion**
- Codes können **außerhalb** eines laufenden Spiels gescannt werden.
- Die App zeigt dann die **Spielbeschreibung** des Spiels an, in dem dieser Code verwendet wird
**(Ausnahme:* **private** *oder* **unveröffentlichte** *Spiele werden nicht angezeigt).**
---
## Aus der Toolbox übernehmen
- In der **Toolbox** gescannte Codes (Aufzeichnungen/Spots) kannst du im Storyboard **1-Klick** übernehmen.
- Der **Wert** wird vorgefüllt; du ergänzt nur noch die **Zielszene**.
---
## Druck & Platzierung – Praxis-Tipps
**Empfohlene mobile QR-Drucker (unterwegs, Akku, App-Druck):**
- folgt...
**Material & Tarnung**
- **Laminierte Zettel** (Loch + Kabelbinder) – wetterfest, schnell austauschbar.
- **Magnet-Etiketten** – für Metallflächen (Geländer, Container).
- **Vinyl-Aufkleber** (matt) – hohe Kontraste, kein Glanz.
- **Acryl-Plättchen** mit Aufkleber hinten (von vorne „glasig“).
- **Epoxy-Domes** – schlagfest, leicht erhaben.
- **Holz/Metall graviert** + kleiner **aufgeklebter** QR (Gravur allein ist oft zu kontrastarm).
- **QR-Mini-Sticker** im Prop verstecken: unter Deckel, hinter Schieber, unter UV-Klappe etc.
- **NFC+QR Kombi-Tag** – als plan B bei schlechtem Licht/Geräte-Kameras.
- **Hinweise/Redundanz**: Dupliziere kritische Codes (A/B-Ort) und nummeriere sie intern.
**Druck-Best Practices**
- Hoher Kontrast: **Schwarz auf Weiß**, matte Oberfläche.
- Mindestgröße: ab **25–30 mm** Kantenlänge (Armreichweite ~40–60 cm).
- Genug **Rand (Quiet Zone)** um den Code lassen (≥ 4 Module).
- Kein „künstlerisches“ Verbiegung/Logo im Code – Priorität ist **Zuverlässigkeit**.
- Draußen: UV-beständige Medien, Laminat oder Schutzlack.
---
## Sicherheit & Verwaltung
- Verwende **zufällige** Werte (kein Muster wie `QR1`, `QR2` …), um **Raten** zu verhindern.
- Hinterlege Codes in deiner **Asset-Liste** (Wert → Standort → Szene) oder als Notiz im Storyboard.
- Ändere Codes für **öffentliche** Bereiche regelmäßig oder nutze Einmal-Codes, wenn nötig.
---
## Kurz-Checkliste
1. Code **anlegen** oder **aus Toolbox übernehmen**.
2. **Alphanumerischen Wert** setzen (oder **Zufall** drücken).
3. **Zielszene** wählen.
4. **Testscan** im Editor/auf dem Gerät.
5. **Drucken**, wetterfest anbringen, Standort in der Doku notieren.
Fertig – deine Spielenden können den Code im Spiel scannen **oder** über die **QR-Suche** zur Spielbeschreibung finden (sofern öffentlich).
# Fotovergleich (photoCompare)
Mit **Fotovergleich** lässt du Spielende ein **Live-Foto** aufnehmen und es automatisch mit einem **Referenzbild** vergleichen. Abhängig vom **Ähnlichkeitswert** (0–100) leitest du in eine **Erfolgs-** oder **Fehl-Zielszene** weiter. Ideal für „Finde exakt diesen Ort“, „Rekonstruiere den Blickwinkel“ oder „Suche dieses Objekt“.
---
## Felder
**Referenzbild-URL / Bild auswählen/hochladen**
Wähle oder lade das **Referenzfoto**, mit dem verglichen wird. (Dieses Bild ist die „richtige“ Vorlage.)
**Schwellenwert (0–100)**
Grenzwert, ab dem der Vergleich als **bestanden** gilt.
- **Niedriger** = toleranter (leichter zu schaffen)
- **Höher** = strenger (exaktere Übereinstimmung nötig)Richtwerte: Stadt/Outdoor **60–75**, Innenraum/markante Motive **70–85**.
**Retry erlauben**
- **An**: Nach Fehlversuch darf sofort **neu fotografiert** werden.
- **Aus**: Bei Fehlversuch geht’s direkt in die **Fehl-Zielszene**.
**Erfolgs-Zielszene**
Szene, die bei **erreichtem Schwellenwert** geöffnet wird.
**Fehl-Zielszene**
Szene, die bei **nicht erreichtem Schwellenwert** geöffnet wird (Tipp/Hinweis, erneute Anweisung).
**Notiz (optional)**
Interne Notiz für die Redaktion (wird Spielern nicht angezeigt).
---
## Verhalten in der App
1. Die App öffnet die **Kamera** und zeigt das **Referenzbild** als Vorschau/Leithilfe.
2. Das Team macht ein Foto → die App berechnet einen **Ähnlichkeitswert (0–100)**.
3. **Wert ≥ Schwellenwert** → **Erfolgs-Zielszene**.
4. **Wert < Schwellenwert** →
- mit **Retry**: neuer Versuch möglich,
- ohne **Retry**: **Fehl-Zielszene**.
> Hinweis: Kamera-/Speicherrechte müssen erlaubt sein. Für diese Funktion ist zwingend eine Interverbindung erforderlich. Der Fotovergleich erfolgt per künstlicher Intelligenz.
---
## Gute Praxis & Tipps
- **Referenz wählen:** Klare, kontrastreiche Motive mit unverwechselbaren Kanten/Strukturen funktionieren am besten.
- **Bildaufbau:** Referenz möglichst **frontal** und ohne starke Perspektiv-Verzerrung anlegen.
- **Toleranz:** Starte mit **70** und teste vor Ort; bei wechselndem Licht/GPS-Drift ggf. **65–75** wählen.
- **Hinweise kombinieren:** Gib optional **Hinweise** in der Szene („Stell dich an den Poller“, „Schwenke leicht nach links“).
- **Fehl-Pfad nützlich machen:** In der **Fehl-Zielszene** kurze Tipps + Button „Erneut versuchen“ (falls Retry aus).
- **Performance:** Große Referenzbilder werden automatisch skaliert; sinnvolle Uploadgröße **≤ 2000px** Kantenlänge.
- **Datenschutz:** Auf öffentlichen Plätzen keine identifizierbaren Personen als Referenz verwenden.
---
## Kurz-Workflow
1. **Referenzbild** wählen/hochladen.
2. **Schwellenwert** setzen (z. B. 70).
3. **Retry** entscheiden.
4. **Erfolgs-** und **Fehl-Zielszene** festlegen.
5. **Speichern** und **vor Ort testen** – Schwelle ggf. feinjustieren.
So machst du reale Orte/Objekte spielrelevant – präzise, motivierend und leicht verständlich.
# Gamification
# Gamification
*Platzhalter – Inhalte folgen.*
# Compiler & Runtime
# Compiler & Runtime
*Platzhalter – Inhalte folgen.*
# NFC-Tags
Mit **NFC-Tags** löst du Szenen per Berührung aus – ideal in lauten, dunklen oder beengten Locations, wo QR-Codes schwer zu scannen sind. Tags können direkt im Editor angelegt **oder aus der Toolbox** (vor Ort gescannte/geloggte Tags) **übernommen** werden.
---
### [](https://docs.scenario.app/uploads/images/gallery/2025-09/U1Igrafik.png)Felder & Regeln
**Wert**
- Alphanumerisch (A–Z, a–z, 0–9), **keine** Leer- oder Sonderzeichen.
- Frei definierbar **oder** über **„Zufall“** generieren (empfohlen).
- Beispiel: `SCN_TMP_ST1`
**Zielszene**
- Szene, die nach dem Antippen des Tags **geöffnet** wird.
---
## Verhalten in der App
1. Spielende tippen in der App auf **„NFC scannen“** (Android & iOS).
2. Gerät an den Tag halten → bei **passendem Wert** wird die **Zielszene sofort** ausgelöst (oder deine Meta-Logik).
3. Der Wert wird einmalig in der Szene geladen und für das Team konsistent ausgewertet.
4. NFC-Tags können in Szenen wieder entfernt werden.
---
## Import aus der Toolbox
- In der **Toolbox** erfasste NFC-Scans/Spots kannst du im Storyboard **übernehmen**.
- Der **Wert** wird vorbefüllt; du ergänzt **Zielszene**, falls nötig.
---
## NFC-Tags beschreiben (schreiben)
Die App liest **NDEF-Text** (Plain Text) oder **NDEF-URI** nicht – sie vergleicht **den gespeicherten Wert**, den du auf den Tag schreibst. Schreibe daher **genau den Wert** (z. B. `SCN_A1B2C3`) als **NDEF-Textrecord** auf den Tag.
### Geeignete Tags
- **NTAG213/215/216** (ISO 14443-A) – Standard, günstig, weit verbreitet
- **On-Metal/Anti-Metal** Tags für metallische Oberflächen
- Formen: Sticker, Coins, Keyfobs, Karten, Epoxy-Domes (wetterfest)
### Empfohlene Apps/Tools (Android & iOS)
- **NFC Tools** (Wakdev): *Write* → **Add a record** → **Text** → Wert eintragen → **Write**
- **NXP TagWriter**: *Write tags* → **New NDEF message** → **Plain Text** → Wert → **Write**
- (iOS) Achte darauf, dass die App **Schreiben** unterstützt; viele tun das (NFC Tools, NXP TagWriter).
### Schreib-Schritte (Beispiel mit NFC Tools)
1. App öffnen → **Write**
2. **Add a record** → **Text**
3. Exakt **den Wert** eintragen (z. B. `SCN_X9K7M4`)
4. **OK** → **Write** → Telefon an Tag halten
5. **(Optional, nach Tests)**: Tag **locken**/schreibschützen – **irreversibel!**
**Wichtig:** Verwende **nur den Wert**, **keine URLs** oder formatierte Inhalte. Groß-/Kleinschreibung zählt, also exakt übernehmen.
---
## Platzierung & Praxis
- **Position** markieren (Stickerpunkt/kleiner Pfeil), damit klar ist, wo gehalten werden muss.
- **On-Metal** Version auf Metallflächen verwenden.
- **Wetterfest**: Epoxy-Domes, vergossene Coins, laminiert hinter Plexi.
- **Verstecken**: Unter Tischkante, hinter Türschild, im Buchrücken, unter einer Klappe, hinter Holzschieber, in 3D-gedruckter Kapsel.
- **Redundanz**: Kritische Tags doppelt (A/B-Spot) anbringen; Werte dokumentieren.
- **Reichweite**: 0–3 cm. Dünne Abdeckungen (Papier, dünnes Holz, Acryl) sind ok; Metall nur mit On-Metal-Tags.
---
## Druck & Kennzeichnung (optional)
- Kleines **Icon „NFC“** neben dem Spot hilft.
- QR+NFC **Kombi**: Falls NFC nicht erkannt wird, kann ein **Backup-QR** daneben helfen.
- Keine Magnete direkt **zwischen** Telefon und Tag (stört Antenne).
---
## Checkliste
1. **Wert** (alphanumerisch) vergeben oder **Zufall** nutzen.
2. **Zielszene** wählen.
3. Tag mit App als **NDEF-Text** exakt mit diesem Wert **beschreiben**.
4. **Testen** (Android & iOS), dann ggf. **locken**.
5. Wetterfest anbringen, **Standort & Wert** in deiner Doku notieren.
So bindest du robuste, schnelle **Berühr-Triggers** in deine Erlebnisse ein – perfekt als Alternative oder Ergänzung zu QR-Codes.
# Spot aus Toolbox übernehmen
Mit **Spot aus Toolbox übernehmen** holst du bereits vor Ort erfasste Punkte (z. B. aus deiner Szenario-Toolbox) direkt ins **Storyboard** – ohne Koordinaten, Codes oder Medien noch einmal eintippen zu müssen.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/bbkgrafik.png)
---
## Was kann übernommen werden?
- **Wegpunkt (GPS)** – Koordinaten, Name, optional Bild
- **QR-Code** – Wert (alphanumerisch), Name/Bild
- **NFC-Tag** – Wert (alphanumerisch), Name/Bild
- (optional) **Ordner/Projektzuordnung** wird als Tag/Notiz mitgegeben
> Hinweis: Werte von QR/NFC bleiben **unverändert** übernommen. Koordinaten kommen 1:1 aus der Toolbox.
---
## So funktioniert’s
1. **Modal öffnen** → *Spot aus Toolbox übernehmen*.
2. **Projekt/Ordner wählen** (oben per „Zurück zu Projekten“ navigierbar).
3. In der Liste:
- Vorschau, Name und Typ-Icon sehen (📍 GPS, 🧾 QR, 📶 NFC).
- **Einfügen** klicken, um den Spot zu übernehmen.
- **Bearbeiten** öffnet den Spot in der Toolbox (falls du ihn vor der Übernahme anpassen willst).
4. Nach dem Einfügen erscheint der passende **Feature-Dialog** im Storyboard:
- **Wegpunkt**: Breiten-/Längengrad sind **vorgefüllt**; setze **Radius**, **Sichtbarkeit** und **Autoselect** und wähle die **Zielszene**.
- **QR-Code**: **Wert** ist gesetzt; optional Zielszene wählen.
- **NFC-Tag**: **Wert** ist gesetzt; optional Zielszene wählen.
5. **Speichern** – fertig. Der Spot ist nun als Feature in deiner Szene.
---
## Was wird genau übernommen?
- **Name** → als interner Titel/Notiz
- **Bild** (falls vorhanden) → als Vorschau/Popup-Bild (je nach Feature)
- **Koordinaten** (bei GPS-Spots)
- **Code-Wert** (bei QR/NFC, unverändert)
- **Metadaten** (Zeitstempel, Ordner) → als Notiz
---
## Doppelte Spots & Aktualisierung
- **Mehrfach übernehmen** ist möglich (z. B. gleicher QR an mehreren Stellen).
- Änderungen in der **Toolbox nach der Übernahme** werden **nicht automatisch** ins Storyboard gespiegelt – bei Bedarf Spot erneut übernehmen.
---
## Tipps aus der Praxis
- **Feldarbeit zuerst**: Scanne/erfasse draußen alle Punkte in der Toolbox, **sortiere sie in Ordner**, füge Fotos hinzu – danach importierst du sie flüssig ins Storyboard.
- **Benennung**: Kurze, sprechende Namen („Brücke Nord – QR“, „Werkhalle – NFC“) erleichtern die Auswahl.
- **Qualitätssicherung**: Vor dem Einfügen kurz **Bearbeiten** nutzen, um falsche Koordinaten oder Tippfehler im Code zu korrigieren.
- **Team-Konsistenz**: Übernommene Wegpunkte sind „fixe“ Ziele – ideal, damit alle Spielenden denselben Punkt ansteuern.
---
## FAQ
**Kann ich beim Einfügen die Zielszene frei wählen?**
Ja – die Toolbox gibt nur Daten vor. Die **Zielszene legst du im Storyboard** fest.
**Was, wenn ein QR-/NFC-Wert gegen die Regeln verstößt?**
Beim Einfügen wird geprüft: **alphanumerisch, keine Leer-/Sonderzeichen**. Passe den Wert in der Toolbox an oder editiere ihn im Feature-Dialog.
**Kann ich mehrere Spots auf einmal übernehmen?**
Aktuell **einzeln** per **Einfügen**. (Für Massenimporte: erst in der Toolbox sammeln und dann nacheinander übernehmen – geht sehr schnell.)
# Button
Mit dem **Button**-Element führst du Spielende per Tap zur **nächsten Szene** – klassisch für „Weiter“, Auswahloptionen, Abzweigungen oder Bonus-Aktionen. Oben im Dialog siehst du eine **Live-Vorschau** deiner aktuellen Einstellungen.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/b4dgrafik.png)Felder
**Text**
Beschriftung des Buttons (z. B. „Weiter“, „Zur Aufgabe“, „Norden wählen“).
Tipp: Kurze Verben + Nutzen („Öffnen“, „Lösen starten“).
**Zielszene**
Die Szene, die beim Tippen **geöffnet** wird.
- Üblich ist, hier **immer** eine Szene zu wählen.
- Wenn du bewusst **ohne Ziel** speicherst, verhält sich der Button wie ein „stummer“ UI-Button und löst keine Navigation aus (nur sinnvoll für Speziallogik).
**Hintergrundfarbe**
Hex-Wert für die Buttonfläche, z. B. `#68bfdd` (Brand Color).
**Textfarbe**
Hex-Wert für die Beschriftung, z. B. `#ffffff`.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/sEGgrafik.png)Verhalten in der App
- **Tap** auf den Button öffnet **sofort** die gewählte **Zielszene**.
- Mehrere Buttons in einer Szene werden automatisch **untereinander** (mobilfreundlich) gerendert; die **Reihenfolge** entspricht der Reihenfolge im Editor.
- Buttons reagieren direkt; es ist **kein** GPS/Scan nötig (anders als bei Wegpunkten/QR/NFC).
- Buttons werden mit einem Sicherheitsabstand unterhalb von Content eingefügt.
- Position des Buttons kann mit DIV Klasse `customButtonPosition` gesteuert werden: ```
```
---
## Einsatzmuster
- **Lineares Weiter**: „Weiter“ → nächste Szene.
- **Entscheidungen/Abzweigungen**: Mehrere Buttons mit unterschiedlichen Zielszene(n) („Tür A“, „Tür B“).
- **Optionale Inhalte**: „Mehr erfahren“, „Hinweis anzeigen“, „Zur Karte“.
- **Rücksprung**: „Zur Übersicht“/„Zurück zur Karte“.
---
## Gestaltungs- & UX-Tipps
- **Kontrast** sicherstellen: Helle Schrift auf dunklem Hintergrund oder umgekehrt (AA-Kontrast ≥ 4.5:1 anstreben).
- **Konsistenz**: Primäre Aktion (z. B. „Weiter“) immer gleiche Farbe; sekundäre Aktionen in neutralen Tönen.
- **Größe/Touch-Ziel**: Genug Platz (mind. ~44 px Höhe) und Abstand zwischen mehreren Buttons.
- **Icon-Hilfe**: Du kannst vor dem Text **Emoji** nutzen (z. B. 🔍 „Suchen“, 🧭 „Zur Karte“).
- **Deaktivierte Logik**: Wenn ein Button erst nach Bedingung aktiv sein soll, blende ihn vorher aus oder ersetze ihn durch Hinweistext (statt „toter“ Buttons).
---
## Kombinationen
- **Mit Wegpunkten**: Button erst nach Erreichen eines Wegpunkts anzeigen (Story-Gating).
- **Mit QR/NFC**: Button bietet Wahl: „Scannen“ oder „Überspringen (Hinweis)“.
- **Mit Dialogen/Medien**: Unter Text, Bild, Audio oder Video als klare Call-to-Action platzieren.
---
## Kurz-Checkliste
1. **Text** setzen (klar & kurz).
2. **Zielszene** auswählen.
3. **Farben** (Brand) wählen, Kontrast prüfen.
4. Vorschau checken → **Speichern**.
Fertig – der Button führt die Spielenden zuverlässig zur nächsten Station deiner Story.
# Abfragefeld (Eingabe prüfen)
Mit dem **Abfragefeld** fragst du einen Code, ein Wort oder eine Zahl ab. Nach dem Tippen auf **„Lösung prüfen“** wird die Eingabe validiert – bei Erfolg öffnet sich die **Zielszene** (falls gesetzt).
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/Yuxgrafik.png)Felder
**Lösung**
- Erwartete richtige Eingabe.
- Tipp: Kurz und eindeutig (z. B. `MORSE`, `4711`, `BOLTZMANN`).
**Button**
- Beschriftung des Prüfen-Buttons (Standard: „Lösung prüfen“).
**Prüfung**
- **vereinfacht**: Groß/Kleinschreibung wird ignoriert; führende/folgende Leerzeichen werden entfernt; mehrere Leerzeichen werden zusammengefasst;
- **exakt** (falls gewählt): 1-zu-1-Vergleich – **alles** muss exakt übereinstimmen.
**Darstellung**
- **Eingabefeld**: Freitext (Buchstaben/Zahlen).
- **Zahlenfeld** (falls verfügbar): Zeigt ein numerisches Keyboard, limitiert auf Ziffern – ideal für Codes/Kombinationen.
**Zielszene**
- Szene, die bei **korrekter Lösung** geöffnet wird.
- Lässt du sie leer, kannst du über Szenenlogik/Badge o. Ä. selbst reagieren.
**Hintergrundfarbe / Textfarbe**
- Farben des **Prüfen-Buttons** (Hex-Werte, z. B. `#256d85` / `#ffffff`).
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/R6Qgrafik.png)Verhalten in der App
1. Spielende tippen ihre Lösung ein und drücken **„Lösung prüfen“**.
2. Die Eingabe wird gemäß **Prüfmodus** verglichen.
3. **Richtig** → (optional) kurzer Erfolgseffekt, **Zielszene** wird geöffnet.
4. **Falsch** → (optional) Hinweis „Leider falsch“ / erneuter Versuch.
5. Eingabefeld wird mit Sicherheitsabstand unter dem Content eingefügt.
6. Position des Eingabefelds kann mit der DIV Klasse `customInputPosition` umgeleitet werden:
```
```
---
## Praxis-Tipps
- **Eindeutigkeit:** Vermeide Lösungen, die leicht zu raten sind („JA“, „OK“).
- **Toleranz:** Nutze **„vereinfacht“**, wenn Tippfehler durch Groß-/Kleinschreibung nicht entscheidend sind.
- **Zahlenrätsel:** Wähle **Darstellung → Zahlenfeld** (falls verfügbar), damit direkt das Ziffern-Keyboard erscheint.
- **Barrierefreiheit:** Button-Kontrast hoch halten (helle Schrift auf dunklem Button oder umgekehrt).
- **Feedback:** In der Szene kurz erklären, **wo** die Lösung zu finden ist („Die Antwort steht auf dem Typenschild“).
---
## Kurz-Checkliste
1. **Lösung** eintragen (ggf. Varianten mit `|`).
2. **Prüfung** wählen (**vereinfacht** für tolerant, **exakt** für streng).
3. **Darstellung** festlegen (Eingabe/Zahl).
4. **Zielszene** setzen.
5. Button-**Text** und **Farben** anpassen → **Speichern**.
# Dialog
Mit **Dialog** zeigst du einen oder mehrere Textbausteine mit optionalen **Buttons** an – ideal für kurze Erklärungen, Zwischentexte, Entscheidungen oder Abzweigungen. Oben siehst du im Editor eine **Live-Vorschau** von Text & Button-Stil.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/T6lgrafik.png)[](https://docs.scenario.app/uploads/images/gallery/2025-09/dTzgrafik.png)[](https://docs.scenario.app/uploads/images/gallery/2025-09/K2Kgrafik.png)
## Tabs & Felder
### 1) Texte
- **Text (mehrfach)**
Füge beliebig viele Einträge hinzu („Text 1“, „Text 2“, …).
Jeder Eintrag wird in der App **nacheinander** angezeigt.
- Zeilenumbruch wird übernommen.
- Emojis sind erlaubt.
- **Ablauf**
- Spieler:innen tippen auf **„…/Weiter“** (oder irgendwo in den Dialogbereich), um zum **nächsten Textelement** zu wechseln.
- Nach dem letzten Text bleibt der Dialog stehen; Buttons (falls vorhanden) sind weiterhin sichtbar.
### 2) Buttons
- **Button (mehrfach)**
- **Szene**: Zielszene, die beim Tippen geöffnet wird.
- **Text**: Beschriftung (z. B. „Weiter“, „Zurück“, „Abzweigung A“).
- **Verhalten**
- Buttons werden **unter dem Text** angezeigt.
- Du kannst **mehrere** Buttons gleichzeitig verwenden (Entscheidungen).
- Lässt du **alle Szenen leer**, tun die Buttons nichts (nur sinnvoll, wenn du eigene Logik verwendest).
### 3) Einstellungen
- **Textfarbe** – Farbe der Dialogtexte (Hex).
- **Hintergrundfarbe-Button** – Hintergrund der Buttons (Hex).
- **Textfarbe-Button** – Beschriftungsfarbe der Buttons (Hex).
---
## Verhalten in der App
- Die Texte erscheinen **sequenziell**; ein Tap auf den Dialog/Weiter-Button zeigt den **nächsten Text**.
- Buttons sind die **Call-to-Action** unter dem Text. Ein Tap öffnet sofort die gewählte **Zielszene**.
- Gibt es **keine Buttons**, dient der Dialog als **reiner Infoblock** (Spielfluss geht weiter, wenn du in der Szene weitere Elemente hast).
---
## Einsatzmuster
- **Storybeat/Erklärung:** Mehrere kurze Sätze als einzelne Textschritte, darunter „Weiter“.
- **Entscheidung:** Zwei oder mehr Buttons („Tür A“, „Tür B“) mit unterschiedlichen Zielszenen.
- **Rücksprung/Navi:** „Zur Karte“, „Zur Übersicht“.
- **Hinweis nach Rätsel:** Text + Button „Aufgabe starten“.
---
## UX-Tipps
- **Kurz & konkret** – lieber 2–3 kurze Texte als eine Textwand.
- **Kontrast prüfen** – Button- und Textfarben mit ausreichendem Kontrast wählen.
- **Primäraktion konsistent** – z. B. immer dieselbe Farbe für „Weiter“.
- **Reihenfolge beachten** – die Anzeige folgt exakt der Reihenfolge im Tab **Texte**.
- **Barrierefreiheit** – Buttons groß genug (min. ~44 px Höhe) und mit klaren Labels.
---
## Kurz-Checkliste
1. Texte in sinnvoller Reihenfolge anlegen.
2. Buttons (Zielszene + Label) hinzufügen – oder weglassen für Info-Dialoge.
3. Farben in **Einstellungen** setzen.
4. Vorschau prüfen → **Speichern**.
Fertig – dein Dialog führt sauber durch Textschritte und lenkt mit Buttons zur passenden nächsten Szene.
# Hintergrundbild
Mit **Hintergrundbild** legst du ein Bild **vollflächig als Cover** hinter deine Szene.
Beim Anklicken öffnet sich die **Medienauswahl** (mit optionalem Upload). In der Liste hat jedes Bild einen Button **„als Hintergrund einfügen“** – ein Klick setzt es sofort als Szenen-Hintergrund.
---
## Wie es funktioniert
- Öffne **Hintergrundbild** → **Medienauswahl** erscheint.
- Wähle ein vorhandenes Bild **oder** lade ein neues hoch.
- Klicke **„als Hintergrund einfügen“** beim gewünschten Bild.
- Das Bild wird **als Cover** gesetzt:
- füllt die gesamte Fläche,
- **beschneidet** bei abweichendem Seitenverhältnis,
- ist **zentriert** (Fokus Mitte).
> Das Hintergrundbild beeinflusst keine anderen Elemente – Buttons, Dialoge, Texte etc. liegen **darüber**.
---
## Unterstützte Formate (empfohlen)
- **JPG / JPEG** – Fotos, kleinste Dateigröße
- **PNG** – Grafiken mit Transparenz
- **WebP** – moderne Alternative (klein + scharf)
---
## Best Practices
- **Größe & Schärfe**
- Ziel: **≤ 1 MB** pro Bild (schnelle Ladezeiten).
- **1440×2560** (hochkant).
- **Sichere Bildmitte**
- Wichtige Motive in die **Mitte** legen – Ränder können durch „Cover“ beschnitten werden.
- **Kontrast für Lesbarkeit**
- Heller Text auf dunklem Bild, dunkler Text auf hellem Bild.
- Wenn nötig: dezent **abdunkeln** (z. B. mit halbtransparentem Element/Gradient darüber).
- **Motivruhe**
- Ruhige, unscharfe Hintergründe lenken weniger ab und lassen UI klar wirken.
- **Mehrere Sprachen/Szenen**
- Keine eingebrannten Texte ins Bild – nutze dafür Szenen-Text/Features, damit Übersetzungen einfach bleiben.
---
## Häufige Fragen
**Kann ich das Bild ausrichten?**
Standard ist **zentriert**. Wenn der Fokus stark außerhalb der Mitte liegt, nimm eine Variante, die mittig wirkt – wegen Cover-Beskneidung.
**Was passiert auf kleinen Displays?**
Das Bild bleibt **vollflächig**; Ränder können je nach Gerät abgeschnitten sein (Design daher mittig planen).
**Kann ich später wechseln?**
Ja – **Hintergrundbild** erneut öffnen und ein anderes Bild **„als Hintergrund einfügen“**.
---
## Kurz-Checkliste
1. **Hintergrundbild** öffnen → Bild wählen/hochladen.
2. **„als Hintergrund einfügen“** klicken.
3. Kontrast und Lesbarkeit der Szene prüfen.
4. Speichern.
# Hintergrundfarbe
Mit **Hintergrundfarbe** gibst du deiner Szene einen einfarbigen oder **zweifarbigen Verlauf**.
Hinweis: **Wenn ein Hintergrundbild gesetzt ist, überschreibt es die Hintergrundfarbe** (Bild hat Vorrang).
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/u91grafik.png)Felder
**Farbe 1 / Farbe 2**
- Hex-Werte (`#RRGGBB`, z. B. `#84bee2`, `#1a767a`).
- Für **einfarbig**: in beide Felder **denselben** Wert eintragen.
**Verlaufsrichtung**
- Steuert, wie der Verlauf verläuft:
- **Horizontal** (links → rechts)
- **Vertikal** (oben → unten)
- **Diagonal nach unten rechts** (oben-links → unten-rechts)
- **Diagonal nach unten links** (oben-rechts → unten-links)
Live-Vorschau oben zeigt das Ergebnis der aktuellen Auswahl.
---
## Verhalten in der App
- Ohne Hintergrundbild füllt die Farbe/der Verlauf die Szene **vollflächig**.
- **Mit Hintergrundbild** bleibt die Farbe unsichtbar (als Fallback im Hintergrund vorhanden).
- Alle anderen Elemente (Texte, Buttons, Dialoge etc.) liegen **darüber**.
---
## Design-Tipps
- **Kontrast**: Wähle Farben so, dass Texte/Buttons gut lesbar sind (ggf. helle/dunkle Varianten testen).
- **Ruhige Flächen**: Sanfte Verläufe lenken weniger ab als harte Kontraste.
- **Branding**: Nutze eure Primär- (z. B. `#68bfdd`) und Sekundärfarben konsistent über alle Szenen.
- **Fallback**: Setze immer eine sinnvolle Hintergrundfarbe – falls ein Bild später entfernt wird, bleibt die Szene stimmig.
---
## Kurz-Checkliste
1. Farben wählen (einfarbig = Farbe1 = Farbe2).
2. Verlaufsrichtung festlegen.
3. Vorschau prüfen → **Speichern**.
4. Falls **Hintergrundbild** aktiv ist: beachten, dass dieses die Farbe überlagert.
# Szenen-Übergang (pageTransition)
Mit **Szenen-Übergang** legst du fest, **wie eine Szene erscheint** (In-Transition) und **wie sie verschwindet** (Out-Transition). Die Animation läuft jeweils beim Betreten bzw. Verlassen der Szene auf dem gesamten Szenen-Container. (Hintergrundbild/-farbe, Texte, Buttons usw. animieren damit gemeinsam.)
---
##
[](https://docs.scenario.app/uploads/images/gallery/2025-09/uHugrafik.png)
---
## Felder
- **Einblendung (In-Transition)** – Animation beim **Öffnen** der Szene.
- **Ausblendung (Out-Transition)** – Animation beim **Wechsel** zu einer anderen Szene.
- **none** = keine Animation (schnellste Option, Standard).
---
## Verfügbare Optionen
### In-Transitions
- `fadeInScene` – sanft einblenden
- `zoomInScene` – leicht hineinzoomen
- `slideInLeftScene` / `slideInRightScene` – von links/rechts einschieben
- `bounceInScene` – federnde Einblendung
- `rotateInScene` – leicht hereinrotieren
- `magicScaleInScene` – Skalierungs-/Weichzeichner-Effekt
- `iphoneBounceInScene` – iOS-artiger Bounce
- `macSlideInScene` – macOS-artiger Slide
- `materialExpandInScene` – Material-Expand (Card wird groß)
- `androidSlideUpInScene` – Android-Slide von unten
- `rippleInScene` – Wellen-/Ripple-Eintritt
- `cardStackInScene` – Kartenstapel kommt nach vorn
- `materialFlipInScene` – Material-Flip nach vorn
### Out-Transitions
- `fadeOutScene` – sanft ausblenden
- `zoomOutScene` – leicht herauszoomen
- `slideOutLeftScene` / `slideOutRightScene` – nach links/rechts heraus schieben
- `bounceOutScene` – federnde Ausblendung
- `rotateOutScene` – herausrotieren
- `magicScaleOutScene` – Magic-Scale zurück
- `iphoneBounceOutScene` – iOS-artiger Bounce out
- `macSlideOutScene` – macOS-artiger Slide out
- `materialExpandOutScene` – Material-Shrink/Collapse
- `androidSlideDownOutScene` – Android-Slide nach unten
- `rippleOutScene` – Ripple-Ausgang
- `cardStackOutScene` – zurück in Kartenstapel
- `materialFlipOutScene` – Material-Flip nach hinten
---
## Empfohlene Paare (stimmige Kombis)
- **Fade:** `fadeInScene` ⇄ `fadeOutScene` (ruhig, universell)
- **Slide links/rechts:** `slideInLeftScene` ⇄ `slideOutRightScene` *(oder umgekehrt für Gegenrichtung)*
- **Zoom:** `zoomInScene` ⇄ `zoomOutScene`
- **Material/Card:** `materialExpandInScene` ⇄ `materialExpandOutScene` / `cardStackInScene` ⇄ `cardStackOutScene`
- **Platform-Look:**
- iOS: `iphoneBounceInScene` ⇄ `iphoneBounceOutScene`
- Android: `androidSlideUpInScene` ⇄ `androidSlideDownOutScene`
- macOS: `macSlideInScene` ⇄ `macSlideOutScene`
---
## Hinweise & Best Practices
- **Konsistenz:** Wähle für ein Projekt 1–2 Animationsstile und bleibe dabei.
- **Tempo & Performance:** Dezente Effekte wirken professioneller und laden schneller. Auf älteren Geräten ist `none`/`fade` am flüssigsten.
- **Richtung beachten:** Wenn der Spielfluss „vorwärts“ geht, nutze z. B. **In von rechts → Out nach links** (oder umgekehrt), um eine klare Bewegungslogik zu erzeugen.
- **Barrierefreiheit:** Übertreibe Rotationen/Bounce nicht – sie können empfindliche Nutzer stören.
- **Konflikte vermeiden:** Kombiniere keine starken In/Out-Stile, die gegeneinander arbeiten (z. B. `rotateIn` mit `slideOutRight` kann unruhig wirken).
---
## Kurz-Checkliste
1. **In**- und **Out**-Transition wählen (oder `none`).
2. In der Vorschau prüfen, ob es zum **Ton der Szene** passt.
3. Einheitlich im gesamten Spiel anwenden.
4. Bei Performance-Problemen: auf **fade/none** wechseln.
# Inventar
Mit **Inventar** gibst du Spieler:innen Gegenstände an die Hand – z. B. Schlüssel, Hinweise, Karten oder Fotos (zoombar). Items können **gesammelt**, **verbraucht** oder **für Bedingungen** in Szenen verwendet werden.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/KgBgrafik.png)Felder
**Bild**
Optionales Vorschaubild. Bilder können im Inventar **vollbild/zoombar** geöffnet werden – ideal für Karten, Notizen, Codes.
**Name**
Eindeutige Bezeichnung des Gegenstands (z. B. „Rostiger Schlüssel“, „Karte Nordwald“).
**Beschreibung**
Kurzer Begleittext (Hinweis, Notiz, Nutzungshinweis).
**Anzahl**
Startmenge (Standard **1**). Kann im Spiel erhöht/gesenkt werden.
---
## Verhalten in der App
- Items erscheinen im **Inventar-Menü** der App.
- Tippen auf ein Item öffnet **Detailansicht** mit **Zoom** für das Bild (falls vorhanden) und Beschreibung.
- Mengenänderungen werden live angezeigt (z. B. „Seil ×2“).
## Verhalten in der App
- Items erscheinen im **Inventar-Menü** der App.
- Tippen auf ein Item öffnet **Detailansicht** mit **Zoom** für das Bild (falls vorhanden) und Beschreibung.
- Mengenänderungen werden live angezeigt (z. B. „Seil ×2“).
---
## Logik im Spiel
Du kannst Inventar **abfragen** und **verändern**:
**Bedingungen (typische Checks)**
- *hat Item*: „Wenn **Karte Nordwald** vorhanden → Button anzeigen / Szene freigeben“
- *Menge*: „Wenn **Batterie** ≥ 2 → Taschenlampe aktivieren“
- *nicht vorhanden*: „Wenn **Schlüssel** fehlt → Hinweis anzeigen“
**Aktionen (typische Manipulationen)**
- **Hinzufügen**: Item neu ins Inventar legen (mit Startmenge)
- **Erhöhen/Verringern**: Menge +1/–1 oder um einen festen Wert
- **Setzen**: Menge exakt auf n stellen
- **Entfernen**: Item komplett aus dem Inventar löschen
> Praxis: Nach dem Benutzen eines „Einweg“-Items (z. B. Sicherung) die Menge **–1** setzen. Bei wiederverwendbaren Items (z. B. Schlüsselbund) die Menge belassen.
---
## Einsatzbeispiele
- **Schlüssel & Schlösser**
- Szene fragt: *„Schlüssel vorhanden?“* → Ja: Tür öffnet, Nein: Hinweis „Suche den Schlüssel“.
- **Fotos/Belege als Hinweis**
- Item „Foto Schaltschrank“ (zoombar) enthält eine abfotografierte Zahlenfolge → späteres Rätsel.
- **Karte/Plan**
- Zoombare Karte im Inventar, die jederzeit aufgerufen werden kann.
- **Ressourcen**
- „Batterie ×3“ – wird beim Einschalten der UV-Lampe schrittweise verbraucht.
---
## Design- & UX-Tipps
- **Eindeutige Namen & Icons**: schneller Wiedererkennungswert.
- **Kurze Beschreibung** mit klarer Funktion („Öffnet Tür im Keller“).
- **Wichtige Bilder** hochauflösend genug für Zoom, aber < 1 MB wenn möglich.
- **Tutorial-Hinweis**: Einmal erklären, dass Inventar über das Rucksack-Symbol erreichbar ist.
---
## Kurz-Workflow
1. **Bild** wählen (optional, zoombar), **Name**, **Beschreibung**, **Anzahl** setzen.
2. In späteren Szenen **Bedingungen** auf dieses Item legen (vorhanden / Menge ≥ n).
3. Bei Bedarf per Aktion **Menge ändern** oder Item **entfernen**.
So steuerst du Spielfortschritt, Rätsel und Hinweise elegant über ein flexibles, sichtbares **Inventar-System**.
# Inventar – Menge anpassen
Mit **Menge anpassen** veränderst du die Anzahl eines vorhandenen Inventar-Items – entweder **relativ** (±) oder als **fester Wert**. So kannst du Verbrauchsmaterialien abziehen, Belohnungen geben oder Zählerstände steuern.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/4Uvgrafik.png)Felder
**Inventar**
Wähle das Item, dessen Menge geändert werden soll.
**Modus**
- **+/− (relativ):** addiert oder subtrahiert den eingegebenen Wert.
- Beispiele: `+1` = einen Schlüssel erhalten, `-1` = Batterie verbrauchen.
- **fester Wert:** setzt die Menge exakt auf den eingegebenen Wert.
- Beispiel: `0` = Item leeren/aufgebraucht, `3` = exakt drei Stück besitzen.
**Menge**
Ganzzahl (negativ erlaubt im ±-Modus).
---
## Verhalten in der App
- Die Anpassung passiert **sofort**, wenn die Szene/Interaktion mit dieser Aktion ausgeführt wird (also sofort wenn eine Szene aufgerufen wird.).
- Mengen werden auch als **negativ** behandelt: fällt das Ergebnis unter 0, wird also auch -1 angezeigt.
- Optionales Projektverhalten: Wenn eine Menge 0 erreicht, kann das Item im Inventar **ausgeblendet** oder **entfernt** werden (je nach Projekteinstellung).
---
## Typische Use-Cases
- **Verbrauch:** „UV-Lampe einschalten“ → Batterie **−1**.
- **Belohnung:** Rätsel gelöst → Münzen **+3**.
- **Reset/Zwangswert:** Beim Levelstart „Seile = 2“ (fester Wert).
- **Schlüsselabgabe:** Tür geöffnet → Schlüssel 0 (fester Wert) oder **−1**.
---
## Praxis-Tipps
- **Vor dem Abziehen prüfen:** Kombiniere mit einer **Bedingung** („Menge ≥ 1?“), um Fehlzustände zu vermeiden.
- **Klar kommunizieren:** Zeige nach Anpassungen eine kurze Rückmeldung („Batterie −1“).
- **Balancing:** Nutze feste Werte für Checkpoints, relative Werte für dynamisches Gameplay.
- **Testfälle:** Prüfe Grenzwerte (von 1 → 0, mehrfaches Klicken, Offline-Wiederaufnahme).
---
## Kurz-Workflow
1. Aktion **Menge anpassen** zur gewünschten Szene/Interaktion hinzufügen.
2. **Inventar-Item**, **Modus** (± oder fester Wert) und **Menge** setzen.
3. Optional: Vorher **Bedingung** (Menge ≥ n) und/oder danach **Hinweis** anzeigen.
4. Speichern – fertig.
# Variablen
**Variablen** sind interne Spielwerte – für Spielende **unsichtbar** – mit denen du Logik, Zustände und Verzweigungen steuerst (Flags, Zähler, Punkte, Fortschritt).
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/D73grafik.png)Anlegen
**Name** – frei wählbar (nur Buchstaben/Zahlen/\_), z. B. `Szene_gesehen`, `punkte`, `tresor_fehlversuche`.
**Anzahl** – Startwert (Ganzzahl, Standard 0/1).
> Verwende `0/1` als **Boolean-Flag**: `Szene_gesehen = 1` bedeutet „Intro schon gezeigt“.
---
## Verhalten & Reichweite
- Gilt **projektweit** für den aktuellen Durchlauf/Spielstand.
- Für Spielende **nicht sichtbar** (nur für Bedingungen & Aktionen nutzbar).
- Bleibt erhalten, bis du sie änderst oder den Spielstand zurücksetzt.
---
## Nutzung in Bedingungen
Du kannst Variablen an jeder Stelle abfragen, um Elemente/Wege zu steuern.
Unterstützte Vergleiche (typisch):
- `==` gleich `!=` ungleich
- `>` größer `<` kleiner
- `>=` mindestens `<=` höchstens
**Beispiele**
- Intro überspringen: nur anzeigen, **wenn** `Szene_gesehen == 0`.
- Bonus freischalten: Button zeigen, **wenn** `punkte >= 50`.
- Sicherheitslogik: Hinweis zeigen, **wenn** `tresor_fehlversuche >= 3`.
---
## Variablen ändern (Aktionen)
- **Erhöhen/Verringern**: `punkte += 10`, `tresor_fehlversuche += 1`.
- **Setzen**: `Szene_gesehen = 1` (Flag aktivieren), `timer = 0` (reset).
- **Beispiel-Workflow**: Beim Szenenstart `Szene_gesehen = 1`; beim richtigen Code `punkte += 20`; beim falschen Code `tresor_fehlversuche += 1`.
---
## Muster & Best Practices
- **Benennung**: klein\_schreiben\_mit\_unterstrich (eindeutig & sprechend).
- **Flags statt Text**: nutze Zahlen (0/1) statt Strings – schneller & fehlerarm.
- **Initialisierung**: setze Startwerte bewusst zu Beginn des Spiels/Levels.
- **Sicherheit**: prüfe vor dem Abziehen auf Grenzwerte (z. B. nicht unter 0).
- **Dokumentation**: kurze Tabelle deiner Variablen (Name, Bedeutung, Startwert).
---
## Mini-Beispiele
- **Intro-Once**
- Bedingung: „Intro-Dialog nur, wenn `intro_seen == 0`“
- Aktion beim Anzeigen: `intro_seen = 1`
- **Punktesystem**
- Rätsel gelöst: `punkte += 10`
- Bonuspfad: sichtbar, wenn `punkte >= 30`
- **Fehlversuche**
- Bei falscher Eingabe: `fails += 1`
- Zeige Hilfe, wenn `fails >= 2`
Mit Variablen baust du vom simplen „Schon gesehen?“ bis zur komplexen Quest-Logik alles sauber und wiederverwendbar.
# Elemente entfernen
Mit **Elemente entfernen** kannst du während des Spiels bereits platzierte, dynamische Elemente **ausblenden bzw. deaktivieren**. So steuerst du, was nach einer Aktion noch sichtbar/benutzbar ist.
**Unterstützte Typen**
- **Wegpunkt** (Map-Marker)
- **QR-Code**
- **NFC-Tag**
- **Countdown**
- **Inventar-Gegenstand**
> Der Effekt gilt für den **aktuellen Spielstand/Teamlauf**. Andere Teams/Spielstände bleiben unberührt.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/W8Hgrafik.png)Bedienung
1. **+ Element** → Typ wählen (z. B. *Inventar*).
2. Je nach Typ das **konkrete Ziel** auswählen (z. B. Inventar-Item „Byte“ oder Wegpunkt „Brücke“).
3. Mehrere Elemente können in **einem Schritt** hinzugefügt und entfernt werden.
4. **Speichern** – die Entfernung passiert, **wenn diese Szene/Aktion ausgeführt** wird.
---
## Verhalten pro Typ
- **Wegpunkt**: Marker verschwindet; Auto-Select/Proximity löst nicht mehr aus.
- **QR/NFC**: Code/Tag ist für diesen Lauf **inaktiv** (Scan hat keine Wirkung).
- **Countdown**: Läuft nicht weiter und wird aus der UI entfernt.
- **Inventar**: Item wird **aus dem Inventar gelöscht** (entspricht Menge → 0 und ausblenden).
Wenn ein anvisiertes Element **nicht (mehr) existiert**, passiert still **nichts** (idempotent).
---
## Typische Einsatzfälle
- Nach Betreten eines Wegpunkts den **Marker entfernen**, damit die Karte clean bleibt.
- Ein **einmaliger QR/NFC** soll nur für den ersten Fund zählen.
- **Rätsel verbraucht** ein Item → Item aus dem Inventar entfernen.
- **Countdown** bei Pfadwechsel stoppen und ausblenden.
---
## Best Practices
- **Klarer Zeitpunkt**: Entfernen meist **nach** Abschluss eines Tasks (z. B. am Ende der Erfolgs-Szene).
- **Feedback** geben: „Wegpunkt erreicht – Marker entfernt“, „Schlüssel abgegeben“.
- **Sicherheit**: Entfernen von QR/NFC nur, wenn der Folgeschritt garantiert erreichbar ist (kein Soft-Lock).
- **Testen**: Lauf zweimal spielen – prüfen, dass entfernte Elemente nicht unerwartet wieder auftauchen.
---
## Kurz-Checkliste
1. In der Szene **Elemente entfernen** hinzufügen.
2. **Typ** und **Ziel** wählen (ggf. mehrere).
3. Platzierung prüfen (wann soll es passieren?).
4. Speichern → auf dem Gerät testen.
# Countdown
Mit dem **Countdown** gibst du einer Szene (oder einer ganzen Aufgaben-Sequenz) ein **Zeitlimit**. Der Timer läuft sichtbar in der App herunter. Er startet, sobald die Szene mit dem Countdown **betreten** wird und läuft weiter, bis er **abgelaufen** ist oder du ihn **entfernst**.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/dfOgrafik.png)Felder
**Zeit (in Min.)**
Gib die Dauer in **Minuten** an (z. B. `1`, `5`, `15`).
Tipp: Kurze Tests immer mit `1`–`2` Minuten anlegen.
**Zielszene** *(optional)*
Szene, die **automatisch geöffnet** wird, wenn der Countdown 0 erreicht.
- Setzt du keine Zielszene, endet der Countdown ohne Szenenwechsel (du kannst z. B. selbst Hinweise/Buttons in der Szene platzieren, was passieren soll).
---
## Verhalten in der App
- Startet beim **Szenenaufruf** und zählt **sichtbar** herunter.
- Läuft **szenenübergreifend weiter**, wenn du es so planst (z. B. durch direktes Weiterleiten ohne Entfernen).
- Bei **Ablauf**:
- **mit** Zielszene → sofortiger Wechsel in diese Szene (z. B. „Zeit abgelaufen“).
- **ohne** Zielszene → Timer stoppt bei 0; du kannst den nächsten Schritt selbst steuern.
> Hinweis: Du kannst einen aktiven Countdown später mit **„Elemente entfernen“** gezielt beenden/ausblenden.
---
## Typische Einsätze
- **Zeitdruck für Rätsel** (z. B. 3 Minuten zum Entschlüsseln).
- **Bonusfenster**: Nur innerhalb von 2 Minuten gibt’s Extra-Punkte / alternative Szene.
- **Pacing**: Nach 10 Minuten automatisch zur nächsten Story-Phase springen.
---
## Best Practices
- **Klar kommunizieren**: In der Szene kurz erwähnen, was beim Ablauf passiert.
- **Fallback planen**: Eine **Zielszene** für „Zeit abgelaufen“ wirkt sauberer als ein „stiller“ Ablauf.
- **Nicht stapeln**: Parallel laufende Timer verwirren – nutze **einen** aktiven Countdown gleichzeitig.
- **Entfernen nach Erfolg**: Wenn das Team die Aufgabe vorzeitig schafft, den Countdown mit **Elemente entfernen → Countdown** stoppen, damit er nicht weiterläuft.
- **Playtests**: Zeiten real testen (Wegstrecken, Eingaben, GPS-Latenz berücksichtigen).
---
## Kurz-Workflow
1. **Countdown** hinzufügen → **Zeit** setzen.
2. (Empfohlen) **Zielszene** für Ablauf wählen.
3. In Erfolgs-/Abbruchpfaden ggf. **Countdown entfernen**.
4. Speichern → auf Gerät testen.
# Hinweise (Hints)
Mit **Hinweisen** gibst du zeitgesteuerte Hilfe zu einer Szene – bis hin zur **Lösung**. Du kannst bis zu **3 Hinweise** und **1 Lösung** definieren. Die Freigabe erfolgt **automatisch nach Zeit** (ab Betreten der Szene).
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/MqXgrafik.png)Felder
**Hinweis 1–3**
- **Zeit (in Minuten):** Nach wie vielen Minuten der Hinweis **verfügbar** wird.
- `0` = sofort verfügbar.
- Feld leer lassen = Hinweis wird **nicht** verwendet.
- **Text:** Inhalt des Hinweises.
**Lösung**
- **Zeit (in Minuten):** Freigabezeit für die **komplette Lösung** (meist deutlich später als die Hinweise).
- **Text:** Lösungstext.
---
## Verhalten in der App
- Die Uhr startet **beim Eintritt in die Szene**.
- Sobald ein Hinweis freigegeben ist, erscheint in der UI das **Hinweis-Badge** (mit Zähler) – Spielende können ihn dann **öffnen**.
- Hinweise bleiben nach Freigabe **dauerhaft verfügbar** (auch wenn die Szene kurz verlassen wird).
- **Gelesen/ungelesen** wird getrackt; das Badge-Icon zeigt den Status (z. B. noch ausstehende/neu verfügbare Hinweise).
- Erreicht die Szene das Lösungs-Zeitfenster, wird zusätzlich **„Lösung“** angeboten.
- Wenn du einzelne Felder leer lässt, werden sie **übersprungen**.
> Tipp: Die Hinweiszeiten sind **relativ** und **unabhängig** voneinander. Beispiel: H1 nach 2 min, H2 nach 5 min, Lösung nach 10 min.
---
---
## Gute Praxis
- **Staffelung:**
- H1: kleiner Schubs (z. B. Richtung/Ort).
- H2: konkreterer Tipp.
- H3: fast direkt vor die Nase.
- Lösung: vollständig.
- **Zeiten real testen:** GPS-/Wegzeiten und Gruppen-Tempo berücksichtigen.
- **Klar & kurz schreiben:** Ein Hinweis = ein Gedanke.
- **Keine Spoiler in H1:** Spannung erhalten.
- **Mit Countdown kombinieren:** Bei engem Zeitlimit Lösung ggf. früher anbieten.
- **Barrierefrei:** Wichtige Zahlen/Begriffe eindeutig (keine reinen Farbhilfen).
---
## Beispiele
- Stadt-Rätsel: `H1 2′` „Schau auf Augenhöhe an der Tür.“, `H2 4′` „Links neben der Klingel.“, `Lösung 7′` „Code: 4711“.
- Suchaufgabe im Wald: `H1 3′` „Folge dem schmalen Pfad.“, `H2 6′` „Moosiger Stein rechts.“
---
## Kurz-Checkliste
1. Für jede Szene sinnvolle **H1–H3 + Lösung** planen.
2. **Zeiten** eintragen (nicht benötigte Felder leer lassen).
3. **Texte** klar formulieren.
4. Szene testen → Zeiten ggf. anpassen.
# Foto-Challenge
Mit der **Foto-Challenge** sollen Spielende ein **neues Foto** aufnehmen, das zu deiner **Aufgabenbeschreibung** passt (z. B. „Brücke **und** Kirchturm gemeinsam im Bild“). Das Foto wird automatisch bewertet; je nach **Score** (0–100) leitest du in eine **Erfolgs-** oder **Fehl-Zielszene** weiter.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/55Ggrafik.png)Felder
**Aufgabenbeschreibung**
Kurze, klare Anweisung, was auf dem Foto zu sehen sein soll.
Beispiele:
- „Rotes Fahrrad **vor** dem Brunnen“
- „Zwei Straßenschilder **im selben Bild**“
- „Teammitglied hält Ticket **lesbar** in die Kamera“
**Schwellenwert (0–100)**
Grenze, ab der die Challenge als **bestanden** gilt.
- **Niedriger** = toleranter, **höher** = strenger.
- Praxiswerte: Outdoor 60–75, nahe/klare Motive 70–85.
**Retry erlauben**
- **An**: Nach Fehlversuch direkt **neues Foto** möglich.
- **Aus**: Bei Fehlversuch geht es sofort in die **Fehl-Zielszene**.
**Erfolgs-Zielszene / Fehl-Zielszene**
Szenen für **bestehen** bzw. **nicht bestehen** (z. B. „Gut gemacht!“ / „Versuch’s noch mal – Tipp“).
**Notiz (optional)**
Interne Redaktionsnotiz (für dich, nicht sichtbar im Spiel).
---
## Verhalten in der App
1. Die App öffnet die **Kamera** und zeigt die Aufgabenbeschreibung.
2. Nach dem Auslösen wird das Bild **automatisch bewertet** (Score 0–100).
3. **Score ≥ Schwellenwert** → **Erfolgs-Zielszene**.
4. **Score < Schwellenwert** → mit **Retry** neuer Versuch, sonst **Fehl-Zielszene**.
5. (Optionales Projektverhalten) Aufgenommene Fotos können im **Verlauf/Upload** erscheinen.
> Kamera-/Speicherrechte müssen erlaubt sein. Diese Funktion erfordert zwingend eine Internetverbindung. Die Aufgabenprüfung erfolgt mit künstlicher Intelligenz.
---
## Gute Aufgaben schreiben (wirkt direkt auf den Score)
- **Konkret statt vage:** „Brücke **und** Kirche im selben Bild“ statt „Macht ein schönes Foto“.
- **Objekte & Beziehungen nennen:** „Person hält **Zeitung** **vor** Café-Schild“.
- **Zählwörter verwenden:** „**Zwei** Straßenschilder“, „**eine** rote Blume“.
- **Meide Negationen:** „ohne Menschen“ ist schwer zuverlässig prüfbar – besser positiv formulieren.
- **Lesbarkeit/Qualität:** Wenn Text erkennbar sein soll, schreibe „**Text lesbar**“.
- **Kontext nutzen:** Ortsmerkmale (Brunnen, Turm, Logo) sind leichter prüfbar als Stimmungen.
---
## Praxis-Tipps
- **Schwelle testen:** Starte mit **70** und prüfe vor Ort unterschiedliche Licht-/Winkel-Situationen.
- **Hinweise kombinieren:** Nutze das **Hinweise**-Feature, falls Teams häufiger scheitern.
- **Cheat-Sicherheit:** Galerie-Import deaktivieren (falls Projektoption vorhanden) → nur **Live-Foto**.
- **Klare Kommunikation:** Kurz sagen, was bei Misserfolg passiert („Du kannst es gleich nochmal versuchen“).
- **Datenschutz:** Keine identifizierbaren Personen als Pflichtobjekt in sensiblen Bereichen.
---
## Kurz-Workflow
1. **Aufgabenbeschreibung** formulieren.
2. **Schwellenwert** setzen (z. B. 70), **Retry** wählen.
3. **Erfolgs-** und **Fehl-Zielszene** festlegen.
4. Speichern und **vor Ort testen** → Schwelle ggf. feinjustieren.
So baust du flexible Foto-Missionen, die ohne Referenzbild auskommen und trotzdem automatisch bewertet werden.
# Javascript
Mit **Javascript** kannst du Szenen mit eigener Logik erweitern – z. B. UI anpassen, kleine Effekte einbauen, Zeiten messen oder externe Schnittstellen triggern.
> **Wichtig:** JS ist **inkonstant** – beim Betreten **jeder** Szene wird es **neu** ausgeführt. Teile, die überall gelten sollen, gehören in die **Masterszene** `[[ ]]`.
> Starte dein Script immer **leicht verzögert**, damit die Szene fertig gerendert ist:
```
setTimeout(function () { // dein Code hier }, 300);
```
---
## Gute Praxis (sehr wichtig)
- **Idempotent denken:** Code darf mehrfach laufen, ohne doppelten Effekt zu erzeugen.
Nutze einen „Once“-Guard:
- **Aufräumen:** Wenn du `setInterval`/Event-Listener setzt, räume sie auf (oder nutze `{ once:true }` bei `addEventListener`).
- **Robust warten:** Wenn du ein Element brauchst, das evtl. später kommt, warte kurz darauf:
```
function waitSel(sel, cb, tries=20){ const el = document.querySelector(sel); if (el) return cb(el); if (tries--) return setTimeout(()=>waitSel(sel, cb, tries), 100); } setTimeout(()=>waitSel('.btn-primary', btn=>{ btn.classList.add('pulse'); }), 200);
```
- **Keine Blocker:** Lange Schleifen vermeiden; lieber Timings/Promises verwenden.
- **Fallbacks:** Netzaufrufe können an CORS/Offline scheitern → Fehler behandeln.
---
## Häufige Mini-Rezepte
### 1) Button-Label/Style anpassen
### 2) Szene nach X Sekunden automatisch fortsetzen
`setTimeout(function () { // z.B. per Klick auf einen Weiter-Button simulierenconst next = document.querySelector('[data-action="next"], .btn-continue'); if (next) next.click();}, 10000); // 10 s`
### 3) Einfache „Einmal“-Animation
`setTimeout(function () { const el = document.querySelector('.dialog, .content'); if (!el) return; el.animate([{opacity:0, transform:'translateY(8px)'},{opacity:1, transform:'none'}], {duration:400, easing:'ease-out'});}, 150);`
### 4) Soft-Gate per Tageszeit (Beispiel)
`setTimeout(function () { const h = newDate().getHours(); if (h < 8 || h > 20) { alert('Tipp: Diese Aufgabe klappt am besten bei Tageslicht.'); }}, 250);`
### 5) Ereignis mitzählen (lokal)
`setTimeout(function () { const k = 'tries_safe_open'; const n = 1 + +(localStorage.getItem(k) || 0); localStorage.setItem(k, n); if (n >= 3) { console.log('3 Fehlversuche – zeige Hilfe.'); // hier könntest du z.B. einen Hilfe-Button einblenden }}, 200);`
---
## Typische Stolperfallen
- **Doppelte Listener**: Bei jeder Rückkehr in die Szene wird JS neu ausgeführt → `once`-Option nutzen:
- **Zu früher Zugriff**: Ohne Delay (`setTimeout`) existieren DOM-Elemente evtl. noch nicht.
- **Starke Manipulation am Layout**: Bedenke, dass die App auf vielen Displaygrößen läuft – nur sanft stylen.
- **Blockierende Prompts/Alerts**: Sparsam einsetzen; sie unterbrechen den Flow.
---
## Checkliste
1. **Delay** einbauen (`setTimeout` 150–300 ms).
2. **Idempotent** & ggf. **Once-Guard** verwenden.
3. Wo nötig: **waitSel**/Observer nutzen.
4. Netz-/Fehlerfälle abfangen.
5. Auf mehreren Geräten testen.
Damit bekommst du stabile, kleine Scripts, die zuverlässig mit der Szenenlogik zusammenspielen.
Gute Beispiele "ready to use" findest du auch unter [Hacks](https://docs.scenario.app/books/storyboard/chapter/hacks-tipps "05 Hacks & Tipps").
# Stylesheets (Benutzerdefinierte Stile)
Mit **Stylesheets** kannst du eigenes **CSS** einbinden.
Wichtig: **Stylesheets sind konstant** – einmal geladen, wirken sie **im ganzen Spiel** (alle Szenen). Plane also **global** und arbeite bevorzugt mit **Klassen**, nicht mit generischen Element-Selektoren.
---
## Grundprinzipien
- **Global & dauerhaft**: Regeln gelten szenenübergreifend, bis du sie änderst oder entfernst.
- **Mit Klassen arbeiten**: Viele Features (z. B. 360°-Hotspot) haben ein Feld **„CSS-Klasse“** – dort trägst du Klassen wie `hs-primary` ein und definierst sie hier im Stylesheet.
- **Schonend stylen**: Keine globalen Resets wie `*{ margin:0 }` oder `button{… }`, das kann UI-Elemente der App unerwartet verändern.
- **Spezifität niedrig halten**: Lieber `.hs-primary` als `div .container .hs-primary`. So bleibt es wartbar.
---
## Beispiele
### 1) Eigene Hotspot-/Button-Stile
```
/* im Feature als CSS-Klasse: hs-primary */ .hs-primary{ background: #3faace; color:#fff; border:1px solid rgba(0,0,0,.25); border-radius:10px; padding:.5rem .75rem; box-shadow:0 6px 16px rgba(0,0,0,.15); } .hs-primary:hover{ transform:translateY(-1px); }
```
### 2) Utility-Klassen für Inhalte
Nutze sie in Textblöcken, Dialogen, etc. (wo Klassen gesetzt werden können).
```
.scene-fadein{ animation:scnFade .45s ease-out both; }
@keyframes scnFade{ from{ opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
```
---
## Best Practices
- **Scoping**: Wenn möglich, gib Szenen/Features eigene Klassen und style **nur** diese (`.quiz-intro .u-muted`).
- **Kontrast & Lesbarkeit**: Farben so wählen, dass AA-Kontrast (≥ 4.5:1) erreicht wird – besonders bei Buttons/Links.
- **Animationen sparsam**: Kurze, dezente Effekte (≤ 500 ms, `ease-out`).
- **Testen auf Geräten**: Unterschiedliche Displays, Dark-Mode und Zoomstufen durchprobieren.
- **Rollback**: Wenn etwas „zu global“ wirkt, überschreibe gezielt oder entferne die Regel (Stylesheets wirken sofort in allen Szenen).
---
## Mini-Checkliste
1. Klassen in Features vergeben (z. B. **CSS-Klasse** im Hotspot-Editor).
2. Passende Regeln hier definieren (keine globalen Tag-Selektoren).
3. Responsiv & kontrastreich gestalten.
4. Auf mehreren Geräten testen.
So bleibt dein Look konsistent – und trotzdem präzise steuerbar pro Feature/Szene.
# Team-Sync deaktivieren
Mit **Team-Sync** werden Szenenwechsel können normalerweise **für das ganze Team gespiegelt** werden.
Das Feature **„Team-Sync deaktivieren“** unterbricht diese Synchronisierung **für die aktuelle Szene**.
---
## Was passiert genau?
- **In dieser Szene gilt:**
Jeder spielt **lokal** auf seinem Gerät. **Szenenwechsel**, Button-Klicks, Medien-Starts usw. werden **nicht** an die anderen Teamgeräte gespiegelt.
- **Danach:**
Verlässt man die Szene (oder in der nächsten Szene ohne dieses Feature), greift der normale **Team-Sync wieder**.
- **Spielstand:**
Globale Zustände (z. B. Punkte/Variablen/Inventar, die du per Logik setzt) bleiben **teamweit** konsistent – du unterdrückst nur die **Navigation/Sync der Szene**, nicht deine eigenen Spielregeln.
> Kurz: **Navigation & UI-Interaktionen lokal**, **deine Variablen/Inventar-Logik weiterhin global** (so wie du sie definierst).
---
## Typische Einsätze
- **Geheime Auswahl / Voting**
Jede Person wählt erst **alleine**; danach führst du per Logik wieder zusammen (z. B. Auswertungsszene).
- **Parallele Aufgaben**
Zwei Hinweise/Wege werden separat gelöst, ohne dass ein Gerät die anderen „mitzieht“.
- **Medien in Ruhe ansehen**
Video/Audio individuell abspielen, ohne dass ein „Weiter“ alle anderen rauswirft.
---
## So nutzt du es
1. **Feature „Team-Sync deaktivieren“** in **die betreffende Szene** einfügen.
2. Buttons/Navigation normal anlegen – sie wirken **nur lokal**.
3. In der Folgeszene (ohne dieses Feature) kann das Team wieder synchronisieren.
---
## Best Practices
- **Kommuniziere es im Text**: „Ihr entscheidet jetzt **jeweils für euch**.“
- **Wieder zusammenführen**: Plane eine **gemeinsame Folgeszene** (z. B. Auswertung), in der Team-Sync wieder aktiv ist.
- **Soft-Locks vermeiden**: Achte darauf, dass jede lokale Entscheidung **einen Weg zurück** oder **einen klaren Abschluss** hat.
- **Status trotzdem speichern**: Nutze Variablen/Inventar, um individuelle Eingaben zu sichern und später auszuwerten.
- **Karten/Orts-Trigger**: Wenn in dieser Szene noch Wegpunkte/QR/NFC genutzt werden, lösen sie **nur auf dem jeweiligen Gerät** aus – plane die Folgeaktionen entsprechend.
---
## Muster
- **Geheime Wahl**: Team-Sync aus → alle wählen A/B → Variable pro Gerät setzen → Sammelszene liest Variablen aus und zeigt Ergebnis.
- **Parallel-Lesen**: Jeder öffnet ein anderes Dokument/Foto im Inventar → danach gemeinsamer Button „Fertig – weiter“.
Mit „**Team-Sync deaktivieren**“ verhinderst du gezielt das Mitziehen der Gruppe – perfekt für individuelle Schritte innerhalb eines gemeinsamen Spiels.
# 🛠️ Hacks & Tipps
Kleine Kniffe mit großer Wirkung: hier findest du kompakte Rezepte, Code-Snippets und Best-Practices, die Szenen schneller schöner und smarter machen. Ideal zum Nachbauen – von Mini-Effekten bis zu cleveren Utilities.
# Passwort-Abfrage innerhalb einer Szene
Wenn du eine eigene Passwort- oder Wertabfrage implementieren möchtest, dann erstelle zunächst eine neue, leere Szene.
1. Füge die Funktion "Javascript" hinzu:
```javascript
window.passwort = function () {
let content = ''
$.confirm({
title: 'Bitte gib ein gültiges Passwort ein:',
content: content,
buttons: {
'Flug suchen': {
text: 'Passwort prüfen',
btnClass: 'btn-blue',
action: function () {
var passwort = this.$content.find('#passwort').val();
if(!passwort){
$.alert('Bitte gib ein Passwort ein!');
return false;
}
if(passwort == "123456") {
// do something!
$.alert('Richtig!');
window.story.go('ZIELSZENE'); // Hier den Titel deiner Ziel-Szene eingeben
} else {
$.alert('Das Passwort ' + name + ' ist leider falsch!');
}
}
},
'Abbrechen': function () {
//close
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
e.preventDefault();
});
}
});
};
```
2\. Editiere in deiner Szene den HTML Code und füge folgenden Coder an einer beliebigen Stelle ein:
```html
```
# Typewriter Effekt
#### Demo
####
Wenn der Text in einer Szene wie von einer Schreibmaschine getippt werden soll, dann kann dieser Effekt mit einem Javascript Code in einer globalen Sektion erreicht werden:
#### Globale Sektion -> Funktion Javascript
```javascript
window.showSpeechBubble = function (text) {
var output = document.getElementById("output");
// Sprechblase erstellen
var bubble = document.createElement("div");
bubble.classList.add("speech-bubble");
output.appendChild(bubble);
// Text Typing Effekt
let index = 0;
bubble.style.opacity = 1; // Blendet die Sprechblase ein
function typeWriter() {
// HTML-Interpretation sicherstellen
bubble.innerHTML = text.substring(0, index);
if (index < text.length) {
index++;
setTimeout(typeWriter, 50); // Geschwindigkeit des Tippens
}
}
typeWriter();
}
```
#### Globale Sektion -> Stylesheet
\*optional, damit sieht der Text ähnlich wie eine Sprechblase aus.
```css
.speech-bubble {
position: absolute;
top:100px;
left: 5%;
max-width: 90%;
padding: 10px;
background-color: white;
border-radius: 10px;
border: 2px solid black;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
font-family: mom;
font-size: 14px;
color: black;
line-height: 1.4;
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.5s; /* Sanftes Einblenden */
}
.speech-bubble::after {
position: absolute;
left: 5%;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: white;
border-bottom: 0;
border-left: 0;
margin-left: -5px;
}
```
#### Szene -> Funktion Javascript
```javascript
setTimeout(function() {
window.showSpeechBubble('HIER DER TEXT, DER GETIPPT WERDEN SOLL');
},2000);
```
####
# KI-Generator
Der **KI-Generator** baut dir aus einer kurzen Beschreibung einen **Story-Entwurf** mit **Szenenstruktur, Titeln und Textideen**. Perfekt, um schnell vom leeren Board zu einem spielbaren Rohling zu kommen.
---
##
## Felder
**Beschreibe dein Szenario**
Freitext-Prompt: Worum geht’s? Wo spielt es? Welche Orte/Elemente sollen vorkommen?
Beispiel:
> „Erstelle eine Geschichte vom verschwundenen Gold in der Braunschweiger Innenstadt, die zu den 3 wichtigsten Sehenswürdigkeiten führt.“
**Max. Szenen**
Obergrenze für die erzeugte Szenenzahl (z. B. *10*). Die KI versucht, darunter zu bleiben.
**Sprache**
Sprache des Entwurfs (z. B. *Deutsch*, *Englisch* …).
**Tageslimit**
Oben siehst du, wie viele **Generierungen heute** noch möglich sind (z. B. *0 verwendet • übrig: 20/Tag*).
**Buttons**
- **Generieren** – startet die Erstellung.
- **Abbrechen** – schließt ohne Ergebnis.
---
## Ergebnis – was erzeugt wird
- **Szenen** mit **Titeln** und **Kurztexten/Dialogschnipseln**
- **lineare oder leichte Verzweigungen** (je nach Prompt)
- **Platzhalter** für Interaktionen (z. B. „Hier QR/Wegpunkt einsetzen“)
- **Ideen** für Hinweise, Rätsel oder Medien
> Der Entwurf ist absichtlich **leichtgewichtig**: Du verfeinerst danach Inhalte, fügst echte Trigger (Wegpunkt, QR/NFC), Medien und Logik hinzu.
---
## Typischer Workflow
1. **Prompt schreiben** → *Generieren*.
2. Entwurf prüfen: **Reihenfolge**, **Ton**, **Länge**.
3. Szenen öffnen und mit Features füllen (Wegpunkte, Dialoge, Eingaben, Medien …).
4. **Feintuning**: Namen, Orte, Hinweise, Inventar/Variablen ergänzen.
5. **Vorschau** starten und iterieren.
---
## Gute Prompts – Tipps
- **Ort + Ziel + Stimmung**:
*„Outdoor-Rätsel für Familien im Stadtzentrum, 60–90 Min., freundlich-entspannt.“*
- **Pflichtstationen nennen**:
*„Muss Rathaus, Dom und Burgplatz enthalten.“*
- **Interaktionstypen** nennen\*\*:\*\*
*„Mind. 2 QR-Scans, 1 Foto-Challenge, 1 Dialog.“*
- **Grenzen setzen**:
*„Max. 8 Szenen, keine Horror-Elemente, barrierearm formulieren.“*
---
## Bearbeiten & Regenerieren
- Du kannst **jeden erzeugten Knoten** (Szene/Notiz) normal bearbeiten.
- Unpassendes einfach löschen; bei Bedarf **erneut generieren** (gleicher oder angepasster Prompt).
- Mehrere Läufe lassen sich **kombinieren** (Entwürfe mischen).
---
## Hinweise & Grenzen
- **Echtwelt-Daten** (Koordinaten, Öffnungszeiten etc.) sind **Platzhalter** – prüfe sie und setze echte Wegpunkte/Trigger.
- **Konsistenz**: Namen/Begriffe ggf. vereinheitlichen.
- **Urheberrecht**: Für Bilder/Audio/Video eigene Assets nutzen.
- **Datenschutz**: Keine sensiblen Personendaten in Prompts verwenden.
---
## Kurz-Checkliste
- Klarer Prompt (Ort, Ziel, max. Szenen, Stil).
- Generieren → Entwurf sichten.
- Features & Logik ergänzen.
- Vorschau testen, iterieren.
So kommst du in Minuten vom **Nichts** zu einem **spielbaren Grundgerüst** – und kannst dich aufs kreative Feintuning konzentrieren.
# 🖥️ Backend + kommerzielle Features
Admin-Werkzeuge und Business-Features für Betrieb, Auswertung und Monetarisierung.
# Modul: Statistik
Das **Statistik-Modul** bündelt alle Messwerte rund um deine Spiele – vom Spielverlauf (Starts/Abschlüsse/Abbrüche) über Besucherzahlen bis zu Commerce-Daten (Bestellungen/Umsatz) und Standort-Insights. Du kannst Zeiträume filtern, nach „day/week/month“ gruppieren, mehrere Spiele vergleichen und die Daten exportieren.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/kjBgrafik.png)
[](https://docs.scenario.app/uploads/images/gallery/2025-09/KR4grafik.png)
[](https://docs.scenario.app/uploads/images/gallery/2025-09/7jFgrafik.png)
[](https://docs.scenario.app/uploads/images/gallery/2025-09/nZmgrafik.png)
---
## Oberfläche & Funktionen
**Spiele (Org)**
- Wähle 1…n Spiele aus deiner Organisation.
- **Tipp:** Ohne Auswahl nutzt das Modul automatisch das **aktuell geladene Spiel**.
**Zeitraum & Gruppierung**
- **Start/Ende** wählen (Schnellfilter: **heute, diese Woche, letzte 7 Tage, …**).
- **group by:**`day | week | month` (verdichtet Daten für lange Zeiträume).
- **Skalierung:****auto** (achsenabhängig) oder feste Skalen.
**Aktionen**
- **Aktualisieren** – neuen Query ausführen.
- **CSV / PDF** – Export der aktuell gefilterten Ansicht.
**Übersicht (KPI-Kacheln)**
- **Gestartet** · **Abgeschlossen** · **Abgebrochen** · **Ø-Zeit** (Sek.)
- **Besucher (App)** · **Besucher (Browser)**
- **Bestellungen** · **Umsatz (€)** · **Unlocks**
- **Gebucht** · **Terminiert**
Farblegende unterhalb der Kacheln entspricht den Farben in den Charts.
**Charts & Tabellen**
- Balkendiagramm je Periode (entspr. group by).
- Tabellen **Playlog je Periode** und **Commerce & Termine je Periode** mit denselben Kennzahlen.
**Top-Listen & Heatmap**
- **Top Locations** (Geostandorte, anonymisiert/aggregiert).
- **Top Browser / User-Agents** (Technik-Profil deiner Nutzer:innen).
- **Heatmap (Top-Standorte)** auf OSM-Karte – Dichteverteilung deiner Reichweite.
**Rechtehinweis**
- Im Footer siehst du dein **Lizenz-Level** und ob du **Admin** bist (Admin = voller Zugriff innerhalb deiner Org).
---
## Metriken – Definition (Kurz)
- **Gestartet**: Spielstarts (Sessions).
- **Abgeschlossen**: Erreichtes `[[End]]`.
- **Abgebrochen**: Verlassene Sessions, die nicht im Endknoten landen.
- **Ø-Zeit**: Durchschnittliche Spieldauer (Start → Ende/Abbruch) in Sekunden.
- **Besucher (App/Browser)**: Reichweite nach Plattform.
- **Bestellungen / Umsatz (€)**: Commerce-Events aus verbundenem Shop/Checkout.
- **Unlocks**: Freischaltungen (z. B. Paid Unlocks, Codes).
- **Gebucht / Terminiert**: Terminbuchungen / angesetzte Termine (falls Modul aktiv).
> **Datenlatenz:** Aggregationen können je nach Volumen einige Minuten verzögert sein.
---
## Lizenz-Matrix (vorläufig)
> **Alle unten genannten Statistik-Funktionen sind grundsätzlich in allen Lizenzmodellen nutzbar.**
> Unterschiede (z. B. Limits, Export-Optionen, Vergleich über mehrere Spiele) staffeln wir hier schon vor – **konkrete Kontingente/Größen tragen wir im Lizenz-Kapitel nach**.
Statistik-Funktion
Free
Basic
Pro
Enterprise
Notizen
Dashboard/KPIs, Charts, Tabellen
-
✓
✓
✓
Zeitraum + group by
Mehrere Spiele auswählen/vergleich
–
◐
✓
✓
Vergleich/Benchmark
CSV-Export
-
-
-
✓
Umfang/Limits je Lizenz
PDF-Export
–
-
-
✓
Branding/Logo ab Pro
Top-Locations & Top-Browser
-
-
-
✓
Abh. von Datenlage
Heatmap (Top-Standorte)
-
-
-
✓
Bei geringer Datenmenge ggf. ausgeblendet
Commerce-Metriken (Bestellungen/Umsatz)
–
-
✓
✓
Wenn Commerce integriert
Termine (Gebucht/Terminiert)
–
✓
✓
✓
Wenn Terminmodul aktiv
API-Zugriff auf Statistikdaten
–
–
–
**✓**
**Enterprise:**
direkter API-Endpoint
**Legende:** ✓ = enthalten · ◐ = enthalten mit Limit (Details im Lizenz-Kapitel) · – = nicht enthalten.
> **Enterprise:** Zusätzlich zu UI/Export ist der **direkte Zugriff per API** möglich (Authentifizierung via JWT-Token; Endpunkte für aggregierte Zeitreihen, Top-Listen und Roh-Events). Damit kannst du BI-Tools (z. B. Power BI, Looker, Grafana) oder interne Dashboards anbinden.
---
## Best Practices
- **Kurze Reviews**: Für laufende Kampagnen „letzte 7 Tage, group by day“.
- **Monatsreports**: „dieser/letzter Monat, group by day/week“, Export als **PDF** für Stakeholder.
- **A/B-Vergleich**: Zwei Spiele/Varianten markieren → **Vergleich** aktivieren (ab Stufe, siehe Matrix).
- **Qualität messen**: **Abgeschlossen/gestartet** (Completion-Rate) und **Ø-Zeit** im Blick behalten.
- **Reichweite verstehen**: Top-Locations & Browser helfen bei Sprach- und Geräte-Optimierung.
- **Daten sauber halten**: Test-Sessions in getrenntem Spiel/Zeitraum laufen lassen, damit Produktionszahlen sauber bleiben.
---
## Datenschutz & Compliance
- IP-basierte Standortdaten werden **anonymisiert/aggregiert**.
- Personendaten aus Commerce/Terminen unterliegen der **DSGVO** und erscheinen nur **aggregiert** im Statistik-Modul.
- API-Zugriff (Enterprise) erfolgt über **rollenbasierte Tokens**; Logs sind revisionsfähig.
# Modul: Organisation- und Lizenzverwaltung
Im **Organisation verwalten**-Bereich administrierst du **Firma/Team, Benutzer:innen, Gruppen, Boards** sowie dein **Abo/Lizenzmodell**. Alles, was hier eingestellt wird, gilt **org-weit** für alle Projekte.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/j3jgrafik.png)
## Aufbau
### Seitenleiste (links)
- **Übersicht** – Kompakte Org-Karte mit Nutzer-/Gruppenzählern, aktivem Abo & Feature-Flags, Kontaktdaten, Logo.
- **Abo & Lizenzen** – Plan, Limits, Abrechnung (Zahlart, Rechnungen), Upgrade/Downgrade.
- **Planung** – (falls gebucht) Termin-/Slot-Einstellungen für Commerce & Events.
- **Benutzer** – Mitglieder & Gäste verwalten.
- **Gruppen** – Teams/Abteilungen, Rechte-Bündelung.
- **Boards** – Projekt-Boards der Organisation (Besitz, Freigabe, Archiv).
### Übersicht (mittig)
- **Benutzer**: z. B. `8 / 100` → aktueller Stand vs. **User-Limit**.
- **Gruppen**: z. B. `3 / 10` → aktueller Stand vs. **Group-Limit**.
- **Abo/Features** (Beispiel „Enterprise – AKTIV“): Badges wie
`Can Release Public`, `Can Release Private`, `User Limit 100`, `Stripe Connect`,
`Can Allow Guests`, `Can View Stats`, `Can Release Badges`, `Group Limit 10` …
- **Kontaktdaten & Logo**: Firmendaten pflegen, Logo hochladen (erscheint in Freigaben/Rechnungen, je nach Plan).
---
## Benutzer
- **Einladen** per E-Mail (Rolle wählen):
- **orgAdmin**– volle Org-Rechte inkl. Abo/Abrechnung.
- **grpAdmin** – Spiele/Boards bearbeiten, keine Abo-Rechte.
- **Nutzer** – kann seine eignen Boards sehen und bearbeiten, aber nicht die anderer Nutzer.
- **Aktionen**: Rolle ändern, deaktivieren/reaktivieren, entfernen.
- **Limits**: Das **User-Limit** ergibt sich aus deinem Plan (Anzeige auf der Übersicht).
## Gruppen
- Dienen zur **Rechte-Bündelung** (z. B. „Filiale Berlin“, „Marketing“).
- **Mitglieder zuweisen**, **Standard-Rollen** pro Gruppe definieren.
- **Zugriff auf Boards/Spiele** gruppenweise vergeben.
- **Group-Limit** laut Lizenz (Anzeige auf der Übersicht).
## Boards
- **Anlegen/Umbenennen**, **Besitz** zuweisen (Org/Person), **freigeben** (Gruppen/Benutzer), löschen.
## Abo & Lizenzen
- **Planstatus** (z. B. **Enterprise – aktiv**), **Laufzeit**, **Zahlart**, **Rechnungen** (Download).
- **Upgrade/Downgrade** mit Vorschau der neuen **Limits & Features**.
- **Stripe Connect** (falls aktiv) für Commerce-Auszahlungen.
- **Freigabe-Arten**: öffentlich/privat (abhängig vom Plan).
- **Feature-Flags** sind im UI sichtbar – so erkennst du, was dein Plan erlaubt.
> **Hinweis:** Manche Funktionen (z. B. Gäste, Commerce, Badges) benötigen den passenden Plan/Flag. Die **konkreten Kontingente** (z. B. max. Nutzer, max. Gruppen) stehen im Abo-Kästchen und im Lizenz-Kapitel der Doku.
---
## Rollen & Rechte (Kurz)
Bereich
orgAdmin
grpAdmin
Nutzer
Abo/Abrechnung
✓
–
–
Benutzer/ Gruppen verwalten
✓
✓
–
Boards/Spiele bearbeiten
✓
✓
✓ (eigene)
Boards/Spiele ansehen (Preview)
✓
✓
✓ (eigene)
Releases/Publizierung
✓
✓
–
\* **Gast** nur, wenn Lizenz „Allow Guests“ aktiv; Umfang projektabhängig (◐).
---
## Lizenzunterschiede (vorläufige Matrix)
> Alle Kernfunktionen der Org-Verwaltung sind in jedem Plan vorhanden; **Limits & Freigaben** unterscheiden sich. Die genauen Zahlen/Optionen füllen wir im Lizenz-Kapitel aus; das UI zeigt deine **aktuellen Limits** (z. B. **User Limit 100**, **Group Limit 10**).
Feature/Limit
Free
Standard
Pro
Enterprise/Education
Öffentliche Releases
✓
✓
✓
✓
Private Releases
-
✓
-
✓
Gäste zulassen
–
-
-
✓
Nutzer-Limit
-
-
2
100
Gruppen-Limit
-
-
-
10
Stripe Connect (Commerce)
–
-
✓
✓
Statistik-Zugriff (UI)
-
✓
✓
✓
Statistik-API (direkt)
–
–
–
**✓**
Legende: ✓ enthalten · ◐ enthalten mit Limit · – nicht enthalten · • je Plan definiert.
---
## Best Practices
- **Org sauber halten**: Inaktive Nutzer entfernen, Gruppen klar benennen.
- **Rechte minimal** vergeben (Viewer statt Editor, wenn kein Edit nötig).
- **Brand konsistent**: Logo & Kontaktdaten pflegen – erscheinen in Freigaben/Belegen.
- **Limits im Blick**: Bei Erreichen von User/Group-Limit frühzeitig upgraden.
- **Auditing**: Admin-Zugriffe nur an wenige, dokumentierte Personen vergeben.
So behältst du **Team, Rechte und Plan** im Griff – und siehst jederzeit, welche Features deine Lizenz freischaltet.
# Modul: Stripe-Zahlungen (via Stripe-Connect)
> Verfügbar in **Professional** und **Enterprise**.
> Voraussetzung: **aktive Lizenz** + verknüpftes **Stripe-Connect-Konto** (pro Organisation).Mit Stripe kannst du **kostenpflichtige Spiele** anbieten (Buchungen **nur mit Kalender/Terminen**). Die **Preise** legst du **pro Spiel** und – falls gewünscht – **pro Zeitslot** fest.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/O1Dgrafik.png)
## Erlöse & Auszahlungen
- **Revenue-Split:****60 %** des **Netto-Verkaufspreises** gehen an den Anbieter (deine Organisation).
- **Auszahlung:** innerhalb von **10 Tagen** nach **Ablauf** des gebuchten Termins (nicht nach Kaufzeitpunkt).
- **Übersicht „Deine Auszahlungen“**
- **Gebucht – Auszahlung folgt nach Ablauf:** künftige/abzurechnende Buchungen mit **voraussichtlichem Auszahlungsdatum**.
- **Bereits bezahlt, aber noch nicht gebucht:** Zahlungen ohne verbindlichen Slot – Auszahlung **nach Buchung & Ablauf**.
> Steuern, Gebühren, Rückerstattungen oder Chargebacks werden gemäß Stripe-Einstellungen verrechnet.
---
## Einrichtung (Kurz)
1. **Lizenz prüfen:** Professional/Enterprise aktiv.
2. **Stripe Connect verbinden:** in **Organisation → Abo & Lizenzen** (oder Commerce-Einstellungen).
3. **Kalender aktivieren** und **Zeitslots** anlegen.
4. **Preis festlegen:** im Spiel (Basispreis).
5. Veröffentlichung: Spiel **öffentlich** anbieten – Buchung & Zahlung laufen anschließend über Stripe.
---
## Workflow für Buchungen
1. Spieler:in wählt **Spiel + Zeitslot** → bezahlt über Stripe.
2. Buchung erscheint im Kalender; Status in der Auszahlungsübersicht wird geführt.
3. **10 Tage nach Slot-Ablauf** wird die **Auszahlung** an dein Stripe-Konto angewiesen.
---
## Hinweise & Best Practices
- **Stornobedingungen** klar kommunizieren; Stornierung über die scenario.app vor Termin ablauf jederzeit möglich.
- **Preislogik**: Peak-Zeiten teurer, Off-Peak günstiger → pro Slot definieren.
- **Accounting**: Exportiere Zahlungen/Buchungen für deine Buchhaltung; Statistik-Modul zeigt **Bestellungen & Umsatz** aggregiert.
- **Compliance**: Achte auf korrekte Steuereinstellungen in Stripe (Land, USt-Satz, Belege).
- **Support**: Bei fehlenden Auszahlungen zuerst **Slot-Ablaufdatum** und **10-Tage-Fenster** prüfen.
So bietest du deine Spiele „ready to sell“ an – mit klaren Auszahlungsfristen, flexiblen Preisen und automatischer Abwicklung über Stripe Connect.
# Modul: Badges (Belohnungen)
**Badges** sind **Auszeichnungen**, die **Spieler:innen automatisch** erhalten, wenn sie bestimmte **Leistungen** oder **Serien** schaffen – z. B.:
- eine **Serie von Spielen** einer Stadt/Route erfolgreich abschließen
- ein Spiel **unter einer Zielzeit** schaffen
> **Lizenz-Hinweis:** **Nur Nutzer:innen mit Storyboard-Lizenz** können eigene Badges **erstellen und einreichen**. Ohne Lizenz ist das **nicht** möglich.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/TwLgrafik.png)
---
## Oberfläche
- **+ Neues Badge** – neues Badge anlegen.
- **Statusfilter** (rechts): **Entwurf** · **In Prüfung** · **Freigeschaltet**.
---
## Badge anlegen (was du definierst)
- **Titel & Icon** (Grafik/Emoji) – Name und Erscheinungsbild der Auszeichnung.
- **Beschreibung** – kurz, wofür das Badge verliehen wird.
- **Kriterien/Regeln** – wann das Badge vergeben wird, z. B.:
- **Serien-Kriterium:** *Alle Spiele aus Set X abgeschlossen*.
- **Zeit-Kriterium:** *Spiel Y in ≤ N Minuten beendet*.
> Regeln greifen **automatisch** auf Basis der Spiel-Events (Start/Ende/Abbruch, Zeiten, usw.).
---
## Workflow & Freigabe
1. **Erstellen**: Badge mit Titel, Icon, Beschreibung, Regeln.
2. **Einreichen**: Status **„In Prüfung“** (org-interner Review).
3. **Freigeben**: Nach Freigabe **„Freigeschaltet“** – Regeln sind aktiv.
4. **Vergabe**: Ab jetzt erhalten Spieler:innen das Badge **automatisch**, sobald die Kriterien erfüllt sind (auch über mehrere Spiele hinweg).
---
## Anzeige & Wirkung
- Badges erscheinen bei Spieler:innen im **Profil / Erfolgsbildschirm** (je nach App-Ansicht) und können die **Motivation** steigern (Sammeln/Serien).
- Optional kannst du in deinen Spielen auf vorhandene Badges **referenzieren** („Schaff’s unter 45 min für **Speedrunner**!“).
---
## Best Practices
- **Klar & erreichbar:** Regeln so formulieren, dass sie verstanden und realistisch erreichbar sind.
- **Progression:** Mischung aus **leicht** (schnelle Erfolgserlebnisse) und **selten/episch** (Langzeitmotivation).
- **Serien sinnvoll bündeln:** z. B. 3–5 thematisch passende Spiele.
- **Transparenz:** In Spieltexten kurz erklären, **wie** man das Badge bekommt.
- **Duplikate vermeiden:** Ähnliche Badges zusammenfassen oder staffeln (Bronze/Silber/Gold).
---
## Rechte & Lizenzen (Kurz)
Aktion
Ohne Lizenz
Mit Storyboard-Lizenz
Badges erhalten (als Spieler:in)
✓
✓
Badge **erstellen**
–
✓
Badge **einreichen** / Status ändern
–
✓
Badge-Regeln pflegen
–
✓
# 🚀 Release & Betrieb
Das Release-Cockpit ist dein Steuerzentrum für Inhalte, Medien und Veröffentlichung. Hier verwaltest du Status, Beschreibung, Standort, Medien, Attribute, Kategorie sowie Preis & Kalender – inkl. QR-Direktzugriff und Kopier-Tools. Ideal zum finalen Check vor dem Publish.
# Übersicht
Die **Übersicht** ist deine Startseite im Release-Cockpit. Hier findest du den **Direktzugriff** per QR, die **öffentliche URL**, die **Short-URL (SCN-Link)**, den **SCN-Code** sowie die **interne ID** deines Spiels. Außerdem kannst du den QR-Code als PNG speichern und alle Werte per Klick kopieren.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/SGOgrafik.png)
---
## Zweck
- Schnell teilen, testen oder supporten (QR/Links/IDs sofort griffbereit).
- Prüfen, ob das Spiel privat/öffentlich erreichbar ist (Hinweis unter dem QR).
- Basis für Kommunikation: **SCN-Code** und **ID** werden im Support und in Logs verwendet.
---
## Elemente auf der Seite
### 1) Titel
Zeigt den aktuellen **Spiel-Titel** (wie im Editor gespeichert).
**Tipp:** Ein klarer, kurzer Titel erleichtert das Auffinden in Suche und Listen.
### 2) Direktzugriff (QR)
- Öffnet das Spiel direkt in der App / im Web.
- **Privat-Spiele:** Der QR ist die **einzige** Zugriffsmöglichkeit (kein Listing).
- Button **„QR als PNG speichern“**: lädt den aktuell dargestellten Code als Bild.
> **Hinweis:** Nach einem Titel- oder Sichtbarkeitswechsel musst du die Seite neu laden, damit ein neuer QR/Link angezeigt wird.
### 3) Link-Karte (URL, Short-URL, SCN-Code, ID)
Jedes Feld hat rechts einen **Kopieren-Button**.
Feld
Bedeutung
**URL**
Lange, technische Adresse der Detailseite (z. B.
`https://scen.ar/io/?p=197858`
).
**Short-URL**
Kurzer, sprechender Link für das Teilen (z. B.
`https://scen.ar/io/SCNKBI`
).
**SCN-Code**
Der
**Kurzcode**
(z. B.
`SCNKBI`
). Ideal für Support und manuelle Eingabe.
**ID**
Interne
**Datenbank-ID**
(z. B.
`197858`
). Nützlich in Logs, Exporten und bei API-Anfragen.
---
## Typische Workflows
- **Teilen an Tester:innen**
QR einscannen **oder** Short-URL kopieren → per Messenger/E-Mail senden.
- **Support-Anfrage beantworten**
**SCN-Code** oder **ID** kopieren → im Ticket/Chat angeben.
- **Printmaterial**
**QR als PNG speichern** → in Flyer, Poster, Aufsteller einbauen.
---
## Sichtbarkeit & Zugriff (Kurzinfo)
- **Öffentlich:** URL & Short-URL sind normal erreichbar; Spiel erscheint in Listen/Maps (abh. von Status/Kategorie).
- **Privat:** Spiel ist **nicht gelistet**. Zugriff **nur** über QR/Short-URL.
- **Status wirkt erst auf veröffentlichte Szenarios** (siehe Bereich **Status**):
- **Aktiv**: Start möglich
- **Hinweis**: Hinweisbanner sichtbar, Start möglich
- **Temporär deaktiviert**: Hinweisbanner sichtbar, Start **nicht** möglich
---
## Häufige Fragen (FAQ)
**Warum sehe ich keine Short-URL / kein SCN-Code?**
Für neue oder importierte Spiele kann die Short-URL erst nach dem ersten Speichern/Sync erscheinen. Seite neu laden.
**QR funktioniert, aber die App zeigt „nicht verfügbar“**
Prüfe **Status**, **Kategorie** und ggf. **Preis/Kalender**-Pflichten. Bei Privat-Spielen unbedingt den aktuellen QR/Short-Link nutzen.
**Short-URL führt auf alten Inhalt**
Browser-Cache oder Weiterleitungs-Cache leeren. Short-URLs werden systemseitig synchronisiert – nach größeren Änderungen die Seite neu öffnen.
---
## Best Practices
- **Short-URL** fürs Teilen, **SCN-Code** für Support/Doku verwenden.
- **QR-PNG** in Drucksachen immer mit ausreichend Weißraum und mind. 3 cm Kantenlänge.
- Bei **Privat-Szenarios** QR/Short-URL nur gezielt verteilen (kein Listing!).
---
**Stand: aktuell. Änderungen an Bezeichnungen oder Layout sind möglich; die Funktionen bleiben gleich (Kopieren, QR-Download, Direktzugriff).**
# Status
Im Bereich **Status** steuerst du, **ob und wie** ein veröffentlichtes Scenario gestartet werden kann – inklusive optionaler Hinweis-Nachricht.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/Cbzgrafik.png)
---
## Zweck
- Temporäre Infos für Spieler anzeigen (z. B. Bauarbeiten, Wetter, Wartung).
- Start eines Spiels **erlauben** oder **sperren**, ohne Inhalte zu ändern.
- Follower automatisch im **Gaming-Feed** informieren.
---
## Felder
### Spielstatus
Wähle, wie sich das veröffentlichte Scenario verhalten soll:
- **Aktiv**
Spiel kann in der App **gestartet** werden.
- **Hinweis**
Deine **Nachricht** erscheint **oberhalb** der Spielbeschreibung; **Start ist möglich**.
- **Temporär deaktiviert**
Deine **Nachricht** erscheint **oberhalb** der Spielbeschreibung; **Start ist nicht möglich** (Start-Button ausgeblendet/gesperrt).
> **Wichtig:** Der Status hat **nur Einfluss auf veröffentlichte** Szenarios (Entwürfe sind ohnehin nicht sichtbar).
### Nachricht
Freitext, der – je nach Status – als Banner über der Spielbeschreibung angezeigt wird.
Typische Inhalte: Gründe, Dauer/Zeitraum, Alternativen, Kontakt.
- Kurz & klar formulieren (1–3 Sätze).
- Optional Datum/Uhrzeit angeben („Heute 14–18 Uhr gesperrt“).
---
## Wirkung in der App / im Web
- **Anzeigeort:** oberhalb der Spielbeschreibung als farbiges Hinweisfeld.
- **Starten:**
- **Aktiv** → Start möglich
- **Hinweis** → Start möglich
- **Temporär deaktiviert** → Start **nicht** möglich
- **Gaming-Feed:** Bei **Hinweis** und **Temporär deaktiviert** wird die Nachricht zusätzlich im Feed aller Nutzer angezeigt, die dem Scenario **folgen**.
---
## Best Practices
- Nutze **Hinweis** für kurzfristige Einschränkungen (Wetter, Umleitungen).
- Nutze **Temporär deaktiviert**, wenn das Spiel aktuell **nicht sinnvoll spielbar** ist (z. B. Station defekt).
- Erwähne – wenn absehbar – **Zeitrahmen** und ggf. **Alternative** (andere Route/Spiel).
- Nach Ende der Einschränkung Status wieder auf **Aktiv** setzen.
---
## Beispiele für Nachrichten
- „Wegen Stadtfest heute bis 18 Uhr eingeschränkter Zugang zum 3. Checkpoint.“
- „Baustelle am Park. Bitte alternative Route über Nordtor nutzen.“
- „Starker Sturm: Spiel heute vorübergehend deaktiviert. Morgen voraussichtlich wieder aktiv.“
---
## Hinweise für Teams
- Änderungen am Status greifen **sofort** nach Speichern.
- Prüfe bei Support-Fällen zuerst **Status + Nachricht**.
- In Listen/Maps bleibt das Spiel sichtbar; die **Startbarkeit** richtet sich nach dem Status.
# Beschreibung & Informationen
Im Bereich **Beschreibung** erklärst du dein Scenario für Spieler. Es gibt zwei Reiter:
- **Handlung** – Story-Teaser: Worum geht’s? Was ist die Mission?
- **Informationen** – Praktisches: Startpunkt, Dauer, Sprache, Ausrüstung, Sicherheit usw.Beide Texte erscheinen in der Detailansicht des Spiels (App/Web). **Handlung** steht oben, **Informationen** darunter.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/JfUgrafik.png)
---
## Handlung
**Ziel:** Neugierig machen und den Einstieg setzen.
**Empfehlungen**
- Länge: **400–800 Zeichen** (3–6 Sätze).
- Schreibe im **Präsens** und **aktiv** („Du folgst…“, „Finde…“).
- Vermeide Spoiler; nenne **Hook + Setting + Ziel**.
- Optional: 1–2 passende Emojis für Stimmung (🌧️🏙️🕵️).
**Beispiel**
> Eine alte Spur führt dich entlang des Staudamms. In vergessenen Notizen taucht der Name **Wendefurth** auf – und ein verschlüsselter Hinweis. Finde die Marker, löse die Rätsel und entscheide, wem du trauen kannst. Bist du bereit?
---
## Informationen
**Ziel:** Erwartungsmanagement & Orientierung.
**Checkliste (frei anpassen)**
- **Startpunkt:** Adresse/Koordinaten, Treffpunkt, Parken/ÖPNV
- **Dauer:** ca. 60–90 min (je nach Tempo)
- **Teamgröße/Alter:** z. B. 1–5 Personen, ab 10+
- **Ausrüstung:** geladener Akku, Kopfhörer, Taschenlampe bei Dämmerung
- **Gelände/Barrierefreiheit:** Treppen/Steigung, Schotter, indoor/outdoor
- **Öffnungszeiten/Hinweise:** Zutritt nur bis 20 Uhr, Wetterabhängigkeit
- **Sicherheit/Regeln:** Betreten auf eigene Gefahr, Privatgelände meiden, keine Kletteraktionen
- **Sprache(n):** DE / EN
**Tipp:** Nutze kurze Absätze oder Aufzählungen – das verbessert die Lesbarkeit auf dem Handy.
---
## Formatierung & Tipps
- **Klartext reicht.** Fett/Kursiv/Listen sind möglich, halte es schlicht.
- Keine externen Links zu Ticketshops o. ä. (Verkauf läuft über „Preis & Kalender“).
- **Ton:** freundlich, motivierend; vermeide interne Begriffe und Technik-Jargon.
- Prüfe nach dem Speichern die **Vorschau**.
---
## Häufige Fragen
**Wo erscheint die Nachricht aus „Status“?**
Als Banner **über** der Beschreibung. Sie kann Start erlauben oder sperren (siehe **Status**).
**Mehrsprachig?**
Wenn dein Spiel mehrere Sprachen hat, pflege Handlung/Informationen je Sprache entsprechend deiner Projekteinrichtung.
---
## Mini-Vorlage (zum Kopieren)
**Handlung**
> Du erhältst eine mysteriöse Nachricht aus Wendefurth. Folge versteckten Markern am Stausee, knacke Codes und finde heraus, was damals geschah. Schaffst du es in 60 Minuten? 🕵️♀️
**Informationen**
- **Start:** Parkplatz Wendefurth, Am Stausee 1
- **Dauer:** ca. 60–90 min • **Team:** 1–5 • **Alter:** 10+
- **Ausrüstung:** Smartphone mit Daten, Kopfhörer, Taschenlampe bei Dämmerung
- **Gelände:** überwiegend eben, einzelne Stufen
- **Hinweis:** Bei Sturm/Unwetter nicht spielen • Privatflächen meiden
---
**Stand: aktuell. UI-Bezeichnungen können leicht variieren; die Funktion ist identisch.**
# Standort
Im Bereich **Standort** legst du den **Startpunkt** deines Scenarios fest und kannst optionale **Points of Interest (POIs)** wie **Parken**, ergänzen.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/sb7grafik.png)
---
## Karte & Haupt-Marker
- **Marker ziehen**: Ziehe den blauen Pin auf der Karte an die gewünschte Position.
- **Aktuelle Position verwenden**: Setzt den Marker auf deine GPS-Position (Browser-Freigabe nötig).
- **Zoom & Pan**: Mit `+ / –` zoomen, mit Drag verschieben.
**Koordinaten unter der Karte**
- **Breite / Länge**: werden beim Verschieben automatisch aktualisiert; du kannst sie auch **manuell eingeben** (WGS84, Dezimal).
- **Adresse (grauer Text)**: orientierende Rückmeldung aus Reverse-Geocoding.
> **Pflicht:** Für **Classics, Extreme** und **Shorties** ist ein genauer Startpunkt erforderlich.
> Bei **Virtual** und **Locationless** kannst du keinen/ungefähren Punkt setzen.
---
## Zusätzliche Punkte (POIs)
Unterhalb der Koordinaten kannst du beliebig viele Punkte anlegen – z. B. **„Hier parken“**, **„Treffpunkt“**, **„Einstieg“**.
**Felder**
- **Text** – Bezeichnung, die Spieler sehen (z. B. „Hier parken“).
- **Breite / Länge** – Koordinaten des POI.
**Aktionen (Buttons rechts in der Zeile)**
- 🎯 **Auf Kartenmitte setzen** – übernimmt die aktuelle Kartenmitte als Koordinate.
- 📍 **Vom Haupt-Marker übernehmen** – nimmt die Koordinaten des blauen Pins.
- 🗂️ **Duplizieren/Kopieren** – erstellt eine Kopie der Zeile (falls vorhanden).
- 🗑️ **Löschen** – entfernt den POI.
> POIs werden in der App in der Detailansicht/Anreisehilfe angezeigt und können auf der Karte eingeblendet werden.
---
## Best Practices
- **Genauigkeit:** 5–6 Nachkommastellen reichen (≈ 1–10 m).
- **Sichtbarkeit:** Wähle gut auffindbare Punkte (Eingang, Parkplatz, markante Ecke).
- **Zugänglichkeit:** Keine Privatgrundstücke als Start/POI verwenden.
- **Test auf dem Handy:** Prüfe die Position in der **Vorschau** vor Veröffentlichung.
- **Barrierefreiheit:** Ergänze bei Bedarf Hinweise (Stufen, Steigung) im Bereich *Informationen* der Beschreibung.
---
## Häufige Fragen
**Koordinaten lassen sich nicht setzen?**
Browser-Ortungsfreigabe prüfen oder Koordinaten manuell eintragen.
**Brauche ich für Virtual/Locationless einen Punkt?**
Nein – optional. Du kannst einen **symbolischen Treffpunkt** angeben (z. B. Stadtzentrum) oder das Feld leer lassen.
---
*Stand: aktuell. Funktionen/Bezeichnungen können leicht variieren; die Grundbedienung (Marker ziehen, Koordinaten eingeben, POIs verwalten) bleibt gleich.*
# Medien
Im Bereich **Medien** pflegst du das **Titelbild**, bis zu **5 Galerie-Bilder** sowie optional einen **Trailer** (YouTube).
[](https://docs.scenario.app/uploads/images/gallery/2025-09/pMlgrafik.png)
---
## Bilder
### Titelbild
- Wird in **Listen, Karten, Empfehlungen** und oben auf der Detailseite angezeigt.
- **Pflicht** für öffentliche Szenarios (sonst Platzhalter).
### Galerie 1–5
- Zusätzliche Bilder für die Detailseite (wischbare Galerie / Lightbox).
- **Optional**, Reihenfolge entspricht der Nummerierung.
**So fügst du Bilder hinzu**
1. Klicke auf eine Kachel (z. B. *Titelbild* oder *Galerie 1*).
2. Wähle ein vorhandenes Bild **oder** lade ein neues hoch.
3. Speichern – die Kachel zeigt danach die Vorschau.
(Nochmal klicken ⇒ Bild austauschen.)
**Empfehlungen**
- **Format:** JPG/WEBP (Fotos), PNG (Grafiken).
- **Größe:** mind. **1600 px** an der langen Kante (besser 1920 px).
- **Seitenverhältnis:** 16:9 ist ideal fürs Titelbild.
- **Motiv:** hell, kontrastreich, **ohne kleinen Text** (wird auf Handys schlecht lesbar).
- Keine geschützten Logos/Personen ohne Rechte.
---
## Trailer (YouTube)
Du kannst einen kurzen Trailer einbinden. Er erscheint unter der Galerie und wird direkt im Detail angezeigt.
**So trägst du ihn ein**
1. Öffne dein YouTube-Video und kopiere die **11-stellige Video-ID** (alles hinter `v=`).
- Beispiel: `https://youtube.com/watch?v=AbCdEfGhIjK` → **`AbCdEfGhIjK`**
2. Trage die ID in das Feld ein und klicke **Prüfen**.
3. Bei Erfolg wird die Vorschau angezeigt.
**Hinweise**
- Nur **öffentliche** oder **nicht gelistete** Videos funktionieren.
- Ideale Länge: **15–60 Sek.** (Teaser).
- Ton sollte **auch ohne Text** verständlich sein (Untertitel empfohlen).
---
## Best Practices
- **Titelbild zuerst**: Es entscheidet über den ersten Eindruck in Listen.
- **Konsistente Optik**: ähnliche Farb-/Lichtstimmung in allen Bildern.
- **Story zeigen**: 1–2 Bilder mit Menschen/Interaktion funktionieren gut.
- **Performance**: Große Bilder vor dem Upload verkleinern/komprimieren.
- **Barrierefreiheit**: Keine irreführenden Fotos (z. B. Orte, die gar nicht vorkommen).
---
## FAQ
**Ich sehe nur Platzhalter-Kacheln.**
Es sind noch keine Bilder gesetzt. Klicke die Kacheln an und wähle/hochlade Dateien.
**Welche Dateigröße ist erlaubt?**
Orientiere dich an deinem Upload-Limit (Server/WordPress). Als Faustregel < **2 MB** pro Bild.
**Mein Trailer spielt nicht ab.**
Prüfe die 11-stellige **ID**, die **Sichtbarkeit** des Videos (öffentlich/nicht gelistet) und ob Einbettung erlaubt ist.
---
*Stand: aktuell. UI-Bezeichnungen können leicht variieren; die Funktionen bleiben gleich (Kacheln anklicken, Bild wählen/hochladen, Trailer per YouTube-ID prüfen).*
# Attribute
Im Bereich **Attribute** beschreibst du Spielrahmen und Anspruch. Die Werte erscheinen in der öffentlichen Detailansicht und werden in Suche/Filtern genutzt.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/tLOgrafik.png)
---
## Felder
- **Teamgröße**
Empfohlene **maximale** Spielerzahl (z. B. 1–6). Richtwert, kein Hard-Limit.
- **Alter**
**Mindestalter-Empfehlung**. `0+` heißt: keine Einschränkung.
- **Zeit**
Ungefähre **Spieldauer in Minuten** (vom Start bis Ziel, ohne Pausen).
*Hinweis für Shorties:* muss **< 15 Minuten** bleiben.
- **Schwierigkeit**
Rätsel-/Logikanspruch **1–5**
`1 = sehr leicht` · `5 = sehr schwer`.
- **Gelände**
Physische Anforderungen **1–5**
`1 = sehr leicht/stadttauglich` · `5 = anspruchsvoll/uneben/Steigung`.
Die runden Badges zeigen den aktuellen Wert (Icon + Zahl). Regler/Eingabefeld aktualisieren die Anzeige live.
---
## Wirkung in der App
- Werte werden auf der **Detailseite** angezeigt und in **Filtern** (z. B. „Dauer ≤ 60 min“, „Schwierigkeit 3–4“) verwendet.
- Konservative Angaben helfen Enttäuschungen zu vermeiden (lieber **eine Stufe höher** bewerten).
---
## Empfehlungen
- **Teamgröße:** Plane realistisch (Kommunikation, Wartezeiten).
- **Alter:** Inhalt, Weg, Verkehr, Dunkelheit berücksichtigen.
- **Zeit:** Interne Testläufe + 10–20 % Puffer.
- **Schwierigkeit:** Mischungen möglich, bewerte den **durchschnittlichen** Anspruch.
- **Gelände:** Nenne Besonderheiten zusätzlich in *Beschreibung → Informationen* (Treppen, Steigung, Nacht, Taschenlampe o. Ä.).
---
## FAQ
**Warum ist meine Zeitangabe wichtig?**
Sie steuert Erwartung & Filter. Zu niedrige Zeiten führen zu Abbrüchen/negativen Bewertungen.
**Ändert die Teamgröße die Spielmechanik?**
Nein, sie ist eine Empfehlung. Mechaniken steuerst du im Storyboard.
**Kann ich 0 bei Zeit angeben?**
Nein – setze eine realistische Mindestdauer. Für sehr kurze Inhalte nutze **Shorties** (< 15 min).
# Kategorie
Im Bereich **Kategorie** ordnest du dein Scenario ein und vergibst optionale **Schlagwörter** sowie einen **Hashtag** fürs Sharing.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/Y3dgrafik.png)
---
## Kategorie (Auswahlfeld)
**Kurz erklärt**
- **Virtual** – von zuhause spielbar (keine reale Location nötig).
- **Locationless** – überall draußen spielbar (kein fester Startpunkt).
- **Classics** – immer **outdoor** & **ortsbezogen** (fester Startpunkt erforderlich).
- **Originals** – systeminterne Kategorie, **nicht** vom Nutzer wählbar.
- **Privat** – nur per **QR/Direct-Link** aufrufbar, **nicht gelistet**; gedacht für private Nutzung
*(Storyboard-Lizenz erforderlich).*
- **Shorties** – **outdoor & ortsbezogen**; muss in **< 15 Minuten** spielbar sein.
**Wirkung**
- Steuert, **wo** und **wie** das Spiel gelistet/gefunden wird (Suche, Karten, Filter).
- **Privat** blendet das Spiel aus öffentlichen Listen aus; Zugriff nur via QR/Short-URL.
- **Classics/Shorties** benötigen einen **Startpunkt** im Bereich *Standort*.
---
## Schlagwörter
Freitext-Tags, die **nicht sichtbar** angezeigt werden, aber die **Suche** verbessern.
- Beispiel: `Lost-Place`, `Familie`, `Indoor`, `Rätsel`, `Wald`.
- Kurze, treffende Begriffe verwenden; Marken- und Personennamen vermeiden.
- Mehrere Schlagwörter möglich (einzeln hinzufügen).
---
## Hashtag
Ein **einmaliger Begriff** für Social-Media-Sharing.
- Wird unter der Spielbeschreibung angezeigt (Teilen).
- Ohne `#` eingeben – die App rendert das automatisch.
- Beispiel: `WendefurthQuest`, `HarzGeheimnis`.
---
## Best Practices
- **Classics vs. Locationless**: Wähle *Classics*, wenn das Erlebnis an **konkreten Ort** gebunden ist; sonst *Locationless*.
- **Shorties** nur setzen, wenn realistisch in **< 15 min** lösbar (intern testen!).
- **Schlagwörter** sparsam und relevant; 3–7 gut gewählte Begriffe genügen.
- **Hashtag** kurz, eindeutig, ohne Sonderzeichen/Leerzeichen.
---
## FAQ
**Warum kann ich „Originals“ nicht auswählen?**
Diese Kategorie wird von scenario.app verwaltet.
**Mein Privat-Spiel ist über die Suche nicht auffindbar – ist das korrekt?**
Ja. **Privat** bedeutet: nur via QR/Short-URL erreichbar.
**Wirkt sich die Kategorie auf Preis/Kalender aus?**
Nein – Preis & Buchbarkeit stellst du separat unter *Preis & Kalender* ein.
(*Hinweis:* Bei gesetztem Preis ist ein **Kalender** erforderlich.)
# Preis & Kalender
In diesem Bereich legst du fest, ob dein Scenario **kostenpflichtig** ist, verwaltest den **Buchungskalender** und (optional) erlaubst **Gast-Spiel** ohne Login.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/RZpgrafik.png)
---
## 1) Preis
- **Preis (EUR)** – Endpreis pro Buchung/Zeitslot.
- Sobald ein Preis gesetzt ist, wird ein **Kalender zwingend erforderlich** (Hinweis erscheint).
**Voraussetzungen für Zahlungen**
- Stripe-Zahlungen sind nur mit **Professional** oder **Enterprise** Lizenz verfügbar.
- Auszahlungen an Anbieter über **Stripe Connect**.
- Spiele können **kostenpflichtig nur mit Kalender** angeboten werden.
- **Auszahlung:** 60 % vom **Netto-Verkaufspreis** an den Anbieter, i. d. R. **innerhalb von 10 Tagen** nach Ablauf des gebuchten Termins.
> **Tipp:** Preis wird pro **Zeitslot** hinterlegt (über die Kalender-Einstellungen).
---
## 2) Kalender
- **Kalender aktivieren/deaktivieren** – steuert, ob Buchungen möglich sind.
- **Kalender erstellen** – legt einen neuen Spiel-Kalender an.
- **Kalendereinstellungen** – Zeitslots, Kapazitäten, Preise, Stornoregeln.
- **Buchungen** – Einsicht in alle anstehenden/vergangenen Termine.
- **Benachrichtigung** – E-Mail/Push bei neuen Buchungen (sofern eingerichtet).
**Wichtig**
- **Preis gesetzt ⇒ Kalender Pflicht.**
- Ohne Kalender **keine kostenpflichtigen** Buchungen.
---
## 3) Gast-Option
- „**Spiel kann auch als Gast (ohne Login) gespielt werden**“
– Verfügbar nur mit **Enterprise/Education** **und** **ohne** Preis/Kalender.
- Ideal für niederschwellige Demos/Testläufe.
---
## Workflows
**Kostenlos spielbar**
1. Preis leer lassen (0,00).
2. Kalender **deaktiviert** lassen.
3. Optional Gast-Option aktivieren (Enterprise/Education).
**Bezahltes Spiel mit Terminen**
1. Preis setzen (EUR).
2. Kalender erstellen & konfigurieren (Slots, Kapazität, Preise).
3. Stripe-Connect-Konto verbinden (Provider).
4. Veröffentlichen.
---
## FAQ
**Warum ist der Kalender gesperrt, sobald ich einen Preis eintrage?**
Er ist nicht gesperrt, sondern **erforderlich** – erst **Kalender erstellen/aktivieren**, dann ist Bezahlen/Buchen möglich.
**Kann ich verschiedene Preise pro Slot vergeben?**
Ja, über die **Kalendereinstellungen** (z. B. Hauptzeit/Happy-Hour).
**Wie schnell erfolgt die Auszahlung?**
In der Regel **innerhalb von 10 Tagen** nach dem **Ablauf des Termins** (Stripe-Connect).
**Gast-Spiel mit Preis möglich?**
Nein. Gast-Spiel ist nur **ohne** Preis/Kalender und nur bei **Enterprise/Education** erlaubt.
**Ich nutze Privat-Kategorie – brauche ich einen Kalender?**
Nur dann, wenn du einen **Preis** verlangst. Privat steuert die Sichtbarkeit, nicht die Buchbarkeit.
# Hilfe / Support
Diese Kontaktdaten werden **während des Spiels** in der App im Menü **„Hilfe“** angezeigt. Spieler können dich bei Fragen oder Problemen schnell erreichen. Alle Felder sind **optional** – nur ausgefüllte Kanäle erscheinen.
[](https://docs.scenario.app/uploads/images/gallery/2025-09/cBsgrafik.png)
---
## Felder & Format
- **Telefon**
Wird als *tel:*-Link angezeigt (Tippen ⇒ Anruf).
**Format:** international empfohlen, z. B. `+49 30 1234567`.
- **SMS**
Wird als *sms:*-Link angezeigt (Tippen ⇒ SMS-App).
**Format:** wie Telefon, idealerweise international (`+49…`).
- **E-Mail**
*mailto:*-Link (Tippen ⇒ E-Mail-App mit Empfänger).
**Format:** `support@beispiel.de`.
- **WhatsApp**
Direkter Chat über `wa.me`.
**Format:** **ohne** Plus/Leerzeichen/Sonderzeichen, nur Landesvorwahl + Nummer, z. B.
`491511234567` (statt `+49 151 1234567`).
*Beispiel aus Screenshot:* `49-151-1234567` → besser speichern als `491511234567`.
> **Hinweis:** Wenn ein Feld leer ist, wird der Kanal in der App nicht angezeigt.
---
## Empfehlungen
- **Erreichbarkeit definieren:** z. B. „Täglich 10–18 Uhr“.
(Am besten in *Status → Nachricht* kommunizieren, falls temporär abweichend.)
- **Ein Kanal reicht**, zwei sind besser (Telefon **oder** WhatsApp + E-Mail).
- **Internationales Format** nutzen, damit Links auf allen Geräten funktionieren.
- **Datenschutz:** Keine privaten Nummern – eigene Support-Nummer/E-Mail verwenden.
---
## Häufige Fragen
**Wo genau sehen Spieler das?**
Im Spiel unter **Menü → Hilfe** (App & Web). Tippen öffnet direkt die passende App/den Anruf.
**Kann ich nur WhatsApp angeben?**
Ja. Trage nur den WhatsApp-Wert ein – die anderen Felder leer lassen.
**WhatsApp-Link öffnet nicht?**
Prüfe die Nummer **ohne** `+`, Leerzeichen oder Bindestriche (`4915…`). Manche Geräte benötigen installierte WhatsApp-App.
---
## Beispiel
- Telefon: `+49 30 1234567`
- SMS: `+49 151 1234567`
- E-Mail: `support@mein-scenario.de`
- WhatsApp: `491511234567`
# 💡 FAQ & Troubleshooting
# FAQ
### 1) Wie starte ich ein neues Spiel?
Lege eine **Einstiegsszene** an (als Start markieren), verbinde sie mit weiteren Szenen (Buttons, QR, Wegpunkte) und teste in der **Vorschau**.
### 2) Woran erkenne ich die Einstiegsszene?
Sie ist speziell markiert (z. B. grün). Genau **eine** Szene sollte Start sein.
### 3) Wie verbinde ich Szenen?
Über das jeweilige **Feature** (Button, QR, Wegpunkt, Eingabe etc.) eine **Zielszene** auswählen. Alternativ per Verbindung im Canvas.
### 4) Lineare Story oder Verzweigungen?
Beides. Lineare Pfade sind am schnellsten, Verzweigungen baust du mit **Buttons** oder **Bedingungen (Variablen)**.
### 5) Was sind Variablen – und wofür nutze ich sie?
Kleine Speicherwerte (Zähler/Flags), z. B. „Schlüssel gefunden = true“, „Hinweise = 2“. Damit steuerst du **Sichtbarkeit**, **Pfade** und **Erfolge**.
### 6) Inventar vs. Variablen?
**Inventar** ist sichtbar („Gegenstände“), **Variablen** sind intern (Logik). Häufig kombiniert: Item einsammeln → Variable setzen.
### 7) Wie verhindere ich „Soft-Locks“?
Immer **Fallbacks** anbieten: Hinweise, alternative Lösung, Skip mit Punktabzug/Badge-Logik.
### 8) Wie teste ich zuverlässig?
Regelmäßig in der **Vorschau** und auf **echtem Gerät**. Für GPS/QR-Szenen draußen testen; Caches nach größeren Änderungen leeren.
### 9) Wegpunkt erreicht, aber nichts passiert?
**Radius** zu klein? GPS springt? Radius leicht erhöhen (z. B. 30–50 m), Zielszene prüfen, Standortfreigabe aktivieren.
### 10) QR wird nicht erkannt?
Ausreichend groß & kontrastreich drucken, Spiegelungen vermeiden, korrekten **SCN-Code/Link** nutzen. Bei Dunkelheit Taschenlampe.
### 11) Medien – welche Größen?
Bilder ≥ **1600 px**, möglichst **WEBP/JPG** komprimiert (< 2 MB). Audio **128–192 kbps**, Video kurz halten. 360° möglichst 4k equirectangular.
### 12) Das Spiel wirkt langsam – was tun?
Bilder komprimieren, Videos sparsam, **Lazy-Load** nutzen, keine übergroßen 360°-Serien in einer Szene, CSS/JS minimal halten.
### 13) Kann ich eigenes CSS/JS einbinden?
Ja (fortgeschritten). Nur gezielt einsetzen, Namespaces nutzen, keine globalen Resets, Performance & Sicherheit beachten.
### 14) Mehrsprachigkeit – wie organisieren?
Entweder **eigene Szenen je Sprache** oder **Textvarianten**. Einheitliche Benennung (z. B. `DE_…`, `EN_…`) hilft beim Pflegen.
### 15) Wie arbeite ich im Team?
Szenen klar benennen, **Status/Badges** für interne Meilensteine, Merge-Konflikte vermeiden (nicht gleichzeitig an derselben Szene).
### 16) Kann ich Szenen/Module wiederverwenden?
Ja: **Duplizieren** oder aus **Toolbox/Template** importieren. Danach IDs/Ziele prüfen.
### 17) Wie mache ich ein Rätsel fair?
Ein Ziel, klare Anweisung, **ein** Lösungsweg (+ optional Hinweise), Eingaben robust prüfen (Trim/Case-insensitive, Varianten erlauben).
### 18) Timer/Countdown sinnvoll einsetzen?
Kurz & mit Bedeutung (z. B. Druck/Spannung). Immer eine **Auffangszene** definieren, falls Zeit abläuft.
### 19) Welche Rolle spielt die Kategorie?
Steuert **Listing & Erwartungen** (Virtual/Locationless/Classics/Shorties/Privat). Für Classics/Shorties **Startpunkt** setzen (Standort).
### 20) Was bewirkt der Status (Aktiv/Hinweis/Temporär)?
Beeinflusst **startbar** ja/nein + Hinweisbanner (und ggf. Feed). Gilt nur für **veröffentlichte** Szenarien.
### 21) Privat vs. öffentlich?
**Privat**: nicht gelistet, nur via QR/Short-URL. Öffentlich: normal auffindbar gemäß Status/Kategorie.
### 22) Preis & Kalender – was ist Pflicht?
Sobald ein **Preis** gesetzt ist, braucht das Spiel einen **Kalender** (Buchung/Slots). Zahlungen nur mit passender Lizenz & Stripe-Connect.
### 23) Was sollte in die Beschreibung?
**Handlung** (Teaser, ohne Spoiler) + **Informationen** (Dauer, Teamgröße, Ausrüstung, Barrierefreiheit, Öffnungszeiten).
### 24) Gibt es Limits (Szenen/Größe)?
Praktisch: Performance-Grenzen. Lieber **mehr, kleinere Szenen** statt eine überladene; Assets komprimieren.
### 25) Wie kann ich Fehler schneller finden?
In kleinen Schritten arbeiten, nach jedem Block testen, Variablenwerte in Debug-Szenen ausgeben, konsistente Namen/IDs.
### 26) Wie sichere ich meinen Fortschritt?
Regelmäßig **speichern**, Meilensteine **duplizieren** (Backup-Kopie), ggf. Versionierung/Export, klare Changelogs im Team.
### 27) Barrierefreiheit – was beachten?
Kontraste, große Touchziele, keine Pflicht zum Audio, Alternativtexte/Untertitel, stufenarme Wege in **Infos** nennen.
### 28) Darf ich reale Orte/Personen zeigen?
Nur mit **Rechten** und unter Beachtung von **Sicherheit/Privatsphäre**. Keine privaten Höfe/verborgene Gefahren als Ziel.
### 29) Kann ich Belohnungen vergeben?
Ja, über **Badges**/Erfolge. Kriterien klar definieren (Zeit, Abschluss, Sammelaufgaben) und kommunizieren.
### 30) Was prüfe ich vor dem Publish?
Titel, Medien (Titelbild), Standort(e), Attribute, Kategorie, Status, ggf. Preis/Kalender, Support-Kontakt – danach **Vorschau** + Testlauf.
# Feature-Matrix (vorläufig)
> Alle unten aufgeführten Features sind **in allen Lizenzmodellen verfügbar**.
> Die Spalten **Free /Basic / Pro / Enterprise** sind Platzhalter – wir füllen Unterschiede/Limits später in der Doku nach.
Feature
Kurzbeschreibung
Free
Basic
Pro
Enterprise
Notiz (für spätere Details)
Wegpunkt
Statischer Kartenpunkt mit Radius, Sichtbarkeit & Autoselect