How can I switch between two cameras with fading in/out when switching?

Question

The first script is the way I'm using now to switch between cameras.

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

public class SwitchCameras : MonoBehaviour
{
    [Header("Cameras Init")]
    public Camera[] cameras;
    public Vector3[] originalPosition;
    [HideInInspector]
    public Vector3 currentCameraOriginalPosition, currentCameraPosition;

    [Space(5)]

    [Header("Cameras Switch")]
    public string currentCameraName;
    public Vector3[] lastCameraPosition;

    private int currentCamera = 0;

    void Start()
    {
        cameras = Camera.allCameras;
        lastCameraPosition = new Vector3[cameras.Length];

        if (cameras.Length >= 1)
        {
            originalPosition = new Vector3[cameras.Length];
            for (int i = 0; i < cameras.Length; i++)
            {
                originalPosition[i] = cameras[i].transform.position;
            }
        }

        if (cameras.Length == 1)
        {
            Debug.LogError("Need more then 1 camera for switching..");
        }
        else
        {
            Debug.Log("Found " + cameras.Length + " cameras");
        }

        for (int i = 0; i < cameras.Length; i++)
        {
            cameras[i].enabled = false;
        }
        cameras[0].enabled = true;
        currentCameraName = cameras[0].name;
        currentCameraOriginalPosition = originalPosition[0];
    }

    void LateUpdate()
    {
        if (Input.GetKeyDown(KeyCode.G))
        {
            cameras[currentCamera].enabled = false;

            if (++currentCamera == cameras.Length)
                currentCamera = 0;

            cameras[currentCamera].enabled = true;
            currentCameraName = cameras[currentCamera].name;

            currentCameraOriginalPosition = originalPosition[currentCamera];
        }
        lastCameraPosition[currentCamera] = cameras[currentCamera].transform.position;
        currentCameraPosition = lastCameraPosition[currentCamera];
    }
}

And this is a script for starting a new game:

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

public class NewGame : MonoBehaviour
{
    public void RestartGame()
    {

    }
}

Both scripts attached to the same GameObject. I'm calling the RestartGame method from On Click in the inspector of a button I have in the main menu.

Now in the SwitchCameras script I'm using the G key to switch between the cameras.

But now I want to do that when a new game start to fade in/out between two cameras inside the RestartGame method. I want to call some method from the SwitchCameras script that will gade in/out between two cameras.

The idea is when starting a new game or resuming a game that the first camera will fade out slowly, fade out I mean will be enabled false slowly and then near the end to enabled true the second camera slowly.

Like switching between the two cameras but slowly.

Should i use startcoroutine ?

Answer 1

Put black 2D planes (or UI images, better to put an image if you want extra effects) in front of your cameras. Make the first one's plane transparent and the second one's plane solid. Disable the second camera at first (along with the 2D plane). When you want to switch between, just slowly decrease the first plane's transparency (increase its color alpha), turn on your second camera, turn off your first camera and decrease the transparency of your second plane (which is on the second camera).

If you've opted for UI images, play around with fillings etc. for more effects.

Answer 2

If you want to cross-fade straight from one view to the other, rather than fading to black first, we can do it by capturing a snapshot of the first camera before we disable it.

Add a UI canvas to your scene, in Screenspace Overlay mode, with a RawImage that stretches to fill the whole view. It can be disabled for starters, since we'll only use it when doing the cross-fade. Then slap a script something like this on it:

[RequireComponent(typeof(RawImage))]
public class CameraCrossFader : MonoBehaviour {

    // Hold our render target between uses so we don't
    // have to create & destroy it repeatedly.
    RenderTexture _snapshot;

    // Call this when you want to start a cross-fade.
    public void CrossFade(Camera startCam, Camera endCam, float duration) {
        StartCoroutine(FadeSequence(startCam, endCam, duration));
    }

    IEnumerator FadeSequence(Camera startCam, Camera endCam, float duration) {
        // If we haven't made a capture target yet, or our render changed size
        // since we last used it, create a new one at our current resolution.
        if(_snapshot == null 
         || _snapshot.width != Screen.width || _snapshot.height != Screen.height) {
            // If we already had a target, destroy it so we don't leak memory.
            if(_snapshot != null)
                 DestroyImmediate(_snapshot);

             // Make a new render target of the desired size & format.
             _snapshot = new RenderTexture(Screen.width, Screen.height,
                                            RenderTextureFormat.RGBA32);
        }

        // Copy the last rendered frame into this texture.
        _snapshot.ReadPixels(new Rect(0,0,Screen.width,Screen.height), 0,0);

        // Use this image as our stand-in card, and enable this object so it's shown.
        gameObject.SetActive(true);
        var image = GetComponent<RawImage>();
        image.texture = _snapshot;

        // Switch rendering to use the second camera.
        startCam.gameObject.SetActive(false);
        endCam.gameObject.SetActive(true);

        // Gradually fade our stand-in card to transparent.
        Color color = Color.white;
        for(float a = 1f; a > 0; a -= Time.deltaTime/duration) {
               color.a = a;
               image.color = color;
               // Let the game run for another frame.
               yield return null;
        }

        // Fade complete. Switch this object off until the next fade.
        gameObject.SetActive(false);
    }
}