Overlay pizza jouable par la chatroom

Concept

Ce projet est un jeu interactif destiné aux scènes d’attente ou de pause sur un stream, où la chatroom participe directement à la création d’une pizza.

Grâce à la commande !pizza suivie du nom d’un ingrédient, les spectateurs ajoutent des éléments à la pizza, qui se compose progressivement. Chaque pizza peut contenir jusqu’à cinq ingrédients pour éviter une surcharge visuelle.

Développement et création

Au départ, j’avais trouvé des éléments graphiques prêts à l’emploi pour mes tests. Mais dans l’optique de rendre ce jeu accessible à tous, j’ai décidé de recréer l’ensemble des visuels moi-même afin d’éviter tout problème de droits.

J’ai donc conçu chaque élément sur Affinity Designer : les différentes pâtes à pizza, les bases de sauce, les viandes, les légumes, les condiments et les assaisonnements. Une fois ces éléments finalisés, je les ai exportés individuellement puis recomposés sous Figma.

Ce choix s’est imposé car Figma permet une meilleure gestion des fichiers SVG par rapport à Affinity Designer, qui posait des soucis de paramétrage.

Fonctionnement technique

Une page HTML en local, connectée à la librairie Javascript Tmi.js, surveille les messages de la chatroom contenant la commande !pizza.

À chaque nouvelle pizza, le système sélectionne aléatoirement une dizaine d’ingrédients parmi une trentaine disponibles. Les spectateurs peuvent alors voter pour cinq d’entre eux.

La pizza se construit en couches successives : choix du type de pâte (fine ou épaisse), de la base de sauce, puis ajout des ingrédients sélectionnés par le chat.

Une fois la pizza terminée, la chatroom est invitée à lui donner un nom. Un script capture ensuite une image de la pizza, y ajoute son nom et la liste des ingrédients, puis enregistre le tout en PNG dans un dossier local.

Un cooldown de 5 à 10 secondes entre chaque commande évite le spam et assure une interaction fluide.