new Tween(target, game, manager)
A Tween allows you to alter one or more properties of a target object over a defined period of time.
This can be used for things such as alpha fading Sprites, scaling them or motion.
Use Tween.to
or Tween.from
to set-up the tween values. You can create multiple tweens on the same object
by calling Tween.to multiple times on the same Tween. Additional tweens specified in this way become "child" tweens and
are played through in sequence. You can use Tween.timeScale and Tween.reverse to control the playback of this Tween and all of its children.
Parameters:
Name | Type | Description |
---|---|---|
target |
object | The target object, such as a Phaser.Sprite or Phaser.Sprite.scale. |
game |
Phaser.Game | Current game instance. |
manager |
Phaser.TweenManager | The TweenManager responsible for looking after this Tween. |
- Source - tween/Tween.js, line 20
Members
-
chainedTween :Phaser.Tween
-
If this Tween is chained to another this holds a reference to it.
- Source - tween/Tween.js, line 134
-
<readonly> current :number
-
The current Tween child being run.
- Default Value:
- 0
- Source - tween/Tween.js, line 124
-
game :Phaser.Game
-
A reference to the currently running Game.
- Source - tween/Tween.js, line 25
-
isPaused :boolean
-
Is this Tween paused or not?
- Default Value:
- false
- Source - tween/Tween.js, line 140
-
isRunning :boolean
-
If the tween is running this is set to true, otherwise false. Tweens that are in a delayed state or waiting to start are considered as being running.
- Default Value:
- false
- Source - tween/Tween.js, line 117
-
manager :Phaser.TweenManager
-
Reference to the TweenManager responsible for updating this Tween.
- Source - tween/Tween.js, line 35
-
onChildComplete :Phaser.Signal
-
The onChildComplete event is fired when the Tween or any of its children completes. Fires every time a child completes unless a child is set to repeat forever. It will be sent 2 parameters: the target object and this tween.
- Source - tween/Tween.js, line 104
-
onComplete :Phaser.Signal
-
The onComplete event is fired when the Tween and all of its children completes. Does not fire if the Tween is set to loop or repeatAll(-1). It will be sent 2 parameters: the target object and this tween.
- Source - tween/Tween.js, line 111
-
onLoop :Phaser.Signal
-
The onLoop event is fired if the Tween or any child tween loops. It will be sent 2 parameters: the target object and this tween.
- Source - tween/Tween.js, line 89
-
onRepeat :Phaser.Signal
-
The onRepeat event is fired if the Tween and all of its children repeats. If this tween has no children this will never be fired. It will be sent 2 parameters: the target object and this tween.
- Source - tween/Tween.js, line 96
-
onStart :Phaser.Signal
-
The onStart event is fired when the Tween begins. If there is a delay before the tween starts then onStart fires after the delay is finished. It will be sent 2 parameters: the target object and this tween.
- Source - tween/Tween.js, line 82
-
<readonly> pendingDelete :boolean
-
True if this Tween is ready to be deleted by the TweenManager.
- Default Value:
- false
- Source - tween/Tween.js, line 75
-
properties :object
-
Target property cache used when building the child data values.
- Source - tween/Tween.js, line 129
-
repeatCounter :number
-
If the Tween and any child tweens are set to repeat this contains the current repeat count.
- Source - tween/Tween.js, line 63
-
repeatDelay :number
-
The amount of time in ms between repeats of this tween and any child tweens.
- Source - tween/Tween.js, line 68
-
reverse :boolean
-
If set to
true
the current tween will play in reverse. If the tween hasn't yet started this has no effect. If there are child tweens then all child tweens will play in reverse from the current point.- Default Value:
- false
- Source - tween/Tween.js, line 49
-
target :object
-
The target object, such as a Phaser.Sprite or property like Phaser.Sprite.scale.
- Source - tween/Tween.js, line 30
-
timeline :Array
-
An Array of TweenData objects that comprise the different parts of this Tween.
- Source - tween/Tween.js, line 40
-
timeScale :number
-
The speed at which the tweens will run. A value of 1 means it will match the game frame rate. 0.5 will run at half the frame rate. 2 at double the frame rate, etc. If a tweens duration is 1 second but timeScale is 0.5 then it will take 2 seconds to complete.
- Default Value:
- 1
- Source - tween/Tween.js, line 58
-
totalDuration :Phaser.TweenData
-
Gets the total duration of this Tween, including all child tweens, in milliseconds.
- Source - tween/Tween.js, line 853
Methods
-
chain(tweens) → {Phaser.Tween}
-
This method allows you to chain tweens together. Any tween chained to this tween will have its
Tween.start
method called as soon as this tween completes. If this tween never completes (i.e. repeatAll or loop is set) then the chain will never progress. Note thatTween.onComplete
will fire when this tween completes, not when the whole chain completes. For that you should listen toonComplete
on the final tween in your chain.If you pass multiple tweens to this method they will be joined into a single long chain. For example if this is Tween A and you pass in B, C and D then B will be chained to A, C will be chained to B and D will be chained to C. Any previously chained tweens that may have been set will be overwritten.
Parameters:
Name Type Argument Description tweens
Phaser.Tween <repeatable>
One or more tweens that will be chained to this one.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 536
-
delay(duration, index) → {Phaser.Tween}
-
Sets the delay in milliseconds before this tween will start. If there are child tweens it sets the delay before the first child starts. The delay is invoked as soon as you call
Tween.start
. If the tween is already running this method doesn't do anything for the current active tween. If you have child tweens and pass -1 as the index value it sets the delay across all of them.Parameters:
Name Type Argument Default Description duration
number The amount of time in ms that the Tween should wait until it begins once started is called. Set to zero to remove any active delay.
index
number <optional>
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 delay on all the children.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 359
-
easing(ease, index) → {Phaser.Tween}
-
Set easing function this tween will use, i.e. Phaser.Easing.Linear.None. The ease function allows you define the rate of change. You can pass either a function such as Phaser.Easing.Circular.Out or a string such as "Circ". ".easeIn", ".easeOut" and "easeInOut" variants are all supported for all ease types. If you have child tweens and pass -1 as the index value it sets the easing function defined here across all of them.
Parameters:
Name Type Argument Default Description ease
function | string The easing function this tween will use, i.e. Phaser.Easing.Linear.None.
index
number <optional>
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.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 450
-
from(properties, duration, ease, autoStart, delay, repeat, yoyo) → {Phaser.Tween}
-
Sets this tween to be a
from
tween on the properties given. Afrom
tween sets the target to the destination value and tweens to its current value. For example a Sprite with anx
coordinate of 100 tweened fromx
500 would be set tox
500 and then tweened tox
100 by giving a properties object of{ x: 500 }
. The ease function allows you define the rate of change. You can pass either a function such as Phaser.Easing.Circular.Out or a string such as "Circ". ".easeIn", ".easeOut" and "easeInOut" variants are all supported for all ease types.Parameters:
Name Type Argument Default Description properties
object An object containing the properties you want to tween., such as
Sprite.x
orSound.volume
. Given as a JavaScript object.duration
number <optional>
1000 Duration of this tween in ms.
ease
function | string <optional>
null Easing function. If not set it will default to Phaser.Easing.Default, which is Phaser.Easing.Linear.None by default but can be over-ridden.
autoStart
boolean <optional>
false Set to
true
to allow this tween to start automatically. Otherwise call Tween.start().delay
number <optional>
0 Delay before this tween will start in milliseconds. Defaults to 0, no delay.
repeat
number <optional>
0 Should the tween automatically restart once complete? If you want it to run forever set as -1. This only effects this induvidual tween, not any chained tweens.
yoyo
boolean <optional>
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.
Returns:
This Tween object.
- Source - tween/Tween.js, line 220
-
from(properties, duration, ease, delay, repeat, yoyo) → {Phaser.TweenData}
-
Sets this tween to be a
from
tween on the properties given. Afrom
tween sets the target to the destination value and tweens to its current value. For example a Sprite with anx
coordinate of 100 tweened fromx
500 would be set tox
500 and then tweened tox
100 by giving a properties object of{ x: 500 }
.Parameters:
Name Type Argument Default Description properties
object The properties you want to tween, such as
Sprite.x
orSound.volume
. Given as a JavaScript object.duration
number <optional>
1000 Duration of this tween in ms.
ease
function <optional>
null Easing function. If not set it will default to Phaser.Easing.Default, which is Phaser.Easing.Linear.None by default but can be over-ridden at will.
delay
number <optional>
0 Delay before this tween will start, defaults to 0 (no delay). Value given is in ms.
repeat
number <optional>
0 Should the tween automatically restart once complete? If you want it to run forever set as -1. This ignores any chained tweens.
yoyo
boolean <optional>
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.
Returns:
This Tween object.
- Source - tween/TweenData.js, line 188
-
generateData(frameRate, data) → {array}
-
This will generate an array populated with the tweened object values from start to end. It works by running the tween simulation at the given frame rate based on the values set-up in Tween.to and Tween.from. It ignores delay and repeat counts and any chained tweens, but does include child tweens. Just one play through of the tween data is returned, including yoyo if set.
Parameters:
Name Type Argument Default Description frameRate
number <optional>
60 The speed in frames per second that the data should be generated at. The higher the value, the larger the array it creates.
data
array <optional>
If given the generated data will be appended to this array, otherwise a new array will be returned.
Returns:
array -An array of tweened values.
- Source - tween/Tween.js, line 801
-
interpolation(interpolation, index) → {Phaser.Tween}
-
Sets the interpolation function the tween will use. By default it uses Phaser.Math.linearInterpolation. Also available: Phaser.Math.bezierInterpolation and Phaser.Math.catmullRomInterpolation. The interpolation function is only used if the target properties is an array. If you have child tweens and pass -1 as the index value it sets the interpolation function across all of them.
Parameters:
Name Type Argument Default Description interpolation
function The interpolation function to use (Phaser.Math.linearInterpolation by default)
index
number <optional>
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.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 486
-
loop(value) → {Phaser.Tween}
-
Enables the looping of this tween and all child tweens. If this tween has no children this setting has no effect. If
value
istrue
then this is the same as settingTween.repeatAll(-1)
. Ifvalue
isfalse
it is the same as settingTween.repeatAll(0)
and will reset therepeatCounter
to zero.Usage: game.add.tween(p).to({ x: 700 }, 1000, Phaser.Easing.Linear.None, true) .to({ y: 300 }, 1000, Phaser.Easing.Linear.None) .to({ x: 0 }, 1000, Phaser.Easing.Linear.None) .to({ y: 0 }, 1000, Phaser.Easing.Linear.None) .loop();
Parameters:
Name Type Argument Default Description value
boolean <optional>
true If
true
this tween and any child tweens will loop once they reach the end. Set tofalse
to remove an active loop.Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 570
-
onUpdateCallback(callback, callbackContext) → {Phaser.Tween}
-
Sets a callback to be fired each time this tween updates.
Parameters:
Name Type Description callback
function The callback to invoke each time this tween is updated. Set to
null
to remove an already active callback.callbackContext
object The context in which to call the onUpdate callback.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 602
-
pause()
-
Pauses the tween. Resume playback with Tween.resume.
- Source - tween/Tween.js, line 619
-
repeat(total, index) → {Phaser.Tween}
-
Sets the number of times this tween will repeat. If you have child tweens and pass -1 as the index value it sets the number of times they'll repeat across all of them. If you wish to define how many times this Tween and all children will repeat see Tween.repeatAll.
Parameters:
Name Type Argument Default Description total
number How many times a tween should repeat before completing. Set to zero to remove an active repeat. Set to -1 to repeat forever.
index
number <optional>
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 repeat value on all the children.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 389
-
repeat(total) → {Phaser.Tween}
-
Set how many times this tween and all of its children will repeat. A tween (A) with 3 children (B,C,D) with a
repeatAll
value of 2 would play as: ABCDABCD before completing. When all child tweens have completed Tween.onLoop will be dispatched.Parameters:
Name Type Description total
number How many times this tween and all children should repeat before completing. Set to zero to remove an active repeat. Set to -1 to repeat forever.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 517
-
resume()
-
Resumes a paused tween.
- Source - tween/Tween.js, line 651
-
start(index) → {Phaser.Tween}
-
Starts the tween running. Can also be called by the autoStart parameter of
Tween.to
orTween.from
. This sets theTween.isRunning
property totrue
and dispatches aTween.onStart
signal. If the Tween has a delay set then nothing will start tweening until the delay has expired.Parameters:
Name Type Argument Default Description index
number <optional>
0 If this Tween contains child tweens you can specify which one to start from. The default is zero, i.e. the first tween created.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 267
-
stop(complete) → {Phaser.Tween}
-
Stops the tween if running and flags it for deletion from the TweenManager. If called directly the
Tween.onComplete
signal is not dispatched and no chained tweens are started unless the complete parameter is set totrue
. If you just wish to pause a tween then use Tween.pause instead.Parameters:
Name Type Argument Default Description complete
boolean <optional>
false Set to
true
to dispatch the Tween.onComplete signal.Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 325
-
to(properties, duration, ease, autoStart, delay, repeat, yoyo) → {Phaser.Tween}
-
Sets this tween to be a
to
tween on the properties given. Ato
tween starts at the current value and tweens to the destination value given. For example a Sprite with anx
coordinate of 100 could be tweened tox
200 by giving a properties object of{ x: 200 }
. The ease function allows you define the rate of change. You can pass either a function such as Phaser.Easing.Circular.Out or a string such as "Circ". ".easeIn", ".easeOut" and "easeInOut" variants are all supported for all ease types.Parameters:
Name Type Argument Default Description properties
object An object containing the properties you want to tween., such as
Sprite.x
orSound.volume
. Given as a JavaScript object.duration
number <optional>
1000 Duration of this tween in ms.
ease
function | string <optional>
null Easing function. If not set it will default to Phaser.Easing.Default, which is Phaser.Easing.Linear.None by default but can be over-ridden.
autoStart
boolean <optional>
false Set to
true
to allow this tween to start automatically. Otherwise call Tween.start().delay
number <optional>
0 Delay before this tween will start in milliseconds. Defaults to 0, no delay.
repeat
number <optional>
0 Should the tween automatically restart once complete? If you want it to run forever set as -1. This only effects this induvidual tween, not any chained tweens.
yoyo
boolean <optional>
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.
Returns:
This Tween object.
- Source - tween/Tween.js, line 173
-
to(properties, duration, ease, delay, repeat, yoyo) → {Phaser.TweenData}
-
Sets this tween to be a
to
tween on the properties given. Ato
tween starts at the current value and tweens to the destination value given. For example a Sprite with anx
coordinate of 100 could be tweened tox
200 by giving a properties object of{ x: 200 }
.Parameters:
Name Type Argument Default Description properties
object The properties you want to tween, such as
Sprite.x
orSound.volume
. Given as a JavaScript object.duration
number <optional>
1000 Duration of this tween in ms.
ease
function <optional>
null Easing function. If not set it will default to Phaser.Easing.Default, which is Phaser.Easing.Linear.None by default but can be over-ridden at will.
delay
number <optional>
0 Delay before this tween will start, defaults to 0 (no delay). Value given is in ms.
repeat
number <optional>
0 Should the tween automatically restart once complete? If you want it to run forever set as -1. This ignores any chained tweens.
yoyo
boolean <optional>
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.
Returns:
This Tween object.
- Source - tween/TweenData.js, line 160
-
update(time) → {boolean}
-
Core tween update function called by the TweenManager. Does not need to be invoked directly.
Parameters:
Name Type Description time
number A timestamp passed in by the TweenManager.
Returns:
boolean -false if the tween and all child tweens have completed and should be deleted from the manager, otherwise true (still active).
- Source - tween/Tween.js, line 693
-
yoyo(enable, index) → {Phaser.Tween}
-
A Tween that has yoyo set to true will run through from its starting values to its end values and then play back in reverse from end to start. Used in combination with repeat you can create endless loops. If you have child tweens and pass -1 as the index value it sets the yoyo property across all of them. If you wish to yoyo this Tween and all of its children then see Tween.yoyoAll.
Parameters:
Name Type Argument Default Description enable
boolean Set to true to yoyo this tween, or false to disable an already active yoyo.
index
number <optional>
0 If this tween has more than one child this allows you to target a specific child. If set to -1 it will set yoyo on all the children.
Returns:
This tween. Useful for method chaining.
- Source - tween/Tween.js, line 419