- Home /
Always render UI text on top layer
Hello, in my project i have a Canvas with UI text under it in the hierarchy, and on my main camera i have this script that fades out the screen:
#pragma strict
// FadeOut
var fadeTexture : Texture2D;
var fadeSpeed = 10.5;
var drawDepth = -1000;
public var alpha = 0.6;
private var fadeDir = -1;
public function OnGUI(){
alpha += fadeDir * fadeSpeed * Time.deltaTime;
alpha = Mathf.Clamp01(alpha);
GUI.color.a = alpha;
GUI.depth = drawDepth;
GUI.DrawTexture(Rect(0, 0, Screen.width, Screen.height), fadeTexture);
}
The script works well but my problem is that the UI text appears underneath the fade effect, but it should be "on top" of the fading effect, i have tried setting them to different layers, but doesn't really do anything. Any idea how i could fix this?
Answer by Priyanshu · Jan 08, 2015 at 01:41 PM
Since you are using new UI Text component. You can add a UI>Image also under canvas. Image should be above Text Object. Since UI Objects in Canvas hierarchy at the bottom are rendered at top.
Your Image should be black. Change 'alpha' value of Image through script. You can access it like this:
public Image image; //Drag your Image object from Canvas here
image.color.a = "Change value from 0 to 255 to make image from transparent to black i.e. fade in effect"
hey thanks for the answer, should i remove the script from the main camera and just use the black UI image ins$$anonymous$$d?
you will need a script to change the alpha value of black image for fade-in/fade-out effects.
why are UI objects in the bottom of canvas hierarchy rendered at top? Is there a way to tell what is a UI object?
Your answer
Follow this Question
Related Questions
Canvas UI Priority layers 1 Answer
Unity UI crossfadealpha only fades on mousehover 0 Answers
Make damage screen ui image 1 Answer
Fade logo before main menu 2 Answers
Fade In / Out UI Image 3 Answers