Detecting when a tween reaches intermediate values

[Jerorx]

Hi,

I'm tweening a sprite along a path, through specific x,y coordinates. Let's say I want the sprite to go through the points (1,2), (1,3),(2,3), I'm doing it as follow:

    tween.to({x: [1,1,2],y:[2,3,3]}, 600,null, false, 0);

What I call "intermediate values" in a tween are the different values contained in the arrays provided to the to(). In my case, the intermediate values correspond to the point through which the sprite has to move.

The tween works like a charm, but my question is, how to detect when each of those intermediate values are reached? Something like tween.onComplete(), but that fires after each iteration through the value arrays? Or do I need to monitor myself the position of the sprite in the update loop, and detect myself when each point is reached?
 

[alex_h]

You can set an onUpdate callback for the tween

https://github.com/photonstorm/phaser/blob/master/src/tween/Tween.js#L634

[lumoludo]

You can also set them up as individual tweens, use their individual onComplete functions, and set them up to chain together.
http://phaser.io/examples/v2/tweens/chained-tweens

[Jerorx]

@alex_h: it seems that this callback fires at every frame, not when each intermediate value in the array is reached. It's useful to encapsulate the monitoring of the tween elsewhere than in the update loop, but this would still require me to manually check at every frame the state of advancement of the tween, wouldn't it?
What would be great would be, in my example, a callback that fires only three times, that is, when the sprite reaches the three positions (1,2), (1,3),(2,3) .

@lumoludo:Last time I used chained tweens, I had a slight interruption between each tween. Meaning that if my sprite has to move five times forward, and I use five chained tweens, the sprite would briefly stop four times, instead of performing one smooth progression. Or maybe I did it wrong? That would be good news, because the only hack I found at the time to solve that issue was to extract all the straight lines of n points in the path and create as many tweens, but it felt overly complex.
 

[lumoludo]

@Jerorx That makes sense, now that I look at the Phaser tween code. When I had chained tweens previously, it wasn't in an animation where I would have noticed slight gaps.

The issue that causes the gaps is that the tweens are unlikely to end on an exactly timed frame. So if the tween needs 0.02 seconds to complete, but the elapsed time passed into the tween is 0.05, then that extra 0.03 seconds (in this example) is lost and would cause the jitter.
You could modify your local Phaser code itself to achieve what you are aiming for. It looks like the changes would be in {root}/tweens/tween.js and {root}/tweens/tweendata.js. There are two options I can see, though both of them could get a little messy:
1. Add functionality for adding onComplete callbacks to the TweenData objects contained in a Tween. That would let you use the code snippet you included in your original post.
2. Have the TweenData objects report any 'excess' time lost back to the Tween object that owns it when the TweenData returns COMPLETE from TweenData::update(). Then, in the Tween::update() function, use that returned time value to move the next chained Tween forward by that much time. Then, use chains and the normal onComplete callbacks like I suggested in my original post.

I think option 1 would be a simpler route, but it'll still require adding some extra functions to the Tween class.