skills.rest
mudman1986
mudman1986COMMUNITY
Explore all skills by this author →
GitHub

animations

Create and control sprite animations in Phaser 4 using spritesheets, atlases, and animation events.

Updated Jun 10, 2026
Search Tags:#game development#javascript#atlas#spritesheet#phaser#sprite animation#animation events
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill animations-mudman1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animations
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/animations
Command: npx skills add https://github.com/mudman1986/quarterless --skill animations-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Phaser's animation system spans two distinct objects (the global AnimationManager and per-sprite AnimationState) with many configuration options, events, and edge cases. This Skill provides a complete reference so you can create, play, chain, and debug sprite animations without digging through Phaser source code. ## 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, resume, stop, chain, and stagger animations, with support for yoyo, repeat, per-frame durations, timeScale, and animation mixing between states. - Event-Driven Logic: Hook into animationstart, animationupdate, animationcomplete, and key-specific events to trigger gameplay logic at exact frames. - Use Case: You are building a platformer character and need an attack animation that plays once, checks a hitbox on frame 4, then chains back to idle. This Skill shows the exact play, chain, and animationupdate patterns to implement it. ## Quick Start Ask the AI to create a looping walk animation from a loaded spritesheet and play it on a sprite in a 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. Finally call sprite.play with the animation key to start playback.

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, with local animations taking priority over global ones.

How do I play one animation after another in Phaser?▼

Use sprite.chain to queue animations that start after the current one completes or stops. You can chain a single key or an array of keys, and clear the queue by calling sprite.anims.chain with no arguments.

Why does animationcomplete never fire for my Phaser animation?▼

Animations with repeat set to -1 loop forever and never fire animationcomplete. Call stop to end them manually and listen for the animationstop event instead, which also triggers any chained animations.

Can Phaser animations use Aseprite files?▼

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.

Why does setting duration not change my Phaser animation length?▼

When both frameRate and duration are set, frameRate wins and duration is derived from it. To control total length directly, set only duration and leave frameRate null so Phaser calculates the rate for you.

Related Skills

Explore More Software Engineering Skills→
onemankingonemanking

loading-assets

Loads images, audio, atlases, fonts, and tilemaps through the Phaser Loader plugin.

Community
Intermediate
BasarEkinciBasarEkinci

animation

Coordinate Unity Animator parameters, transitions, layers, and timed callbacks for gameplay.

Community
Advanced
Tai-ch0802Tai-ch0802
2

2d-games

Guide 2D game development covering sprites, tilemaps, physics, and camera systems.

Community
Intermediate
WanderTheWeebWanderTheWeeb
1

tweens

Animate object properties over time in Phaser 4 using TweenManager.

Community
Advanced