Spiele und Belohnungen erstellen

Verwandle ein Geschenk, einen Unterstützungsbetrag oder Chatbefehl in eine Aktion im Stream.

Ja, dein Spiel kann auf TikTok-Geschenke reagieren

Social Stream Ninja erfasst ein Ereignis und sendet es an deine Seite. Dein JavaScript bestimmt die Folge: Raketenantrieb, Gartenwachstum, ein neuer Gegner oder Fortschritt beim gemeinsamen Ziel. Aktion und Schwellenwert legst du im Spiel fest. Die Geschenkpreise einer Plattform änderst du nicht über SSN.

Hier beginnen: probiere die drei Vorlagen aus, und wähle dann als Maßstab für deine Regel Plattformeinheiten, Geschenkidentität oder geschätzte USD.

Beginne für Ton, Alarm, OBS-Aktion oder Webhook mit Event Flow. Eine eigene HTML-Seite eignet sich für ein Spielfeld oder einen eigenen Spielzustand. Fertige Spiele findest du in der Spielegalerie.

Drei kleine, anpassbare Vorlagen

Jede Vorschau enthält Beispielknöpfe und eine Anzeige der zuletzt empfangenen Daten. Beispiele sind fiktive Ereignisse, keine Käufe. Der Vorschaumodus tritt deiner Live-Sitzung nie bei.

  • Münzrakete: 10 TikTok-Münzen, 100 Twitch-Bits oder 100 Facebook-Sterne ergeben einen Schub. Restbeträge werden je Zuschauer und Plattform getrennt gesammelt. Ändere COST im HTML, um deine Beträge festzulegen.
  • Gemeinsames Unterstützungsziel: kombiniere geschätzte USD-Unterstützung der vier Plattformen für eine Mondbasis. Ändere GOAL_USD oder ersetze die Fortschrittsanzeige durch Schaden, Treibstoff oder einen Timer.
  • Geschenk- und Ereignisgarten: ein gewähltes TikTok-Geschenk fügt Blumen hinzu, ein erfasstes TikTok-Follow einen Baum, und der kostenlose Befehl !water im Chat fügt Wasser hinzu. Setze GIFT_ID auf eine erfasste ID oder setze GIFT_NAME auf den exakten Namen. „Demo flower“ ist ein fiktives Beispiel.

Öffne den HTML-Quelltext und suche nach EDIT THIS RULE oder EDIT THESE RULES. Die receive(data) ist die Funktion, in der du die Beispielaktion durch deine Spiellogik ersetzt. Verbindungs- und Zählhilfen stehen in starter.js; die Darstellung steht in starter.css.

Eine Vorlage mit deinem Stream verbinden

  1. Starte SSN und verbinde deine Chatquelle. Prüfe, ob Chat und Geschenk-/Unterstützungszeilen im Dock ankommen. Zur TikTok-Einrichtung siehe Verbindungsmodi.
  2. Öffne eine Vorlage ohne ?demo, mit deiner SSN-Sitzungs-ID. Gib auch das Sitzungspasswort an, falls eines festgelegt ist.
  3. Prüfe die Seite im Browser und füge dieselbe URL als OBS-Browserquelle hinzu, etwa mit 1000 × 800. Ergänze &clean , um Datenanzeige, Verbindungsstatus und Steuerknöpfe auszublenden.
https://socialstream.ninja/games/templates/coin-rocket.html?session=YOUR_SESSION&password=YOUR_PASSWORD&clean

Auf der Beta-Seite behalte /beta/ vor games/. Lass den Passwortparameter weg, wenn kein Passwort festgelegt ist. Halte deine Sitzungslinks privat.

Die Standardverbindung verwendet dieselbe iframe-Brücke wie SSN-Overlays. Für den gehosteten WebSocket-Pfad für erfassten Chat aktiviere in SSN Nachrichten von der Erweiterung über den Server an das Dock senden und ergänze &server2. Siehe die WebSocket-Anleitung für die lokale Einrichtung; diese Vorlagen akzeptieren auch &server2&localserver und &localserverport=3000. localserver allein aktiviert keinen Pfad. Der ältere server verwendet einen anderen Kanal und benötigt eventuell ein Dock, das dorthin sendet.

Eine eigene Kopie erstellen

Beta-Quellcode als ZIP herunterladen und entpacke es. Bearbeite die Dateien unter games/templates/, wobei die Ordnerstruktur erhalten bleibt: Die Vorlagen laden auch js/local-server-url.js, und das Unterstützungsziel lädt currency.js vom Stammverzeichnis des Repositorys aus.

Stelle den entpackten Ordner über einen lokalen Webserver bereit. Wenn Python installiert ist, führe dort Folgendes aus:

python -m http.server 8080 --bind 127.0.0.1

Verwende anschließend http://127.0.0.1:8080/games/templates/coin-rocket.html?session=YOUR_SESSION im Browser oder OBS. Bei anderem Hosting müssen die relativen Dateipfade gleich bleiben. Kein Build nötig.

Wie wähle ich die Münzanzahl für eine Aktion?

Entscheide vor der Zahl, was du messen möchtest:

RegelLiesBeispiel
Plattformeigene EinheitenTikTok meta.coinsPerGift × meta.tiktokGiftCount , falls vorhanden, oder einen ausdrücklichen Wert in hasDonation mit einer Angabe wie 10 coins, 100 bits, oder 100 Stars.Je 10 Münzen gibt es einen Schub.
Ein bestimmtes GeschenkTikTok meta.giftId oder meta.giftName, und die zugehörige Anzahl.Jedes passende Geschenk bringt eine Blume, unabhängig vom geschätzten USD-Wert.
Vergleichbarer UnterstützungswertgetDonationValueUSD(data) aus currency.js.Jeder geschätzte US-Dollar bringt 10 Treibstoff; 25 Dollar erfüllen ein Ziel.
Eine kostenlose Aktion oder MitgliedschaftDer tatsächliche Quellwert event, oder einen Chatbefehl.Ein Follow lässt einen Baum wachsen; ein neues Abo startet eine Animation.

Entscheide, ob dein Betrag exakt (coins === 10), einen Mindestbetrag pro Ereignis (coins >= 10), oder einen laufendes Guthaben. Die Rakete nutzt ein laufendes Guthaben: 25 Münzen ergeben zwei Schübe und fünf Restmünzen. Eine Regel für genau 10 würde 25 Münzen ignorieren. Wenn pro Ereignis eine von mehreren Aktionen gewählt wird, prüfe den höchsten Schwellenwert zuerst, damit nicht alle niedrigeren Stufen ausgelöst werden.

Auf TikTok kaufen Zuschauer Münzen und geben sie für Geschenke aus; der Münzpreis steht beim Geschenk. Wähle Geschenke aus deiner LIVE-Auswahl und prüfe erfasste Daten vor Veröffentlichung einer Regel. Geschenkname, Geschenkanzahl, Münzen und Diamanten sind verschiedene Größen. Leite „exakte Münzen“ weder aus einem USD-Schätzwert ab noch setze Diamanten mit Münzen gleich. TikToks Erklärung zu Münzen und Geschenken.

Liefert die Erfassung nur Geschenkname/Anzahl oder eine Diamantenangabe, überspringt die Münzvorlage das Ereignis ohne ausdrückliche Münzmetadaten. Nutze eine Geschenkregel oder die Vorlage mit geschätzten USD. Münzmetadaten können auch aus SSNs Geschenkzuordnung stammen; vergleiche bei wichtigen exakten Preisen mit der aktuellen LIVE-Geschenkauswahl. Kataloge und Erfassungsarten unterscheiden sich; kein universelles Münzfeld ist für jede TikTok-Nachricht garantiert.

Was die einzelnen Plattformen senden

type kennzeichnet die Quelle; event kennzeichnet eine Aktion, falls vorhanden. Die Verfügbarkeit hängt von Erfassungsmodus, Einstellungen und Plattformdaten ab. Die Beispiele beschreiben aktuelle SSN-Codepfade, ohne jedes Ereignis für jedes Konto zu garantieren.

PlattformUnterstützungs- und EreignisdatenGetrennt betrachten
TikToktype: "tiktok", event: "gift". Die Spendenerfassung kann hasDonation und donoValue. Geschenkmetadaten können ID, Name, Anzahl, Münzen oder Diamanten pro Geschenk sowie die Serienkennung enthalten.Mit Münzen werden Geschenke gekauft; Diamanten sind Belohnungen für Creator. SSApp-WebSocket-Erfassung schließt Serien vor der Weiterleitung ab; Browsererfassung kann kumulative Updates senden. Ist die TikTok-Spendenerfassung deaktiviert, können Geschenkereignisse ohne Geldfelder ankommen.
TwitchCheers verwenden Bits, zum Beispiel hasDonation: "100 bits". Die API-Erfassung kann event: "cheer" und donoValue: 1; die Erfassung des angezeigten Chats kann ohne Ereignismarkierung auskommen.Abos, Geschenkabos, Raids und Kanalpunkte sind eigene Aktionen. Ein Abonnentenabzeichen an einer normalen Nachricht ist kein neues Abo. Direkte Cheers und Bits in Twitch-Erweiterungen sind unterschiedliche Integrationen.
FacebookSichtbare Live-Chat-Sterne-Zeilen liefern etwa hasDonation: "100 Stars" und donoValue: 1, ohne event .Der Kommentar-API-Pfad leitet keine Sterne aus Chattext ab. Die DOM-Erfassung benötigt eine sichtbare Sterne-Zeile; normale Kommentare und Reaktionen belegen keinen bezahlten Betrag.
YouTubesuperchat und supersticker tragen den ursprünglichen Währungsbetrag in hasDonation. Geschenke verwenden jeweldonation mit N Jewels, oder 1 YouTube Gift , wenn der Betrag verborgen ist.Zuschauer geben Juwelen für Geschenke aus; Creator erhalten Rubine. Mitgliedschaften und verschenkte Mitgliedschaften sind eigene Ereignisse, keine Juwelen. Super Thanks ist ein separates Produkt und garantiert kein Spendenereignis im Livechat.

Plattformquellen: TikTok-Diamanten; Twitch-Bits und Abos; Metas Übersicht zu Sternen; YouTube Super Chat und Super Stickers; YouTube-Juwelen, Geschenke und Rubine. Begriffe geprüft am 29. September 2026; aktuelle Voraussetzungen und Verfügbarkeit stehen auf den Plattformseiten.

Andere Quellen können Trinkgelder, Geschenke, Mitgliedschaften oder Käufe melden. Prüfe die Ereignisreferenz bevor du sie zum Filter der Vorlage isSupport hinzufügst. Ein Produktverkauf oder Geschenkabo ist nicht automatisch Trinkgeld. YouTube unterscheidet etwa Geschenkkäufe von Einlösehinweisen für Empfänger; beides zu zählen würde dasselbe Geschenk doppelt belohnen.

donoValue und currency.js richtig verwenden

hasDonation ist der ursprüngliche Anzeigetext, etwa €5.00 oder 100 bits. donoValue ist ein optionaler numerischer USD-Betrag der Quelle. Beachte einen gültigen Wert einschließlich Null vor einer Schätzung aus dem Anzeigetext. Behalte den Originaltext zur Anzeige.

<script src="../../currency.js"></script>
<script>
// From games/templates/: use the existing helper, including its zero handling.
var usd = getDonationValueUSD(data);
// Use usd for your rule; display data.hasDonation for the original amount/unit.
</script>

Bestehende Umrechnung: SSN schätzt derzeit eine TikTok-Münze auf 0,01 USD, einen Diamanten auf 0,005 USD, ein Twitch-Bit oder einen Facebook-Stern auf 0,01 USD und ein YouTube-Juwel auf 0,005 USD. Ein TikTok-Geschenk ohne Preis wird mit einer Münze pro Geschenk angesetzt; ein YouTube-Geschenk ohne Juwelenanzahl hat einen eigenen Platzhalter von 0,01 USD. Währungen werden ebenfalls mit internen Näherungswerten umgerechnet, ohne Live-Wechselkursdienst.

Dies sind SSN-Vergleichswerte, keine gemeinsame Definition von Zuschauerausgaben, Nettoerlös oder auszahlbarem Guthaben. Verschiedene Erfassungen können unterschiedliche Schätzwerte liefern. Insbesondere beweist der Ersatzwert von einer Münze für unbekannte TikTok-Geschenke nicht deren Preis.

Verwende nicht donoValue || convertToUSD(...): Damit würde eine absichtliche Null verworfen. Lies keine Ziffern aus chatmessage zur Zahlungserkennung und verlange keine event === "donation": Facebook-Sterne und manche Cheers haben keine Ereignismarkierung. Die Zielvorlage wählt zuerst die Unterstützungsarten und ruft dann den gemeinsamen Umrechner auf.

Quelle: currency.js und der Nutzdatenreferenz. Geschenkmetadaten sind optional; die Beispiele erfinden keine fehlenden Felder.

Eine Geschenkserie nur einmal zählen

TikTok kann für dieselbe Serie kumulative Anzahlen 1, 2, 3 melden. Das sind drei Geschenke, nicht sechs. Merke bei additiven Aktionen den höchsten bisherigen Zähler oder Betrag und wende nur den Zuwachs an. Ein Abschlussupdate mit gleichem Gesamtwert fügt nichts hinzu.

// All three events refer to the same streak:
// incoming total: 1, 2, 3, 3
// added to game:  1, 1, 1, 0
var newCoins = RewardStarter.increment(data, RewardStarter.coins(data), 'coins');

Die Hilfsfunktion nutzt verfügbare native TikTok-Gruppen-/Sender-/Geschenk-IDs, danach meta.tiktokGiftStreakId oder Nachrichten-IDs. Normale Nachrichten-IDs verhindern ebenfalls doppelte Zustellung. Die Funktion wartet nicht auf repeatEnd , da die Browsererfassung dieses Feld möglicherweise nie liefert. Soll erst nach Abschluss einer Serie eine Aktion erfolgen, braucht es eine eigene Abschlussregel anhand der tatsächlich gesendeten Felder.

Diese Lernvorlagen merken sich bis zu 2.000 Kennungen im Arbeitsspeicher. Zurücksetzen und Neuladen löschen Kennungen und Spielstand. Ohne stabile IDs lassen sich Duplikate nicht zuverlässig erkennen; eine zweite Erfassung desselben Kanals kann andere IDs verwenden. Beginne mit einem Erfassungspfad. Die Rakete ordnet Guthaben nach Plattform und Nutzer-ID zu, ersatzweise nach Anzeigename; gleiche Namen können dann ein Guthaben teilen. Für dauerhafte Spiele sind gespeicherter Zustand und Wiederholungsbehandlung nötig, bevor bezahlte Belohnungen Neustarts überstehen sollen.

Belohnungen ohne eigenes Spiel

In Event Flow, verwende Eigenschaft vergleichen mit donoValue, größer oder gleich, und deinen USD-Schwellenwert. Verbinde danach einen Ton, eine Animation oder eine OBS-Steuerung. Der Vergleich berücksichtigt einen gültigen Quellwert und bei Bedarf die vorhandene Währungsumrechnung.

Vergleiche für ein bestimmtes TikTok-Geschenk meta.giftId oder meta.giftName, und beschränke den Ablauf auf TikTok-Geschenke. Numerische Vergleiche mit hasDonation werden ebenfalls in USD ausgewertet, nicht als reine Münzzahlen. Nutze native Metadaten oder eigenen Code für Münzregeln.

Ein Schwellenwert pro empfangener Nachricht unterscheidet sich von einem laufenden Guthaben oder Serienzähler. Ein Event-Flow-Schwellenwert übernimmt nicht automatisch die Summierung und Duplikatbehandlung der Vorlage. Verwende die Zustandsknoten , wenn dein Ablauf Zustand benötigt, oder behalte diese Logik im Spiel.

Vor einer bezahlten Aktion ausprobieren

  1. Nutze die Beispielknöpfe. Eine Serie 1 → 2 → 3 muss drei Geschenken entsprechen; ein expliziter Nullwert darf keine USD hinzufügen; ein unbekannter Preis keine exakten Münzen.
  2. Verbinde deine echte Quelle und prüfe tatsächlich erfasste Daten: Geschenkname/ID, Betrag/Einheit, Anzahl und erwartetes Ereignis. Ein Beispiel bestätigt die Regel, nicht die Live-Erfassung.
  3. Prüfe deine OBS-Szene mit wiederholten Ereignissen, Neuverbindung und Neuladen. Schalte die Browserquelle nicht ab und lade sie nicht neu, wenn der Spielstand im Speicher erhalten bleiben soll.

Für ein unbeaufsichtigtes oder AFK-Spiel müssen SSN, Quellerfassung und Spielseite weiterlaufen. Ruhezustand, abgelaufene Anmeldung oder Verbindungsabbruch unterbrechen Aktionen; die Vorlagen holen verpasste Ereignisse nicht nach und behandeln keine Rückerstattungen. Automatische Reaktionen erlauben nicht automatisch die Monetarisierung unbeaufsichtigter Streams: Prüfe die aktuellen LIVE- und Monetarisierungsregeln für dein Format.

Kommt nichts an, prüfe zuerst das SSN-Dock, dann Sitzung, Passwort und Transport. Kommt Chat an, aber ein Geschenk passt nicht, prüfe Nutzdaten und Spenden-/Ereignisfilter. Follow- und Abo-Ereignisse sind quellenabhängig; siehe die Ereignisreferenz. Weitere Verbindungsdetails findest du unter eigene Overlays.