animations

Manage sprite animations with global and per-sprite states in Phaser 4.

40.1k|7.2k|Updated Apr 12, 2013
One-click install
npx skills add https://github.com/phaserjs/phaser --skill animations-phaserjs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animations
Source: https://github.com/phaserjs/phaser/tree/main/skills/animations
Command: npx skills add https://github.com/phaserjs/phaser --skill animations-phaserjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating and controlling sprite animations in Phaser 4 requires coordinating a global AnimationManager with per-sprite AnimationState, handling timing, events, and transitions across multiple objects. This guide explains how to use the built-in animation system to simplify common animation workflows.

Core Features & Use Cases

  • Global AnimationManager for shared animations and per-sprite AnimationState for local playback.
  • Support for spritesheets and atlases, frame timing, chaining, and animation events.
  • Real-world workflows include creating looping character runs, item pickups with event hooks, and synchronized animations across a group of sprites.

Quick Start

Load your assets (spritesheet or atlas), create an animation with this.anims.create, and then play it on a sprite.

Frequently Asked Questions about animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create and play sprite animations in Phaser 4?▼

To create sprite animations in Phaser 4, load your spritesheet or atlas, define the animation using the global AnimationManager create method, and trigger playback on a sprite via its AnimationState play endpoint.

What is the difference between AnimationManager and AnimationState in Phaser?▼

The AnimationManager is a global system that defines and stores shared animation data, while AnimationState is a per-sprite component that controls local playback, timing, and events for that specific object.

Can I chain multiple sprite animations together in Phaser?▼

Yes, Phaser supports animation chaining. You can use the chain API endpoint to sequence animations so that one playback transitions directly into another upon completion without manual event listeners.

Does Phaser 4 support per-frame duration and timing options for spritesheets?▼

Yes, Phaser 4 supports per-frame duration and timing options. You can define custom timing for individual frames within spritesheets and atlases to control playback speed dynamically.

How do I synchronize animation events across multiple sprites in Phaser?▼

You can synchronize animations across multiple sprites by attaching event hooks during creation. The animation system emits events that allow you to coordinate actions like item pickups across groups.

Can I export and import Phaser animation configurations as JSON?▼

Yes, the Phaser animation system exposes JSON export and import endpoints. You can serialize your animation workflows into JSON format and reload them to scale configurations across projects.