- Home /
[4.6 UI] Image fading - How to?
I want to make the FadePanel image to fade from 0 to 128, but its not really working :/
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class PanelTransition : MonoBehaviour {
public Image FadePanel;
void Update ()
{
FadePanel.color.a = Mathf.Lerp(0,128,Time.time);
}
}
In case anyone wants to avoid scripting and achieve this using the built in animation system to achieve this effect, check out the link below
Answer by carrollh · Dec 30, 2014 at 03:59 AM
So, the answer above links to a solution from 2012. The author wants to know how you do it in the new 4.6 GUI library, which is only recently available. Take a look at UI.Graphic.CrossFadeAlpha found here.
Say you have a UI.Text object named text, and you want it to fade out over the next half second:
text.CrossFadeAlpha(0, .5f, false);
I hope this helps someone else. Sorry, I don't understand what the false (ignore timestamp) does. The docs page for it is missing.
This should be the correct answer, because it is exactly what is asked for - the 4.6 way (and the more robust one) for doing this.
I'll vote this one up since I like the solution a lot and like carrollh says is the newer UI system. However I understand the original (accepted answer) was correct too, since the new UI requirement was not specified at the original question text ? (even tough it has the tag for 4.6 and the include can be seen is still a valid method at 4.6 too, a manual but still valid method)
Edit: Also note that there's even yet another method that I can think of, if you do add a CanvasGroup element to the parent panel you can access its alpha value directly too and in turn it will also fade all its child contents for your automatically. Like this for example that fades alpha from current alpha value to 1:
public CanvasGroup myParentPanel;
public IEnumerator PlayerTurn (float aTime)
{
float alpha = myParentPanel.alpha;
for (float t = 0.0f; t < 1.0f; t += Time.deltaTime / aTime)
{
myParentPanel.alpha = $$anonymous$$athf.Lerp(alpha,1,t);
yield return null;
}
yield return null;
}
Thanks for both answers!
@CodeAssembler If we're going to go that route, you can still use CrossFadeAlpha(). You can probably still put it in a coroutine, and it doesn't require explicit lerping :) Just put this script on your GUI Canvas:
Graphic[] graphics = GetComponentsInChildren<Graphic>();
for (int i = 0; i < graphics.Length; i++)
{
graphics[i].CrossFadeAlpha(0, .5f, false);
}
For what it's worth I like your version better because you're not iterating over every GUI element. But I can also understand a person's desire to not use $$anonymous$$athf.Lerp ever. So I'm including this for those folks...
Answer by jokim · Aug 27, 2014 at 03:25 PM
Found an answer Here
Basically, stay away from Time.time. that value is equal to the number of seconds that passed since you started the program.
There's 2 options available to achieve what you want. either you use an incrementing value (that goes from 0 to 1 over time) instead of Time.time. Something like :
float timer = 0;
void Update()
{
timer += Time.deltaTime;
FadePanel.color.a = Mathf.Lerp(0,128,timer);
}
Or, you use a different "from value" every frame... your "current value" actually. like so :
void Update()
{
FadePanel.color.a = Mathf.Lerp(FadePanel.color.a,128,Time.deltaTime);
}
The effects are slightly different, The first one will be more linear, as for the second one, it will be more "quadratic"... it depends on which you prefer.
Thanks, I used: :)
FadePanel.color = Color.Lerp(FadePanel.color, new Color(0,0,0,0.75f), Time.deltaTime*2);
I get an error from the same code that was posted here
error CS1612: Cannot modify a value type return value of `UnityEngine.UI.Graphic.color'. Consider storing the value in a temporary variable
@$$anonymous$$oikle - you would use a temporary variable like this:
Color c = FadePanel.color;
c.a = $$anonymous$$athf.Lerp(FadePanel.color.a,0.5f,Time.deltaTime * speed);
FadePanel.color = c;
I'm assuu$$anonymous$$g that FadePanel.color is of Color type not Color32. The r,g,b,a of the Color class goes from 0.0 to 1.0, not from 0 to 255.