Unity tutorial: how to fade between scenes

Unity doesn’t  have a native way to add a fade betweens two scenes. But that’s not a problem because with a couple of lines of code we can easily solve the problem.

Why this Tutorial?

In the past month, I create a new game (Color Slide) and I needed a nice a smooth way to fade between one level and another. I looked around the web and I found a couple of solutions but they were all too complex. So I decided to create my own system wich is just a few of lines of code.

In case you wanna see it in action, you can visit the game page and see the video where the fade between is used every time a new level is loaded.

How it works:

Is very simply, we’ll add a simple texture by using the new unity UI system, and we’ll fade In/Out that texture based on our needs.

Phase one: Configure the editor to fade between scenes:

We’ll start by adding a new raw image into our UI:

With following two steps we’ll make the image to fit the entire screen:

Phase two: Fade script:

The following script is ready to be used and will allow you to easily fade between two scenes:

using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
using System.Collections;

public class SceneFader : MonoBehaviour {

	#region FIELDS
	public Image fadeOutUIImage;
	public float fadeSpeed = 0.8f; 

	public enum FadeDirection
	{
		In, //Alpha = 1
		Out // Alpha = 0
	}
	#endregion

	#region MONOBHEAVIOR
	void OnEnable()
	{
		StartCoroutine(Fade(FadeDirection.Out));
	}
	#endregion
		
	#region FADE
	private IEnumerator Fade(FadeDirection fadeDirection) 
	{
		float alpha = (fadeDirection == FadeDirection.Out)? 1 : 0;
		float fadeEndValue = (fadeDirection == FadeDirection.Out)? 0 : 1;
		if (fadeDirection == FadeDirection.Out) {
			while (alpha >= fadeEndValue)
			{
				SetColorImage (ref alpha, fadeDirection);
				yield return null;
			}
			fadeOutUIImage.enabled = false; 
		} else {
			fadeOutUIImage.enabled = true; 
			while (alpha <= fadeEndValue)
			{
				SetColorImage (ref alpha, fadeDirection);
				yield return null;
			}
		}
	}
	#endregion

	#region HELPERS
	public IEnumerator FadeAndLoadScene(FadeDirection fadeDirection, string sceneToLoad) 
	{
		yield return Fade(fadeDirection);
		SceneManager.LoadScene(sceneToLoad);
	}

	private void SetColorImage(ref float alpha, FadeDirection fadeDirection)
	{
		fadeOutUIImage.color = new Color (fadeOutUIImage.color.r,fadeOutUIImage.color.g, fadeOutUIImage.color.b, alpha);
		alpha += Time.deltaTime * (1.0f / fadeSpeed) * ((fadeDirection == FadeDirection.Out)? -1 : 1) ;
	}
	#endregion
}

The code is really simple.

The script has 2 public variables, one is the image that we’ve just added to the UI and another is the time that we want the fade animation to last.

The core is the method called “ Fade”. With  it, we fade the image according to the fade direction that we pass to the method.

A soon as the script start it will automatically fade out the image. When you want to load a new scene and use the fade animations, use this line of code:

What you pass to the method is the fade direction (In/Out) and the name of the scene to load

Conclusion:

The script is very simple and is ready to be used, so don’t miss the chance to improve your game quality and immediately add the scene fader to your game