Is there an easy way to FadeOut/FadeIn text in Unity?

Unity Engine
1

I was trying to write two coroutines, one for text FadeOut and one for FadeIn, and it worked fine for me but when I use the FadeOut function and then I quickly use the FadeIn then the FadeIn function does not work.

Is there any build-in functions in Unity that I can use to FadeOut/FadeIn UI text?

2

Yes, use a tweening engine. LeanTween or DoTween are both free and once you learn one, they are super easy and valuable to use.

As for your issue, you are running into a simple problem where you try to fade in while it’s still fading out. I believe what you might want to do is considering canceling the fade out when you want to fade in.

Take a look at how Unity shows you to do that. You could also do it with a boolean, and there are other ways using a Lerp as well.

But for myself, I pretty much use a tweening engine. You would still have to cancel the tween if you’re fading out and then want to fade in, but it’s pretty easy to do.

3

I was already using iTween in my game but it does not work with UI text for some reason.
What is LeanTween and DoTween and how are they different from iTween?

4

They are both tweening engines. Also LeanTween and Dotween are much faster than iTween. I know LeanTween for certain works with text as I use it all the time. Dotween I’m pretty sure also does.

iTween will also work using the valueTo method. iTween for Unity by Bob Berkebile (pixelplacement). We use to use iTween way back, but switched to LeanTween after seeing some of the speed differences. I’m surprised the colorTo doesn’t work on UI text, but it’s been awhile since I’ve used this, so I can’t recall how we use to do this.

Each Tween will handle things their own way, so you’d just have to learn how it works. I can generally help with LeanTween stuff just because I use it a lot, but I haven’t used Dotween (just heard it’s really good as well).

5

I took your advice and I use LeanTween now, the fade works great, thank you
by the way, how does valueTo method works?

6

valueTo (or in LeanTween, it’s just value) is designed to move from a number to another number over a set amount of time while providing an update call that you can do to pass in values as the value changes.

        LeanTween.value(gameObject, 0, 100, 1f).setOnUpdate((float value) =>
        {
            print(value);
        });

(iTween does things a bit different, so I have no example to give of it)

So, for example, instead of the print, you could apply value to whatever you needed. I use this sometimes for sliders. It’s good for a visual indicator of a timer or if you use it for like a cooldown ability where there is an image overlayed on the button and it needs to show a cooldown effect.

But here you can do whatever you want with it. The nice thing is, you can also add conditional statements. Let’s say you want something to trigger if the value goes over 50, then you can do that as well. It’s pretty handy.

Also, LeanTween includes a setOnComplete that is really handy if you want something to trigger after the LeanTween finishes.

1 Like