Phaser 4 Animations and Tweens

Phaser 4 has two distinct animation systems: frame-based sprite animations (flip through frames in a texture atlas or spritesheet) and tweens (interpolate numeric properties over time). Use both together for polished game feel.

Creating Spritesheet Animations

A spritesheet packs multiple frames into a single image in a regular grid. Define animations in AnimationManager using frame indices.

// preload()
preload(): void {
  this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 48,
    frameHeight: 48,
  });
}