Eigener Code
Für eigene Overlays schreibst du HTML, CSS und JS selbst, legst Felder an und baust ganze Funktionen. Die Werkzeuge dafür stehen immer bereit, aber zugeklappt oder im Menü ⋯, damit das Studio übersichtlich bleibt.
Wo du Code findest
- Neues Overlay mit Code: In der Bibliothek öffnet ＋ Eigenes Overlay ein Fenster. Wähle Mit HTML, CSS und JS.
- Code bearbeiten: Auf der Seite einer Funktion, einer Leinwand oder eines eigenen Overlays öffnet im Reiter Aussehen das Menü ⋯ an der Karte Code bearbeiten. Die Seite hat die Reiter HTML, CSS, JS, Felder, Aktionen, Datenquellen, Dateien, Allgemein und Hilfe, daneben die Vorschau. Bei einer Leinwand steht Ebenen statt HTML, CSS und JS. Unter Allgemein stehen Link-Name, Größe und Beschreibung. Speichern oder Strg+S übernimmt alles, ← oben führt zurück. Mehr dazu unter Overlays in OBS einbinden.
- Felder mit Spalten: Eine Liste hat Spalten mit Typ, zum Beispiel Text, Zahl, Ja/Nein, Farbe, Auswahl, Bild, Ton oder Stimme.
- Code-Ebenen auf Leinwänden: eigenes HTML, CSS und JS als Ebene, im Designer in der Gruppe Code. Mehr dazu unter Leinwand gestalten.
- Eigene Funktionen: Bausteine mit eigenen Inhalten und Aktionen. Du legst sie in der Bibliothek mit ＋ Eigene Funktion an und änderst sie auf ihrer Seite mit Baustein bearbeiten. Mehr dazu unter Eigene Funktion bauen.
- Export und Import von Funktionen und Leinwänden samt Inhalten, Regeln und Variablen. Exportieren geht im Kopf der Funktionsseite oder im Menü einer Leinwand, importieren in der Bibliothek unter ＋ Eigenes Overlay mit ⇪ Importieren. Mehr dazu unter Funktionen und Leinwände weitergeben.
Hilfen im Overlay-Code
Im JS deines Overlays stehen unter RIWIUS.ui kleine Hilfen bereit:
RIWIUS.ui.queue(fn)zeigt Ereignisse nacheinander statt gleichzeitig.RIWIUS.ui.show(el, "fade")undRIWIUS.ui.hide(el, "slide-up")blenden mit denselben Animationen wie die Leinwand ein und aus.RIWIUS.ui.text("{user} ist da", data)füllt Platzhalter,{{name}}steht für eine Variable.RIWIUS.ui.countdown(el, endsAt)zeigt eine laufende Uhr.RIWIUS.ui.fit(el)passt Text in seine Box ein.RIWIUS.ui.sound("ding.mp3", 0.8)spielt einen Ton aus deinen Dateien.
Die wichtigsten Hilfen stehen unter Code bearbeiten im Reiter Hilfe. Dazu gibt es weitere, etwa RIWIUS.ui.wait und RIWIUS.ui.emotes.
Was du siehstSpeichern klappt nicht, es steht „Dafür fehlt dir das Recht.“
- Woran es liegt
Dir fehlt das Recht für Overlays.
- Was hilft
Den Inhaber des Kanals bitten, dir das Recht für Overlays zu geben.
Was du siehstAuf der Funktionsseite fehlt „Code bearbeiten“
- Woran es liegt
Das Recht für Overlays fehlt, oder die Funktion hat keine Ansicht.
- Was hilft
Recht prüfen. Funktionen ohne Ansicht haben keinen Code.
Wie es arbeitet
- Code, Felder, Code-Ebenen, eigene Funktionen sowie Export und Import brauchen nur das Recht für Overlays.
- Der Code eines Overlays läuft abgeschottet im Overlay, nie auf den Seiten des Studios. Auf einer Leinwand zeigt der Designer eine Code-Ebene erst nach dem Speichern.
- Die Hilfen unter
RIWIUS.uistehen auf jeder Overlay-Seite bereit.
Grenzen und Zahlen
| Was | Wert |
|---|---|
| Eigene Funktionen | höchstens 20 je Kanal |
| Je eigener Funktion | 5 Sammlungen, 10 Spalten, 10 Aktionen, 10 Ereignisse |
| Code je Teil | höchstens 500.000 Zeichen |
| Datei | höchstens 100 MB, Töne höchstens 5 MB und 20 je Overlay |
| Elemente einer Leinwand | höchstens 60 |
| Overlays je Exportdatei | höchstens 30 |
Zusammenspiel
- Overlays in OBS einbinden, Leinwand gestalten, Eigene Funktion bauen und Funktionen und Leinwände weitergeben beschreiben die Teile im Einzelnen.
- Regeln: Aktionen eigener Funktionen erscheinen als Regel-Aktionen. Mehr unter Regeln & Variablen.