phaser-animation

Manage Phaser 4 character animation states and tweening sequences.

17|1|Updated Apr 7, 2026
One-click install
npx skills add https://github.com/Yakoub-ai/phaser4-gamedev --skill phaser-animation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: phaser-animation
Source: https://github.com/Yakoub-ai/phaser4-gamedev/tree/main/skills/phaser-animation
Command: npx skills add https://github.com/Yakoub-ai/phaser4-gamedev --skill phaser-animation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the complexity of managing character states and visual feedback in Phaser 4, preventing common issues like animation flickering, state-machine desync, and "forced" animations being overwritten by game loops.

Core Features & Use Cases

  • State Machine Discipline: Provides a robust pattern for managing character states (idle, walk, attack, etc.) using a cinematicMode flag to prevent animation stomping.
  • Tween & Timeline Control: Offers a comprehensive library of easing functions and timeline sequencing for UI popups, hit feedback, and camera effects.
  • Use Case: Use this skill to implement a character that transitions smoothly between walking and attacking, or to create a polished UI menu where buttons slide in with a bouncy overshoot effect.

Quick Start

Use the phaser-animation skill to implement a state machine for my player character that handles idle, walk, and attack states with cinematic overrides.

Frequently Asked Questions about phaser-animation

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

FAQPage Schema
How do I stop character animation flickering when states change rapidly in Phaser?

To prevent forced animations from being overwritten by game loops in Phaser, you implement a state machine with a cinematicMode flag that enforces transition patterns and protects cinematic overrides from being stomped.

How do I create a robust state machine for character animations in Phaser 4?

You create a robust Phaser 4 character state machine by defining distinct states like idle, walk, and attack, and adhering to Phaser 4 RC7 animation lifecycle events and state-machine transition patterns to maintain visual consistency.

Does Phaser 4 support timeline sequencing for UI popup tweens?

Yes, Phaser 4 supports timeline sequencing for UI popup tweens, offering a comprehensive library of easing functions to build sophisticated UI motion effects like bouncy overshoot slide-ins for polished menu buttons.

What is the best way to manage hit feedback and camera effects in Phaser?

The best way to manage hit feedback and camera effects in Phaser is by utilizing tween and timeline control, which sequences visual feedback and camera motions smoothly without interrupting core game loop states.

Why do my Phaser character animations desync during attack overrides?

Phaser character animations desync during attack overrides because game loops overwrite forced animations; implementing state-machine transition patterns and a cinematicMode flag prevents this visual inconsistency.

Can I use TypeScript to implement Phaser 4 animation lifecycle events?

Yes, you can use TypeScript to implement Phaser 4 animation lifecycle events, as this approach facilitates robust state machine patterns and sophisticated tweening sequences within TypeScript game projects.