Lokale Windows-App für Twitch-Sammelkarten – mit animiertem OBS-Overlay. Deine Zuschauer ziehen über Kanalpunkte oder Chat-Befehle Karten aus Booster-Packs, die live in OBS aufgehen, bauen ihre eigene Sammlung auf und können Karten sogar untereinander tauschen.
- Du legst Booster (Karten-Packs) und Karten an – ein paar Beispiele sind schon dabei, du kannst also sofort loslegen.
- Du verbindest Twitch (für Kanalpunkte/Chat) und OBS (für das Overlay).
- Ein Zuschauer löst eine Belohnung ein oder tippt z. B.
!packin den Chat → die App zieht zufällig eine Karte und spielt die Animation in OBS ab. - Jede gezogene Karte landet in der Sammlung des Zuschauers. Über
!collectionkann er sie zeigen, über!trademit anderen tauschen.
Du brauchst: Windows 10/11 und OBS Studio. Die WebView2-Runtime (für die Bedienoberfläche) ist auf aktuellen Windows-Versionen vorinstalliert. Eine eigene Twitch-Entwickler-App ist nicht nötig.
- Schnellstart
- Twitch verbinden
- Bot-Account für Chat
- OBS einrichten
- Booster anlegen
- Karten anlegen
- Seltenheiten & Gewichtung
- Kanalpunkte-Belohnungen
- Sammlungs-Showcase
- Chat-Befehle
- Tauschsystem
- Tausch-Animation
- Nutzung Befehle
- Queue
- Darstellung & Sounds
- Nutzer verwalten
- Daten & Updates
- Aus dem Quellcode bauen
- Lizenz
- Aktuelle Version von der Releases-Seite herunterladen.
- Das ZIP komplett entpacken (nicht direkt im ZIP starten) und
CardPackWidget.exeausführen. Es öffnet sich ein Fenster mit der kompletten Verwaltung – links die Navigation. - Empfohlene Reihenfolge fürs erste Einrichten: Verbindung → Booster → Karten → Kanalpunkte / Chat Befehle.
- Zum Ausprobieren: Im Tab Übersicht auf Demo zufällig ausführen klicken – das spielt eine
Pack-Animation ab (das OBS-Overlay oder die Datei
overlay.htmlmuss dafür geöffnet sein).
Tipp: Beispiel-Booster und -Karten sind bereits enthalten – du kannst die Animation also testen, bevor du eigene Inhalte anlegst.
Falls du Fragen hast, gibt es in der App unter Übersicht einen Button, der direkt zu dieser Anleitung führt.
Der Ordner
data\enthält deine Karten, Booster und Sammlungen. Bei einem manuellen Update immer behalten – nurpublic\, die DLLs und die exe überschreiben (siehe Daten & Updates).
- In Verbindung auf Mit Twitch anmelden klicken – der Login öffnet sich im Standardbrowser.
- Nach der Freigabe aktualisiert sich der Status automatisch (grün = verbunden).
Es muss keine eigene Twitch-Developer-App angelegt werden. Die nötigen Berechtigungen
(channel:read:redemptions, channel:manage:redemptions sowie user:read:chat,
user:write:chat für die Chat-Befehle) werden automatisch angefragt.
Mit Abmelden wird das lokal gespeicherte Token gelöscht.
Wenn du die App von einer älteren Version aktualisierst: Melde den Hauptaccount einmal neu an, damit er die zusätzlichen Chat-Rechte erhält – sonst funktionieren die Chat-Befehle nicht (das Log weist darauf hin).
Die Chat-Befehle (!pack, !collection, !trade …) liest und beantwortet die App über einen
Twitch-Account. Standardmäßig wird dafür der Hauptaccount verwendet.
Optional kannst du unter Verbindung → Bot-Verbindung (Chat) einen separaten Bot-Account anmelden, der dann statt des Hauptaccounts im Chat liest und schreibt. Ist kein Bot verbunden, greift automatisch der Hauptaccount als Fallback.
Der lesende Account (Haupt oder Bot) muss im Kanal mitlesen dürfen – ist es nicht der Broadcaster selbst, sollte der Bot-Account Moderator im Kanal sein.
Die App spricht direkt mit dem OBS WebSocket (Standard-Port 4455).
- In OBS: Werkzeuge → WebSocket-Servereinstellungen → WebSocket-Server aktivieren. Port und Passwort findest du dort unter Verbindungsinformationen anzeigen. (In der App gibt es bei Verbindung → OBS denselben Hinweis per „Hilfe anzeigen".)
- Host (meist
127.0.0.1), Port und Passwort in Verbindung → OBS eintragen. - Auf OBS Szene aktualisieren klicken – die App legt Szene und Browserquelle automatisch an.
Ein Booster ist ein Karten-Pack mit einer eigenen Kanalpunkte-Belohnung.
- Tab Booster öffnen → Booster hinzufügen.
- Felder ausfüllen:
- Titel & Untertitel – stehen auf dem Pack im Overlay.
- Bild – optionales Pack-Motiv.
- Akzentfarbe – Farbe des Packs.
- Score (Gewichtung) – wie häufig dieser Booster gezogen wird, wenn die Belohnung mehreren Boostern zugeordnet ist (höher = häufiger).
- Karten zuordnen: In der Booster-Ansicht die gewünschten Karten anhaken (max. 9 pro Booster). Bereits einem anderen Booster zugeordnete Karten sind ausgegraut – jede Karte gehört zu genau einem Booster.
- Speichern nicht vergessen (Button Speichern oben rechts).
- Tab Karten öffnen → Karte hinzufügen.
- Felder ausfüllen:
- Titel – Name der Karte (z. B. ein Spielername).
- Seltenheit – siehe unten. Bestimmt Sternzahl, Rahmenfarbe und Effekt.
- Akzentfarbe – Grundfarbe der Karte.
- Bild – das Kartenmotiv (wird passend zugeschnitten).
- Aktiviert – nur aktive Karten können gezogen werden.
- Wichtig: Neue oder duplizierte Karten haben keine Booster-Zuordnung. Ordne sie anschließend im Tab Booster einem Pack zu, sonst werden sie nie gezogen.
Die Sternzahl ergibt sich automatisch aus der Seltenheit – sie wird nicht pro Karte gesetzt.
Es gibt 6 Stufen mit fester Sternzahl:
| Seltenheit | Sterne | Standard-Effekt |
|---|---|---|
| Gewöhnlich | 1 | weißer Rahmen |
| Ungewöhnlich | 2 | türkis |
| Selten | 3 | blau |
| Episch | 4 | dunkles Lila |
| Legendär | 5 | goldener Glow (folgt der Rahmenfarbe) |
| Holo | 1 ✨ | Regenbogen-Glitzer über der ganzen Karte, schillernder Perlmutt-Stern |
Unter Einstellungen lassen sich pro Seltenheit anpassen:
- Rahmenfarbe je Seltenheit (der Legendär-Glow passt sich automatisch an).
- Gewichtung je Seltenheit – höhere Werte werden häufiger gezogen.
Pro Booster wird eine Twitch-Kanalpunkte-Belohnung verwaltet (Tab Verbindung, Bereich Channel Points):
- Channelpoints laden zeigt vorhandene Belohnungen; Neu legt eine neue an.
- Einstellbar: Titel, Kosten, Beschreibung, Hintergrundfarbe, Max pro Stream, Max pro Nutzer/Stream, globaler Cooldown, Pausiert, Aktiviert.
- Speichern / aktualisieren erstellt bzw. aktualisiert die Belohnung direkt auf Twitch und ordnet sie dem aktuell gewählten Booster zu.
Löst ein Zuschauer die Belohnung ein, zieht die App serverseitig genau einen zufälligen Booster (gewichtet nach Score) und spielt die Pack-Animation im Overlay ab.
Zeigt einem Zuschauer seine komplette Sammlung als Overlay – ebenfalls über Kanalpunkte.
- Einstellungen → Sammlungs-Showcase → aktivieren.
- Belohnung „Sammlung zeigen" speichern (Titel, Kosten, Cooldown, Farbe).
- Sekunden pro Booster festlegen (gilt für alle Booster gleich).
- OBS-Quellenname wählen und Sammlungs-Quelle in OBS einrichten klicken – es entsteht eine zweite Browserquelle in derselben Szene.
Beim Einlösen sliden nacheinander alle aktiven Booster mit den Karten dieses Zuschauers durch: gezogene Karten sichtbar, noch nicht gezogene bleiben unbekannt.
Zusätzlich zu den Kanalpunkten können Zuschauer Aktionen per Chat-Befehl auslösen (Tab Chat Befehle). Jeder Befehl hat ein eigenes Präfix und Befehlswort und einen eigenen Aktiviert-Schalter – es gibt keinen globalen Hauptschalter mehr.
- Pack-Befehl (Standard
!pack) – entspricht der Kartenpack-Belohnung. Einstellbar:- Max. Nutzungen pro Viewer und ein Auto-Reset des Kontingents (Minuten / Stunden / Tage; bei „Tage" immer um lokal 00:01, sommerzeit-korrekt).
- Cooldown pro Viewer (Sekunden, gilt strikt pro Nutzer).
- Anpassbare Chat-Nachrichten für Einlösung, erreichtes Limit und aktiven Cooldown.
- Sammlung-Befehl (Standard
!collection) – entspricht dem Sammlungs-Showcase. Ohne Limit, ohne Cooldown, ohne Zählung.
Alle Nachrichten lassen sich frei bearbeiten. Die verfügbaren Variablen (z. B. @userName,
[Uhrzeit], [Restzeit]) stehen als anklickbare Chips über dem jeweiligen Textfeld und werden
per Klick eingefügt.
Zuschauer können untereinander Karten tauschen (drei Befehle im Tab Chat Befehle, jeweils einzeln aktivierbar mit eigenem Präfix/Befehlswort):
!trade [Username] [Kartenname]– User A bietet User B eine Karte an (über den Kartennamen, nicht die ID). Geprüft wird, ob der Partner existiert, ob der Kartenname stimmt (bei Tippfehlern kommt ein „Meintest du …?"-Vorschlag) und ob der Anbieter die Karte besitzt. Eigene Einstellungen: Cooldown pro Viewer, Limit pro Reset (Minuten/Stunden/Tage) und wie lange eine Anfrage offen bleibt (Standard 120 s).!tradeyes [Kartenname]– User B nimmt an und nennt die Karte, die er im Gegenzug gibt. Nach Prüfung des Besitzes wird der Tausch vollzogen: die Kartenbestände beider werden angepasst, beiden wird eine Tauschanfrage abgezogen und der Cooldown gesetzt.!tradeno– User B lehnt ab. Dem Anfragenden wird eine Anfrage abgezogen und der Cooldown gesetzt; B bleibt unbelastet.
Antwortet B nicht rechtzeitig, läuft die Anfrage ab (kein Kontingent verbraucht, aber Cooldown).
Es ist immer nur ein Tausch gleichzeitig möglich – weitere !trade erhalten einen Hinweis.
Sämtliche Chat-Ausgaben (Angebot, Erfolg, Ablehnung, Timeout, Cooldown, Limit, „läuft bereits",
Karte/Nutzer nicht gefunden …) sind anpassbar, Variablen wieder per Klick einfügbar.
Kommt ein Tausch erfolgreich zustande, kann eine eigene Tausch-Animation in OBS abgespielt werden – in einer separaten Browserquelle (neben Pack und Sammlung).
- Einstellungen → Tausch-Animation → aktivieren.
- Stil wählen: Karten-Swap (Karten kreuzen), Übergabe-Bogen oder Versus-Flip.
- Dauer wählen (kurz / mittel / lang) und optional einen eigenen Tausch-Sound hochladen (Tab Einstellungen → Sounds).
- Verbindung → Quellenname Tausch-Animation vergeben und auf OBS Szene aktualisieren klicken – die Quelle wird automatisch angelegt.
In der Animation werden beide getauschten Karten gezeigt; unter jeder Karte steht zuerst der bisherige, nach dem Tausch der neue Besitzer. Mit der Option „Erfolgsmeldung im Chat senden" legst du fest, ob zusätzlich die Chat-Nachricht kommt oder nur die Animation laufen soll.
Der Tab Nutzung Befehle listet pro Zuschauer, wie oft er !pack und !trade genutzt
hat, samt verbleibender Nutzungen bis zum nächsten Reset. Oben stehen die nächsten Pack- und
Tausch-Resetzeiten. Du kannst nach Nutzern suchen, einzelne Nutzer oder alle zurücksetzen.
Alle ausgelösten Aktionen – Kanalpunkt-Einlösungen und Chat-Befehle – laufen über eine gemeinsame Warteschlange (Tab Queue) und werden streng nacheinander abgearbeitet, mit kurzer Pause zwischen den Einträgen. So überlagern sich auch bei vielen gleichzeitigen Auslösern keine Animationen. Der Tab zeigt live alle offenen Einträge (wer, was, wann) und das gerade laufende. Du kannst die Queue pausieren (sammelt dann nur), einzelne Einträge entfernen oder alle löschen.
Im Tab Einstellungen:
- Schriftart & Akzentfarbe (Schrift wirkt nur auf das Widget, nicht auf die App-UI).
- Vorschau mit Karten-Auswahl.
- Sammlungsleiste und Kartenrahmen ein-/ausblenden.
- Position Einlöser-Name im Overlay: Unten / Mitte / Oben.
- Sounds für Öffnen, Reveal und Tausch + Lautstärke.
- Timing: Karte sichtbar (Sek.), Cooldown, verdeckte Karten vor dem Reveal.
Sprache (DE / EN) und Modus (Hell ☀ / Dunkel 🌙) schaltest du jederzeit über die beiden Schalter unten links in der Navigation um.
Im Tab User siehst du jede Sammlung pro Zuschauer – nach Booster gruppiert und nach Karte sortiert. Kartenanzahl lässt sich direkt bearbeiten, Nutzer löschen, und verwaiste Sammlungen einem Booster neu zuordnen.
Alles liegt updatesicher im Ordner data\:
settings.json– Einstellungen (Look, Timing, Showcase, Chat-Befehle)cards.json– deine Kartenboosters.json– deine Boostercollections.json– Sammlungen je Zuschauercommand-usage.json– Nutzungszähler & Cooldowns der Chat-Befehle (Pack & Tausch)twitch.json/twitch-bot.json/obs.json– Zugangsdaten (getrennt gespeichert)
Der Ereignis-Log (Tab Log) ist nur eine Live-Diagnose und wird bei jedem App-Start geleert.
Updates ersetzen nur public\ und die exe – data\ bleibt unberührt, neue Seltenheiten oder
Funktionen überschreiben angelegte Karten/Booster also nie. Updates lassen sich im Tab Update
direkt aus der App installieren.
Es gibt kein .csproj/.sln – src/CardPackWidgetApp.cs wird direkt mit csc.exe
(.NET Framework) kompiliert. Zusätzlich werden die WebView2-Redistributable-DLLs benötigt
(Microsoft.Web.WebView2.Core.dll, Microsoft.Web.WebView2.WinForms.dll,
Microsoft.Web.WebView2.Wpf.dll, WebView2Loader.dll, z. B. aus dem
Microsoft.Web.WebView2 NuGet-Paket).
public/, data/ und defaults/ müssen neben der exe liegen.
Dieses Projekt steht unter der GNU General Public License v3.0 – siehe LICENSE.
Streamer Card Widget – Twitch-Sammelkarten-Overlay
Copyright (C) 2026 Bittersweet1987
Dieses Programm ist freie Software: Sie können es unter den Bedingungen der
GNU General Public License, wie von der Free Software Foundation veröffentlicht,
weitergeben und/oder modifizieren – entweder Version 3 der Lizenz oder (nach Ihrer
Wahl) jeder späteren Version.
Dieses Programm wird in der Hoffnung verteilt, dass es nützlich sein wird, jedoch
OHNE JEDE GEWÄHRLEISTUNG. Siehe die GNU General Public License für weitere Details.