Code for FlxG.fade() fade in

[FlixelCommunityBot]

Issue #190 by: KinoftheFlames

Just added an optional boolean paramater to FlxG.fade() that controls whether the fade is fading from transparent to a color or a color to transparent (I use a fade out for states I leave and a fade in for states entered, for a smooth look).

Here are the full pastes for the FlxG and FlxCamera files on pastebin, with just the changed snippets below. Files are from the latest dev.

FlxG: http://pastebin.com/Q5bWex2K FlxCamera: http://pastebin.com/8tbY3v4K

FlxG:

/**
         * The screen is gradually filled with this color.
         * 
         * @param   Color       The color you want to use.
         * @param   Duration    How long it takes for the fade to finish.
         * @param   FadeIn      True fades from a color, false fades to it.
         * @param   OnComplete  A function you want to run when the fade finishes.
         * @param   Force       Force the effect to reset.
         */
        static public function fade(Color:uint=0xff000000, Duration:Number=1, FadeIn:Boolean=false, OnComplete:Function=null, Force:Boolean=false):void
        {
            var i:uint = 0;
            var l:uint = FlxG.cameras.length;
            while(i < l)
                (FlxG.cameras[i++] as FlxCamera).fade(Color,Duration,FadeIn,OnComplete,Force);
        }

FlxCamera:

        /**
         * Internal, used to control the "fade" special effect.
         */
        protected var _fxFadeIn:Boolean;
            _fxFadeIn = false;

            //Update the "fade" special effect
            if((_fxFadeAlpha > 0.0) && (_fxFadeAlpha < 1.0))
            {
                if (_fxFadeIn)
                {
                    _fxFadeAlpha -= FlxG.elapsed/_fxFadeDuration;
                    if(_fxFadeAlpha <= 0.0)
                    {
                        _fxFadeAlpha = 0.0;
                        if(_fxFadeComplete != null)
                            _fxFadeComplete();
                    }
                }
                else
                {
                    _fxFadeAlpha += FlxG.elapsed/_fxFadeDuration;
                    if(_fxFadeAlpha >= 1.0)
                    {
                        _fxFadeAlpha = 1.0;
                        if(_fxFadeComplete != null)
                            _fxFadeComplete();
                    }
                }
            }

        /**
         * The screen is gradually filled with this color.
         * 
         * @param   Color       The color you want to use.
         * @param   Duration    How long it takes for the fade to finish.
         * @param   FadeIn      True fades from a color, false fades to it.
         * @param   OnComplete  A function you want to run when the fade finishes.
         * @param   Force       Force the effect to reset.
         */
        public function fade(Color:uint=0xff000000, Duration:Number=1, FadeIn:Boolean=false, OnComplete:Function=null, Force:Boolean=false):void
        {
            if(!Force && (_fxFadeAlpha > 0.0))
                return;
            _fxFadeColor = Color;
            if(Duration <= 0)
                Duration = Number.MIN_VALUE;
            _fxFadeIn = FadeIn;
            _fxFadeDuration = Duration;
            _fxFadeComplete = OnComplete;

            if (_fxFadeIn)
                _fxFadeAlpha = .999999;
            else
                _fxFadeAlpha = Number.MIN_VALUE;
        }

[IQAndreas]

How about using terminology similar to TweenLite, and just use fadeFrom() and fadeTo() (or just regular fade() for that one)? Or is the Boolean clearer?

[Dovyski]

I never really understood the fadeFrom() and fadeTo() in TweenLite =P. Could you write a small example?

[IQAndreas]

I never really understood the fadeFrom() and fadeTo() in TweenLite =P. Could you write a small example?

Sorry, I meant TweenLite uses TweenLite.to() and TweenLite.from(), and we could follow suit by using fadeTo() and fadeFrom().

The way it works is, say you have an object positioned right where you want it when you create it. Something like this:

var dialog:Dialog = new Dialog("Are you sure you wish to continue?");
dialog.x = (stage.stageWidth / 2) - (dialog.width / 2);
dialog.y = (stage.stageHeight / 2) - (dialog.height / 2);
dialog.alpha = 1.0;
dialog.addEventListener(Dialog.ANSWERED, hideDialog);
stage.addChild(dialog);

Now, if you want to add a fancy "disappear" effect for the dialog, you use this code:

function hideDialog():void {
    // Moves "down" below the bottom of the screen before being removed from the stage
    TweenLite.to(dialog, 2, { y: stage.stageHeight + 100, alpha: 0.0, onComplete: removeDialog});

Simple enough. However, if you want to create the same fancy effect to make the dialog appear on the stage, you could write your code like this:

var dialog:Dialog = new Dialog("Are you sure you wish to continue?");

// Temporarily values for the dialog. These will be changed once the
//   dialog has been "tweened into place"
dialog.x = (stage.stageWidth / 2) - (dialog.width / 2);
dialog.y = -dialog.height - 100;
dialog.alpha = 0.0;

dialog.addEventListener(Dialog.ANSWERED, hideDialog);
stage.addChild(dialog);

// This is the actual location we want the dialog to be at
TweenLite.to(dialog, 2, {y: (stage.stageHeight / 2) - (dialog.height / 2), alpha: 1.0});

However, if you utilize the power of TweenLite.from(), your code becomes much nicer!

// Same initializer as before. This is where we want the dialog to be when we are using it!
var dialog:Dialog = new Dialog("Are you sure you wish to continue?");
dialog.x = (stage.stageWidth / 2) - (dialog.width / 2);
dialog.y = (stage.stageHeight / 2) - (dialog.height / 2);
dialog.alpha = 1.0;
dialog.addEventListener(Dialog.ANSWERED, hideDialog);
stage.addChild(dialog);

// This is where we want to move the dialog from
TweenLite.from(dialog, 2, {y: -dialog.height - 100, alpha: 0.0});

[Dovyski]

Thanks for the explanation and examples! I finally understood that :D

I agree about adding to and from flavors, it will make the code much better. I just want to clarify our position regarding visual effects in FlxG. Right now we have FlxG.fade() and FlxG.shake(). If we start adding flavors, we might end up with several effects spread all over FlxG.

It is better to move them all to another place, e.g. FlxG.effects?

[IQAndreas]

It is better to move them all to another place, e.g. FlxG.effects?

Already in our todo list. :wink: https://github.com/FlixelCommunity/flixel/issues/142#issuecomment-33314434

[Dovyski]

Nice, thanks! :D