Using coroutines to fade in/out TextMeshPro Text Element

Question

I am setting up a "scene intro" with some text saying 'Level 1' using TextMeshPro. I have created the text element in canvas and i am trying to find a way to make it fade in, then wait, and then fade out (Somewhat like what you see when you discover a new place in Skyrim).

So far i tried a versatile solution so i can use the same script for other uses (eg not in the start of the scene, not only fade in etc).

Using TMPro:

...
using TMPro;
...

Start and declaration:

public class IntroFade : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI textToUse;
    [SerializeField] private bool fadeIn = false;
    [SerializeField] private bool fadeOnStart = false;
    [SerializeField] private float timeMultiplier;
    private bool FadeIncomplete = false;

    private void Start()
    {

        if (fadeOnStart)
        {
            if (fadeIn)
            {
                StartCoroutine(FadeInText(timeMultiplier, textToUse));
                FadeIncomplete = true;
            }
            else
            {

                StartCoroutine(FadeOutText(timeMultiplier, textToUse));
            }
        }
    }
...

Update in which i want to fadeout once fadein is done

    private void Update()
    {
        if (FadeIncomplete)
        {
            StartCoroutine(FadeOutText(timeMultiplier, textToUse));
        }
    }

Corouritnes for the actual fading:

private IEnumerator FadeInText(float timeSpeed, TextMeshProUGUI text)
    {
        text.color = new Color(text.color.r, text.color.g, text.color.b, 0);
        while (text.color.a < 1.0f)
        {
            text.color = new Color(text.color.r, text.color.g, text.color.b, text.color.a + (Time.deltaTime * timeSpeed));
            yield return null;
        }
    }
    private IEnumerator FadeOutText(float timeSpeed, TextMeshProUGUI text)
    {
        text.color = new Color(text.color.r, text.color.g, text.color.b, 1);
        while (text.color.a > 0.0f)
        {
            text.color = new Color(text.color.r, text.color.g, text.color.b, text.color.a - (Time.deltaTime * timeSpeed));
            yield return null;
        }
    }
    public void FadeInText(float timeSpeed = -1.0f)
    {
        if (timeSpeed <= 0.0f)
        {
            timeSpeed = timeMultiplier;
        }
        StartCoroutine(FadeInText(timeSpeed, textToUse));
    }
    public void FadeOutText(float timeSpeed = -1.0f)
    {
        if (timeSpeed <= 0.0f)
        {
            timeSpeed = timeMultiplier;
        }
        StartCoroutine(FadeOutText(timeSpeed, textToUse));
    }

So what happens is it either fades in OR fades out depending on the Coroutine that starts first. I am not able to make it so it fades in, stays on screen for like 2 seconds and then fades out.

I also tried fading in then creating a coroutine to waitforseconds and then call the fadeout coroutine but that didn't work either.

Answer 1

A Coroutine can wait for the completion of another coroutine, thinking about it this way will simplify the problem immensely. You have already created your fade in and fade out, now you just have to run them in sequence with a 2 second wait between them.

private IEnumerator IntroFade (TextMeshProUGUI textToUse) {
   yield return StartCoroutine(FadeInText(1f, textToUse));
   yield return new WaitForSeconds(2f);
   yield return StartCoroutine(FadeOutText(1f, textToUse));
   //End of transition, do some extra stuff!!
}

If you are interested, these articles are pretty insightful when it comes to learning more about coroutines.