Mat Groves, associé technique de Goodboy, discute du plaisir de faire des jeux HTML5 pour navigateurs.

 

Q. Bienvenue, Goodboy. Vous êtes spécialistes en HTML5 et faites surtout des jeux. Parlez-nous un peu de vous…
Goodboy est une jeune agence qui a vu le jour car nous voulions à l’origine inverser la tendance de la pénurie de contenus web interactifs ou ludiques qui a suivi le déclin de Flash. À l’époque, Internet débordait de couleurs, d’interactivité et de richesse d’expression. Pendant une courte période, il semblait que nous ne pouvions rien faire d’interactif ou d’amusant si nous voulions toucher des utilisateurs mobiles car les iPhone n’intégraient pas Flash.Nous manipulions déjà un peu le HTML5 et savions qu’il était suffisamment puissant pour pouvoir créer un contenu épatant, que ce soit pour raconter une histoire, faire un jeu, ou augmenter l’intérêt envers une marque. Aujourd’hui nous faisons des trucs super, et qui fonctionnent sur toutes les plateformes.

Q. « Nous faisons un seul produit qui fonctionne partout » est le slogan de Goodboy. Qu’est-ce que cela veut dire et est-ce difficile à appliquer ?
Chez Goodboy, nous avons développé des outils et un workflow pour que notre équipe puisse se concentrer sur la création d’un bon contenu et ne pas rester bloquée sur des problèmes d’appareils.
Pour nous, il y a trois difficultés principales : les particularités et incohérences des navigateurs, la performance atteignable (de l’ordinateur de bureau aux capacités monstrueuses à l’Android de votre grand-mère), et la résolution/le design fluide.
Pour lutter contre les particularités des navigateurs, nous créons la majorité de notre contenu en utilisant un seul élément canvas. Quand nous utilisons le moteur open source Pixi.js comme base, nous savons dès le départ que nous pourrons tout prendre en charge. Nous résolvons le problème de la performance atteignable par l’appareil en ajoutant des couches à notre contenu. Tout d’abord, nous avons l’expérience centrale qui reste la même quel que soit la plateforme ou l’appareil concerné. Ensuite nous ajoutons la couche visuelle et la couche esthétique : c’est bien quand on les a, mais elles ne sont pas indispensables. Cela veut dire que sur un appareil puissant nous pouvons proposer la mégaversion WebGL et, au fur et à mesure que l’appareil est de moins en moins performant, nous pouvons enlever ces couches jusqu’à ce que nous atteignions un bon équilibre.
La résolution va de pair avec un design fluide, et il peut être extrêmement compliqué de créer un design tenant compte de toutes les tailles d’écran possibles ! Pour les jeux, nous faisons le design d’abord pour le mobile (Retina) car les éléments sont les mêmes que sur ordinateur. Il suffit de garder en tête que l’on a réduit l’échelle, et de ne pas oublier que les boutons, sur lesquels appuieront de gros doigts, doivent être deux fois plus grands que ceux qu’on crée pour
les petits pointeurs de souris.

Q. À part le HTML5, quelles autres technologies utilisez-vous ?
Adobe CC en grande partie. Nous utilisons After Effects pour créer des animations et éditer des vidéos, Maya pour les modèles et les animations 3D à faire ensuite passer à Pixi, Texture Packer pour les feuilles de sprites, et Flash, qui est très pratique pour préparer les niveaux à ensuite sortir en JSON.
Comme pour n’importe quelle technologie, la vraie réponse ne se trouve pas dans les outils utilisés mais dans la manière dont nous les déployons et les utilisons les uns avec les autres.

Q. Vous avez travaillé avec de très grandes marques internationales. Comment avez-vous obtenu ces projets ?
La façon dont nous avons commencé à travailler avec McDonald’s/Razorfish est plutôt classique dans notre industrie : nous connaissions quelqu’un dans la société qui était prêt à parier sur notre nouvelle compagnie. Le tout premier travail que nous avons fait pour un client était 100 McDonald’s Moments, qui a remporté un tas de prix (dont un FWA Adobe Cutting Edge Award) et nous a donné la réputation d’être des professionnels de confiance. Depuis lors, nous avons remporté d’autres prix.
Pour la BBC, cela a été comme l’acquisition d’une nouvelle entreprise, mais de manière plus directe. En gros, parce que nous voulions travailler avec la BBC, nous avons donné à l’un de nos jeux l’apparence d’une de leurs marques. Cela a marché suffisamment bien pour nous apporter notre première campagne spéculative, qui est devenue le jeu All At Breakfast.

Q. Avez-vous des conseils à donner aux concepteurs de jeux HTML5 en herbe ?
Ne sous-estimez pas la puissance de ce support ! Il est bien plus puissant que ce que pensent la plupart des gens ! Il existe plein de super moteurs qui vous donneront une longueur d’avance, tels que Phaser ou Panda.js. Comme pour tout ce qui concerne la programmation, le meilleur conseil que je puisse vous donner est de retrousser vos manches, de vous atteler à la tâche et de vous amuser ! Faire des jeux, c’est aussi agréable que d’y jouer ! N’ayez pas peur d’échouer. Si vous ne vous retrouvez pas dans des impasses (que vous arrivez au final à contourner), vous ne faites sans doute pas assez d’efforts. Ou alors vous êtes un génie.