RH Riwius Hub
Mit Twitch anmelden

Overlays in OBS einbinden

Overlays sind Webseiten, die OBS als Browserquelle über dein Bild legt. Alerts, Countdowns, Goal und Scoreboard laufen so in deinem Stream. Was du im Studio änderst, kommt von selbst in OBS an.

Overlay in OBS hinzufügen

  1. Füge in der Bibliothek eine Funktion hinzu. Auf ihrer Seite kopierst du unter Aussehen den Link.
  2. Klicke in OBS unter Quellen auf das Plus und wähle Browser.
  3. Füge den Link bei URL ein und trage Breite und Höhe ein. Die passenden Werte stehen beim Overlay, meistens 1920 × 1080.
  4. Hat das Overlay Ton, schalte Audio über OBS steuern ein.
  5. Bestätige mit OK. Fertig.

Am einfachsten füllt die Quelle das ganze Bild. Die Lage stellst du dann im Studio ein.

Overlays hinzufügen

  • Bibliothek: Alerts, Kanalpunkte, Countdown, Schrittzähler, Actionboard, Medienplayer und mehr, jede Karte mit Vorschaubild, dazu Rezepte für einen Zweck auf einmal. Hinzufügen legt eine Funktion mit eigener Seite an. Jedes Overlay nutzt die ganze Fläche deiner Szene, in 1920 × 1080 oder 2560 × 1440. Auf der Seite der Funktion kopierst du den Link und stellst Platzierung, Farben und Texte im Reiter Aussehen ein. Mehr unter Funktionen aus der Bibliothek hinzufügen.
  • Eigenes Overlay: In der Bibliothek öffnet ＋ Eigenes Overlay ein Fenster. Leinwand fasst viele Elemente in einer einzigen Browserquelle zusammen. Texte, Bilder, Balken und die Anzeigen deiner Funktionen legst du im Designer frei auf die Fläche, ganz ohne Code. Mehr unter Leinwand gestalten. Mit Mit HTML, CSS und JS schreibst du den Code selbst, siehe Eigener Code.
  • Importieren: Eine Exportdatei (.json) übernimmst du im selben Fenster mit ⇪ Importieren. So gibst du Overlays zwischen Kanälen weiter. Gibt es das Overlay schon, fragt die Seite nach: Überschreiben bringt den neuen Stand, Link und deine Einstellungen bleiben. Als neues Overlay legt ein zweites mit eigenem Link an.
  • Eigene Funktion und Weitergeben: ＋ Eigene Funktion in der Bibliothek baut einen eigenen Baustein. Ganze Funktionen und Leinwände samt Regeln gibst du als Datei weiter, mehr unter Funktionen und Leinwände weitergeben.

Leinwände und eigene Overlays stehen danach im Menü unter Overlays, neue ganz unten. Per Ziehen ordnest du sie zwischen deine Funktionen, siehe Reihenfolge im Menü. Ein Rechtsklick oder ⋯ am Eintrag bietet Umbenennen, Duplizieren, Exportieren, Nach oben, Nach unten und Entfernen.

Ihre Seite ist aufgebaut wie die einer Funktion. Oben stehen Umbenennen und Duplizieren, im ⋯ daneben Exportieren und Entfernen. Darunter folgen die Reiter Aussehen und, wenn das Overlay Aktionen hat, Auslöser. Den Code öffnest du unter Aussehen mit ⋯ an der Karte und Code bearbeiten, siehe Eigener Code.

Lage und Größe

Bei jedem Overlay stellst du Lage und Größe gleich ein. Der Abschnitt Position und Größe steht immer ganz oben.

  • Ecke oder Kante: Im Raster wählst du, wo das Overlay sitzt, zum Beispiel Oben rechts oder Mitte.
  • Abstand: Wie weit es von dieser Kante entfernt ist, in Pixeln deiner Szene. Die Felder heißen passend, zum Beispiel Abstand rechts und Abstand oben. In der Mitte heißen sie Versatz: plus schiebt nach rechts bzw. unten.
  • Größe: 100 % ist die Standardgröße, 50 % halb so groß, 200 % doppelt so groß.
  • Breite: Bei Kästen mit Text wie Goal oder Scoreboard legst du fest, wie breit sie bei 100 % sind.

Manche Overlays haben einen zweiten Teil mit eigener Platzierung, zum Beispiel die laufenden Aufgaben beim Glücksrad. Stelle die Browserquelle in OBS auf die Größe deiner Szene, zum Beispiel 1920 × 1080. Dann stimmen die Pixel genau.

Per Ziehen platzieren

  1. Klicke in der Vorschau auf Platzieren. Jeder Teil des Overlays bekommt einen Rahmen mit Namen. Teile, die gerade leer sind, zeigt ein gestrichelter Rahmen.
  2. Zieh den Teil dorthin, wo er im Bild sitzen soll. Er rastet an Rand und Mitte ein, mit Alt nicht.
  3. Lass los. Die Ecke stellt sich von selbst ein: Liegt die Mitte des Teils im rechten unteren Drittel, wird es Unten rechts. Die Abstände rechnet das Studio so um, dass der Teil genau dort bleibt.
  4. Zieh an einer Ecke, um ihn größer oder kleiner zu machen. Kästen mit Breite haben links und rechts einen Griff für die Breite.
  5. Die Felder unter Position und Größe ziehen mit und speichern wie eine Eingabe. Rückgängig in der Benachrichtigung nimmt die Änderung zurück.

Klicke einen Teil an und verschiebe ihn mit den Pfeiltasten um einen Pixel, mit Umschalt um zehn. Tab wählt den nächsten Teil, Esc bricht das Ziehen ab. Ziehen geht ab Tablet-Breite, auf dem Handy bleiben die Zahlen. Auf einer Leinwand ziehst du die Teile einer Funktion genauso im Designer.

Overlay anpassen

Bei Funktionen, Leinwänden und eigenen Overlays steht alles im Reiter Aussehen unter der Karte des Overlays. Unter dem Link wählst du die Auflösung der Browserquelle, zum Beispiel 2.560 × 1.440. Sie wirkt sofort, das Layout bleibt gleich und wird nur größer oder kleiner. Danach stellst du in OBS Breite und Höhe der Browserquelle gleich ein. Dort steht alles, was sich einstellen lässt, sortiert nach Position und Größe, Inhalt, Aussehen, Ton und Verhalten. Bilder, Videos und Töne lädst du direkt am Feld hoch. Schriften wählst du aus einer Liste, mehrere Werte tippst du als Chips an. In Listen wie Socials legst du Einträge an und sortierst sie mit den Pfeilen. Ein Knopf wie Jetzt zeigen löst die Aktion gleich in OBS aus. Manche Felder erscheinen erst, wenn sie passen, zum Beispiel das Logo nur im Modus Bild. In Textfeldern fügst du Variablen wie {{tode}} und Werte deiner Funktionen wie {{goal.prozent}} über das Seitenpanel ein. Das klappt in Overlays mit der Datenquelle Variablen und auf jeder Leinwand. Die Vorschau daneben spielt beim Öffnen Beispieldaten ab, damit du siehst, wie es im Stream aussieht. Mit Ton an und Ton aus schaltest du ihren Ton. Aus ist praktisch, wenn du gleichzeitig in OBS testest, dann klingt nichts doppelt. Das Studio merkt sich die Wahl auf deinem Gerät.

Felder anlegen

Bei eigenen Overlays legst du unter Code bearbeiten im Reiter Felder fest, was es unter Anpassen gibt. Du öffnest es unter Aussehen mit ⋯ an der Karte.

  1. Klicke auf + Einstellung. Das neue Feld öffnet sich gleich.
  2. Gib eine Bezeichnung ein. Der Schlüssel folgt ihr von selbst, bis du ihn änderst. Im Code liest du das Feld als RIWIUS.settings.schluessel.
  3. Wähle den Typ, zum Beispiel Platzierung, Text, Zahl, Farbe, Auswahl, Bild, Liste oder Aktionsknopf. Für die Platzierung braucht das HTML ein Element mit data-place, Lage und Größe setzt dann die Laufzeit. Je nach Typ kommen Angaben wie Von und Bis, Einheit oder Auswahlwerte dazu.
  4. Mit den Pfeilen änderst du die Reihenfolge, mit dem Stift klappst du ein Feld auf und zu. Das Kreuz entfernt es.
  5. Speichern übernimmt die Felder.

Spalten einer Liste

Ein Feld vom Typ Liste hat Einträge mit festen Spalten, etwa Plattform, Name und Link. Die Spalten legst du direkt im Feld mit + Spalte an, höchstens zehn. Jede Spalte hat einen Typ:

  • Text und Text (mehrzeilig) für freie Eingaben, mit Platzhalter.
  • Zahl mit Von und Bis. Werte außerhalb lassen sich nicht speichern.
  • Ja/Nein als Schalter.
  • Farbe mit Farbwähler.
  • Auswahl mit festen Auswahlwerten.
  • Bild und Ton aus den Dateien des Overlays, hochladen geht direkt in der Zeile. Töne gehen als MP3, WAV, OGG oder M4A bis 5 MB, höchstens 20 je Overlay. Das Studio prüft, ob die Datei wirklich ein Ton ist.
  • Gegenstand, Belohnung, Stimme und Szene verweisen auf Daten deines Kanals.

Mit Standardwert startet jeder neue Eintrag schon ausgefüllt. Pflicht sorgt dafür, dass die Spalte nie leer bleibt. Jeder Eintrag behält beim Sortieren und Bearbeiten seine feste Kennung _id, so findet der Code ihn immer wieder.

Woher die Daten kommen

Die meisten Overlays hören auf eine oder mehrere Datenquellen, zum Beispiel Alerts, Countdown oder Goal. Manche brauchen keine, etwa Socials oder die Ereigniskarte: Sie zeigen, was du einstellst oder was eine Regel auslöst. Socials gibt es in den Looks Standard, Neon und Pille, den Countdown bis Datum in Standard, Neon und Groß. Seiten wie Countdowns oder Goalbar zeigen oben die Leiste In OBS mit ihren Overlays. Dort kopierst du den Link direkt.

Auf ein bestimmtes Ereignis reagieren

Ein Overlay kann auf ein einzelnes Ereignis reagieren statt auf alles. Beispiel: Jemand löst den Gegenstand Happy Hour ein, und in einer Ecke erscheint eine kleine Karte mit Timer. Am schnellsten geht das mit dem Rezept Happy Hour mit Timer aus der Bibliothek. Von Hand geht es so:

  1. Füge in der Bibliothek die Ereigniskarte mit Timer hinzu, wahlweise im Look Neon oder Hell. Auf ihrer Seite stehen die Regeln im Reiter Auslöser.
  2. Klicke unter Startet durch bei der Aktion auf ＋ Auslöser und wähle das Ereignis, zum Beispiel Gegenstand eingelöst.
  3. Wähle den Gegenstand. Möglich sind auch eine Menge mit Ab und Bis, Nur live oder Einmal je Person.
  4. Unter Aktionen steht schon Overlay zeigen mit diesem Overlay und seiner Aktion. Trag die Dauer in Sekunden ein, zum Beispiel 900 für 15 Minuten.
  5. Wähle unter Erneut ausgelöst, was passiert, wenn das Ereignis wieder kommt, während die Karte läuft: Verlängern, Neu starten oder Nichts tun. Bei Nichts tun lässt sich der Gegenstand nicht einlösen, solange die Karte läuft.
  6. Mit Mitzählen zählt die Karte zum Beispiel Abos während der Happy Hour und zeigt den Stand.
  7. Anlegen, dann mit ▶ Testen ausprobieren. Laufende Karten stehen unter Läuft gerade, dort kannst du sie beenden.

Eine Regel kann mehrere Aktionen der Reihe nach ausführen, jede mit eigener Wartezeit. So zeigt sie zum Beispiel erst die Karte und schreibt danach eine Nachricht in den Chat.

Leinwände und eigene Overlays haben denselben Reiter Auslöser. Unter Startet durch steht je Aktion des Overlays ein Block, zum Beispiel Einblenden und Ausblenden. ＋ Auslöser legt dort eine Regel an, in der Overlay zeigen mit genau dieser Aktion schon eingetragen ist. Darunter löst Fernsteuern jede Aktion mit ▶ Ausprobieren aus und zeigt mit Anleitung, wie du sie auf eine Stream-Deck-Taste legst.

Titel, Text, Emoji und Farben stellst du im Reiter Aussehen ein, die Lage unter Position und Größe. Der Timer läuft auf dem Server weiter, auch wenn OBS die Quelle neu lädt. Regeln gibt es für jedes Overlay mit einer Aktion, also auch für eigene Overlays.

Ist das Overlay aktiv?

Der Punkt am Overlay zeigt den Stand: grün heißt aktiv in OBS, grau heißt gerade nicht verbunden. Er steht im Reiter Aussehen an der Karte des Overlays, bei Funktionen wie bei Leinwänden und eigenen Overlays. Fährst du mit der Maus darüber, siehst du, wann es zuletzt in OBS lief. Bleibt der Punkt grau, prüfe, ob OBS läuft und die Browserquelle sichtbar ist. Steht ruht am Overlay, liegt es über der Grenze deines Tarifs und zeigt in OBS nichts.

Einstellungen für alle Overlays

Unter Overlays steht im Menü ganz oben Einstellungen. Dort steht, was für alle Overlays gilt: Overlays folgen der Kamera, Updates und Overlay-Links. Unter Updates stehen alle Overlays, für die es in der Bibliothek eine neue Version gibt. Öffnen führt zum Overlay, ab zwei Overlays ohne eigene Änderungen aktualisiert Alle aktualisieren sie auf einmal.

Die Links enthalten einen geheimen Schlüssel. Wer den Link kennt, sieht das Overlay. Unter Einstellungen macht Links erneuern alle bisherigen Links ungültig. Danach musst du die neuen Links in OBS eintragen. Den Knopf sieht nur der Inhaber des Kanals.

Overlays folgen der Kamera

Unter Einstellungen fügst du bei Overlays folgen der Kamera mit ＋ Overlay die Overlays hinzu, die der Kamera ausweichen: Steht die Kamera links, rücken sie nach rechts und umgekehrt. Die Ecke wechselt die Seite, der Abstand bleibt. Einzelne Szenen können eine feste Seite bekommen. Dafür braucht es das OBS-Plugin.

Gut zu wissen

  • Emotes deines Kanals und von 7TV erscheinen in jedem Overlay-Text als Bild. In den Textfeldern im Studio fügst du sie mit Doppelpunkt und den ersten Buchstaben ein, zum Beispiel :kekw.
  • Testdaten und ▶ Aktion unter Ausprobieren in der Vorschau gehen an das echte Overlay, also auch in OBS. Die Beispieldaten beim Öffnen sieht nur die Vorschau.
  • Bleibt ein Overlay leer, hilft der Artikel Overlay zeigt nichts an.

ab Unlimited

Die Kamera-Funktion gibt es ab Unlimited. Wie viele Funktionen und Overlays du anlegen kannst, hängt vom Tarif ab. Jede Leinwand zählt einmal, ihre Elemente zählen nicht.