La #GoTwar en détails

Le site

Le site web réalisé est disponible à l'adresse suivante : gotwar-canalsat.fr. L'opération étant terminée, il ne reflète pas nécessairement ce qu'il était durant l'opération.

Le cahier des charges

Web and Cow a été choisi par l'agence Bigger Than Fiction (avec laquelle nous avions déjà réalisé le projet de jeu concours pour Syfy) pour créer le site web de l'opération #GoTWar. Un grand jeu concours sur fond de bataille entre twittos (= utilisateurs de Twitter) pour faire la promotion de la nouvelle saison de la série phénomène Game of Thrones.

Durant 4 jours, 4 armées en lien avec l'univers de Game of Thrones se sont combattus à coup de hashtags. Il fallait donc d'un côté récupérer et traiter l'ensemble des tweets liés à cet évènement et d'un autre côté mettre toutes ces armées et soldats en animation sur le site dédié de l'opération.

D'un point de vue technique, voici donc ce qui a été pris en charge par Web and Cow :

• Intégration de la charte graphique responsive du site dédié
• Création d'un robot Twitter de collecte de tweets
• Création d'un robot Twitter d'écriture de tweets (mentions)
• Traitement de la masse de tweets pour les transformer en évènements d'animation
• Animations variées sur le site dédié
• Développement du back office de gestion et de suivi des statistiques du jeu
• Export des participants pour réaliser les tirages au sort

Les robots Twitter : récupération des tweets

Tout d'abord, chaque tweet de l'opération devait comporter le hashtag #gotwar ainsi que la mention @canalsat (organisateur de l'opération) pour être comptabilisé. De plus, durant cette opération, 4 armées s'affrontaient : Les Stark, les Lannister, les Baratheon et les Targaryen. Chaque armée possédait donc son hahstag propre : #arméeStark, #arméeLannister, #arméeBaratheon, #arméeTargaryen.

Il nous fallait donc recueillir l'ensemble des tweets contenant #gotwar et @canalsat puis les trier et catégoriser pour déclencher certaines actions :

• Ajout de points à une armée
• Création d'un nouveau soldat (= nouvel utilisateur pour qui c'est le premier tweet)
• Ralliement d'un soldat à une armée
• Changement d'armée d'un soldat

A ces données issues de Twitter s'ajoutaient d'autres données définies en fonction des scénarios des batailles (nombre de points perdus, positionnements des soldats sur la carte des batailles, etc.). L'ensemble de ces données étaient ensuite stockées pour permettre la création des animations (voir partie suivante).

Durant la période du jeu, ce sont + de 63.000 tweets qui ont été récupérés et traités par nos robots.

Ci-dessus, le tweet d'un commandant (= compte d'un influenceur dirigeant une armée)

Les robots Twitter : tweet mentions

Selon le déroulé du jeu, il pouvait arriver que les joueurs reçoivent également des tweets de la part du compte @canalsat. Ces tweets pouvaient être de plusieurs natures :

• Tweet de bienvenue lorsqu'un nouveau joueur rejoignait une bataille
• Tweet indiquant la survie du joueur à la fin de la bataille (a t-il tué un soldat ? Est-il mort ?)
• Tweet de remerciement à la fin du jeu

Durant la période du jeu, ce sont + de 8.500 tweets mentions qui ont été envoyés par nos robots.

Ci-dessus, un gentil tweet à mon égard la part de @canalsat

Les robots Twitter : en savoir plus

Nous avons consacré un article entier à la scénarisation des robots Twitter : GoTwar, les robots Twitter.

Les animations : L'écran de bataille

4 batailles ont eu lieu durant l'opération. Chaque bataille durait chacune 4 heures. Pendant ces 4 heures, les joueurs pouvaient visualiser de façon animée les évolutions de la bataille :

• Front des attaques / défenses entre les armées
• Gain de soldats
• Pertes de soldats
• Evolution du score de chaque armée
• Invitation à soutenir son armée
• Tweets des influenceurs
• Evolutions de la bataille
• Compte à rebours

Au final, il pouvait donc y avoir de nombreux éléments en même temps :

Exemple d'une configuration de bataille

Et il était tout à fait possible de consulter la bataille depuis un smartphone :

Exemple sur un Iphone 6

Durant la période du jeu, ce sont + de 40.000 évènements qui ont été mis en animation (Un ajout de soldat = 1 évènement par exemple)

Les animations : en savoir plus

Comme pour les robots, nous avons consacré un article à la création et à la programmation d'animations en Javascript. Vous pouvez découvrir cet article ici : Les animations de la GoTwar en Javascript.

Les autres écrans

La GoTwar ne se limitait pas à l'écran des batailles. Etant donné que tous les tweets étaient enregistrés, ils nous était possible de retracer l'activité de chaque joueur :

Il était également possible de retrouver le détails de chaque armée, avec des informations notamment sur ses commandants. Et enfin, après chaque bataille, un bilan était disponible avec quelques statistiques clés de la bataille fraîchement terminée :

Le Back Office

Comme pour l'ensemble de nos projets, nous avons mis en place un Back Office permettant de gérer le plus efficacement possible l'ensemble des informations de la GoTwar. De nombreux éléments pouvaient être gérés :

• Informations et détails des armées
• Informations et détails des commandants associés aux armées
• Informations et détails des batailles
• Paramétrage et suivi des statistiques clés de la GoTwar
• Informations sur les participants
• Export des participants selon le règlement du concours
• Curation des tweets à mettre en avant durant les batailles
• Paramétrage des différents éléments de wording de la GoTwar
• Etc.

En conclusion ?

Tout d'abord un grand merci à l'agence Bigger Than Fiction qui nous a choisi pour la réalisation technique de ce projet et avec qui la collaboration s'est (encore une fois) très bien déroulée ! Nous avons même été invité à l'avant première de l'épisode 1 de la saison 5 à Paris ;)

Merci également à Franck Besançon, en charge de la partie graphique, avec qui nous avons collaboré sur ce projet.

---

Pour Web and Cow, le développement de ce dispositif web a été l'occasion de relever de beaux challenges. Nous avons su nous appuyer sur l'expérience de nos précédents projets, notamment en matière d'interactions avec Twitter. Nous avons désormais une expérience conséquente dans l'utilisation de l'API Twitter. Et du côté intégration et animations, nous avons mis en place des techniques très intéressantes pour obtenir ce rendu visuel fluide et animé.

N'hésitez donc pas à nous contacter si vous avez un projet web ambitieux qui nécessite une interface complexe avec des animations travaillées ou une forte interaction avec l'API de Twitter.

Et souvenez-vous... Winter is coming...