Donnez vie à vos personnages dans Phaser
L'ajout d'animations de jeu est facile à faire dans Phaser. L'animation donne vie aux personnages de jeux vidéo. Une façon d'incorporer de l'animation dans votre jeu est d'animer les mouvements de votre personnage. Vous pouvez même leur donner une animation d'état d'inactivité qui s'exécutera lorsque le joueur ne bouge pas du tout. Cela donnera plus de personnalité à vos personnages.
Configuration du jeu
Vous aurez besoin d'une compréhension de base de Phaser pour travailler avec des animations. Si vous n'êtes pas familiarisé avec Phaser, commencez par un didacticiel de base sur le jeu avant de continuer. Ce tutoriel s'appuiera sur ces fondations.
Pour commencer, créez un jeu avec un personnage mobile. Dans notre exemple, nous commencerons par un bloc déplacé avec les touches fléchées. Voici le code de départ:
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF ,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create,
update: update
}
};
var gamePiece;
var keyInputs;
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');
keyInputs = this.input.keyboard.createCursorKeys();
}
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;
}
}Ce code créera une pièce de jeu qui peut se déplacer sur un fond bleu. Par souci de simplicité, l'exemple utilise simplement un bloc orange pour le personnage du jeu. Cela ressemble à ceci:
Créer une feuille de sprite
La première étape consiste à créer l'animation. Il existe de nombreuses façons de créer des animations, mais c'est au-delà de ce que nous pouvons couvrir ici. Pour nos besoins, il est simplement important que vous enregistriez votre animation en tant que feuille de sprite.
Une feuille de sprite est un fichier image unique contenant un ensemble d'images d'animation. Chaque image de l'animation est placée à côté de celle qu'elle suit. Chaque cadre doit être de la même taille. Les programmes d'animation découperont l'image en images individuelles en fonction des dimensions d'une seule image.
Les images sont stockées dans un tableau. Comme tous les tableaux, cela signifie que la première image est en position zéro. Ainsi, dans l'exemple ci-dessus, l'animation descendante commence à zéro et se termine à trois. L'animation de gauche commence à quatre et se termine à sept.
Ajout d'une feuille de calcul à Phaser
Le chargement d'une feuille de sprite est similaire au chargement d'une image dans Phaser. Cependant, votre programme nécessitera un peu plus d'informations sur le fichier image. Auparavant, nous avons chargé notre image avec ce texte:
this.load.image('gamePiece', 'img/gamePiece.png');Les feuilles de sprite, cependant, ont besoin de quelques paramètres supplémentaires. Nous devons également spécifier les dimensions d'un cadre. Donc, pour charger une feuille de sprite, nous devons ajuster le code comme suit:
this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
frameWidth: 60,
frameHeight: 60
});Le code est très similaire. La grande différence est que nous avons ajouté un troisième paramètre qui spécifie la largeur et la hauteur de nos images d'animation. Dans ce cas, les images font 60 pixels sur 60 pixels.
Cet exemple utilisera une simple feuille de sprite. Nous avons ajouté une flèche et des indicateurs clignotants au sprite du jeu. La flèche pointera dans la direction dans laquelle notre sprite se déplace tandis qu'un indicateur clignote dans cette direction. Si le personnage ne bouge pas, l'animation parcourra toutes les images.
Créer des animations
Avant de pouvoir animer notre personnage, nous devons créer l'animation. Nous avons déjà téléchargé la feuille de sprite, maintenant nous devons dire quelles images sont dans une animation. Pour créer une animation, ajoutez le code suivant à la fonction de création:
this.anims.create({
key: "up",
frameRate: 2,
frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}),
repeat: -1
});Ci-dessus se trouve l'animation pour la direction vers le haut .
- Le mot-clé anims est l'abréviation d'animations. Les versions précédentes utilisaient les animations de mots clés complètes, mais la version actuelle utilise ce raccourci.
- La clé est le nom de l'animation. Vous utiliserez la touche pour appeler l'animation.
- FrameRate contrôle le nombre d'images affichées en une seconde. Cet exemple n'aura que deux images par seconde.
- La ligne suivante indique les images et les cadres utilisés dans l'animation. L'animation vers le haut utilise l'image gamePiece et commence à l'image 0 et se termine à l'image 2.
- Si vous souhaitez que l'animation se déroule en boucle, réglez la répétition sur -1. Sinon, vous pouvez entrer le nombre de répétitions de l'animation avant de s'arrêter.
Vous devrez créer une animation pour chaque direction et l'état inactif.
Comment animer votre personnage
Il est assez facile d'ajouter une animation à un personnage. La partie délicate est la transition entre les animations. Vous pouvez définir une animation de départ dans la fonction de création.
gamePiece = this.add.sprite(270, 450, 'gamePiece');
gamePiece.anims.play("spin");La première ligne crée le joueur. C'est la même chose que de créer un sprite avec une seule image comme nous l'avons fait auparavant. La deuxième ligne définit l'animation pour qu'elle tourne . Spin est une animation inactive qui parcourt toutes les images de zéro à onze.
Maintenant, lorsque vous rechargez votre jeu, l'animation inactive commencera à jouer. Mais, vous remarquerez qu'il continue à jouer même après avoir déplacé votre personnage. La configuration des animations basées sur le mouvement est un peu plus délicate.
La tentation est de changer l'animation lorsque le joueur appuie sur le bouton comme nous l'avons fait pour définir le mouvement. Le problème avec cette approche est que nous vérifions si le joueur appuie sur une touche dans la fonction de mise à jour. La fonction de mise à jour exécute chaque image. Si nous y mettons une animation, l'animation redémarrera à chaque image que le joueur appuie sur la touche.
Pour résoudre ce problème, nous devons utiliser une méthode différente. Au lieu de vérifier si une clé est Down , nous voulons savoir si une clé est JustDown . JustDown n'est vrai que lorsque la touche est enfoncée pour la première fois. Si la clé est maintenue, ce n'est pas vrai. Si nous définissons l'animation avec JustDown, l'animation ne réinitialisera pas chaque image.
Vous devrez créer une variable pour l'entrée clé que vous souhaitez surveiller dans la fonction de création:
leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);Ensuite, vous voudrez vérifier si la touche est enfoncée dans la fonction de mise à jour:
if(Phaser.Input.Keyboard.JustDown(upKey)){
gamePiece.anims.play("up");
}Maintenant, le jeu passera à l'animation ascendante une fois que la touche haut sera enfoncée pour la première fois. Vous devrez écrire une instruction if similaire pour chaque touche de direction.
Nous avons encore une dernière modification à apporter. À l'heure actuelle, lorsque le joueur arrête d'appuyer sur une touche, la dernière animation continue à jouer. Nous voulons qu'il revienne à notre animation inactive. Pour ce faire, nous utilisons la méthode JustUp . Semblable à JustDown , il se déclenchera lorsque le joueur relâchera une clé.
if(Phaser.Input.Keyboard.JustUp(upKey)){
gamePiece.anims.play("spin");
}Une fois que le joueur arrête d'appuyer sur la touche haut, il remettra l'animation à notre animation de rotation inactive. Vous devrez écrire une déclaration similaire pour chaque touche de direction.
Pour voir le code final, accédez à pastebin .
Étape suivante: créez votre propre animation
La création d'animations dans Phaser n'est pas si différente de l'utilisation d'une image statique. Mais cela amènera le développement de votre jeu au niveau supérieur! Phaser facilite l'ajout d'animations afin que vous puissiez vous concentrer sur la partie difficile: créer l'animation!
Lors de la création de votre propre feuille de sprite, n'oubliez pas ces pointeurs:
- Les images d'animation doivent toutes avoir les mêmes dimensions
- Les trames seront stockées dans un tableau commençant à zéro
- Les animations nécessitent souvent des déclencheurs différents de ceux qui déclenchent le mouvement.