Composez votre pizza avec la chatroom Twitch

Au fil de mes expérimentations sur les overlays Twitch interactifs, une idée revenait régulièrement.

Comment transformer une simple scène d’attente en un petit jeu où toute la chatroom participe ?

L’objectif était de créer un mini-jeu simple (comme le Motus), accessible en quelques secondes, sans interrompre le stream.

Le principe est celui d’une pizza collaborative. Les spectateurs composent ensemble une recette en ajoutant des ingrédients directement depuis le chat Twitch, jusqu’à obtenir une pizza unique qui pourra ensuite être sauvegardée.

Comment rendre une scène d’attente plus interactive ?

Le jeu est affiché dans une Source Navigateur OBS et réagit en temps réel aux messages du chat.

À chaque nouvelle partie, une sélection aléatoire d’une dizaine d’ingrédients est proposée parmi une trentaine disponibles.

Les spectateurs peuvent ensuite participer simplement en envoyant :

La pizza se construit progressivement :

• choix de la pâte
• choix de la sauce
• ajout des ingrédients sélectionnés par la chatroom (viandes, fromages, légumes)

Afin de conserver un rendu lisible, le nombre d’ingrédients est pour l’instant volontairement limité à cinq ou six.

Une fois la recette terminée, les spectateurs et spectatrices peuvent proposer un nom pour leur création.

Le jeu génère alors automatiquement une image souvenir, un polaroid, contenant :

• la pizza réalisée
• son nom
• la liste complète des ingrédients

Cette image est enregistrée localement afin de conserver un historique des pizzas créées pendant les streams et agrémenter le menu !

Développement de l’overlay

Comme plusieurs de mes autres projets, l’overlay repose sur une page HTML, CSS et JavaScript affichée dans une Source Navigateur OBS.

Le script se connecte au chat Twitch grâce à TMI.js afin de surveiller les commandes !pizza.

Chaque proposition est analysée, comparée à la liste des ingrédients disponibles puis intégrée à la pizza si elle est valide.

Un système de cooldown de quelques secondes limite le spam et laisse le temps à la chatroom de construire la recette collectivement.

Le moteur et l’idée derrière reposent en grande partie sur la scène d’attente Monkey Island.

Création graphique

Au départ, j’avais utilisé des éléments graphiques trouvés sur Internet afin de valider rapidement le concept, mais il n’y avait aucune cohérence graphique.

Comme j’aimerais pouvoir partager ce projet librement, j’ai finalement préféré redessiner l’ensemble des ingrédients moi-même afin d’éviter toute question liée aux droits d’utilisation.

Chaque élément a été réalisé sous Affinity Designer, pour tester :

• pâtes
• sauces
• fromages
• viandes
• légumes
• condiments

Les illustrations ont ensuite été exportées individuellement au format SVG.

Pistes d’évolution

Le prototype valide déjà le principe du jeu, mais plusieurs idées pourraient enrichir l’expérience.

• créer plusieurs thèmes (pizza, burger, sandwich, tacos…)
• ajouter des ingrédients rares ou saisonniers
• permettre au chat de voter pour le nom final
• conserver une galerie des créations réalisées pendant les streams
• imaginer des recettes imposées ou des défis à relever

L’objectif est de construire progressivement une série de petits jeux collaboratifs adaptés aux scènes d’attente, où le chat devient véritablement acteur du stream.

Cette expérimentation reprend la même philosophie que mes autres overlays Twitch interactifs : utiliser une simple Source Navigateur OBS, HTML, JavaScript et le chat Twitch pour transformer des moments habituellement passifs en véritables interactions avec les spectateurs.