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, SchnellstartGrundkonzepte: Szenen, Verbindungen, Karte & Wegpunkte, MedienEditor & UI: Oberfläche, Design/Branding, Internationalisierung, TemplatesFeatures: Waypoint, Pano360, Dialog V2, Embedded Audio/Video, QR/NFC, PhotoCompare, Gamification, Compiler/RuntimeHacks & Tipps: CSS/JS-Snippets, Performance, DebuggingAPI & Backend: WordPress-Integration, PHP-API, Stripe/Webhooks, LizenzenDeployment & Betrieb: Konfiguration, Backups, Monitoring, ChangelogFAQ & 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.
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
Schnellstart lesen → erstes Mini-Projekt bauen. Grundkonzepte verstehen → Szenen, Karten, Assets. Features gezielt nachschlagen → Waypoint, Pano360, Dialog V2 etc. Hacks & Tipps für Feinschliff & Performance. 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
Öffne storyboard.scenario.app und logge dich ein. 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
Szene aus der linken Leiste auf das Canvas ziehen . Benenne die Szene (z. B. „Start“). Doppelklick auf den Vorschaubereich der Kachel → der WYSIWYG-Editor öffnet sich. Fülle Titel , Text , optional Medien (Bild, Audio, Video) aus. 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.
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.
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
Rechts oben „Vorschau“ starten. Durch den Flow klicken oder QR/Waypoint-Bedingungen mit den Test-Tools simulieren. Ergebnisse notieren, Anpassungen vornehmen, erneut testen.
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
Szene anlegen : Szene aus der Werkzeugleiste aufs Canvas ziehen. Inhalt bearbeiten : Doppelklick auf die Kachel → Editor (WYSIWYG). Funktion hinzufügen : Feature-Modal öffnen → z. B. Button/QR/Wegpunkt. Verbindung erstellen : In der Feature-Maske Zielszene wählen (oder im Canvas ziehen). 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
Startpunkt setzen (Release-Cockpit → Standort). 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) Zielszene wählen (nach Erreichen). 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.
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 :
Neue Szene – Beliebig oft. Normale Content-Szene mit Features. Master / Globale Sektion [[ ]] – Einmal pro Projekt . Enthält globale Elemente (z. B. Stylesheets, Masterszene-JS, Funktionen). Wirkt szenenübergreifend. Bedingung – Logik-Knoten, der anhand von Variablen/Inventar/Status verzweigt (z. B. „wenn Schlüssel → A, sonst → B“). Spielende [[End]] – Einmal pro Projekt . Markiert das Ende/den Abschluss. 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.
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
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. Sichtbarer Marker, Auto-Select AUS Der Marker ist auf der Karte sichtbar. 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)
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
Wegpunkt hinzufügen → Marker auf Karte setzen oder Aktuelle Position nutzen. Zielszene wählen (optional leer lassen für Info-Punkt). Popup-Text (optional) eintragen. Radius festlegen. Sichtbarkeit & Auto-Select gemäß gewünschtem Verhalten setzen. 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).
Felder & Optionen
OSM-Kategorie / key=value (optional)
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 ).
Fallback (wenn im Suchradius nichts gefunden wird)
Distanz (m) & Himmelsrichtung
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!
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.
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).
Bewegung & Aktualisierung
Das Ziel wird beim Erzeugen festgelegt und anschließend beibehalten , damit alle im Team zum gleichen Ziel laufen.
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 .
Häufig genutzte key=value Beispiele
Infrastruktur & Transport
highway=bus_stop → Bushaltestelle
railway=station → Bahnhof
amenity=parking → Parkplatz
amenity=bicycle_parking → Fahrradstellplatz
highway=crossing → Fußgängerüberweg
Versorgung & Alltag
amenity=drinking_water → Trinkwasserstelle
amenity=toilets → Öffentliche Toilette
amenity=bench → Sitzbank
shop=supermarket → Supermarkt
shop=bakery → Bäckerei
amenity=pharmacy → Apotheke
amenity=post_office → Postamt
Freizeit & Kultur
tourism=attraction → Sehenswürdigkeit
tourism=museum → Museum
leisure=playground → Spielplatz
leisure=pitch → Sportplatz
amenity=theatre → Theater
amenity=cinema → Kino
Gastronomie
amenity=restaurant → Restaurant
amenity=cafe → Café
amenity=bar → Bar
amenity=fast_food → Imbiss
Sicherheit & Gesundheit
amenity=police → Polizeistation
amenity=fire_station → Feuerwehr
amenity=hospital → Krankenhaus
amenity=clinic → Klinik
Vollständige Liste
Eine ausführliche Übersicht aller OSM-Tags findest du hier: https://wiki.openstreetmap.org/wiki/Map_features
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.
Kurz-Anleitung
Dynamischen Wegpunkt hinzufügen.
OSM-Kategorie wählen oder key=value eintragen.
Suchradius und Ankunfts-Radius festlegen.
Typ (sichtbar/unsichtbar) und Autoselect setzen.
Fallback definieren (Distanz, Richtung, Titel).
Zielszene auswählen.
Speichern – fertig.
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.
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.
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: führt onClick JS aus (falls vorhanden), öffnet optional das Popup , 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
Bild wählen → HFOV/Kompass setzen. Im Viewer „Hier Hotspot erstellen“ klicken. Label , Typ , Zielszene (optional) und Stil einstellen. (Optional) Popup aktivieren oder onClick JS hinterlegen. Ü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.
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: text – Chatnachricht (Emoji & einfache Formatierung erlaubt) image – Bild (öffnet sich antippbar in groß) audio – MP3 mit kleinem Player typing Xms – Tipp-Indikator des gewählten Charakters für X Millisekunden 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
Läuft Schritt für Schritt von oben nach unten. typing zeigt die bekannte …-Blase des Charakters für die angegebene Dauer. pause wartet stumm (kein Tipp-Indikator). text erscheint in der Bubble des Charakters (links/rechts gemäß Einstellung). image ist antippbar (Zoom/Lightbox). audio rendert einen kleinen Player (Play/Pause). 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
Charakter(e) anlegen (Name, Avatar, Farben, Seite). In der Nachrichten-Sequenz typing / pause und text / image / audio in gewünschter Reihenfolge anlegen. Speichern . 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
Posterbild wird angezeigt, bis der/die Spieler:in Play drückt. Abhängig von der Seek-Einstellung kann man spulen oder sieht das Video linear . Am Ende blendet die App – falls konfiguriert – Text + End-Buttons ein. 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
MP4 & Poster hochladen → URLs eintragen . Player-Farben wählen, Vollbild/Seek konfigurieren. Fallback-Zielszene setzen. Aktionen nach Videoende : Info-Text + Buttons (z. B. „Zur Aufgabe“, „Wiederholen“). 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
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
Poster (falls gesetzt) + Player werden angezeigt. Play startet die Wiedergabe; je nach Style wird eine Waveform mit Laufzeitregler gezeigt. Untertitel laufen synchron mit. Nach Audioende blendet die App – falls konfiguriert – Hinweistext + End-Buttons ein. 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
MP3 und optional Poster wählen/hochladen. Player-Style setzen, Fallback-Szene wählen. Untertitel bearbeiten (oder VTT importieren ). Text über Buttons + End-Buttons definieren. 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
Code anlegen oder aus Toolbox übernehmen . Alphanumerischen Wert setzen (oder Zufall drücken). Zielszene wählen. Testscan im Editor/auf dem Gerät. 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
Die App öffnet die Kamera und zeigt das Referenzbild als Vorschau/Leithilfe. Das Team macht ein Foto → die App berechnet einen Ähnlichkeitswert (0–100) . Wert ≥ Schwellenwert → Erfolgs-Zielszene . 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
Referenzbild wählen/hochladen. Schwellenwert setzen (z. B. 70). Retry entscheiden. Erfolgs- und Fehl-Zielszene festlegen. 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.
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
Spielende tippen in der App auf „NFC scannen“ (Android & iOS).
Gerät an den Tag halten → bei passendem Wert wird die Zielszene sofort ausgelöst (oder deine Meta-Logik).
Der Wert wird einmalig in der Szene geladen und für das Team konsistent ausgewertet.
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)
App öffnen → Write
Add a record → Text
Exakt den Wert eintragen (z. B. SCN_X9K7M4 )
OK → Write → Telefon an Tag halten
(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
Wert (alphanumerisch) vergeben oder Zufall nutzen.
Zielszene wählen.
Tag mit App als NDEF-Text exakt mit diesem Wert beschreiben .
Testen (Android & iOS), dann ggf. locken .
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.
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
Modal öffnen → Spot aus Toolbox übernehmen .
Projekt/Ordner wählen (oben per „Zurück zu Projekten“ navigierbar).
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).
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.
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.
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 .
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
Text setzen (klar & kurz).
Zielszene auswählen.
Farben (Brand) wählen, Kontrast prüfen.
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).
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 ).
Verhalten in der App
Spielende tippen ihre Lösung ein und drücken „Lösung prüfen“ .
Die Eingabe wird gemäß Prüfmodus verglichen.
Richtig → (optional) kurzer Erfolgseffekt, Zielszene wird geöffnet.
Falsch → (optional) Hinweis „Leider falsch“ / erneuter Versuch.
Eingabefeld wird mit Sicherheitsabstand unter dem Content eingefügt.
Position des Eingabefelds kann mit der DIV Klasse customInputPosition umgeleitet werden: