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'intégrer l'animation dans votre jeu consiste à animer les mouvements de votre personnage. Vous pouvez même leur donner une animation d'état inactif qui s'exécutera lorsque le joueur ne bouge pas du tout. Cela donnera plus de personnalité à vos personnages.
Vous aurez besoin d'une compréhension de base de Phaser pour travailler avec des animations. Si vous n'êtes pas familier avec Phaser, commencez par un didacticiel de jeu de base avant de continuer. Ce didacticiel s'appuiera sur ces bases.
Pour commencer, créez un jeu avec un personnage mobile. Dans notre exemple, nous commencerons par un bloc que l'on déplacera avec les touches fléchées. Ci-dessous le code de démarrage :
var config ={
type :Phaser.AUTO,
backgroundColor:0xCCFFFF ,
largeur :600,
hauteur :600,
la physique:{
par défaut :'arcade'
},
scène :{
précharge :précharge,
créer :créer,
mise à jour :mise à jour
}
} ;
var pièce de jeu ;
var keyInputs ;
var game =new Phaser.Game(config);
fonction précharger(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
fonction créer(){
gamePiece =this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs =this.input.keyboard.createCursorKeys();
}
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 ;
}
} Ce code créera une pièce de jeu qui peut se déplacer sur un fond bleu. Pour plus de simplicité, l'exemple utilise simplement un bloc orange pour le personnage du jeu. Il ressemble à ceci :
La première étape consiste à créer l'animation. Il existe de nombreuses façons de créer des animations, mais cela dépasse ce que nous pouvons couvrir ici. Pour nos besoins, il est simplement important que vous enregistriez votre animation sous forme de feuille de sprite.
Une feuille de sprites est un fichier image unique qui contient un ensemble d'images d'animation. Chaque image de l'animation est placée à côté de celle qu'elle suit. Chaque cadre doit avoir 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 vers le bas commence à zéro et se termine à trois. L'animation de gauche commence à quatre heures et se termine à sept heures.
Le chargement d'une feuille de sprites 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 chargeions notre image avec ce texte :
this.load.image('gamePiece', 'img/gamePiece.png'); Les feuilles de sprites, cependant, ont besoin de quelques paramètres supplémentaires. Il faut aussi préciser les dimensions d'un cadre. Ainsi, pour charger une feuille de sprites, nous devons ajuster le code comme suit :
this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
largeur du cadre :60,
hauteur du cadre :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 cadres 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 alors qu'un indicateur clignote dans cette direction. Si le personnage ne bouge pas, l'animation parcourt toutes les images.
Avant de pouvoir animer notre personnage, nous devons créer l'animation. Nous avons déjà téléchargé la feuille de sprites, 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({
touche :"vers le haut",
fréquence d'images :2,
frames :this.anims.generateFrameNumbers("gamePiece", {début :0, fin :2}),
répétition :-1
}); Ci-dessus, l'animation pour le haut orientation.
Vous devrez créer une animation pour chaque direction et l'état d'inactivité.
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émarrage 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 sur spin . Spin est une animation inactive qui parcourt toutes les images de zéro à onze.
Maintenant, lorsque vous rechargez votre jeu, l'animation d'inactivité 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 mettions une animation, l'animation redémarrerait à chaque image où le joueur appuie sur la touche enfoncée.
Pour résoudre ce problème, nous devons utiliser une méthode différente. Au lieu de vérifier si une clé est en panne , 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 vers le haut une fois que la touche vers le haut sera enfoncée pour la première fois. Vous devrez écrire une instruction if similaire pour chaque touche de direction.
Il nous reste encore une dernière modification à apporter. À l'heure actuelle, lorsque le joueur arrête d'appuyer sur une touche, la dernière animation continue de jouer. Nous voulons qu'il revienne à notre animation inactive. Pour ce faire, nous utilisons le JustUp méthode. Similaire à JustDown , il se déclenchera lorsque le joueur relâchera une touche.
if(Phaser.Input.Keyboard.JustUp(upKey)){
gamePiece.anims.play("spin");
} Une fois que le joueur arrête d'appuyer sur la touche haut, l'animation reviendra à notre animation de rotation inactive. Vous devrez écrire une déclaration similaire pour chaque touche de direction.
Pour voir le code final, allez dans pastebin.
La création d'animations dans Phaser n'est pas très 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 la plus difficile :créer l'animation !
Lorsque vous créez votre propre feuille de sprites, n'oubliez pas ces pointeurs :