Aller au contenu principal

Animer Pacman

Objectif​

Comprendre les bases de l'animation et du dessin sur canvas.

Notions théoriques​

L'animation dans un jeu vidéo est l'art de donner vie à nos personnages et objets.

En JavaScript, cela peut être réalisé grâce à la boucle d'animation, qui met à jour et dessine le jeu à chaque frame.

Une méthode courante pour créer une boucle d'animation est d'utiliser requestAnimationFrame, qui appelle une fonction de rappel avant le prochain rafraîchissement de l'écran, généralement à 60 images par seconde.

Dans React Native, nous allons continuer à utiliser le composant View pour dessiner à l'écran.

Pour animer ce composant, nous pouvons utiliser des animations déclaratives avec Animated ou des transitions CSS.

Exemple pratique​

Prenons l'exemple de Pacman.

Pour le faire bouger et animer son ouverture et fermeture de bouche, nous utiliserons :

  • des transitions CSS pour la douceur des mouvements
  • et des états pour changer son apparence à intervalles réguliers.

Quelques éléments de code à connaître​

  • setInterval: pour exécuter une action à intervalles réguliers.
  • clearInterval: pour arrêter l'action répétée définie par setInterval.
  • useState: pour définir l'état d'un composant dans React.
  • useEffect: pour exécuter du code à la suite d'un changement d'état.

Test de mémorisation/compréhension​


À quelle fréquence `requestAnimationFrame` exécute-t-elle généralement la fonction de rappel ?


Quelle méthode est souvent utilisée pour créer une boucle d'animation en JavaScript ?


Dans React Native, quel composant est équivalent à un 'canvas' en HTML5 ?


Quelle fonction React permet de définir un état dans un composant fonctionnel ?


Pourquoi utiliserions-nous `clearInterval` dans une animation ?


TP pour réfléchir et résoudre des problèmes​

Votre mission consiste à animer Pacman pour qu'il ouvre et ferme la bouche en se déplaçant dans le labyrinthe :

  1. Ajouter un état pacmanOuvert qui détermine si la bouche de Pacman est ouverte ou fermée.
  2. Utiliser setInterval dans useEffect pour alterner entre la bouche ouverte et fermée toutes les 200 millisecondes.
  3. Modifier le style de Pacman pour refléter l'état de la bouche.
  4. S'assurer de nettoyer l'intervalle avec clearInterval afin de ne pas bloquer le jeu.
remarque

C'est à vous de jouer maintenant !

Essayez de mettre en œuvre l'animation de Pacman et voyez comment il prend vie dans le labyrinthe.

Une solution