UI.Graphic.CrossFadeAlpha only works for decrementing values ?

If I use UI.Graphic.CrossFadeAlpha to decrement a value, like this :

//image is a Unity.Engine.UI.Image    
image.CrossFadeAlpha(0.0f, 5.0f, false); //we want to make the image completely transparent 

the code will work as intented, the image will fade from it’s original alpha to being transparent in a matter of 5.0 seconds.

However for some reason if my code is this :

//image is a Unity.Engine.UI.Image
image.CrossFadeAlpha(1.0f, 5.0f, false); //we want to make the image completely opaque

my image’s alpha will not change. I have tried both cases with an alpha of 0.0f, 0.5f and 1.0f.

I don’t understand what I am doing wrong in such a simple case.

Thank you for the help !

I am having the same issue, fade out works fine, but trying to fade in doesn't. Were you able to find a solution?

Try this! I'm not sure if it's good coding, but at least it works to me. image.canvasRenderer.SetAlpha( 0.0f ); image.CrossFadeAlpha( 1.0f, duration, false );

Hey there. If it looks like there is only 2 conditions of transparency (0 and 1), it is probably bad shader choice. To use UnityEngine.UI elements, like SetAlpha or CrossFadeAlpha, you need to choose one of those UI shaders in materials you are using for UI elements.

10 Answers

10

Try this!
I’m not sure if it’s good coding, but at least it works to me.

image.canvasRenderer.SetAlpha( 0.0f );
image.CrossFadeAlpha( 1.0f, duration, false );

Note that I had to put my target alpha to max in the unity3d editor [to 255] for this to work

This works perfectly. I also had to make sure my alpha value of my text was at full alpha. At the start of running the game, it will start from 0.

Found out the answer, can’t have the initial alpha value at 0, you have to set this to 1. It works fine then.

So make sure the image you want to fade in, has an alpha of 1.

Thanks, worked for me on Unity 5.x. I set the image alpha to 1 in the inspector and to 0 on Start() using image.canvasRenderer.SetAlpha( 0.0f ); as daleth90 mentioned

Thanks, worked for me

Thanks, worked for me too.

Yep, this seems to do the trick. If Alpha is at 0 it won't fade to 255. But if it's anything higher to start with it works fine, like so: color.a = 0.01f; //cannot be totally 0 for CrossFadeAlpha() image.color = color; image.CrossFadeAlpha(255f, 10f, false);

Hi guys i had this problem too after some testing i can say that it does work for me but not as expected.

What i did as a test for **fading in** was to set [CrossFadeAlpha()][1] "**duration**" parameter to more extreme values, i choose 1000 and it faded fine.

Like this:

`_myImage.CrossFadeAlpha( 255 , 1000 , false ) ;`

When **fading out** it seems that the "**duration**" parameter works as described in the [Unity Docs][3] .

So i set it like this : `_myImage.CrossFadeAlpha( 0 , 1 , false ) ;`

Hope it Helps :)

noting worked till i tried setting the middle value as an extreme; 1000. Thanks!!

OMG this trick works!

I had one CrossFadeAlpha working perfectly using image.CrossFadeAlpha (1f, 1.2f, true); But when I wanted to add two more UI elements behaving the same, it didn't work despite setting the exact same values & settings on the element. It now works perfectly for the new UI elements when using 255 instead of 1. This seems really buggy.

I’m having the same problem with fading in (incrementing the alpha), but none of the workarounds did the job for me. So I wrote a Coroutine for the fading, which works for UI Text:

IEnumerator FadeText(Text text, float target, float duration) {
		float totalChange = target - text.color.a;
		float changePerSecond = totalChange / duration;
		float totalTime = 0;

		while (totalTime < duration) {
			totalTime += Time.deltaTime;
			float increment = Time.deltaTime * changePerSecond;
			text.color = new Color(text.color.r, text.color.g, text.color.b, text.color.a + increment);

			yield return new WaitForEndOfFrame(); 
		}

		text.color = new Color(text.color.r, text.color.g, text.color.b, target);

		yield break;
	}

And It is called as StartCoroutine(FadeText(textObjectName, 0.25f, 0.5f));. It could also be extended for other Graphics. Not extensively tested, but working for my cases.

Hope this can be useful, and any comments on improving it will be very appreciated.

CrossFadeAlpha() not working with Image.color !!!
It is working with

“the alpha of the CanvasRenderer color associated with this Graphic”.
So, first you need to do:
image.CrossFadeAlpha(0f, 0f, true);
or
image.canvasRenderer.SetAlpha( 0.0f );

Yeah, unfortunately, lots of developers think that this method changing the alpha value of the image.color, dismissing the fact that it has nothing to do with that. It changes the CanvaseRenderer.

Graphic.CrossFadeAlpha does not operate on the color of the Graphic (the Image component in this case), like you might expect. Instead it operates on the alpha of the CanvasRenderer component, which is easy to overlook since it’s not a very accessible property. (It’s exposed only via the GetAlpha and SetAlpha methods, and not visible in the Inspector.)

So you should keep your Graphic color fully opaque, but call GetComponent().SetAlpha(0) in the Start method (since there is no way to set the CanvasRenderer alpha in the inspector). Then you can use CrossFadeAlpha to tween it back in.

I too did performed tests and the CrosFadeAlpha() only seems to work for Fading out not for fading in. To be more accurate, it works for fading in, but not as intended, is not honoring the delta time for doing the fade in. It just jumps to the fade in alpha value passed on.

Yes taht is correct, but the nuts values of 1000 or 500 in the fade time. It worked for me having same issue as you

@eonyanov @brunoleos

Hey there.

If it looks like there is only 2 conditions of transparency (0 and 1), it is probably bad shader choice.

To use UnityEngine.UI elements, like SetAlpha or CrossFadeAlpha, you need to choose one of those UI shaders in materials you are using for UI elements.

In my case I had to set alpha to 1 in inspector, then it worked as expected.

using UnityEngine;
using UnityEngine.UI;

public Image imagen;

private void Update()
{
imagen.color = new Color(0, 0, 0, fondo2.color.a + 0.0075f);
},using UnityEngine;

using UnityEngine.UI;

public Image imagen;

private void Update()
{

imagen.color = new Color(0, 0, 0, fondo2.color.a + 0.0075f);

}