Set different sorting layer for each child of a canvas, (Background and UI)

Question

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

Sunshine

Answer 1

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.

Abdominal

Thanks, am going with this now - I wonder, does it have downsides?

– Mortie

Just wanted to say thanks this is an easy solution and will save me some frustration in the future!

– Mown

This is great, thanks!

– Crafty

Thank You!

– Moureaux

Wow, thanks, you saved me a lot of time!

– Dearman

Answer 2

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

Koball

Great explanation, good approach

– Strengthen