Professeur 2.0—Semaine 6
Written in October 2020 for my BA in Web and Mobile Design at Haute École Albert Jacquard. Have a preview of my final result.
Previously on “Professeur 2.0” : semaine 1, semaine 2, semaine 3, semaine 4, semaine 5, et semaine 6.
Cette semaine, nous nous attaquons aux dernières spécificités de notre projet. C’est la dernière ligne droite. Pour plus de contexte, nous vous invitons à lire nos précédents articles: comment nous avons imaginé ce projet, nos premières pistes, nos choix décisifs, notre user journey et comment tout a pris forme.
Animation de fin
Nous avons terminé l’animation de fin. Celle qui clôture l’histoire du niveau un. Dans la même lignée que l’animation d’entrée, nous avons utilisé des fichiers Illustrator pour animer sur AfterEffect. Nous n’avons pas eu de difficultés à réaliser cette dernière puisque nous avions déjà été rodés par notre première tentative.
Avec ton aide, Magichouette a enfin réussi à obtenir un cristal arc-en-ciel. Il est soulagé de pouvoir retrouver son chat. Il s’envole de ce pas vers la tour maudite de son ennemi Magibou pour le récupérer. Il peut désormais rentrer sans tracas chez eux.
Contenu des réseaux sociaux
La réalisation du contenu de l’Instagram et du Facebook d’Hocus n’ont pas été une tâche longue à réaliser. Nous avons repris des images des animations du jeu et des images SVG que l’on a préparé pour le jeu. Nous avions globalement assez de contenu pour notre projet que pour le présenter au public.
Fusion des codes
Les animations SVG nous ont donnés du fil à retordre. Le souci a été de lancer les animations au bon moment avec Javascript. C’était quelque peu délicat.
Au départ, nous avions mis les images svg dans une balise <img> et nous les avions appelé avec la source mais cette méthode n’était pas approprié pour faire les animations. Nous avons donc mis les codes svg dans le fichier html et les avons nettoyé de tout ce qui n’était pas nécessaire. Nous avons aussi retravaillé toutes les images pour que les calques soit bien organisés et nommés pour l’emploi. Enfin, nous avons utilisé Waapi, une API native de Javascript (fonctionnel avec tous les moteurs de recherche sauf Internet Explorer) pour animer plus facilement sans keyframes.
Cependant une fois réussi, la fusion des animations avec le code de notre interface était une grosse inquiétude. En effet, toujours à cause du confinement, nous ne pouvions pas travailler ensemble véritablement. Nous nous étions réparti les tâches et nous voilà coincés lors de la mise en commun de nos fichiers.
Petit exercice
Pour ajouter une touche de magie, nous voulions essayer de créer un état hover sur les fioles durant le jeu. Nous avons tenté l’exercice sur codepen, mais le code n’étant pas assez propre et étant donné que nous étions déjà pas mal occupé avec la fusion des codes, nous nous sommes replié. La difficulté de notre code et de la situation actuelle nous aura empêché de réaliser tout ce que nous avions en tête de faire. C’est dommage.
En conclusion cette semaine …
Nous arrivons à la dernière ligne droite. Chaque élément de notre projet Hocus est finalisé. Il nous reste cette fusion des codes qui nous cause de grandes difficultés et la préparation de la présentation finale. Nous sommes impatient de montrer notre projet à d’autre et de le faire tester au public.
