Chapitre 22 — Sprites, sprite sheets et animation

Niveau : intermédiaire Durée estimée : 6 h Pré-requis : chapitre 19 (Flutter en accéléré), chapitre 20 (boucle de jeu et delta time), chapitre 21 (coordonnées et dessin Canvas) Ce que vous saurez faire à la fin : charger une image, la découper en frames, et afficher un personnage animé dont la vitesse d'animation ne dépend pas du framerate — avec ou sans fichier image sur le disque.

22.0 — Objectifs du chapitre

À la fin de ce chapitre, vous serez capable de :

• expliquer ce qu'est un sprite et en quoi il diffère d'une forme dessinée à la main ;
• choisir entre pixel art et illustration, et en tirer les conséquences techniques ;
• expliquer pourquoi un sprite est un PNG et jamais un JPEG ;
• trouver des sprites libres de droits et lire une licence sans vous tromper ;
• déclarer un dossier assets/ dans pubspec.yaml avec la bonne indentation ;
• charger une image avec rootBundle.load et decodeImageFromList ;
• expliquer pourquoi ce chargement est asynchrone et ce que cela impose ;
• précharger toutes les images avant de démarrer la boucle de jeu ;
• dessiner une image avec canvas.drawImage() ;
• dessiner une portion d'image avec canvas.drawImageRect() ;
• redimensionner un sprite sans le déformer ;
• garder du pixel art parfaitement net grâce à FilterQuality.none ;
• retourner un sprite horizontalement avec scale(-1, 1) ;
• lire une sprite sheet et calculer le Rect source de n'importe quelle frame ;
• convertir un index de frame en couple (ligne, colonne) ;
• écrire une classe SpriteSheet réutilisable ;
• écrire une classe d'animation qui avance avec le delta time ;
• gérer les animations non bouclées (mort, attaque) ;
• organiser plusieurs animations par personnage dans une machine à états ;
• changer d'animation sans provoquer de saut visuel ;
• reconnaître et corriger le texture bleeding ;
• lire un atlas et son fichier de description ;
• générer vous-même vos frames en code, sans télécharger le moindre fichier ;
• réaliser un personnage animé qui marche et s'arrête.