Principe & Fonctionnement
Une idée que me traînait en tête depuis un bon moment et que je devais tester ! C’est une scène d’attente pour un overlay dans le style de Monkey Island. La scène reprend les iconiques premiers combats d’insultes à l’épée contre les pirates de l’île de Mêlée.
Les personnes présentes dans la chatroom Twitch peuvent jouer en direct en postant un message commençant par la commande “!mi” (pour Monkey Island) et l’alternance du combat à lieu.
⚠️ Attention, c’est un prototype et il y a deux risques à prendre en compte :
- Un risque de spam qui casse tout si tout le monde veut jouer en même temps, donc il est possible de limiter la commande à un message toutes les 10 secondes ou avec des points de chaîne.
- Un risque de débordement, on est jamais à l’abri d’avoir quelqu’un qui en profite pour afficher des sales messages.
Création & Dev
Une des expérimentations qui m’a donné le plus de fil à retordre.
J’ai commencé par lancer le jeu et enregistrer une session avec OBS. L’idée était d’avoir pas mal de rushs des combats d’épée exploitables.
J’ai ensuite découpé plein de petits morceaux et pris des captures d’écran sur Premiere Pro (passes d’arme, animations de conversations, poses de combat…) et j’ai pris soin de faire un peu de nettoyage pour enlever le curseur ou l’interface.
J’ai ensuite crée un fichier HTML et un script qui active des vidéos ou des images en alternance, le tout déclenché par des messages de personnes présentes sur la chatroom.
Le script récupère aussi le message posté pour l’afficher avec la police de caractères adaptée. Le tout est limité à un message toute les 10 secondes pour éviter de casser tout ça.
Le plus dur a été de réussir à coder la logique d’enchainement des actions.
L’enchainement des actions :
Premier message sur la chatroom avec la commande “!mi”
→ Image fixe de Guybrush en pose de combat + le texte du message qui s’affiche
→ Vidéo de la passe d’armes entre Guybrush et le pirate
Second message sur la chatroom avec la commande “!mi”
→ Image fixe du pirate en pose de combat + le texte du message qui s’affiche
→ Vidéo de la passe d’armes entre le pirate et Guybrush
Et on reprend au début…
Axes d’amélioration possibles
- Détacher les personnages sur fond d’écran
- Pouvoir modifier à la volée les fonds d’écran avec une commande ou des points de chaîne
- Refaire les animations avec les sprites d’origine plutôt que d’utiliser des boucles vidéo
- Gestion plus fine du bot de stream
- Bugfix
Outils & technologies
- OBS Studio
- TMI.js
- Premiere Pro
- HTML/CSS/JavaScript