skills.rest
ArtRiv
ArtRivCOMMUNITY
Explore all skills by this author →
GitHub

animations

Manage Phaser 4 sprite animations with global definitions and per-sprite playback.

Updated Feb 11, 2026
Search Tags:#sprite animations#spritesheet#aseprite#phaser#texture atlas#animation events#animation manager
One-click install
npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill animations-artriv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animations
Source: https://github.com/ArtRiv/game-topicos-especiais/tree/main/skills/animations
Command: npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill animations-artriv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you reliably create, play, chain, pause, and debug sprite animations in Phaser by organizing global AnimationManager definitions and per-sprite AnimationState playback.

Core Features & Use Cases

  • Create animations from spritesheets and atlases using frame generation helpers like generateFrameNumbers and generateFrameNames, including custom frame sequences and zero-padded atlas naming.
  • Play and control animations per sprite or globally with play, playReverse, stop, pause/resume, repeat/yoyo behavior, timeScale overrides, and frame-based stopping.
  • React to animation lifecycle with events and callbacks, including animationcomplete/animationstop and per-frame animationupdate checks for hit detection or gameplay timing.
  • Use advanced playback features like chaining (per sprite), animation mixing delays (with play), staggered starts across groups, JSON export/import, and Aseprite tag-based generation.

Quick Start

Use the animations skill to define a global Phaser animation from a loaded spritesheet and then play it on a sprite using its animation key, for example creating an 'explode' animation via this.anims.create and triggering sprite.play('explode').

Frequently Asked Questions about animations

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

FAQPage Schema
How do I create Phaser sprite animations from a spritesheet or texture atlas?▼

Play and control per-sprite AnimationState playback in Phaser using sprite.play, playReverse, pause, resume, and stop methods, while configuring repeat, yoyo, and timeScale behaviors to adjust animation looping and speed.

Can I chain multiple Phaser sprite animations together sequentially?▼

Yes, you can chain multiple Phaser sprite animations sequentially per sprite using the sprite.chain API, which queues subsequent animations to play automatically after the current animationcomplete event fires.

How do I detect animationcomplete and animationupdate events in Phaser?▼

Detect Phaser animation lifecycle changes by listening to animationstart, animationupdate, animationcomplete, and animationstop events, using their signature parameters (animation, frame, gameObject, frameKey) for hit detection or gameplay timing.

Does Phaser support Aseprite tag-based animation generation?▼

Yes, Phaser supports Aseprite tag-based animation generation, allowing you to automatically create and define sprite animations from Aseprite tag metadata imported alongside your spritesheet or texture atlas assets.

Why are my Phaser spritesheet animations playing with incorrect frame sequences?▼

Incorrect spritesheet animation frame sequences in Phaser often occur when this.anims.generateFrameNumbers is misconfigured, requiring you to verify start and end frame indices or supply custom frame arrays to match the intended visual playback.

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
diegolinharesdiegolinhares

animations

Automates sprite animation creation and management in Phaser 4 games.

Community
Intermediate
ckyeonckyeon

physics-arcade

Configure Arcade Physics for sprites and images in Phaser 4 games.

Community
Intermediate
Raphe-devRaphe-dev

animations

Implement Phaser 4 sprite animations with AnimationManager and AnimationState.

Community
Advanced