GreenSock

[friendlygiraffe2]

Hi, is there any disadvantage of using GreenSocks Tween engine instead of Phasers built in one?

 

I've done a few tests and there doesn't seem to be any difference

 

Thanks

[george]

It's totally fine. Maybe you want to make sure that you pause all your greensock tweens when phaser gets paused (manual or by code/lost window focus) so that no tween is running during the pause. I used TweenMax.globalTimeScale(0) && TweenMax.globalTimeScale(1) in the past to do so. This will affect all running tweens or timelines. By setting the time scale to zero TweenMax will set the time to a nearly infinity long duration which equals to a full pause. Set it back to 1 to resume.

 

Use the phaser signals game.onPause and game.onResume to register these actions.

game.onPause.add(function(){  TweenMax.globalTimeScale(0);});game.onResume.add(function(){  TweenMax.globalTimeScale(1);}); 

Regards George

[rich]

Wouldn't it make more sense to use TweenMax.pauseAll and resumeAll?

 

There's no reason not to use it. If I had to add something I'd say that it runs its own raf implementation and there's a load of extra baggage in there for CSS and other irrelevant (to Phaser) things, but essentially it works really well.

 

All I'd say is make sure you're actually using it for something that the Phaser TweenManager can't do. Otherwise I'm not sure I see a benefit tbh.

 

Oh and one thing I see lots of devs get caught out with: Check your project doesn't need the commercial TweenMax license! because most do. This may not even be an issue for you, just adding it because it happens a lot.

[GreenSock]

Howdy folks. Just wanted to chime in with a few comments:

1. Someone mentioned that there's a lot of extra baggage in TweenMax like CSSPlugin that perhaps you don't need - you can simply use TweenLite and TimelineLite separately to keep things very small. TweenMax is intended to be super robust and easy to drop in without hassles of loading multiple files, that's all. 
2. With TweenLite/Max, you get the lagSmoothing() feature baked in which helps automatically recover from lag without skips/jumps, all while keeping every animation perfectly synchronized across the board. I'm not familiar enough with Phaser's built-in stuff to know if it has that sort of feature, but I've never seen any other engine that has it. You can read more at http://greensock.com/gsap-1-12-0
3. Again, I'm not familiar enough with Phaser's built-in capabilities but I'd venture to guess that there are quite a few features that GSAP offers uniquely, whether that be nestable timelines, animation along beziers, complex overwrite management options, unique eases like RoughEase, SlowMo, tons of callbacks, etc. There's a page that discusses some of this stuff at http://greensock.com/why-gsap/ in case it's helpful.
4. Rich is right - TweenMax.pauseAll() and TweenMax.resumeAll() are probably the most intuitive option for what you guys are describing, but I'd also point out that you can use TimelineLite.exportRoot() to basically have it take all of the active tweens at any given time, wrap them in a TimelineLite which you can then control however you want, like pause() it or tween its timeScale to make things go in slow motion. The really cool thing about this is that you can then create new tweens that still work while all the others are paused (or slowed down or whatever). Imagine a game where you want to pause the game but open a modal window and when the user is done interacting with it, it tweens out of the way and you resume() the game.
5. As far as the license goes, most people don't need the special commercial license, but we like to think it pays for itself very quickly in cases where you do need it. See http://greensock.com/licensing/ for details.

Happy tweening! 

[george]

Regarding pauseAll and resumeAll. I had my problems using them to hold all tweens and timelines. I got problems with the syncing of timelines and some tweens were still randomly playing. So I moved to the timeScale solution and never thought of using pauseAll/resumeAll again. Thanks for naming them I simply forgot about them. They might work as intended in other projects than mine.

[rich]

@Greensock - thanks for the clarifications. My comment about if someone needs TweenMax or not was simply a way for them to minimise dependencies - if all they're doing is tweening the position / scale / alpha of a sprite or something, then there's no real need for it (and adds complexity their end re: pausing and source packaging.)

 

If they're doing anything else, or need a complex timeline then of course they should use it

[friendlygiraffe2]

Excellent, thanks all

 

I'm an Actionscript / GreenSock nerd, so using GS makes it 100 times faster to code

[friendlygiraffe2]

Also, when switching states, would you also need to pause the Tweens ?

[rich]

No, technically you'd need to erase them all - otherwise TweenMax will carry on trying to tween an object that has been destroyed, or even worse keep a reference to it alive in memory when it's no longer needed.

[friendlygiraffe2]

Whereas Phaser's built-in Tween engine would erase the Tweens automatically when switching states ?

[rich]

Yes.

[friendlygiraffe2]

That's a big plus. Good to know, thanks

[rich]

I'm sure TweenMax has the ability to nuke all tweens / internal references too. I couldn't say what function it is though, but when you find it in their docs you could just make sure each State has a 'shutdown' method, and call it from there. Should do the same thing then.

[GreenSock]

Yep:

TweenLite.killTweensOf(yourObject);

But GSAP releases stuff after the tween is done anyway, so it's not like it maintains references forever. You should be fine. 

 

And yeah, rich, I totally understand what you meant. If they're only doing simple stuff and they know they'll never need the more advanced features, I'm sure the baked-in tweening stuff is more than adequate. 

 

george, if you ever run into an problems with GSAP, please let us know immediately. I've never heard any reports like that of tweens "randomly playing" or synchronization problems. I'm quite surprised and very curious to see an example if you don't mind. Feel free to post at http://greensock.com/forums/ and we'll jump in and help pronto. 

[jdnichollsc]

I created a sprite animation with tween in GSAP http://codepen.io/jdnichollsc/pen/ZYeWEr (I can reverse the animation in my timeline  )

 

Regards, Nicholls

[mcolman]

Let's refresh this topic! I used to use @Greensock with EaselJS over TweenJS. It worked well, but I noticed in the Chrome timeline I could always see 2 separate requestAnimationFrames. This is because EaselJS and Greensock use their own Tickers. This would obviously be the same case as Phaser. So do we think this is bad? It sounds bad to me, running 2 tickers, but without accurately testing the performance I'm not really sure.

 

I ask this because I'm building a framework on top of Phaser to be used on a site that will contain hundreds of mini-games, so I need to make the right choice here!

 

Thanks!! 

[george]

The RAF calls stacked and executed in order every 1/60s. So the only difference is that you have one vs. two or three function calls. There are many things in your code that will call a function much more frequently during a frame. I would suspect that there is no big difference- definitely not for a minigame. Do not overthink that.

Maybe you can find or create a test on jsperf.com for this testcase to be sure.

 

Regards George

[mcolman]

Yep makes sense. 

 

I'll investigate making a plugin for GSAP to use the Phaser ticker instead of it's own. I find there are a few more benefits besides a slight perf gain of calling a single function. 

1. It would mean pausing the Phaser game will also pause the tweens.

2. You would know exactly when tweens will update in your code.

[george]

Ok my two last cents on this:

1. You can hook onto the pause event/signal of phaser to pause all gsap tweening actions- see the very beginning of this thread  

2. I can't imagine any use case where I need or want to know when a tween update occurs. 

 

Have fun coding

Regards George