skills.rest
GiantCroissant-Lunar
GiantCroissant-LunarOFFICIAL
Explore all skills by this author →
GitHub

animations

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

Updated Apr 16, 2026
Search Tags:#animation#atlas#sprite#spritesheet#phaser#game-development
One-click install
npx skills add https://github.com/GiantCroissant-Lunar/proto-breakout --skill animations-giantcroissant-lunar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animations
Source: https://github.com/GiantCroissant-Lunar/proto-breakout/tree/main/.agent/skills/01-phaser/animations
Command: npx skills add https://github.com/GiantCroissant-Lunar/proto-breakout --skill animations-giantcroissant-lunar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Animation management in Phaser 4 can be verbose; this Skill provides a structured approach to creating and controlling sprite animations using spritesheets and atlases, including global AnimationManager, per-sprite AnimationState, and events.

Core Features & Use Cases

  • Global vs local animations: define shared animations with AnimationManager and sprite-local animations with AnimationState.
  • Comprehensive playback controls: play, pause, stop, chain, reverse, timeScale, and per-playback overrides.
  • Events and runtime customization: handle animation events (start, update, complete, etc.) and per-frame durations.

Quick Start

Create a global or local animation with this.anims.create and play it on a sprite with sprite.play('key').

Frequently Asked Questions about animations

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

FAQPage Schema
How do I create and play Phaser 4 sprite animations?▼

To create Phaser 4 sprite animations, define them globally with this.anims.create or locally via AnimationState, then trigger playback on a sprite using sprite.play('key') after loading your spritesheet or atlas assets.

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

Global AnimationManager defines shared animations accessible across all sprites, while local AnimationState allows creating sprite-specific animations. This distinction lets you manage both reusable and unique animation sequences within your Phaser 4 game.

Can I chain sprite animations or adjust playback speed in Phaser 4?▼

Yes, Phaser 4 sprite animations support chaining sequences together, reversing playback, and adjusting speed using timeScale. You can also apply per-frame durations and specific overrides for each individual playback instance.

What animation events can I listen for during Phaser 4 sprite playback?▼

Phaser 4 sprite animations emit events throughout the playback lifecycle, including start, update, and complete. You can attach handlers to these events to trigger custom game logic when animations begin, progress, or finish.

Do I need a texture atlas to use Phaser 4 sprite animations?▼

You can use either spritesheets or texture atlases for Phaser 4 sprite animations. The system requires integration with assets loaded via these formats to correctly map and sequence animation frames.

How do I pause or stop a Phaser sprite animation at runtime?▼

Phaser 4 sprite animations provide comprehensive playback controls that allow you to pause, stop, and resume animations directly at runtime. These controls are accessible through the AnimationState interface on the sprite.

Related Skills

Explore More Software Engineering Skills→
AhmedAbdelmoatyAhmedAbdelmoaty

phaser4-gamedev

Build and migrate Phaser 4 2D browser games with rendering and asset validation.

Community
Advanced
XeldarAlzXeldarAlz
3

animation

Configure Unity Animator controllers, layers, blend trees, and animation events.

Community
Advanced
simon-tannasimon-tanna

phaser-gamedev

Build 2D games with Phaser 3 scenes, physics, and tilemaps.

Community
Advanced
diegolinharesdiegolinhares

animations

Automates sprite animation creation and management in Phaser 4 games.

Community
Intermediate