Stern-Overlay – Anleitung

Teil 1

Installieren

Node.js installieren. Das ist ein kleines Hilfsprogramm, das der Stern zum Laufen braucht. Öffne nodejs.org, klicke auf den großen Knopf mit LTS und starte die heruntergeladene Datei. Klicke dich überall mit Weiter bzw. Next durch, ohne etwas zu ändern, bis Install und Finish kommen.
ZIP entpacken. Rechtsklick auf die ZIP-Datei, dann Alle extrahieren … und Extrahieren. Danach liegt ein normaler Ordner stern-overlay da. Verschiebe ihn an einen Platz, an dem er bleiben darf (zum Beispiel in Dokumente).
Starte nichts direkt aus der ZIP-Datei. Sie muss vorher entpackt sein, sonst fehlen Dateien.
Programm starten. Öffne den Ordner und mache einen Doppelklick auf start.bat. Es öffnet sich ein schwarzes Fenster mit ein paar Zeilen. Das ist normal und gut so.
Meldet Windows „Der Computer wurde durch Windows geschützt“? Klicke auf Weitere Informationen und dann auf Trotzdem ausführen. Die Datei ist nur eine Textdatei mit Befehlen, die jeder lesen kann.

Das schwarze Fenster muss während des ganzen Streams offen bleiben. Du kannst es nach unten in die Taskleiste schieben. Wenn du es schließt, ist das Programm aus. Nichts geht dabei kaputt: Beim nächsten Doppelklick auf start.bat geht es weiter wie vorher.
Die drei Adressen ansehen. Im schwarzen Fenster stehen diese Zeilen: OBS-Browserquelle … http://127.0.0.1:3000/overlay.html Admin-Panel … http://127.0.0.1:3000/admin.html?token=… Knopf für OBS-Dock … http://127.0.0.1:3000/dock.html?token=… Die Adresse mit token= ist wie ein Passwort. Zeige sie niemals im Stream. Passe auf, dass das schwarze Fenster nicht in deinem Bild zu sehen ist.

Teil 2

In OBS einbauen

Klicke in OBS im Feld Quellen auf das + und wähle Browser. Gib ihm den Namen Stern-Overlay und klicke auf OK.
Im Fenster „Eigenschaften“ trägst du ein:
- URL: http://127.0.0.1:3000/overlay.html (genau so, mit der Zahl 3000)
- Breite und Höhe: genau wie dein OBS-Bild. Die Zahlen stehen in OBS unter Einstellungen → Video bei Basis-(Leinwand-)Auflösung. Bei einem Bildschirm mit 2560 × 1440 trägst du 2560 und 1440 ein, bei Full HD 1920 und 1080. Wichtig: Neue Browserquellen starten mit 800 × 600. Das lässt du nicht stehen, sonst wird der Stern verzerrt (siehe unten).
- Lokale Datei: kein Haken
- Audio über OBS steuern: Haken setzen, wenn man die kleinen Töne im Stream hören soll
- Quelle ausschalten, wenn nicht sichtbar und Browser aktualisieren, wenn Szene aktiv wird: beide ohne Haken lassen
Dann OK.
Schiebe die Quelle in der Liste ganz nach oben, damit der Stern vor allem anderen fliegt.
Der Stern soll in jeder Szene fliegen, in der du spielst? Gehe in die anderen Szenen, klicke auf + → Vorhandene hinzufügen und wähle Stern-Overlay. Ist die Szene nicht aktiv oder die Quelle nicht eingebaut, wird der geplante Stern für diese Stunde übersprungen.

Der Stern sieht gestreckt, unscharf oder an der falschen Stelle aus? Dann hat die Browserquelle nicht die Größe deines OBS-Bildes (zum Beispiel noch die 800 × 600 vom Anfang). Das Overlay erkennt das und gleicht eine gestreckte Quelle selbst aus, wenn sie auf das ganze Bild gezogen ist. Scharf und sauber wird es aber nur mit den richtigen Zahlen. Das Stern-Panel zeigt dir oben die gemessene Größe, bei falschem Format in Gelb. So stellst du es richtig ein:

In OBS mit Rechtsklick auf Stern-Overlay → Transformieren → Transformation zurücksetzen (Strg + R).
Rechtsklick → Eigenschaften: Bei Breite und Höhe die Basisauflösung eintragen (Einstellungen → Video), bei einem 2560 × 1440-Bild also 2560 und 1440. OK.
Rechtsklick → Transformieren → An Bildschirm anpassen (Strg + F). Die Quelle füllt das Bild genau aus.
Im Stern-Panel oben sollte jetzt Overlay verbunden · 2560×1440 stehen, ohne gelben Hinweis.

Der Stern passt seine Größe an die Bildhöhe an. Wie groß er sein soll, regelst du mit dem Schieber im Panel. Hat dein OBS-Bild ein anderes Format als 16:9 (z. B. Ultrawide), hänge an die Adresse ?aspect=21:9 an (statt 21:9 dein Format).

Teil 3

Alles testen

Öffne einen Browser (Chrome, Edge, Firefox), klicke in die Adresszeile und füge die komplette Admin-Panel-Adresse aus dem schwarzen Fenster ein. Markiere sie dazu im schwarzen Fenster mit gedrückter linker Maustaste und kopiere mit Strg + C (klappt das nicht: Rechtsklick auf die markierte Stelle). Im Browser dann Strg + V und Enter.
Es öffnet sich das Stern-Panel. Speichere die Seite sofort als Lesezeichen (Strg + D). Ab dann erkennt der Browser dich wieder.
Ganz oben im Panel sollte stehen: Overlay verbunden und Twitch #niffeln: verbunden. Steht dort „Kein Overlay verbunden“, ist die Quelle in OBS nicht aktiv (siehe Teil 2).
Klicke bei der Karte Jetzt auf Test-Stern. Ein Stern mit einer Zahl hüpft wie das DVD-Logo durch dein OBS-Bild und prallt an den Rändern ab. Ein Test-Stern zählt nichts, er ist nur zum Anschauen.
Fange ihn: Scrolle zur Karte Chat-Test, tippe die Zahl vom Stern ins Textfeld und drücke Enter. Der Stern explodiert und ein Name erscheint. So kannst du alles ausprobieren, ohne dass jemand im Chat mitspielen muss.

Hast du richtig gespielt (also Stern jetzt losschicken statt Test-Stern) und willst danach wieder bei null anfangen? Schließe das schwarze Fenster, lösche den Ordner data neben start.bat und starte neu.

Teil 4

Im Stream

Vor jedem Stream

start.bat doppelklicken. Das schwarze Fenster bleibt offen.
OBS starten wie immer. Das Overlay verbindet sich von selbst.
Das Panel brauchst du nicht offen zu haben. Öffne es nur, wenn du etwas ändern oder abarbeiten willst.

Was dann von allein passiert

Zu einem zufälligen Zeitpunkt in jeder Stunde hüpft ein Stern über das Bild. Manchmal (etwa jedes siebte Mal) kommt direkt danach noch einer, ab und zu ein Goldstern für mehr Sterne. Der Fänger bekommt die Sterne aufs Konto und das Overlay zeigt seinen Namen.

Einen Stern selbst losschicken

Du kannst jederzeit selbst einen Stern starten, ganz egal, wann der letzte war:

im Panel auf Stern jetzt losschicken oder Goldstern jetzt
im Chat mit !sternstart (nur du; !sternstart gold für den Goldstern)
als Knopf direkt in OBS: Ansicht → Docks → Benutzerdefinierte Browser-Docks, Name Stern, bei URL die Adresse „Knopf für OBS-Dock“ aus dem schwarzen Fenster einfügen, Anwenden. Danach hast du ein kleines Fenster mit zwei großen Knöpfen.

Jeder Stern, den du per Knopf schickst, ist ein echter Stern und kommt zu den normalen dazu. Schick also nicht zu viele, sonst werden Signs und Geld schneller verteilt, als du willst.

Wenn jemand etwas einlöst

Im Overlay erscheint kurz eine Meldung, und im Panel steht oben bei Einlösungen eine gelbe Zahl.
Öffne die Karte Einlösungen. Dort steht der Twitch-Name, was gewünscht wurde und der Minecraft-Name.
Erledige es auf HugoSMP: Item signieren, Clan-Einladung schicken oder Geld überweisen. Das Hugo-Geld legst du selbst fest, der Betrag steht nirgends vor.
Klicke auf Erledigt. Wenn du nicht liefern willst oder kannst, klicke auf Erstatten: Die Sterne gehen zurück an den Zuschauer.

Was kostet was?

Artikel	Sterne	Hinweis
Signiertes Item	8	Kostet dich nichts, deshalb der günstige Hauptpreis.
Nif-2-Clan beitreten	3	Pro Person nur einmal.
Hugo-Geld	24	Teuer und knapp (nur 3 Stück auf Lager), weil es dich echtes Spielgeld kostet.

Alles davon kannst du im Panel bei Shop ändern: Preis, Vorrat, Namen. Neue Artikel legst du in der letzten Zeile an. Änderungen gelten sofort.

Was dein Chat tippen kann

Befehl	Wirkung
`die Zahl vom Stern`	Fängt den Stern (muss die Erste sein).
`!sterne` oder `!stars`	Zeigt den eigenen Kontostand. Mit Bot (Teil 5) antwortet er im Chat, sonst erscheint eine Karte im Stream-Bild.
`!shop`	Zeigt, was man kaufen kann.
`!befehle` (auch `!commands`, `!hilfe`, `!help`)	Der Bot schreibt eine Liste aller Befehle in den Chat. Braucht den Bot aus Teil 5.
`!einlösen 1 MeinMCName` oder `!redeem 1 MeinMCName`	Löst Artikel Nr. 1 aus der Liste ein. Auch `!einloesen` funktioniert.
`!mc MeinMCName`	Speichert den Minecraft-Namen (3 bis 16 Zeichen: Buchstaben, Zahlen, Unterstrich). Deinen eigenen Namen statt `MeinMCName` eintippen.

Text zum Kopieren für deinen Chat

★ Jede Stunde fliegt ein Stern über den Stream! Schreib die Zahl vom Stern als Erster in den Chat, dann gehört er dir. Mit !sterne siehst du dein Konto, mit !shop was du dafür bekommst (Sign, Nif-2-Clan, Hugo-Geld). Einlösen mit !einlösen <Nr> <Minecraft-Name>. Alle Befehle siehst du mit !befehle.

Du selbst kannst keine Sterne fangen. Das ist Absicht, damit es fair bleibt. Auch bekannte Bots wie Nightbot sind ausgeschlossen.

Teil 5 · empfohlen

Der Bot antwortet im Chat

Mit diesem Teil antwortet ein eigenes Twitch-Konto im Chat, wenn jemand !sterne, !shop oder !befehle schreibt. Im Stream-Bild erscheint dann nichts mehr. Das dauert etwa 10 Minuten, und du musst es nur einmal machen.

Dafür brauchst du ein zweites Twitch-Konto, den „Bot“. Er ist nur ein Name, unter dem die Antworten erscheinen. Du musst nichts dazu installieren: Der Bot läuft im selben Programm mit, das du ohnehin mit start.bat startest.

Du kannst diesen Teil auch überspringen. Dann erscheinen die Antworten als Karte im Stream-Bild, und alles andere funktioniert genauso.

A. Das Bot-Konto anlegen

Privates Fenster öffnen. Öffne in deinem Browser ein privates Fenster: Strg + Umschalt + N (bei Firefox Strg + Umschalt + P). Dort bist du nicht mit deinem eigenen Twitch-Konto angemeldet. Das ist wichtig.
Neues Konto erstellen. Gehe in diesem Fenster auf twitch.tv und klicke oben rechts auf Registrieren (oder Sign up).
Angaben machen. Denk dir einen Namen aus, zum Beispiel niffelnbot (ist er vergeben, nimm einen ähnlichen). Dazu ein Passwort, dein Geburtsdatum und eine E-Mail-Adresse, auf die du Zugriff hast. Nimmt Twitch deine normale Adresse nicht an, nimm eine andere. Schreib dir Namen und Passwort auf. Twitch fragt eventuell nach einem kleinen Rätsel, damit es weiß, dass du ein Mensch bist.
E-Mail bestätigen. Twitch schickt dir einen Code per E-Mail. Gib ihn im Fenster ein.
Lass dieses private Fenster offen. Du brauchst es gleich noch.

B. Den Bot zum Moderator machen

Im Chat einen Befehl schreiben. Gehe in deinem normalen Browserfenster (mit deinem eigenen Konto) in deinen Twitch-Chat und schreibe dort /mod niffelnbot, mit dem Namen deines Bots, und drücke Enter. Twitch bestätigt es mit einer kurzen Meldung. Damit bremst Twitch den Bot nicht aus.

C. Den Bot im Stern-Panel verbinden

Stern-Panel öffnen. Starte das Programm (start.bat), falls es nicht läuft, und öffne das Stern-Panel mit deinem Lesezeichen.
Auf „Bot verbinden“ klicken. Suche die Karte Bot im Chat und klicke auf den lila Knopf Bot verbinden.
Link kopieren. Jetzt erscheinen drei Schritte und ein Link. Klicke auf Link kopieren. Öffne den Link nicht einfach per Klick: Er muss in das private Fenster mit dem Bot-Konto.
Im privaten Fenster einfügen. Wechsle zum privaten Fenster von vorhin, klicke oben in die Adresszeile, füge den Link ein (Strg + V) und drücke Enter.
Bestätigen. Twitch zeigt eine Seite, auf der du die Anmeldung bestätigst. Fragt Twitch nach einem Code, steht er groß in der Karte im Stern-Panel. Erlaube den Zugriff mit dem Knopf, den Twitch dafür anbietet („Autorisieren“ oder „Authorize“).
Fertig. Wechsle zurück zum Stern-Panel. Die Karte ist von selbst grün geworden und zeigt Verbunden als niffelnbot. Das private Fenster kannst du jetzt schließen.

D. Ausprobieren

Im Chat !befehle schreiben. Der Bot antwortet mit einer Liste aller Befehle. Probier auch !sterne und !shop. Antwortet er, bist du fertig.

Danach musst du nie wieder etwas tun. Das Programm hält die Anmeldung des Bots selbst aktuell, auch nach einem Neustart. Der Bot ist nur da, solange das schwarze Fenster offen ist. Läuft das Programm etwa 30 Tage lang gar nicht, beendet Twitch die Anmeldung. Dann klickst du einfach noch einmal auf Bot verbinden.

Verbinde nie dein eigenes Konto als Bot. Dann würden die Antworten unter deinem Namen erscheinen. Das Panel warnt dich, falls es doch passiert.

Den Bot wieder loswerden? Klicke in der Karte Bot im Chat auf Bot trennen. Die Antworten erscheinen dann wieder als Karte im Stream-Bild. Die Beschriftungen bei Twitch ändern sich manchmal ein bisschen. Such dann einfach nach dem Wort, das dem hier genannten am ähnlichsten ist.

Der Bot bekommt von Twitch nur zwei Rechte: im Chat mitlesen und im Chat schreiben. Sein Zugangsschlüssel liegt nur auf deinem PC (in data/state.json) und wird nie im Stern-Panel angezeigt. Gib diese Datei deshalb nicht weiter.

Teil 6 · freiwillig

Bestenliste unter deinem Kanal

Unter deinem Stream hängt dann, zwischen YOUTUBE, DONATION und den anderen, ein Banner BESTENLISTE. Wer darauf klickt, sieht eine Seite mit zwei Ranglisten: Im Inventar (wer gerade die meisten Sterne hat; wer im Shop etwas einlöst, verliert sie) und Insgesamt gefangen (alle Sterne, die jemand je gefangen hat, auch die schon ausgegebenen). Die Seite aktualisiert sich von allein. Twitch selbst kann keine Live-Liste anzeigen, deshalb lagern wir die Seite bei GitHub aus. Das ist ein kostenloser Webspeicher, du zahlst nichts. Du musst das nur einmal einrichten (etwa 15 Minuten) und kannst es jederzeit weglassen, das Spiel funktioniert auch ohne.

Wichtig: Alles, was bei GitHub liegt, ist öffentlich. Die Seite zeigt die Twitch-Namen der Fänger und ihre Sterne, sonst nichts (keine Minecraft-Namen). Wer nicht erscheinen möchte, trägst du später im Panel bei Nicht anzeigen ein. Lege in dieses Repository sonst nichts Privates.

Du brauchst dafür eine E-Mail-Adresse, bei der du dich anmelden kannst: GitHub schickt dir einmal einen Bestätigungscode.

A. GitHub-Konto anlegen

Öffne github.com und klicke oben rechts auf Sign up. Gib E-Mail, Passwort und einen Benutzernamen ein. Der Name steckt später in der Adresse der Seite (niffeln.github.io/…), nimm also einen, den man öffentlich sehen darf. Am schönsten ist niffeln, falls er noch frei ist.
GitHub schickt dir einen Code per E-Mail. Tippe ihn ein und löse die kleine Rätselaufgabe. Wenn GitHub nach einem Tarif fragt, nimm Free (kostenlos).

B. Die Ablage anlegen (Repository)

Klicke oben rechts auf das + und dann auf New repository.
Bei Repository name schreibst du bestenliste (klein, ohne Leerzeichen).
Wähle Public (öffentlich). Nicht „Private“, sonst klappt es kostenlos nicht.
Setze das Häkchen bei Add a README file. Klicke ganz unten auf Create repository.

C. Die Webseite einschalten (Pages)

In deinem neuen Repository klickst du oben in der Leiste auf Settings und links in der Liste auf Pages.
Bei Build and deployment steht Source: Wähle Deploy from a branch. Bei Branch wählst du main und daneben / (root). Klicke auf Save.
Dort steht jetzt noch keine fertige Adresse. Das ist normal: Die Seite entsteht erst, wenn das Programm zum ersten Mal etwas hochgeladen hat (Schritt 15).

D. Den Schlüssel für das Programm erstellen (Token)

Damit das Programm die Seite für dich aktualisieren darf, braucht es einen Schlüssel. Der gilt nur für dieses eine Repository.

Klicke oben rechts auf dein Profilbild, dann auf Settings. Scrolle in der linken Liste ganz nach unten zu Developer settings. Dann Personal access tokens → Fine-grained tokens → Generate new token. (Fragt GitHub nach deinem Passwort, gib es ein.)
Bei Token name schreibst du Sternpanel. Bei Expiration (Ablauf) wählst du den spätesten Zeitpunkt, den GitHub anbietet. Notiere dir den Tag im Kalender: Dann läuft der Schlüssel ab und du machst einfach einen neuen (Schritte 9 bis 13).
Bei Repository access wählst du Only select repositories und suchst dir bestenliste aus.
Klicke bei Permissions auf Add permissions, wähle Contents und stelle es auf Read and write. Alles andere bleibt leer.
Klicke ganz unten auf Generate token. GitHub zeigt dir den Token nur dieses eine Mal. Er beginnt mit github_pat_. Klicke auf das kleine Kopier-Symbol daneben und lass die Seite offen, bis du den nächsten Schritt erledigt hast.
Der Token ist wie ein Passwort für dieses eine Repository. Zeige ihn niemals im Stream oder im Chat und schicke ihn auch niemandem. Das Panel zeigt ihn nach dem Speichern nicht mehr an.

E. Im Stern-Panel eintragen

Öffne das Stern-Panel und klicke oben in der Leiste auf Bestenliste. Trage bei Repository bei GitHub ein: DeinBenutzername/bestenliste. Füge bei Zugriffs-Token den kopierten Token ein (Strg + V). Klicke auf Speichern.
Klicke auf Verbindung testen. Dort sollte stehen: Verbindung zu GitHub steht. Danach klicke auf Jetzt veröffentlichen.
Der Hinweis „Die Seite ist unter der Adresse noch nicht erreichbar“ ist beim ersten Mal normal. Warte etwa zwei Minuten.
Klicke unten bei Adresse der Seite auf Öffnen. Du siehst deine Bestenliste. Steht dort „404“, warte noch zwei Minuten und lade die Seite neu (F5).
Setze oben im Feld das Häkchen bei Bestenliste automatisch aktuell halten. Ab jetzt lädt das Programm die Seite von allein hoch, wenn sich etwas geändert hat (höchstens alle 5 Minuten). Das schwarze Fenster muss dafür laufen. Weil GitHub die Seite kurz zwischenspeichert, hinkt sie manchmal ein paar Minuten hinterher. Das ist normal.

F. Das Panel bei Twitch aufhängen

Gehe auf deine Twitch-Kanalseite twitch.tv/niffeln. Unter dem Stream klickst du auf den Reiter Info und schaltest dort Panels bearbeiten ein (englisch Edit Panels).
Klicke auf das große + und dann auf Text- oder Bildfeld hinzufügen (Add a text or image panel).
Bei Titel kannst du das Feld leer lassen, wenn dein Bild schon die Überschrift ist, so wie bei deinen anderen Panels. Bei Bild lädst du die Datei panel-bestenliste.png hoch. Sie liegt im Ordner twitch-panel neben start.bat und ist im selben Stil wie deine Banner gemacht.
Bei Bildlink (Image links to) fügst du die Adresse der Seite ein. Im Panel kopierst du sie mit dem Knopf Kopieren. Bei Beschreibung (der Text unter dem Banner) passt zum Beispiel: Wer hat die meisten Sterne? Klick aufs Bild: Inventar und Insgesamt gefangen. Aktualisiert sich von allein.
Klicke auf Absenden (Submit). Ziehe das Panel mit der Maus an die gewünschte Stelle und schalte Panels bearbeiten wieder aus. Fertig.

Die Beschriftungen bei GitHub und Twitch ändern sich manchmal ein bisschen. Such dann einfach nach dem Wort, das dem hier genannten am ähnlichsten ist.

Später

Der Token läuft ab (steht im Panel als „Letzter Versuch fehlgeschlagen“, mit Hinweis auf den Token): Erstelle einen neuen (Schritte 9 bis 13) und füge ihn im Panel ein. Du brauchst nichts anderes zu ändern.
Jemand soll nicht auf der Liste stehen: Trage seinen Twitch-Namen im Panel bei Nicht anzeigen ein und klicke auf Speichern.
Du willst die Liste wieder abschalten: Nimm das Häkchen bei Bestenliste automatisch aktuell halten heraus. Die Seite bleibt dann auf dem letzten Stand stehen. Willst du sie ganz weg haben, lösche das Repository bei GitHub (Settings ganz unten, Delete this repository) und nimm das Panel bei Twitch heraus.
Welche Listen: Im Panel bei Welche Listen kannst du Beide Listen, nur Im Inventar oder nur Insgesamt wählen und mit Plätze pro Liste festlegen, wie viele Namen erscheinen (3 bis 25). Danach Speichern.
Was zählt wo: Im Inventar steht der aktuelle Kontostand. Löst jemand etwas ein, sinkt er, und mit 0 Sternen verschwindet die Person aus dieser Liste. Von dir per Hand vergebene Sterne liegen im Inventar und zählen dort mit. Insgesamt gefangen zählt nur, was im Chat gefangen wurde. Ausgeben ändert daran nichts, und per Hand vergebene Sterne zählen dort nicht.

Teil 7

Wenn etwas hakt

Es kommt kein Stern.

Schau oben im Panel nach: Es muss Overlay verbunden dastehen. Wenn nicht, ist die Quelle in OBS nicht in der aktiven Szene oder die Adresse stimmt nicht. Prüfe außerdem, ob oben rechts Sterne: AN steht und ob das schwarze Fenster noch offen ist. Zum Testen klickst du auf Test-Stern.

Im Panel steht bei Twitch „verbindet …“ oder „aus“.

Das Programm liest den Chat von #niffeln ohne Anmeldung mit. Prüfe die Internetverbindung des PCs. Meist reicht es, ein paar Sekunden zu warten. Hilft das nicht, schließe das schwarze Fenster und starte start.bat neu.

Ein Zuschauer tippt die Zahl, aber nichts passiert.

Der Stern ist nur etwa 35 Sekunden gültig (25 Flug plus 10 Nachfrist). Außerdem zählt nur der Erste. Wer mehrmals falsche Zahlen tippt, ist für diesen Stern gesperrt. Und du selbst kannst nicht fangen. Das ist alles normal.

Die Befehle (!shop, !sterne, !einlösen) „gehen nicht“.

1. Prüfen, ob der Befehl ankommt. Schreib im Chat !shop und schau im Stern-Panel in die Karte Protokoll. Steht dort eine graue Zeile wie „Name: !shop“, hat das Programm den Befehl gehört. Groß- und Kleinschreibung, Satzzeichen dahinter und die unsichtbaren Zeichen, die manche Chat-Erweiterungen (zum Beispiel 7TV) an wiederholte Nachrichten hängen, stören nicht.

2. Wo die Antwort erscheint. Ist der Bot im Chat verbunden (Teil 5), antwortet nur er, und zwar im Chat. Im Bild erscheint dann nichts. Wer die Karten trotzdem im Stream haben will, hakt im Panel unter Einstellungen Antworten auf Befehle auch im Stream-Overlay zeigen an. Die Meldung beim Einlösen bleibt auch mit Bot im Bild, damit du siehst, dass du etwas im Spiel vergeben musst. Ohne Bot-Zugang schreibt das Programm nie etwas in den Chat. Dann erscheinen die Antworten als Karte im Bild: !shop zeigt den Shop (15 Sekunden lang), !sterne den Kontostand, !mc und !einlösen eine Meldung, !einlösen zusätzlich mit Ton. Oben im Panel steht dann bei Twitch „nur lesen, Antworten nur im Overlay“. Das ist normal.

3. Der Befehl steht im Protokoll, im Stream erscheint aber nichts. Dann liegt es am Overlay: Oben muss Overlay verbunden stehen und die Browserquelle muss in der Szene sein, die gerade läuft. Mit der Karte Chat-Test kannst du einen Befehl selbst auslösen und siehst die Antwort sofort.

4. Der Befehl steht nicht im Protokoll. Dann erreicht die Nachricht das Programm nicht. Oben muss „Twitch #niffeln: verbunden“ stehen. Das Fangen der Sterne läuft über denselben Weg: Wenn Sterne gefangen werden, kommt der Chat an.

5. Antworten auch im Chat (freiwillig). Dafür richtest du den Bot ein. Das geht ganz ohne Tippen von Zugangsschlüsseln, mit einem Klick im Panel: siehe Teil 5.

Der Bot antwortet nicht im Chat.

1. Ist der Bot verbunden? Schau im Stern-Panel auf die Karte Bot im Chat. Dort muss Verbunden als … stehen. Steht dort Nicht verbunden, klicke auf Bot verbinden und folge den drei Schritten (Teil 5, C). Oben im Panel muss bei Twitch „Bot aktiv, antwortet im Chat“ stehen.

2. Ist eine rote Meldung zu sehen? Die Karte Bot im Chat sagt, was los ist, zum Beispiel „Die Anmeldung ist abgelaufen“. Der Link, den das Panel zeigt, gilt nur etwa 30 Minuten. Klicke dann noch einmal auf Bot verbinden. Hat jemand das Passwort des Bot-Kontos geändert oder die Verbindung bei Twitch getrennt, beendet Twitch die Anmeldung. Auch dann einfach neu verbinden.

3. Ist der Bot Moderator? Schreibe in deinem Chat /mod niffelnbot (mit dem Namen deines Bots). Ohne diese Rechte bremst Twitch neue Konten manchmal aus, vor allem bei strengen Chat-Einstellungen wie „Nur Follower“.

4. Hat der Bot sich mit deinem eigenen Konto verbunden? Dann antwortet er unter deinem Namen, und das Panel zeigt eine gelbe Warnung. Klicke auf Bot trennen und verbinde den Bot noch einmal. Öffne den Link dabei im privaten Fenster, in dem nur das Bot-Konto angemeldet ist.

5. Nach dem Neustart? Der Bot ist nach einem Neustart des Programms von selbst wieder da. Hast du das Programm etwa 30 Tage nicht gestartet, beendet Twitch die Anmeldung. Dann einmal neu verbinden.

Antwortet der Bot immer noch nicht? Schau im schwarzen Fenster nach einer Zeile, die mit [twitch] beginnt, und im Panel in die Karte Protokoll. Solange der Bot nicht antworten kann, erscheinen die Antworten als Karte im Stream-Bild.

Das Panel fragt nach einem „Admin-Token“.

Dann kennt dein Browser den Schlüssel nicht (anderer Browser, Verlauf gelöscht). Kopiere im schwarzen Fenster in der Zeile Admin-Panel den Teil hinter token= und füge ihn ein. Oder öffne die komplette Adresse aus dem Fenster noch einmal.

Das schwarze Fenster geht sofort wieder zu oder zeigt einen Fehler.

Ist Node.js installiert (Teil 1)? Steht im Fenster „Port 3000 ist schon belegt“, läuft das Programm vermutlich schon in einem anderen schwarzen Fenster. Schau in der Taskleiste nach und schließe das doppelte. Wenn es wirklich ein anderes Programm ist, öffne die Datei config.json mit dem Editor (sie entsteht beim ersten Start von start.bat), ändere "port": 3000 auf 3001, speichere, starte neu und nimm in OBS die neue Adresse aus dem Fenster.

Man hört keine Töne im Stream.

In den Eigenschaften der Browserquelle muss Audio über OBS steuern angehakt sein. Danach taucht sie im Audio-Mixer auf und du kannst die Lautstärke einstellen. Leiser geht es auch über die Adresse: …/overlay.html?volume=0.3, ganz stumm mit ?mute=1.

Der Stern ist zu klein oder zu groß.

Öffne im Stern-Panel die Karte Einstellungen. Ganz oben ist der Schieber Größe des Sterns. Du siehst die Änderung sofort im Overlay, am besten mit einem Klick auf Test-Stern daneben. Die Voreinstellung ist 70 %.

Die Bestenliste-Seite zeigt „404“ oder „There isn’t a GitHub Pages site here“.

Meist hilft zwei Minuten Warten und F5. Hilft das nicht: Ist das Repository Public? Steht bei GitHub unter Settings → Pages als Quelle Deploy from a branch, main und / (root)? Hast du im Stern-Panel schon auf Jetzt veröffentlichen geklickt? Der Knopf Verbindung testen sagt dir, ob die Seite erreichbar ist.

Im Panel steht bei der Bestenliste „Letzter Versuch fehlgeschlagen“.

Der rote Kasten sagt, woran es liegt. Am häufigsten: der Token ist abgelaufen oder falsch kopiert (neuen erstellen, Teil 6 D), der Repository-Name ist falsch geschrieben, oder beim Token steht bei Contents nicht Read and write. Das Programm versucht es nach einigen Minuten von selbst noch einmal. Mit Jetzt veröffentlichen kannst du es sofort probieren.

Es gibt eine neue Version. Bleiben meine Einstellungen und Konten?

Ja. Alles, was du im Stern-Panel einstellst, dazu Konten, Shop, Einlösungen und die Bestenliste, liegt im Ordner data. Der ist im ZIP nie enthalten und wird deshalb nie überschrieben. Dasselbe gilt für config.json.

So spielst du ein Update ein: Schließe zuerst das schwarze Fenster. Entpacke das neue ZIP dann in einen neuen Ordner (der alte bleibt als Kopie liegen) und kopiere den Ordner data aus dem alten in den neuen. Falls du in config.json etwas geändert hast (Bot oder Port), kopiere auch diese Datei. Starte danach start.bat im neuen Ordner. Die Adresse in OBS und die Adresse des Stern-Panels bleiben gleich, du musst also nichts neu einrichten.

Schneller Weg: Entpacke das ZIP in den Ordner, in dem dein alter stern-overlay-Ordner liegt (nicht in diesen Ordner selbst) und wähle bei der Nachfrage Dateien im Ziel ersetzen. Auch dabei bleibt data unberührt.

Wo liegen die Konten und der Shop, und wie mache ich ein Backup?

Alles steckt in einer einzigen Datei: data/state.json. Kopiere sie, dann hast du ein Backup. Auf einem neuen PC legst du die Datei einfach in den neuen data-Ordner. Achtung: Darin steht auch der GitHub-Token. Gib die Datei deshalb nicht weiter.

Eine Sicherung legt das Programm außerdem selbst an: Bei jedem Start landet eine Kopie in data/backups, sofern sich etwas geändert hat. Die sieben neuesten bleiben liegen. Ist nach einem Update etwas weg, schließe das schwarze Fenster, kopiere die neueste Datei aus backups nach data und benenne sie in state.json um.

Auf einem Mac oder Linux-Rechner startest du statt start.bat die Datei start.sh im Terminal. Alles andere ist gleich.