Running some tweens on a custom ticker

[pakl]

I want to be able to flag specific tweens (or timelines) and then advance these tweens based on a custom heartbeat that does not progress in real time.

 

Use case: I want to use greensock for both UI animations but also for animating in-game objects. While UI animations always run in real time, game animations should run in game time and can be slowed down, sped up or paused entirely.

 

In other libraries I usually overwrote a static .tick method and then filtered out the flagged tweens and provided a different delta in the tick call for those objects but I'm having trouble finding the right method in greensock to achieve this.

[Carl]

There is one ticker in all of GSAP that drives every tween, timeline and delayedCall. It keeps everything absolutely perfectly synchronized.

We do not open up the API for changing the behavior of the ticker, sorry.

 

 

If you want a group of tweens to run at a different rate than your UI animations I would suggest

 

1: place them in their own timeline such as 

gameTweens.add(myTween, gameTweens.time())

then set the timeScale() on that timeline however you like

 

2: similar to your flagging approach, place all your game tweens in an Array and then loop through that Array and adjust the timeScale() of each tween.

[pakl]

Can you point me to where I can find this ticker?

 

I don't mind hijacking the method and making this a special case for my projects but not having the ability to provide a custom heartbeat to all or some tweens is a major hindrance and setting a timescale on some tweens is just not the same. For one, I still need the ability of a timeScale on those tweens and workarounds to multiply into current timescales seems extraordinarily hacky for something that is as simple as 'provide a different delta on tick'.

[pakl]

To better illustrate what I'm after, this is what I used to do with createjs/tweenjs:

//we are using our own heartbeat for the ticker so let's disable the default ticker
if (createjs.Ticker) {
	createjs.Ticker.setPaused(true);
}

Tween = createjs.Tween;

//custom TweenJS.tick implementation to enable tweens to run either on game time (default) or on real time (isRealTime)
var tweenTick = function (gameDelta, drawDelta) {
	var tweens = createjs.Tween._tweens.slice(); // advancing tweens can create new or delete existing tweens.
	for (var i = tweens.length - 1; i >= 0; i--) {
		var tween = tweens[i];
		var ticks = tween._useTicks ? 1 : tween.isRealTime ? drawDelta : gameDelta;
		if (ticks && !tween._paused) {
			tween.tick(ticks);
		}
	}
};

//I would then call tweenTick in my drawloop

Is there a similar array of tweens? or a .tick() method I can replace?

 

I need to make sure that those animations run at the exact same heartbeat than the rest of the game logic.

[GreenSock]

GSAP uses linked lists instead of arrays because they perform better. So no, there's not an array of tweens you can tap into. My guess is that the entire architecture of GSAP is very different than TweenJS because it does so much more. It's build around a concept of timelines which can be nested as deeply as you want, and there's one root timeline (well, another for frames-based ones but that's used less often). 

 

You can definitely add your own "tick" listeners if you want, using TweenLite.ticker.addEventListener("tick", yourFunction) and you can even define a priority so that it runs before or after each tick, but it's not simple to completely unhook the core timing mechanism and hijack it yourself. Well, at least not that we'd officially support/recommend. Technically you could unhook the ticker from the TweenLite.render() method, and then feed your own values into the _rootTimeline and _rootFramesTimeline render() method. That propagates down to all the tweens and other timelines. But again, we can't commit to that API long-term or "officially" recommend any of this hacking  

 

Is that what you were looking for? 

[pakl]

thanks for the reply! I see that this is definitely more complex than expected. Will give it a go and report back.