Donner de l'intérêt à une campagne de sensibilisation grâce à DODD

Mission

Voir le projet

Un projet pour de l'événementiel

Dernier grand défi de mon année de Bachelor 3 chez Apperture, le projet DODD (Dans l’Oeil Du Diabète) vient d’arriver dans les mains de l’équipe de graphiste 2D et des développeurs Unity. Nos porteurs de projets 3Primes nous ont envoyé le brief client, et nous avons pour mission de concevoir un jeu interactif sur la technologie Dooh It Smart pour animer un stand sur le congrès 2018 de la SFO (Société Française d'Ophtalmologie). Le but de cette action s’inscrit dans une campagne de communication pour inciter les patients atteints de diabète a se faire dépister contre les maladies oculaires. Pour cela il leur est recommandé de réaliser un fond d’oeil tous les deux ans. Afin de mettre en place un spot publicitaire diffusé à la télévision sur les chaine du groupe France Télévision, le client veut mettre en place une campagne de don fictive et morale. Chaque partie jouée et gagnée, rapporte 4 à 8 diffusion en plus pour la campagne. Le tout étant d’inciter les personnes présentent sur la SFO à s’amuser pour une bonne action.

Concernant la partie technique, nous avons décidé d’utiliser et de développer pour la première fois en condition réelle un jeu sous Dooh It Smart. Cette technologie crée par Apperture permet de connecter plusieurs appareils à une interface en passant par des serveurs externes. En résumé, un, dix, cent, ou mille joueurs peuvent interagir depuis leurs appareils pour jouer ensemble sur un même écran. Il faut donc pour cela une interface utilisateur développée en code pour le web, et un écran de jeu développé sous Unity.

Le jeu qu’avait imaginé 3Primes était très simple dans l’interaction mais pouvait amuser énormément de joueurs puisqu’au moment de rejoindre la partie, les joueurs étaient divisés aléatoirement en 2 équipes, et devaient s’affronter lors d’une course de montgolfière. L’équipe gagnante était celle qui atteignait le point culminant le plus rapidement possible. Concernant l’interface utilisateur, les joueurs devaient appuyer le plus vite sur leur écran pour faire monter la chaleur dans le brûleur de la montgolfière et ainsi, faire grimper la montgolfière de leur équipe plus rapidement.

Les développeurs 3D se sont donc chargés d’intégrer l’interface conçue par les graphistes 2D sous Unity et de créer un serveur afin de relier les utilisateurs et l’écran de jeu principal. De mon côté je devais créer et intégrer l’interface utilisateur qui était composée d’un bouton, d’une sprite d’une flamme et d’un overlay sur le bouton qui grandissaient si on appuyait rapidement sur l’écran, un brûleur, un fond, et plusieurs écrans. Un écran d’accueil, un écran de connexion, et un écran de fin. De plus, les couleurs de l’interface devaient changer en fonction de l’équipe à laquelle appartenait le joueur.

Concernant la partie utilisateur, j’ai donc appris à me servir d’une sprite sheet. Ce nom désigne une grande image divisée en un tableau de plusieurs zones qui comporte chacune un objet ou une image transparent. L’intérêt de cette image et de pouvoir se déplacer rapidement zone par zone pour créer l’effet de mouvement. Il est bien plus utile d’intégrer une sprite sheet plutôt qu’un gif pour répondre à une problématique d’optimisation. Comme notre interface est destinée à être chargée sur des mobiles, nous devons tenir compte du temps de chargement de l’interface utilisateur.

Nous avons donc demandé à un Graphiste 3D de créer l’animation d’une flamme sortant d’un brûleur. Il l’a réalisée et a ensuite extrait chaque frame (une image par seconde) qui compose son animation pour les répartir dans les différentes zones de la sprite sheet. Je l’ai ensuite intégrée, et grâce à la librairie jQuery.animateSprite, j’ai pu définir une logique afin de me déplacer de sprite en sprite en fonction du nombre d’appuis par seconde par l’utilisateur sur le bouton principal.

Parallèlement j’ai intégré un écran de fin plus classique pour rediriger l’utilisateur sur le site web de l’oeil du diabète. Après plusieurs test utilisateurs en interne, nous nous sommes rendu compte que les joueurs ne savaient pas s’ils étaient réellement connectés au jeu lors du premier chargement. Nous avons donc ajouté un écran neutre, pour signifier à l’utilisateur qu’il n’est pas entrain de jouer et lui recommander d’actualiser la page ou d’attendre quelques secondes. Concernant le responsive, je me suis chargé de vérifier que l’interface était calée sur l’ensemble des tailles de mobiles et de résolutions. L’utilisateur ne peut pas jouer sur écran en paysage, nous avons donc aussi ajouté un écran qui bloque l'interaction et qui incite le joueur à remettre son téléphone en mode portrait. Pour finir j’ai travaillé avec les autres développeurs grâce à un logiciel interne fonctionnant sous le même principe que GitHub et j’ai mis en production l’ensemble de mes fichiers sur un serveur web qu’avaient créé les développeurs au début du projet.

Au final, ce jeu a remporté le succès espéré puisque plus de 600 participants sont venus se défier sur les 291 parties lancées, et ils ont rapporté au total 1552 spots de pub pour cette campagne de prévention. Les retours étaient très positifs, et les joueurs ont adoré se défier en équipe dans ce jeu très simple mais distrayant. C’est donc une réussite pour Apperture et un projet concret qui peut justifier l’utilisation de la technologie Dooh It Smart pour les futurs clients. De mon côté, j’ai appris énormément de nouvelles compétences dans l’utilisation de sprite sheet, la compréhension et la maîtrise de la logique du jquery.

Voir le projet