# Overlay Builder Overlays per Drag-and-drop. Layouts, Widgets, Vorschau. # Overlay Builder Grundlagen # Overlay Builder Grundlagen Der **Overlay Builder** ist der einfache Editor im Dashboard. Du findest ihn unter `/dashboard/overlays` über den Button `« Neues Overlay »` → `« Builder »`. Im Gegensatz zum Pro Editor läuft alles in SvelteKit, ohne Canvas-Modus, ohne Pixel-Positionierung. ## Wann nutzt man den Builder? - Du willst in 5 Minuten ein brauchbares Overlay haben. - Du brauchst Alerts, Chat-Box, vielleicht einen Follower-Counter - kein extravagantes Layout. - Du willst nicht in Z-Order, Element-Listen und Versionen denken. Für alles andere ist der **Pro Editor** das richtige Werkzeug. Siehe [Overlay Pro Editor vs Builder]. ## Aufbau Der Builder hat drei Bereiche: | Bereich | Funktion | |---|---| | Linke Spalte | Widget-Liste (~10 vorgefertigte Bausteine) | | Mitte | Live-Preview, 16:9, 1920×1080 als Referenz | | Rechte Spalte | Eigenschaften des aktuell gewählten Widgets | Die Preview ist live: jede Änderung in der rechten Spalte ist sofort sichtbar. ## Verfügbare Widgets Die Builder-Liste ist bewusst kurz gehalten: - Alert - Chat-Box - Follower-Counter - Sub-Counter - Donation-Goal - Recent-Events-Liste - Hype-Train - Logo / Bild - Text-Banner - Timer Jedes Widget hat sinnvolle Defaults. Du kannst Größe und Position über Slider und Preset-Quadranten ändern (`Oben links`, `Oben rechts`, `Unten Mitte` etc.). Pixel-Werte sind möglich, aber nicht der Standard-Workflow. ## Speichern und Browser-Source Oben rechts: `« Speichern »`. Direkt daneben `« Browser-Source-URL »` - das ist die URL für OBS (siehe [Browser Source Grundlagen]). Die URL bleibt beim Speichern stabil; der Token ändert sich nur, wenn du ihn aktiv rotierst. ## Vorlagen Über `« Aus Vorlage »` bekommst du Starter-Layouts: - `Starting Soon` - Countdown + Logo + Social-Links - `Just Chatting` - Cam-Frame + Chat-Box + Recent-Events - `Gameplay` - kleines Cam-Frame oben, Counter unten - `BRB` - Logo + Animations-Loop + "Be Right Back"-Text - `Stream Ending` - Followers heute / Subs heute / Top-Chatter Vorlagen sind ein Startpunkt - du kannst alles ändern. ## Limits Der Builder hat bewusst Grenzen: - Maximal **ein** Overlay = eine Szene. Mehrere Szenen brauchst du im Pro Editor. - Keine Custom-Animationen. - Keine pixelgenaue Z-Reihenfolge - die Widgets liegen automatisch in einer sinnvollen Stapelung. - Kein Custom-CSS. Wenn du an eines dieser Limits stößt: das ist der Moment für den Pro Editor. ## Speicher-Verhalten Der Builder speichert **nicht automatisch**. Es gibt einen "Unsaved changes"-Indikator oben rechts; wenn der orange leuchtet, hast du ungesicherte Änderungen. Beim Tab-Schließen kommt eine Browser-Warnung. Änderungen sind erst dann in der Browser-Source sichtbar, wenn du gespeichert hast. Falls du im Preview etwas siehst, was in OBS nicht ankommt: meistens vergessen zu speichern. ## Mobile Der Builder funktioniert auf Tablets eingeschränkt (Drag-Drop ist Touch-fähig), auf Smartphones nicht sinnvoll bedienbar. Für Layout-Änderungen unterwegs ist das ok; für ernsthafte Layout-Arbeit ein Desktop-Browser auf 1920×1080 oder mehr. # Mein erstes Overlay # Mein erstes Overlay Dieser Walkthrough geht durch ein einfaches "Just Chatting"-Setup mit Cam, Chat-Box, Follower-Alert. Zielzeit: 10 Minuten. ## Schritt 1: Overlay anlegen 1. Dashboard öffnen, links unter `« Overlays »`. 2. `« Neues Overlay »` klicken. 3. Modus: `« Builder »`. 4. Name vergeben: `Just Chatting v1`. 5. Starter-Vorlage `Just Chatting` wählen - das spart Tippen. ## Schritt 2: Cam-Frame anpassen Der `Cam-Frame` ist standardmäßig oben links. Klick drauf, in der rechten Spalte: - Position: `Oben links` - Größe: `25%` der Breite - Form: `Kreis` (oder rechteckig - Geschmack) - Rahmen: `4px`, Farbe deiner Marke In OBS musst du die echte Webcam **dahinter** als zweite Quelle legen - der Cam-Frame im Overlay ist nur das Bild-/Rahmen-Element, nicht das Webcam-Video. (Im Pro Editor gibt's das `Camera`-Widget mit echtem Video-Sync, siehe [Verfuegbare APIs im Overlay].) ## Schritt 3: Chat-Box Klick auf das Chat-Widget. Eigenschaften: - Position: `Rechts unten` - Max. Nachrichten: `30` - Schrift: `Inter`, `16px` - Hintergrund: `transparent` (oder leicht abgedunkelt für Lesbarkeit) - Animation: `Fade` Chatlix erkennt automatisch deinen verbundenen Twitch- / YouTube-Channel und zieht den Live-Chat von dort. Wenn nichts kommt: in `/dashboard/integrations` die Verbindung prüfen. ## Schritt 4: Alert Das Alert-Widget liegt mittig oben: - Animation: `Slide from top` - Dauer: `5 s` - Sound: `Bell soft` (oder eigener Upload) - Trigger: Follow, Sub, Cheer, Raid - alle an Der Alert ist live testbar: rechte Spalte → `« Test-Alert »` → ein Beispiel-Follow wird im Preview gespielt **und** in OBS, wenn die Browser-Source aktiv ist. ## Schritt 5: Speichern und in OBS 1. Oben rechts `« Speichern »`. 2. `« Browser-Source-URL »` kopieren. 3. OBS öffnen, in deiner Szene `+` → Browser-Quelle. 4. URL einfügen, Width 1920, Height 1080, FPS 60. 5. `OK`. Die Webcam-Quelle (echte Hardware) legst du **unter** die Browser-Source - so dass das Overlay drüber liegt. ## Schritt 6: Test Im Dashboard `« Test-Alert »` klicken. Wenn der Alert in OBS erscheint: läuft. Wenn nicht: siehe [Pro Editor Troubleshooting]. ## Was kommt danach? - **Mehr Szenen** (Starting Soon, BRB, Ending): jeweils ein eigenes Overlay im Builder, jedes mit eigener URL. In OBS pro Szene eine Browser-Quelle. - **Mehr Widgets pro Layout**: ab ~5 Widgets wird's im Builder unübersichtlich. Wechsel in den Pro Editor. - **Animationen**: nur im Pro Editor. # Wichtige Widgets # Wichtige Widgets Dieser Überblick erklärt die zehn Builder-Widgets - wofür sie da sind, was sich einstellen lässt, und wo der typische Konfigurationsfehler liegt. ## Alert Zeigt Follows, Subs, Raids, Cheers, Tipps in einer Animation. - Settings: Animation, Dauer, Sound, Schriftfarbe, welche Event-Typen aktiv. - Mehrere Alerts gleichzeitig: werden in eine Queue gelegt und nacheinander abgespielt. - Typischer Fehler: Sound aktiv, aber `Control audio via OBS` in der Browser-Source aus - dann hörst du den Sound nur lokal, nicht im Stream. ## Chat-Box Live-Chat von Twitch / YouTube / Kick (je nach verbundener Plattform). - Settings: Max. Nachrichten, Schrift, Hintergrund, Emote-Größe. - Multi-Plattform: wenn du Twitch + YouTube verbunden hast, wird gemerged. Plattform-Icon pro Nachricht. - Typischer Fehler: kein Chat sichtbar = Integration nicht verbunden, Token abgelaufen. Prüfen unter `/dashboard/integrations`. ## Follower-Counter / Sub-Counter / Viewer-Counter Live-Zahlen, aktualisiert via WebSocket. - Settings: Schrift, Farbe, Label-Text. - Aktualisierung: Follower- und Sub-Counter sofort bei Event; Viewer-Counter alle 30 s. - Typischer Fehler: Counter zeigt 0 - oft heißt das, dass die Plattform-Anbindung das Polling-Recht nicht hat. Twitch-Scope `bits:read` / `channel:read:subscriptions` prüfen. ## Donation-Goal Fortschrittsbalken Richtung Ziel. - Settings: Zielbetrag, Währung, Reset-Verhalten (manuell, monatlich, pro Stream). - Quellen: PayPal, Streamlabs, eigene Tipping-Page. - Typischer Fehler: "Pro Stream" bedeutet, dass beim Stream-Start automatisch resettet wird. Wenn du das nicht willst, auf `manuell`. ## Recent-Events-Liste Kleine Sidebar mit den letzten N Events (Follows, Subs, Tipps). - Settings: Anzahl Einträge, Filter auf bestimmte Event-Typen. - Praktisch für "Just Chatting"-Szenen ohne große Alerts. ## Hype-Train Visualisierung des Twitch-Hype-Trains. - Settings: Schrift, Farbverlauf, Position. - Erscheint nur, wenn ein Hype-Train aktiv ist - sonst unsichtbar. - Typischer Fehler: "Erscheint nie" → Twitch-Channel hat keinen Hype-Train freigeschaltet (Affiliate-Status nötig). ## Logo / Bild Statisches Bild. PNG mit Transparenz empfohlen. - Settings: Position, Größe, Opazität. - Tipp: vorher auf Stream-Auflösung skalieren, siehe [Performance-Tipps]. ## Text-Banner Statischer Text, optional mit Scrolling ("Marquee"). - Settings: Inhalt, Schrift, Farbe, Scroll-Speed. - Praktisch für "Heute: Speedrun Hollow Knight". ## Timer Countdown oder Stream-Laufzeit. - Modi: `Countdown` (zählt runter), `Stopwatch` (zählt hoch), `Time since stream start`. - Typischer Fehler: Countdown läuft auf 0, dann passiert nichts - das ist Absicht. Wenn du etwas auslösen willst, brauchst du eine Automation-Rule. --- Wenn dir hier ein Widget fehlt (Custom-Counter, Poll, Leaderboard, Goal): das gibt's nur im Pro Editor. # Overlay Pro Editor vs Builder # Overlay Pro Editor vs Builder Chatlix hat zwei Editoren für Overlays. Sie sind nicht "besser oder schlechter" sondern für unterschiedliche Anwendungsfälle gebaut. ## Direkter Vergleich | Feature | Builder | Pro Editor | |---|---|---| | Editor-Stack | SvelteKit, Dashboard-Komponente | PHP + JS, eigener Canvas | | Positionierung | Preset-Quadranten + Slider | pixelgenau, drag-drop | | Widgets | ~10 vorgefertigte | 17 Element-Typen + Custom | | Z-Order | automatisch | manuell, sichtbare Layer-Liste | | Mehrere Szenen | nein, ein Layout | ja, Szenen-Manager | | Versionierung | letzte gespeicherte Version | volle Historie, Rollback | | Tastenkürzel | nein | Strg+Z/Y/C/V | | Custom-CSS | nein | ja, pro Element | | Debug-Modus | nein | ja, Trace-Logs | | Templates | Builder-Vorlagen | eigene Template-Library + Sharing | | Lernkurve | 5 Minuten | 30-60 Minuten | ## Wann der Builder reicht - Du startest neu und willst in 10 Minuten live. - Du hast eine Szene (Just Chatting, Gameplay). - Deine Anforderungen passen in die Standard-Widgets. - Du willst nicht ständig im Editor sitzen, sondern streamen. ## Wann du den Pro Editor brauchst - Mehrere Szenen, die sauber gepflegt werden sollen (Starting Soon, Gameplay, BRB, Stream Ending - alle in **einem** Overlay). - Du willst Elemente genau platzieren (z. B. Cam-Frame muss neben dem Game-HUD sitzen, ohne dass es draufkollidiert). - Du brauchst Widgets, die der Builder nicht hat: Poll, Leaderboard, Custom-Counter, Goal-Widget mit Custom-Steps. - Versionierung: du willst Änderungen testen können, ohne das produktive Layout zu verlieren. - Mehrere Streamer in einem Team-Account, die parallel am selben Overlay arbeiten. ## Umstieg Du kannst ein Builder-Overlay **importieren** in den Pro Editor: 1. Pro Editor öffnen. 2. `« Datei »` → `« Aus Builder importieren »`. 3. Quell-Overlay auswählen. Die Widgets werden 1:1 übernommen, Positionen werden in Pixel umgerechnet. Achtung: der **umgekehrte Weg** (Pro Editor → Builder) geht nicht - sobald du Pro-Features (Z-Order, Custom-CSS, Szenen) nutzt, gibt es kein automatisches Downgrade. Deshalb: wenn du dir nicht sicher bist, fang im Builder an. Wechseln kannst du jederzeit. ## Token bleibt gleich Wichtig für die OBS-Konfiguration: beim Wechsel Builder → Pro Editor bleibt der Browser-Source-Token **gleich**. Du musst die URL in OBS nicht ändern, das Overlay bleibt unter derselben Adresse erreichbar.