Currently, all text rendered by the Roblox UI system on a given ZIndex is rendered above all Images and Frame backgrounds on the same ZIndex. This is not only extremely undesirable for any moderately complex UI, but it makes it downright impossible to correctly implement a lot of complex UIs.
-
Consider for example: The case of trying to add floating draggable windows to a game. This pattern is currently effectively impossible to do correctly on Roblox… is that acceptable? Each floating window has at least images to build the frame and text for a title bar. Now, to have one window correctly float above another one, you have to have them on different ZIndicies. There are only 10 ZIndicies, and your static UI probably already eats up at least a few of them to start out with. If you have more floating windows than the number of remaining ZIndicies = boom. Not to mention the fact that even if you don’t every single time you want to “bring a window to the front”, you need to change every ZIndex of every single GUI object in every single one of those windows… which is a huge burden on any code, especially if there’s encapsulated components involved.
-
Consider the case where we want a “stack” of overlapping items in a UI, and each of the items has text and images in it. Not possible at all right now because of the Text / Image behavior.
-
Not to mention that the entire problem is extremely in-intuative to begin with. After all… text is rendered as images in most engines to begin with.
-
In fact, the only reason that I have ever used ZIndicies at all in the first place is to work around this stupid problem because given the fact that they work at the global level (as opposed to locally to disambiguate depth within a parent), they’re a massive pain to work with (with you having to iterate through an entire UI hierarchy changing possibly dozens of ZIndicies every single time you want to change the ZIndex on an object dynamically. Also complicating any sort of component-based code, because now every single encapsulated component has to have a way to set ZIndex added as part of it’s API)
I mean, I just had to throw Roblox’s nice text rendering out the window and make my own custom image-based text renderer (which only looks okay) to make my latest project possible at all because it was simply not possible otherwise thanks to this behavior (I need stacks of overlapping objects in several places in the UI), which is pretty frustrating.
I feel like fixing that behavior should be priority #1 for making the GUI system better. It’s by far the current largest pain-point with it, to the point where most games just throw up their hands and leave small ugly edge cases where some of their text is overlapping images that it shouldn’t be in the final product because there’s no reasonable way for them to fix it.
Obviously, a backwards-compatible solution is somewhat difficult given the fact that some UIs are likely relying on the fact that their text appears always-on-top. My proposal would be to make a global flag for it, with the new behavior being that text and images are rendered in whatever order they appear in the hierarchy (just like frame backgrounds / images), rather than on a separate batch, if that wasn’t clear. I think it’s easily an important enough problem to deserve such a flag, because the current behavior really isn’t acceptable when it makes a lot of UI patterns downright impossible to implement.