dev-phaser-animations

Create sprite animations, tweens, and timeline sequences in Phaser 3 games.

1|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/fiando/bake-tycoon --skill dev-phaser-animations-fiando
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-phaser-animations
Source: https://github.com/fiando/bake-tycoon/tree/main/.github/skills/dev-phaser-animations
Command: npx skills add https://github.com/fiando/bake-tycoon --skill dev-phaser-animations-fiando

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires phaser.

What problem does it solve? Manually animating sprites with frame timers and linear interpolation is error-prone and lacks easing, state management, and sequencing. This Skill provides patterns for using Phaser 3's built-in animation and tween systems instead of hand-rolled animation code. ## Core Features & Use Cases - Sprite Sheet Animations: Create frame-based animations with anims.create(), configure frame rates, repeat, and yoyo behavior. - Tweens and Timelines: Animate properties like position, alpha, and scale with 20+ built-in easing functions, and chain sequences with tweens.timeline(). - Animation State Management: Implement controllers and state machines that handle transitions between idle, walk, attack, and other states without interrupting non-looping animations. - Use Case: When building a platformer character, register idle, walk, jump, and attack animations once in create(), then drive transitions from input in update() using the provided AnimationManager pattern. ## Quick Start Ask the AI to create a Phaser sprite animation for a character sprite sheet with idle and walk states using anims.create and sprite.play.

Frequently Asked Questions about dev-phaser-animations

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

FAQPage Schema
How do I create a sprite animation in Phaser 3?▼

Use this.anims.create() with a key, frames from generateFrameNumbers(), frameRate, and repeat settings, then call sprite.play('key'). Create animations once in the scene's create() method, not in update().

How do I chain multiple tweens in Phaser?▼

Use this.tweens.timeline() with an array of tween configs instead of nesting onComplete callbacks. The offset property lets tweens overlap, such as '-=250' to start 250ms before the previous tween ends.

What easing functions does Phaser 3 support?▼

Phaser includes Linear, Power0 through Power4, Elastic, Bounce, Back, Sine, and Cubic, each with easeIn, easeOut, and easeInOut variants. Set the ease property in the tween config, for example ease: 'Back.easeOut'.

Why does my Phaser animation get interrupted when switching states?▼

Calling play() unconditionally overrides the current animation. Check sprite.anims.currentAnim and whether the current animation is non-looping and still playing before switching, or use an animation controller that guards transitions.

When should I use tweens versus sprite animations in Phaser?▼

Use sprite animations for frame-based sprite sheet playback like walk cycles. Use tweens for animating properties such as position, alpha, scale, or angle, and use timelines for sequenced multi-step movements.