Fading the Title in and out

Unity Courses Ask
,
#1

So I am writing a script to fade a second image in and out on the title screen. Here what I have so far (and it works, just not as intended):

private Image lightImage;

// Use this for initialization
void Start () {

    lightImage = GetComponent<Image>();
    for (int i = 0; i < 1000; i++)
    {
        // fade to transparent over 500ms.
        lightImage.CrossFadeAlpha(0.0f, 0.1f, false);
        // and back over 500ms.
        lightImage.CrossFadeAlpha(1.0f, 0.1f, false);
    }
}

I have also tried to put this in FixedUpdate but I just can’t figure out how to continually make this change over time. I think I will have to use Time.DeltaTime but I’m just not sure how. Any help is appreciated.

Edit: Another attempt

private Image lightImage;
private float alpha;

// Use this for initialization
void Start ()
{

    lightImage = GetComponent<Image>();
    alpha = Time.deltaTime * 10;

}

void FixedUpdate()
{
    
    // fade to transparent over 500ms.
    lightImage.CrossFadeAlpha(0.0f, alpha, false);
    // and back over 500ms.
    lightImage.CrossFadeAlpha(1.0f, alpha, false);
}
1 Like
#2

Hello @Kingdomseed, how are you?

The …CrossFadeAlpha(TargetAlpha,DurationOfTheEffect,IgnoreTimeScale) method already do the “Fade per time” for you, so you don’t need to put it inside a loop, you would be ready to go with code simple as:

using UnityEngine.UI;
+

	void Start () 
	{
		GetComponent<Image>().CrossFadeAlpha(0,3,true);
	}

In the case above, We are telling that the alpha target is 0% of opacity, the fade will go from the current alpha value to the target in 3 seconds and that it won’t be effected by time.timescale changes (if you pause the game, the fade will continue to happen).

It is good to note that all methods that already take time in account don’t need any kind of loop or maintanance to help it achieve the effect/time that you want, such as:

GetComponent().velocity;
Destroy(GameObject, Time);
CrossFadeAlpha(Target,time,timescalebool).
an so on…

Let me know if you got it sorted out.

1 Like
#3

This is super helpful but I would like the image to continue to fade in and out to give it the feel that it is animated. What else do I need to do to continue this effect?

#4

You can use an Coroutine that calls itself after it is over:

	Image image;
	void Start () 
	{
		image = GetComponent<Image>();
		StartCoroutine(FadeINFadeOut(3));
	}


	IEnumerator FadeINFadeOut(float FadeTime)
	{
		image.CrossFadeAlpha(0,FadeTime,true);
		yield return new WaitForSeconds(FadeTime);
		image.CrossFadeAlpha(1,FadeTime,true);
		yield return new WaitForSeconds(FadeTime);
		StartCoroutine(FadeINFadeOut(FadeTime));
	}

Works like a charm =)

1 Like
#5

Perfect! Thank you so much!

1 Like
#6

No problem, I’m glad that I could be of any help

1 Like
#7

One more question @Joao_Dalvi is it possible to serialize FadeTime variable somehow so I can access it in the inspector? I noticed in the documentation that properties are not Serializable.

1 Like
#8

It is, just initialize the float that you will use as an public variable:

	Image image;
	public float FadeTimer;
	void Start () 
	{
		image = GetComponent<Image>();
		StartCoroutine(FadeINFadeOut(FadeTimer));
	}
    IEnumerator FadeINFadeOut(float FadeTime)
{
	image.CrossFadeAlpha(0,FadeTime,true);
	yield return new WaitForSeconds(FadeTime);
	image.CrossFadeAlpha(1,FadeTime,true);
	yield return new WaitForSeconds(FadeTime);
	StartCoroutine(FadeINFadeOut(FadeTime));
}

:slight_smile:

1 Like
#9

Perfect. I missed the part where I put the float into the StartCoroutine FadeIn property. Last last question @Joao_Dalvi I am wanting to switch it so that the Alpha starts at 0 and goes to 1 instead of the other way around. I’m still googling about. I’ve tried this: g.renderer.material.color.a = 1.0f where g is a GameObject.

1 Like
#10

no problem, feel free to make as many questions as you want, everyone learn something out of it, I’ve never though about using the fade in + fade out before, good idea and good effect that you came up with =D I’m sure many people reading this thread will be willing to try it and I shall use it too.

You will have change the alpha on the inspector manually (it will be 255 by default, set it to zero) you could do this by code too, but I’d rather do it in the inspector, after that just swap the order of the coroutine as you have probably sorted out:

{
	image.CrossFadeAlpha(1,FadeTime,true);
	yield return new WaitForSeconds(FadeTime);
	image.CrossFadeAlpha(0,FadeTime,true);
	yield return new WaitForSeconds(FadeTime);
	StartCoroutine(FadeINFadeOut(FadeTime));
}
1 Like
#11

Oh found it! Couldn’t find it before. Thank you!

1 Like
#12

Sometimes things are a little hard to find on unity, or to even know that they exist =) no problem! Looking forward to seeing the games that you are going to come up with, seems that you have a lot of experience with programming and good ideas too (looking for fadein + fadeout, which is awesome)

1 Like
#13

Hmmm doesn’t seem to be working anymore.

#14

will try it to see

1 Like
#15

Yeah, don’t know why but it don’t seems to work, I found an work around, not the best performance wise method to do it but it works:

	Image image;
	public float FadeTimer;
	void Start () 
	{
		image = GetComponent<Image>();
		image.CrossFadeAlpha(0,0,true);
		StartCoroutine(FadeINFadeOut(FadeTimer));
	}
	IEnumerator FadeINFadeOut(float FadeTime)
	{
		image.CrossFadeAlpha(1,FadeTime,true);
		yield return new WaitForSeconds(FadeTime);
		image.CrossFadeAlpha(0,FadeTime,true);
		yield return new WaitForSeconds(FadeTime);
		StartCoroutine(FadeINFadeOut(FadeTime));
	}

this way you can keep the alpha at 255
I had some hard time previously using color.a, I have to do some further researching regarding it

1 Like
#16

Works beautifully! I’ve added you to the credits. Thank you so much.

1 Like
#17

Really? :grinning:
Very happy to know that! thank you very much, looking forward to see the final version, make sure to share it!

1 Like

Privacy & Terms