Jump to content
GreenSock

gigbig

Tween is 1 frame late, maybe immediateRender is not the problem

Recommended Posts

Hi,

I am creating a simple particle-system using GSAP, but I am having a weird problem: all the properties used work correctly, except for the ones I add in the timeline with a fromTo tween, color and brightness.

Using the following code I obtain a particle that moves, scales, rotates, fades correctly from an initial state, but if I try to tween color and brightness the first frame of the tween has not these two filters applied, just the first one, even if I set immediateRender to true:

 

private function generateTimeline(): void {
	particleTimeline = new TimelineMax({onStart: onStart, onComplete: onComplete, autoRemoveChildren: true, immediateRender: true});
	
	if (xOut != gfx.x) {
		xTween = TweenMax.to(gfx, life,{x: xOut, ease: xEase});
		particleTimeline.add(xTween, 0);}
	
	if (yOut != gfx.y) {
		yTween = TweenMax.to(gfx, life, {y: yOut, ease: yEase} );
		particleTimeline.add(yTween, 0);}
	
	if (alphaOut != gfx.alpha) {
		alphaTween = TweenMax.to(gfx, life, { alpha: alphaOut, ease: alphaEase});
		particleTimeline.add(alphaTween, 0);}
	
	if (scaleXOut != gfx.scaleX) {
		scaleXTween = TweenMax.to(gfx, life, {scaleX: scaleXOut, ease: scaleXEase});
		particleTimeline.add(scaleXTween, 0);}
	
	if (scaleYOut != gfx.scaleY) {
		scaleYTween = TweenMax.to(gfx, life, {scaleY: scaleYOut, ease: scaleYEase});
		particleTimeline.add(scaleYTween,0);}
	
	if (rotationOut != gfx.rotation) {
		rotationTween = TweenMax.to(gfx, life,{rotation: rotationOut, ease: rotationEase});
		particleTimeline.add(rotationTween, 0);}
	
	if (((colorIn != colorOut) && (colorInAmount > 0 || colorOutAmount > 0)) || ((colorIn == colorOut) && (colorInAmount > 0 || colorOutAmount > 0) && (colorIn != 0xffffff))) {
		colorTween = TweenMax.fromTo(gfx, life, {colorMatrixFilter: {colorize: colorIn, amount: colorInAmount }}, {colorMatrixFilter: {colorize: colorOut, amount: colorOutAmount, remove: true }});
		particleTimeline.add(colorTween, 0);}
							
	if ((brightnessOut != brightnessIn) && (brightnessIn != 1)) {
		brightnessTween = TweenMax.fromTo(gfx, life, {colorMatrixFilter:{brightness: brightnessIn }}, {colorMatrixFilter: {brightness: brightnessOut, remove: true }});
		particleTimeline.add(brightnessTween, 0);}
}

In the attached PNG you can see the blue particle before yellow color is applied.

Any suggestion?

post-9410-0-54160400-1421333845_thumb.png

Link to comment
Share on other sites

although there is no way to test that code, it appears that this is an overwriting matter.

 

You are creating 2 tweens that use colorMatrixFilter on the same object at the same time. 

You would get similar results if you did

TweenMax.to(mc, 1, {x:200});
TweenMax.to(mc, 1, {x:-500});

Those tweens are going to compete for control over x.

 

Also keep in mind that a color matrix is formed by combining multiple values so your first tween may create a certain matrix to adjust the color, but when your second tween gets created it basically wipes out that matrix and creates a new one with the setting you provided for brightness. 

 

TweenMax.to(mc, 3, {colorMatrixFilter:{brightness: 2, remove: true }});
TweenMax.to(mc, 3, {colorMatrixFilter:{colorize: 0x00ff00, amount: 1, remove: true }}); //this tween builds a completely new matrix

I think you are going to have to re-work your conditional logic so that only 1 colorMatrix tween is created.

Link to comment
Share on other sites

Ok, I will rework the conditional part.

Anyway I have done another test, and as you said the colorize effect is being overwritten by brightness, but the first frame has the same problem as before, look at the attached PNG.

 

New test: I kept colorize only, but the problem persists.

post-9410-0-64653800-1421342150_thumb.png

Link to comment
Share on other sites

Sorry, I just don't know what I'm supposed to be gathering from comparing your previous code fragment to that static image. I see a lot of circles with varying degrees of blueness. I have no idea what the colorIn or colorOut values are (or any other variables for that matter)

 

It would really help if you could provide a simple fla that clearly illustrates the issue, preferably with a single timeline (or tween) of a single element. 

 

thanks

Link to comment
Share on other sites

By the way, you need to set immediateRender on the tween, not the timeline. Or you could force a render immediately across the entire timeline by calling timeline.progress(1).progress(0) right after you populate it with all your tweens.

Link to comment
Share on other sites

Sorry, I just don't know what I'm supposed to be gathering from comparing your previous code fragment to that static image. I see a lot of circles with varying degrees of blueness. I have no idea what the colorIn or colorOut values are (or any other variables for that matter)

 

It would really help if you could provide a simple fla that clearly illustrates the issue, preferably with a single timeline (or tween) of a single element. 

 

thanks

 

Sorry, the particle system is instancing cyan dots following the mouse position: I have set brightness to start from -1 to 1, so the darker dots have just been generated: the single bright one (and smallest one) on top of them is the last one generated, with the first frame missing the brightness filter.

 

 

By the way, you need to set immediateRender on the tween, not the timeline. Or you could force a render immediately across the entire timeline by calling timeline.progress(1).progress(0) right after you populate it with all your tweens.

 

That was my first try, but behaved the same way. As soon as I can (in a few hours) I will try forcing render: the problem is that it would do this double step at each particle generated.

Link to comment
Share on other sites

  • 3 weeks later...

I completely rebuilt the method for constructing the timeline, and I found out the problem: everytime a particle was instanced or restored from pooling it was reset to its initial state, and for colorMatrixFilter properties I used a Tween that set the properties asynchronously, so interfering with the effective initial state or the displayed particle.

 

I fixed the problem showing effectively the particle only AFTER this reset process has completed, as it is not instantaneous even if duration of the tween is set to 0.01.

 

Is there a way to remove or set initial colorMatrixFilter state without using a tween? To remove it I can use "remove: true" at completion ok, but to set the initial state? If I use TweenXXXVars, how can I set parameters to emulate the "fromTo" function? If I set parameters using TweenXXXVars I am  going to use a "to" function, right.

Link to comment
Share on other sites

you can use fromTo() with TweenLite vars like so

 

TweenLite.fromTo(mc1, 1, new TweenLiteVars({x:300, y:100}), new TweenLiteVars({x:400, y:200}));

//set is a 0-duration tween
TweenLite.set(mc2, new TweenLiteVars({x:0, y:100}));

The same syntax works also in timelines

 

var tl = new TimelineLite();
tl.fromTo(mc1, 1, new TweenLiteVars({x:300, y:100}), new TweenLiteVars({x:400, y:200}));


tl.set(mc2, new TweenLiteVars({x:0, y:100}));
Link to comment
Share on other sites

The solution is so obvious that I am blushing: I never considered .set and I wonder why.

For what concerns Vars I have to use them more often, as I tend to use always objects.

Thank you guys!

Link to comment
Share on other sites

You are very welcome. Nothing to be embarrassed about. Glad you found the solution and it ended up being an easy one :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×