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

Answer 1

Best Answer

Answer by ahung89 · Mar 10, 2017 at 02:55 AM

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.

Add comment · Show 11 · Share

tonialatalo · Aug 21, 2017 at 12:36 PM 1

Share

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

Xanatos_88 tonialatalo · Jul 14, 2018 at 06:51 PM 0

Share

Did this solution work for you?

jamiahuswalton Xanatos_88 · Aug 22, 2018 at 04:20 PM 0

Share

The solution worked for me. Thanks

Fattie tonialatalo · Feb 09 at 07:18 PM 0

Share

perfect, and no downsides

Symposium10000 · Jun 04, 2019 at 05:06 PM 0

Share

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

naviln · Oct 30, 2019 at 04:21 AM 0

Share

This is great, thanks!

Bloy- · Dec 02, 2019 at 04:51 AM 0

Share

Thank You!

tomas-jakstonis · Jan 31, 2021 at 04:33 PM 0

Share

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

Show more comments

Answer 2

Answer by hexagonius · Mar 09, 2017 at 06:52 PM

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 :)

Add comment · Show 1 · Share

Calfur · Nov 30, 2020 at 09:12 PM 0

Share

Great explanation, good approach

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

2 Replies

Your answer

Follow this Question

Related Questions