how to fade in/out a scene?

Questions & Answers
1

how do i fade in a scene from a black screen to a skybox? later i want to crossfade the first skybox to a second skybox. finally i want to fadeout the second skybox to a white screen. how do i do that? thanks, flexrails

2

You'd do the fading to white/black placing a single-colored texture across your screen, and changing the alpha value of it over time so that it fades in, or fades out.

There are a number of different ways of placing this texture on-screen, you could:

  • Use the older method of GUITexture GameObjects from the menu (GameObject -> Create Other -> GUI Texture)
  • Place a plane in front of your camera, or render one using a 2nd camera in your scene
  • Use the newer GUI scripting system to draw the texture

The code you'd use for the 3rd option above might look something like this. You'd start the alphaFadeValue at 1, and the "/ 5" is so the fade lasts 5 seconds.

alphaFadeValue -= Mathf.Clamp01(Time.deltaTime / 5);

GUI.color = new Color(0, 0, 0, alphaFadeValue);
GUI.DrawTexture( new Rect(0, 0, Screen.width, Screen.height ), blackTexture );
5

I've just been working on the same thing.

I've adapted the wiki shader mentioned above so that it can be used on older machines. It's very similar to the original - I just manged to get rid of one 'set texture' so it can be used on all but the oldest machines (the only Unity emulation mode that doesn't support it is 'dinosaur'). Older machines will show the first skybox only.

Shader "Custom/Skybox" {

Properties {
    _Tint ("Tint Color", Color) = (.5, .5, .5, .5)
    _FrontTex ("Front (+Z)", 2D) = "white" {}
    _BackTex ("Back (-Z)", 2D) = "white" {}
    _LeftTex ("Left (+X)", 2D) = "white" {}
    _RightTex ("Right (-X)", 2D) = "white" {}
    _UpTex ("Up (+Y)", 2D) = "white" {}
    _DownTex ("Down (-Y)", 2D) = "white" {}
    _FrontTex2("2 Front (+Z)", 2D) = "white" {}
    _BackTex2("2 Back (-Z)", 2D) = "white" {}
    _LeftTex2("2 Left (+X)", 2D) = "white" {}
    _RightTex2("2 Right (-X)", 2D) = "white" {}
    _UpTex2("2 Up (+Y)", 2D) = "white" {}
    _DownTex2("2 Down (-Y)", 2D) = "white" {}
    _Color ("Fade (use alpha)", Color) = (1,1,1,1)
}

SubShader {
    Tags { "Queue" = "Background" }
    Cull Off
    ZWrite On
    ZTest Always
    Fog { Mode Off }
    Lighting Off       
    Color [_Tint]
    Pass {
        SetTexture [_FrontTex] { combine texture }
        SetTexture[_FrontTex2] { 
            constantColor [_Color]
            combine texture lerp (constant) previous
        }
    }
    Pass {
        SetTexture [_BackTex] { combine texture }
        SetTexture[_BackTex2] { 
            constantColor [_Color]
            combine texture lerp (constant) previous
        }
    }
    Pass {
        SetTexture [_LeftTex] { combine texture }
        SetTexture[_LeftTex2] { 
            constantColor [_Color]
            combine texture lerp (constant) previous
        }
    }
    Pass {
        SetTexture [_RightTex] { combine texture }
        SetTexture[_RightTex2] { 
            constantColor [_Color]
            combine texture lerp (constant) previous
        }
    }
    Pass {
        SetTexture [_UpTex] { combine texture }
        SetTexture[_UpTex2] { 
            constantColor [_Color]
            combine texture lerp (constant) previous
        }
    }
    Pass {
        SetTexture [_DownTex] { combine texture }
        SetTexture[_DownTex2] { 
            constantColor [_Color]
            combine texture lerp (constant) previous
        }
    }
}

Fallback "RenderFX/Skybox", 1
}

To animate between one texture and the next:

private var thisMaterial : Material;
private var fadeSpeed : float = 0.4;

function Start (){
    thisMaterial = RenderSettings.skybox;
    thisMaterial.color.a = 0.0;
}

function Update () {
    thisMaterial.color.a += (fadeSpeed * Time.deltaTime); 
    thisMaterial.color.a = Mathf.Clamp(thisMaterial.color.a, 0.0, 1.0);
}

To fade from the second skybox to the first skybox start with thisMaterial.color.a=1.0; and use -= instead of +=

To change what you are fading to and from simply change the material variables. Eg, to fade from black to the second skybox texture:

public var blackTexture : Texture2D;

function Start (){
    thisMaterial = RenderSettings.skybox;
    thisMaterial.color.a = 0.0;

    thisMaterial.SetTexture("_FrontTex", blackTexture);
    thisMaterial.SetTexture("_BackTex", blackTexture);
    thisMaterial.SetTexture("_LeftTex", blackTexture);
    thisMaterial.SetTexture("_RightTex", blackTexture);
    thisMaterial.SetTexture("_UpTex", blackTexture);
    thisMaterial.SetTexture("_DownTex", blackTexture);
}
function Update () {
    thisMaterial.color.a += (fadeSpeed * Time.deltaTime); 
    thisMaterial.color.a = Mathf.Clamp(thisMaterial.color.a, 0.0, 1.0);
}

To fade between different skyboxes set the different textures like we did above, but this time with your skybox textures, not a single black texture. For the second set of textures use

thisMaterial.SetTexture("_FrontTex2", textureVariable);
etc
3

To fade between two different sets of skybox textures, there's a shader on the Wiki designed to do exactly this, here:

http://wiki.unity3d.com/index.php/SkyboxBlended

4

to crossfade between two skyboxes, you could create two skyboxes, one slightly bigger than the other so that it encompasses the other. Then you could fade the inner one's alpha to make it fade in or out.

6

This way works for me:

alphaFadeValue -= Mathf.Clamp01(Time.deltaTime / 5);
GUI.color = new Color(alphaFadeValue, alphaFadeValue, alphaFadeValue, alphaFadeValue);
GUI.DrawTexture( new Rect(0, 0, Screen.width, Screen.height ), blackTexture );
7

You can crossfade between 2 materials with the Lerp method:

8

Use ready to use solution - Screen Fader - Unity Asset Store - The Best Assets for Game Making