Premiers pas vers le développement de jeux avec Phaser

L'arrivée de HTML5 Cela a changé notre façon de voir le web, non seulement cela nous a donné de meilleurs outils pour leur développement, mais cela nous a également ouvert la possibilité de développer des applications qui vont plus loin, comme dans le cas des jeux vidéo.
L'avantage de faire un jeu vidéo en HTML5 c'est qu'il est compatible avec pratiquement n'importe quel appareil doté d'un navigateur et ce qui est encore mieux sans avoir besoin de télécharger ou de faire des installations supplémentaires.
Grâce à cette nouvelle popularité, les frameworks de développement de jeux vidéo se sont multipliés, chacun avec ses caractéristiques et ses avantages, cette fois nous allons nous concentrer sur Phaser, les raisons sont multiples et nous pouvons les voir dans la liste suivante :

• Il a une grande communauté et est actif.
• Il est mis à jour périodiquement.
• C'est gratuit à utiliser.
• Il dispose d'outils de physique qui nous facilitent la vie.

Donc, puisque nous voyons qu'il a des avantages intéressants, nous allons l'installer, mais voyons d'abord quelques exigences que le framework requiert.
1- Nous avons besoin d'un accès Internet pour pouvoir télécharger toutes les ressources qui surviennent lors de l'installation du framework, y compris celle-ci.
2- Il faut avoir installé ou pouvoir installer un serveur web du style LAMPE ou alors WAMP ou alors MAMP selon notre système d'exploitation, ceci parce que Phaser les usages HTML5 et aussi JavaScript Par conséquent, en raison de mesures de sécurité, notre navigateur n'acceptera pas les exécutions locales.
3- Nous avons besoin d'autorisations pour accéder aux dossiers et services nécessaires définis lors de l'installation du framework.
4- Nous avons besoin d'un navigateur compatible avec HTML5 et qu'il dispose d'outils de débogage, dans le cas de ce tutoriel nous utiliserons Édition développeur de Firefox dans sa dernière version pour le moment, cependant ils sont libres de choisir celle qui leur semble la meilleure.
5- Enfin, nous avons besoin d'un éditeur de texte pour pouvoir écrire le code des exemples, car il peut toujours s'agir de ce que nous avons, bien que nous recommandons Texte sublime o NotePad ++ en raison du grand nombre de plugins qui nous facilitent la vie en tant que développeurs.
La première chose que nous ferons pour pouvoir installer Phaser est d'aller sur son site officiel et ici nous trouverons plusieurs ressources, mais pour l'instant nous irons à la section qui dit Télécharger:

AGRANDIR

Nous avons plusieurs options à télécharger, les deux que nous pouvons utiliser sont de télécharger le .zip compressé ou .tar.gz, nous pouvons également faire un clone à partir de Github du projet, dans notre cas, nous téléchargerons le projet au format .zip pour accélérer le processus. Une fois que nous avons téléchargé ou cloné le projet, les répertoires les plus importants sont les suivants :
docs / index.htmlIci, nous avons l'entrée de la documentation hors ligne et officielle de la version que nous venons de télécharger, cela peut nous aider à revoir certains détails, bien que si nous avons la possibilité d'aller sur Internet et de nous documenter, nous aurons toujours de meilleures options.
build / phaser.min.jsC'est notre framework en tant que tel, c'est la bibliothèque minifiée et compressée qui contient tous les outils dont nous aurons besoin pour démarrer nos premiers projets.
Depuis que nous avons téléchargé le projet, pour vérifier que tout est correct, nous devons simplement copier le dossier décompressé où nous pouvons y accéder avec notre serveur Web, généralement c'est le répertoire www ou alors public_html, tout dépend vraiment de notre environnement.
Une fois là-bas, nous devons accéder à notre navigateur et exécuter notre localhost / phaser ou le nom que nous avons placé et nous verrons la liste des fichiers, ici nous devons naviguer vers le dossier suivant : ressources / tutoriels / 01 Prise en main / hellophaser / index.html et nous pouvons apprécier ce que nous voyons dans la capture d'écran suivante :

AGRANDIR

Notre premier matchPuisque nous avons vérifié que notre environnement fonctionne parfaitement, il est temps de faire notre premier jeu, pour cela nous allons établir un objectif réalisable pour notre niveau à ce moment, où à la fin de l'exemple nous devons être en mesure de montrer un Lutin À l'écran.
Dans le dossier que nous avons le framework sur notre serveur web, nous allons créer un nouveau dossier, dans ce cas nous l'appellerons exemple de phaser, à l'intérieur nous allons placer le fichier phaser.min.js à la racine de celui-ci, nous allons créer un fichier appelé index.html et un autre fichier appelé main.js, il faut aussi placer une image appelée logo.png.webp qui sera le sprite que nous montrerons, qui peut être trouvé dans les ressources du framework et cela peut être une taille recommandée de 180 par 64 pixels. Au final, notre répertoire devrait ressembler à ceci :

Puisque nous avons établi notre structure maintenant, nous devons commencer à écrire le code de notre premier projet, pour cela ce que nous devons faire est d'ouvrir notre fichier index.html et là nous allons inclure les fichiers .js que nous avons créé, en plus de créer un qui aura comme identifiant le mot jeuDiv. Voyons à quoi ressemble notre code :

 Notre premier jeu sur Phaser
Notre premier jeu =)

Ce sera la base sur laquelle notre jeu sera pris en charge afin que l'utilisateur puisse visualiser le contenu. La prochaine étape dans la construction de notre premier jeu est d'écrire le code pour main.js, qui gérera toute la logique de notre jeu et contient trois méthodes clés, voyons :
préchargerCette méthode est chargée de précharger toutes les ressources dont notre jeu a besoin, qu'il s'agisse d'images, d'audio, de vidéos, etc. Il s'exécute toujours au démarrage.
créerCette méthode s'exécute une fois qu'elle est terminée précharger et sa fonction est d'incorporer les ressources chargées dans notre jeu, en plus de nous donner la possibilité d'en établir la configuration initiale.
mettre à jourEnfin, cette méthode s'exécute 60 fois par seconde et contient la vraie logique de notre jeu, c'est ce qui nous donne le mouvement pour ainsi dire.
Comme on peut le voir, chacune de ces méthodes est en charge d'un état du jeu, les deux premières sont antérieures au début du jeu, tandis que la mettre à jour se produit pendant l'exécution. Une fois que nous avons défini ce que fait chaque méthode, nous n'avons plus qu'à voir le code dont nous avons besoin :

 var mainState = {preload: function() {// On charge l'image game.load.image ('logo', 'logo.png.webp'); }, créer : function () {// Nous montrons notre image dans le jeu this.sprite = game.add.sprite (200, 150, 'logo'); }, mise à jour : function () {// nous modifions l'angle d'une unité 60 fois par seconde // cela nous donnera un effet de rotation d'image this.sprite.angle + = 1; }}; // ici nous commençons notre jeu et le définissons // pour utiliser le div gameDiv que nous avons mis dans notre jeu HTMLvar = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

Comme nous pouvons le voir à la fin des méthodes, nous créons une variable appelée Jeu et en cela, nous exécutons une instance de Phaser.Jeu où l'on passe certains paramètres, pour le moment il n'est pas nécessaire d'en savoir beaucoup sur eux, on les copie simplement comme on les voit. Mais à peu près c'est la partie où nous disons à notre application de rechercher Phaser pour qu'il vous dise quoi faire avec les méthodes que nous avons créées ci-dessus et à la fin avec game.state.start est l'endroit où nous disons au framework de commencer notre jeu.
Maintenant, si tout s'est bien passé, nous allons exécuter notre projet dans le navigateur et nous devrions voir l'image sélectionnée tourner à l'écran :

Dans le cas de cet exemple, nous avons utilisé une image qui relève des ressources de PhaserCependant, ce n'est pas vraiment une exigence, avec n'importe quelle image, nous pourrions obtenir les mêmes résultats. Une autre chose que nous pouvons remarquer dans notre exemple est que ci-dessous nous avons la console de débogage du navigateur ouverte, cet outil est le meilleur ami que nous aurons puisque c'est là que nous pouvons déboguer les différentes erreurs que nous pouvons trouver lors du développement de nos jeux.
Avec cela, nous avons terminé ce tutoriel, nous avons installé avec succès Phaser, nous avons connu certaines des caractéristiques initiales de ce grand framework et avec cela nous avons créé une petite application ou un petit jeu. Il est important de prendre ce tutoriel comme point de départ pour faire des recherches un peu plus approfondies sur Phaser, puisque ce n'est même pas 1% de tout ce qu'il nous offre, pourtant c'est un premier pas qui nous coûte si souvent de faire.