Professeur 2.0 | Semaine 5
Dans les épisodes précédents:
Pour commencer, nous explorons plusieurs idées et nous choisissons de créer un jeu pour apprendre le code dans l’univers de la magie. Par la suite, nous avons nos premières pistes pour l’univers graphique, le storytelling, les technologies et les exercices. La semaine suivante, c’est le moment de faire des choix pour simplifier l’utilisation et la compréhension du jeu, nous réécrivons les exercices et le storytelling. À partir de là nous avons enfin pu créer notre user journey, le design et commencer le code et les animations.
Cette semaine, c’est enfin le moment où tout prend forme.
Code
L’interface de base du jeu est prête, nous pouvons maintenant coder le Javascript lié aux exercices. Le drag and drop nous donne un peu de mal en créant par moments des morceaux d’algorithmes dans l’étagère des instructions. Cette bizarrerie est réglée lors du suivi.
Lorsqu’un exercice se termine, plusieurs animations sont prévues: une explosion s’il y a une erreur ou le mélange des potions si l’algorithme est juste. Nous commençons à coder ces animations et un autre souci se présente: les SVG doivent être retravaillés pour les animer correctement.
À ce moment, nous nous rendons également compte que les couleurs peuvent aussi poser problème pour certaines personnes. Le rouge et l’orange sont fort proches. Nous allons améliorer ce point et ajouter un état hover sur les instructions qui indiquera le nom de la potion ou de l’action, ceci permettra de bien faire la différence entre toutes les instructions.
Audio
Pour les consignes du jeu, nous voulons aider les enfants qui pourraient avoir des difficultés de lecture. Cette semaine, nous enregistrons la voix de Magichouette avec l’aide de Quentin Spitaels. Mille mercis à lui de prêter sa voix à notre maître magicien. Nous choisissons aussi les musiques pour accompagner les vidéos.
Animation sur After Effects
Pour l’intro et l’outro du jeu, nous utilisons des illustrations animées sur After Effects. Elles expliquent l’histoire de la capture du chat de Magichouette et leur retrouvailles. Là aussi le suivi de jeudi nous permet de régler quelques soucis notamment des illustrations pixellisées… Il se passe des choses bizarres chez Hocus!
L’intro avait été animée sans l’enregistrement de l’histoire et a donc dû être adaptée pour coller au rythme de la voix. Pour l’outro nous sommes parti de l’enregistrement pour animer et avoir un meilleur timing.
Site design de présentation
Notre expérience numérique ne serait rien sans enfants pour la tester. Pour faire venir le public au Minimunum, nous créons le site web d’Hocus. Nous expliquons notre projet, l’approche pédagogique et donnons quelques infos pratiques.
Pour le design, nous avons fait quelques tests de couleurs et nous gardons finalement les mêmes polices, les mêmes couleurs de fond et créons des petites animations pour le rendre plus magique. Les flammes des bougies tremblent, les étoiles scintillent, les potions pétillent. Nous espérons que tout ceci donnera envie aux parents d’emmener leurs enfants devant le stand d’Hocus.
Les réseaux sociaux
En plus du site, Magichouette se fait une place sur les réseaux sociaux! Hocus est présent sur Instagram et Facebook.
Organisation
Bien que nous ayons chacun nos missions, nous nous retrouvons régulièrement. Ces réunions nous permettent de nous entraider lorsque quelqu’un rencontre un problème, de montrer l’avancement de chacun et de s’assurer de la cohérence entre le jeu, les vidéos et le site. Il nous reste à finir les animations et le Javascript des exercices, créer des publications pour nos réseaux sociaux, créer le stand, peaufiner le design et le code du site. Et aussi y ajouter notre jeu. Hocus a été conçus pour un musée mais nous aimerions qu’il soit disponible sur notre site pour qu’on puisse y jouer malgré le confinement.
