Dans cette dernière activité, nous allons travailler sur l'animation des sprites. Pour suivre cette activité, il est nécessaire de télécharger l'archive suivante : anim_play.zip. Une fois cette archive téléchargée, placez les images contenues dans cette archive dans le dossier "asset".

L'animation d'un sprite est basée sur le principe du dessin animé : le "défilement" d'une série d'images fixes donne l'illusion du mouvement.

Avant de pouvoir animer un sprite, il faudra créer une animation. Il existe plusieurs méthodes permettant de créer une animation, nous allons en étudier 2.

À faire vous même 6.1

Saisissez le code suivant dans le fichier script.js et testez cet exemple

var perso;
var perso_walk;
function preload() {
	perso_walk = loadAnimation("asset/ghost_walk0001.png", "asset/ghost_walk0002.png",
	"asset/ghost_walk0003.png", "asset/ghost_walk0004.png");
}
function setup() {
	createCanvas(800,300);
	perso=createSprite(400,150);
	perso.addAnimation("walk",perso_walk);
	perso.changeAnimation("walk");

}
function draw() {
	background(240,240,240);
	drawSprites();
}
			

---

Analysons le code ci-dessus :

La méthode loadAnimation permet de créer une animation (nous "stockons" cette animation dans la variable perso_walk). La méthode loadAnimation prend en paramètres les différentes images qui composent l'animation : perso_walk = loadAnimation("asset/ghost_walk0001.png", "asset/ghost_walk0002.png","asset/ghost_walk0003.png", "asset/ghost_walk0004.png");

Une fois l'animation créée, il faut l'associer à un sprite en utilisant la méthode addAnimation : perso.addAnimation("walk",perso_walk);. Cette méthode prend en paramètres le nom de l'animation (walk) et l'animation elle-même (perso_walk).

La méthode changeAnimation permet de "jouer" l'animation, elle prend en paramètre le nom de l'animation à jouer : perso.changeAnimation("walk")

Il est possible d'associer plusieurs animations à un sprite :

À faire vous même 6.2

Saisissez le code suivant dans le fichier script.js et testez cet exemple

var perso;
var perso_walk;
function preload() {
	perso_walk = loadAnimation("asset/ghost_walk0001.png", "asset/ghost_walk0002.png",
	"asset/ghost_walk0003.png", "asset/ghost_walk0004.png");
	perso_wait = loadAnimation("asset/ghost_standing0001.png","asset/ghost_standing0002.png","asset/ghost_standing0003.png","asset/ghost_standing0004.png","asset/ghost_standing0005.png","asset/ghost_standing0006.png");
}
function setup() {
	createCanvas(800,300);
	perso=createSprite(400,150);
	perso.addAnimation("walk",perso_walk);
	perso.addAnimation("wait",perso_wait);
	perso.changeAnimation("wait");

}
function draw() {
	background(240,240,240);
	drawSprites();
}
function keyPressed(){
   if (keyCode==37){
   	perso.mirrorX(-1);
   	perso.changeAnimation("walk");
  }
  else if (keyCode==39){
  	perso.mirrorX(1);
  	perso.changeAnimation("walk");
  }
  else {
  	perso.changeAnimation("wait");
  }

}
function keyReleased(){
	perso.changeAnimation("wait");
}
			

---

Seule nouveauté dans l'exemple ci-dessus : l'utilisation de la méthode mirrorX (perso.mirrorX(-1) et perso.mirrorX(1)). Comme vous l'avez sans doute remarqué, dans le dossier "asset", nous n'avons pas d'image du personnage "regardant" vers la gauche. Pourtant, en appuyant sur la flèche gauche du clavier, nous avons bien une animation du personnage vers la gauche.

Ceci est possible grâce à la méthode mirrorX qui permet d'avoir "l'animation symétrique" (perso.mirrorX(-1) permet d'avoir "l'animation symétrique", perso.mirrorX(1) permet de retrouver l'animation dans le "bon sens".

P5.play propose aussi, pour créer des animations, d'utiliser des spritesheets (les images nécessaires à l'animation sont regroupées dans un unique fichier)

Exemple de spritesheet :

ATTENTION : visiblement, les exemples ci-dessous (6.3 et 6.4) ne fonctionnent pas avec les dernières versions de p5js. Vous devez donc utiliser une ancienne version de p5js à télécharger ici (clic de souris droit puis "Enregistrer sous") pour travailler sur les deux exemples suivants. N'oubliez pas, si nécessaire, de modifier le fichier index.html."

À faire vous même 6.3

Saisissez le code suivant dans le fichier script.js et testez cet exemple

var perso;
var perso_walk;
function preload() {
	perso_sprite_sheet_walk = loadSpriteSheet('asset/sonic_1.png', 48, 48, 6);
}
function setup() {
	createCanvas(800,300);
	perso=createSprite(400,150);
	perso_walk=loadAnimation(perso_sprite_sheet_walk);
	perso_walk.frameDelay=4;
	perso.addAnimation("walk",perso_walk);
	perso.changeAnimation("walk");
}
function draw() {
	background(240,240,240);
	drawSprites();
}
			

---

Analysons le code ci-dessus :

La méthode loadSpriteSheet (perso_sprite_sheet_walk = loadSpriteSheet('asset/sonic_1.png', 48, 48, 6)) va nous permettre d'utiliser un spritesheet pour créer notre animation. Cette méthode prend 4 paramètres : le chemin vers l'image qui servira de spritesheet, la largeur du sprite, la hauteur du sprite et le nombre d'images utilisé.

La méthode loadAnimation prend en paramètre le nom du spritesheet (loadAnimation(perso_sprite_sheet_walk)).

frameDelay (perso_walk.frameDelay=4) permet de modifier la vitesse de l'animation : plus la valeur est petite, plus l'animation est rapide (les différentes images défilent plus rapidement). Par défaut, frameDelay a pour valeur 2.

À faire vous même 6.4

Écrivez un programme permettant d'obtenir ceci (utilisez les flèches droite et gauche du clavier) :

---