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 par rapport à JavaScript vanille est qu'il dispose d'une vaste bibliothèque 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 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 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, se déroule 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 des ressources supplémentaires en dehors du programme. Je recommande d' 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.
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
</head>
<body>
<script>
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');
}
</script>
</body>
</html>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 n'a pas fonctionné. Manquer ne serait-ce qu'un seul caractère peut causer des ravages, mais en général, votre débogueur détectera ces petites erreurs.
Expliquer le code de configuration
Jusqu'à présent, 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 faisons cela en ligne 3. Dans cet exemple, nous avons lié au code source, mais vous pouvez le télécharger sur votre hôte local et référencer le fichier aussi.
Une grande partie du code jusqu'à présent configure l'environnement de jeu, que la variable config stocke. Dans notre exemple, nous mettons en place un jeu de phaser avec un arrière-plan bleu (CCFFFF en code couleur hexadécimal) de 600 px par 600 px. Pour l'instant, la physique du jeu a été réglée sur arcade , mais Phaser propose une physique différente.
Enfin, la scène indique au programme d'exécuter la fonction de préchargement avant le début du jeu et la fonction de création pour démarrer le jeu. Toutes ces informations sont transmises à l'objet de jeu appelé jeu .
La section suivante du 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 le second 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 qualifié de 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 configuration:
scene: {
preload: preload,
create: create,
update: update
}Ensuite, ajoutez une fonction de mise à jour sous la fonction de création:
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 ici permettra à toutes les fonctions d'accéder à la nouvelle variable.
var gamePiece;
var keyInputs;La variable keyInput doit être initialisée lorsque le jeu est créé 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 si c'est le cas, 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 un personnage mobile maintenant! Mais pour être vraiment un jeu, nous avons besoin d'un objectif. Ajoutons quelques obstacles. Éviter les 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.
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 bouger une pièce du haut vers le 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 l'obstacle1 vers le bas de l'écran et l'obstacle2 à travers la zone de jeu de 4 pixels par image. Une fois qu'un carré est hors de l'écran, il est déplacé vers le côté opposé à un nouvel emplacement 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 lorsque le joueur rencontre un obstacle et termine le jeu.
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 deux collisionneurs mis en place. Le premier détecte le moment où la pièce de jeu entre en collision avec l'obstacle1 et le second collisionneur recherche des 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 rejoindra s'il rencontre un obstacle.
Essayez le développement de jeux avec Phaser
Il existe de nombreuses façons d'améliorer ce jeu et de le rendre 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 varier la vitesse de leur mouvement.
Cette introduction vous permettra de démarrer, mais il reste encore beaucoup à apprendre. L'avantage de Phaser est qu'une grande partie de la physique du jeu est faite pour vous. C'est un moyen très simple de commencer à concevoir des jeux 2D. Continuez à utiliser 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.