🧰 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“, Auswahl­optionen, 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 Ziel­szene(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:
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 Lösung eintragen (ggf. Varianten mit | ). PrĂŒfung wĂ€hlen ( vereinfacht fĂŒr tolerant, exakt fĂŒr streng). Darstellung festlegen (Eingabe/Zahl). Zielszene setzen. 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. 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 Ziel­szenen. 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 Texte in sinnvoller Reihenfolge anlegen. Buttons (Zielszene + Label) hinzufĂŒgen – oder weglassen fĂŒr Info-Dialoge. Farben in Einstellungen setzen. 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 Hintergrundbild öffnen → Bild wĂ€hlen/hochladen. „als Hintergrund einfĂŒgen“ klicken. Kontrast und Lesbarkeit der Szene prĂŒfen. 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). 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 Farben wĂ€hlen (einfarbig = Farbe1 = Farbe2). Verlaufsrichtung festlegen. Vorschau prĂŒfen → Speichern . 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.) 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 In - und Out -Transition wĂ€hlen (oder none ). In der Vorschau prĂŒfen, ob es zum Ton der Szene passt. Einheitlich im gesamten Spiel anwenden. 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. 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 Bild wĂ€hlen (optional, zoombar), Name , Beschreibung , Anzahl setzen. In spĂ€teren Szenen Bedingungen auf dieses Item legen (vorhanden / Menge ≄ n). 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. 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 Aktion Menge anpassen zur gewĂŒnschten Szene/Interaktion hinzufĂŒgen. Inventar-Item , Modus (± oder fester Wert) und Menge setzen. Optional: Vorher Bedingung (Menge ≄ n) und/oder danach Hinweis anzeigen. 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). 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. Bedienung + Element → Typ wĂ€hlen (z. B. Inventar ). Je nach Typ das konkrete Ziel auswĂ€hlen (z. B. Inventar-Item „Byte“ oder Wegpunkt „BrĂŒcke“). Mehrere Elemente können in einem Schritt hinzugefĂŒgt und entfernt werden. 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 In der Szene Elemente entfernen hinzufĂŒgen. Typ und Ziel wĂ€hlen (ggf. mehrere). Platzierung prĂŒfen (wann soll es passieren?). 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 . 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 Countdown hinzufĂŒgen → Zeit setzen. (Empfohlen) Zielszene fĂŒr Ablauf wĂ€hlen. In Erfolgs-/Abbruchpfaden ggf. Countdown entfernen . 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). 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 FĂŒr jede Szene sinnvolle H1–H3 + Lösung planen. Zeiten eintragen (nicht benötigte Felder leer lassen). Texte klar formulieren. 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. 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 Die App öffnet die Kamera und zeigt die Aufgabenbeschreibung. Nach dem Auslösen wird das Bild automatisch bewertet (Score 0–100). Score ≄ Schwellenwert → Erfolgs-Zielszene . Score < Schwellenwert → mit Retry neuer Versuch, sonst Fehl-Zielszene . (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 Aufgabenbeschreibung formulieren. Schwellenwert setzen (z. B. 70), Retry wĂ€hlen. Erfolgs- und Fehl-Zielszene festlegen. 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: setTimeout ( function () { if ( window . __sceneOnce ) return ; window . __sceneOnce = true ; // init 
 }, 200 ); 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 setTimeout ( function () { const btn = document . querySelector ( 'button' ); if (!btn) return ; btn. textContent = 'Los geht’s' ; btn. style . filter = 'drop-shadow(0 6px 12px rgba(0,0,0,.25))' ; }, 200 ); 2) Szene nach X Sekunden automatisch fortsetzen setTimeout ( function () { // z.B. per Klick auf einen Weiter-Button simulieren const 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 = new Date (). 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: window . addEventListener ( 'click' , handler, { once : true }); 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 Delay einbauen ( setTimeout 150–300 ms). Idempotent & ggf. Once-Guard verwenden. Wo nötig: waitSel /Observer nutzen. Netz-/FehlerfĂ€lle abfangen. 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 . 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). .u-shadow { box-shadow:0 8px 24px rgba(0,0,0,.18); } .u-round { border-radius:16px; } .u-muted { opacity:.75 } .u-center { text-align:center } .u-spacious { padding:1rem } 3) Farb-Theme per CSS-Variablen :root{ --brand:#68bfdd; --brand-ink:#fff; } .btn-primary{ background:var(--brand); color:var(--brand-ink); } 4) Sanfte Szene-Einstiegsanimation (klasse auf Container setzen) .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 Klassen in Features vergeben (z. B. CSS-Klasse im Hotspot-Editor). Passende Regeln hier definieren (keine globalen Tag-Selektoren). Responsiv & kontrastreich gestalten. 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 Feature „Team-Sync deaktivieren“ in die betreffende Szene einfĂŒgen. Buttons/Navigation normal anlegen – sie wirken nur lokal . 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.