Carte de personnage de JDR avec Google Spreadsheet

Principe & Fonctionnement

Je m’intéresse beaucoup aux jeux de rôle et aux Actual Play, sur les façons d’afficher et de mettre en avant diverses informations : les joueurs et joueuses, les points de vie, les noms et les classes, avec des animations !

Dans l’idée, j’ai lié une feuille de calcul Google Spreadsheet (grâce aux API de Google) aux éléments de l’overlay, une cellule pour les PV, une cellule pour les PV etc… Ensuite, mes éléments d’overlay vont consulter ces cellules pour renseigner les noms, les classes, les barres de vie…

Pourquoi utiliser Google Spreadsheets ?

En vrai, c’est surtout pour tester.

Le problème est que les services pour jouer ensemble à du jeu de rôle en ligne comme Roll20 ou FoundryVTT ne proposent pas d’API externe, un point d’entrée pour aller chercher des données sur le monde ou les personnages (inventaire, PV, armure…)

Ce serait tellement bien si c’était le cas, mais non. A défaut, Google Spreadsheets me permet de faire mes tests, faute de mieux.

Les premiers tests et les prototypes

Un premier test/prototype pour tester la gestion des points de vie (PV) sur une échelle de 0 à 100. J’ai codé un petit cercle (et je me suis compliqué la vie) autour de l’avatar pour afficher les points de vie. Petit test également, quand les PV atteignent 0, l’avatar s’affiche en noir & blanc (et c’est le décès).

Cette V2 générique propose un petit lifting graphique, mais aussi une barre de vie différente avec des seuils de PV (rouge = critique, orange = moyen, vert = ok).

Je me sers d’une cellule pour gérer le nombre actuel de PV et une autre pour gérer le nombre maximum de PV possible. Ensuite j’ai codé une barre de vie qui gère automatiquement le calcul.

Pour aller plus loin, j’ai décliné cette version pour quatre joueurs et joueuses et le tout s’adapte en fonction du nom du personnage.

Prototype dans le style du jeu de rôle Channel Fear

J’ai continué les tests avec pour base un JDR que je vais jouer prochainement : Channel Fear. J’ai adapté un overlay dans le style de celui-ci.

A noter que le créateur de Channel Fear a eu la super idée de proposer un “Pack Actual Play”, comprenant des illustrations, des polices de caractères, des logos…

A partir de ces éléments, j’en ai profité pour créer des cartes de personnage et j’ai adapté la barre de PV sous forme de batterie de téléphone.

Prototype dans le style de Persona 5

Autre expérimentation en cours et que j’aimerais développer, des habillages de fiches de personnage pour du JDR sur le thème de Persona 5. J’adore la direction artistique du jeu et j’aimerais beaucoup pouvoir développer là-dessus. L’idée ici est d’afficher les PV de la même manière que dans le jeu.

Des prototypes pour un futur jeu de rôle maison

Je me suis servi des personnages du jeu de rôle auquel je joue actuellement avec les copains et les copines pour faire des tests pour des futurs projets.

Sur Figma, j’ai crée des templates de “nameplate” pour les personnages, comprenant un nom, une classe, un logo et un affichage des PV et des points d’armures. Chaque fiche a ensuite été exportée au format SVG puis reintégrée dans un fichier HTML. Ensuite, du code en Javascript me permet de faire en sorte que, pour chaque fiche de personnage, le fichier HTML aille interroger la feuille de calcul Google Spreadsheet et modifie les informations si besoin.

Ici, l’important est surtout l’affichage des points de vie, des points d’armure et plus tard, des statistiques des personnages.

Quelques notes

Il faut pouvoir accéder aux API de Google Spreadsheet, pour pouvoir assurer l’échange de données entre le feuille de calcul Google et le script (en Javascript ici).

Les APIs de Google sont gratuites et assez robustes, mais pour être franc je les utilise encore assez faiblement. Je n’ai pas encore poussé le système dans ses retranchements et je ne suis même pas sûr d’en avoir l’occasion avec ce petit système.

J’ai codé un script qui va interroger certaines cellules de la feuille de calcul toutes les quelques secondes (10 secondes, pour l’intant), récupérer les données et modifier la valeur de la balise HTML qui lui est associée.