Les animations en Pygame¶

Donnez vie à vos personnages en Pygame grâce aux animations et aux sprite sheets.

Qu’est-ce qu’une animation ?¶

Une animation, ce n’est pas une image qui bouge toute seule.

C’est :

plusieurs images légèrement différentes
affichées l’une après l’autre
très rapidement

Par exemple : marcher, courir, sauter.

Sprite sheet¶

La plupart du temps, les animations sont regroupées dans une sprite sheet :

une seule image
contenant plusieurs poses du personnage

Chaque pose correspond à une “frame” de l’animation.

Pas mal de spritesheets de vieux jeux sont disponibles gratuitement sur The Spriters Ressource, si vous avez la flemme de dessiner vous mêmes vos personnages (ou si comme moi vous avez un manque de talent artistique aigu).

Charger plusieurs images¶

La manière la plus simple de commencer est d’utiliser une image par frame.

walk_frames = [
    pygame.image.load("assets/walk1.png").convert_alpha(),
    pygame.image.load("assets/walk2.png").convert_alpha(),
    pygame.image.load("assets/walk3.png").convert_alpha(),
]

Ça vous demande de découper les spritesheets à la main à l'aide de Gimp par exemple, mais pour l'instant, c'est le plus simple.

Changer de frame avec le temps¶

On va utiliser un compteur :

frame_index = 0
animation_speed = 0.2

À chaque frame du jeu :

frame_index += animation_speed
if frame_index >= len(walk_frames):
    frame_index = 0

Pour afficher la bonne image :

current_image = walk_frames[int(frame_index)]
screen.blit(current_image, player_rect)

Lier animation et mouvement¶

On peut décider :

d’animer seulement quand le joueur bouge
sinon afficher une image “idle”

Exemple :

if moving:
    image = walk_frames[int(frame_index)]
else:
    image = idle_image

Exemple minimal d’animation¶

frame_index = 0
animation_speed = 0.2

# dans la boucle de jeu
frame_index += animation_speed
if frame_index >= len(frames):
    frame_index = 0

screen.blit(frames[int(frame_index)], player_rect)

C’est tout. Pas besoin de plus pour avoir une animation fluide.

À propos du timing¶

L’animation dépend du temps, pas du clavier.

C’est pour ça qu’on :

incrémente frame_index petit à petit
et pas de 1 à chaque frame

Sinon l’animation serait beaucoup trop rapide.

Quizz¶

frame_index += 0.2
image = frames[int(frame_index)]

Pourquoi utilise-t-on `int(frame_index)` ?
- Pour accélérer l’animation
- Pour éviter une erreur
- *Parce qu’un indice de liste doit être un entier
- Pour gérer la transparence
> Les indices de liste doivent être des entiers.

Exercice pratique¶

Ajoutez une animation à un joueur qui se déplace horizontalement :

Utilisez au moins 3 images (par exemple prenez le sprite de Mario dans Super Mario Bros)
Animez le joueur quand il se déplace
Affichez une image fixe quand il ne bouge pas

En résumé¶

Vous savez maintenant :

Ce qu’est une animation 2D
Charger plusieurs images pour une animation
Changer d’image avec le temps
Lier une animation au gameplay
Donner de la vie à un personnage

Avec ça, vos jeux passent d’un prototype à quelque chose de visuellement crédible.