3 – Animation du personnage

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 :

• la méthode affiche de la classe personnage est modifiée :

Sans transition, vous pouvez tester le résultat (rappel : le triangle pour lancer puis cliquer dans la fenêtre – touches q, d, espace – le crayon pour éditer le code) :

Ç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.