SpaceTour — L’horizon du trou noir 4/5

Étude de cas du projet iLab

Disque d’accrétion du trou noir M87*, photographié par l’Event Horizon Téléscope en 2017 (Source : https://fr.wikipedia.org/wiki/Trou_noir#/media/Fichier:Black_hole_-_Messier_87_crop_max_res.jpg )

« Mon message, ici et maintenant, c’est que les trous noirs ne sont pas aussi noirs qu’on les dépeint. Ce ne sont pas les prisons éternelles qu’on a décrites. Des choses peuvent sortir d’un trou noir, dans notre Univers et peut-être dans d’autres. Donc, si vous sentez que vous êtes dans un trou noir, ne perdez pas espoir : il y a un moyen d’en sortir ! »

Cette citation de Stephen Hawking représente peut-être notre point de vue actuel sur le projet : après les nombreuses périodes sombres où nous errions sans but parmi les astres, nous pensions enfin avoir trouvé notre objectif, et que, de là, nous pourrions construire une base résiliente qui nous permettrait d’aller de l’avant. Mais il n’en était rien.

Une trajectoire mal alignée

Grâce aux nombreuses remarques exprimées par nos professeurs, nous comprîmes alors que, malgré ses couleurs attrayantes et son aspect ludique, notre projet “SpaceTour” ne possédait que faiblement un aspect pédagogique, qui permettrait aux enfants de découvrir la gravité et principalement de la comprendre.

Cet aspect devait, cependant, représenter le cœur même de notre projet, à l’instar de la singularité d’un trou noir, et que nous devions tout construire à partir de là. Mais comment prendre ce que nous avions déjà créé, l’univers que nous avions érigé, et le transposer à cette approche fondamentalement différente ?

Notre première idée pour associer ludique et pédagogique est simplement d’injecter le contenu dans le jeu même, à intervalles réguliers, entre deux phases de gameplay. Cela permettrait aux enfants d’apprendre la théorie sur la gravité et les astres qui orbitent les uns autour des autres, pour directement la mettre en pratique dans le jeu en lui-même.

Stylisation des planètes

Il est évident que pour des raisons de droits d’auteurs, nous ne pouvions pas récupérer des images de planètes existantes. De plus, nous voulions des planètes colorées pour que ce soit plus léger et agréable à regarder pour les enfants.

Images de Saturne / Jupiter / Terre

Notre choix s’est porté sur des couleurs vive et des dégradés. Après avoir analysé plusieurs photos des planètes de notre système solaire, nous avons repris les grandes lignes et caractéristiques de celle-ci, comme les anneaux de Saturne, l’œil de Jupiter ou encore les couleurs de la Terre. Grâce à cela, elles restent reconnaissables par tous.

Nos illustrations de Saturne / Jupiter / Terre

Personnification de l’espace

Grâce aux vidéos que nous avions regardées au début du projet, expliquant plusieurs méthodes pour construire des interfaces qui captivent l’attention des enfants et qui les aident à apprendre et/ou à comprendre certains aspects d’un sujet donné, l’un des éléments phares était de “mettre un visage” quand cela était possible. L’enfant sera plus attentif si la voix/le texte qui lui parle a une forme, plus particulièrement la forme d’un visage humanoïde.

C’est la raison pour laquelle nous avons décidé d’inviter un extraterrestre pour expliquer aux enfants les notions de la gravité dans l’espace. Cet extraterrestre aurait, bien sûr, une tête différente à celles des humains (c’est ici que s’inscrit notre créativité), mais conserverait néanmoins toutes les facettes d’un visage pour qu’il soit suffisamment humain et, idéalement, permettre un effet de paréidolie — ce qui permettrait aux enfants de reconnaître un visage et de le remémorer.

Ce personnage, sans nom pour l’instant, viendrait, complémentairement aux notions sur la gravité, lui expliquer comment le jeu se joue et comment survivre dans son petit vaisseau et de le faire interagir avec les actions du joueur. Nous pensons que cela permettrait aux enfants de respirer entre les différentes salves de contenu mais aussi de leur faire comprendre que l’extraterrestre n’est pas là que pour lui apprendre des choses, mais aussi pour l’aider à jouer au jeu — et par extension, apprendre différemment.

Voici une première ébauche de discussion avec notre petit alien. Une autre idée pourrait être de changer le cadre de couleur en fonction de ce qu’il raconter (par exemple, bleu pour contenu, rouge pour astuces de jeu). À noter que le personnage n’est pas nôtre, et qu’il aura une toute autre forme par la suite. (Source : https://www.deviantart.com/d-mac/art/Star-Wars-Aliens-429619506)

Le code et les difficultés qui l’accompagnent

Une fois que le concept du jeu était clair dans nos têtes, il fallait qu’on s’attarde sur le code. Nous devions rendre différentes choses fonctionnelles. La priorité était de faire en sorte que le vaisseau soit pilotable. Après s’être renseigné via plusieurs articles ou vidéos, on parvenait à faire bouger le vaisseau via des écouteurs d’événements. Cependant le déplacement était très peu fluide et réactif et rappelait trop les vieux jeux arcades comme Space Invaders ou Pacman. Le résultat était donc loin d’être satisfaisant. On s’est donc dirigé vers une autre option : utiliser un canvas. Ce dernier est un composant permettant d’effectuer des rendus dynamiques d’images en HTML. C’est exactement ce dont nous avions besoin afin de rendre notre jeu plus smooth.

De la physique dans le code

Concernant le développement même de notre jeu, une autre remarque de nos professeurs attira notre attention : utiliser des véritables équations mathématiques afin de mettre en œuvre un moteur physique authentique et fonctionnel.

Non seulement serait-il idéal puisqu’il représenterait le plus fidèlement possible les lois de la gravité en action, mais cela offrirait aussi une plus grande gamme d’interactions possibles avec les différents astres sans que nous ayons à les développer nous-même (en guise d’exemple assez brut, le système de collision viendrait de paire avec le système des champs gravitationnels si nous venions à utiliser les vraies équations, tandis que nous aurions à les réaliser individuellement si nous restions avec notre approche actuelle).

Voici un exemple d’équations physiques mises en oeuvre pour donner une vraisemblance de collision et de gravitation (source : https://towardsdatascience.com/implementing-2d-physics-in-javascript-860a7b152785)

Le problème avec cette approche, c’est que cela nous demanderait de repartir de zéro, à nouveau, et de réécrire le code en entier après des heures d’acharnement qui commencèrent à réaliser un produit fonctionnel.

À voir si nous partons sur un nouveau départ ou non.

Le tableau de bord du vaisseau

Concernant notre application physique, l’une des idées que nous avions était d’opter pour un ensemble de joysticks différents, destinés à deux joueurs : l’un dirigerait le déplacement sur l’axe des abscisses, et l’autre, permettrait de contrôler la vitesse de déplacement.

Cela offrirait aux enfants, non pas une, mais deux expériences différentes, ce qui pourrait accentuer la replay value de notre jeu, c’est-à-dire la quantité de temps qu’ils puissent jouer à notre jeu sans que cela devienne lassant ou ennuyant.

Un logo spatial

SpaceTour c’est bien, avec un visuel c’est mieux.

C’est ainsi que la construction d’un logo s’imposa !

À l’aide des idées du projet, des visuels produits pour le design du site et surtout du vaisseau choisi, nous sommes partis sur plusieurs pistes de logos.

Quelques pistes de logos

Il était important qu’un vaisseau apparaisse dans ce pictogramme afin de garder l’idée que c’est lui qui nous guide sur le site et dans l’espace à travers le jeu !

Après discussion, il nous paraissait important que les planètes restent au milieu du sujet également et quoi de mieux que de rajouter des anneaux autour d’elle pour garder cet esprit de gravité.

Le logo choisi

Dans le but de garder les couleurs de l’espace, nous y avons inséré un dégradé de bleu.

Avec notre vaisseau final bien sûr, voici à quoi nous en sommes arrivés.

Le logo final

Quelques petits réglages en plus, notre typo “Work Sans” pour accompagner SpaceTour et le tour était joué, nous avions désormais notre visuel.

Premières images

«That’s one small step for man, on giant leap for mankind.»

Neil Armstrong

Pour décoller vers les étoiles, c’est mieux avec une tenue de cosmonaute non ?

C’est donc pour cela que nous avons enfilé la première tenue qui nous est venue à la main, même si malheureusement tout le monde n’a pas encore trouvé une tenue à sa taille.

AstronautesEnDevenir.jpg

Testeur de cookies & jeune apprenti en infographie

Testeur de cookies & jeune apprenti en infographie