Stream High Scores & Achievements System
Introduction
Le widget de High Scores et Achievements (succès/achèvements) vous permet de configurer un système de points et d'achèvements pour vos viewers et votre stream basé sur les interactions effectuées en live, et d'afficher ces scores sur votre overlay de différentes manières. Un moyen efficace de gamifier le développement de votre stream en incluant et en récompensant vos viewers.
- 📺 Multiplateforme : Supporte Twitch, Kick et YouTube.
- 📦 Modulaire : Ajoutez/retirez des variables, changez les titres, les couleurs, les sections affichées, etc.
- 💻 Local : Fonctionne à 100% via Streamer.bot et tourne en local sans aucune autre dépendance.
- 💾 Sauvegarde automatique : Une sauvegarde automatique est effectuée après chaque mise à jour des scores.
- 🌐 Multilingue : L'interface est disponible en Français, Anglais, Espagnol et Allemand.
- 💰 Pas d'abonnements : Payez une fois, le widget et toutes les mises à jour sont à vous à vie !
L'interface
L'application est divisée en deux grandes sections :
- La section Accueil où vous pouvez trouver les boutons de contrôle et les liens vers les différentes vues incluses dans le widget.
- La section Configuration depuis laquelle vous pouvez configurer le widget et personnaliser vos scores et achèvements. Des informations détaillées sur la configuration sont données ci-dessous.
Vous avez plusieurs indicateurs de connexion présents en haut à droite dans l'en-tête de chaque section afin de pouvoir confirmer l'état du widget où que vous soyez dans l'application.
Le menu d'aide en haut contient des liens vers le guide (cette page) ainsi que les conditions d'utilisation générales. La page "About" contient les informations sur la version du widget, les crédits ainsi que plusieurs liens vers mes réseaux.
Vous pouvez utiliser le menu en bas à gauche pour changer la langue du widget selon vos préférences.
Configuration
Vous pouvez configurer la connexion du widget, les contrôles ainsi que les scores du live et des viewers à partir de l'interface de configuration du widget.
Importez les actions dans Streamer.bot
Importez les actions Streamer.bot fournies dans le fichier téléchargé. L'action Widget Backend est requise pour le bon fonctionnement du widget. Ne la renommez surtout pas, sinon elle ne sera plus reconnue.
Connexion au serveur Websocket
La première étape pour utiliser l'application est de se connecter au serveur websocket. Il est conseillé de démarrer Streamer.bot avant de lancer le widget.
SendMessage() qui nécessite l'authentification afin de fonctionner. Il est recommandé d'activer l'authentification du serveur websocket de Streamer.bot et d'enregistrer le mot de passe afin de pouvoir profiter de toutes les fonctionnalités du widget. Cependant, cette partie est optionnelle et peut être ignorée si vous ne voulez pas recevoir les messages du widget.Pour configurer votre connexion :
- Allez sous Configuration > Connexion > Connexion au server websocket
- Entrez vos informations de connexion.
- Cliquez sur "Sauvegarder" en haut à droite de la page.
Options du Widget
Sur la même page, vous pouvez configurer les plateformes que vous voulez utiliser, les triggers qui serviront à contrôler le Widget ainsi que la liste des utilisateurs ignorés pour le calcul des scores du live.
Général : Les triggers qui servent à activer / désactiver le widget.
Scores du Live : Le trigger qui remet les scores du live à 0.
Scores des viewers : Les triggers qui permettent de déclencher l'affichage des cartes de viewers avec leurs paramètres associés.
Scores du live
Configuration > Live High Scores
Dans cette partie du widget, vous pouvez activer/désactiver les scores du tableau des scores de manière individuelle. Plus d'options de configuration seront disponibles à l'avenir.
Scores des viewers
Configuration > Viewer Scores
Depuis cette page vous pouvez configurer :
- Les sections qui apparaissent sur le widget
- L'apparence de la carte
- Les sections et scores qui apparaîtront sur la carte
Vous pouvez trouver plus de détails sur la configuration des sections et des scores dans la section suivante.
Achèvements
Cette page sert à régler les achèvements des viewers sur le live. Elle fonctionne de manière similaire aux scores. Consultez la section suivante si vous avez besoin de plus de détails sur le fonctionnement général et les options disponibles.
Importer les vues dans votre logiciel de diffusion
Le widget fait tourner un serveur local sur votre PC, ce qui permet aux vues d'être accédées via URLs. Ces URLs sont données directement prêtes à copier sur la page d'accueil du widget.
Pour importer une des vues, il suffit de copier le lien correspondant, ajouter une nouvelle source navigateur dans votre programme de stream et coller le lien dans le champ URL de cette source.
Une fois ces étapes complétées, il suffit d'activer le widget via trigger ou le bouton de contrôle pour démarrer l'écoute des événements et l'incrémentation des scores.
Ajout des triggers
Les triggers sont les événements reçus depuis Streamer.bot. Ils sont utilisés par le widget pour les contrôles ainsi que pour l'incrémentation des scores.
Lorsque vous ajoutez un nouveau trigger, que ce soit pour contrôler le widget ou pour modifier les scores, vous pouvez choisir d'introduire une condition pour ne déclencher le trigger que lorsqu'une variable a une valeur précise.
Dans le champ payload variable to check, entrez le nom de la variable que vous voulez utiliser pour filtrer le trigger. Dans le champ de valeur, mettez la valeur que la variable devrait avoir pour déclencher le trigger.
Fonctionnalités
Tableau de scores du stream
Le tableau des scores du stream montre les scores généraux pour chaque plateforme activée dans le widget. Il est possible d'activer ou de désactiver chaque score individuel depuis la page de configuration dédiée. Plus d'options de customisation seront introduites à l'avenir.
Événement envoyé à Streamer.bot
Événement Streamer.bot envoyé : New Live High Score
| Argument | Description | Exemple de valeur |
|---|---|---|
scoreName | Le nom du score | twitch-messages |
scoreLabel | Le label du score tel qu'il est affiché sur le tableau | Messages |
scoreEvent | Le trigger exact ayant déclenché l'événement | Twitch.ChatMessage |
platform | La plateforme depuis laquelle l'événement a été envoyé | twitch |
oldValue | L'ancienne valeur du high score | 0 |
newValue | La nouvelle valeur du high score | 1 |
triggeredBy | Le nom de l'utilisateur ayant déclenché le nouveau high score | la_syl |
chatMessage | Le message envoyé dans le chat par le widget | 🏆 NOUVEAU RECORD ! Messages: 1 (ancien: 0) - par la_syl |
Cartes des viewers
Les cartes des viewers sont des cartes 100% personnalisables et customisables par le streamer sur lesquelles sont affichées les informations suivantes :
- Le nom et la photo de profil du viewer
- Le badge de la plateforme du viewer (optionnel)
- Les sections de scores configurées par le streamer
- Les badges d'achèvements débloqués par les viewers (optionnels)
- Le nom et la photo de profil du streamer (optionnel)
- La date à laquelle la carte est visualisée (optionnel)
Les options de personnalisation sont accessibles depuis la section Configuration > Viewer Scores.
Détails de la configuration
Dans la section Sections & Scores vous pouvez configurer votre système de scores pour vos viewers.
Sections
Les sections sont des conteneurs pour les scores. Elles peuvent avoir une ou deux colonnes. Lorsqu'une section a deux colonnes, vous pouvez entrer un titre pour chacune des colonnes. Cela influencera aussi la manière de configurer les lignes de scores.
1 Colonne
| Nom | Type de champ | Description |
|---|---|---|
| Label | Texte | Le titre du score affiché sur la carte |
| Variable | Texte | Le nom de la variable à sauvegarder dans Streamer.bot |
| Hide if 0 | Checkbox | Cacher la ligne si le score du viewer est 0 |
| Persisted | Checkbox | Indique s'il faut sauvegarder la variable dans les temp globals ou les persisted globals dans Streamer.bot |
| Increment Type | Dropdown | Indique la manière d'incrémenter le score |
| Trigger | Dropdown | Le trigger qui activera l'incrémentation des scores |
2 Colonnes
| Nom | Type de champ | Description |
|---|---|---|
| Label | Texte | Le titre du score affiché sur la carte |
| Variable 1 | Texte | Le nom de la variable à sauvegarder dans Streamer.bot |
| Variable 2 | Texte | Le nom de la variable à sauvegarder dans Streamer.bot |
| Hide if 0 | Checkbox | Cacher la ligne si le score du viewer est 0 |
| Hide variable 1 | Checkbox | Cacher la ligne si le score du viewer est 0 |
| Compare Type | Dropdown | Indique le type de comparaison à effectuer entre les deux variables. Ce paramètre influence la manière dont les scores sont sauvegardés. |
| Increment Type | Dropdown | Indique la manière d'incrémenter le score |
| Trigger | Dropdown | Le trigger qui activera l'incrémentation des scores |
Types d'incrémentation des scores et de comparaison des variables
Increment Type
| Nom | Description | Variable additionnelle |
|---|---|---|
| Count (+1) | Ajoute 1 au score | Non requis |
| Add Value from Payload | Ajoute la valeur d'une variable au score | Oui |
| Set Value from Payload | Remplace le score par la valeur d'une variable | Oui |
| Keep Maximum | Compare la valeur du score avec celle d'une variable et garde la plus haute | Oui |
Compare Type
| Nom | Description | Nombre de triggers à régler |
|---|---|---|
| Today VS All Time | Enregistre la variable 1 dans les temp user globals et la variable 2 dans les persisted user globals. | 1 |
| Current VS Best | Remplace la valeur 1 par la valeur de la variable réglée systématiquement. La variable 2 n'est remplacée que si la valeur de variable 1 est supérieure à variable 2. Un événement New Viewer High Score est envoyé à Streamer.bot quand cela se produit. | 1 |
| 2 Independant Values | Permet de régler deux variables indépendantes l'une de l'autre. | 2 |
Événement envoyé à Streamer.bot
Événement Streamer.bot envoyé : New Live High Score
Achèvements
Des achèvements peuvent aussi être configurés dans le widget. Ils sont donnés automatiquement lorsque les conditions configurées sont rencontrées par un des viewers. Le viewer sera ajouté au groupe Streamer.bot correspondant et le badge choisi dans la configuration sera affiché sur la carte du viewer.
| Nom | Type de Champ | Description |
|---|---|---|
| Plateforme | Dropdown | La plateforme à laquelle l'achèvement est associé. Les achèvements "communs" peuvent être déclenchés par les trois plateformes. |
| Nom | Texte | Nom de l'achèvement configuré. |
| Message | Texte | Message envoyé dans le chat lorsque l'achèvement est débloqué. |
| Nom du groupe Streamer.Bot | Texte | Nom du groupe dans lequel ajouter les viewers ayant débloqué l'achèvement. |
| Trigger(s) | Dropdown | Trigger à utiliser pour attribuer l'achèvement. Plusieurs triggers peuvent être réglés pour déclencher un seul achèvement. |
| Badge | Sélecteur de fichier | Le fichier image qui sera affiché sur la carte des viewers ayant débloqué cet achèvement. Optionnel. |
Type de déclenchement
Pour les achèvements, vous disposez d'une option supplémentaire pour le réglage d'une condition de déclenchement du trigger. Il est possible de choisir le type de variable à évaluer ainsi qu'un opérateur logique pour savoir comment évaluer la valeur de la variable sélectionnée.
Si vous choisissez l'option "threshold" vous aurez les champs suivants à remplir :
- Nom de la variable
- Type de variable
- Opérateur
- Valeur
Événement envoyé à Streamer.bot
Événement Streamer.bot envoyé : New Achievement Unlocked
| Argument | Description | Exemple de valeur |
|---|---|---|
userName | Le nom du viewer qui a débloqué l'achèvement | twitch-messages |
platform | La plateforme du viewer qui a débloqué l'achèvement | Messages |
achievementName | Le nom de l'achèvement tel qu'il est marqué dans la configuration | Twitch.ChatMessage |
groupKey | Le nom du groupe auquel correspond l'achèvement débloqué | twitch |
message | Le message envoyé dans le chat par le widget pour notifier du nouvel achèvement | 0 |
Dépannage
La section "État du système" est faite pour détecter et afficher les erreurs. Si quelque chose ne fonctionne pas comme prévu, vous pouvez consulter cette section afin de déceler le problème.
| Composant | Détails | Solution |
|---|---|---|
| Configuration Websocket | Indique si les informations de connexion à websocket sont valides ou pas | Corrigez les informations sur la page de configuration de la connexion à websocket, sauvegardez et tentez une reconnexion. |
| Authentification Websocket | Indique si l'utilisateur est authentifié (optionnel) | Vérifiez que l'authentification est activée dans websocket, vérifiez votre mot de passe et retentez la connexion. |
| Triggers | Confirme si les triggers ont bien pu être récupérés depuis Streamer.bot. | Devrait normalement se dérouler sans erreur si les deux pas précédents ont été passés. Si pas, redémarrez le widget en ayant Streamer.bot ouvert en fond. |
| Backend | Vérifie que l'action Widget Backend est bien retrouvée dans Streamer.bot | Confirmez que vous avez bien importé l'action et que vous ne l'avez pas renommée. |
| Compte Broadcaster | Confirme que le compte du broadcaster a bien été retrouvé. | Mêmes instructions que pour les triggers. |
| Plateformes | Liste les plateformes auxquelles le compte broadcaster est connecté | Vérifiez dans Streamer.bot que vous êtes bien connecté à votre compte broadcaster pour chaque plateforme utilisée. |
Si vous détectez des bugs, n'hésitez pas à envoyer un email à l'adresse de support avec une description, des screenshots et votre fichier de logs.