Embedded Files
Pour lancer mon 4e semestre en formation MMI, j’ai co-développé, en un mois, un jeu vidéo accessible sur ordinateur et en casque VR. Réalisé en équipe de trois, ce projet propose aux jeunes une manière amusante et immersive d’apprendre l’anglais, en mêlant interactivité, jeu et pédagogie.
Principalement axé sur le front-end, ce projet intègre également une API permettant de gérer dynamiquement les scores des joueurs et les questions du quiz. Une belle opportunité de combiner design d’expérience, développement interactif et apprentissage par le jeu. Ce projet est divisé en 3 livrables qui sont bien sûr tous rédigés en anglais. Ce projet m'a permis de travailler les compétences Exprimer et Développer.
Livrable 1 : PDF idée de jeu et répartition des tâches
(Deadline : 3 février 2025)
Dans ce jeu, le joueur incarne un astronaute en mission sur une planète lointaine. Une menace inattendue se profile : des aliens se sont infiltrés dans l’équipage en prenant l’apparence de véritables membres. Il est en effet impossible de les distinguer visuellement, sauf sur un point : leur maîtrise de l’anglais laisse encore à désirer.
Le joueur doit utiliser son observation linguistique pour identifier les imposteurs en leur posant des questions. Le jeu s’adresse à un jeune public débutant en anglais, et propose une approche pédagogique immersive et ludique. Le joueur se retrouve face à un groupe de PNJs (personnages non jouables) et une question s'affiche sur l'écran. Chaque PNJ dit une réponse différente à la question et le joueur doit trouver lequel dit la bonne réponse. Une partie dure 5 minutes et la difficulté des questions augmente progressivement. Si je joueur trouve la bonne réponse, il gagne des points et s'il choisit une mauvaise réponse il perd une vie. La partie se termine au bout de 5 minutes ou à la perte de toutes les vies.
Pour réaliser cette partie du projet, nous avons eu des cours d'anglais (R401) en parralèle pour avoir le vocabulaire nécessaire et nous avons également eu des cours de Création et Design Intéractif (R405) pour voir le framework AFrame qui sera détaillé dans le livrable suivant. Cette partie du projet m'a permis de valider l'apprentissage critique AC23.04 : Imaginer, écrire et scénariser en vue d’une communication multimédia ou transmédia.
Dans ce jeu, le joueur incarne un astronaute en mission sur une planète lointaine. Une menace inattendue se profile : des aliens se sont infiltrés dans l’équipage en prenant l’apparence de véritables membres. Il est en effet impossible de les distinguer visuellement, sauf sur un point : leur maîtrise de l’anglais laisse encore à désirer.
Le joueur doit utiliser son observation linguistique pour identifier les imposteurs en leur posant des questions. Le jeu s’adresse à un jeune public débutant en anglais, et propose une approche pédagogique immersive et ludique. Le joueur se retrouve face à un groupe de PNJs (personnages non jouables) et une question s'affiche sur l'écran. Chaque PNJ dit une réponse différente à la question et le joueur doit trouver lequel dit la bonne réponse. Une partie dure 5 minutes et la difficulté des questions augmente progressivement. Si je joueur trouve la bonne réponse, il gagne des points et s'il choisit une mauvaise réponse il perd une vie. La partie se termine au bout de 5 minutes ou à la perte de toutes les vies.
Pour réaliser cette partie du projet, nous avons eu des cours d'anglais (R401) en parralèle pour avoir le vocabulaire nécessaire et nous avons également eu des cours de Création et Design Intéractif (R405) pour voir le framework AFrame qui sera détaillé dans le livrable suivant. Cette partie du projet m'a permis de valider l'apprentissage critique AC23.04 : Imaginer, écrire et scénariser en vue d’une communication multimédia ou transmédia.
Livrable 2 : Version 1 du jeu et présentation des avancées et améliorations envisagées
(Deadline : 17 février 2025)
Le livrable 2 présente la première version du jeu, accompagnée de son concept, de son gameplay (déroulement du jeu), de l’avancement des missions, du planning ainsi que de la répartition des tâches.
Ce document a pour objectif de montrer l’organisation du projet : comment les différentes tâches sont planifiées, les délais associés, ainsi que les membres de l’équipe responsables de leur réalisation.
Déroulement du jeu
Le joueur peut cliquer sur "Start" pour jouer avec le son ou "Start muted" pour jouer sans son. Une question s'affiche et entre 2 et 4 astronautes apparaissent juste en-dessous, chacun ayant une réponse à la question. Seulement une des réponses est correcte et le joueur doit cliquer sur la bonne réponse avec le curseur. S'il choisit la bonne réponse, l'astronaute fait un salut et part en marchant, suivi par l'affichage de la question suivante. S'il choisit une mauvaise réponse, l'astronaute choisi devient un alien et s'envole.
Les idées d'améliorations
Afin de préparer une 2e version bien avancée de notre jeu. Nous avons réfléchi à diverses idées d'amélioration. Les idées retenues sont les suivantes :
Enregistrer les scores dans une base de données
D'autres effets sonores
Un PNJ (personnage non jouable) qui aide
Parfois avoir 2 ou plusieurs bonnes réponses
Questions bonus
Système de score plus complexe
Possibilité de choisir une durée limite
Le planning
Cette partie reprend le même principe que le planning du livrable 1. Chaque semaine est détaillée avec les tâches que chaque membre de l'équipe a pour but d'accomplir afin de respecter le délai final.
Pour ma part, je me suis principalement occupé du fonctionnement des typographies la première semaine et ensuite les animations et menu la 2e semaine, suivi par le support VR (réalité virtuelle), hébergement du projet sur Github et début préparation V2 la 3e semaine, et pour finir le développement du landing page et l'hébergement la dernière semaine. Finalement, nosu avons utilisé Guthub dès la première semaine afin d'être sûr que tout le monde puisse développer sa partie sans marcher sur les parties des autres.
Nous avons réussi à accomplir toutes les tâches à temps et nous étions même en avance de temps en temps. Par exemple, notre landing page était finalement prêt la 3e semaine.
Mon rôle dans l'équipe
Dans ce projet, comme résumé en partie dans le planning, j'ai ajouté les typographies sur le projet en utilisant un convertisseur en ligne permettant de convertir les typos dans un format JSON compréhensible par A-Frame.
J'ai également réfléchi aux questions et réponses vu que j'avais des facilités dessus en étant bilingue. J'ai aussi géré les intéractions, comme le fait de pouvoir cliquer sur les PNJ.
Mes camarades eux se sont occupés de la programmation et données côté serveur, et les animations et design côté environnement 3D.
Ce livrable du projet montre comment nous avons procédé pour se répartir les tâches et travailler en équipe. Même si ce projet ne vise pas particulièrement la compétence Entreprendre, il m'a aidé à travailler sur comment me comporter en équipe ainsi qu'intéragir avec les autres dans un contexte professionnel. Il m'a surtout permis de valider l'apprentissage critique AC23.02 : Définir une iconographie (illustrations, photographies, vidéos) et en partie l'AC23.06 : Élaborer et produire des animations, des designs sonores, des effets spéciaux, de la visualisation de données ou de la 3D. C'est également le début de la validation de la compétence AC24.03 : Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs.
Livrable 2.5 : Fonctionnalités surprises et document PDF explicant nos choix
(Deadline : 21 février 2025)
Dans le monde professionnel, il arrive souvent des imprévus comme des changements dans la priorité des projets ou même la modification d'une ou plusieurs tâches. Ce projet n'est pas une exception. Il nous a en effet été demandé peu après le rendu du 2e livrable de commencer à penser à implémenter une nouvelle fonctionnalité pour la V2 de notre jeu : l'enregistrement des scores et la possibilité de redémarrer une nouvelle partie sans avoir à recharger la page. En notre faveur, nous avions déjà prévu d'implémenter l'enregistrement des scoresdocn ce n'était pas trop une surprise pour nous.
Pour cela, nous avons décidé de stocker les scores dans la base de données. Chaque score est associé à un nom de 5 caractères, avec la possibilité de mettre le même nom plmusieurs fois pour permettre à un même joueur de regarder son amélioration.
Nous avons également mis en place un tutoriel intéractif pour permettre aux nouveaux joueurs d'apprendre à jouer au jeu sans s'y perdre. En cliquant sur le bouton "Help", il est redirigé sur une carte où il peut rourner et voir les étapes du jeu : la question et les PNJs ayant les réponses differentes, et les animations qui se passent en cliquant sur une bonne ou mauvaise réponse. A la fin du tuoriel, un bouton "back to home" permet au joueur de revenir sur le menu principal pour jouer.
Pour ma part, j'ai aidé à créer le clavier intéractif et ajouter les bonnes typographies sur les textes. Mes camarades eux se sont occupés de refaire la carte dans un thème de jour et de positionner les éléments aux bons emplacements.
Cette phase du projet m’a appris à faire face à un imprévu pouvant se passer dans le monde professionnel et à ajuster mes priorités pour livrer une version enrichie du projet tout en respectant les délais. Elle participe à la validation des apprentissages critiques AC23.04 : Imaginer, écrire et scénariser en vue d’une communication multimédia ou transmédia, AC23.06 : Élaborer et produire des animations, des designs sonores, des effets spéciaux, de la visualisation de données ou de la 3D et AC24.03 : Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs.
Livrable 3 : Landing page de présentation et version 2 du jeu
(Deadline : 28 février 2025)
Développement de la page
Pour présenter notre projet, nous avons développé un landing page en TailwindCSS. Cette page résume la présentation du jeu, pourquoi nous l'avons créé, comment nous l'avons développé, un lien vers le jeu lui-même et une présentation de l'équipe. Nous l'avons divisé en plusieurs composants afin de pouvoir le développer plus rapidement.
Pour ma part, je me suis occupé de la barre de navigation, l'illustration de l'accueil, la partie "pourquoi?" et la partie "comment?"
Mon rôle plus en détail
Questions
partie questions du fichier SQL
partie réponses du fichier SQL
setup.js qui traite le rendu des questions
Le SQL contient une table Questions où chaque question contient un ID, du texte et le niveau (1, 2 ou 3) et une table Réponses où chaque réponse contient l'ID de la question, du texte et un booléan qui détermine si la réponse est vraie ou fausse (1 pour vrai, 0 pour faux). Ensuite ces questions sont traitées dans le setup.js qui en fait une liste qui sera piochée aléatoirement par le jeu. Nous n'avons bien évidemment pas réfléchi à toutes les 100 questions, les IA comme Copilot et ChatGPT nous ont assez facilité la tâche!
Typographies
Le visuel qu'un fichier JSON de typographie A-Frame donne
Exemple d'utilisation
En utilisant le site MSDF font generator, j'ai converti les fichiers .ttf (format de base d'un fichier de typographie) en fichiers .json reconnaissables par A-Frame. Ensuite, j'ai mis ces fichiers dans le dossier assets du projet et en faisant un "setAtribute" de la propriété "text" et en ajoutant "font: asset/Audiowide-Regular-msdf.json". Ensuite pour adapter la taille du texte c'est possible en utilisant "width" et "align" comme nous le ferions dans du CSS pur, et la position en utilisant l'atribut "position" avec une valeur de pixels en x, y et z. A la fin, "aScene.append(title)" signifie que le titre sera mis dans le scène du projet.
Intéractions
Avant d'implémenter les décors et personnages dans le jeu, j'ai réalisé des tests sur un cube pour regarsder quand il est bien cliqué et ensuite le faire monter dans l'air en cliquant dessus. A l'aide des "console.log", j'ai d'abord affiché dans la console un message quand chaque cube est cliqué ainsi que sa position pour êtree sûr que chaque cube soit cliqué séparément. L'attribut "animation" définit une position ennhauteur au-dessus de la fenêtre pour faire disparaître le cube cliqué. Par la suite, mes coéquipiers ont remplacé le cube par des personnages de la librairie Poly Pizza.
Si vous souhaitez voir le code de notre jeu plus en détail, je vous invite à consulter le projet GitHub. Vous pouvez également consulter notre landing page.
Mode de jeu bonus : Hide & Seek
Ayant fini les fonctions demandées an avance, nous avons créé un mode de jeu bonus: Hide & Seek ("cache cache"). Le joueur doit maintenant lire la question devant lui et regarder autour de lui pour voir tous les astronautes au lieu de regarder tout simplement devant lui. Cette option peut être désactivée en décochant la case "Hide & Seek" sur le menu principal.
Dans le script.js, nous avons ajouté une boucle qui permet de déterminer des positons aléatoires parmi les positions définies par la variable "npcPositionSlots". La boucle permettant de définir une valeur aléatoire pour la variable randomPosition sélectionn une position au hasard dans un tableau de "slots" disponibles et vérifie que l’emplacement choisi n’e soit pas déjà occupé. Si l'emplacement est déjà utilisé, une nouvelle position est calculée tant qu’un endroit libre n’est pas trouvé.
Extrait de script.js
Les astronautes désormais dans des endroits aléatoires sur la carte
Carte agrandie
Ayant encore du temps libre après l'implémentation du mode de jeu hide & seek, nous avons implémenté un mode de jeu où le joueur peut désormais se déplacer sur la carte. et chercher les endroits où les astronautes peuvent se retrouver.
Pour ne pas tout faire au hasard et perdre trop de temps, nous avons décidé de créer cette maquette sur Figma avec une légende pour chaque objet différent. Les astronautes peuvent en effet se retrouver sur les lieux où une étoile est présente. Pour ma part, j'ai développé la partie en haut à droite. Nous avons divisé la carte en trois parties pour avancer dessus plus rapidement chacun de son côté.
Cette maquette n'est pas fournie sur le jeu lui-même: si les joueurs veulent savoir où les points se trouvent dans le jeu ils doivent directement la consulter sur le landing page ou les chercher eux-mêmes.
Vue générale de la carte agrandie
Tous les objets présents sur la carte sont définis dans le composant "a-assets". Ce composant contient tous les personnages, tous les objets de la carte et tous les sons. Tous les assets de la librairie Poly Pizza sont définis dans des composants "a-asset-item", les sons dans des "audio" et les images dans des "img". Faire cela nous permet de déclarer les objets une fois et faire appel à eux au lieu de surcharger le contenu inutilement.
Pour utiliser ces objets dans la carte, nous utilisons des composants "a-entity" en définissant l'ID de l'objet qu'on souhaite utiliser dans la propriété "gltf-model". Le "a-entity" regroupant les composants permet de tout déplacer en une seule fois, signifiant qu'en changeant la position une fois pour bouger plusieurs objets.
La propriété "positoon" permet de changer la position d'un objet, "rotation" permet de le pivoter et "scale" permet de changer sa taille. Toutes ces propriétés jouent sur les axes x, y et z.
Ce livrable ainsi que la partie développement de la V1 font partie de la phase de développement du projet. Ils m'ont permis d'à la fois travailler en équipe sur un projet de développement web ainsi que m'apprendre à faire du développement de jeu web et VR. Je suis très satisfait du résultat que mes coéquipiers et moi avons pu entretenir. J'ai validé l'apprentissage critique AC23.06 : Élaborer et produire des animations, des designs sonores, des effets spéciaux, de la visualisation de données ou de la 3D pour la compétence Exprimer et AC24.03 : Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs pour la compétence Développer.
Bilan personnel
Ce projet m’a permis de mieux comprendre le fonctionnement d’un jeu en réalité virtuelle pour en développer un de 0 à la fois jouable sur ordinateur et dans un asque VR, tout en m’apprenant à répartir les tâches au sein d’une équipe et à gérer mon temps entre les séances de cours et le travail en autonomie. J'ai contribué à ce projet en respectant la stratégie de communication établie, en communiquant en français et en anglais, en produisant du code fonctionnel, sobre et réutilisable et en me conformant aux standards du Web et aux normes d’accessibilité.
Page updated
Google Sites
Report abuse