Unity: how to fade away scene for few seconds

Question

I'm programming a simple game, in which the player has to collect some objects. What I would like to do is that after he collects an object, the scene fades away for few seconds and then the player position is changed.

I know how to change the position, I have no idea how to make the fade away effect. I've tried using the Image Effect (such as Vortex and Blur) but I'm no able to slowly increment their variables (e.g. angle value for Vortex and blur iteration for blur) so that gives the impression of an animation.

Could someone guide me through this?

Just add a layer on top of your scene and change slowly it's alpha — Gusman, Jan 08 '16 at 19:02
http://unity3d.com/es/learn/tutorials/modules/beginner/ui/ui-image — Gusman, Jan 08 '16 at 19:21

xoxox · Answer 1 · 2016-01-13T11:51:16.113

Add the ScreenOverlay image effect to your camera, set BlendMode to ScreenBlend and Intensity to 0, then add the following script:

bool fading;
float fadeValue = 0;
const float INCREMENT = 0.01f;
const float MAX_BLEND = 2;
ScreenOverlay so;

void OnTriggerEnter(Collider other)
{
    fading = true;
}

void Start()
{
    so = gameObject.GetComponent<ScreenOverlay>();
}

void Update()
{
    if (fading)
    {
        fadeValue += INCREMENT;
        so.intensity = fadeValue * MAX_BLEND;

        if (fadeValue >= 1)
        {
            fading = false;
            // change player position
        }
    }
    else if (fadeValue > 0)
    {
        fadeValue = Mathf.Max(0, fadeValue - INCREMENT);
        so.intensity = fadeValue * MAX_BLEND;
    }
}

To increase duration, just make INCREMENT smaller. It works perfectly for me.

Synthetic One · Answer 2 · 2016-01-08T21:28:18.560

You can add a new object with texture on the scene so it would be something like global mask. If you want your scene under the fade effect to be simply black, then a little square texture filled black should be enough, you can scale it properly so it would fit the camera. And shader on this material should support transparency so the alpha layer of the texture would be manageable. Then you can operate the alpha value from code using renderer.sharedMaterial.SetFloat() method.

Something like this:

IEnumerator SetTransparencyLevel(bool fullyTransparent)
{
for (var i = renderer.material.GetFloat("Alpha"); fullyTransparent && i > 0 || !fullyTransparent && i < 1; i+=0.05f)
{
renderer.material.SetFloat("Alpha", i);
yield return new WaitForEndOfFrame();
}
}

I didnt test this code, but it shows the way.

how to increment slowly the alpha value? – GuendaS Jan 08 '16 at 20:22 — GuendaS, Jan 08 '16 at 20:22
I added an example in my answer. – Synthetic One Jan 08 '16 at 21:28 — Synthetic One, Jan 08 '16 at 21:28

score 0 · Accepted Answer · answered Jan 08 '16 at 22:19

I have been doing similar stuff for an experimental 2D game recently. I found that the best way to do it is by using a really neat free library - LeanTween. You can use it on normal game objects and Unity UI elements. This is how a fade-out will look like.

LeanTween.alpha (gameObject, 0.0f, 1.0f);

The first parameter should be the game object you want to fade out, the second is the alpha value you're aiming for (0.0f will fade out the object completely), and the last one is the duration of the animation.

score 0 · Answer 4 · answered Jan 30 '21 at 11:17

You could also use a CanvasGroup and change the alfa with Coroutines. I think is an easy aproach.

This is what I do in my games:

    public class Fader : MonoBehaviour {
        private CanvasGroup _canvasGroup;
        private Coroutine _currentActiveFade;

        private void Awake() {
            _canvasGroup = GetComponent<CanvasGroup>();
        }

        public void FadeOutImmediately() => _canvasGroup.alpha = 1;

        public Coroutine FadeOut(float time) => Fade(1, time);

        public Coroutine FadeIn(float time) => Fade(0, time);

        private Coroutine Fade(float target, float time) {
            if (_currentActiveFade != null) StopCoroutine(_currentActiveFade);
            _currentActiveFade = StartCoroutine(FadeRoutine(target, time));
            
            return _currentActiveFade;
        }

        private IEnumerator FadeRoutine(float target, float time) {
            while (!Mathf.Approximately(_canvasGroup.alpha, target)) {
                _canvasGroup.alpha = Mathf.MoveTowards(_canvasGroup.alpha, target, Time.deltaTime / time);
                yield return null;
            }
        }
    }

Unity: how to fade away scene for few seconds

4 Answers4