animations

Manage sprite animation sequences and playback states in Phaser 4.

Updated Mar 27, 2026

Search Tags:#animations #gamedev #webgl #phaser #spritesheets #animationmanager

Ready to run

npx skills add https://github.com/tja688/WebGameDevPlace --skill animations-tja688

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: animations
Source: https://github.com/tja688/WebGameDevPlace/tree/main/.claude/skills/animations
Command: npx skills add https://github.com/tja688/WebGameDevPlace --skill animations-tja688

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill simplifies the complex management of sprite animations in Phaser 4, resolving issues related to global vs. local animation scope, frame timing, and event handling.

Core Features & Use Cases

Animation Lifecycle Management: Easily create, play, chain, and mix animations using both spritesheets and texture atlases.
Advanced Playback Control: Fine-tune animations with yoyo effects, repeat delays, time scaling, and frame-level callbacks.
Use Case: Use this skill to implement a character state machine where an attack animation automatically chains into an idle animation, or to stagger the playback of multiple enemy sprites to create a more natural visual effect.

Quick Start

Use the animations skill to define a new global animation named walk using the player_walk spritesheet at 12 frames per second with infinite looping.

Frequently Asked Questions about animations

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

FAQPage Schema

How do I chain sprite animations in Phaser 4?▼

You can chain sprite animations in Phaser 4 by managing animation sequences and playback states, allowing an action like an attack animation to automatically transition into an idle state upon completion.

What is the difference between global and local animations in Phaser?▼

Global animations in Phaser are defined once and shared across all game objects, while local animations are scoped to individual sprites, allowing you to manage unique playback states and complex animation transitions per object.

How do I use a spritesheet and texture atlas for Phaser 4 animation playback?▼

You use this skill to create and play animations by integrating both spritesheets and texture atlases, enabling precise frame timing control and advanced playback features like yoyo effects and repeat delays.

Can I stagger playback timing for multiple enemy sprites in Phaser?▼

Yes, you can stagger the playback of multiple enemy sprites by utilizing advanced playback controls such as time scaling and repeat delays, creating a natural visual effect across game objects.

How do I trigger frame-level callbacks during a Phaser 4 animation?▼

You trigger frame-level callbacks by utilizing the event-driven animation management features, which allow specific functions to execute at precise frames during the sprite animation playback sequence.