Chap 3 – Création d’animations dans le développement de jeux avec Odin

Introduction

Dans le développement de jeux, l’animation est essentielle pour donner vie aux personnages et aux actions. Cet article explique comment remplacer un simple rectangle vert par un personnage animé dans un jeu créé avec le langage de programmation Odin et Raylib. Plus précisément, le tutoriel détaille l’intégration d’une animation de chat qui court, la gestion de la mise à l’échelle, la manipulation des images d’animation, et la gestion du retournement du personnage lorsqu’il change de direction.

Remplacer l’espace réservé par un personnage animé

Dans cette section, nous abordons le remplacement du rectangle vert initial par une sprite animée. Le rectangle vert est utilisé à l’origine comme un espace réservé pour le personnage du joueur, mais il manque d’animation. Pour rendre le jeu plus dynamique, une feuille de sprite est introduite, contenant quatre images d’un chat en train de courir.

Étapes pour charger et dessiner la texture

fichier cat_run.png

Pour remplacer le rectangle vert, la première tâche consiste à charger une texture contenant les images d’animation. Dans Odin, cela se fait en chargeant un fichier PNG appelé cat_run.png. Ce fichier contient quatre images représentant une animation du chat en train de courir. Une fois chargée, la texture est affichée dans le jeu.

  player_run_texture := rl.load_texture("cat_run.png")

Cette ligne assure que la texture est chargée une seule fois au démarrage du jeu, plutôt qu’à chaque image, ce qui éviterait rapidement des problèmes de mémoire.

Ensuite, le code dessine la texture à l’écran en remplaçant la fonction de dessin du rectangle par draw_texture_v, qui dessine l’image chargée.

draw_texture_v(player_run_texture, position, rl.white)

Cela affiche l’image complète, mais sans encore séparer les images individuelles de l’animation.

Mise à l’échelle du personnage pour une taille appropriée

Le rectangle vert d’origine était un espace réservé et devait être remplacé par la nouvelle sprite de manière à correspondre à la taille du jeu. L’image du nouveau personnage devait être correctement mise à l’échelle, car la sprite était plus petite que le rectangle de substitution.

En utilisant draw_texture_ex, la taille du personnage est multipliée par quatre pour correspondre au design du jeu.

draw_texture_ex(player_run_texture, position, 0, 4, rl.white)

Cette étape garantit que la sprite conserve une taille appropriée par rapport au monde du jeu.

Gestion des images d’animation

La feuille de sprite contient plusieurs images qui montrent différentes étapes de la course du chat. Pour créer une animation, le jeu doit passer en revue ces images. Chaque image est affichée pendant une brève période (0,1 seconde), donnant l’illusion du mouvement.

Le code définit un rectangle source qui capture une seule image de la feuille de sprite à la fois. Ce rectangle est déplacé horizontalement pour afficher chaque image à tour de rôle.

player_run_num_frames := 4
source_rect := rl.rectangle(0, 0, player_run_width / player_run_num_frames, player_run_height)

Le rectangle source est calculé en fonction de la largeur de l’image et du nombre d’images.

Timing des images et animation fluide

L’animation nécessite un timing précis pour s’assurer que chaque image est affichée pendant la durée correcte. Un minuteur est mis en place pour suivre la durée pendant laquelle l’image actuelle est affichée. Une fois que le minuteur dépasse la durée d’affichage définie (0,1 seconde), le jeu passe à l’image suivante.

player_run_frame_timer += rl.get_frame_time() if player_run_frame_timer > player_run_frame_length {
  player_run_current_frame++
  player_run_frame_timer = 0
}

Cette approche basée sur un minuteur garantit que l’animation fonctionne de manière fluide et cohérente, quel que soit le taux de rafraîchissement.

Inversion du personnage pour les changements de direction

Lorsque le joueur se déplace vers la gauche, le chat doit se retourner pour faire face à cette direction. Pour ce faire, le jeu retourne la sprite horizontalement en modifiant la largeur du rectangle source à une valeur négative.

if player_flip {
  source_rect.width = -source_rect.width
}

Cette opération simple reflète la sprite, créant l’illusion que le chat s’est retourné lorsqu’il se déplace vers la gauche.

Gestion de la mémoire et des performances

Un aspect clé du développement de jeux est la gestion efficace des ressources, comme les textures. En s’assurant que les textures sont chargées une seule fois et stockées en mémoire, plutôt que rechargées à chaque image, le jeu évite les goulets d’étranglement de performances.

De plus, la mise à l’échelle et l’inversion sont gérées au niveau du GPU pour profiter de l’accélération matérielle, garantissant ainsi des performances fluides même lorsque le jeu devient plus exigeant graphiquement.

Conclusion

À la fin de ce tutoriel, le simple rectangle vert a été remplacé par un personnage entièrement animé et dynamique. Le joueur dispose maintenant d’un chat qui court de manière fluide à l’écran, se retourne lorsque nécessaire, et est correctement mis à l’échelle pour s’adapter à l’univers du jeu.

Ce processus de chargement, mise à l’échelle, dessin et animation des personnages est fondamental dans le développement de jeux, et les techniques démontrées ici peuvent être étendues à des animations et des éléments de jeu plus complexes.