skills.rest
WanderTheWeeb
WanderTheWeebCOMMUNITY
Explore all skills by this author →
GitHub

animations

Create and control Phaser 4 sprite animations with AnimationManager and AnimationState.

1|Updated May 3, 2026
Search Tags:#sprite animations#game events#texture atlas#phaser4#spritesheets#animationmanager#animationstate
One-click install
npx skills add https://github.com/WanderTheWeeb/papas_trauma --skill animations-wandertheweeb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animations
Source: https://github.com/WanderTheWeeb/papas_trauma/tree/main/skills/animations
Command: npx skills add https://github.com/WanderTheWeeb/papas_trauma --skill animations-wandertheweeb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of creating, controlling, and synchronizing Phaser 4 sprite animations without getting lost in global vs local animation state.

Core Features & Use Cases

  • Build animations from spritesheets and atlases: Use generateFrameNumbers and generateFrameNames to define precise playback sequences for different texture sources.
  • Play, chain, mix, and time animations: Manage playback on a per-sprite AnimationState while using global AnimationManager features like mixes and staggered starts.
  • React to animation lifecycle events: Handle animationstart, animationupdate, animationrepeat, animationcomplete, animationstop, and key-specific events for deterministic gameplay logic.
  • Use advanced playback controls: Pause/resume/stop, reverse playback, yoyo, random start frames, and per-frame duration tweaking for nuanced motion.

Quick Start

Define a global animation from a loaded spritesheet using this.anims.create(...), then play it on a sprite with sprite.play('explode') when creating your scene.

Frequently Asked Questions about animations

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

FAQPage Schema
How do I control sprite animations in Phaser 4?▼

Control sprite animations in Phaser 4 by defining sequences globally with AnimationManager and managing per-sprite playback state through AnimationState. This approach handles playing animations on demand, controlling timing with repeats, chaining, and mixing across loaded spritesheets.

How do I play and chain sprite animations on a per-sprite basis?▼

Play and chain sprite animations by interacting with the per-sprite AnimationState to manage playback, while leveraging global AnimationManager features for mixes and staggered starts. This allows precise timing control through repeats, chaining, and yoyo playback.

What Phaser 4 events can I listen to for animation lifecycle updates?▼

Listen to Phaser 4 animation lifecycle events including animationstart, animationupdate, animationrepeat, animationcomplete, and animationstop. These key-specific event callbacks provide deterministic gameplay logic by responding to frame-level updates and playback transitions.

How do I generate animation frames from a texture atlas and spritesheet?▼

Generate animation frames from a texture atlas and spritesheet using generateFrameNames and generateFrameNumbers respectively. These methods define precise playback sequences from different texture sources within the AnimationManager for on-demand scene playback.

Can I pause, reverse, or tweak per-frame duration for Phaser 4 animations?▼

Pause, resume, reverse, and tweak per-frame duration for Phaser 4 animations using advanced playback controls. AnimationState supports yoyo, random start frames, and per-frame duration adjustments to create nuanced motion without losing global synchronization.

Why use AnimationManager and AnimationState separately for spritesheet playback?▼

Use AnimationManager and AnimationState separately to avoid losing track of global versus local animation state. AnimationManager handles global animation registration, while AnimationState controls individual sprite playback, ensuring reliable timing and event coordination.

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
BasarEkinciBasarEkinci

animation

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

Community
Advanced
Mineru98Mineru98

phaser-gamedev

Create 2D games with Phaser 3 including scenes, sprites, physics, and input handling.

Community
Intermediate
fyunusafyunusa

pixijs-2d

Render 2D graphics with PixiJS using WebGL and WebGPU.

Community
Intermediate