Capítulo 22 — Sprites, sprite sheets y animación

Nivel: intermedio Duración estimada: 6 h Requisitos previos: capítulo 19 (Flutter acelerado), capítulo 20 (bucle de juego y delta time), capítulo 21 (coordenadas y dibujo con Canvas) Lo que sabrá hacer al final: cargar una imagen, dividirla en frames y mostrar un personaje animado cuya velocidad de animación no dependa del framerate, con o sin archivo de imagen en el disco.

22.0 — Objetivos del capítulo

Al final de este capítulo será usted capaz de:

• explicar qué es un sprite y en qué se diferencia de una forma dibujada a mano;
• elegir entre pixel art e ilustración, y extraer las consecuencias técnicas;
• explicar por qué un sprite es un PNG y nunca un JPEG;
• encontrar sprites libres de derechos y leer una licencia sin equivocarse;
• declarar una carpeta assets/ en pubspec.yaml con la indentación correcta;
• cargar una imagen con rootBundle.load y decodeImageFromList;
• explicar por qué esta carga es asíncrona y qué implica;
• precargar todas las imágenes antes de arrancar el bucle de juego;
• dibujar una imagen con canvas.drawImage();
• dibujar una porción de imagen con canvas.drawImageRect();
• redimensionar un sprite sin deformarlo;
• mantener el pixel art perfectamente nítido gracias a FilterQuality.none;
• voltear un sprite horizontalmente con scale(-1, 1);
• leer una sprite sheet y calcular el Rect de origen de cualquier frame;
• convertir un índice de frame en un par (fila, columna);
• escribir una clase SpriteSheet reutilizable;
• escribir una clase de animación que avance con el delta time;
• gestionar las animaciones sin bucle (muerte, ataque);
• organizar varias animaciones por personaje en una máquina de estados;
• cambiar de animación sin provocar un salto visual;
• reconocer y corregir el texture bleeding;
• leer un atlas y su archivo de descripción;
• generar usted mismo sus frames en código, sin descargar ni un solo archivo;
• crear un personaje animado que camina y se detiene.