Premiers pas avec Phaser pour le développement de jeux

Phaser est un framework pour créer des jeux vidéo 2D. Il utilise HTML5 Canvas pour afficher le jeu et JavaScript pour exécuter le jeu. L'avantage d'utiliser Phaser plutôt que du JavaScript vanille est qu'il dispose d'une vaste bibliothèque qui complète une grande partie de la physique des jeux vidéo, ce qui vous permet de vous concentrer sur la conception du jeu lui-même.

Phaser réduit le temps de développement et facilite le flux de travail. Apprenons à créer un jeu de base avec Phaser.

Pourquoi développer avec Phaser ?

Phaser est similaire aux autres langages de programmation visuels en ce sens que le programme est basé sur des mises à jour en boucle. Phaser comporte trois étapes principales :précharger, créer et mettre à jour.

En préchargement, les ressources du jeu sont téléchargées et mises à disposition du jeu.

Créer initialise le jeu et tous les éléments de départ du jeu. Chacune de ces fonctions est exécutée une fois au démarrage du jeu.

La mise à jour, en revanche, tourne en boucle tout au long du jeu. C'est le bourreau de travail qui met à jour les éléments du jeu pour le rendre interactif.

Configurer votre système pour développer des jeux avec Phaser

Bien que Phaser fonctionne sur HTML et JavaScript, les jeux sont en fait exécutés côté serveur et non côté client. Cela signifie que vous devrez exécuter votre jeu sur votre hôte local. L'exécution du jeu côté serveur permet à votre jeu d'accéder à des fichiers et ressources supplémentaires en dehors du programme. Je recommande d'utiliser XAMPP pour configurer un hôte local si vous n'en avez pas déjà une.

Le code ci-dessous vous permettra d'être opérationnel. Il met en place un environnement de jeu de base.

Pour fonctionner, le jeu nécessitera une image PNG appelée "gamePiece" enregistrée dans un dossier "img" sur votre hôte local. Pour plus de simplicité, cet exemple utilise un carré orange 60xgame de60px. Votre jeu devrait ressembler à ceci :

Si vous rencontrez un problème, utilisez le débogueur de votre navigateur pour déterminer ce qui ne va pas. Manquer ne serait-ce qu'un seul caractère peut causer des ravages, mais généralement, votre débogueur détectera ces petites erreurs.

Explication du code de configuration

Pour l'instant, le jeu ne fait rien. Mais nous avons déjà parcouru beaucoup de chemin ! Regardons le code plus en profondeur.

Pour qu'un jeu Phaser s'exécute, vous devez importer la bibliothèque Phaser. Nous le faisons à la ligne 3. Dans cet exemple, nous avons lié le code source, mais vous pouvez le télécharger sur votre hôte local et référencer également le fichier.

Jusqu'à présent, une grande partie du code configure l'environnement de jeu, que la variable config magasins. Dans notre exemple, nous mettons en place un jeu de phaser avec un fond bleu (CCFFFF en code couleur hexadécimal) de 600 pixels sur 600 pixels. Pour l'instant, la physique du jeu a été définie sur arcade , mais Phaser offre une physique différente.

Enfin, scène indique au programme d'exécuter le préchargement fonction avant le début du jeu et le bouton créer fonction pour démarrer le jeu. Toutes ces informations sont transmises à l'objet de jeu appelé jeu .

La prochaine section de code est l'endroit où le jeu prend vraiment forme. La fonction de préchargement est l'endroit où vous souhaitez initialiser tout ce dont vous avez besoin pour exécuter votre jeu. Dans notre cas, nous avons préchargé l'image de notre pièce de jeu. Le premier paramètre de .image nomme notre image et la seconde indique au programme où trouver l'image.

L'image gamePiece a été ajoutée au jeu dans la fonction de création. La ligne 29 indique que nous ajoutons l'image gamePiece en tant que sprite 270px à gauche et 450px en bas à partir du coin supérieur gauche de notre zone de jeu.

Faire bouger notre pièce de jeu

Jusqu'à présent, cela peut difficilement être appelé un jeu. D'une part, nous ne pouvons pas déplacer notre pièce de jeu. Pour pouvoir changer les choses dans notre jeu, nous devrons ajouter une fonction de mise à jour. Nous devrons également ajuster la scène dans la variable de configuration pour indiquer au jeu quelle fonction exécuter lors de la mise à jour du jeu.

Ajout d'une fonction de mise à jour

Nouvelle scène dans la configuration :

scène :{ 
 précharge :précharge, 
 créer :créer, 
 mise à jour :mise à jour 
 } 

Ensuite, ajoutez une fonction de mise à jour sous la fonction de création :

fonction mise à jour(){ 
 } 

Obtenir des entrées clés

Pour permettre au joueur de contrôler la pièce de jeu avec les touches fléchées, nous devrons ajouter une variable pour suivre les touches sur lesquelles le joueur appuie. Déclarez une variable appelée keyInputs ci-dessous où nous avons déclaré gamePieces. La déclarer ici permettra à toutes les fonctions d'accéder à la nouvelle variable.

var pièce de jeu ; 
 var keyInputs ; 

La variable keyInput doit être initialisée lors de la création du jeu dans la fonction create.

fonction create(){ 
 gamePiece =this.physics.add.sprite(270, 450, 'gamePiece'); 
 keyInputs =this.input.keyboard.createCursorKeys(); 
 } 

Maintenant, dans la fonction de mise à jour, nous pouvons vérifier si le joueur appuie sur une touche fléchée et, le cas échéant, déplacer notre pièce de jeu en conséquence. Dans l'exemple ci-dessous, la pièce de jeu est déplacée de 2 pixels, mais vous pouvez en faire un nombre plus grand ou plus petit. Déplacer la pièce 1px à la fois semblait un peu lent.

fonction mise à jour(){ 
 if(keyInputs.left.isDown){ 
 Pièce de jeu.x =Pièce de jeu.x - 2 ; 
 } 
 if(keyInputs.right.isDown){ 
 Pièce de jeu.x =Pièce de jeu.x + 2 ; 
 } 
 if(keyInputs.up.isDown){ 
 Pièce de jeu.y =Pièce de jeu.y - 2 ; 
 } 
 if(keyInputs.down.isDown){ 
 Pièce de jeu.y =Pièce de jeu.y + 2 ; 
 } 
 } 

Le jeu a maintenant un personnage mobile ! Mais pour être vraiment un jeu, nous avons besoin d'un objectif. Ajoutons quelques obstacles. L'esquive des obstacles était la base de nombreux jeux de l'ère 8 bits.

Ajouter des obstacles au jeu

Cet exemple de code utilise deux sprites d'obstacle appelés obstacle1 et obstacle 2. obstacle1 est un carré bleu et obstacle2 est vert. Chaque image devra être préchargée, tout comme le sprite de la pièce de jeu.

fonction preload(){ 
 this.load.image('gamePiece', 'img/gamePiece.png'); 
 this.load.image('obstacle1', 'img/obstacle1.png'); 
 this.load.image('obstacle2', 'img/obstacle2.png'); 
 } 

Ensuite, chaque sprite d'obstacle devra être initialisé dans la fonction de création, tout comme la pièce de jeu.

fonction create(){ 
 gamePiece =this.physics.add.sprite(270, 450, 'gamePiece'); 
 keyInputs =this.input.keyboard.createCursorKeys(); 
 obstacle1 =this.physics.add.sprite(200, 0, 'obstacle1'); 
 obstacle2 =this.physics.add.sprite(0, 200, 'obstacle2'); 
 } 

Faire bouger les obstacles

Pour déplacer les pièces cette fois, nous ne voulons pas utiliser l'entrée du joueur. Au lieu de cela, faisons en sorte qu'une pièce se déplace de haut en bas et que l'autre se déplace de gauche à droite. Pour ce faire, ajoutez le code suivant à la fonction de mise à jour :

obstacle1.y =obstacle1.y + 4 ; 
 si(obstacle1.y> 600){ 
 obstacle1.y =0 ; 
 obstacle1.x =Phaser.Math.Between(0, 600); 
 } 
 
 obstacle2.x =obstacle2.x + 4 ; 
 si(obstacle2.x> 600){ 
 obstacle2.x =0 ; 
 obstacle2.y =Phaser.Math.Between(0, 600); 
 } 

Le code ci-dessus déplacera obstacle1 vers le bas de l'écran et obstacle2 à travers la zone de jeu de 4 pixels à chaque image. Une fois qu'un carré est hors de l'écran, il est déplacé vers le côté opposé à un nouvel endroit aléatoire. Cela garantira qu'il y aura toujours un nouvel obstacle pour le joueur.

Détection des collisions

Mais nous n'avons pas encore tout à fait terminé. Vous avez peut-être remarqué que notre joueur peut passer à travers les obstacles. Nous devons faire en sorte que le jeu détecte quand le joueur rencontre un obstacle et termine le jeu.

La bibliothèque de physique Phaser possède un détecteur de collisionneur. Tout ce que nous avons à faire est de l'initialiser dans la fonction de création.

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){ 
 gamePiece.destroy(); 
 obstacle. détruire(); 
 obstacle2.destroy(); 
 }); 
 this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){ 
 gamePiece.destroy(); 
 obstacle. détruire(); 
 obstacle2.destroy(); 
 }); 

La méthode du collisionneur nécessite trois paramètres. Les deux premiers paramètres identifient les objets qui entrent en collision. Donc, ci-dessus, nous avons mis en place deux collisionneurs. Le premier détecte quand la pièce de jeu entre en collision avec l'obstacle1 et le deuxième collisionneur recherche les collisions entre la pièce de jeu et l'obstacle2.

Le troisième paramètre indique au collisionneur quoi faire une fois qu'il détecte une collision. Dans cet exemple, il y a une fonction. S'il y a collision, tous les éléments du jeu sont détruits; cela arrête le jeu. Désormais, le joueur passera la partie s'il rencontre un obstacle.

Essayez le développement de jeux avec Phaser

Il existe de nombreuses façons d'améliorer et de rendre ce jeu plus complexe. Nous n'avons créé qu'un seul joueur, mais un deuxième personnage jouable pourrait être ajouté et contrôlé avec les commandes "awsd". De même, vous pouvez essayer d'ajouter plus d'obstacles et de faire varier la vitesse de leur déplacement.

Cette introduction vous aidera à démarrer, mais il reste encore beaucoup à apprendre. La grande chose à propos de Phaser est qu'une grande partie de la physique du jeu est faite pour vous. C'est un excellent moyen facile de commencer à concevoir des jeux 2D. Continuez à construire sur ce code et affinez votre jeu.

Si vous rencontrez des erreurs, le débogueur de votre navigateur est un excellent moyen de découvrir le problème.