How to achieve this desired render order with the new 4.6 UI?

In Unity’s new UI system, the z-ordering is determined by hierarchy (top-to-bottom). Take a look at this picture and you can see my problem with this:

I need the WeldIndicators to render on top of the brains, and I need the PartNameDisplays to render on top of everything. But, the PartNameDisplays need to be children of the brains because they’re labels and the brains can move around.

One solution I can think of is re-organizing the hierarchy so it does brains > WeldIndicators > PartNameDisplays, and setting the position of the PartNameDisplay every frame in an Update() loop. This is suboptimal because it would remove the parent-child relationship of the brain->PartNameDisplay that is logical for an object and its label, not to mention setting the position every frame seems like a waste of resources.

Another solution is to give each PartNameDisplay its own Canvas, and set their z-order to be on top in that way. But that seems like it would be inefficient and, again, illogical to have dedicated Canvases just to render single elements.

Unless anyone can provide a better option, I think I will be using the first solution and manually setting the position of the PartNameDisplays every frame. Thank you for any ideas.

@shoffing How exactly are you ordering the brains? Also, how are they going to move? Where are they going to move to?

If I was you, I’d try experimenting by putting a Vertical Layout Group on your main parent (EditorPartsContainer in this case). It will order the brains automatically while also giving you the option to leave space between them. Try doing that. Just remember to put a Layout Element script on your brains, so you can change their sizes (if you use Vertical/Horizontal layout group on their parent).

If you’re after overlap then my solution to issues like this has been to write a script which copies the position of an object to another. This allows me to have the indicators to make use of the hierarchical layout, so dragging a brain causes the indicator to move with it.

In this scenario I would duplicate the wield indicators (you can disable the image component on the originals) and place them all in an object ‘RenderAfterBrains’ which is placed after the brains.

The script then modifies the position of the duplicates whenever any of the originals move. It’s far from ideal, but the only solution I’ve come up with.

Let me know if this approach would be suitable for you and I’ll see if I can grab the code I use.