Zum Inhalt springen
Craftium

Anleitung: Comic-Wurf

Etwa zehn Minuten. Du brauchst OBS Studio ab Version 28, ein kostenloses StreamElements-Konto und deine persönlichen Dateien von unserer Lizenzseite (Link in deinem Etsy-Download, Bestellnummer bereithalten).

Bevor du anfängst

  • OBS Studio ab Version 28. Das Widget spricht über den eingebauten OBS-WebSocket mit OBS. Streamlabs Desktop und Meld Studio haben ihn nicht.
  • Ein kostenloses StreamElements-Konto, angemeldet mit dem Kanal, auf dem du streamst.
  • Die Einrichtung auf der Lizenzseite: Nach Bestellnummer und Kanal zeigt sie für jeden Reiter einen Kopieren-Knopf (HTML, CSS, JS, Fields). Dein Lizenzschlüssel steckt schon im Code. Alles gibt es dort auch als ZIP (Sicherung).

OBS vorbereiten

In OBS Studio Tools → WebSocket Server Settings öffnen, Haken bei Enable WebSocket server setzen, Port 4455 lassen, Show Connect Info anklicken und das Passwort kopieren. Gib es nie weiter.

Deine Webcam-Quelle bleibt, wie sie ist, klein oder groß, irgendwo in deiner Szene. Das Widget findet die erste sichtbare Kamera der laufenden Szene selbst und folgt, wenn du sie verschiebst oder die Szene wechselst. Dein Kamerabild bleibt auf deinem Rechner.

Widget in StreamElements einrichten

  1. Overlays öffnen

    Bei streamelements.com anmelden und links im Menü Overlays anklicken. Nutzt du schon unseren Comic Chat, das Glücksrad oder den Alarm? Leg das Wurf-Widget ins selbe Overlay und mach mit Schritt 3 weiter.

  2. Neues Overlay anlegen

    New overlay anklicken, 1080p (1920 × 1080) wählen und Start klicken.

  3. Custom Widget hinzufügen

    Add widget (der Plus-Knopf), dann Static / Custom und Custom widget.

  4. Code-Editor öffnen

    Das neue Widget ist ausgewählt: links auf Open editor klicken.

  5. Alle vier Reiter ersetzen

    Für HTML, CSS, JS und Fields: auf der Lizenzseite den passenden Knopf drücken (zum Beispiel HTML kopieren) oder die Datei aus dem ZIP kopieren, in den Reiter klicken, mit Strg + A (Mac: Cmd + A) alles markieren, löschen und einfügen. Data bleibt, wie es ist. Dann Done.

    Alle vier ersetzen, auch wenn ein Reiter gut aussieht. StreamElements füllt CSS und JS mit einem Beispiel-Widget.

  6. Über das ganze Overlay ziehen

    Position, size and style öffnen und den Kasten auf 1920 × 1080 an Position 0, 0 setzen. Dann landen die Würfe auf deiner Kamera, egal wo sie sitzt.

  7. Passwort und Kamera

    Unter OBS connection das Passwort in OBS WebSocket password einfügen. Camera source name darf leer bleiben. VTuber-Modell oder Hintergrund-Entfernung? Silhouette from auf Transparenz stellen.

  8. Speichern und testen

    Save klicken, dann Test: throw a tomato oder Test: throw a salvo. Erreicht der Editor OBS nicht, zeigt er einen gezeichneten Demo-Streamer und einen Hinweis, was fehlt.

    Einen Zähler (getroffen, ausgewichen, zurück)? Das Widget ein zweites Mal hinzufügen, What this widget shows auf den Zähler stellen und frei platzieren.

Deine Würfe

Wurfrunden: Standardmäßig wirft der Chat nur in einer Runde (When can chat throw?). Start mit !throw start oder !throw start 90, mit einer Kanalpunkte-Belohnung mit „Wurfrunde“ im Titel, einem Rad-Feld wie „Wurfrunde 45 s“ oder automatisch alle paar Minuten. !throw stop beendet sie. Ein Fadenkreuz warnt vor jedem Wurf, am Ende kommen Treffer, Ausweicher und der beste Werfer. Die Texte legst du selbst fest.

Ereignisse: Unter Events Objekt und Anzahl für Follows, Abos, Geschenk-Abos, Bits, Trinkgeld, Raids und Kanalpunkte wählen: Tomate oder Sticker (kleben), Ball oder Emote (prallen ab) oder Mix. Ab 10 Würfen läuft vorher ein Countdown 3, 2, 1.

Chat: Zuschauer schreiben !throw, und die Emotes aus ihrer Nachricht fliegen auf dich. Wer werfen darf und die Abklingzeiten bestimmst du.

Comic-Glücksrad: Rad-Felder mit Tomaten, Stickern, Bällen oder einem Wurf, etwa „15 Tomaten“, werfen auf dich, sobald das Rad steht. Oder genaue Feldnamen in Comic Wheel fields that throw eintragen.

Mod-Befehle: !throw pause, !throw resume, !throw clear, !throw reset. In der Pause werden bezahlte Würfe gesammelt und kommen nach !throw resume. Pause und Zähler überstehen einen Neustart von OBS.

Overlay in OBS einfügen

  1. In deiner Overlay-Liste bei StreamElements das Menü … des Overlays öffnen und Copy URL klicken. Gib diesen Link nie weiter: Er enthält einen Schlüssel zu deinem Konto.
  2. In OBS Studio unter Sources auf + klicken und Browser wählen. Den Link als URL einfügen, Width 1920 und Height 1080 setzen und die Quelle über deine Kamera legen.
  3. Für den Ton Control audio via OBS einschalten.
  4. Shutdown source when not visible und Refresh browser when scene becomes active ausgeschaltet lassen.

Streamlabs Desktop und Meld Studio haben keinen OBS-WebSocket: Das Widget sieht deine Kamera dort nicht.

Weitere Einstellungen

Im StreamElements-Overlay-Editor das Widget anklicken; die Einstellungen erscheinen links. Nach Änderungen Save klicken.

EinstellungWas sie tut
Comic styleNur im Bundle: Pop Art, Manga oder Neon. Jederzeit umschaltbar.
Language of the textsEnglish, Deutsch, Español, Português oder Français.
Color themeKlassische, Nacht- oder Pastellfarben deines Stils.
Crosshair warning before each throwSekunden, die ein Fadenkreuz vor jedem Wurf zeigt; 0 = ohne Warnung.
Seconds sticky things stayWie lange Tomaten und Sticker kleben, bevor sie abfallen.
Silhouette updates per secondAuf schwächeren PCs senken; die Erkennung läuft nur, solange etwas fliegt oder klebt.
Show detected silhouetteZeigt rot, was das Widget als dich erkennt, zum Einrichten.
Camera positionAutomatisch aus OBS oder manuell mit Schiebern (etwa für eine Kamera in einer verschachtelten Szene).

Hilfe

Nichts fliegt auf mich
  • WebSocket-Server in OBS an und das Passwort in OBS WebSocket password?
  • Widget im StreamElements-Editor öffnen: Ein Hinweis sagt, was fehlt.
  • Der Chat wirft nur in einer Runde: !throw start schreiben.
  • Pausiert? !throw resume schreiben.
Würfe landen neben mir

Mehrere Kameras? Den genauen Namen in Camera source name eintragen. Show detected silhouette zeigt, was das Widget als dich erkennt.

Mein PC wird langsam

Silhouette updates per second senken.

Kommst du nicht weiter?

Schreib uns über Etsy-Nachrichten oder an craftium.berlin@gmail.com. Nenn deinen Stil, deine OBS-Version und was du siehst. Schick uns nie deinen Overlay-Link oder dein OBS-Passwort.

Updates

Updates für Version 1.x installieren sich beim Laden des Overlays selbst, deine Einstellungen bleiben. Nur wenn der Editor einen Update-Hinweis zeigt:

  1. Das Overlay in StreamElements öffnen, das Widget anklicken, dann Open editor.
  2. HTML, CSS, JS und Fields durch die neuen Dateien ersetzen, genau wie in Schritt 5.
  3. Done und Save klicken.

Aktuelle Version: 1.0.0