skills.rest
autonomous-ai
autonomous-aiOFFICIAL
Explore all skills by this author →
Website𝕏@autonomous_labsGitHub

animations

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

465|41|Updated Aug 4, 2026
Search Tags:#game development#javascript#spritesheet#phaser#texture atlas#sprite animation#animation events
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill animations-autonomous-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animations
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/phaser/skills/animations
Command: npx skills add https://github.com/autonomous-ai/openharness --skill animations-autonomous-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building sprite animations in Phaser 4 requires coordinating the global AnimationManager, per-sprite AnimationState, frame generation from spritesheets or atlases, and event handling, which is error-prone without a consolidated reference. ## Core Features & Use Cases - Animation Creation: Define animations from spritesheets with generateFrameNumbers, from atlases with generateFrameNames, or from Aseprite JSON exports. - Playback Control: Play, reverse, pause, chain, stagger, and mix animations per sprite or globally, with repeat, yoyo, and timeScale options. - Event-Driven Logic: Hook animationstart, animationupdate, animationcomplete, and key-specific events to trigger gameplay logic at exact frames. - Use Case: Build a character controller where an attack animation plays once, chains into idle, and fires a hit-check callback on frame 4 via animationupdate. ## Quick Start Ask the AI to create a Phaser 4 sprite animation from a loaded spritesheet and play it on a sprite with a completion event handler.

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('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 from a texture atlas in Phaser?▼

Use this.anims.generateFrameNames with the atlas key and a config specifying prefix, start, end, and zeroPad to match frame names like ruby_0001. Then pass the result as the frames array in this.anims.create.

Why does animationcomplete not fire for my Phaser animation?▼

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

Can Phaser play animations from Aseprite files?▼

Yes. Load the Aseprite JSON and image with this.load.aseprite, then call this.anims.createFromAseprite with the key and optional tag list. Play animations by their Aseprite tag names.

How do I chain animations in Phaser 4?▼

Call sprite.chain('idle') after sprite.play('attack') to queue the next animation, or pass an array to chain multiple. Chained animations start after the current one completes or is stopped.

Related Skills

Explore More Software Engineering Skills→
GiantCroissant-LunarGiantCroissant-Lunar

animations

Create and manage Phaser 4 sprite animations with spritesheets and texture atlases.

Official
Intermediate
yogaprasetya22yogaprasetya22

bvhecctrl

Enable physics-inspired character movement with BVH-accelerated collision in React Three Fiber scenes.

Community
Advanced
WanderTheWeebWanderTheWeeb
1

sprites-and-images

Configure Phaser 4 Sprite and Image visuals with texture, frame, and component operations.

Community
Intermediate
phaserjsphaserjs
40.1k

tweens

Animate sprite properties over time in Phaser 4 using the TweenManager.

Official
Advanced