As a Roblox developer, it is currently too hard to create backdrops, outlines, and similar UI designs that require a child element to render behind a parent. The Sibling ZIndexBehavior, which is majorly preferred for its convenience, doesn’t allow child elements to have a lower ZIndex than their parents. As a result, there are only two ways to accomplish features like drop shadows and rounded outlines:
Use Global ZIndexBehavior, which is prone to major headache with different UIs colliding
Swap the order and make the shadow/outline the parent element with the button/frame the child, which is unintuitive and tricky to work with
The ideal solution to this is simply being able to assign a negative ZIndex to an element to make it appear underneath its parent.
If Roblox is able to address this issue, it would improve my development experience because I would be able to create interesting and complex UIs with more simplicity on the backend.
I believe this feature is instrumental as well. The interface in one of the games I work on is a complete mess because I have to basically use my backdrop as a container. This goes against the conventional standard of using a Frame containing all elements. It is not uncommon for me to be using an ImageLabel as the element container due to the need for a background. Not only does this irk me due to breaking some unspoken standard, but as mentioned by OP, it feels very awkward to deal with.
This is the only reason why I still use Global behavior on my ScreenGuis, please add this functionality and I will forever use the superior Sibling behavior!
There is a strong usecase for this behaviour. Devs are constantly having to do crude workarounds for the 1 common situation of wanting a child to be behind the parent. There’s a legitimate good reason to want this behaviour. Little quality of life additions like this can go a long way in speeding up development time in the Metaverse.
Hi, appreciate your thorough thoughts for making engine feature suggestion. Our engine assumes sibling zIndex behavior will always guarantee parent renders before children. This convention is the foundation of a lot of internal techs and is how most of UI rendering framework does. If you want to have drop shadows render below original content with Sibling behavior, what you might want to do is that:
Create a parent container(transparent Frame) and place both drop shadows and original contents under it if you want to make use of relative position and sizing.
Make shadow the parent and original content as children if that satisfy your needs. (I agree this might be frustrated to work with.)
Thanks.
As a creation engine, shouldn’t you handle the internal tech side of things? Isn’t the point of a creation engine to simplify the tech for the user? This just puts the work on us. It might be a convention for web browser or other user interface systems, but isn’t Roblox all about breaking conventions? I understand the performance drawbacks as-is, but you can definitely add an abstract layer in this. We only need this to affect the parent, you can create the parent container without us even knowing.
It’s like a two sided coin, we either get told “we have to think outside the box” when we ask for industry conventions, but on the other side you jump on those conventions when we ask you to push them.
This wouldn’t break any functionality, anyone that wouldn’t want that can just shift all their ZIndex to bring them back from a 0 origin, with a 1 minute command line. It should even ship with a new ZIndexBehavior to not break compatibility.
And with that we can design faster, iterate faster and ship faster.