Adding Fade-In Fade-Out to my screens

Questions & Answers
1

I have this code that renders n number of screens (one after the other after a set number of seconds) and I want to add a feature so that in the Editor the developer can choose if he/she wants to add fade-in or fade-out to each of these screens (I am setting these up as booleans). But the thing I am having issues with is that I am getting the fade in feature working but there is no screen after it. All I see is a corn flower blue screen after the screen fades in. The first screen should be there when the screen fades in.

Here is my code:

    public class GameScreenTransition : MonoBehaviour
    {
        #region Fade Fields
        /// <summary>
        /// Toggles the Fade In option on/ off
        /// </summary>
        public bool EnableFadeIn;
        /// <summary>
        /// Toggles the Fade Out option on/ off
        /// </summary>
        public bool EnableFadeOut;
        /// <summary>
        /// Sets the fade speed
        /// </summary>
        public float fadeSpeed; // recommend 0.3
        /// <summary>
        /// the direction in which the fading screen goes over a period of time
        /// </summary>
        private int fadeDir = -1;
        /// <summary>
        /// Makes sure to draw over screens
        /// </summary>
        private int drawDepth = -1000;
        /// <summary>
        /// Adds a value to the alpha channel
        /// </summary>
        private float alpha = 1.0f;
        
        #endregion 

        #region Screen Field
        /// <summary>
        /// If there is more than 1 screen, the developer can use this field to determine the wait time (in seconds)
        /// before transitioning to the next screen
        /// </summary>
        public float TimeBetweenScreens;        
        /// <summary>
        /// Keeps count of our screens
        /// </summary>
        private int _scenecounter;                
        #endregion 

        #region Properties
        public List<Texture2D> Screens;
        #endregion 
    
        #region Unity Events
        /// <summary>
        /// Initializes all game components
        /// </summary>
        void Start()
        {
            StartCoroutine(Wait());            
        }
        /// <summary>
        /// Handles all GUI draw calls onto the screen
        /// </summary>
        void OnGUI()
        {
            if (EnableFadeIn)
                FadeIn();

           DrawScreen();
        }
        #endregion
        
        #region Private Methods
        
        /// <summary>
        /// Draws the texture(s) list onto the screen
        /// </summary>
        private void DrawScreen()
        {
            GUI.DrawTexture(new Rect(0, 0, UnityEngine.Screen.width, UnityEngine.Screen.height), Screens[_scenecounter]);
        }
        /// <summary>
        /// Enables the Fade-In event
        /// </summary>
        private void FadeIn()
        {            
            fadeDir = -1;
            
            alpha += fadeDir * fadeSpeed * Time.deltaTime;
            alpha = Mathf.Clamp01(alpha);
            GUI.color = new Color() { a = alpha };
            GUI.depth = drawDepth;            
        }
        /// <summary>
        /// Enables the Fade-Out event
        /// </summary>
        private void FadeOut()
        {
            fadeDir = 1;

            alpha -= fadeDir * fadeSpeed * Time.deltaTime;
            alpha = Mathf.Clamp01(alpha);
            GUI.color = new Color() { a = alpha };
            GUI.depth = drawDepth;           
        }
        #endregion

        #region Corountines
        IEnumerator Wait()
        {
            while (true)
            {
                yield return new WaitForSeconds(TimeBetweenScreens);
                _scenecounter++;
                if (_scenecounter < Screens.Count) continue;
                _scenecounter = Screens.Count - 1;
                yield break;
            }
        }
        #endregion 
    }

Can anyone help me figure out why my textures are not showing up after the fade in finishes? Thanks in advance!

2

Looks like your fades are reversed. The FadeIn seems to fade out and vice versa.

Also, there’s nothing triggering the fading to be done repeatedly. You are just calling FadeIn inside an update method and the “alpha” value keeps going down and down and down, but luckily you clamp it :slight_smile:

I made a few changes and i believe this should work:

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

public class Test : MonoBehaviour
{
	#region Fade Fields
	/// <summary>
	/// Toggles the Fade In option on/ off
	/// </summary>
	public bool EnableFadeIn;
	/// <summary>
	/// Toggles the Fade Out option on/ off
	/// </summary>
	public bool EnableFadeOut;
	/// <summary>
	/// Sets the fade speed
	/// </summary>
	public float fadeSpeed; // recommend 0.3
	/// <summary>
	/// Sets the fade time in seconds
	/// </summary>
	public float fadeTime; // recommend 0.3
	/// <summary>
	/// the direction in which the fading screen goes over a period of time
	/// </summary>
	private int fadeDir = -1;
	/// <summary>
	/// Makes sure to draw over screens
	/// </summary>
	private int drawDepth = -1000;
	/// <summary>
	/// Adds a value to the alpha channel
	/// </summary>
	private float alpha = 1.0f;
	
	#endregion 
	
	#region Screen Field
	/// <summary>
	/// If there is more than 1 screen, the developer can use this field to determine the wait time (in seconds)
	/// before transitioning to the next screen
	/// </summary>
	public float TimeBetweenScreens;  
	private float TimeBetweenScreensUsed;  
	/// <summary>
	/// Keeps count of our screens
	/// </summary>
	private int _scenecounter;                
	#endregion 
	
	#region Properties
	public List<Texture2D> Screens;
	#endregion 
	
	#region Unity Events
	/// <summary>
	/// Initializes all game components
	/// </summary>
	void Start()
	{
		StartCoroutine(Wait());   

		// if fades are used, fadetime must be non-zero and such that it fits twice inside the TimeBetweenScreens
		if (fadeTime == 0)
		{
			EnableFadeIn = EnableFadeOut = false;
		}
		else if (EnableFadeIn || EnableFadeOut)
		{
			if (fadeTime * 2 > TimeBetweenScreens)
			{
				fadeTime = TimeBetweenScreens /2f;
			}
		}
	}
	/// <summary>
	/// Handles all GUI draw calls onto the screen
	/// </summary>
	void OnGUI()
	{
		// fade in enabled and within fadeTime from starting to fade in a mew pic
		if (EnableFadeIn && TimeBetweenScreensUsed < fadeTime)
		{
			FadeIn();
		}
		// fade out enabled and within fadeTime from having to show next pic
		else if (EnableFadeOut && TimeBetweenScreens - TimeBetweenScreensUsed < fadeTime)
		{
			FadeOut();
		}
		else
		{
			//draw full opacity
			GUI.color = Color.white;
			GUI.depth = drawDepth;     
		}

		// keep track of amount of time current pic has been displayed
		TimeBetweenScreensUsed += Time.deltaTime;

		DrawScreen();
	}
	#endregion
	
	#region Private Methods
	
	/// <summary>
	/// Draws the texture(s) list onto the screen
	/// </summary>
	private void DrawScreen()
	{
		GUI.DrawTexture(new Rect(0, 0, UnityEngine.Screen.width, UnityEngine.Screen.height), Screens[_scenecounter]);
	}
	/// <summary>
	/// Enables the Fade-In event
	/// </summary>
	private void FadeIn()
	{            
		fadeDir = 1;

		// alpha == percentage of fadeTime used
		alpha =  TimeBetweenScreensUsed / fadeTime;

		GUI.color = new Color(1f, 1f, 1f, alpha);
		GUI.depth = drawDepth;            
	}
	/// <summary>
	/// Enables the Fade-Out event
	/// </summary>
	private void FadeOut()
	{
		fadeDir = -1;

		// alpha == percentage of fadeTime left before TimeBetweenScreens runs out
		alpha =  (TimeBetweenScreens - TimeBetweenScreensUsed) / fadeTime;

		GUI.color = new Color(1f, 1f, 1f, alpha);
		GUI.depth = drawDepth;           
	}
	#endregion
	
	#region Corountines
	IEnumerator Wait()
	{
		while (true)
		{
			yield return new WaitForSeconds(TimeBetweenScreens);
			_scenecounter++;
			TimeBetweenScreensUsed = 0; // starting to show a new pic - reset the timer
			if (_scenecounter < Screens.Count) continue;
			_scenecounter = Screens.Count - 1;
			yield break;
		}
	}
	#endregion 
}