L’animation du personnage va consister à afficher une suite d’images donnant l’impression que le personnage bouge.
Ici, notre animation est composée de 4 images :
Ce qui donne animé (au ralenti) :
Pour afficher ces 4 images à la suite et en boucle, nous allons utiliser comme numéro de l’image à afficher le reste de la division euclidienne du numéro de l’image du jeu vidéo (frameCount) par 4 : frameCount%4
Malheureusement, cela revient à une animation trop rapide, mais en modifiant légèrement cette formule, nous arrivons à un résultat plus satisfaisant (ce qui est discutable, car subjectif) :
int((frameCount%16)/4)
Exercice : Essayez de comprendre pourquoi ce calcul conduit à ralentir l’animation on pourra utiliser un tableau du type ci-dessous).
Nous allons aussi tenir compte du sens de déplacement du personnage (gauche ou droite), ce qui nous conduit à utiliser 8 images en tout.
Les modifications du code sont les suivantes :
- dans la fonction setup , la variable imgperso est maintenant une liste d’images (pour être précis, une double liste d’images, une pour la direction gauche, l’autre pour la direction droite)
- la classe personnage se dote de 2 nouveaux attributs :
1 2 |
self.numpic=0 # numero de l'image du personnage (pour l'animation) self.dir=1 # direction des images : 0 pour gauche, 1 pour droite |
- la méthode affiche de la classe personnage est modifiée :
1 2 |
self.numpic=int((environment.frameCount%16)/4) image(imgPerso[self.dir][self.numpic],self.x,self.y,24,32) # on affiche l'image du personnage |
Ça commence à ressembler à quelque chose, non ?
Je vous propose, avant de s’atteler aux plateformes et aux collisions, de rajouter un fond animé. D’une part parce que c’est plus joli, mais aussi parce que ce serait difficile à rajouter après, puisque cela aura une incidence sur les coordonnées des divers objets qui composeront notre jeu.
C’est parti pour la suite : un joli fond animé, à la mode parallaxe.