tweens

Animate sprite properties over time in Phaser 4 using the TweenManager.

40.1k|7.2k|Updated Apr 12, 2013
One-click install
npx skills add https://github.com/phaserjs/phaser --skill tweens-phaserjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tweens
Source: https://github.com/phaserjs/phaser/tree/main/skills/tweens
Command: npx skills add https://github.com/phaserjs/phaser --skill tweens-phaserjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing property changes over time in Phaser 4 with automated, coordinated transitions across scenes and game objects.

Core Features & Use Cases

  • Tween creation and management via TweenManager, including tween chains, stagger, yoyo, and per-property configuration.
  • Support for callbacks, events, and complex sequences across multiple targets for dynamic gameplay visuals.
  • Use cases include moving sprites, fading objects, chaining animations, and coordinating multi-object demos.

Quick Start

Create a simple tween to move a sprite across the screen in a Scene's create() method.

Frequently Asked Questions about tweens

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

FAQPage Schema
How do I animate sprite properties over time in Phaser 4?

Use the Phaser 4 Tween system to animate sprite properties over time by configuring the TweenManager with target objects, durations, and easing functions. This enables smooth transitions like movement, fading, and scaling across game objects.

Can I chain multiple tweens together to create complex animation sequences?

Yes, Phaser 4 supports chaining multiple tweens together to build complex animation sequences. The TweenManager provides tween chains, staggered delays, and yoyo playback to coordinate dynamic multi-object gameplay visuals.

What is per-property easing and how does it work for tweening game objects?

Per-property easing in Phaser 4 applies individual easing functions to specific object properties during a tween. The Tween system supports per-property configuration, allowing granular control over how numeric or frame-based tween data values transition over time.

Does the Phaser 4 tween system support callbacks and events for gameplay triggers?

Yes, the Phaser 4 tween system supports callbacks and events for gameplay triggers. You can attach callbacks to tweens to execute custom logic when animations start, complete, or repeat, enabling dynamic gameplay visual coordination.

How do I loop or yoyo animations when tweening properties in Phaser?

You loop or yoyo animations in Phaser 4 by configuring the tween options within the TweenManager. The system provides built-in support for looping and yoyo playback, allowing property transitions to repeat continuously or reverse direction automatically upon completion.

What's the best way to stagger delays across multiple targets in a Phaser tween?

Use the stagger feature in the Phaser 4 Tween system to apply incremental delays across an array of targets. Configuring the TweenManager with stagger options produces coordinated, sequential visual transitions for multi-object animations.