skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

tweens

Animates object properties over time using Phaser 4 tweens, chains, and easing functions.

Updated May 7, 2021
Search Tags:#game development#javascript#animation#phaser#easing#tween#tween chain
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill tweens-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tweens
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/tweens
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill tweens-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animating game object properties smoothly in Phaser 4 requires understanding the TweenManager API, tween configuration objects, easing functions, and lifecycle callbacks, which are easy to misuse without a structured reference. ## Core Features & Use Cases - Tween Creation and Configuration: Create tweens with targets, duration, easing, delay, yoyo, repeat, and per-property overrides via this.tweens.add(). - Tween Chains and Stagger: Sequence multiple tweens with this.tweens.chain() and offset multi-target animations with this.tweens.stagger(). - Playback Control and Events: Pause, resume, seek, restart, and kill tweens, and hook into lifecycle callbacks like onStart, onUpdate, and onComplete. - Use Case: A game developer wants a coin sprite to bob up and down forever with a smooth sine easing and a pause at each end; this Skill provides the exact yoyo, repeat: -1, and hold configuration to achieve it. ## Quick Start Ask the AI to create a Phaser 4 tween that moves a sprite to a new position over two seconds with easing and a completion callback.

Frequently Asked Questions about tweens

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

FAQPage Schema
How do I create a tween in Phaser 4?▼

Call this.tweens.add() inside a Scene with a config object specifying targets, the properties to animate, duration, and an optional ease. The tween starts immediately and auto-destroys on completion unless persist is set to true.

How do I chain multiple tweens in sequence in Phaser?▼

Use this.tweens.chain() with a tweens array of TweenBuilderConfig objects. Each tween starts after the previous one completes, and the chain supports loop, loopDelay, and chain-level callbacks like onComplete.

What is the difference between repeat and loop in Phaser tweens?▼

Repeat is per-property and replays that property's animation, while loop restarts the entire tween from scratch including all properties. A repeat of 1 means the property plays twice total, and loop: -1 loops forever so onComplete never fires.

Does Phaser tween stagger work with a single target?▼

No, this.tweens.stagger() only produces a visible effect with multiple targets. It offsets values like delay across the target array, with options for from, grid, and easing distribution.

Why did my Phaser tween reference stop working after completion?▼

Tweens auto-destroy after finishing, so stored references become invalid. Set persist: true in the config to keep the tween alive for replay, and call tween.destroy() manually when finished.

How do I animate a number without a game object target in Phaser?▼

Use this.tweens.addCounter() with from, to, and duration values. Read the current value in the onUpdate callback via tween.getValue(), which is useful for score counters and progress bars.

Related Skills

Explore More Software Engineering Skills→
dzyamikdzyamik

tweens

Animate game object properties over time using Phaser 4 tweens.

Community
Advanced
fiandofiando
1

dev-phaser-animations

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

Community
Intermediate
phaserjsphaserjs
40.1k

tweens

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

Official
Advanced
pixijspixijs
302

pixijs-ticker

Coordinate per-frame updates with the PixiJS v8 render loop.

Official
Intermediate