Projet Wallo COMEM+

Wallo, ou plus récemment Wallobot, est directement issu de Wallogram, une idée originale du collectif RedAgent. Il s’agit de projeter un jeu - sur un écran, une façade ou une surface pas forcément plane - piloté par le smartphone des utilisateurs.

Entre 2013 et 2015, le Media Engineering Institute de la HEIG-VD s’est attaché à développer une plateforme facilitant le déploiment du jeu dans des contextes variés.

Dans l’intervalle Wallo s’est affiché sous diverses formes: mur en relief bardé de caissons, pyramide de cubes, façade d’Hôtel de Ville, simple écran, ou plus récemment, sur trois écrans grand format interconnectés, pour le compte du Littoral Centre, à la Coop d’Allaman.

La flexibilité du jeu et dûe en partie aux technologies exploitées. Dans sa forme la plus basique il met en oeuvre un serveur Node.js, un ordinateur qui servira d’hôte, et au moins un joueur muni d’un smartphone ou une tablette. Pour être transformé en manette de jeu, le device mobile scanne un QR-code ou appelle un simple URL.

Le tout est codé en HTML5 et JavaScript. Cette configuration permet un affichage simple sur écran, mais c’est en y ajoutant une composante de “videomapping” que l’expérience devient intéressante. Il s’agit de capturer préalablement le flux vidéo en provenance de l’hôte, pour le redistribuer en sortie via un logiciel permettant de corriger les déformations issues d’une projection sur une surface non planaire.

Les installations

Octobre 2013 - Salon des Métiers et de la Formation, Beaulieu, Lausanne

Une paroi de 4 x 2.5 mètres est construite pour l’occasion. Neuf caissons de tailles diverses viennent garnir cette paroi pour accueillir l’affichage de vidéos en relation avec les activités de la HEIG-VD. Wallo, le personnage piloté par le smartphone des joueurs, devait sauter sur les caissons pour atteindre sa destination.

L’idée consiste à développer une forme d’immersion impliquant le spectateur au travers de l’univers du jeu, et allant au delà de la simple contemplation d’extraits vidéo.

Tandis que les contrôleurs de jeu manipulaient déjà du HTML5 sur les téléphones, cette première édition du jeu exploitait encore la technologie Flash pour l’affichage de la partie sur l’hôte. C’est Box2DFlashAS3, issu d’un projet open source, qui fournissait le moteur physique (cinématique, gravité, détection de collision, etc.).

Mars 2014 - Portes ouvertes de la HEIG-VD, Centre Saint Roch, Yverdon-les-Bains

Cette édition propose une version très similaire en apparence, mais derrière tout à changé. Flash se meurt au profit du “combo” HTML5, CSS3, Javascript, qui n’est de loin pas la technologie la plus populaire pour le développement de jeux vidéos, mais qui reste flexible, prometteuse et extrêmement accessible. Pas besoin de plug-in, ni de télécharger quoi que ce soit, un simple navigateur suffit. Cette version de Wallo a désormais son propre éditeur de niveau qui simplifie grandement le “mapping” des éléments du jeu, par dessus et autour des espaces tridimensionnels de la paroi.

Les vidéos proposent des extraits de TIA, une campagne Transmedia Storytelling orchestrée par la HEIG-VD et développée par quelques acteurs du département COMEM+.

Septembre 2014 - Journée d’Affaires du CeTT, parc technologique, Yverdon-les-Bains

Pour cette troisième édition, la paroi présente les clips des instituts de la HEIG-VD. Le gameplay est légèrement revisité, différentes plateformes mobiles facilitent le déplacement de Wallo, mais en dehors de cela rien de visible n’a changé. Le logiciel est consolidé pour générer moins d’erreurs et apporter une meilleure fluidité.

Mars 2015 - Portes ouvertes de la HEIG-VD, Centre Saint Roch, Yverdon-les-Bains

Notre Wallo refait une apparition, il s’agit de préparer l’exposition Portrait-Robot de la Maison d’Ailleurs, devant s’inaugurer trois mois plus tard. Cette édition met un accent prononcé sur le videomapping. Les caissons sont décrochés de la paroi et agencés pour former une sorte de pyramide.

Grâce à l’utilisation conjointe de notre éditeur de niveau et d’un logiciel de vidéomapping, le jeu s’affiche sur les facettes d’une construction pyramidale à l’aide de deux projecteurs.

Wallo se déplace sur de nouvelles dimensions, permettant une mécanique de jeu intéressante. Une autre nouveauté non négligeable consiste à différencier les joueurs pour améliorer l’expérience dans un contexte multi-joueurs.  Désormais chaque nouveau smartphone télécharge une manette qui prend la couleur du personnage qu’elle contrôle.

Par ailleurs, aux côtés de la pyramide, se trouve Dude, un nouveau compagnon modélisé en trois dimensions, affiché sur une portion de paroi recyclée, désormais dénuée de caisson.

Dude exploite une interface utilisateur dite « naturelle » - un système de reconnaissance de mouvement basé sur le capteur Kinect de Microsoft - qui permet au visiteur d’incarner un personnage imaginaire, projeté face à lui.

Le système capture les mouvements du spectateur et les affecte en temps réel à l’avatar, qui peut dès lors opérer une sélection en posant les mains sur différents sélecteurs, incarnés par des objets graphiques qui flottent au-dessus de sa tête.

A chaque activation, le logiciel récupère une information sur la sélection opérée, afin par exemple, de modifier l’ambiance générale du dispositif. En d’autres termes, plutôt que d’immerger les joueurs dans un univers quelconque, l’idée consiste à leur laisser le choix. Cette fonctionnalité pose les premiers jalons d’un futur dispositif de vidéomapping interactif.

Juin 2015 - Exposition Portrait-Robot Maison d’Ailleurs, Yverdon-les-Bains

Wallo fait un comeback sous sa forme murale. Cette fois il n’y a que quatre caissons pour accueillir les vidéos, mais la paroi mesure 7 x 2.5 mètres et l’expérience du joueur, ou plutôt du visiteur dans ce contexte, est améliorée. L’exposition exploite la thématique du robot. Wallo est rebaptisé, WalloBot est né.

Pour la première fois dans l’histoire de Wallo, l’installation est conçue avec le gameplay comme priorité. La logique reste celle du simple run & jumpmais les caissons et les plateformes mobiles sont disposés de façon à rendre le jeu plus complexe.

A l’entrée de la salle se trouve Dude, qui peut désormais modifier complètement l’ambiance du jeu. Plus d’une centaine d’extraits vidéo relatifs à la robotique ont été sélectionnés (cf. http://cmc.comem.ch/robots), puis finalement regroupés en cinq catégories (robot animal, robot humanoïde, robot industriel, robot médical et robot musical). Différentes vidéos s’affichent relativement au choix de l’utilisateur et l’entier du décor est modifié en fonction.

En prolongement de la paroi, le visiteur est invité à contrôler un robot fictionnel - Wallobot - avec son téléphone portable qui lui sert de « manette de jeu ».

Chaque joueur contrôle un nouveau robot et « reçoit » une manette assortie à la couleur de son robot. La manette comprend trois boutons (se déplacer sur la gauche ou sur la droite, sauter). Le jeu propose huit couleurs de base mais peut accepter plusieurs dizaines de joueurs. Le but consiste à trouver la sortie tout en déjouant différents pièges.

Les caissons accrochés au mur composent un univers physique en trois dimensions. Les robots peuvent marcher dessus et tomber dès qu’ils s’en écartent. Quelques plateformes fixes ou mobiles projetées permettent de se déplacer d’un point à l’autre, d’autres facilitent le passage mais s’autodétruisent après quelques secondes d’utilisation.

Le challenge est considérable, le dispositif exploite désormais deux ordinateurs, deux projecteurs, et une multitude de logiciels pour gérer les différents flux vidéo.

Octobre 2015 - Destination Futur, Top Event du Littoral Centre, Coop, Allaman.

L’espace disponible rendant l’installation d’une paroi problématique, Wallo a été diffusé sur trois écrans de 190.5 cm de diagonale (75’’). Cette disposition simplifie grandement le déploiement et offre une nouvelle expérience au public. Wallobot est rebaptisé RoboCOOP pour l’occasion. Les vidéos ont disparu, mais Dude était toujours là pour modifier l’ambiance du jeu. Sur la thématique du supermarché, il sélectionne le rayon électronique, l’alimentation, le vestimentaire ou les animaux de compagnie. Certaines plateformes apparaissaient uniquement dans certains thèmes. Une coopération entre les joueurs et la personne qui contrôle Dude permet de réussir le niveau en un temps record. Wallo fait ses premiers pas dans le jeu multijoueur coopératif et asymétrique.

Eclairages technologiques

SocketIO

Ce sont les sockets qui permettent l’utilisation de smartphone comme contrôleur de jeu. Avec elles il devient possible de communiquer entre l’hôte et les joueurs en temps réel ce qui était impossible par le passé, à moins de faire du polling, une technique qui consiste à multiplier les requêtes du client vers le serveur afin de pouvoir bénéficier d’une mise à jour permanente de son contenu. La librairie utilisée est SocketIO, qui en simplifie l’utilisation et gère les différences de comportement entre les navigateurs. Cette technologie ouvre beaucoup de nouvelles possibilités, même si son efficience ne dépend pas que de la qualité de la connexion internet par laquelle elle passe.

Madmapper & Modul8, Resolume Arena

Wallo peut être déployé sur un ordinateur et exploité par un smartphone. Dans ce cas aucun programme de videomapping n’est nécessaire. Par contre, dans la majorité des installations décrites ci-dessus, plusieurs flux vidéos sont mixés et la plupart des surfaces de projection ne sont pas planes. Dans ces cas, les logiciels de vidéomapping, tels que Madmapper et Modul8, ou Resolume Arena  pour les déploiements plus récents, deviennent essentiels. Ils permettent de rogner, de masquer, de déformer, d’éditer, d’aqcuérir et de générer plusieurs flux vidéo, et de les combiner pour la projection.

Syphon

Les installations gèrent simultanément plusieurs sources vidéo de genre différent: simples fichiers vidéos, captures en temps réel et flux de transfertSyphon. Ces derniers relèvent d’une technologie open source qui s’exécute sur MacOS X et qui permet de partager des vidéos en temps réel entre programmes. Dans le cas de la Maison d’Ailleurs, quatre flux vidéos sont chargés par Modul8, un flux vient d’une carte de capture connectée l’ordinateur qui pilote l’avatar et finalement, un flux Syphon vient du navigateur hébergeant le jeu Wallo. Toutes ces sources sont ensuite placées dans une composition envoyée en Syphon à Madmapper qui gère les déformations et les superpositions d’images, avant de balancer une partie du flux final à chacun des deux projecteurs qui couvrent la paroi.

Collaborateurs impliqués:

  • Justine Rieder - vidéomapping, infographie
  • Sandrine Divorne - scénographie, conception graphique
  • Gisèle Alvez - assistante de production
  • Manon Ottonin - montage vidéo
  • François-Xavier Aeberhard - conception, gameplay
  • Jérome Freyre, Julien Le Glaunec - programmation Kinect
  • Adrien Bigler - développement backend
  • Raphaël Baumann - programmation web, cinématique, infrastructure
  • Gwenaël Magnenat - architecture système, infrastructure
  • Maxence Laurent - montage
  • Jean-Marc Seydoux - coproduction
  • Daniel Rappo - coordination