interpolate value during tween.onUpdateCallback

[GameDemon]

I have a sprite with a graphic, that I'm scaling while tweening. I need the graphic's lineStyle stroke-width to remain constant when I scale, so I'm hoping to use tween.onUpdateCallback and redraw it each frame.

 

I believe I'll need to access the tween progress as a normalised value (0-1), and then interpolate that to draw the graphic at the correct scale.

 

Can anyone give me tips on how to do this? I'm not sure how to get the tween progress value, or if Phaser has an internal 'linear interpolate' function available (for comparison Processing has lerp )

 

Here is some pseudocode:

tween.onUpdateCallback(function(){  graphic.clear();  var diameter = linearInterpolate(128,512,tweenProgress); // min,max,0-1  drawCircle(diameter);}, this);

Many thanks!

[drhayes]

One thing to remember is that a single Tween instance can represent multiple child tweens, and I don't believe there's one "global" 0 - 1 value for it. There is for each child, though, stored in a TweenData instance.

 

Your onUpdateCallback will be called with the tween data representing the tween running right now. It has a property called "percent" that goes from 0 to 1 as the tween runs. Pretty sure that's what you're looking for.

[GameDemon]

Thanks a lot Dr that was really helpful!

 

After I read your post I was stuck with how to access the TweenData inside of Tween.onUpdateCallback(). Not sure if it's in the docs somewhere (I couldn't see it at http://phaser.io/docs/2.4.3/Phaser.Tween.html#onUpdateCallback), but I found the parameters passed to Tween.onUpdateCallback() are (Tween, TweenData.percent, TweenData) - so I can use the second one conveniently.

 

Here was my final code:

tween.onUpdateCallback(function(twn,percent,twnData){  graphic.clear();  var diameter = Phaser.Math.linearInterpolation([128,512],percent);  drawCircle(diameter);}, this);