Pixi.js, Haxe et les expériences multiplateformes plein écran dans le navigateur

ADN 250 est un serious game autour du marketing relationnel, un peu comme une réunion Tupperware. Vous devez apprendre à connaître différents produits en les utilisant, puis vous pouvez commencer à vendre ces produits à différentes personnes et les convaincre de faire de même, en étendant votre réseau de vendeurs et en gagnant plein d’argent.

L’exigence principale du projet était de créer un jeu accessible, sans installation, disponible aussi bien sur ordinateur que sur mobile : un jeu web.

Quelles technologies utiliseriez-vous si on vous demandait de créer un jeu 2D plein écran, disponible sur le web depuis des PC et des smartphones ?

Ici, chez Da Viking Code, nous avons choisi le fameux Pixi.js ! Cette bibliothèque javascript HTML5 utilisant WebGL nous permet de créer facilement des jeux 2D en canvas.

Malheureusement, le langage JavaScript n’est pas le plus confortable à utiliser, des erreurs peuvent survenir à cause de l’absence de typage et de compilation. Si vous êtes à l’aise avec JavaScript, tant mieux, mais chez Da Viking Code, nous préférons le langage Haxe, typé strictement et compilé, pour nos projets Web :). Utiliser Pixi.js avec Haxe n’est pas difficile, nous utilisons l’extern Haxe pour Pixi.js d’Adireddy, bien maintenu !

Rendre un jeu web accessible sur une grande variété de tailles d’écrans (du petit iPhone 4S au grand écran de 27” que possèdent certains PC) demande d’être pensé dès le départ.

Nous avons choisi de construire le jeu comme s’il devait être affiché sur un écran FullHD et d’appeler, dès la première frame, une fonction onResize() (la fonction onResize est aussi appelée au redimensionnement de l’écran). Cette fonction appelle des fonctions de redimensionnement plus petites à travers tout le projet, ce qui donne une solution facile à construire et bien organisée, facile à redimensionner.

Le jeu tournant sur un écran PC extra-large, le joueur vient tout juste d’atteindre un nouveau niveau.

Parfois, redimensionner les éléments à l’exécution ne suffit pas pour obtenir quelque chose de bien et de léger sur les appareils mobiles, nous avons donc décidé que le jeu se comporterait un peu différemment. La première chose est la mise à l’échelle de l’UI : sur mobile, tous les boutons d’UI sont légèrement plus grands et certains éléments d’UI sont carrément différents.

Un autre changement est l’utilisation de différents niveaux de qualité pour le jeu. Selon la résolution de départ, nous chargeons un pack de textures différent, ce qui permet un chargement et des performances plus rapides sur les petits appareils tout en préservant la meilleure qualité possible sur les appareils haut de gamme.

Pour obtenir différentes résolutions de textures qui apparaîtront quand même à la même échelle dans le jeu, il faut indiquer à Pixi à quelle échelle se trouvent nos textures. Dans notre projet, nous avons un pack de textures en pleine résolution (@1x) et un pack de textures en demi-résolution (@0.5x). En plaçant nos textures dans des dossiers nommés comme suit, Pixi.js comprendra l’échelle normale d’une texture.

Par exemple, une texture de 1024 x 1024 dans un dossier @1x aura une échelle à l’écran égale à 1024 * 1 = 1024. Une texture de 512*512 dans un dossier @0.5x aura une échelle à l’écran égale à 512 * 2 = 1024. Et enfin, une texture de 2048 x 2048 dans un dossier @2x aura une échelle à l’écran égale à 2048 * 0.5 = 1024. Au final, nous avons 3 qualités de texture différentes, mais la même échelle à l’écran, quelles que soient leur largeur et leur longueur d’origine.

Dans ce panneau, le joueur peut recruter des personnes pour vendre ses produits.

La dernière difficulté que nous avons rencontrée a été d’obtenir le plein écran sur iOS. Notre canvas se trouvait à l’intérieur d’un élément avec une position absolute, ce qui faisait que les appareils iOS recouvraient une partie du jeu avec leur barre de navigation du navigateur en orientation paysage. Après de nombreuses recherches sur le web et de multiples tests, la solution a finalement été d’utiliser un positionnement fixed pour le conteneur de notre jeu, combiné à un scrollTo(0, 0).

Pour conclure, choisir Pixi.js avec Haxe était cohérent avec l’ambition du projet : - Pixi a tout ce qu’il faut pour faire votre jeu web responsive sur PC et sur mobile, se redimensionnant avec le navigateur et gérant différentes résolutions pour les packs de textures. - Haxe est un bon allié de Pixi.js grâce à des externs formidables, offrant à la fois un environnement typé et sécurisé pour votre application et la possibilité de sortir de sa logique pour faire du code plus proche du js grâce au type dynamic et aux lignes untyped. Grâce à ces technologies, le projet s’est bien déroulé et nous avons pu surmonter toutes les difficultés rencontrées, ce qui nous conforte dans notre choix technologique.

Petite remarque au passage, nous avons eu quelques soucis pour charger un fichier XML avec le loader de Pixi.js. Voici un pense-bête :

var xmlTextString:String = new js.html.XMLSerializer().serializeToString(loader.resources.text.data.childNodes[0]);
var XML = Xml.parse(xmlTextString);