Easy way to do a fadeout effect?

(Noah) #1

Is there a simple way to make a fade out/fade in effect without making a tile sheet for a sprite as big as my game is?

(Jacob Albano) #2

Oh my goodness, please don’t even think about using a sprite sheet to animate a fade. Just adjust the alpha property on your graphic.

mySprite.alpha = 0; // totally invisible
mySprite.alpha = 0.5; // 50% transparency
mySprite.alpha = 1; // no transparency

To easily animate a fade, you can do this:

var durationInSeconds:Number = 1.5;
var targetAlpha:Number;

if (fadingIn) targetAlpha = 1;
else targetAlpha = 0;

var tween:VarTween = new VarTween(null, ONESHOT);
tween.tween(mySprite, "alpha", targetAlpha, durationInSeconds, Ease.quadOut);
addTween(tween, true);

To customize the easing behavior, you can pass any of the members of the Ease class, or a custom function if you want to write your own. I like quadratic out, but you may want something different (or even no ease at all, in which case you don’t have to pass anything).

(Mike Evmm) #3

While @jacobalbano 's one is more verbose and better if you plan to fade in/out several times, for simple stuff I usually just resort to this snippet:

FP.tween(IMAGE, { alpha:(IMAGE.alpha)?0:1 }, DURATION);

You can also add easing behaviours (and other stuff) with a fourth parameter, objects.

(Jacob Albano) #4

I personally avoid using FP.tween() because it relocates control of the tween to outside my entities, but that’s a matter of preference which I won’t hold anyone else to. It’s certainly a lot prettier your way.