CPU Performance, Tick and Multiple Canvas

[upressplay]

I'm trying to use TweenMax/TweenLite to control the drawing of my site.

 

TweenLite.ticker.addEventListener("tick", drawCanvas, this, false, 2);

 

This seems to be firing all of the time. I thought it only fired when the TweenMax was updated. Am I missing a setting?

 

What I want to do is have 3 canvas' in play. One for the main content, the nav and an overlay for content showcasing. I would like to limit the drawing to only when elements in these canvas areas are updated. Which would be triggered by a TweenMax animation event.

 

TweenLite.ticker.addEventListener("tick", drawMain, this, false, 2);

TweenLite.ticker.addEventListener("tick", drawNav, this, false, 2);

TweenLite.ticker.addEventListener("tick", drawOverlay, this, false, 2);

 

Or am suppose to do this?

 

TweenLite.to(this, .2, {colorProps:{fill:"rgb(202,202,202)"}, roll_alpha:0, overwrite:2, onUpdate:drawMain});

TweenLite.to(this, .2, {colorProps:{fill:"rgb(202,202,202)"}, roll_alpha:0, overwrite:2, onUpdate:drawNav});

TweenLite.to(this, .2, {colorProps:{fill:"rgb(202,202,202)"}, roll_alpha:0, overwrite:2, onUpdate:drawOverlay});

 

The above seems to get caught up, when there are multiple buttons firing. Like when someone mouses over 5 buttons at the same time. Firing something similar to the above in the over and out states of each button.

 

What is the best approach? Any ideas would be appreciated?

[GreenSock]

Good questions.

 

Yes, the ticker continuously updates, even when there isn't a tween active. This is very purposeful because it allows game developers (or anyone) to tap into a central timing mechanism to drive screen updates, and have it all coordinated with the animation engine's updates.

 

If you only want to execute a function when the tween updates, you are correct - you'd need to use an onUpdate. However, if you've got lots of concurrent tweens and you want to streamline things so that only one onUpdate is called after ALL of those tweens have executed, you can simply wrap the tweens in a TimelineLite (or TimelineMax) instance that has an onUpdate of its own. Like this:

 

var tl = new TimelineLite({onUpdate:drawAll});
tl.insert( TweenLite.to(...) );
tl.insert( TweenLite.to(...) );
...
function drawAll() {
   console.log("the tweens have updated. Draw now...");
}

 

The TimelineLite's onUpdate won't run until its children have been updated.

 

The other nice thing about this approach is that it allows you to control an entire group of tweens with a single instance. You can pause(), resume(), reverse(), or seek() on the TimelineLite instance.

 

Does that clear things up?

[GreenSock]

Oh, and one other idea: You could have an onUpdate in each of your tweens that calls a function that sets a common "needsRedraw" variable (or whatever you want to name it) to true. Then, in your redraw() method, you can check for that value, kinda like:

 

var needsRedraw = false;
TweenLite.to(obj1, .2, {roll_alpha:0, onUpdate:invalidate});
TweenLite.to(obj2, .2, {prop2:0, onUpdate:invalidate});
function invalidate() {
   needsRedraw = true;
}
function redraw() {
   if (needsRedraw) {
       ...run your redraw logic here...
       needsRedraw = false;
   }
}
TweenLite.ticker.addEventListener("tick", redraw);

 

 

The only benefit of this over the TimelineLite solution is that if there are large gaps in the TimelineLite where there are no tweens, it will still call the onUpdate because the time did indeed get updated inside the TimelineLite, thus your redraw would run. But in the above solution, true redraws would only occur when tweens actually changed values, and only once on each frame.

[upressplay]

I used the last one. Creating redraw boolean for each of the canvas. Thank you sir.