Skip to content

Commit 2589000

Browse files
photonstormphotonstorm
committed
Tweens have been completely rewritten. They're now much more flexible and efficient than before:
When specifying the ease in `Tween.to` or `Tween.from` you can now use a string instead of the Function. This makes your code less verbose. For example instead of `Phaser.Easing.Sinusoidal.Out` and you can now just use the string "Sine".The string names match those used by TweenMax and includes: "Linear", "Quad", "Cubic", "Quart", "Quint", "Sine", "Expo", "Circ", "Elastic", "Back", "Bounce", "Power0", "Power1", "Power2", "Power3" and "Power4". You can append ".easeIn", ".easeOut" and "easeInOut" variants. All are supported for each ease types. Tweens now create a TweenData object. The Tween object itself acts like more of a timeline, managing multiple TweenData objects. You can now call `Tween.to` and each call will create a new child tween that is added to the timeline, which are played through in sequence. Tweens are now bound to the new Time.desiredFps value and update based on the new Game core loop, rather than being bound to time calculations. This means that tweens are now running with the same update logic as physics and the core loop. Tween.timeScale allows you to scale the duration of a tween (and any child tweens it may have). A value of 1.0 means it should play at the desiredFps rate. A value of 0.5 will run at half the frame rate, 2 at double and so on. You can even tween the timeScale value for interesting effects! Tween.reverse allows you to instantly reverse an active tween. If the Tween has children then it will smoothly reverse through all child tweens as well. Tween.repeatAll allows you to control how many times all child tweens will repeat before firing the Tween.onComplete event. You can set the value to -1 to repeat forever. Tween.loop now controls the looping of all child tweens. Tween.onRepeat is a new signal that is dispatched whenever a Tween repeats. If a Tween has many child tweens its dispatched once the sequence has repeated. Tween.onChildComplete is a new signal that is dispatched whenever any child tweens have completed. If a Tween consists of 4 sections you will get 3 onChildComplete events followed by 1 onComplete event as the final tween finishes. Chained tweens are now more intelligently handled. Because you can easily create child tweens (by simply calling Tween.to multiple times) chained tweens are now used to kick-off longer sequences. You can pass as many Tween objects to `Tween.chain` as you like as they'll all be played in sequence. As one Tween completes it passes on to the next until the entire chain is finished. Tween.stop has a new `complete` parameter that if set will still fire the onComplete event and start the next chained tween, if there is one. Tween.delay, Tween.repeat, Tween.yoyo, Tween.easing and Tween.interpolation all have a new `index` parameter. This allows you to target specific child tweens, or if set to -1 it will update all children at once. Tween.totalDuration reports the total duration of all child tweens in ms. There are new easing aliases: * Phaser.Easing.Power0 = Phaser.Easing.Linear.None * Phaser.Easing.Power1 = Phaser.Easing.Quadratic.Out * Phaser.Easing.Power2 = Phaser.Easing.Cubic.Out * Phaser.Easing.Power3 = Phaser.Easing.Quartic.Out * Phaser.Easing.Power4 = Phaser.Easing.Quintic.Out
1 parent a952cd3 commit 2589000

4 files changed

Lines changed: 100 additions & 34 deletions

File tree

‎README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,26 @@ The proxy methods are generated one-time dynamically but only when needed.
117117
* Device.whenReady is a new signal that you can use to tell when the device is initialised.
118118
* Device.onInitialized is dispatched after device initialization occurs but before any of the ready callbacks have been invoked. Local "patching" for a particular device can/should be done in this event.
119119
* TweenManager.removeFrom method allows you to remove a tween from a game object such as a Sprite (thanks @lewster32 #1279)
120+
* Tweens have been completely rewritten. They're now much more flexible and efficient than before:
121+
* When specifying the ease in `Tween.to` or `Tween.from` you can now use a string instead of the Function. This makes your code less verbose. For example instead of `Phaser.Easing.Sinusoidal.Out` and you can now just use the string "Sine".The string names match those used by TweenMax and includes: "Linear", "Quad", "Cubic", "Quart", "Quint", "Sine", "Expo", "Circ", "Elastic", "Back", "Bounce", "Power0", "Power1", "Power2", "Power3" and "Power4". You can append ".easeIn", ".easeOut" and "easeInOut" variants. All are supported for each ease types.
122+
* Tweens now create a TweenData object. The Tween object itself acts like more of a timeline, managing multiple TweenData objects. You can now call `Tween.to` and each call will create a new child tween that is added to the timeline, which are played through in sequence.
123+
* Tweens are now bound to the new Time.desiredFps value and update based on the new Game core loop, rather than being bound to time calculations. This means that tweens are now running with the same update logic as physics and the core loop.
124+
* Tween.timeScale allows you to scale the duration of a tween (and any child tweens it may have). A value of 1.0 means it should play at the desiredFps rate. A value of 0.5 will run at half the frame rate, 2 at double and so on. You can even tween the timeScale value for interesting effects!
125+
* Tween.reverse allows you to instantly reverse an active tween. If the Tween has children then it will smoothly reverse through all child tweens as well.
126+
* Tween.repeatAll allows you to control how many times all child tweens will repeat before firing the Tween.onComplete event. You can set the value to -1 to repeat forever.
127+
* Tween.loop now controls the looping of all child tweens.
128+
* Tween.onRepeat is a new signal that is dispatched whenever a Tween repeats. If a Tween has many child tweens its dispatched once the sequence has repeated.
129+
* Tween.onChildComplete is a new signal that is dispatched whenever any child tweens have completed. If a Tween consists of 4 sections you will get 3 onChildComplete events followed by 1 onComplete event as the final tween finishes.
130+
* Chained tweens are now more intelligently handled. Because you can easily create child tweens (by simply calling Tween.to multiple times) chained tweens are now used to kick-off longer sequences. You can pass as many Tween objects to `Tween.chain` as you like as they'll all be played in sequence. As one Tween completes it passes on to the next until the entire chain is finished.
131+
* Tween.stop has a new `complete` parameter that if set will still fire the onComplete event and start the next chained tween, if there is one.
132+
* Tween.delay, Tween.repeat, Tween.yoyo, Tween.easing and Tween.interpolation all have a new `index` parameter. This allows you to target specific child tweens, or if set to -1 it will update all children at once.
133+
* Tween.totalDuration reports the total duration of all child tweens in ms.
134+
* There are new easing aliases:
135+
* * Phaser.Easing.Power0 = Phaser.Easing.Linear.None
136+
* * Phaser.Easing.Power1 = Phaser.Easing.Quadratic.Out
137+
* * Phaser.Easing.Power2 = Phaser.Easing.Cubic.Out
138+
* * Phaser.Easing.Power3 = Phaser.Easing.Quartic.Out
139+
* * Phaser.Easing.Power4 = Phaser.Easing.Quintic.Out
120140

121141
### Updates
122142

‎src/core/Game.js‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -755,8 +755,6 @@ Phaser.Game.prototype = {
755755
this.debug.preUpdate();
756756
}
757757

758-
this.tweens.update(timeStep);
759-
760758
this.world.camera.preUpdate();
761759
this.physics.preUpdate();
762760
this.state.preUpdate(timeStep);
@@ -765,6 +763,7 @@ Phaser.Game.prototype = {
765763

766764
this.state.update();
767765
this.stage.update();
766+
this.tweens.update(timeStep);
768767
this.sound.update();
769768
this.input.update();
770769
this.physics.update();
@@ -797,20 +796,14 @@ Phaser.Game.prototype = {
797796
*/
798797
updateRender: function (elapsedTime) {
799798

800-
// update tweens once every frame along with the render logic (to keep them smooth in slowMotion scenarios)
801-
if (!this._paused && !this.pendingStep)
802-
{
803-
// this.tweens.update(elapsedTime);
804-
}
805-
806799
if (this.renderType !== Phaser.HEADLESS)
807800
{
808801
this.state.preRender();
809802
this.renderer.render(this.stage);
810803

811-
this.plugins.render();
812-
this.state.render();
813-
this.plugins.postRender();
804+
this.plugins.render(elapsedTime);
805+
this.state.render(elapsedTime);
806+
this.plugins.postRender(elapsedTime);
814807

815808
if (this.device.cocoonJS && this.renderType === Phaser.CANVAS && this.stage.currentRenderOrderID === 1)
816809
{

‎src/tween/Tween.js‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,12 @@ Phaser.Tween = function (target, game, manager) {
133133
*/
134134
this.chainedTween = null;
135135

136+
/**
137+
* @property {boolean} isPaused - Is this Tween paused or not?
138+
* @default
139+
*/
140+
this.isPaused = false;
141+
136142
/**
137143
* @property {function} _onUpdateCallback - An onUpdate callback.
138144
* @private
@@ -147,12 +153,6 @@ Phaser.Tween = function (target, game, manager) {
147153
*/
148154
this._onUpdateCallbackContext = null;
149155

150-
/**
151-
* @property {boolean} isPaused - Is this Tween paused or not?
152-
* @default
153-
*/
154-
this.isPaused = false;
155-
156156
/**
157157
* @property {number} _pausedTime - Private pause timer.
158158
* @private
@@ -233,7 +233,7 @@ Phaser.Tween.prototype = {
233233
* @param {boolean} [yoyo=false] - A tween that yoyos will reverse itself and play backwards automatically. A yoyo'd tween doesn't fire the Tween.onComplete event, so listen for Tween.onLoop instead.
234234
* @return {Phaser.Tween} This Tween object.
235235
*/
236-
from: function(properties, duration, ease, autoStart, delay, repeat, yoyo) {
236+
from: function (properties, duration, ease, autoStart, delay, repeat, yoyo) {
237237

238238
if (typeof duration === 'undefined') { duration = 1000; }
239239
if (typeof ease === 'undefined') { ease = Phaser.Easing.Default; }
@@ -298,8 +298,6 @@ Phaser.Tween.prototype = {
298298
}
299299
}
300300

301-
console.log(this.properties);
302-
303301
for (var i = 0; i < this.timeline.length; i++)
304302
{
305303
this.timeline[i].loadValues();
@@ -326,7 +324,7 @@ Phaser.Tween.prototype = {
326324

327325
/**
328326
* Stops the tween if running and flags it for deletion from the TweenManager.
329-
* If called directly the Tween.onComplete signal is not dispatched unless the complete parameter is set to `true`.
327+
* If called directly the `Tween.onComplete` signal is not dispatched and no chained tweens are started unless the complete parameter is set to `true`.
330328
* If you just wish to pause a tween then use Tween.pause instead.
331329
*
332330
* @method Phaser.Tween#stop
@@ -345,6 +343,11 @@ Phaser.Tween.prototype = {
345343
if (complete)
346344
{
347345
this.onComplete.dispatch(this);
346+
347+
if (this.chainedTween)
348+
{
349+
this.chainedTween.start();
350+
}
348351
}
349352

350353
this.manager.remove(this);
@@ -491,7 +494,7 @@ Phaser.Tween.prototype = {
491494
* @param {number} [index=0] - If this tween has more than one child this allows you to target a specific child. If set to -1 it will set the easing function on all children.
492495
* @return {Phaser.Tween} This tween. Useful for method chaining.
493496
*/
494-
interpolation: function (interpolation) {
497+
interpolation: function (interpolation, index) {
495498

496499
if (typeof index === 'undefined') { index = 0; }
497500

@@ -546,8 +549,6 @@ Phaser.Tween.prototype = {
546549
*/
547550
chain: function () {
548551

549-
console.log(arguments);
550-
551552
var i = arguments.length;
552553

553554
while (i--)
@@ -795,7 +796,7 @@ Phaser.Tween.prototype = {
795796
}
796797
}
797798

798-
},
799+
}
799800

800801
/**
801802
* This will generate an array populated with the tweened object values from start to end.

‎typescript/phaser.d.ts‎

Lines changed: 61 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4462,31 +4462,83 @@ declare module Phaser {
44624462

44634463
class Tween {
44644464

4465-
constructor(object: any, game: Phaser.Game, manager: Phaser.TweenManager);
4465+
constructor(target: any, game: Phaser.Game, manager: Phaser.TweenManager);
44664466

4467+
chainedTween: Phaser.Tween;
4468+
current: number;
44674469
game: Phaser.Game;
4470+
isPaused: boolean;
44684471
isRunning: boolean;
4472+
manager: Phaser.TweenManager;
4473+
onChildComplete: Phaser.Signal;
44694474
onComplete: Phaser.Signal;
44704475
onLoop: Phaser.Signal;
4476+
onRepeat: Phaser.Signal;
44714477
onStart: Phaser.Signal;
44724478
pendingDelete: boolean;
4479+
properties: any;
4480+
repeatCounter: number;
4481+
repeatDelay: number;
4482+
reverse: boolean;
4483+
target: any;
4484+
timeline: array;
4485+
timeScale: number;
4486+
totalDuration: number;
44734487

44744488
chain(): Phaser.Tween;
4475-
delay(amount: number): Phaser.Tween;
4476-
easing(easing: Function): Phaser.Tween;
4489+
delay(duration: number, index?: number): Phaser.Tween;
4490+
easing(ease: any, index?: number): Phaser.Tween;
44774491
from(properties: any, duration?: number, ease?: Function, autoStart?: boolean, delay?: number, repeat?: number, yoyo?: boolean): Phaser.Tween;
44784492
generateData(frameRate: number, data: any): any[];
4479-
interpolation(interpolation: Function): Phaser.Tween;
4480-
loop(): Phaser.Tween;
4493+
interpolation(interpolation: Function, index?: number): Phaser.Tween;
4494+
loop(value: boolean): Phaser.Tween;
44814495
onUpdateCallback(callback: Function, callbackContext: any): Phaser.Tween;
44824496
pause(): void;
4483-
repeat(times: number): Phaser.Tween;
4497+
repeat(total: number, index?: number): Phaser.Tween;
4498+
repeatAll(total: number): Phaser.Tween;
44844499
resume(): void;
4485-
start(): Phaser.Tween;
4486-
stop(): Phaser.Tween;
4500+
start(index: number): Phaser.Tween;
4501+
stop(complete: boolean): Phaser.Tween;
44874502
to(properties: any, duration?: number, ease?: Function, autoStart?: boolean, delay?: number, repeat?: number, yoyo?: boolean): Phaser.Tween;
44884503
update(time: number): boolean;
4489-
yoyo(yoyo: boolean): Phaser.Tween;
4504+
yoyo(enable: boolean, index?: number): Phaser.Tween;
4505+
4506+
}
4507+
4508+
class TweenData {
4509+
4510+
constructor(parent: Phaser.Tween);
4511+
4512+
static COMPLETE: number;
4513+
static LOOPED: number;
4514+
static PENDING: number;
4515+
static RUNNING: number;
4516+
4517+
delay: number;
4518+
dt: number;
4519+
duration: number;
4520+
easingFunction: Function;
4521+
game: Phaser.Game;
4522+
inReverse: boolean;
4523+
interpolationFunction: Function;
4524+
isFrom: boolean;
4525+
isRunning: boolean;
4526+
parent: Phaser.Tween;
4527+
percent: number;
4528+
repeatCounter: number;
4529+
repeatDelay: number;
4530+
startTime: number;
4531+
value: number;
4532+
vEnd: any;
4533+
vEndCache: any;
4534+
vStart: any;
4535+
vStartCache: any;
4536+
yoyo: boolean;
4537+
4538+
from(properties: any, duration?: number, ease?: Function, delay?: number, repeat?: number, yoyo?: boolean): Phaser.TweenData;
4539+
start(): Phaser.TweenData;
4540+
to(properties: any, duration?: number, ease?: Function, delay?: number, repeat?: number, yoyo?: boolean): Phaser.TweenData;
4541+
update(): number;
44904542

44914543
}
44924544

0 commit comments

Comments
 (0)