Sprites y animaciones de personaje

En el módulo 13 animaste un personaje recortando una tira de dibujos a mano con drawImage. Phaser tiene un sistema de animaciones dedicado: le das un spritesheet, defines las animaciones una vez, y luego un sprite.play("correr") reproduce el ciclo por ti. Menos código, más control — y el mismo concepto de folioscopio que ya entiendes.

El flujo de animación en Phaser

Así es el flujo real con un spritesheet de verdad (un PNG):

function preload() {
// cargar el spritesheet indicando el tamaño de CADA cuadro
this.load.spritesheet("heroe", "heroe.png", { frameWidth: 32, frameHeight: 32 });
}

function create() {
// definir la animacion UNA vez: qué cuadros, a qué ritmo, en bucle
this.anims.create({
  key: "correr",
  frames: this.anims.generateFrameNumbers("heroe", { start: 0, end: 3 }),
  frameRate: 8,
  repeat: -1,          // -1 = bucle infinito
});

this.heroe = this.add.sprite(200, 130, "heroe");
this.heroe.play("correr");   // reproduce; Phaser pasa los cuadros solo
}

Dos piezas nuevas: sprite (no image) es un objeto que SÍ puede animarse — usa sprite para todo lo que se mueva/anime, image para decoración estática. Y generateFrameNumbers enumera los cuadros del spritesheet sin que cuentes píxeles. El frameRate es tu tick % 8 del módulo 13, ahora declarativo.

Un personaje animado (autocontenido)

Para que el demo no dependa de descargar un PNG, generamos las poses por código y las intercambiamos — el mismo mecanismo de "avanzar el cuadro con el tiempo", visible por dentro:

En un proyecto real usarías el flujo del CodeBlock de arriba (spritesheet + anims.create + play), que además maneja transiciones entre animaciones (idle → correr → saltar) por ti. Aquí ves el engranaje por dentro para que el sistema anims no te parezca magia — es exactamente tu folioscopio del módulo 13.

Mini-reto

Añade un segundo estado de animación al personaje: cuando NO se mueva, que muestre solo pose0 (idle), y solo cicle los cuadros cuando haya input (combínalo con los cursores de la lección 2). Es la base de las máquinas de animación: el ESTADO del personaje (quieto, corriendo, saltando) decide qué animación reproducir — exactamente lo que this.anims orquesta en un juego real.

Qué sigue

Tu personaje se ve vivo, pero aún flota sin peso ni límites. La próxima lección enciende la física arcade de Phaser en serio: gravedad, velocidad, y las colisiones/solapamientos DECLARATIVOS que reemplazan todos los if de AABB que escribiste a mano en el módulo 13.