Animate properties over time in Phaser 4 using tweens, chains, and easing functions.
npx skills add https://github.com/mudman1986/quarterless --skill tweens-mudman1986
Please help me install this Agent Skill. Skill: tweens Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/tweens Command: npx skills add https://github.com/mudman1986/quarterless --skill tweens-mudman1986
this.tweens.add(), configure duration, delay, easing, yoyo, repeat, and per-property overrides for any numeric property. - Tween Chains & Stagger: Sequence multiple tweens with this.tweens.chain() and offset animations across many targets with this.tweens.stagger(). - Playback Control & Events: Pause, resume, seek, restart, and kill tweens, and hook into lifecycle callbacks like onStart, onUpdate, and onComplete. - Use Case: You want a coin sprite to bob up and down forever and a UI panel to slide in when a level starts. Use a yoyo/repeat tween for the coin and a chained tween with easing for the panel entrance. ## Quick Start Use the tweens skill to add a tween that moves my player sprite to x 600 over two seconds with Sine easing in my Phaser scene.High-intent search queries and answers about installing and using this skill.
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 you set persist: true.
Use this.tweens.chain() with a tweens array of standard tween configs. Each tween starts after the previous one completes, and the chain supports loop, loopDelay, and chain-level callbacks like onComplete.
Phaser 4 supports Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back, and Bounce, each with easeIn, easeOut, and easeInOut variants, plus Linear and Stepped. Power0 through Power4 are aliases for Linear through Quintic Out.
Repeat is per-property and replays that property's animation, while loop restarts the entire tween including all properties. A repeat of 1 means the property plays twice total, and loop: -1 loops forever so onComplete never fires.
Tweens auto-destroy after they complete, 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.
Yes, use this.tweens.addCounter() with from and to values to create a number tween with no target. Read the current value in onUpdate via tween.getValue(), which is useful for score counters and progress bars.
fiandoImplements sprite sheets, texture atlases, animations, and object pooling in Phaser 3.
fiandoCreate sprite animations, tweens, and timeline sequences in Phaser 3 games.
vudovnGuides 2D game development covering sprites, tilemaps, physics, and camera systems.
WanderTheWeebAnimate object properties over time in Phaser 4 using TweenManager.