koobas.hobune.stream
Set different sorting layer for each child of a canvas, (Background and UI)
Hi.
I have a canvas set up with a couple of children: 1. An image for the static background of my scene/level. 2. A panel which houses a drop down menu, (containing a grid of inventory objects).
The background panel should be on the "background" sorting layer and appear behind everything in the scene. Meanwhile the inventory panel should be on the "UI" layerwhich is at the absolute front and always is rendered over everything else.
Although I can set the sorting layer for the whole canvas it doesn't seem possible to set the sorting layer of each element individually.
Is there a way to achieve this, should I use 2 canvases, or is there a third, alternative option?
N.B. I know it's possible to have 2 canvases. My question is about the most elegent solution, not how to hack it together.
Thanks
Dan
You can actually set the sort order of individual UI elements by adding a Canvas component directly to the element and then checking the "Override Sorting" option. This doesn't require you to re-organize your hierarchy at all. Just make sure to also add a "Graphic Raycaster" component if you want that element to receive click events.
Thanks, am going with this now - I wonder, does it have downsides?
Just wanted to say thanks this is an easy solution and will save me some frustration in the future!
From what I know, the canvas works different from sprites as it renders its elements according to the hierarchy order, top to bottom. This means, the whole canvas renders in one go. With a single Canvas setup two possible problems arise:
- The canvas will need way too much resources, because it rebuilds all the time
- You're getting a hard time to get the order of elements right (well, ok not so much)
I suggest using 3 canvases, Back, Middle and Front. If background and foreground are static, that means those canvases don't need any recalculation ever and you have it easy setting your game on the middle one. If it's a game :)
