Animez vos personnages dans Phaser : Tutoriel expert sur les animations

L'ajout d'animations dans Phaser est simple et transforme vos personnages en éléments vivants et engageants. Animez leurs mouvements et ajoutez un état inactif pour plus de personnalité. Ce guide détaillé, basé sur une expertise en développement de jeux, vous accompagne pas à pas.

Configuration du jeu

Prérequis : une connaissance de base de Phaser. Si nécessaire, consultez un tutoriel introductif. Nous partons d'un personnage mobile contrôlé par les flèches directionnelles.

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

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

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

function create() {
  gamePiece = this.physics.add.sprite(300, 450, 'gamePiece');
  cursors = this.input.keyboard.createCursorKeys();
}

function update() {
  if (cursors.left.isDown) {
    gamePiece.x -= 2;
  }
  if (cursors.right.isDown) {
    gamePiece.x += 2;
  }
  if (cursors.up.isDown) {
    gamePiece.y -= 2;
  }
  if (cursors.down.isDown) {
    gamePiece.y += 2;
  }
}

Ce code crée un personnage (bloc orange) déplaçable sur fond bleu.

Créer une feuille de sprites

Créez une animation via un outil dédié, puis enregistrez-la en feuille de sprites : un fichier image unique avec des frames alignées de même taille.

Les frames sont indexées à partir de 0. Exemple : animation bas (0-3), gauche (4-7).

Ajouter une feuille de sprites à Phaser

Chargez-la comme une image, mais avec dimensions des frames :

this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
  frameWidth: 60,
  frameHeight: 60
});

Exemple avec flèche directionnelle et indicateur clignotant.

Créer des animations

Dans create(), définissez les animations :

this.anims.create({
  key: 'up',
  frameRate: 2,
  frames: this.anims.generateFrameNumbers('gamePiece', { start: 0, end: 2 }),
  repeat: -1
});

• anims : raccourci pour animations.
• key : nom de l'animation.
• frameRate : images par seconde.
• frames : plage de frames.
• repeat: -1 : boucle infinie.

Répétez pour chaque direction et l'état inactif ('spin').

Animer votre personnage

Utilisez this.add.sprite() pour les animations :

gamePiece = this.add.sprite(300, 450, 'gamePiece');
 gamePiece.anims.play('spin');

Pour les transitions fluides, gérez les entrées avec JustDown et JustUp :

// Dans create()
leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
// ... pour right, up, down

// Dans update()
if (Phaser.Input.Keyboard.JustDown(upKey)) {
  gamePiece.anims.play('up');
}
if (Phaser.Input.Keyboard.JustUp(upKey)) {
  gamePiece.anims.play('spin');
}

Répétez pour chaque direction. Code final sur Pastebin.

Prochaine étape : Créez votre animation

Phaser simplifie les animations pour booster vos jeux. Conseils :

• Frames de même taille.
• Indexation à partir de 0.
• Utilisez JustDown/JustUp pour les transitions.