L’objet de cet article
est de vous raconter dans l’ordre chronologique
et à travers quelques anecdotes (personnelles et technologiques)
les péripéties qui m’ont conduit à vous proposer aujourd’hui
un prototype 100% fonctionnel de Make Me Your Alter Ego.
Que vous soyez meneur de jeu, joueur,
créateur de jeux de rôle ou une maison d’édition,
la conception / réalisation de ce prototype devrait attiser votre curiosité.
Petite mise en garde
Lis cet article
Si le processus de création optimisé par les nouvelles technologies (HTML, PHP, ingénierie pédagogique, IA génératives) est pour toi un réel sujet d'intérêt.
Sois heureux
Les articles qui vont suivre continueront d'expliquer, de décrire et de démystifier les technologies mises en jeu dans la réalisation de MMYAE.
Tu peux lire cet article
Si tu te demandes comment optimiser l'immersion du meneur de jeu et des joueurs dans une partie de jeu de rôle d'un point de vue amateur ou professionnel.
Si le sujet t'intéresse
N'attends pas le prochain article, les réseaux regorgent d'informations et de tutoriels qui te permettront d'évoluer.
Ne lis pas cet article
Si tu souffres d'une hypersensiblité dogmatique vis-à-vis de l'usage des nouvelles technologies et/ou si elles t'effraient.
Ton temps est précieux
Réserve le à des sujets qui sont en adéquation avec tes centres d'intérêts.
Lis cet article
Si le processus de création optimisé par les nouvelles technologies (HTML, PHP, ingénierie pédagogique, IA génératives) est pour toi un réel sujet d'intérêt.
Sois heureux
Les articles qui vont suivre continueront d'expliquer, de décrire et de démystifier les technologies mises en jeu dans la réalisation de MMYAE.
Tu peux lire cet article
Si tu te demandes comment optimiser l'immersion du meneur de jeu et des joueurs dans une partie de jeu de rôle d'un point de vue amateur ou professionnel.
Si le sujet t'intéresse
N'attends pas le prochain article, les réseaux regorgent d'informations et de tutoriels qui te permettront d'évoluer.
Ne lis pas cet article
Si tu souffres d'une hypersensiblité dogmatique vis-à-vis de l'usage des nouvelles technologies et/ou si elles t'effraient.
Ton temps est précieux
Réserve le à des sujets qui sont en adéquation avec tes centres d'intérêts.
En préambule
Si vous n’avez pas encore pris le temps de visionner la vidéo de présentation des principales fonctionnalités de l’application, c’est maintenant ou jamais. Sachez toutefois que je l’ai réalisée dans les conditions du direct, sans montage, juste après la résolution d’une énième (oui, encore une !) problématique technique liée au développement. Je n’ai pas encore eu le loisir d’ajouter un chapitrage sur YouTube, mais voici néanmoins les principaux points qui y sont abordés :
● 0:00 — Introduction.
● 0:27 — Le principe des sommaires et sous-sommaires.
● 1:28 — Le concept derrière le jeu.
● 1:40 — La navigation par glissé de souris.
● 2:07 — La mise en page.
● 3:32 — Les univers.
● 4:20 — Extrait d’une partie de jeu de rôle.
● 5:02 — Les actual play.
● 5:37 — Les règles de jeu : La fiche de personnage.
● 7:42 — Les règles de jeu : Les personnages pré-tirés.
● 8:27 — Les règles de jeu : Adalberg Schewering Sohnrey (PNJ).
● 10:11 — Les règles de jeu : Ananya Bhattacharga (PNJ).
● 11:48 — Le scénario : Sommaire.
● 12:42 — Le scénario : Historique.
● 17:33 — Le scénario : Chronologie des événements à venir.
● 20:32 — Le scénario : PNJ – Coven des Noires Infidèles.
● 21:19 — Le scénario : PNJ – Sommaire.
● 21:42 — Le scénario : Lieux – Sommaire.
● 22:17 — Conclusion.
L'idée derrière l'application (rappel)
Tout a commencé en novembre 2014, lors d’une interview sur trictrac.net. À un moment précis (69 minutes et 15 secondes, pour être exact), Didier Guiserix et Damien Coltice / David Burckle de Black Book Éditions ont été questionnés sur la possible compétitivité d’Internet face au support papier dans le domaine du jeu de rôle. Didier Guiserix, imperturbable, a rétorqué que rien ne pouvait égaler l’avantage indiscutable du papier pour un accès rapide à l’information.
Et c’est là, à cet instant précis, que l’idée a germé.
J’ai immédiatement conceptualisé une solution pour contrer cette hégémonie du papier en offrant un accès quasi instantané à l’information recherchée, tout en optimisant du même coup l’expérience de jeu, tant pour les MJ que pour les joueurs. Le seul hic ? En 2014, je ne maîtrisais pas encore le développement informatique, et les logiciels inhérents à ce type de projet n’étaient tout simplement pas encore disponibles.
Prototype n°1
Premier saut dans le vide
Convaincu d’être à même de concrétiser seul cette idée (fou que j’étais !), pétri de toutes mes certitudes vis-à-vis des technologies que je maîtrisais, et fort de mon background d’illustrateur et de consultant / professeur en communication visuelle, je me dis que réaliser un prototype dans les 6 à 8 mois allait être chose facile. Je débute le travail en mars 2022.
Active Presenter
Le premier logiciel que j’utilise est Active Presenter. C’est un logiciel énormément employé en ingénierie pédagogique. Si vous souhaitez avoir une idée de ce que l’on peut faire avec, imaginez ce que Adobe Photoshop est à Microsoft Paint… hé bien c’est ce que Active Presenter est à Microsoft PowerPoint. On peut aussi se contenter de dire que, tout comme Photoshop, Active Presenter est une… énorme usine à gaz. Si vous n’avez pas un poste de travail conséquent en terme de CPU / GPU / mémoire vive / SSD, vous atteignez rapidement les limites de ce que vous pouvez lui demander de réaliser.
Recherche iconographique
Parallèlement au développement de l’interface graphique de l’application, je travaille sur le contenu iconographique, principalement pour le scénario dont l’action se déroule dans l’univers du mythe de Cthulhu (de H.P. Lovecraft). N’ayant pas assez de ressources exploitables pour les années 1910-1920 dans ma base de données 3D, j’ai dois me rabattre vers des banques d’images gratuites et payantes libres de droit (Depositphotos, Digital Commonwealth, Flickr, Pinterest, Wikimedia, etc.).
Conceptualisation du flux de production
Entre la conception et la réalisation des gabarits de mise en page, leur adaptation aux propriétés “responsive” (pour différents formats d’affichage), et la post-production des visuels via un script Photoshop de ma création, je me retrouve à avancer à pas de tortue, accumulant les problématiques techniques. J’arrive néanmoins à réaliser un premier prototype qui ressemble à ceci :
Mon idée d'intégrer un personnage 3D dans des vidéos interactives
Ha oui ! À un moment donné, j’ai cette idée farfelue d’utiliser le personnage d’un zombie en 3D pour présenter l’application et lui faire jouer le rôle d’une sorte de Jiminy Cricket lorsque je souhaitais prodiguer des conseils au MJ. Pour cela, j’utilise Plotagon Studio, un logiciel d’animation 3D. Bien qu’assez simple d’utilisation, il est très laborieux et répétitif dans son utilisation sur le long terme (l’ergonomie devrait à mon sens être optimisée). D’un autre côté, son exploitation en sous couche avec Active Presenter démultiplie ses fonctionnalités de manière impressionnante, mais en complexifiant malheureusement sa gestion. Voici un exemple (non finalisé) de la séquence d’introduction à MMYAE :
Quatre mois plus tard, je remets tout en question
En septembre 2022, je réalise que ce que j’ai produit ne correspond pas du tout à ce que j’avais imaginé :
— L’ergonomie de navigation est d’un classicisme absolu.
— L’identité visuelle est chaotique, due à l’origine disparate des visuels utilisés.
— Les gabarits de mise en page de mon fichier de travail (à partir duquel j’effectue l’export en HTML) sont tellement complexes que ma carte vidéo sature, nécessitant des redémarrages successifs d’Active Presenter.
— La propriété “responsive” des gabarits souffre d’un bug récurrents inhérent à la version 8 de l’application (qui serait, en théorie, résolu dans la version 9).
CONCLUSION : je dois repenser entièrement le processus de création et changer d’outil de production !
Quatre mois de tests
Technologie n°1 : WordPress + Mamp Pro
WordPress est un CMS (Content Management System ou Système de Gestion de Contenu) permettant de réaliser des sites internet dynamiques. MAMP PRO émule un serveur local et une base de données. L’association des deux permet de créer, d’alimenter et de bénéficier d’un site internet dynamique en local sur son propre ordinateur. Mais une problématique apparaît, et non la moindre : alors que j’ai travaillé des années durant avec Mamp Pro en en étant entièrement satisfait, je constate que depuis les évolutions majeures des systèmes d’exploitation de Windows 10 et de MacOS Catalina, celui-ci est devenu inutilisable en production à cause de nombreux bugs.
Technologie n°2 : WordPress + Local
Local est un logiciel en tous points similaires à Mamp Pro, à la seule différence qu’il jouit d’une simplicité et d’une ergonomie accrue dans sa configuration. Cerise sur le gâteau : il permet théoriquement de partager en Wifi le site internet hébergé en local sur son ordinateur, ce qui rend possible l’utilisation de tablettes iOS et Android. En faisant quelques tests, je comprends que l’application est encore jeune car les résultats obtenus sous Windows / Mac OS / iOS / Android sont erratiques : les polices de caractères et les gabarits de mise en page de WordPress fluctuent d’un OS à un autre. Dommage !
Technologie n°3 : Blocs
Blocs est un logiciel dédié à MacOS permettant de réaliser des sites internet responsive, sans être développeur. Après un mois et demi de formation, je déclare forfait. Même si je ne doute pas qu’en persévérant, je sois susceptible d’atteindre les objectifs de mon cahier des charges, le temps nécessaire à son appropriation est rédhibitoire compte tenu de ma deadline.
Technologie n°4 : Sparkle
Sparkle, tout comme Blocs, est un logiciel ne fonctionnant que sous MacOS. Bien qu’à mon sens il soit beaucoup plus intuitif et plus simple d’utilisation que Blocs, il souffre d’un énorme défaut : le code généré n’est pas propre, et surtout, ne tient pas compte des impératifs liés à la transformation d’une page au format PDF, voire aux simples critères liés à l’impression d’un document HTML. Mais même si je ne retiens pas cette technologie, le logiciel me servira quelques mois plus tard à la réalisation du gabarit de mise en page (extrêmement complexe) de la fiche de personnage.
dernier trimestre 2022 :
Active Presenter 9.0 voit le jour !
Mais surtout : les ia génératives débarquent !
Plongée en apnée et (légère) dépression !
Autant je considère, à tort (voir plus loin), qu’avec cette nouvelle version d’Active Presenter tous les feux sont au vert pour finaliser mon application, autant je prends de plein fouet l’apparition de MidJourney. J’assiste à une révolution technologique qui bouleverse la catégorie socio-professionnelle à laquelle j’appartiens depuis près de 30 ans : celle des créatifs et des illustrateurs. Ma réaction immédiate et de mettre à l’arrêt toutes mes illustrations en cours, et je l’avoue, de sombrer dans une phase de victimisation. Fort heureusement, cet auto-apitoiement ne dure que trois petites semaines.
Peu à peu, comme de plus en plus de gens de mon entourage ne cessent de discuter de cette technologie et que le net déborde de contenus faisant la démonstration des impressionnantes capacités de ces I.A. génératives, je comprends qu’il serait contre-productif de rester en retrait. Le scandale du concours des beaux-arts de la Colorado State Fair, remporté par une œuvre créée par MidJourney, me fait finalement réaliser l’ampleur du changement de paradigme et qu’il serait vain de vouloir y résister. Bien au contraire : soit je laisse le train passer devant ma mine désabusée, soit je saute dedans, l’enfourche, et me l’approprie !
Second saut dans le vide
Entre février 2023 et juin 2023, je reprends l’intégralité du premier prototype pour en extraire l’essentiel et éliminer le superflu, cette fois en intégrant totalement MidJourney dans mon processus créatif. Quand je me lance dans des projets sur le long terme, je travaille de manière empirique. Ma méthode est toujours la même : tout est planifié mentalement (répartition des tâches, gestion des urgences, résolution des écueils techniques, etc.), tandis que l’énergie qui alimente ma productivité vient du plaisir de voir le projet se concrétiser sous mes yeux, jour après jour.
Transformation du HTML en application MacOS, Windows et Linux
Comme mon objectif est de proposer une “véritable” application, le temps est venu pour moi d’aborder les différentes technologies autorisant l’encapsulage d’un site HTML sous la forme d’un logiciel fonctionnant sous les différentes versions des principaux systèmes d’exploitation (Windows, MacOS, Linux, iOS et Android). N’étant pas développeur mais un simple bidouilleur du dimanche, je vous fais grâce de mes errances et échecs successifs. ChatGPT me préconise l’utilisation d’Electron et NW.js comme alternative fonctionnelle. Après m’y être formé durant quelques jours, je constate que ces technologies s’avèrent effectivement être adaptées à mon besoin, mais, pour un novice comme moi, elles sont incroyablement trop complexes à maîtriser.
Conception et réalisation du site internet de MMYAE
Sacrée charge de travail (de juin 2023 au mois de septembre 2023) que ce site internet qui a vu depuis un an quelques évolutions majeures et la publication presque régulière d’articles abordant :
— le sujet de l’application elle-même,
— mais aussi ceux de la mise à disposition d’une aide de jeu Sci-Fi Cyberpunk,
— le pour et le contre du fait d’utiliser MidJourney, mon ancienne activité d’illustrateur,
— etc.
Quand Didier Guiserix me fait revoir ma copie
( et je l'en remercie )
Ou le danger de bosser en aveugle tout seul dans son coin
À la fin du mois de septembre 2023, je m’autorise à contacter Didier Guiserix pour l’informer du début de ma communication autour de Make Me Your Alter Ego. Je lui demande l’autorisation d’utiliser l’interview mentionnée plus haut (sur trictrac.net). Il accepte et me répond avec une certaine curiosité. Je le cite : “l’apparente souplesse de ton outil titille ma curiosité et je suis curieux de voir où se dirigeront les éditeurs et les MJ motivés”. Il me suggère en dernier lieu une fonctionnalité clé : “le fait de mettre en place de boutons customisables facilement insérables par le MJ en marge du sommaire ou des pages de règles pour lui permettre de se téléporter entre les pages qu’il utilise le plus souvent (ou le plus rarement, donc oubliées, mais dans l’urgence)”.
C’est à ce moment que je réalise avoir commis une erreur de conception majeure. Alors que je cherchais à simplifier l’accès aux règles de jeu, aux scénarios et aux campagnes de façon linéaire, je comprends qu’il est nécessaire de laisser plus de flexibilité aux utilisateurs. De plus, la technologie que j’utilise (Active Presenter) ne permet pas de personnaliser l’application, car le code généré est verrouillé et empêche la création d’onglets multiples dans un navigateur.
CONCLUSION : je dois changer de technologie et tout recommencer depuis le début !
Retours en arrière
Et me voilà plongé dans dans une nouvelle série d’expérimentations. Moralement, il m’est très difficile de revoir tout le processus de réalisation de l’application. Ce n’est qu’en décembre 2023, que je réitère sans grand enthousiasme l’expérience WordPress et de Local. Et là, à mon grand étonnement, je constate que Local a évolué de deux versions depuis ma dernière utilisation et que les bugs ont été corrigés. Le partage en Wifi fonctionne (bien que lentement), et les tests se révèlent tous concluants.
Je décide donc, pour la troisième fois, de tout recommencer. Une seule incertitude : moi qui ait toujours acheté mes templates WordPress, je sais que je vais devoir cette fois créer le mien en partant de zéro. Vais-je y arriver ? La réponse est : oui ! Et je vous le dis sans détours, si j’ai résolu tous mes bugs de développement, c’est uniquement grâce à ChatGPT.
Une seule exception : la fiche de personnage dynamique et interactive. Deux amis développeurs (Guillaume et Manu), vis-à-vis desquels je me mets à genoux pour les en remercier, se sont penchés tour à tour sur son développement. Elle aussi est aujourd’hui 100% opérationnelle, entièrement personnalisable pour les créateurs de jeu de rôles qui souhaiteraient à leur tour se prêter à l’exercice de créer et de commercialiser leur univers de jeu sous forme dématérialisée. Idem pour les maisons d’édition.
Une aide de jeu Sci-Fi Cyberpunk, ça te dit ?
Ça tombe bien, je te propose
de la télécharger GRATUITEMENT !
Il s’agit d’une aide de jeu disponible aux formats PDF et POWER POINT en version FREEMIUM, totalisant 54 pages et incluant 34 illustrations d’une résolution 4K.
L’avantage du format POWER POINT est que tu peux facilement t’approprier le contenu, le modifier, de le compléter, etc.
Mais sinon, dedans, il y a quoi ?
Cette version FREMIUM propose différents contenus et descriptions d’une super mégapole, tels que :
— Le quartier des affaires :
- Description.
- CEO de méga corpos.
- Cartels, mafias, bratva, yakusas, triades.
- Le hub Yamamoto.
- Les IA anthropomorphiques de compagnie.
— Les quartiers résidentiels :
- Description
- Implants, prothèses et organes de synthèse.
- Véhicules anti gravité.
— Les quartiers populaires :
- Description.
- Sororité Isis.
— Les bas quartiers :
- Description.
- Les labos clandestins.
- Les psycho-dreamers.
— Les no man’s lands :
- Description.
- Les psycho-cyborgs.
— PNJ et idées d’intrigues :
- Alban et la Katoikoïde : l’amour sur-protecteur d’une créature pour son créateur.
- Anna Svobodova : post doctorante en transe cognitive.
- Hector Papazoglou : aventurier (temporel) de trips psychédéliques.
- William Von der Layen : transporteur Uber de sécurité renforcée assermenté de niveau 1.
Envie d'autres produits gratuits ?
Participe au financement
de tous mes projets sur TIPEEE !
Dans notre société de consommation, l’argent est la condition sine qua non, le flux énergétique alimentant le moteur permettant à un projet tel que Make Me Your Alter Ego (MMYAE) de voir le jour. Les contreparties de ton aide financière, aussi modeste soit-elle, seront multiples :
- Version minimaliste gratuite des règles de jeu de l’application MMYAE.
- Vidéos gratuites de présentation de la technologie sous-jacente à MMYAE.
- Vidéos gratuites d’Actual Play de parties de MMYAE.
- Version complète gratuite de la fiche de PJ interactive de MMYAE.
- Vidéos et articles gratuits sur l’utilisation de la fiche de PJ interactive de MMYAE.
- Vous sélectionnerez les univers/scénarios qui seront associés à MMYAE.
- Une web BD gratuite consacrée à Gigi, mon chat, qui vous parlera de MMYAE.
- Cas d’étude sur le game design où j’endosserai mon rôle de prof de com à la fac.
- Mise en ligne d’illustrations en haute définition de mes JdR (garanties 100% sans IA).
- Proposition de pistes graphiques d’univers de JdR (avec ou sans IA) pour MMYAE.
- Tutoriels gratuits dédiés aux MJ afin d’optimiser l’immersion de leurs joueurs.
Et si tu ne peux pas m'aider, t'inquiète, c'est pas grave !
Car même si tu aurais bien voulu… mais que tu ne peux pas faire grand chose pour m’aider, bin c’est déjà pas si mal.
Les ondes positives, c’est toujours bon à prendre.
Merci à toi (c’est sincère).
Joli travail. Un ideal serait en effet de pouvoir personnaliser une fiche en fonction de ce qu’on a envie en tant que maître de jeu… Par exemple moi, s’il y a plus de 20 compétences je peux plus dans un jeu je décroche tout de suite. Je change les règles de tout ce à quoi je joue pour ramener tout à mes caracs qui sont 14. Beaucoup de MJ bidouillent… Proposer de bidouiller des fiches officielles serait un plus
Hello Ebatbuok13 (chouette pseudo !) !
Vis-à-vis de ton commentaire, je suis heureux de te confirmer que ma fiche de PJ est effectivement à 90% éditable.
Ainsi, toutes les compétences ne bénéficiant pas d’un pourcentage de base, et donc, résultant des trois grands groupes de caractéristiques générales (Mental, Physique et Énergies), peuvent être éditées.
Je ne l’ai pas indiqué dans cet article, mais les créateurs de jeux, ou même les MJ bidouilleurs, pourront s’ils le souhaitent changer le logo de la fiche. En l’occurence dans l’exemple de la fiche de PJ que je donne plus haut, c’est le logo Cthulhu Mythos qui peut être changé. Pour cela, il suffira de cliquer dessus, une fenêtre s’ouvrira pour te demander où se trouve la nouvelle image à charger, et ton logo prendra la place du précédent.
Qu’en penses-tu ?