Forums » Impact Engine » Hybridizing JS Greensock / Tweenlite and Impact

Recently, Greensock released a JavaScript version of their popular ActionScript tweening suite. I have worked with the ActionScript version, and have been experimenting using the new release in Impact. It has worked out well.

I don't know how familiar the Impact community is with Greensock, or other tween engines, but I believe this new release should have a strong influence on Impact development.

There is a key difference in the way Impact and TweenLite handle time and updates. If I am understanding correctly, both handle frame dropping gracefully, but only Impact has a settable, maximum allowed dropped frames. This difference should be expected to cause the two engines to get out of sync, which may not be a problem for some things, but a solution should be worked out to allow for integration of these two great tools.

So I actually figured out how to get the Impact engine to trigger updates to TweenLite (or TweenMax), and for TweenLite to look to Impact for it's time code.

1. Change this:

_getTime = Date.now || function() {return new Date().getTime();};

to this;

_getTime = function () {
    return (ig.system) ? ig.system.clock.delta() * 1000 :  0;
};

2. Comment out the two lines in TweenLite that look like this:

_id = _req( _self.tick );

3. In the run function for ig.impact.game add this as the first line:

TweenLite.ticker.tick();

Please note that these mods worked for the beta (v12) version. Please shoot an email to bradley( at )seven2.com if you have any problems.

Has anyone had success using Greensock with Impact? Looking for some examples to use for guidance.

I tried out the instructions above using TweenMax and got it to work. I ran into some problems.

On my title screen I create an ig,font object. I want the text to continuously fade in and out so I do this in Init and it works:

TweenMax.to(this.textmessage, 1, {alpha: 0, ease:Power2.easeInOut, repeat: -1, yoyo: true})

I play some music and try this and it works:

TweenMax.to(ig.music, 4, {volume: 0, ease:Power2.easeInOut, repeat: -1, yoyo: true})

In Init, I spawn an Entity and try this:

TweenMax.to(this.entityinstance, 1, {pos: {y:200}, ease:Power2.easeInOut, repeat: -1, yoyo: true})

This does not work. The entity doesnt draw. If I check out its pos.x and pos.y it shows NaN.

Could anyone please tell me what im doing wrong?

After a re-freshed pair of eyes, solved:

Work on the pos object to get rid of the NaN.

TweenMax.to(this.entityinstance.pos, 1, {y: 200, ease:Power2.easeInOut, repeat: -1, yoyo: true})

Then make sure you override the update() for the entity so Impact doesnt do any physics stuff.

Bump.

It looks like the timing in GS has been updated since I last used it.

_id = _req( _self.tick );

This line doesn't exist anymore. Can anybody help to fix the latest version of GS to use impacts ticker?