- Home /
UI covering my Sprite
My UI Text is displaying the number 0 as shown in the image below. It is in front of the green Square(sprite). How can I push back this UI text to go behind and let my Sprite be on top?
The text doesn't come with a sprite renderer automatically thus I tried adding one and sorting the layers and that doesn't help.
I tried sorting the layers on the top right hand corner of the inspector and doesn't help either.
If they are both UI elements, you can invert their position in the hierarchy of your canvas.
Try changing the position of ui elements in hierarchy http://answers.unity3d.com/questions/902934/2d-ui-being-coloured-by-background-image.html
Answer by Priyanshu · Apr 13, 2015 at 01:02 PM
The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.
The Canvas has a Render Mode setting which can be used to make it render in screen space or world space.
Now if you want UI Text behind some Sprite. You need to put the render mode of Canvas (containing UI text) to World Space. Then you can put it behind Sprite.
Video tuorial: Unity 4.6 - New UI World Space Canva
Link to manual:
Answer by Cal2 · Apr 13, 2015 at 01:11 PM
if you are using "screen space - camera" try setting the plane distance higher.
or if you are using "world space" set the axis that they are on further away.
if it is "screen space - overlay" I don't think it is possible since that is the point of overlay.
Answer by apple92 · Apr 13, 2015 at 11:12 AM
In General: If you work with multiple Canvas you should check out the sorting layer options: http://docs.unity3d.com/ScriptReference/Canvas.html
Within each UI Element (Canvas, Panel, etc.) nested Elements get drawn from bottom to top. So the element at the bottom gets drawn in Front, then the element above gets drawn behind and so on, until the element at the top gets drawn behind everything.
That means you would want your green sprite Image below the text in your hierarchy.
Note that changing the position of an Element will NOT change the order. Even if you position elemnts behind eachother via the Rect Transform, the Element at the bottom in the hierarchy will get drawn in front of the Rest.
For your specific need:
Okay.. It seems like you use the old GUI Components. Nevertheless...
If you want to draw the text behind the sprite, you'll need to use a TextMesh (With Mesh Renderer attached).
UNder Project Settings -> Tags and Layers -> Sorting Layers, you can create a Layer for the Text and one for the Sprite.
In the Sprite Renderer, set the right Sorting Layer. On the Text Mesh, add a Script that sets the sortingLayer on Start:
GetComponent<Renderer>().sortingLayerName = "LayerNameOfText";
Now you just need to reorder the Sorting Layers until it fits your need.
This Should work for your case.
I am not using multiple canvas. In my case both aren't UI elements.
Answer by MrClottom · Apr 02, 2017 at 10:07 AM
Setting my canvas to another render mode messes everything up then all the items display way to big and distorted. Can someone explain how this solution is supposed to be practical?
Answer by BrunoPoupado · Jul 21, 2017 at 06:53 AM
Change Plane Distance on the Canvas untill it brings it to the front of what you want.