Créer des jeux et récompenses

Oui, votre jeu peut réagir aux cadeaux TikTok

Social Stream Ninja capture un événement et l’envoie à votre page. Votre JavaScript choisit la réaction : propulser une fusée, faire pousser un jardin, créer un ennemi ou avancer un objectif collectif. Vous fixez l’action et son seuil dans le jeu. SSN ne modifie pas les prix des cadeaux des plateformes.

Pour commencer : essayez les trois modèles, puis choisissez si votre règle utilise unités de plateforme, identité du cadeau ou USD estimés.

Pour un son, une alerte, une action OBS ou un webhook, commencez par Event Flow. Une page HTML personnalisée convient à un plateau de jeu ou à un état de jeu propre. Pour des jeux prêts à l’emploi, consultez la galerie de jeux.

Trois petits modèles modifiables

Chaque aperçu propose des boutons d’exemple et un inspecteur des dernières données reçues. Ce sont des événements fictifs, pas des achats. L’aperçu ne rejoint jamais votre session en direct.

• Fusée à pièces: 10 pièces TikTok, 100 Bits Twitch ou 100 Étoiles Facebook donnent une propulsion. Les restes s’accumulent séparément par spectateur et plateforme. Modifiez COST dans le HTML pour fixer vos montants.
• Objectif de soutien collectif: combinez le soutien estimé en USD des quatre plateformes pour construire une base lunaire. Modifiez GOAL_USD ou remplacez la progression par des dégâts, du carburant ou un minuteur.
• Jardin de cadeaux et d’événements: un cadeau TikTok choisi ajoute des fleurs, un suivi TikTok capturé ajoute un arbre, et la commande gratuite !water dans le chat ajoute de l’eau. Définissez GIFT_ID sur un ID capturé, ou définissez GIFT_NAME sur son nom exact. « Demo flower » est un exemple fictif.

Ouvrez le code HTML et cherchez EDIT THIS RULE ou EDIT THESE RULES. Le receive(data) est la fonction où remplacer l’action d’exemple par votre logique de jeu. Les utilitaires de connexion et de comptage sont dans starter.js; les styles visuels sont dans starter.css.

Relier un modèle à votre diffusion

1. Démarrez SSN et connectez votre source. Vérifiez que messages et cadeaux/soutiens arrivent dans le dock. Pour TikTok, consultez modes de connexion.
2. Ouvrez un modèle sans ?demo, avec votre identifiant de session SSN et son mot de passe, s’il existe.
3. Vérifiez la page dans un navigateur, puis ajoutez la même URL comme source Navigateur OBS, par exemple en 1000 × 800. Ajoutez &clean pour masquer l’inspecteur, l’état de connexion et les boutons de contrôle.

https://socialstream.ninja/games/templates/coin-rocket.html?session=YOUR_SESSION&password=YOUR_PASSWORD&clean

Sur le site bêta, conservez /beta/ avant games/. Omettez le paramètre du mot de passe s’il n’y en a pas. Gardez vos liens de session privés.

La connexion par défaut utilise le même pont iframe que les overlays SSN. Pour le chat capturé via le WebSocket hébergé, activez dans SSN Envoyer les messages de l'extension vers le Dock via le serveur et ajoutez &server2. Consultez le Guide WebSocket pour la configuration locale ; ces modèles acceptent aussi &server2&localserver et &localserverport=3000. localserver seul n’active pas la route. L’ancien server utilise un autre canal et peut dépendre d’un dock qui y publie.

Créer votre propre copie

Télécharger le ZIP du code bêta et extrayez-le. Modifiez les fichiers sous games/templates/, en conservant l’arborescence : les modèles chargent aussi js/local-server-url.js, et l’objectif de soutien charge currency.js depuis la racine du dépôt.

Servez le dossier extrait avec un serveur web local. Si Python est déjà installé, lancez ceci depuis ce dossier :

python -m http.server 8080 --bind 127.0.0.1

Utilisez ensuite http://127.0.0.1:8080/games/templates/coin-rocket.html?session=YOUR_SESSION dans votre navigateur ou OBS. Pour un autre hébergement, conservez les mêmes chemins relatifs. Aucune compilation n’est nécessaire.

Comment choisir le nombre de pièces d’une action ?

Choisissez ce que vous voulez mesurer avant de choisir un nombre :

Déterminez si votre montant est exact (coins === 10), un minimum par événement (coins >= 10), ou un solde cumulé. La fusée utilise un solde cumulé : 25 pièces donnent deux propulsions et laissent cinq pièces. Une règle « exactement 10 » ignorerait 25 pièces. Pour choisir une seule action par événement parmi plusieurs niveaux, testez d’abord le seuil le plus élevé.

Sur TikTok, les spectateurs achètent des Pièces pour offrir des Cadeaux dont le coût est affiché. Choisissez des cadeaux disponibles dans votre LIVE et inspectez la capture avant de publier une règle. Cadeau nommé, quantité, Pièces et Diamants sont des mesures différentes. Ne déduisez pas des « pièces exactes » d’une estimation en USD et ne confondez pas diamants et pièces. Explication TikTok des Pièces et Cadeaux.

Si la capture ne fournit qu’un nom/compte de cadeaux ou une indication de diamants, le modèle à pièces ignore l’événement sauf présence de métadonnées explicites de pièces. Utilisez une règle par identité de cadeau ou le modèle en USD estimés. Les métadonnées peuvent aussi provenir de la table de cadeaux SSN : comparez-les au catalogue LIVE actuel si le prix exact compte. Catalogues et captures varient ; aucun champ universel de pièces n’est garanti sur chaque message TikTok.

Ce que chaque plateforme envoie

type identifie la source ; event identifie une action lorsqu’il est présent. La disponibilité dépend du mode de capture, des réglages et des données exposées. Ces exemples décrivent le code actuel de SSN sans garantir chaque événement pour chaque compte.

Références des plateformes : Diamants TikTok; Bits et abonnements Twitch; Présentation des Étoiles par Meta; Super Chat et Super Stickers YouTube; Joyaux, Cadeaux et Rubis YouTube. Terminologie vérifiée le 29 septembre 2026 ; consultez les pages actuelles des plateformes pour les conditions et la disponibilité.

D’autres sources peuvent transmettre pourboires, cadeaux, abonnements ou achats. Inspectez la référence des événements avant de les ajouter au filtre isSupport . Une vente ou un abonnement offert n’est pas automatiquement un pourboire. YouTube distingue, par exemple, l’achat d’un cadeau de son attribution au destinataire ; compter les deux récompenserait deux fois le même cadeau.

Bien utiliser donoValue et currency.js

hasDonation est le libellé d’origine affiché, par exemple €5.00 ou 100 bits. donoValue est un montant numérique facultatif en USD fourni par la source. Respectez toute valeur valide, y compris zéro, avant d’estimer à partir du libellé. Conservez le libellé d’origine pour l’affichage.

<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>

Comportement actuel de la conversion : SSN estime actuellement une pièce TikTok à 0,01 $, un diamant à 0,005 $, un Bit Twitch ou une Étoile Facebook à 0,01 $ et un Joyau YouTube à 0,005 $. Un cadeau TikTok sans prix vaut par défaut une pièce par cadeau ; un cadeau YouTube sans nombre de Joyaux utilise une estimation provisoire de 0,01 $. Les devises utilisent aussi des taux internes approximatifs, sans service de change en direct.

Ce sont des valeurs de comparaison SSN, pas une définition commune des dépenses du spectateur, du revenu net ou du montant retirable. Les méthodes de capture peuvent donner des estimations différentes. Le repli à une pièce pour un cadeau TikTok inconnu ne prouve notamment pas son prix.

N'utilisez pas donoValue || convertToUSD(...): cela supprimerait un zéro intentionnel. N’extrayez pas les chiffres de chatmessage pour détecter les paiements, ni exiger le marqueur event === "donation": les Étoiles Facebook et certains Cheers n’ont pas de marqueur d’événement. Le modèle d’objectif sélectionne les types de soutien avant d’appeler le convertisseur commun.

Source : currency.js et le référence des données. Les métadonnées des cadeaux sont facultatives ; les exemples n’inventent pas les champs absents de votre capture.

Compter une série de cadeaux une seule fois

TikTok peut transmettre les comptes cumulatifs 1, 2, 3 d’une même série. Cela fait trois cadeaux, pas six. Pour les actions additives, mémorisez le plus grand compte ou montant déjà reçu et appliquez seulement l’augmentation. Une clôture avec le même total n’ajoute rien.

// 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');

L’utilitaire utilise les ID natifs de groupe/expéditeur/cadeau TikTok s’ils existent, puis meta.tiktokGiftStreakId ou les ID des messages. Ces derniers empêchent aussi les livraisons répétées. L’utilitaire n’attend pas repeatEnd car le navigateur peut ne jamais le fournir. Une seule action après la fin d’une série nécessite une règle de clôture distincte utilisant les champs réellement envoyés par votre connexion.

Ces modèles conservent au plus 2 000 identifiants en mémoire. Réinitialiser ou recharger efface cette mémoire et la partie. Sans ID stable, les doublons ne peuvent pas être supprimés fiablement ; deux captures du même canal peuvent utiliser des ID différents. Commencez avec une seule route. La fusée regroupe les soldes par plateforme et ID utilisateur, puis par nom affiché à défaut ; des homonymes peuvent partager un solde. Pour conserver une partie, ajoutez la sauvegarde et la gestion des relectures avant de compter sur les récompenses payantes après redémarrage.

Des récompenses sans jeu personnalisé

Dans Event Flow, utilisez Comparer une propriété avec donoValue, supérieur ou égal, puis votre seuil en USD. Reliez ensuite un son, une animation ou une commande OBS. La comparaison utilise la valeur fournie par la source si elle est valide, puis la conversion existante si nécessaire.

Pour un cadeau TikTok précis, comparez meta.giftId ou meta.giftName, et limitez le flux aux cadeaux TikTok. Les comparaisons numériques de hasDonation donnent aussi des USD ; ce ne sont pas des comparaisons de pièces brutes. Utilisez les métadonnées natives ou du code personnalisé pour les règles en pièces.

Un seuil évalué par message diffère d’un solde cumulé ou d’un compteur de série. Ne supposez pas qu’un seuil Event Flow gère automatiquement l’accumulation et les doublons du modèle. Utilisez les nœuds d’état si votre flux a besoin d’un état, ou conservez cette logique dans votre jeu.

Tester avant de relier une action payante

1. Utilisez les exemples. Une série 1 → 2 → 3 doit ajouter la valeur de trois cadeaux ; la valeur explicite zéro ne doit ajouter aucun USD ; un prix inconnu ne doit ajouter aucune pièce exacte.
2. Connectez votre vraie source et inspectez les données capturées : nom/ID du cadeau, montant/unité, quantité et événement attendu. Un exemple valide la règle, pas la capture en direct.
3. Vérifiez dans votre scène OBS : événements répétés, reconnexion et rechargement. Évitez d’arrêter ou de rafraîchir cette source Navigateur si la partie en mémoire doit être conservée.

Pour un jeu sans surveillance ou AFK, SSN, la capture et la page du jeu doivent rester actifs. Mise en veille, connexion expirée ou flux déconnecté interrompent les actions ; ces modèles ne récupèrent pas les événements manqués et ne gèrent pas les remboursements. Les réactions automatiques n’autorisent pas la monétisation d’un direct sans surveillance : consultez les règles LIVE et de monétisation applicables à votre format.

Si rien n’arrive, vérifiez le dock SSN, puis la session, le mot de passe et le transport. Si le chat arrive mais pas le cadeau attendu, inspectez les données et les filtres de dons/événements. La disponibilité des suivis et abonnements varie ; consultez la référence des événements. Pour les détails de connexion, consultez overlays personnalisés.