
Das hier gezeigte Tutorial wird mit Streamer.bot und OBS umgesetzt. Falls du eine andere Streamingsoftware verwendest, kannst du versuchen es genau gleich einzubinden, jedoch kann ich nicht versprechen, dass es klappen wird. Bei Fragen darfst du dich gerne im Discord melden.
Aktuelle Version
Vorbereitung
Dateien Herunterladen
Als erstes kannst du dir alle benötigten Dateien hier herunterladen.
Erweiterung einrichten
OBS
Um eine gute Übersicht zu behalten, empfehle ich dir eine neue Szene in OBS zu erstellen und sie [Widget] CategorySwitch zu benennen.
In dieser Szene erstellst du eine neue Browser Quelle, benennst sie [Browser] CategorySwitch und machst die Einstellungen genau wie im folgenden Bild:

Nun kannst du überall wo du dies anzeigen willst, eine Szene als Quelle einfügen und die [Widget] CategorySwitch Szene auswählen.
Streamer.bot
Um es dir einfacher zu machen, habe ich dir die Action die du benötigst bereits exportiert und du muss diese lediglich noch in Streamer.bot importieren.
Kopiere dazu diesen Text:
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 Code musst du nun im Streamer.bot importieren indem du auf Import drückst, diesen Code bei Import String einfügst, danach siehst du die Action und den Command die hinzugefügt wird und drückst auf Import.
Hast du alles richtig gemacht, hast du nun unter Actions eine neue Action namens CategorySwitch und eine neue Queue namens Category switch.
Streamer.bot Action
Bei jeder SubAction welche mit Set startet, musst du auf der SubAction die direkt darunter ist etwas tun.

Set correct location of your file
Hier musst du den Pfad angeben, wo dein File welches du am Anfang heruntergeladen hast gespeichert ist. Wichtig hierbei ist, dass der Pfad mit file:\ beginnt.
Set comma separated category IDs
Hier kannst du die Twitch Kategorien IDs setzen indem du die IDs jeweils mit einem Komma dazwischen einfügst. Pro ID die du da einträgst, wird eine Kachel angezeigt werden. Hierbei solltest du maximal so 6 IDs einsetzen, danach wird der Platz nicht mehr reichen im Widget.
Wenn du die Liste leer lässt, so werden keine zusätzlichen Kategorien im Widget angezeigt.
Die einfachste Art und Weise die ID zu finden ist indem du auf Twitch selbst auf eine Kategorie gehst, Rechtsklick auf das Kategorie Bild, “Grafik in neuen Tab öffnen”. Wenn du das mit der “Just Chatting” Kategorie machst, sieht es wie folgt aus:

Das neue Tab, welches sich nun geöffnet hat, hat folgende URL: https://static-cdn.jtvnw.net/ttv-boxart/509658-144×192.jpg
Die Kategorie ID ist darin enthalten und ist im Beispiel von “Just Chatting” die 509658
Das ganze sieht dann etwa so aus:

Set Connection, Scene, Source – Do NOT touch the rest
Wenn du die Szene und die Quelle gleich benannt hast wie ich, so sollte bei diesen SubAction das ganze wie folgt aussehen bei dir:

ACHTUNG
- Bei
Connectionwird bei dir etwas anderes stehen, einfach sicher gehen, dass du da dein OBS auswählst. - Bei
SceneundSourcemüssen wir die am Anfang erstelle Szene und Browser Quelle auswählen.
Verfügbare Parameter
| Parameter | Pflicht | Beschreibung | Beispiel |
|---|---|---|---|
| categories | Nein | Komma getrennte Liste mit den Kategorie IDs (Bestimmt direkt die Anzahl gezeigter Kategorie Kacheln) | 369252_IGDB,369252_IGDB,369252_IGDB,369252_IGDB |
| oldCat | Ja | URL zum JPG der alten Kategorie | https://static-cdn.jtvnw.net/ttv-boxart/116747788-300×300.jpg |
| newCat | Ja | URL zum JPG der neuen Kategorie | https://static-cdn.jtvnw.net/ttv-boxart/369252_IGDB-300×300.jpg |

