Zum Inhalt springen
Craftium

Anleitung: Comic-Glücksrad einrichten

Etwa fünf Minuten. Du brauchst ein kostenloses StreamElements-Konto und die Dateien aus deinem Etsy-Download.

Bevor es losgeht

  • Ein kostenloses StreamElements-Konto, angemeldet mit dem Kanal, auf dem du streamst.
  • Dein Etsy-Download, entpackt. Die Dateien des Rads liegen im Ordner spin-wheel: vier Dateien html.txt, css.txt, js.txt und fields.txt im Ordner deines Stils, beim Bundle mit Stil-Umschalter in spin-wheel/bundle.
  • Ein Computer mit Chrome, Edge oder Firefox. Auf dem Handy funktioniert der StreamElements-Editor schlecht.

Rad in StreamElements einrichten

  1. Overlays öffnen

    Auf streamelements.com anmelden und links auf Overlays klicken. Du nutzt schon unseren Comic Chat? Dann kommt das Rad ins selbe Overlay, weiter mit Schritt 3.

  2. Neues Overlay anlegen

    Auf New overlay klicken, 1080p (1920 × 1080) wählen und Start. Die Einführungstour schließen und dem Overlay einen Namen geben.

  3. Custom Widget hinzufügen

    Auf Add widget (das +) klicken, dann Static / Custom und Custom widget. Oben links erscheint ein kleiner Kasten.

  4. Code-Editor öffnen

    Das neue Widget ist ausgewählt: links auf Open editor klicken. Du siehst fünf Reiter: HTML CSS JS Fields Data.

  5. Alle vier Reiter ersetzen

    Für HTML, CSS, JS und Fields: die passende Datei öffnen (zum Beispiel html.txt), alles kopieren, in den Reiter klicken, mit Strg + A (Mac: Cmd + A) alles markieren, löschen und einfügen. Data so lassen und auf Done klicken.

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

  6. Kasten anpassen

    Ein neues Custom Widget ist nur 290 × 180 Pixel groß. Position, size and style öffnen, Breite 600 und Höhe 890 eintragen (ganzes Rad mit Titel, Karte und Ziel-Balken). Dann den Kasten an seinen Platz ziehen.

    Jede Größe geht: Das Rad passt sich an und wird nie abgeschnitten. Klein in der Ecke über der Webcam: etwa 390 × 460, Titel und Ziel-Balken aus.

  7. Eigene Felder eintragen

    In den Einstellungen des Widgets Wheel fields öffnen: ein Feld pro Zeile, 2 bis 12 Felder. Das Rad teilt sich selbst ein.

    Mit Strich und Zahl kommt ein Feld seltener oder häufiger: Verlosung | 0.5 halb so oft, Nochmal! | 2 doppelt so oft, | 0 schaltet ein Feld ab. Lässt du die Beispiel-Felder stehen, zeigt das Rad sie in der gewählten Sprache.

  8. Speichern und testen

    Auf Save klicken. Dann Test: spin the wheel, Test: a new sub und Test: goal +1 ausprobieren.

    Testknöpfe gehen erst nach dem ersten Speichern und nur im Editor. Für OBS Test buttons also work in OBS einschalten.

Was das Rad dreht

Auslöser: Unter Spin triggers wählst du neue Abos und Resubs, verschenkte Abos (eine Drehung je Geschenk oder je Abo, bis zu 10), Bits und Trinkgeld ab einem Mindestwert, eine Kanalpunkte-Belohnung, einen Chatbefehl (Standard !spin, nur du und deine Mods, mit Abklingzeit für Zuschauer), Follows und Raids. Mehrere Drehungen warten in einer Reihe und laufen nacheinander.

Kanalpunkte-Belohnung: Im Twitch Creator Dashboard Viewer Rewards → Channel Points → Manage Rewards & Challenges öffnen und Add New Custom Reward klicken. Genau den Namen aus Name of that reward on Twitch nehmen, Standard Spin the wheel (Groß und klein egal). Kanalpunkte gibt es ab Twitch Affiliate.

Ziel-Balken: Unter Goal bar wählen, was zählt (Abos, Follows, Bits oder Trinkgeld), und das Ziel eintragen. Der Stand kommt aus deiner StreamElements-Session, derselben wie bei den StreamElements-Zielen, und bleibt deshalb auch nach einem Neustart von OBS. Add to the count zählt eine feste Zahl dazu, zum Beispiel Abos von vorher.

Mod-Befehle: Du und deine Mods schreiben !wheel hide und !wheel show (das Rad geht und kommt wieder, Drehungen warten so lange), !wheel clear (wartende Drehungen verwerfen) und !wheel reset (Ziel-Balken auf den Start, die Feier kann wieder kommen). Ausgeblendetes Rad und Reset bleiben nach einem Neustart von OBS. Das Wort änderst du unter Command word for you and your mods, leer = aus.

Overlay in OBS einbinden

  1. In deiner Overlay-Liste auf StreamElements das Menü … des Overlays öffnen und Copy URL wählen. Diesen Link niemandem zeigen: Er enthält einen Schlüssel zu deinem Konto.
  2. In OBS Studio unter Sources (Quellen) auf + klicken und Browser wählen. Den Link als URL einfügen, Breite 1920 und Höhe 1080.
  3. Für Tick- und Gewinn-Ton Control audio via OBS (Audio über OBS steuern) einschalten: Dann hat das Rad einen eigenen Regler im Audio-Mixer.
  4. Shutdown source when not visible und Refresh browser when scene becomes active ausgeschaltet lassen, sonst lädt das Rad bei jedem Szenenwechsel neu.

Streamlabs Desktop: Add Source → Browser Source, gleicher Link, gleiche Einstellungen.

Weitere Einstellungen

Im Overlay-Editor von StreamElements auf das Widget klicken. Die Einstellungen stehen links. Nach Änderungen auf Save klicken.

EinstellungWirkung
Comic styleNur im Bundle: Pop Art, Manga oder Neon. Jederzeit umschaltbar.
Language of the labelsTitel, Karten und Ergebnis auf Deutsch, English, Español, Português oder Français.
Size inside the widget box50 bis 100 %: kleiner im Kasten, nie abgeschnitten.
Own title / Own goal labelEigene Worte. Leer = die Beschriftung deiner Sprache.
Show the title / Show who triggered the spin / Show the goal barTitel, Karte mit dem Namen und Ziel-Balken zeigen oder ausblenden.
Wheel visibleImmer im Bild oder nur beim Drehen: Das Rad springt herein und verschwindet wieder.
Sound / VolumeZeiger-Ticks und ein Gewinn-Ton je Stil, im Code erzeugt. Lautstärke 0 bis 100 %.
Color themeKlassische, Nacht- oder Pastellfarben deines Stils.
Calm modeKeine Blitze, kein Flackern, das Rad dreht trotzdem.

Hilfe

Es erscheint nichts
  • Alle vier Reiter ersetzt und auf Save geklickt?
  • Kasten größer als 290 × 180?
  • OBS-Browserquelle auf 1920 × 1080 und mit dem Link des richtigen Overlays?
  • In OBS die Quelle öffnen und Refresh cache of current page klicken.
Ein Abo kam, aber das Rad drehte nicht

Spin on new subs and resubs prüfen. Bei Bits und Trinkgeld den Mindestwert prüfen. Mehrere Drehungen warten in der Reihe, die nächste startet nach dem Ergebnis.

Die Kanalpunkte-Belohnung tut nichts

Der Name der Belohnung muss genau zum Feld passen (Groß und klein egal). Die Belohnung legst du auf Twitch an, nicht in StreamElements, und sie braucht Affiliate oder Partner.

Der Befehl tut nichts

Standard: nur du und deine Mods, Zuschauer warten die Abklingzeit ab. Who may use the command ändern. Der Befehl muss das erste Wort der Nachricht sein.

Kein Ton

Der Ton spielt in OBS. Im Editor sperrt dein Browser ihn eventuell, bis du in die Seite klickst. In OBS Control audio via OBS einschalten und den Mixer prüfen.

Die Zahl im Ziel stimmt nicht

Gezählt wird deine StreamElements-Session, sie setzt sich nach deinen Session-Einstellungen in StreamElements zurück. Add to the count für Abos von vorher nutzen.

Zu viel Blitzen für meine Zuschauer

Calm mode einschalten: keine Blitze, kein Flackern, das Rad dreht trotzdem.

Testen mit Emulate

Emulate im Overlay-Editor schickt Test-Abos, Trinkgeld und Cheers (unter deinem Bits-Mindestwert dreht nichts). Sie zählen im Ziel-Balken bis zum Neuladen; StreamElements nimmt sie nicht in die Session auf. Kanalpunkte lassen sich nicht emulieren, teste sie mit einer echten Einlösung. Achtung: „Preview LIVE on stream“ ist vorausgewählt.

Immer noch nicht?

Schreib uns über Etsy-Nachrichten oder an craftium.berlin@gmail.com. Nenne deinen Stil, dein Streaming-Programm und was du siehst; ein Bildschirmfoto vom Editor hilft. Schick uns nie deinen Overlay-Link.

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, auf das Widget klicken, dann Open editor.
  2. HTML, CSS, JS und Fields durch die neuen Dateien ersetzen, genau wie in Schritt 5.
  3. Data nicht anfassen: Dort stehen deine Einstellungen.
  4. Auf Done und Save klicken.

Aktuelle Version: 1.0.0