# Dialog V2 – Chat

**Dialog V2**<span style="white-space: pre-wrap;"> simuliert einen echten Chat-Verlauf zwischen frei definierbaren </span>**Charakteren**<span style="white-space: pre-wrap;"> – 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.</span>

---

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

## Editor-Aufbau

**Linke Spalte – Charaktere**

- **Neu**: Charakter anlegen.
- Pro Charakter:
    - **Name**
    - **Avatar**<span style="white-space: pre-wrap;"> (Medienbibliothek/Upload)</span>
    - **Sprechblasen-Farbe**<span style="white-space: pre-wrap;"> (Bubble)</span>
    - **Textfarbe**
    - **Seite**<span style="white-space: pre-wrap;">: </span>**links**<span style="white-space: pre-wrap;"> / </span>**rechts**

> Charaktere kannst du mehrmals in der Sequenz verwenden; Stil &amp; Seite kommen automatisch mit.

**Rechte Spalte – Nachrichten-Sequenz**

- Zeitliche Abfolge des Chats.
- <span style="white-space: pre-wrap;">Über </span>**„Neue Nachricht“**<span style="white-space: pre-wrap;"> fügst du Bausteine hinzu:</span>
    1. **text**<span style="white-space: pre-wrap;"> – Chatnachricht (Emoji &amp; einfache Formatierung erlaubt)</span>
    2. **image**<span style="white-space: pre-wrap;"> – Bild (öffnet sich antippbar in groß)</span>
    3. **audio**<span style="white-space: pre-wrap;"> – MP3 mit kleinem Player</span>
    4. **typing** ***Xms***<span style="white-space: pre-wrap;"> – Tipp-Indikator des gewählten Charakters für </span>**X**<span style="white-space: pre-wrap;"> Millisekunden</span>
    5. **pause** ***Xms***<span style="white-space: pre-wrap;"> – Leerlauf/Verzögerung ohne Tipp-Blase</span>
- Reihenfolge per Drag &amp; Drop ändern.
- <span style="white-space: pre-wrap;">Jede Zeile zeigt: </span>**Charakter**<span style="white-space: pre-wrap;"> + </span>**Aktion**<span style="white-space: pre-wrap;"> (z. B. </span>`<span class="editor-theme-code">Byte · typing 2000ms</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">Byte · text: Hallo!</span>`).

**Speichern**<span style="white-space: pre-wrap;"> übernimmt die komplette Chatdefinition in die Szene.</span>

---

## Felder je Nachricht

- **Charakter**: Wer „spricht“ / tippt.
- **Typ**<span style="white-space: pre-wrap;">: </span>`<span class="editor-theme-code">text</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">image</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">audio</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">typing</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">pause</span>`.
- **Inhalt**:
    - `<span class="editor-theme-code">text</span>`: Nachrichtentext
    - `<span class="editor-theme-code">image</span>`: Medienauswahl (ein Bild)
    - `<span class="editor-theme-code">audio</span>`: MP3 aus Medienbibliothek
    - `<span class="editor-theme-code">typing</span>`: Dauer in Millisekunden
    - `<span class="editor-theme-code">pause</span>`: Dauer in Millisekunden

---

<video autoplay="" class="align-left" controls="" height="600" id="bkmrk--4" src="https://docs.scenario.app/attachments/47?open=true" width="300"></video>Verhalten in der App

1. <span style="white-space: pre-wrap;">Läuft </span>**Schritt für Schritt**<span style="white-space: pre-wrap;"> von oben nach unten.</span>
2. `<span class="editor-theme-code">typing</span>`<span style="white-space: pre-wrap;"> zeigt die bekannte </span>**…-Blase**<span style="white-space: pre-wrap;"> des Charakters für die angegebene Dauer.</span>
3. `<span class="editor-theme-code">pause</span>`<span style="white-space: pre-wrap;"> wartet stumm (kein Tipp-Indikator).</span>
4. `<span class="editor-theme-code">text</span>`<span style="white-space: pre-wrap;"> erscheint in der </span>**Bubble**<span style="white-space: pre-wrap;"> des Charakters (links/rechts gemäß Einstellung).</span>
5. `<span class="editor-theme-code">image</span>`<span style="white-space: pre-wrap;"> ist antippbar (Zoom/Lightbox).</span>
6. `<span class="editor-theme-code">audio</span>`<span style="white-space: pre-wrap;"> rendert einen kleinen </span>**Player**<span style="white-space: pre-wrap;"> (Play/Pause).</span>
7. <span style="white-space: pre-wrap;">Der Chat </span>**scrollt automatisch**<span style="white-space: pre-wrap;"> nach unten.</span>

> <span style="white-space: pre-wrap;">Ende der Sequenz = Chat ist abgeschlossen. Für die Navigation hängst du </span>**normale Buttons**<span style="white-space: pre-wrap;"> (oder andere Features) unter den Chat in derselben Szene an – z. B. „Weiter“ oder zwei Entscheidungs-Buttons.</span>

---

## Charakter-Stile

Jeder Charakter bringt sein eigenes „Theme“ mit:

- **Bubble-Farbe**<span style="white-space: pre-wrap;"> (Hintergrund)</span>
- **Textfarbe**<span style="white-space: pre-wrap;"> (Kontrast beachten!)</span>
- **Seite**<span style="white-space: pre-wrap;"> (links/rechts) – schafft visuelle Trennung</span>
- **Avatar**<span style="white-space: pre-wrap;"> (rundet die Chat-Anmutung ab)</span>

Dadurch wirkt der Dialog wie ein echter Messenger-Chat.

---

## Gute Praxis &amp; Tipps

- **Natürlichkeit**<span style="white-space: pre-wrap;">: Kurze </span>`<span class="editor-theme-code">typing</span>`-Phasen (800–2500 ms) vor wichtigen Nachrichten steigern Glaubwürdigkeit.
- **Tempo**<span style="white-space: pre-wrap;">: Nutze </span>`<span class="editor-theme-code">pause</span>`<span style="white-space: pre-wrap;"> zwischendurch als </span>**Atempausen**<span style="white-space: pre-wrap;"> oder Dramaturgie-Beat.</span>
- **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**<span style="white-space: pre-wrap;">: Direkt nach dem Chat </span>**Buttons**<span style="white-space: pre-wrap;"> hinzufügen (z. B. „Zur Karte“, „Hinweis ansehen“, „Mission starten“).</span>
- **Team-Konsistenz**<span style="white-space: pre-wrap;">: Die Sequenz ist deterministisch – alle sehen </span>**denselben Ablauf**.

---

## Kurz-Workflow

1. **Charakter(e)**<span style="white-space: pre-wrap;"> anlegen (Name, Avatar, Farben, Seite).</span>
2. <span style="white-space: pre-wrap;">In der </span>**Nachrichten-Sequenz**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">typing</span>`/`<span class="editor-theme-code">pause</span>`<span style="white-space: pre-wrap;"> und </span>`<span class="editor-theme-code">text</span>`/`<span class="editor-theme-code">image</span>`/`<span class="editor-theme-code">audio</span>`<span style="white-space: pre-wrap;"> in gewünschter Reihenfolge anlegen.</span>
3. **Speichern**.
4. <span style="white-space: pre-wrap;">Unter dem Chat bei Bedarf </span>**Buttons**<span style="white-space: pre-wrap;"> (separates Feature) hinzufügen, um zur nächsten Szene zu führen.</span>

Fertig – Dialog V2 liefert dir glaubwürdige, fein getimte Chats, die sich perfekt in deine Story einfügen.