[SOLVED] How can I change a value smoothly from 1 to 0 over a given number of seconds?

Unity Engine
1

Hi all,

I have a script that fades the screen in and out, but I’d like to make it so that this happens over a precise number of seconds by shifting alpha from 0 to 1 and vice versa as necessary.

Here’s how I call the relevant function from other scripts:

ScreenFading.ScreenFader.FadeOut(4f);

4f is where I’d like to put the time the fade should take in seconds.

Here’s the function on ScreenFading:

        public void FadeOut(float fadeTime)
        {
                StartCoroutine(DoFadeOut(fadeTime));
        }

Here’s the co-routine on ScreenFading:

        IEnumerator DoFadeOut(float doFadeTime) //i.e. make screen black
        {
                 while (?????)
                {
                      ?????
                      yield return null;
                }
                yield return null;
        }

Here’s the bit on ScreenFading where it draws the black texture over the screen:

        void OnGUI()
        {
                blackAlpha = Mathf.Round(blackAlpha * 100f) / 100f; //round to two places

                GUI.color = new Color(0, 0, 0, blackAlpha);
                GUI.depth = 0;
                GUI.DrawTexture(new Rect(0, 0, Screen.width, Screen.height), blackSprite);
                GUI.color = Color.clear;
        }

I’d like to make blackAlpha shift from 1 to 0 over doFadeTime seconds (4 in my original example). I’m not even sure how to start though - all I know is that I’d probably use Time.deltaTime. Any suggestions?

Mathf.SmoothStep also looks promising!

Thank you.

2

Well 0/Number = 0, and Number/Number = 1. So if you want to slowly increment from 0 to 1 over Number seconds, you’d probably want to calculate some currentTime/TotalTime, and then increment currentTime by the Time.deltaTime of the frame.

//inside enumerator
float currentTime = 0;
while (currentTime < totalTime)
{
    var someValueFrom0To1 = currentTime / totalTime;
    currentTime += Time.deltaTime;
}
1 Like
3

Here’s a special variety of for loop which I use for this sort of situation:

public IEnumerator ChangeSomeValue(float oldValue, float newValue, float duration) {
for (float t = 0f; t < duration; t += Time.deltaTime) {
someValue = Mathf.Lerp(oldValue, newValue, t / duration);
yield return null;
}
someValue = newValue;
}

The “someValue” line is the main one that changes, and you simply assign that to wherever it should be. You can do this with just about any value type that supports lerping.

PS: Don’t use OnGUI (except for like, the most basic of debugging stuff). The new GUI system (based on Canvas) is objectively better.

2 Likes
4

You can also simplify things a bit with Color.Lerp.

5

Personally, I have used tweening engines for many of these things. Does look like you have a couple of good suggestions here as well, but just to toss out other options. LeanTween and Dotween both are available for free and can handle these things very well.

6

Those are great options if you want something more than a linear transition, for example a curvy colour transition for health bars as they shrink (50-100% is green, 10-49% is yellow, lower red) - or to fade the screen faster towards the darkest portion of a fadeout.

7

You can also use animations for this (which is much easier on the Canvas system than the OnGUI system, as you can literally just animate the color you want to change, no code needed at all except to trigger the animation in the first place.)

8

MoveTowards is the best. it is numeric safe for the most part. (you of course still have float inaccuracy there.)

I would do it simply in the update and let you controll it on the fly.

public float target = 0;
public float duration = 1;
private float alpha = 1;

void Update(){
	if(duration < 0){
		duration = 0.001f;
	}
	alpha = Mathf.MoveTowards(alpha, target, (1 / duration) * Time.deltaTime);
	
	if(alpha == 0){
		Destroy(gameObject);
	}
}

void OnGUI()
{
	GUI.color = new Color(0, 0, 0, alpha);
	GUI.depth = 0;
	GUI.DrawTexture(new Rect(0, 0, Screen.width, Screen.height), blackSprite);
	GUI.color = Color.clear;
}
1 Like
9

These are all great suggestions. Thank you!

10

Thanks a lot
It works