[UI] Dim out all elements except targeted one for tutorial?

I'm working on a tutorial for UI heavy game and I can't figure out a clean way to make "targeted" elements stand out from others by dimming out the background behind them.

Here is an example of what I want to do


Facts to consider:

• I have multiple asynchronous scenes loaded with different sorting orders so I can't tackle this by simply changing the hierarchy order.
• System needs to be dynamic meaning I can point at any element anytime and have the desired result

Any idea is welcome, thank you!

 

how about including a semi transparent panel the size of the UI and place it in the background (at the top of the hierarchy) that is some dark color. then on mouse over, you need to shift the element you are over to the bottom of the hierarchy and the panel just above it. You can do this by manipulating the index of the child game objects within the canvas (Transform.SetSiblingIndex). in essence you are doing a "move to front" and "send to back type of system". I think it all would work.

 

Like I've mentioned in the question, I have more than 1 canvas & additive scenes loaded so I have "more" hierarchies. Also, some elements are part of the grids which would reshufle the content if I move the element out.

Is it possible to change UI render order via shader?

 

I found a solution that works OK! It may not be perfect but it's simple and works with some tweakings.

SHADER
1. Provide area info (center of tutorial element in uv position) & size of highlihted area in radius
2. Set alpha 0 (or do some blending) if fragment is in element center radius

TUTORIAL SYSTEM
1. Create fullscreen rectangle over everything (but under tutorial texts & pointers)
2. Create new material that uses the new shader
3. When you want to focus some tutorial element, just show tutorial and set shader parameters.

This works but you may need to provide extra info to shader for each tutorial step.

It looks more like this now

 

can you please share the shader?