Combats d'insultes ! Un overlay Twitch interactif inspiré de Monkey Island

Au fil de mes expérimentations, il y a une question qui revient régulièrement :

Comment rendre une scène d’attente Twitch moins passive ?

Je voulais voir jusqu’où il était possible de créer un overlay interactif pour Twitch en utilisant simplement de l’HTML, du CSS et du JavaScript, affiché dans une Source Navigateur OBS.

Pour tester cette idée, j’ai recréé les célèbres combats d’insultes à l’épée de Monkey Island sous la forme d’une scène d’attente pilotée par le chat Twitch.

Chaque message envoyé avec la commande !mi déclenche la réplique d’un des personnages, affiche le texte du spectateur et lance la séquence correspondante. L’écran d’attente devient ainsi un véritable petit jeu où le chat prend part au duel.

Comment fonctionne cet overlay ?

Ce prototype reprend plusieurs techniques déjà utilisées dans mes autres overlays OBS.

L’overlay est affiché dans OBS Studio grâce à une Source Navigateur. Une fois chargé, les personnes présentes sur le chat Twitch peuvent déclencher un combat d’épée simplement en envoyant la commande !mi.

Chaque message déclenche automatiquement plusieurs actions :

• le pseudo et le texte du spectateur sont récupérés ;
• le message est affiché avec une police inspirée de Monkey Island ;
• Guybrush et le pirate prennent la parole à tour de rôle ;
• une animation correspondant au personnage actif est lancée ;
• une fois la séquence terminée, l’overlay revient en attente du message suivant.

L’objectif était de transformer une scène d’attente classique en une animation où les spectateurs participent directement au duel.

Comme il s’agit d’un prototype, deux limites restent à prendre en compte :

plusieurs personnes peuvent essayer de jouer en même temps. Pour éviter que l’overlay ne s’emballe, la commande est limitée à une utilisation toutes les dix secondes (ou pourrait être réservée aux points de chaîne) ; les messages étant affichés tels quels, une modération reste nécessaire pour éviter les abus.

Une fois ce fonctionnement validé, le véritable défi était de construire toute la logique permettant d’enchaîner correctement les animations.

Comme il s’agit d’un prototype, deux limites restent à prendre en compte :

• plusieurs personnes peuvent essayer de jouer en même temps. Pour éviter que l’overlay ne s’emballe, la commande est limitée à une utilisation toutes les dix secondes (ou pourrait être réservée aux points de chaîne) ;

• les messages étant affichés tels quels, une modération reste nécessaire pour éviter les abus.

Une fois le concept validé, il fallait construire toute la logique permettant d’enchaîner correctement les animations.

Développement de l’overlay

C’est probablement l’une des “petites” expérimentations qui m’a demandé le plus de travail et de tâtonnements.

La première étape a consisté à enregistrer plusieurs séquences du jeu avec OBS afin de constituer une bibliothèque de combats d’épée. J’ai ensuite découpé ces rushs dans Premiere Pro pour récupérer les différentes passes d’armes, les animations de dialogue et les poses de combat, tout en nettoyant les captures pour supprimer le curseur et l’interface du jeu.

Une fois les assets prêts, j’ai développé une page HTML/CSS destiné à être affiché dans une Source Navigateur OBS. Toute la logique est écrite en JavaScript.

Le script se connecte au chat Twitch via TMI.js, récupère les messages en temps réel et détecte la commande !mi. Chaque message alimente ensuite l’overlay en mettant à jour le texte affiché et en lançant la séquence suivante.

La partie la plus complexe n’était finalement pas d’afficher des images ou des vidéos, mais de synchroniser l’ensemble.

Il fallait alterner automatiquement entre Guybrush et le pirate, afficher le bon texte au bon moment, attendre la fin de chaque animation avant de passer à la suivante et empêcher que deux commandes envoyées presque simultanément ne déclenchent deux combats en parallèle.

J’ai donc mis en place un système d’état qui verrouille temporairement l’overlay pendant toute la durée d’une animation avant d’autoriser la suivante. Cette logique garantit un enchaînement fluide des séquences, même lorsque plusieurs spectateurs interagissent avec le chat.

Une alternance automatique

Chaque nouvelle commande inverse automatiquement le rôle des personnages.

Premier message sur la chatroom avec la commande “!mi”

→ Guybrush prend la parole

→ Le texte du spectateur apparaît

→ Guybrush attaque

Message suivant

→ Le pirate répond

→ Nouveau message affiché

→ Le pirate attaque

Puis le cycle recommence. Ce système permet de donner l’impression que les deux personnages se répondent naturellement, même si chaque intervention provient d’un spectateur différent.

Quelques pistes d’amélioration

Ce prototype m’a surtout permis de valider le concept. Avec un peu plus de temps, plusieurs pistes pourraient rendre l’expérience encore meilleure :

• remplacer les boucles vidéo par les sprites originaux du jeu afin de recréer entièrement les animations ;
• détourer les personnages pour pouvoir changer dynamiquement le décor ;
• permettre de modifier le fond via une commande Twitch ou des points de chaîne ;
• enrichir le bot avec davantage d’interactions et une meilleure gestion de la file d’attente ;
• ajouter plusieurs types d’animations aléatoires afin de rendre chaque duel unique.