# Vorschau

# Was du hier alles testen kannst

<span style="white-space: pre-wrap;">Die </span>**Vorschau**<span style="white-space: pre-wrap;"> zeigt deine Story </span>**wie in der App**<span style="white-space: pre-wrap;">, direkt im Browser. Links läuft das Spiel im Smartphone-Frame, rechts hast du </span>**Quicklinks**<span style="white-space: pre-wrap;"> zum gezielten Testen einzelner Trigger.</span>

[![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/vaOgrafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/vaOgrafik.png)

---

## Grundbedienung

- **Start / Schließen**<span style="white-space: pre-wrap;"> (oben rechts im Frame) – Vorschau starten bzw. beenden.</span>
- **Live-Reload**: Speichere eine Szene im Editor → die Vorschau lässt sich sofort neu starten.

---

## Quicklinks (rechte Spalte)

<span style="white-space: pre-wrap;">Hier kannst du typische Sensor-/Ortsaktionen </span>**simulieren**, ohne vor Ort zu sein:

- **Wegpunkt → „Gehe zu“**  
    <span style="white-space: pre-wrap;">Simuliert, dass du den Wegpunkt erreichst (innerhalb des Radius). So prüfst du </span>**Autoselect**<span style="white-space: pre-wrap;"> und Folgeszenen.</span>
- **QR-Code → „Scannen“**  
    <span style="white-space: pre-wrap;">Löst einen Scan mit dem hinterlegten </span>**Wert**<span style="white-space: pre-wrap;"> aus (praktisch für Testlauf ohne Kamera).</span>
- <span style="white-space: pre-wrap;">(falls vorhanden) </span>**Weitere Trigger**<span style="white-space: pre-wrap;"> erscheinen analog – du kannst sie gezielt abfeuern und den Flow prüfen.</span>

> <span style="white-space: pre-wrap;">Die Quicklinks sind rein fürs Testen – sie sind in der echten App </span>**nicht sichtbar**.

---

## UI &amp; Funktionen im Phone-Frame

Unten im Spiel-UI findest du – je nach Projekt – u. a.:

- **Karte / Ziele**<span style="white-space: pre-wrap;"> – öffnet die Map mit Wegpunkten.</span>
- **Hinweise**<span style="white-space: pre-wrap;"> – kleines Badge zeigt neue Hinweise/Lösung an (zeitgesteuert testbar).</span>
- **Inventar**<span style="white-space: pre-wrap;"> – Gegenstände ansehen (Bilder </span>**zoombar**).
- **Hilfe/Info**<span style="white-space: pre-wrap;"> – projektspezifische Hilfe.</span>
- **Menü (…)**<span style="white-space: pre-wrap;"> – weitere Aktionen (z. B. Einstellungen, Neustart – abhängig vom Projekt).</span>

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 &amp; Übergänge**<span style="white-space: pre-wrap;"> (In/Out-Transitions).</span>
- **Bedingungen**<span style="white-space: pre-wrap;"> (Variablen, Inventar-Checks, Pfadverzweigungen).</span>
- **Wegpunkt-Logik**<span style="white-space: pre-wrap;"> (Autoselect vs. manuell) via </span>**„Gehe zu“**.
- **QR-/NFC-Ersatztests**<span style="white-space: pre-wrap;"> (QR über Quicklink; NFC lässt sich in der Vorschau i. d. R. nicht real scannen).</span>
- **Hinweise &amp; Countdown**<span style="white-space: pre-wrap;"> (Zeitpunkte, Texte).</span>
- **Audio/Video**<span style="white-space: pre-wrap;"> inkl. </span>**End-Buttons**<span style="white-space: pre-wrap;"> und </span>**Fallback-Szenen**.
- **Team-Sync deaktivieren**<span style="white-space: pre-wrap;">: Prüfe, ob eine Szene </span>**lokal**<span style="white-space: pre-wrap;"> bleibt und die nächste wieder synchronisiert.</span>

---

## Grenzen der Browser-Vorschau

- **GPS/Kompass**<span style="white-space: pre-wrap;"> werden nicht real genutzt – nutze dafür die </span>**Quicklinks**.
- **Kamera/NFC**<span style="white-space: pre-wrap;"> nur eingeschränkt/gar nicht verfügbar (QR per Quicklink testbar).</span>
- <span style="white-space: pre-wrap;">Geräte-Eigenheiten (Leistung, Displaygröße, Autoplay-Richtlinien) können abweichen – am Ende </span>**immer auf einem echten Gerät**<span style="white-space: pre-wrap;"> testen.</span>

---

## Tipp

<span style="white-space: pre-wrap;">Wenn du schnell zu einer Szene springen willst, setze dort </span>**temporär**<span style="white-space: pre-wrap;"> einen Button „Zur Szene X“ oder nutze Quicklinks für die relevanten Trigger. So iterierst du rasch an Texten, Farben, Übergängen und Logik.</span>