[SOLVED] Libgdx - Delta Time -> Fade-In Effect

Newbie & Debugging Questions
#1

Hi Guys…
Im having a bit of difficult to come with an idea about this :

A) The image keeps fading out… in 4 seconds, it should be completely black.

B)The image then fades in, in 4 seconds, it should be completely opaque again.

Problem is… DeltaTime…

How do i calculate it properly?
This works perfectly for 4 seconds at 60 fps,
But what if a variation happens? If it was fixed, i would know how-to, but it can goes to 1/30 then 1/45 then 1/60… etc… thats what i dont get it…

Any math tip or code tip, is appreciated. I know i was supposed to know this, but im kinda confused…

Thanks a lot in advance guys and girls? :slight_smile:

if (!fadeSparkle) {

                alpha = alpha - (0.25f) / (1f/delta);
                System.out.println("Fade Out! Alpha = " + alpha);
                player.getCurrent_Level().batch.setColor(1, 1, 1, alpha);
                player.getCurrent_Level().renderer.getSpriteBatch().setColor(1, 1, 1, alpha);

                if (alpha <= 0) {
                    fadeSparkle = true;
                }

            } else {
                alpha = alpha + (0.25f) / (1f/delta);
                 System.out.println("Fade In! Alpha = " + alpha);
                player.getCurrent_Level().batch.setColor(1, 1, 1, alpha);
                player.getCurrent_Level().renderer.getSpriteBatch().setColor(1, 1, 1, alpha);
                if (alpha >= 1) {
                    sparkled = true;
                }
            }
#2

Store a variable representing the time accumulated since fade effect started:
(it could be anywhere, just give the render() access somehow)


public static final double TIME_TO_FADE = 4.0; //seconds

private double timeAcc = 0;

... 

if(effectInAction) {
                timeAcc += delta;
}
if (!fadeSparkle) {

                //alpha = alpha - (0.25f) / (1f/delta);
                alpha = 1 - timeAcc/TIME_TO_FADE;
                if(alpha < 0) alpha = 0;
                System.out.println("Fade Out! Alpha = " + alpha);
                player.getCurrent_Level().batch.setColor(1, 1, 1, alpha);
                player.getCurrent_Level().renderer.getSpriteBatch().setColor(1, 1, 1, alpha);

                if (alpha <= 0) {
                    fadeSparkle = true;
                }

            } else {
                alpha = timeAcc/TIME_TO_FADE;
                if (alpha >= 1) {
                    sparkled = true;
                }
                System.out.println("Fade In! Alpha = " + alpha);
                player.getCurrent_Level().batch.setColor(1, 1, 1, alpha);
                player.getCurrent_Level().renderer.getSpriteBatch().setColor(1, 1, 1, alpha);
}
#3

You could use TimeUtils.nanoTime() instead of calculating delta.

#4

Libgdx already has a built in fade in effect in Actions.fadeIn (Actions has a lot of other effects, too) which you can apply to actors.

#5

BurntPizza
Jvallius
Jimmt

Thanks a lot!
I made some minor modifications though…

Jimmt, its because im actually messing with the orthoMapRenderer… Idk if i can use action on that, will check.
But thanks guys! Its awesome that we can share knowledge :stuck_out_tongue:

BurntPizza, thanks!

 private boolean fade(Player player, float delta, WorldUpdate worldUpdate) {

        //System.out.println("FLAG A");
        if (fadeStatus == fadingOut) {

            timeAcc += delta;
            alpha = 1 - (timeAcc / TIME_TO_FADE);

            //System.out.println("FLAG B ; Alpha = " + alpha);
            if (alpha < 0) {
                alpha = 0;
            }

            player.getCurrent_Level().batch.setColor(1, 1, 1, alpha);
            player.getCurrent_Level().renderer.getSpriteBatch().setColor(1, 1, 1, alpha);

            if (alpha <= 0) {
                timeAcc = 0;
                fadeStatus = finishedFadingOut;
            }

            return false;

        } else if (fadeStatus == finishedFadingOut) {
            timeAcc += delta;
            showEmitters = activateParticleEmitters(worldUpdate);
            fadeStatus = fadingIn;
            return false;
        } else if (fadeStatus == fadingIn) {
            alpha += (timeAcc / TIME_TO_FADE);

            if (alpha > 1) {
                alpha = 1;
            }

            player.getCurrent_Level().batch.setColor(1, 1, 1, alpha);
            player.getCurrent_Level().renderer.getSpriteBatch().setColor(1, 1, 1, alpha);

            if (alpha >= 1) {

                fadeStatus = finishedFadingIn;
            }
            return false;
        }

        //Finished
        if (fadeStatus == finishedFadingIn) {
            return true;
        }

        //dft
        return false;
    }
#6

Yeah I was going to mention the incredibly convenient actor.fadeTo(), but this doesn’t seem like an applicable case.

That being said, you could use the Universal Tween Engine, often paired with libGDX, as it can automate ANY field of an object. You can even use non-linear tweening functions. (You could also do it yourself, but why when there’s the lib)

#7

troll posts :wink:

I agree with BurntPizza, the tween engine is nice for this kind of stuff. Good luck bud :slight_smile: