Background Fade

I'm trying to fade a background image in and out. At some point I will fade new images in and fade old one out. Right now just trying to fade a single image in and out. Not working:

code:

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
5.  
6. public class Fade_Background : MonoBehaviour
7. {
8.     public Image BackgroundImage;
9.  
10.     private bool _FadeIn = false;
11.     private bool _FadeOut = false;
12.  
13.     private void Start()
14.     {
15.         _FadeOut = true;
16.     }
17.  
18.     void Update()
19.     {
20.         if(_FadeOut)
21.         {
22.             StartCoroutine(FadeOut());
23.         }
24.         else
25.         {
26.             StartCoroutine(FadeIn());
27.         }
28.     }
29.  
30.     IEnumerator FadeOut()
31.     {
32.         BackgroundImage = GetComponent<Image>();
33.         var tmpColor = BackgroundImage.color;
34.  
35.         while(BackgroundImage.color.a>0)
36.         {
37.             tmpColor.a -= Time.deltaTime / 2;
38.             BackgroundImage.color = tmpColor;
39.             yield return null;
40.         }
41.  
42.         _FadeOut = false;
43.         _FadeIn = true;
44.         yield return null;
45.     }
46.  
47.     IEnumerator FadeIn()
48.     {
49.         BackgroundImage = GetComponent<Image>();
50.         var tmpColor = BackgroundImage.color;
51.  
52.         while (BackgroundImage.color.a < 0)
53.         {
54.             tmpColor.a += Time.deltaTime / 2;
55.             BackgroundImage.color = tmpColor;
56.             yield return null;
57.         }
58.  
59.         _FadeOut = true;
60.         _FadeIn = false;
61.         yield return null;
62.     }
63. }
64.  

 

You must change line 52
With:
while (BackgroundImage.color.a <255)

 

Right line, wrong fix. Should be < 1f, not < 255. Colors are 0 through 1.

That's not the only issue though. The main issue is that you're starting a new coroutine every frame. In Update(), you're constantly either starting FadeOut or starting FadeIn. These coroutines just sort of stack up every frame, each one constantly overwriting BackgroundImage.color.

Easiest fix here is to not use an "else" in Update (check for each bool individually), and at the start of both coroutines, set both bools to false - only set one of them true when you're ready for Update to call the next coroutine.

 

I got it working, here is the code:

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
5.  
6. public class Fade_Background : MonoBehaviour
7. {
8.     public Image BackgroundImage;
9.     public int _Delay;
10.  
11.     private bool _FadeOut = false;
12.     private bool _Running = false;
13.  
14.     private void Start()
15.     {
16.         GameObject imageObject = GameObject.FindGameObjectWithTag("imgBackground");
17.         BackgroundImage = imageObject.GetComponent<Image>();
18.     }
19.  
20.     void Update()
21.     {
22.         if (!_Running)
23.         {
24.             if (_FadeOut)
25.             {
26.                 StartCoroutine(FadeOut());
27.             }
28.             else
29.             {
30.                 StartCoroutine(FadeIn());
31.             }
32.         }
33.     }
34.  
35.     IEnumerator FadeOut()
36.     {
37.         _Running = true;
38.         if (BackgroundImage == null)
39.         {
40.             GameObject imageObject = GameObject.FindGameObjectWithTag("imgBackground");
41.             BackgroundImage = imageObject.GetComponent<Image>();
42.         }
43.  
44.         Color tmpColor = BackgroundImage.color;
45.  
46.             while (BackgroundImage.color.a > 0.0f)
47.             {
48.                 tmpColor.a -= Time.deltaTime / 4;
49.             BackgroundImage.color = tmpColor;
50.                yield return null;
51.             }
52.  
53.             _FadeOut = false;
54.         _Running = false;
55.         yield return null;
56.     }
57.  
58.     IEnumerator FadeIn()
59.     {
60.         _Running = true;
61.         if (BackgroundImage == null)
62.         {
63.             GameObject imageObject = GameObject.FindGameObjectWithTag("imgBackground");
64.             BackgroundImage = imageObject.GetComponent<Image>();
65.         }
66.        
67.         Color tmpColor = BackgroundImage.color;
68.      
69.         while (BackgroundImage.color.a < 1.0f)
70.         {
71.             tmpColor.a += Time.deltaTime / 4;
72.             BackgroundImage.color = tmpColor;
73.             yield return null;
74.         }
75.  
76.         yield return new WaitForSecondsRealtime(_Delay);
77.  
78.         _FadeOut = true;
79.         _Running = false;
80.         yield return null;
81.     }
82. }
83.