skills.rest
onemanking
onemankingCOMMUNITY
Explore all skills by this author →
GitHub

animations

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

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

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, events, and edge cases that are easy to misuse. This Skill provides the correct patterns and API references so you can build animations without trial and error. ## 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, with repeat, yoyo, timeScale, and per-frame duration options. - Events and Runtime Editing: React to animationstart, animationcomplete, animationupdate, and key-specific events, and modify animation frames at runtime. - Use Case: You are building a Phaser game character that needs an idle loop, an attack animation that chains back to idle, and a hit callback on a specific frame. This Skill gives you the exact create/play/chain/event code to implement it. ## Quick Start Ask the AI to create a looping walk animation from a spritesheet and play it on a sprite in your Phaser 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?▼

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

How do I play an animation 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 list. Then pass those frames to this.anims.create and play the animation by key.

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

AnimationManager (this.anims) is a global singleton that stores animation definitions shared across all scenes. AnimationState (sprite.anims) lives on each sprite and controls playback for that object, and local animations take priority over global ones with the same key.

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

An animation with repeat set to -1 never completes, so animationcomplete never fires. Call sprite.anims.stop() to end it and listen for the animationstop event instead.

Does Phaser support Aseprite animations?▼

Yes. Load the Aseprite files 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('nextKey') after starting the first animation, or pass an array to chain multiple. Chained animations start after animationcomplete or animationstop, and you can clear the queue with sprite.anims.chain().

Related Skills

Explore More Software Engineering Skills→
travispwingotravispwingo

loading-assets

Load images, audio, atlases, tilemaps, and fonts with the Phaser Loader plugin.

Community
Intermediate
BasarEkinciBasarEkinci

animation

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

Community
Advanced
travispwingotravispwingo

sprites-and-images

Creates and manipulates Sprite and Image game objects in Phaser 4 scenes.

Community
Intermediate
XyrcesXyrces
2

2D Animation Systems

Designs ECS-driven 2D animation systems for Godot 4.x characters and UI.

Community
Advanced