Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

interpolate value during tween.onUpdateCallback


GameDemon
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...