animations

Creates and controls sprite animations in Phaser 4 using spritesheets, atlases, and animation events.

Updated Sep 20, 2026
One-click install
npx skills add https://github.com/AmirOssanloo/helix-game --skill animations-amirossanloo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animations
Source: https://github.com/AmirOssanloo/helix-game/tree/main/.claude/skills/animations
Command: npx skills add https://github.com/AmirOssanloo/helix-game --skill animations-amirossanloo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Managing sprite animations in Phaser 4 involves two distinct systems (the global AnimationManager and per-sprite AnimationState), plus many configuration options and event flows that are easy to misuse. This Skill provides the correct patterns for creating, playing, chaining, and debugging animations without trial and error. ## Core Features & Use Cases - Animation Creation: Build animations from spritesheets with generateFrameNumbers, from texture atlases with generateFrameNames, or directly from Aseprite JSON exports. - Playback Control: Play, reverse, pause, stop, chain, stagger, and mix animations with per-sprite or global timeScale control. - Events and Frame Callbacks: React to animationstart, animationcomplete, animationupdate, and key-specific events to trigger gameplay logic at exact frames. - Use Case: When building a hero attack sequence, define the attack animation once globally, play it on the sprite, chain back to idle, and use animationupdate to check for a hit exactly on frame 4. ## Quick Start Use the animations skill to create a looping walk animation from a spritesheet and play it on a sprite in my Phaser 4 scene.

Frequently Asked Questions about animations

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

FAQPage Schema
How do I create a sprite animation in Phaser 4?▼

Load a spritesheet in preload with this.load.spritesheet, then call this.anims.create with a key, frames from generateFrameNumbers, frameRate, and repeat. Play it on a sprite with sprite.play using the animation key.

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

AnimationManager is a global singleton accessed via this.anims that stores animation definitions shared across all scenes. AnimationState lives on each sprite as sprite.anims and controls playback for that specific game object.

How do I animate frames from a texture atlas in Phaser?▼

Use this.anims.generateFrameNames with the atlas key and a config specifying prefix, start, end, and zeroPad to build the frame array. Pass the result to this.anims.create as the frames property.

Why does animationcomplete not fire for my looping Phaser animation?▼

Animations with repeat set to -1 never complete naturally, so animationcomplete never fires. Call sprite.anims.stop to end them and listen for the animationstop event instead.

Can Phaser 4 import animations from Aseprite?▼

Yes, load the Aseprite PNG and JSON with this.load.aseprite, then call this.anims.createFromAseprite with the texture key to generate animations from its tags. Play them by tag name with sprite.play.

How do I chain animations in Phaser after one finishes?▼

Call sprite.chain with the next animation key, or an array of keys, after calling sprite.play. Chained animations start after animationcomplete or animationstop fires on the current animation.