How to make UI element render behind object in Unity - unity3d

I have a badge animation that has a child of text and then a button that decreases the level that should always appear behind the score badge.
I have tried a lot of things(like sorting layer component but then the badge renders over all UI elements even its child text) but fundamentally I changed the Decrease level and Text to just be Default for the layer option and set the Z position and scale to 0. I have then changed the Score Badge and its child to be layer UI and negative coordinates so they appear in front of the camera but the issue still persists.
Here is the editor hierarchy
The issue I am having is the rendering looks like this:

If you use Layers try dragging it in sorting layers the one in the bottom of the stack will render in front.

Related

Text becomes invisible behind background canvas Unity

I just added 3D Text on my scene and it is invisible on the background of Canvas, that is "Render Mode: Screen Space - Camera". How i can make it visible on background of my canvas?
There are 2 ways to fix this:
Change the Sorting Layer of the obstructing object to be one behind that of the text, or change the Order in layer of the obstructing object to be lower than that of the canvas.
OR
Create a new canvas with a higher Sorting Layer (you may need to create a new one) or Order in Canvas and place the text in the new canvas.
As an example, here I have my normal text in a lower canvas, but I created an overlay canvas for text that absolutely must go above everything else.
I find that the second solution is a better general solution for the issue, as in the first solution you have to change the layers for every object in the scene that might obstruct your text.

UI Panels are not positioning themselves according to screen size

My UI elements inside my panels are scaling fine with screen size, but the distance between my different panels is not. I have 3 panels in my scene at different relative position which i set at 1920x1080 reference resolution, and switching between them using animation. But when i change the game view resolution, these panels do not align themselves right. Here are the screenshots:
These are the panels at 1920x1080 which i set.
These are the panels when i set game view resolution to 2340x1080. As you can see, the "settings" panel is still fine but the "more settings" panel does not repositioned correctly.
The same thing happens when i set game resolution to 800x480.
Please help me..
The easiest way you can achieve what you are attempting to do is to use a component called GridLayoutGroup. Add this component to a parent object, child all three of your UI elements to it, and set the column count to 2. I can add an example in a bit, currently building a project.
Edit: Here is a gif example of the above solution.

Particles are in front of UI elements in unity

So all i'm looking for is simple. I want the UI elements such as Buttons/Logo/..etc to be in front any particle effects in the Canvas.
In the answer Here someone suggested to add a canvas component to each and every UI element I want to show in front of the particles and that work somehow the only problem in this way the buttons won't click at all.
All elements are on the default sorting layer including the particles object and the camera.
Is that hard to do that?
Please help.
set "Order in layer" of Particles to 0 and UI elements to 1 or a better way of doing this is to go to add new layers, create a foreground and background layer, set foreground to 1 and background to 0 and then change from the default layer to which ever you want in front or back.
My solution was to change the material I was using in the particle system. Change "Sprite-Default" to a material with "Rendering Mode" Opaque and "Shader" to "Standard".

How to guide tvOS focus items for curved SKNodes

My tvOS app generates a game board using SKNodes that looks like the following:
Each shape, separated by lines, is an SKNode that is focusable (e.g. each colored wedge is composed of 5 SKNodes that gradually diminish in size closer to the center).
My problem is that the focus engine doesn't focus the next focus item (SKNode) that would feel like the logical, most natural next node to focus. This issue is because the focus engine logic is rectangular while my SKNodes are curved. As you can see below, there are inherent problems when trying to figure out the next focusable item when swiping down from the outermost yellow SKNode:
In the example above, the focus engine deducts that the currently focused area is the area within the red-shaded rectangle based on the node's edges. Due to this logic, the focused rectangle overlaps areas that are not part of the currently focused node, including the entire width of the second yellow SKNode. Therefore when swiping downward, the focus engine skips focus to the third (middle) yellow SKNode.
How would one go about solving this focus issue so that focus is more natural both vertically and horizontally for my circular game board of SKNodes without seeming so sporadic? Is this possible? Perhaps with UIFocusGuides?
You have to handle the focus manually. Use the methods listed below to check for the next focused view from the context.
func shouldUpdateFocus(in context: UIFocusUpdateContext) -> Bool
In this method, you will get the focus heading direction (UIFocusHeading). Intercept the required direction and save your required next focused view in some property. Manually update the focus by calling below methods
setNeedsFocusUpdate()
updateFocusIfNeeded()
This will trigger the below
preferredFocusEnvironments: [UIFocusEnvironment] { get }
In this check for saved instance, and return the same. This will help you handle the focus manually as per your requirements.

NGUI can't bring sprite to front in Unity

I have a sprite widget in NGUI, and It can't be brought to front what ever the depth I change in the editor:
Note that the orange panel is a scroll view of NGUI.
Here is the inspector setting of the sprite that I want to set to the very front:
And here is the inspector setting that has overlapped the above sprite that I want to make front of it.
And here is the BottomPanel setting
I finally solve this problem by
Add another panel
Setting the added panel in front the origin one
Make the sprite child of the newly added panel
And the final hierarchy is like this:
And this link of NGUI forum helps
quoted here:
"Depth" property is used to determine the drawing order of the widgets within the same panel that use the same atlas. If you are using different atlases or labels using a dynamic font, bring the widgets forward on the transform's Z, moving them closer to the camera (-Z). If you are using different panels, adjust the transform of the panel you want to bring in front to a lower negative Z value (-Z). I highly recommend sticking to one atlas if you can manage it, it will make your life significantly easier.
And I make a youtube video to explain what I have achieved so far.
Everything looks fine to me but it doesn't seem to work for you. There is another workaround.
On the UIPanel, change the Render Q to Explicit then use z-axis to sort your UISprite. I mean the z position (P) not (R) or (S)
For example, change the z-axis of the "Sprite (1)" object to be 2 then change the z-axis of the "background" object to 1. If this does not work, change the values around.
Please make sure that the Sprite is under the panel.