Overlay JDR Comics/City of Mist

Avec notre équipe habituelle, nous avons prévu de lancer une campagne du jeu de rôle City of Mist, où les joueurs et les joueuses incarnent des personnes ordinaires ayant acquis des super-pouvoirs et tout l’enjeu est de gérer la fine frontière entre leur vie quotidienne et leur rôle de justicier.

Actuellement, je suis encore en phase de recherche graphique et de tests techniques, ce qui prend du temps.

De base, l’esthétique du jeu s’inspire largement des films noirs et des comics, ainsi l’idée principale est de présenter dynamiquement les informations de la partie (personnages, cartes, éléments du monde…) sous la forme d’un comic book interactif.

Le système de jeu de City of Mist (largement basé sur Apocalypse World) est très différent de ce que j’ai pu utiliser jusqu’à présent. Il reste encore du travail pour déterminer quelles informations sont essentielles à afficher en cours de partie.

Développement et intégration

Je réalise un prototypage visuel des personnages et des éléments graphiques sur Figma, avec une exportation en SVG. Le format SVG est particulièrement utile car il permet d’animer et de modifier dynamiquement certaines valeurs de texte à l’aide de Javascript et CSS.

Tout est intégré dans une page HTML locale. J’utilise la librairie St Page Flip, qui génère un effet de magazine interactif avec des pages que l’on peut tourner. Bien que cette librairie soit généralement utilisée pour des brochures ou magazines, je l’ai détournée pour afficher mes éléments graphiques réalisés sur Figma.

Un script maison permet de lier FoundryVTT (une plateforme en ligne pour les parties de JDR) à cet overlay afin d’afficher en temps réel des informations de jeu.

Un autre script basé sur OBS Websocket gère les animations et la navigation dans le comic interactif en fonction de la scène en cours sur OBS. Plutôt que de déclencher des actions manuellement, le script surveille continuellement la scène active et ajuste automatiquement l’affichage :

• Si le nom de la scène contient “Earthquake” (le nom d’un personnage), alors la page correspondante s’ouvre automatiquement sur ses informations.
• Si la scène contient le mot “map”, la page s’ouvre sur la carte.

Ce n’est peut-être pas la solution la plus optimisée, mais pour l’instant, ça fonctionne bien. 🤷

Outils & technologies

• OBS et OBS Websocket
• Figma & SVG
• FoundryVTT et Socket.io
• Plugins Move, Transition Table
• HTML/CSS/Javascript, librairie “StPageFlip”