delayed call progress available?

[rich_earth]

Hi Gsappers!

 

I want to use a TweenLite.delayedCall  as a simple timer for my game.  So it calls a gameOver method when it is finished.

 

Question: is there any reason why delayedCalls dont update progress like tweens? It would be great if my game objects could check how far along the timer is during the game.  So for instance I create a delayed call 10 seconds long

this.gameTimer = TweenLite.delayedCall(10, this.gameTimerEnd);

if I check the progress of the timer after say 5 seconds I would expect it to return 0.5, but it returns 0 until the timer is done after which it returns 0 (See code pen demo)

//after 5 seconds
this.gameTimer.progress() // still returns 0 until full 10 seconds has passed and timer end method called.

Any suggestions or alternative method for a simple game timer using GSAP? 

 

Thanks!

Rich

 

See the Pen KdRpEX by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Great question! And one with not such an obvious answer.

Very cool that you noticed that TweenLite.delayedCall() generates a TweenLite tween.

 

considering the following code

var dc = TweenLite.delayedCall(3, onComplete);

dc is not a tween with a 3-second duration that fires an onComplete callback when finished.

It is a tween with no duration (0 seconds) that is scheduled to run and complete 3 seconds from now.

 

Please check the console in the following pen:

 

var dc = TweenLite.delayedCall(3, onComplete);

function onComplete(){
  console.log("done")
}

console.log("duration = " + dc.duration()); // 0
console.log("startTime = " + dc.startTime()) // 3

http://codepen.io/GreenSock/pen/vNjNdX?editors=001

 

I can not speak directly to why this approach was taken, but I imagine there were some very good reasons:)

 

For the behavior you want, you can just create a tween on an empty object like

var dc = TweenLite.to({}, 3, {onComplete:onComplete});

http://codepen.io/GreenSock/pen/MaGaXL?editors=001

[rich_earth]

Much obliged Carl

[GreenSock]

Actually, startTime() would **NOT** always match the time until the delayedCall gets fired. But don't worry - there's an easy way to accomplish what you're after...

 

Every animation is placed onto a parent timeline (which by default is the root timeline). This ensures that everything is perfectly synchronized across the entire system. startTime() refers to the animation's placement on its parent timeline. So if you create your delayedCall() at the very beginning of the root timeline (like literally the millisecond that time starts running on your web page), then startTime() would indeed match the time until your delayedCall fires, but that's somewhat unlikely. Let's say you've got a button that the user clicks 1.5 seconds after the page loads and then you create a delayedCall(3, ...) - that delayedCall's startTime() would be 4.5. 

 

So if your goal is to find out how much time is left before your delayedCall() gets triggered, you'd do: 

var dc = TweenLite.delayedCall(...);
//then later...
var timeLeft = dc.startTime() - dc.timeline.time();

Notice that all I'm doing is checking the current placement of the playhead on the parent timeline and comparing it to the start time of the delayedCall which is just a zero-duration tween.

 

The reason we use a zero-duration tween with a delay instead of a tween with no delay and a duration that's set to whatever you defined the delay as is because:

1. It performs better. It avoids calling the tween's render method on every update until it's needed. 
2. It seemed to make more sense considering the name that the resulting tween would have a "delay" that's set to whatever you defined rather than a delay of 0 and a long(er) "duration". 

That was a long-winded answer, but ultimately all you need to care about is this: 

dc.startTime() - dc.timeline.time()