Space Tour — En Route vers les Étoiles (5/5)

Étude de cas du projet iLab

La dernière ligne droite. Un tableau de bord nettoyé et opérationnel, des User Journeys, un vaisseau prêt à décoller ainsi que la personne adéquate pour nous expliquer la gravité; voici tout ce qui arrive chez SpaceTour.

Après s’être éloigné du trou noir de l’épisode précédent, nous avions relargué les amarres en direction de l’espace (avec un petit interlude sur la planète CRÉAPP).

Un champ “gravito-visuel”

Suite à notre dernière rencontre avec nos professeurs, nos mentors concernant l’exploration dans l’espace mais aussi dans l’exploration des idées, nous avons modifié et remplacé certaines interfaces afin de les rendre plus résilientes et plus accessibles.

Non seulement s’agit-il de la réécriture totale d’une des plus importantes parties de la page de présentation, mais aussi derrière les coulisses, dans la partie jouable de notre expérience.

Concernant la page de présentation, plusieurs idées furent changées au fil du temps et nous n’avions jamais pris le temps de regarder le chemin parcouru jusqu’ici : nos planètes, éléments fondamentaux de notre expérience, avaient reçu, au fil du temps, plusieurs couches de peinture l’une par-dessus l’autre pour maintenant ressembler à des planètes de notre système solaire, mais ça, nous en avions déjà parlé.

L’évolution des design pour les planètes.

Présentation de la nouvelle animation. À noter que la couleur du rayon dépend de la planète.

Le champ gravitationnel, par exemple a été mis à jour : non seulement permet-il plus facilement d’attirer l’œil sur la planète, il exprime de façon plus explicite l’attraction effectuée par la planète sur le vaisseau, ce qui permet aux enfants de comprendre, plus facilement, le principe le plus important de la gravité.

Les planètes ne sont pas les seuls éléments à avoir été modifiés, toute une section entière de la page de présentation s’est vue mise à jour après discussion avec nos professeurs.

La section en question, la partie “équipe” est désormais plus complète, plus résiliente selon la structure qui l’érige, mais aussi plus facilement responsive en fonction de l’appareil utilisé. En outre, cette partie possède désormais toutes nos images, où nous arborons fièrement nos combinaisons d’astronautes (voire spationautes pour certains d’entre nous) maintenant ajustées à nos tailles.

Nous étions dans l’espace, fièr.e.s du chemin parcouru.

Il fut également suggéré au sein du groupe de rajouter la vidéo de présentation dans le cœur de la présentation, mais cette annonce suscita le débat au sein du groupe : tandis que certains voulaient absolument l’ajouter car elle pourrait rajouter une nouvelle dimension sonore ainsi qu’apporter un aperçu direct du jeu en action, d’autres pensaient alors que la vidéo de présentation et le site de présentation n’étaient pas complémentaires, mais supplémentaires, de la même façon que ne va pas voir la bande-annonce d’un film dans la salle même d’un cinéma.

C’est finalement en faveur du deuxième argument que le cœur du groupe penchera, préférant conserver la vidéo pour d’autres utilisations (prochainement sur vos écrans, d’ailleurs).

Des algorithmes avancés

Comme nous l’avons évoqué maintes fois précédemment, la gravité est bel et bien la souche sur laquelle repose l’intégralité de notre jeu, mais pour la première fois, nous pouvons la voir en action.

Chaque planète que notre vaisseau va rencontrer aura son propre champ de gravité qui, si le vaisseau s’en rapproche, l’attirera vers le centre de la planète et viendra mettre fin à la partie.

Comme avec tout projet, il nous fut difficile de prendre un point de vue extérieur et de juger le niveau de difficulté que nous allions proposer : comment les joueurs vont-ils comprendre le principe de l’attraction? Comment allaient-ils gérer le déplacement du vaisseau? Mais avant de pouvoir réfléchir à ce genre de petits “paramètres réglables”, il fallait tout d’abord y parvenir : c’est grâce à l’aide des professeur.e.s que nous trouverons une solution bien plus simple que nous eûmes pensé : les mathématiques traditionnelles.

Quelles étaient les chances pour qu’une librairie Javascript soit entièrement dévouée à l’utilisation des fonctions mathématiques?

Elles étaient probablement très larges, mais nous n’aurions pu le savoir sans l’aide de M. Therasse, qui va nous introduire à Victor.JS, une librairie qui s’occupe principalement de mathématiques à base de vecteurs, ce qui était précisément ce dont nous avions besoin, et qui nous permirent de terminer les concepts de base du jeu que nous allions présenter.

La page d’accueil de victor.js

Prenons cet exemple : nous avions besoin de calculer la distance entre la navette et une planète, calcul que nous n’avions même pas besoin de faire grâce à la fonction “distance()” de cette librairie qui, automatiquement, calcule la norme du vecteur entre ces deux objets, et, par la même occasion, nous fait gagner un temps précieux.

Une fois cette distance déterminée, nous n’avions plus qu’à faire rapprocher la fusée si sa distance passe en dessous d’un certain point de non-retour — c’est-à-dire le rayon qui indique le champ de gravitation de l’astre. Mais comment allions-nous mettre ça en place? Fallait-il faire rapprocher la fusée des planètes, ou l’inverse? Comment corréler la position “cardinale” de la navette par rapport à la planète?

Tant de questions, toutes facilement répondues grâce à, à nouveau, Victor.JS : il fallait alors calculer les angles séparant les deux éléments : d’une part l’angle en rapport à l’axe des abscisses, d’autre part l’angle en rapport à l’axe des ordonnées. La somme de ces deux amplitudes nous permettraient, en fonction de leur signe [positif/négatif], de déterminer la position de la fusée relativement à la planète autour de laquelle elle se déplace (plus précisément, la somme permettait de déterminer le quadrant relatif à la planète), ce qui nous permirent alors de comprendre et d’ajuster le positionnement de la fusée.

Un exemple de la corrélation entre l’angle des abscisses et des ordonnées, qui nous replonge dans ces sombres heures de trigonométrie de l’enseignement secondaire. (Source)

Un guide approprié

Alors que l’idée d’un personnage aidant l’enfant à travers et à naviguer l’espace était présente depuis le début du projet, il était enfin temps que nous nous y attelions, en débutant par caractériser notre personnage — ce dernier, d’ailleurs, n’étant plus un extraterrestre aléatoire, mais bien le seul et l’unique Isaac Newton, comme suggéré par M. Bourgaux.

Avoir une personne du milieu scientifique & physique allait, d’un côté, assurer la rationalité de notre approche (plutôt que d’utiliser un alien, évoquant davantage le monde de la science-fiction et de l’imaginaire, surtout pour les enfants), et d’un autre, permettre aux enfants de découvrir une facette supplémentaire de la gravité : notre point de vue historique sur son fonctionnement.

C’est ici que l’élaboration de Newton va se scinder en deux parties : d’une part, nous nous occuperons de son développement en tant que personnage, c’est-à-dire le ton qu’il emprunte, la voix qu’il utilise ainsi que les phrases qu’il allait citer; d’autre part, son apparence physique et sa position dans le jeu.

Concernant son ton et sa voix, Newton devait remplir plusieurs critères afin d’être “accepté” par les enfants.

• Tout d’abord, il fallait que Newton soit pédagogue et instructif, sans être autoritaire; C’est la raison pour laquelle il ne possède pas de monologues à l’impératif : il n’ordonne pas les enfants, il les conseille, les invitant à participer au jeu et à découvrir les principes de la gravité.
• Deuxièmement, Newton devait être gentil sans pour autant être niait et enfantin : Il fallait, naturellement, faire en sorte que les enfants comprennent le sujet et ses principes, sans pour autant trop qu’il soit vulgarisé et faire penser aux enfants qu’ils soient sous-estimés.
• Enfin, il fallait que notre personnage soit réactif : ses phrases ne devaient pas être ressenties comme des monologues longs et ennuyants, mais plutôt comme un dialogue auquel l’enfant participe, d’une manière ou d’une autre. C’est la raison pour laquelle le physicien devrait réagir aux interactions principales de l’enfant avec le jeu, ce qui pourrait l’aider à découvrir les contrôles et à le guider vers la réussite.

Exemple arbitraire de monologue tenu par notre personnage.

Il ne faudrait pas, toutefois, que Newton soit trop présent, mais qu’il lâche la main de l’enfant et le laisse découvrir le jeu à lui tout seul. C’est pour quoi il nous fallut prendre des précautions quant à ses premières paroles : que se passerait-il si l’enfant écrasait son vaisseau dès le début? Comment faire en sorte que Newton se répète le moins possible? C’est à toutes ces questions que nous allions répondre grâce aux User Journeys, qui viendront par la suite corriger plusieurs problèmes d’accessibilité et d’interaction.

Une fois la personnalité de Newton cernée, nous préparerons un document où sont regroupés toutes les phrases que le personnage était sensé prononcer, qu’il serait plus facile ensuite de convertir en fichier json, directement injecté dans notre code.

À gauche se trouvent les dialogues rédigés dans un fichier texte; à droite leur réintreprétation dans le code (du moins leur première version : une version finale viendra voir le jour par la suite).

Maintenant, il ne nous manquait plus qu’une image de lui, afin de lui associer un visage; et c’est tout juste à temps que Camille arrive avec, non pas une, mais quatre différentes images de Newton, toutes prêtes à être intégrées et employées. C’était peut-être l’occasion rêvée pour nous l’animer, si le temps nous donnait cette opportunité.

Les quatres versions du physicien, côte à côte.

C’est tout naturellement que Newton vient alors remplacer son prédécesseur venu d’une autre planète, ce dernier nous ayant permis d’intégrer le système de dialogue avant le retour à la vie du physicien britannique. Il était donc temps de dire “Au revoir” à notre ami extraterrestre.

Au revoir Amiral Ackbar de la planète DeviantArt. Tu nous aura bien servi.

Les dernières User Journeys

Afin de s’assurer que l’expérience soit complète et ne cause de désagrément lors de son utilisation, nous avions estimé nécessaire de réaliser quelques User Journeys, qui nous permettraient d’éliminer toute erreur involontaire, notamment celles mentionnées plus haut.

Un exemple d’User Journey.

Vous pouvez retrouver le lien vers ces Journeys en cliquant ici.

Aller dans l’espace de façon écologique

Afin d’accueillir les enfants au sein du musée Minimunum comme prévu à l’origine, nous avions élaboré quelques plans de maquettes servant à présenter notre jeu aux enfants.

Cette maquette, représentant le vaisseau que l’enfant pilote, est à l’issue de plusieurs discussions entamées parmi les membres du groupe à ce sujet, mais un problème était commun à tout le monde : comment juger la taille de la maquette, devait-elle faire 3 mètres de haut ou 30 centimètres de large suffisaient-ils? Et aussi, quel matériel allons-nous utiliser?

À ces questions, Guillaume aura la réponse à tout : en deux temps trois mouvements, il va récolter les ressources issues totalement de la récupération afin de produire une maquette: du papier, du carton, de la colle, tout un tas d’objets pour réaliser la version miniature (ou plus grande?) de notre vaisseau, qui pourra accueillir une tablette pour l’expérimentation.

La maquette, sans couleurs pour l’instant. Mais ça va venir!

Ainsi donc, il va interpréter notre vaisseau bidimensionnel en trois dimensions, en rajouter de la profondeur afin d’accueillir le support qui permettra de présenter le site.

Maquette aux stades finaux de son développement.

Une fois la maquette mise en couleur et séchée, il ne restait plus qu’à enregistrer la vidéo et à l’assembler, afin de présenter notre jeu en action, joué par un enfant (qui sera le cousin de Guillaume et qui sera le protagoniste).

Mais en attendant, une question reste sans réponse : combien de glaces Guillaume a-t-il dû manger pour réaliser la maquette?

Les touches finales et remerciements

Voilà, nous sommes vraiment à ça d’atteindre les étoiles : il ne reste plus que les dernières petites altérations et modifications à effectuer et notre navette pourrait décoller vers les étoiles.

C’est l’occasion idéale pour remercier toutes les personnes ayant contribué de loin, de près ou de très près à l’élaboration de ce projetet d’en avoir fait l’expérience ludique, interactive et dynamique qu’il est devenu.

• Merci aux professeur.e.s pour leur aide et pour leurs précieux conseils;
• Merci aux autres membres du groupe pour avoir contribué au développement jusqu’au bout et n’avoir jamais abandonné même dans les moments les plus sombres;
• Merci à toutes ces personnes trouvant des solutions à leurs problèmes sur StackOverflow qui nous permirent de nous désembourber de nos erreurs de code et d’intégrer notre jeu;
• Merci à vous d’avoir lu nos Case Studies.