Premiers pas avec Phaser pour le développement de jeux

Premiers pas avec Phaser pour le développement de jeux

Phaser est un framework de création de jeux vidéo 2D. Il utilise HTML5 Canvas pour afficher le jeu et JavaScript pour exécuter le jeu. L'avantage d'utiliser Phaser par rapport à JavaScript vanille est qu'il possède une bibliothèque complète qui complète une grande partie de la physique des jeux vidéo, vous permettant 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.

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



La mise à jour, quant à elle, fonctionne en boucle tout au long du jeu. C'est le cheval de bataille qui met à jour les éléments du jeu pour le rendre interactif.

Configurez 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 des ressources supplémentaires en dehors du programme. je recommande utiliser XAMPP pour configurer un hôte local si vous n'avez pas déjà une configuration.



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







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}


Pour fonctionner, le jeu nécessitera une image PNG appelée « gamePiece » enregistrée dans un dossier « img » sur votre hôte local. Pour simplifier, 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. L'absence d'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 terrain ! 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 également le télécharger sur votre hôte local et référencer le fichier.

comment remplacer un routeur par un neuf

Une grande partie du code jusqu'à présent configure l'environnement de jeu, que la variable configuration magasins. Dans notre exemple, nous mettons en place un jeu de phaser avec un fond bleu (CCFFFF en code couleur hexadécimal) de 600px par 600px. Pour l'instant, la physique du jeu a été réglée sur Arcadien , mais Phaser propose une physique différente.

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

En rapport: Les 6 meilleurs ordinateurs portables pour la programmation et le codage

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 à 270 pixels à gauche et à 450 pixels 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 lorsque nous mettrons à jour le jeu.

Ajout d'une fonction de mise à jour

Nouvelle scène dans la config :

scene: {
preload: preload,
create: create,
update: update
}

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

la barre des tâches ne répond pas sous windows 10
function update(){
}

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. Le déclarer là permettra à toutes les fonctions d'accéder à la nouvelle variable.

var gamePiece;
var keyInputs;

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

function 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, s'il le fait, 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.

function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.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 beaucoup de jeux à l'ère du 8 bits.

Ajouter des obstacles au jeu

Cet exemple de code utilise deux sprites d'obstacles 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.

function 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.

function 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 l'autre de gauche à droite. Pour ce faire, ajoutez le code suivant à la fonction de mise à jour :

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

obstacle2.x = obstacle2.x + 4;
if(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 4px chaque image. Une fois qu'un carré est hors écran, il est ramené du côté opposé à un nouvel endroit aléatoire. Cela garantira qu'il y a 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 la partie.

La bibliothèque de physique Phaser dispose d'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.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
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 lorsque la pièce de jeu entre en collision avec l'obstacle1 et le second collisionneur recherche les collisions entre la pièce de jeu et l'obstacle2.

Le troisième paramètre indique au collisionneur ce qu'il doit faire une fois qu'il détecte une collision. Dans cet exemple, il y a une fonction. En cas de collision, tous les éléments du jeu sont détruits ; cela arrête le jeu. Maintenant, le joueur finira sa partie s'il rencontre un obstacle.

Essayez le développement de jeux avec Phaser

Ce jeu peut être amélioré et rendu plus complexe de différentes manières. 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 expérimenter en ajoutant plus d'obstacles et en variant la vitesse de leur mouvement.

que faire si votre facebook est piraté

Cette introduction vous permettra de démarrer, mais il reste encore beaucoup à apprendre. Ce qui est bien avec Phaser, c'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 à développer 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.

Partager Partager Tweeter E-mail Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web

Découvrez comment utiliser les outils de développement intégrés du navigateur Chrome pour améliorer vos sites Web.

Lire la suite Rubriques connexes
  • La programmation
  • JavaScript
  • HTML5
  • Développement de jeu
A propos de l'auteur Jennifer Seaton(21 articles publiés)

J. Seaton est un écrivain scientifique spécialisé dans la décomposition de sujets complexes. Elle détient un doctorat de l'Université de la Saskatchewan; ses recherches se sont concentrées sur l'utilisation de l'apprentissage basé sur le jeu pour augmenter l'engagement des étudiants en ligne. Lorsqu'elle ne travaille pas, vous la trouverez avec elle en train de lire, de jouer à des jeux vidéo ou de jardiner.

Plus de Jennifer Seaton

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner