An issue with a coroutine and the Alpha color value of a UI Button.

Unity Engine
,
1

I’m following this tutorial: https://owlcation.com/stem/How-to-fade-out-a-GameObject-in-Unity
My script:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ScriptB : MonoBehaviour
{
    public GameObject aButtonObject;
    public float fadingSpeed = 2;
    public bool aBool = false;

    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        if(ScriptA.valueOfA == 3)
        {
            StartCoroutine("FadingIn");
            StopAllCoroutines();
        }
        if(ScriptA.valueOfA > 0)
        {
            StartCoroutine("FadingOut");
        }
    }
    public IEnumerator FadingIn()
    {
        while (aButtonObject.gameObject.GetComponent<Button>().colors.normalColor.a < 255)
        {
            ColorBlock objectColor = aButtonObject.gameObject.GetComponent<Button>().colors;
            float fadeAmount = objectColor.normalColor.a + (fadingSpeed * Time.deltaTime);
            objectColor.normalColor = new Color(objectColor.normalColor.r, objectColor.normalColor.g, objectColor.normalColor.b, fadeAmount);
            aButtonObject.gameObject.GetComponent<Button>().colors = objectColor;
            yield return null;
        }
    
    }

    public IEnumerator FadingOut()
    {
        while (aButtonObject.gameObject.GetComponent<Button>().colors.normalColor.a > 0)
        {
            ColorBlock objectColor = aButtonObject.gameObject.GetComponent<Button>().colors;
            float fadeAmount = objectColor.normalColor.a - (fadingSpeed * Time.deltaTime);
            objectColor.normalColor = new Color(objectColor.normalColor.r, objectColor.normalColor.g, objectColor.normalColor.b, fadeAmount);
            aButtonObject.gameObject.GetComponent<Button>().colors = objectColor;
            yield return null;
        }
    }
}

The script is attached to an empty GameObject that is present in the scene. The UI Button is attached to the script via the Inspector. Both the FadingIn and FadingOut work fine on their own.

What i’m trying to do:
I’m trying to make the normalColor.a of the UI Button GameObject fade in or out depending on the ScriptA.valueOfA value.

What is the issue:
While it seems to work, the FadingOut coroutine doesn’t seem to provide a smooth fade out. On its own, the FadingOut coroutine works smoothly, however in conjunction with FadingIn it seems to fade out instantly.

I assume it’s an issue with how the coroutines are called or a coroutine conflict, however i don’t know what exactly could cause it.

Thank you all in advance for your help!

2

Fading, simple and easy:

3

Thank you for your response, @Kurt-Dekker ! I’ve decided to try resolving the coroutine issue and it seems that adding StopAllCoroutines(); before StartCoroutine(“FadingOut”) helps to make the FadingOut to work as i would like it to, however it happens at the expense of ~2-3 second pause before actually fading out. Seems like coroutines are a definite no-go for UI element “animation” (at least for me at my current skill level).

Your solution looks very simple to implement and less of a hassle to adjust. I’m going to try it out, thank you very much!

4 
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
 
    public class ScriptB : MonoBehaviour
    {
        public GameObject aButtonObject;
        public float fadeAmount;
        public ColorBlock objectColor;
 
        // Start is called before the first frame update
        void Start()
        {
 
        }
 
        // Update is called once per frame
        void Update()
        {
            if(ScriptA.valueOfA == 3)
            {
                FadingIn()
            }
            if(ScriptA.valueOfA > 0)
            {
                FadingOut()
            }
        }
        public FadingIn()
        {
                ColorBlock objectColor = aButtonObject.gameObject.GetComponent<Button>().colors;
                fadeAmount = Mathf.MoveTowards(fadeAmount, 255, 2.0f * Time.deltaTime);
                objectColor.normalColor = new Color(objectColor.normalColor.r, objectColor.normalColor.g, objectColor.normalColor.b, fadeAmount);
                aButtonObject.gameObject.GetComponent<Button>().colors = objectColor;
                yield return null;
        }
 
        public  FadingOut()
        {
                ColorBlock objectColor = aButtonObject.gameObject.GetComponent<Button>().colors;
                fadeAmount = Mathf.MoveTowards(fadeAmount, 0, 2.0f * Time.deltaTime);
                objectColor.normalColor = new Color(objectColor.normalColor.r, objectColor.normalColor.g, objectColor.normalColor.b, fadeAmount);
                aButtonObject.gameObject.GetComponent<Button>().colors = objectColor;
                yield return null;
        }
    }

I’ve tried replacing the previous version of fadeAmount with the Mathf.MoveTowards function and it seems that it has the same issue with fading out that the coroutine version has: a ~2-3 second pause before actually starting to fade out.

I might try to avoid using ColorBlock as i have a suspicion that it might cause the “pause” issue that i get but i suspect that you can’t really change the normalColor Alpha value without using a ColorBlock (at least when it comes to UI Buttons).

5

Well find out if the code really isn’t even running until 2-3 seconds pass, or find out if perhaps the alpha ramp-up/ramp-down is such that the first 2-3 seconds make no difference. Use lots of Debug.Log(), get hard numbers… is it truly going from 0.0 to 1.0 and then 1.0 to 0.0 without fiddling around? Or is it starting at 0.0 and staying there for 2-3 seconds, THEN going up.

1 Like
6

Yeah, will have to go through that. At least now i understand that the issue doesn’t have anything to do with Coroutines, though using a simple method call on Update seems to be a better idea all around just so i can keep a track of Coroutines in general and not have to bother with troubleshooting them and avoid using them when unnecessary. For now the issue is resolved, thank you again for your help, @Kurt-Dekker !

1 Like