Récompenses aléatoires avec les points de chaîne

Si vous me suivez sur Twitch, vous avez peut-être déjà vu ou même expérimenté la récompense “Ouvrir un coffre (Guild Wars 2)”. Je vous explique comment je l’ai mis en place.

Vous connaissez déjà peut-être le système de roue de la fortune, une roue circulaire, découpée en belles tranches de pizza, et pour chaque tranche une récompense, ou non. Mon problème avec ce genre de design, c’est que lorsque vous avez des textes un peu longs, c’est compliqué de les positionner correctement dans la roue. Ça limite aussi le nombre de récompenses différentes à chaque tirage, puisque chaque nouvelle récompense va ajouter une nouvelle part à votre pizza de la fortune. Et a minima, une simple couleur ou une icône ne me semble pas suffisamment satisfaisante. C’est pourquoi j’ai misé sur un coffre, animé très simplement en CSS et où tout le système aléatoire du tirage au sort est “technique”, caché à la personne qui lance l’action.

Fonctionnement

Sur ma chaîne, une personne peut ouvrir un coffre toutes les 10 minutes. La récompense coûte 2000 points de chaîne. Pour mémoire, un spectateur non abonné peut gagner 320 points par heure, un abonné de niveau 1, un peu plus de 380 pts/h. Il faudra donc approximativement 6 heures de visionnage pour activer la récompense (je streame en moyenne 10 heures par semaine). Sans compter les différents bonus qui s’obtiennent en participant à un raid vers votre chaîne ou encore les séries de visionnage.

Chaque coffre contient un cadeau (mais c’est tout à fait possible de faire des coffres perdants). J’y inclus diverses récompenses (plus ou moins rares) que je gagne en jouant, et des apparences obtenues en ouvrant des boîtes en jeu.

La sélection de récompenses est aléatoire, et ça me fait gagner du temps puisque je n’ai plus besoin de lancer des tirages au sort pendant mes directs. Je pense juste à noter le nom du compte des gagnants que je ne connais pas déjà et j’envoie les cadeaux en jeu en une seule fois en dehors de mes streams. Et de temps à autre à ajouter des récompenses à la liste.

Prérequis

Voici la liste des différents outils que j’utilise pour ce système de tirages au sort. Évidemment, vous pouvez utiliser d’autres logiciels/outils en fonction de vos habitudes ou préférences, du moment que l’objectif qu’ils permettent d’attendre est identique.

• DALL·E 2 (OpenAI) : intelligence artificielle pour générer des images, des illustrations, dans ce cas pour l’icône du coffre.
• Photoshop : logiciel de retouches photo, pour peaufiner l’aspect visuel du coffre et le détourer.
• Twitch : vous devez être affilié·e pour avoir accès aux points de chaîne et créer une récompense.
• Hébergement en ligne : pour héberger l’overlay, qui affichera la récompense sur votre live.
• Mix It Up : un bot de streaming pour Twitch, pour détecter la récupération de la récompense et afficher votre overlay.
• OBS Studio : logiciel de streaming, sûrement le meilleur.
• VS Code : si vous créez vous-même votre overlay, vous avez besoin d’un éditeur de code (Notepad++ fait très bien l’affaire, ou même le bloc-notes…).

Étapes de la réalisation

Pour commencer, il me fallait une image d’un coffre. Comme je ne sais pas spécialement dessiner, et plutôt que d’utiliser une image libre trouvée sur internet, et puisque c’était déjà très à la mode de demander à des IA de générer des illustrations, j’ai proposé à DALL·E 2 de produire une image avec le prompt suivant :

treasure chest icon, flat, digital art

À partir de l’image que j’ai préférée (la dernière), je l’ai ouverte dans Photoshop, j’ai détouré, changé un peu l’orientation, ajouté un contour pour que ce soit plus lisible et exporté pour le web.

J’ai ensuite créé un overlay en PHP qui retourne un paramètre passé à l’URL, le tout avec l’image générée par DALL·E et un peu d’animation CSS.

J’ai choisi PHP parce que c’est le langage avec lequel je suis le plus à l’aise, mais ça requiert soit d’avoir un serveur local lancé, soit de l’héberger en ligne. Ce n’est pas impossible que ce soit réalisable en JavaScript et exécuté en local. À tester !

Étape suivante, créez une “Récompense de spectateur > Points de chaîne > Gérer les récompenses et les défis”. Ajoutez une récompense peu contraignante pour faire vos tests. Par exemple : aucune limite, coût très très élevé, ainsi vous pouvez l’activer immédiatement et seulement vous, puisque vous avez un nombre de points de chaîne illimité, en tant que propriétaire.

Le nom de la récompense est assez important, puisque c’est lui qui est utilisé pour identifier vos différentes récompenses. Essayez de trouver le nom définitif dès le départ, sinon, pensez bien à vérifier auprès de votre bot, qui va réagir à la récupération de cette récompense, qu’elle est toujours opérationnelle.

Avant de passer à Mix It Up, l’étape suivante consiste à ajouter une scène “Navigateur” dans OBS, que vous appelez comme vous voulez (chez moi : Chest). Vous pouvez laisser l’URL par défaut. Cliquez sur l’œil pour masquer cette nouvelle scène (l’œil doit être barré et légèrement grisé).

Maintenant, nous allons nous occuper de Mix It Up (MIU). Dans le principe, j’ai un fichier gifts.txt dans lequel chaque ligne correspond à une récompense. MIU va lire une ligne de ce fichier aléatoirement, l’assigner à une variable, supprimer la ligne en question, modifier l’URL de la scène “Navigateur” sur OBS, puis l’afficher, jouer un son, attendre quelques secondes et masquer la scène, et en enfin, envoyer un message sur mon chat Twitch.

Dans Mix It Up, sélectionnez “Twitch Channel Points” dans le menu et tout en bas : “Add Command To Existing Reward” (ajouter une commande à une récompense existante). Dans la pop-up qui s’ouvre, ajouter les actions suivantes :

• File (Read & Write) :
  • Action : Remove Random Line From File
  • File Path : chemin vers votre fichier gifts.txt
  • Special Identifier Name : gift (vous pouvez en changer)
• Special Identifier :
  • Special Identifier Name : giftencoded (vous pouvez en changer)
  • Replacement Text : urlencode($gift)
• Streaming Software :
  • Choisissez OBS Studio dans la liste (ou votre logiciel de streaming)
  • Action : Web Browser Source
  • Source Name : indiquez le nom à l’identique de votre source, pour moi c’est “Chest”
  • Cochez “Visible”
  • Web Page : adresse de votre overlay¹
• Wait :
  • Amount : 3 (secondes)
• Chat message :
  • $username a ouvert un coffre et a gagné : $gift
• Wait :
  • Amount : 6 (secondes)
• Streaming Software :
  • Choisissez OBS Studio dans la liste (ou votre logiciel de streaming)
  • Action : Source Visibility
  • Source Name : Chest
  • Décochez “Visible” (il doit l’être déjà par défaut)
• File (Read & Write) :
  • Action : Append To File
  • File path : choisissez le fichier où inscrire vos gagnants, pour moi c’est winners.txt
  • Text To Save : $username,$gift

¹ N’oubliez pas de passer le paramètre $giftencoded dans l’URL de votre overlay, si vous voulez afficher la ligne choisie aléatoirement de votre fichier gifts.txt.
Exemple : https://…/chest.php?gift=$giftencoded

Pour tester votre action, soit vous cliquez sur le bouton “Play” dans la liste de Mix It Up soit vous récupérez la récompense à partir de votre chat Twitch.

N’oubliez pas que les récompenses qui sont tirées au sort dans votre liste de cadeaux sont supprimées. Pensez à faire une copie de cette liste et la remplacer par cette copie une fois que vous avez terminé vos tests.

Aperçu de la récompense