Fade Game Object Out on Scene Change

I have been playing around with this script but I'm not having much luck trying to get it to do what I want which is to fade out a game object just before the scene changes. My guess is I am not using the mesh renderer right?

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3.  
4. public class ObjectFader : MonoBehaviour {
5.  
6.     public MeshRenderer[] renderers;
7.  
8.     void Start(){
9.         renderers = GetComponent<MeshRenderer> ();
10.     }
11.    
12.     // Update is called once per frame
13.     void Update () {
14.         Color alphaFadedColor = Color.white;
15.  
16.         // modify alpha
17.         // create your own time based algorithm and start it when you want the fade to start
18.         alphaFadedColor.a = Time.realtimeSinceStartup / 10f;
19.         foreach (MeshRenderer renderer in renderers) {
20.             renderer.color = alphaFadedColor;
21.         }
22.     }
23. }

 

What is currently happening?

You probably want to use Color.Lerp

Untested on mesh renderer, works when updating camera color:

Code (CSharp):

1.     public class ColorChange : MonoBehaviour {
2.  
3.         [SerializeField]
4.         float duration;
5.  
6.         float t = 0f;
7.         Color color1 = Color.White, color2 = new Color(1f, 1f, 1f, 0f);
8.  
9.         void Update() {
10.             Color color = Color.Lerp(color1, color2, t);
11.             t += Time.deltaTime / duration;
12.             foreach (MeshRenderer renderer in renderers) {
13.                 renderer.color = color;
14.             }
15.         }
16.     }

 

That one gives me an error message:
Assets/Scripts/ObjectFader.cs(10,30): error CS0117: `UnityEngine.Color' does not contain a definition for `White'

 

I found this code on the code Wiki that sort of works only it does some very strange things.

1. It seems to create a duplicate material in the inspector.
2. It fades out the outer ring of my 3D logo and not the middle even though it is all one mesh object.
3. If I adjust the alpha of the game object material manually it fades out just fine??

This is the script I'm using:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3.  
4. public class ObjectFader : MonoBehaviour {
5.  
6.  
7.  
8.  
9.  
10.  
11.     // publically editable speed
12.     public float fadeDelay = 0.0f;
13.     public float fadeTime = 0.5f;
14.     public bool fadeInOnStart = false;
15.     public bool fadeOutOnStart = false;
16.     private bool logInitialFadeSequence = false;
17.  
18.  
19.  
20.  
21.     // store colours
22.     private Color[] colors;
23.  
24.     // allow automatic fading on the start of the scene
25.     IEnumerator Start ()
26.     {
27.         //yield return null;
28.         yield return new WaitForSeconds (fadeDelay);
29.  
30.         if (fadeInOnStart)
31.         {
32.             logInitialFadeSequence = true;
33.             FadeIn ();
34.         }
35.  
36.         if (fadeOutOnStart)
37.         {
38.             FadeOut (fadeTime);
39.         }
40.     }
41.  
42.  
43.  
44.  
45.     // check the alpha value of most opaque object
46.     float MaxAlpha()
47.     {
48.         float maxAlpha = 0.0f;
49.         Renderer[] rendererObjects = GetComponentsInChildren<Renderer>();
50.         foreach (Renderer item in rendererObjects)
51.         {
52.             maxAlpha = Mathf.Max (maxAlpha, item.material.color.a);
53.         }
54.         return maxAlpha;
55.     }
56.  
57.     // fade sequence
58.     IEnumerator FadeSequence (float fadingOutTime)
59.     {
60.         // log fading direction, then precalculate fading speed as a multiplier
61.         bool fadingOut = (fadingOutTime < 0.0f);
62.         float fadingOutSpeed = 1.0f / fadingOutTime;
63.  
64.         // grab all child objects
65.         Renderer[] rendererObjects = GetComponentsInChildren<Renderer>();
66.         if (colors == null)
67.         {
68.             //create a cache of colors if necessary
69.             colors = new Color[rendererObjects.Length];
70.  
71.             // store the original colours for all child objects
72.             for (int i = 0; i < rendererObjects.Length; i++)
73.             {
74.                 colors[i] = rendererObjects[i].material.color;
75.             }
76.         }
77.  
78.         // make all objects visible
79.         for (int i = 0; i < rendererObjects.Length; i++)
80.         {
81.             rendererObjects[i].enabled = true;
82.         }
83.  
84.  
85.         // get current max alpha
86.         float alphaValue = MaxAlpha();
87.  
88.  
89.         // This is a special case for objects that are set to fade in on start.
90.         // it will treat them as alpha 0, despite them not being so.
91.         if (logInitialFadeSequence && !fadingOut)
92.         {
93.             alphaValue = 0.0f;
94.             logInitialFadeSequence = false;
95.         }
96.  
97.         // iterate to change alpha value
98.         while ( (alphaValue >= 0.0f && fadingOut) || (alphaValue <= 1.0f && !fadingOut))
99.         {
100.             alphaValue += Time.deltaTime * fadingOutSpeed;
101.  
102.             for (int i = 0; i < rendererObjects.Length; i++)
103.             {
104.                 Color newColor = (colors != null ? colors[i] : rendererObjects[i].material.color);
105.                 newColor.a = Mathf.Min ( newColor.a, alphaValue );
106.                 newColor.a = Mathf.Clamp (newColor.a, 0.0f, 1.0f);                
107.                 rendererObjects[i].material.SetColor("_Color", newColor) ;
108.             }
109.  
110.             yield return null;
111.         }
112.  
113.         // turn objects off after fading out
114.         if (fadingOut)
115.         {
116.             for (int i = 0; i < rendererObjects.Length; i++)
117.             {
118.                 rendererObjects[i].enabled = false;
119.             }
120.         }
121.  
122.  
123.         Debug.Log ("fade sequence end : " + fadingOut);
124.  
125.     }
126.  
127.  
128.     void FadeIn ()
129.     {
130.         FadeIn (fadeTime);
131.     }
132.  
133.     void FadeOut ()
134.     {
135.         FadeOut (fadeTime);        
136.     }
137.  
138.     void FadeIn (float newFadeTime)
139.     {
140.         StopAllCoroutines();
141.         StartCoroutine("FadeSequence", newFadeTime);
142.     }
143.  
144.     void FadeOut (float newFadeTime)
145.     {
146.         StopAllCoroutines();
147.         StartCoroutine("FadeSequence", -newFadeTime);
148.     }
149.  
150.  
151.     // These are for testing only.
152.     //        void Update()
153.     //        {
154.     //            if (Input.GetKeyDown (KeyCode.Alpha0) )
155.     //            {
156.     //                FadeIn();
157.     //            }
158.     //            if (Input.GetKeyDown (KeyCode.Alpha9) )
159.     //            {
160.     //                FadeOut();
161.     //            }
162.     //        }
163.  
164.    
165. }
166.  

 

Okay, I have gotten it working. There are a few steps you need to take.

1. Create a new Material using the standard shader
2. Change the rendering mode to "Fade"
3. Use my modified script and place it on the object

Code (CSharp):

1. using UnityEngine;
2.  
3. [RequireComponent(typeof(MeshRenderer))]
4. public class ColorChange : MonoBehaviour {
5.  
6.     [SerializeField]
7.     float duration;
8.  
9.     float t = 0f;
10.     Color color1 = Color.white, color2 = new Color(1f, 1f, 1f, 0f);
11.     MeshRenderer meshRenderer;
12.  
13.     void Start(){
14.         meshRenderer = GetComponent<MeshRenderer>();
15.     }
16.  
17.     void Update() {
18.         Color color = Color.Lerp(color1, color2, t);
19.         t += Time.deltaTime / duration;
20.         foreach (Material material in meshRenderer.materials) {
21.             material.color = color;
22.         }
23.     }
24. }

I have attached an example

 

It works but what if I want my logo to have a specular shine on it like it did before?

 

A similar solution:

1. Create a new Material using the standard shader
2. Change the rendering mode to "Fade"
3. Use my modified script and place it on any object
4. Fill the variables with the desired values

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3.  
4. public class MeshFader : MonoBehaviour
5. {
6.     public float ColorSpeed = 2;
7.     public MeshRenderer[] renderers;//Objects to fade
8.     public Material FadeMaterial;
9.  
10.     void Awake()
11.     {
12.         foreach (MeshRenderer renderer in renderers)
13.         {
14.             //Save object's original material data
15.             Texture texture = renderer.material.GetTexture("_MainTex");
16.             Color color = renderer.material.color;
17.             //Switch to fade material
18.             renderer.material = FadeMaterial;
19.             color.a = 1;
20.             //Put original material data on the new material
21.             renderer.material.SetTexture("_MainTex", texture);
22.             renderer.material.SetColor("_Color", color);
23.         }
24.     }
25.  
26.     void Update()
27.     {
28.         foreach (MeshRenderer renderer in renderers)
29.         {
30.             Color color = renderer.material.color;
31.             color.a -= 0.1f * Time.deltaTime * ColorSpeed;
32.             renderer.material.SetColor("_Color", color);
33.         }
34.     }
35. }
36.  

This can looks unnatural depending on which shaders you are using on your objects.

 

Are your camera or objects moving/animating while fading? If not, another possible solution is to take an Screenshot of the current game view and fade that image.

 

Ah I see, thanks, Now what if I want to add a delay time before the fade out?

 

I tried doing a delay with an IEnumerator but I must be using it wrong as I get errors..... I so hate code

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4.  
5. [RequireComponent(typeof(MeshRenderer))]
6. public class ColorChange : MonoBehaviour {
7.  
8.     [SerializeField]
9.     float duration;
10.  
11.     float t = 0f;
12.     Color color1 = Color.red, color2 = new Color(1f, 1f, 1f, 0f);
13.     MeshRenderer meshRenderer;
14.  
15.     public Color color;
16.  
17.  
18.     void Awake(){
19.         meshRenderer = GetComponent<MeshRenderer>();
20.         yield return new WaitForSeconds(0.5f); // wait time
21.         StartCoroutine(Fade());
22.     }
23.  
24.    // void Update() {
25.     IEnumerator Fade(){
26.        
27.         color = Color.Lerp(color1, color2, t);
28.         t += Time.deltaTime / duration;
29.         foreach (Material material in meshRenderer.materials) {
30.             material.color = color;
31.         }
32.     }
33. }

 

I tried your code out too Mich_9 but I had the same problem, the outer ring of my logo fades but not the centre.
Now if I use the code supplied by "The Little Guy" my whole game object fades, which is perfect, the only thing this code would need now is a delay time I can set in the inspector.

 

OK I got it, I don't know what I was doing wrong with the I-Enumerator before but this works very nicely

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4.  
5. [RequireComponent(typeof(MeshRenderer))]
6. public class ColorChange : MonoBehaviour {
7.    
8.  
9.     [SerializeField]
10.     float duration;
11.  
12.     float t = 0f;
13.     Color color1 = Color.red, color2 = new Color(1f, 1f, 1f, 0f);
14.     MeshRenderer meshRenderer;
15.  
16.     void Start(){
17.         meshRenderer = GetComponent<MeshRenderer>();
18.     }
19.  
20.     void Update() {
21.         StartCoroutine(FadeLogo());
22.  
23.     }
24.  
25.     IEnumerator FadeLogo(){
26.         yield return new WaitForSeconds(18.7f); // wait time
27.  
28.         Color color = Color.Lerp(color1, color2, t);
29.         t += Time.deltaTime / duration;
30.         foreach (Material material in meshRenderer.materials) {
31.             material.color = color;
32.         }
33.     }
34. }

 

As if this could not get more annoying.... Oh sure try me... I'll bet it can because I just discovered that this does not seem to work in the stand alone player build.
My logo does not fade out, it just changes color from red to white, and does not carry the metallic look it had in the editor? wtf??

 

What is your goal with this? Show an intro animation with your logo before start the game?

 

Well,

Your running a bit of a dangerous script. On every Update() you are executing FadeLogo() with a delay of 18.7f seconds.

On mobile and the webplayer, there is a bit of a frame rate cap that will cause Update() by default to run about 60 times per second up to about 200... and on stand alone builds, it could run upwards of 500. This is probably causing the timing to go out of wack - plus it now has several tens of thousands of coroutines sitting and waiting.

I'd still go down a different path, but this should work relatively well for what you are needing. This will execute one single coroutine.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4.  
5. [RequireComponent(typeof(MeshRenderer))]
6. public class ColorChange : MonoBehaviour
7. {
8.  
9.     void Start()
10.     {
11.         StartCoroutine(FadeLogo());
12.     }
13.  
14.     /// <summary>
15.     /// Fades in our logo over time
16.     /// </summary>
17.     /// <returns></returns>
18.     IEnumerator FadeLogo()
19.     {
20.         Color colorFrom = Color.red;
21.         Color colorTo = new Color(1f, 1f, 1f, 0f);
22.         MeshRenderer meshRenderer = GetComponent<MeshRenderer>();
23.  
24.         float duration = 1; // How long to run for
25.         float remainingTime = duration; // How long we've been running to-date
26.         float updateSpeed = 0.033f; // In seconds, approximately 30 fps
27.         float delay = 10f; // Delay before it starts fading, in seconds
28.  
29.         yield return new WaitForSeconds(delay); // Add a 10 second delay
30.         while (remainingTime > 0) // While time is left on the clock
31.         {
32.  
33.             var ratio = remainingTime / duration; // get a value from 0 to 1
34.             Color newColor = Color.Lerp(colorFrom, colorTo, ratio); // Find the colour
35.  
36.             foreach (var mat in meshRenderer.materials) // Assign the colour
37.                 mat.color = newColor;
38.  
39.             remainingTime -= Time.deltaTime; // Reduce what we've used up
40.             yield return new WaitForSeconds(updateSpeed); // Wait for a specific time.  Less smooth, but better on battery and CPU
41.             // yield return new WaitForFixedUpdate(); // Alternatively, you can remove updateSpeed and run this every frame for a smoother transition, but it'll use more battery and CPU
42.         }
43.         Destroy(this.gameObject); // Something like this can then just remove the entire splash screen
44.     }
45. }

Also if you just want to see where the hiccups were in your original script, this should help:

Code (CSharp):

1.  
2. using UnityEngine;
3.  
4. public class ObjectFader : MonoBehaviour
5. {
6.  
7.   public float FadeDuration = 10f; // Now, if you assign this to a game object, you can specify a Fade Duration
8.  
9.   private MeshRenderer[] _meshRenderers; // Privates can't be modified from outside this script
10.   private float _currentDuration;
11.   private Color alphaColor = new Color(1f,1f,1f,1f);
12.  
13.   void Start()
14.   {
15.     _currentDuration = FadeDuration;
16.     _meshRenderers = GetComponentsInChildren<MeshRenderer>(); // this will now collect all the mesh renderers on this object, and all children objects
17.   }
18.  
19.   // Update is called once per frame
20.   void Update()
21.   {
22.  
23.     foreach (MeshRenderer meshRenderer in _meshRenderers) // Go through this object and all children objects mesh renderers
24.     {
25.       foreach (var material in meshRenderer.materials) // Get all their materials
26.       {
27.         var ratio = _currentDuration / FadeDuration;
28.         var newColor = Color.Lerp(material.color, alphaColor, ratio); // Note because the colour was already lerped in the previous update frame, this won't fade linearly.
29.         material.color = newColor;
30.       }
31.     }
32.  
33.     _currentDuration -= Time.deltaTime; // remove the amount, in seconds, since we last executed
34.  
35.     if (_currentDuration < 0)  // Are we out of time?
36.     {
37.       // Destroy script here
38.       Destroy(gameObject);
39.     }
40.  
41.   }
42. }
43.  

In the second case, you could then assign it to game object and apply the fade to it and all its children by using:

Code (CSharp):

1.  
2.   var fo = someObject.AddComponent<ObjectFader>();
3.   fo.FadeDuration = 10f;
4.  

Final mention, if you continue to look at this, you might also want to look into something like LeanTween (free asset on the asset store). It will make this much easier. Then to fade an object you just need to use something like:

Code (CSharp):

1.  
2.   LeanTween.Color(SomeGameObject, FromColor, TargetColor, Delay);
3.  

 

Yeah kind of, its just a spinning 3D logo that I figured a slow fade out before the scene changes would be nicer that the sort of abrupt stop it would do just a fraction of a second before the scene changes.

 

Mich_9,
Take a look at my video, here you can see that it plays nice, but when I publish it out to the stand alone player it looses it's nice shine and does not play like this. In the stand alone player it just changes the color which appears flat red to white and then destroys the game object.

 

Maybe the shader is falling back to a lower quality in the standalone build, losing his transparency property. Take a look at Shader LOD.
Try changing the quality settings for the standalone build to a higher value.
Also I suggest using a video for the animation instead of real-time rendered objects.

 

Check the debug log. It's probably missing the shader you used and defaulted to one that isn't set to transparency. By default not all shaders are included in builds.

I'd still seriously recommend fixing the script though.

 

Kerm_Ed,
I tried using your script but I did not get the results I was wanting like in my video I posted, all it did was change the color to white.

 

I hear ya I'm not surprised though now that I have a better idea of the issue...

I suspect the real problem is the shader needs to be exclusively included in the build to resolve the problem - we had it happen to us early on in Ortho4D and the log should lead you there... A script cleanup would just make it smoother and more performant.

It could also be a quality setting / haven't seen that myself so I can't recommend it. But I do know if it's a shader problem it should warn you in the log/debug when you run it for that platform. It really looks like a shader issue to me and the only other trick I can think of is to make sure you explicitly cast any floats to ints during conversions (another long standing Unity bug that changes between platforms). But without having the project I can only softly advise on a structure and where to look

 

Thanks Kerm_Ed,
As near as I can tell I don't get any error messages in the Console regarding the shader.
Where would I change the quality setting? I looked in Project Settings / Player but nothing jumped out at me about shaders?

 

Mich_9,
I kind of like the idea of a video for my animated logo, not that I'm super concerned with optimization that much with my project as it's basically just one big collection of Canvas GUI's 800 X 600..... but that being said how would I make my video of my spinning logo. Does Unity have a video capture option?
I would need it to be a pretty perfect loop in order for it to be useful I would imagine

 

You can use Time.captureFramerate and build a movie with the generated screenshots yourself. There are also paid assets in the store that can help you with that, like AVPro Movie Capture.
Another option is to use a 3D modeling software of your choice.

 

Ok Thanks Mich_9
I have my movie clip on a raw image set to loop, now how would I fade that out?

P.S. You not spending time for Christmas?
I thought i was the only crazy work'a'holic

 

To fade the image I think this would help:
UI.Graphic.CrossFadeAlpha.
Of course I'm celebrating Christmas, I just like to visit the forums from time to time.

 

Thanks Mich_9 but the link does not give any example code of how to do this?

 

Here, just replace text with your Image.

 

Thanks Mich_9,
It works but kind of fades out abruptly though, I was looking for something with a little more control over the fade out duration, I think to look nice it would need to fade out over a 1.5f time frame.

Code (CSharp):

1. void Start ()
2.     {
3.         myLogoMovie.CrossFadeAlpha (0, 21.5f, false);
4.            
5.     }

 

I don't understand, what do you mean with fades out abruptly?

 

It fades out in about 1/2 a seconds time, I was wondering how to make it so that after 21.5f it would then fade out over a 1.5f time frame..... sorry I hope that made better sense.
PS How was Christmas

 

Use a Coroutine then:

Code (CSharp):

1. void Start ()
2.     {
3.         StartCoroutine(Fade());        
4.     }
5.  
6. IEnumerator Fade()
7.     {
8.         yield return new WaitForSeconds(21.5f);
9.         myLogoMovie.CrossFadeAlpha (0, 1.5f, false);        
10.     }

Christmas was great for me, thanks.

 

Who Da Man!!
That's perfect... it works absolutely perfectly!! Thanks man
P.S I was a slave to this project all over Christmas..... Oh Well K.I.T.T. needs his dash Software

 

Now you can take a well deserved rest and enjoy the rest of the holidays.

 

lol I wish I could I still have this "Knightmare" to deal with
http://forum.unity3d.com/threads/arduino-buttons-to-toggle-animation-help.376035/#post-2438759

 

On the plus side at least that looks a lot nicer, just have a slight stutter where my animation loop is not quite perfect to fix.

 

I discovered that the video spinning logo is NOT showing up in the stand alone player build.... Man if it's not one thing it's another.

 

Did you test it in another computers? Try different resolutions, it may be related to the image anchors or the UI canvas not set correctly.

 

Well I only have the one computer hooked up right now and that's my mac book pro.
here is a screen capture of how I have my Raw image assigned to a UI canvas.

just incase it's a script issue, here is the script I'm using:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4.  
5. public class LogoMovie : MonoBehaviour {
6.  
7.     public MovieTexture movTexture;
8.     public RawImage myLogoMovie;
9.     public AudioClip KittID;
10.     public AudioClip LogoOutFX;
11.     float volume = 0.3f; //Clip Volume Setting
12.  
13.     void Start() {
14.         GetComponent<RawImage>().texture = movTexture as MovieTexture;
15.         movTexture.Play();
16.         movTexture.loop = true;
17.  
18.         StartCoroutine(Fade("MainScreen"));
19.     }
20.  
21.     IEnumerator Fade(string level02)
22.     {
23.         yield return new WaitForSeconds(12.0f); // wait time
24.         GetComponent<AudioSource>().PlayOneShot(KittID);
25.  
26.         yield return new WaitForSeconds(9.0f);
27.         myLogoMovie.CrossFadeAlpha (0, 1.0f, false);
28.         GetComponent<AudioSource> ().PlayOneShot (LogoOutFX, volume);
29.         yield return new WaitForSeconds(0.9f);
30.  
31.         Application.LoadLevel(level02);
32.     }
33. }

 

Weird, the code works for me in editor and standalone. Build and standalone Windows version, I can test it for you.

 

And on my Mac build the logo is a no show in the two places i'm using it?
I guess I'm going to have to go back to using the 3D spinning logo.

 

I suppose the other way I could do it would be to export all of my movie frames out as individual sprites and just do a frame by frame animation, but in the end I wonder if just having the 3D logo with a code on it that makes it spin would be less system intensive. ?

 

The movie is the least intensive and most adequate for your purpose, I think the frame by frame animation is too much for this (maybe I'm wrong, so you can test it). You can switch to the 3d spinning solution but you said it didn't work in standalone.

 

No the 3D spinning logo worked fine just the fade out effect did not play in the stand alone player. Same as the Raw movie texture is not playing in stand alone, which is weird because I'm using the web cam capture on a raw image and it plays in the stand alone player just fine.