Fade Screen Issues

Questions & Answers
,
1

Hey! I’m trying to fade in and out when I load a level from my Select_Level scene. The issue is when I place the Fade Screen panel where it is, I can’t click any of the buttons. However, when I place it above background, everything still shows and isn’t behind the Fade Screen. If there is a better way to do this, I’m all ears! :slight_smile:

image

Here is my script:

using UnityEngine;
using UnityEngine.UI;

public class LevelSelectUI : MonoBehaviour
{
    public static LevelSelectUI instance;

    [SerializeField] Image fadeScreen;

    public float fadeSpeed;

    private bool shouldFadeToBlack;
    private bool shouldTurnOffFadeScreen;

    private void Awake()
    {
        instance = this;
    }

    private void Start()
    {
        TurnOffBlackScreen();
    }

    void Update()
    {
        if (shouldFadeToBlack)
        {
            fadeScreen.color = new Color(fadeScreen.color.r,
                fadeScreen.color.g,
                fadeScreen.color.b,
                Mathf.MoveTowards(fadeScreen.color.a, 1f, fadeSpeed * Time.deltaTime));
            if (fadeScreen.color.a == 1f)
            {
                shouldFadeToBlack = false;
            }
        }

        if (shouldTurnOffFadeScreen)
        {
            fadeScreen.color = new Color(fadeScreen.color.r, fadeScreen.color.g, fadeScreen.color.b, 0f);
            shouldTurnOffFadeScreen = false;
        }
    }

    public void FadeToBlack()
    {
        shouldFadeToBlack = true;
        shouldTurnOffFadeScreen = false;
    }

    public void TurnOffBlackScreen()
    {
        shouldTurnOffFadeScreen = true;
        shouldFadeToBlack = false;
    }
}

If you need any more information, please let me know and I can share it!

3

You can close raycast target of the fade screen panel. By adding it canvas group and set Interactable - block raycasts false. Or if there is only one image, you can disable Raycast Target variable on this image.