Danse tes vacances pour Cuba
J’ai été mandaté par l’équipe de Dpt pour la programmation front-end d’un site concours pour Transat. Le mandat était d’animer un avatar selon l’activité détecté par la caméra de l’utilisateur. De plus, l’avatar devait être personnalisable selon 10 critères, tels que; sexe, couleur de peau, habillement, cheveux et couleurs, nez, soulier, lunette, chapeau et accessoires. En tout, le joueur avait plus de 50 000 possibilités de personnalisations pour son avatar.
Plusieurs défis technologiques se dressaient devant nous.
Premièrement, la détection de mouvement via la webcam comportait un bon défi de programmation. N’ayant aucune expérience dans ce type de programmation, j’ai fait des plusieurs recherches et expérimentations afin d’en arriver à une solution répondant aux besoins spécifiques du projet. De plus, l’accès à la caméra via le navigateur n’est pas supporter sur toute les plateformes (source: caniuse.com). Nous devions donc trouver une alternative pour les appareils et ordinateurs ne supportant pas cette fonctionnalité. Nous avons opté pour une solution « tap-to-play » pour appareil mobile, et une solution interagissant avec le clavier pour ordinateur. Ses scénarios nous ont permis d’offrir une expérience alternative et de couvrir l’ensemble des navigateurs que nous devions supporter pour le projet.
Ensuite, nous devions gérer une vaste game d’animations et de graphismes sur plusieurs dimensions d’écrans. Le plus grand défis étaient d’animer le plus grand nombre éléments visuels, sans affecter la fluidité du jeu. Après quelques recherches et recommandations, j’ai trouvé le framework Pixi.js. Cette plateforme permet d’afficher et d’animer des éléments visuels via WebGL ou Canvas, selon le support du navigateur. Cependant, Pixi.js ne possédait pas l’ensemble des fonctionnalités dont nous avions grandement besoin. J’ai donc continuer mes recherches et je suis tombé sur Phaser.io. Une plateforme de développement de jeu HTML5 utilisant Pixi.js pour l’affichage des éléments graphique du jeu. J’ai fait quelques expérimentations avec Phaser.io et c’était un match parfait. Tout ce dont j’avais besoin y était.
La suite était d’assembler le projet dans Phaser.io et de peaufiner les moindres détails jusqu’à l’obtention du résultat désiré. Bien sûr, nous avons eu quelques problèmes en cours de route, mais aucun qui mettaient en péril la livraison du projet.
Le projet a été réalisé en 2 mois. L’équipe de Dpt (@nsroy, @heyRaed, Julien Robitaille, @guitouxx) a fait un travail incroyable. Je suis très fier du résultat final.
Le site a été lancé le 11 février 2016 et la réponse des utilisateurs fût incroyable. Plus de 10 000 inscriptions en seulement 3 jours de concours. Il faut dire que le prix était très alléchant. Un voyage pour Cuba, tout frais payé, pour vous et un(e) invité(e). Chapeau à DentsuBos et Transat pour ce beau concept.
Fonctionnalités
Internationalisation (i18n)
Nous avons bâtit une solution intelligente pour afficher le contenu de chaque page en multiple langue, sans compromettre la gestion du contenu.
Optimisé pour mobile et tablette
L'affichage et l'expérience utilisateur ont été soigneusement réfléchis et exécutés afin de maximiser l'expérience usager sur appareil mobile et tablette.
WebGL / Canvas
Affichage et animations via Canvas avec compatibilité WebGL pour les navigateurs compatibles.