0
\$\begingroup\$

In the Hierarchy I have a Canvas set to Screen Space - Overlay the canvas name is Scene Fader. and a child disabled ui Image and also a child name Scene Fader Child that is a gameobject with a script attached to it name Scene Fader :

Scene fader in hierarchy

The script that attached to Scene Fader Child is :

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
 
public class SceneFader : MonoBehaviour
{
    #region FIELDS
    public GameObject fadeOutUIGameobjectImage;
    public float fadeSpeed = 0.8f;
    //public SaveLoad saveLoad;
 
    private Image fadeOutUIImage;
 
    private void Start()
    {
        SceneManager.sceneLoaded += SceneManager_sceneLoaded;
    }
 
    public enum FadeDirection
    {
        In, //Alpha = 1
        Out // Alpha = 0
    }
    #endregion
 
    #region FADE
    public IEnumerator Fade(FadeDirection fadeDirection)
    {
        fadeOutUIGameobjectImage.SetActive(true);
 
        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;
            }
            fadeOutUIGameobjectImage.SetActive(false);
        }
        else
        {
            fadeOutUIGameobjectImage.SetActive(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 SceneManager_sceneLoaded(Scene arg0, LoadSceneMode arg1)
    {
        if (MenuController.LoadSceneForSavedGame == true)
        {
            var saveLoad = GameObject.Find("Save System").GetComponent<SaveLoad>();
            saveLoad.Load(null, null);
        }
 
        if(MouseHover.loadingwithfolder)
        {
            var saveLoad = GameObject.Find("Save System").GetComponent<SaveLoad>();
            saveLoad.Load(MouseHover.folder, MouseHover.savedGameFName);
            MouseHover.loadingwithfolder = false;
        }
    }
 
    private void SetColorImage(ref float alpha, FadeDirection fadeDirection)
    {
        if(fadeOutUIImage == null)
        {
            fadeOutUIImage = fadeOutUIGameobjectImage.GetComponent<Image>();
        }
 
        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
}

When in this script I'm enabling true the fadeOutUIGameobjectImage I want that this Image will become in front of anything else all the ui elements and other stuff.

Now there is some ui elements that are in front of it.

This screenshot show the default main menu when running the game :

default main menu when running the game

Then when starting a new game everything is fade out the screen get black using the Scene Fader script but the left ui element is in front of the image in the scene fader script :

left elemeny is in front of the image I fade out it's alpha in the scene fader script

\$\endgroup\$
3
  • \$\begingroup\$ You can probably fix this by reordering stuff in your hierarchy or possibly playing with sorting order (I think this only works on sprites). Try moving your UI fade texture above (or below if it is already above) the menu text and I think it should cover it. \$\endgroup\$ – Benjamin Danger Johnson Jan 31 at 3:06
  • \$\begingroup\$ The solution is to set the Scene Fader > Canvas > Sort Order to value 1 \$\endgroup\$ – Daniel Jacksonville Jan 31 at 3:25
  • \$\begingroup\$ Cool I'm glad you were able to fix the bug. If possible you should post what you did below as an answer to this question, preferably with some screen shots incase someone runs into similar issue. \$\endgroup\$ – Benjamin Danger Johnson Jan 31 at 3:38
1
\$\begingroup\$

The solution is to change the canvas sort order to value 1.

For testing I enabled the Image and set the Image alpha color to 255. Then in the canvas Scene Fader I set the Sort Order to 0. The result :

Sort Order is set to 0

Now I changed the Sort Order to 1 :

Sort order is set to 1

In other words the solution is to set the canvas that should fade out it's sort order value to be any value bigger then all the other ui elements. In this case the value 1 is high enough.

And because I'm changing the image alpha color back to 0 when I get back to the main menu in the game I don't have to change the canvas sort order again.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.