Devfest Nantes 2022, le making of

2 novembre 20227 novembre 2022 Guillaume Membré

Chaque année pour le Devfest Nantes, c’est l’effervescence : chaque stand rivalise d’idées pour attirer les nombreux visiteurs.

Pour les 10 ans du Devfest Nantes, le thème était Jules Verne. Nous avions donc les associations suivantes :

JULES VERNE
- Aventures extraordinaires / Science Fiction
- Visionnaire / Inventeur / Anticipation
- Epoque Victorienne ⇢ Steampunk

NANTES
- Ville de naissance de Jules Verne
- Les Machines de l’Île
- Ville du Devfest

L’enjeu était de trouver une scénarisation cohérente pour le stand. Avec une thématique aussi vaste et inspirante que celle de l’univers de Jules Verne, nos cerveaux ont carburé et les idées ont fusées : nous avons pensé faire un bras de poulpe articulé, une montgolfière ou encore un sous-marin grandeur nature… Notre pragmatisme quant aux contraintes de temps nous a vite rattrapés.

Scénarisation du stand

Le stand a été mis en scène autour des idées suivantes :

Nous sommes dans le bureau de Jules Verne, célèbre inventeur et geek de surcroît, qui, en 10 ans, n’a jamais raté une édition du Devfest ! Le pattern du mur fait penser aux papiers peints victoriens tandis que la signalétique Zenika est inspirée des tuyauteries apparentes en cuivre.
Cet espace est le lieu de toutes les réflexions et expérimentations de Jules Verne. On y trouve d’anciennes affiches du Devfest et de ses inventions.
Sa dernière vision ? Un jeu interactif et collaboratif que certains nommeront plus tard “jeu vidéo” !

Affiches générées à partir de l’IA Midjourney

La signalétique Zenika

Elle est réalisée à partir de tuyaux PVC recouverts de peinture couleur cuivre pulvérisée à la bombe.

Tous les supports, les pieds ainsi que le manomètre ont été spécifiquement modélisés et imprimés en 3D avec du filament PLA couleur bronze.

Un circuit de leds est collé derrière les tuyaux.

L’ensemble a été monté sur l’arrière du stand avec 4 alimentations de leds indépendantes.

Le jeu N1870

Nous avons eu l’idée de faire un jeu vidéo collaboratif qui permettrait à plusieurs personnes de l’agence de travailler ensemble avec une base de compétences communes.

Dans un sous-marin, il faut pouvoir regarder dans un périscope pour observer l’environnement et se coordonner avec le pilote qui le dirige. Ce principe de jeu à l’aveugle est intéressant sur un stand ; le navigateur doit constamment guider le conducteur pour manœuvrer et cela nécessite une bonne communication indispensable pour réussir à faire un maximum de points. Toute ressemblance avec le MobProgramming n’est pas complètement fortuite 😉

C’est parti pour développer un jeu constitué d’un panneau de commande et d’un écran séparés. Deux groupes de travail se montent alors pour :

la construction d’un décor avec un panneau de commande,
le développement du jeu.

Comme dans un développement traditionnel, la question de la dépendance entre le matériel et le logiciel s’est vite posée : comment coder le jeu sans le panneau de commande ?

Nous sommes partis sur l’idée que le panneau de commande fonctionnerait comme un clavier en envoyant simplement des signaux de touches codés à un ordinateur.

Les développeurs du jeu n’ont plus qu’à utiliser ces touches pour faire une action sur le jeu.

Le principe du jeu doit rester simple : il faut déplacer un sous-marin dans un monde abyssal où l’on peut trouver des monstres qui nous empêchent d’avancer. Le but est d’aller le plus loin possible sans être ralenti par les rochers ou les créatures. Une lumière permet alors de leur faire peur et de les éloigner de notre chemin.

Aspect graphique du jeu : développement

Une équipe se lance dans le développement du jeu, nous validons la bibliothèque Phaser largement connue et utilisée pour développer des jeux en javascript.

Cette bibliothèque offre tout ce dont on a besoin pour développer un jeu, la boucle d’événement, la gestion des entrées (touches du clavier), l’affichage, l’animation de sprites, la physique et bien plus encore…

A l’issue d’une première séance de travail de 2 heures, notre première version du jeu sort, arborant fièrement l’affichage d’un sprite et son déplacement dans l’écran :

À ce stade l’animation n’était pas encore prise en charge et le sprite constitué de toutes ses images du modèle était directement affiché.

Mais le côté graphique du jeu évolue rapidement, voici une première version monochrome du sous marin :

Puis une version plus aboutie :

Le décor a été ajouté au jeu, le sous-marin se déplace désormais verticalement et horizontalement.

Dans un premier temps, le décor a été généré à partir de l’IA Midjourney puis modifié manuellement.

Ci dessus, 4 variantes générées par le bot Midjourney et ci dessous, la déclinaison pour le jeu :

Il nous faut maintenant ajouter des ennemis et surtout gérer la collision entre tous ces éléments.

Phaser propose un moteur de physique simple nommé Arcade qui utilise des rectangles ou des ronds pour gérer la collision mais nous arrivons rapidement à la limite de ce modèle. En effet, nous souhaitons provoquer des collisions du sous-marin avec les rochers du premier plan qui ne sont pas uniformes, nous cherchons donc un moteur physique qui nous autorise l’utilisation de formes géométriques plus complexes. C’est le moteur physique Matter qui nous apportera notre salut, ajoutant au passage quelques difficultés supplémentaires.

La mise au point du jeu se focalise ensuite sur les trajectoires de fuites des monstres : la copie d’écran ci-dessous illustre nos péripéties…

Vient enfin le moment de d’ajouter un tutoriel en début de partie pour explique aux participants les différentes touches utilisées :

Pour parfaire le tout, l’écran de score est ajouté en reprenant le visuel de la pieuvre des stickers et des t-shirts :

Aspect physique du jeu : Construction du décor

Un collègue avait acheté un vieux panneau de commande dans une brocante et il nous a proposé de l’utiliser :

C’est parti pour essayer de raccorder ces boutons avec un Arduino et ainsi le connecter à l’ordinateur !

Du côté du boîtier, nous optons pour la réutilisation d’une structure en bois servant jadis de “phone box” à l’agence de Nantes pour y loger l’ordinateur et le boîtier de commande. Voici une première modélisation de ce que cela devrait donner :

Cela évolue rapidement vers une autre version. Intégrant un besoin d’accessibilité, elle permettra à une personne en fauteuil roulant de pouvoir jouer d’un côté ou de l’autre.

Finalement, tout restera en dehors du boîtier avec l’écran inversé pour être visible lorsqu’une personne est assise.

Le panneau de commande étant utilisé sur une machine à outil il y a bien longtemps, les boutons étaient fatigués.

Certains ont dû être démontés pour nettoyer les contacts avec du papier de verre, pour les 3 jaunes, les contacteurs ont été remplacés par des switchs de clavier mécanique car les pièces d’origine étaient trop usées.

Un câblage matriciel a été réalisé afin de brancher tous les boutons sur l’Arduino Pro Micro. Ce modèle permet de prendre en charge matériellement la communication USB. La bibliothèque QMK a été utilisée pour associer l’appui sur un bouton avec une lettre de clavier.

Du côté de la borne, nous avons joué avec la scie circulaire et la visseuse pour donner la forme finale

Nous l’avons ensuite recouverte de papier peint puis nous lui avons plusieurs leds pour renforcer l’effet de vieille machine soit sous forme d’escargot de mer, soit par de simples boutons. Un microcontrôleur de la famille des STM32 (super Arduino) a été utilisé pour faire clignoter les leds.

Admirez le magnifique “cable management”, digne de certains points de mutualisation de fibres optiques 😉

Un vieil écran 4:3 dégoté sur un site d’objets d’occasions en ligne a été trouvé puis installé avec un support en bois.

Le hublot a été modélisé spécifiquement puis imprimé en 3D avec le même filament que le manomètre de la signalétique. L’impression a été découpée en 5 pièces pour que chacune loge sur le plateau de l’imprimante et que les effets de diffraction de lumière les fassent ressortir.

Enfin, pour aller jusqu’au bout de l’idée, un vieux combiné de téléphone a été ajouté et peint en rouge puis installé à côté du panneau de commandes.

Le jour J

Nous sommes fiers d’avoir réussi à développer un jeu qui a plu sur le stand de Zenika :

Avec des gagnants qui nous ont bluffés et dont la communication et la coordination leur ont permis d’arriver au score de 6 054 points le premier jour :