Draw UI element on top of everything

I have a grid of ui elements, and when I select one, I need to scale it so it gets larger, and hovers over the neighbouring elements: it must be rendered on top of all its neighbours. I tried to play around with element.drawOrder, but it creates a lot of bugs. Is there a better option?

Hi @Dmytro_Khudiiash!

If I remember correctly the render order is based on the order in hierarchy. So maybe you can play around with reparent or something?

The container of elements is basically a horizontal layout. Won’t it change other elements positions if I move the element out of the layout?

Not exactly sure what you mean, but maybe if you reparent it to the same parent it becomes on top? (I’m also not sure if the last child is rendered first or last).

Ok, let’s approach it differently. We can change elements’ draw order. Is there any way to restore the original draw order of the element without rebuilding the layout anew? I tried store the value like element._defaultDrawOrder, but it is inconvenient and buggy (every element has multiple children, each of which having its own draw order)

Are you be able to share the editor link of a sample project, so someone can take a look?

Unfortunately I am not. It is a private project, can’t share. But I have found the method I was looking for. screen.syncDrawOrder(). It does just what I needed, restore the original draw order.

1 Like