Récréation de l’overlay de score de Game of Rôles - Les Deux Tours

Expérimentations
obs overlay JDR

Un soir de week-end, alors que je regardais une VOD de Game of Rôles : Les Deux Tours, un jeu de rôle sur le thème de la politique française, j’ai été inspiré pour tenter de récréer des éléments graphiques d’affichage des scores de l’overlay.

Le module est piloté via NodeCG. Il est possible de changer les noms des joueurs et des joueuses ainsi que les noms des partis politiques. Je peux ensuite afficher séparément chaque tableau ou afficher un score global et gérer finement les scores selon les catégories sociales présentes dans le jeu (retraités, classe moyenne, riches…)

Extrait d'une partie de Game of Rôles avec l'overlay en action.

C'est quoi NodeCG ?

NodeCG est un outil open-source permettant de créer et gérer des éléments graphiques de stream en HTML/CSS/JavaScript.

Puissant et flexible, il nécessite toutefois des bases en code et peut être complexe à prendre en main pour un débutant.

Site officiel de NodeCG

Dans un premier temps, j’ai récrée les éléments graphiques sur Figma : un module pour détailler les scores et un autre pour récapituler les scores des candidat-e-s, puis le tout a été exporté en SVG puis intégré dans des fichiers HTML dans NodeCG.

Capture d’écran de Figma, où j’ai recrée les différents éléments visuels de l’overlay.
Capture d’écran de Figma, où j’ai recrée les différents éléments visuels de l’overlay.

IMAGE - Capture d’écran de Figma, où j’ai recrée les différents éléments visuels de l’overlay.

Côté “Dashboard”, j’ai codé deux éléments : un gestionnaire de nom et de parti politique et un tableau qui permet de gérer les scores de chaque personnage pour chaque catégorie sociale.

J’ai mis en place toute une logique de variables pour synchroniser les valeurs sur le tableau d’administration vers l’overlay.

Capture d’écran de NodeCG, avec un module qui permet de gérer les noms et les noms des partis politiques des candidat-e-s.
Capture d’écran de NodeCG, avec un module qui permet de gérer les noms et les noms des partis politiques des candidat-e-s.
Capture d’écran de NodeCG, le module qui permet de gérer les scores
Capture d’écran de NodeCG, le module qui permet de gérer les scores

Outils & technologies