Créer des jeux HTML5 avec Phaser (WebGL) mon avis

Phaser est un framework HTML5 gratuit pour créer des jeux Web, il est codé en JavaScript et utilise la technologie WebGL, ce qui permet d’avoir une accélération matérielle et donc un bon rendu optimisé 2D et 3D.

J’ai développé deux jeux avec Phaser 3 et je voulais vous donner mon avis sur ce framework. Ce n’est pas donc pas un moteur de jeu, mais un framework qui utilise la technologie e WebGL.

Cliquez ici pour vous rendre sur le site officiel de Phaser

Je vais vous lister les avantages et les inconvénients de ce framework et répondre à cette question :

Est-ce que Phaser est un bon moyen pour créer des jeux en HTML5 ?

Vous pouvez exporter vos jeux sur le Web, sur PC, sur Mobile, voire Console (mais avec quelques difficultés)

Phaser utilise le langage JavaScript ou TypeScript. Différences :

JavaScript	TypeScript
var numLifes = 10;	var numLifes:number = 10;

Pour résumer : TypeScript c’est JavaScript, mais avec un typage.

Les avantages de développer des jeux avec Phaser 3

• Phaser est Open Source et gratuit
• Le développeur est toujours actif et met à jour le framework
• On a la possibilité d’utiliser le TypeScript au lieu de JavaScript
• Les jeux sont très très rapides à compiler et tester
• Les builds sont légers (inférieur à 10Mo pour un petit jeu)
• Le framework dispose déjà de plein de fonctions de bases utiles (maths, physique, collisions, tableaux, etc.)
• Phaser dispose de 2 moteurs physiques différents : un plus précis que l’autre, mais plus gourmand.
• Export sur plusieurs plateformes (PC, Web, Mobile)
• L’export Web est compatible PC et mobile
• Disposition d’une grosse base de données d’exemples
• Accessible si l’on connaît déjà le développement Web et sa logique
• Mise à jour des modifications quasiment instantanément sur les machines de tests (PC, Mobile)
• l’IDE VSCode est très rapide et bien adapté
• On peut créer des Components réutilisables (via PhaserEditor2D)
• On peut développer des jeux avec n’importe quelle petite machine
• Très bien pensé pour les jeux 2D (moins pour la 3D)
• Adapté pour optimiser les assets et les chargements
• Pas besoin de se prendre la tête avec le “;” en JS et TS
• Pas besoin de déclarer le type de données en JS

Les inconvénients de développer des jeux avec Phaser 3

• Problèmes de compatibilité avec les navigateurs Web et tout ce que cela peut impliquer (type, version, version mobile, format d’écran, performances, compatibilité, etc.)
• Le langage JavaScript est sans typage : donc pas d’autocomplétion et les erreurs difficiles à identifier
• Framework peu utilisé par la majorité des développeurs
• Peu de tutoriels complets à jour surtout en TypeScript
• Le forum et le Discord ne sont pas très actifs : personne ne se répond alors autant passer par le github qui est un peu plus actif.
• Il faut compresser et intégrer soit même tous les assets (images et sons dans tous les formats possibles)
• Pas très accessible pour débutant : le WebPack, les lignes de commandes, les plug-ins
• On doit absolument connaître la programmation orientée objet
• La logique de Scene, Game, GameObject, Container, Layer n’est pas très compréhensible et logique
• La documentation officielle n’est pas compréhensible, mais il existe une documentation plus explicite : https://rexrainbow.github.io/phaser3-rex-notes/docs/site/
• On peut trouver pas mal de bugs que l’on doit reporter et qui font perdre du temps
• Il n’y a pas d’outil de logiciel de création d’Interface WYSIYG (sauf PhaserEditor2D)
• Pas d’outil de Level Design dédié (Passer par Tiled)
• Pas d’outil d’animations (Passer par Spine 2D)
• Pas d’outil officiel pour les particules
• Export pour PC (.exe) et mobile fastidieux (Passer par Cordova)
• On tombe sur Google sur des posts de forums et des articles de blog qui ne sont pas dédiés à Phaser 3, mais Phaser 2, qui est bien différent.
• Pas facile de trouver de l’aide, de la documentation et des exemples en TypeScript
• Les outils et les plug-ins sont faits par des gens seuls et contiennent des bugs ou ne sont plus à jour
• Il faut coder toutes les fonctionnalités de base soi-même ou bien trouver des plug-ins, mais à vos risques et périls
• Il y a des problèmes de compatibilité avec les outils et les plug-ins qui ne sont plus à jour
• Il n’y pas de “Play mode” comme dans Unity pour observer le jeu avec un éditeur
• Phaser n’est pas pensé pour l’interface responsive ou alors on doit passer par des plug-ins
• Le navigateur safari gère mal l’antialiasing sur mobile et Mac (AntialiasingGL)

Conclusion

Vive PhaserEditor2D qui m’a aidé à créer l’interface et le level design !

Phaser permet de tester très rapidement les scripts et les modifications (le jeu se relance en une seconde).

Je ne recommande pas trop ce framework pour les débutants, mais JavaScript est un bon langage pour apprendre la programmation, mais il faut absolument maîtriser la POO (Programmation Orientée Objet) et JavaScript.

Si vous voulez tester le framework, je conseille de développer un jeu très simple pour comprendre la logique comme un FlappyBird

Cliquez ici pour tester mon FlappyBird en HTML5

Enfin, cela ne vaut pas l’éditeur Unity ou Flash (Animate CC) quand on est habitué certes, mais c’est un excellent outil pour coder des jeux optimisés pour le Web. 😃

Si vous avez votre avis, n’hésitez pas à me poster en commentaire également !