logo de Phaser

Game Dev,Phaser

Introduction à Phaser

11 Mar , 2015  

Depuis la ‘mort’ de Flash les frameworks pour le développement de jeux en HTML5 ont fleuris sur le net. Difficile parfois de faire le tri, mais certains se sont clairement sortis du lot,  Phaser est l’un d’eux.

Crée par Richard Davey, il est actuellement à sa version 2.2.2 , est gratuit, open source et bénéficie d’une large communauté de développeurs. Si vous êtes (étiez serait plus approprié…) développeur AS3 ce moteur , très largement  inspiré par Flixel, sera facile à prendre en main! Phaser utilise Pixi.js pour le rendu WebGL et du canvas.

Il permet de développer des jeux 2D (et utilisant WEBGl) en HTML5, donc multiplateformes , pour desktop et mobiles. Attention ,ne rêvez pas trop quand même… en effet même si les spécifications du HTML5 sont sortis du mode draft l’an dernier (check date), plusieurs soucis de compatibilités cross-browser se posent encore sur certains points, et les performances du canvas peuvent parfois poser problème. Néanmoins Phaser permet de développer de nombreuses sortes de jeux, parfois complexes,  et couplé à d’autres solutions tierces telles que cocoonJs, de les déployer sur mobiles sous formes d’applications. Le framework est solide, et des milliers de jeux ont été développés, du  petit jeu amateur au jeu de studios plus aguerris, et nombreux sont ceux distribués sur iTunes ou GooglePlay.

Concrètement quelle est la prise en charge par les différents navigateurs et OS mobiles : Phaser est compatible avec iOS5 et plus, sur Safari.

Pour Android, il tourne sous Android 2.2 et +, dans le navigateur par défaut , ainsi que sur Chrome qui est maintenant le navigateur par défaut des périphériques Android.

En ce qui concerne les navigateurs d’ordinateurs de bureau, il fonctionne sur tout navigateur prenant en charge l’élément Canvas. Voir Caniuse pour plus de détails

Cet article est le premier d’une série de tutoriaux durant lesquels nous verrons le développement d’un petit jeu de plateforme, et ainsi passer en revue les grandes lignes de ce moteur de jeu.

Pour l’utiliser vous devez avoir des bases en programmation ainsi qu’en HTML5 et javascript.

 

Outils nécessaires

-Un éditeur de code : si vous ne disposez pas déjà d’un éditeur, il existe un choix assez large, gratuit ou payant. En voici quelques uns, chacun dispose de ses avantages comme de ses inconvénients.

  • Brackets: gratuit, open source , développé par Adobe, un grand choix de plugins tiers.
  • NotePad++:gratuit, open source également
  • SublimeText : licence payante. Très bon éditeur, simple, disposant d’un large choix de plugins. Pour ma part celui que j’utilise.

-Un serveur web local. En effet, à moins de modifier les paramètres de sécurité de vos navigateurs, le chargement des ressources de votre jeu en local ne fonctionnera pas autrement en local. Les options les plus simples sont WAMP sous windows, et MAMP sous macOS. (Je posterai bientôt un tutorial pour gérer son projet en ligne de commande, et gruntjs)

-Un editeur de tuile (tilemap editor): à la différence d’ impactJS, Phaser ne dispose pas d’éditeur de niveau pour permettre de concevoir rapidement des niveaux à partir de spritsheets . Nous utiliserons  Tiled Map Editor , un éditeur gratuit très complet.

-PHASER : last but not least le framework disponible ici! Au moment de l’écriture de tutorial la dernière version est la version 2.2.2. Nous utiliserons donc celle-ci (il est possible que le code ne fonctionne plus avec une version utltèrieure suivant les changements réalisés)

Maintenant que notre environnement est prêt, commençons à coder notre premier jeu.

 

Tutorial – apprendre à développer avec Phaser – partie 1


Leave a Reply

Your email address will not be published. Required fields are marked *

*