Add a UITransparency modifier object

As a Roblox developer, it is currently too hard to modify the transparency of a UI object and its descendants as a whole. Thus, it is also hard to make UI structures fade in/out properly.

As a solution, I would like to propose an additional object called “UITransparency” (or something of the sort). This object will set the transparency of its container GUI object as well as all the descendants. This is different than simply setting the background/image transparency, as this transparency modifier will affect the whole structure as an individual object that can be transparent.

In other words, it’s not like you’re stacking transparency blocks on top of each other, but instead combining them with CSG and then setting the transparency. It affects the whole, not the individual.


With all this being said, I want to be a bit careful, since this is kind of a post-processing UI effect, and I have no idea what the ROBLOX engineers think about branching into such an area.

61 Likes

Would it multiply against existing Transparency values? If you have an existing GUI with BackgroundTransparency = 0.5, how would adding a UITransparency object cause it to behave?

1 Like

I was just thinking about this earlier. It would be nice for smooth gui effects on things like inventories.

1 Like

Think of the Opacity setting in Photoshop. So, yes, in a way it multiplies against existing values, but only by proxy of it changing the opacity of the entire object and its children. I have no idea how the UIs are currently rendered, so I’m not sure if this is even doable with the current architecture.

Edit: Sorry, I think I was thinking of addition, not multiplication. It’s as if the rendered image of the UI and its descendants then took into account an image transparency.

4 Likes

I think it would be helpful to have an “InfluenceMode” property or something that allows you to switch between multiplying and adding.

3 Likes

This is an absolutely awesome idea. A definite time-saver. Thank you OP.

2 Likes

Awesome!

I’ve thought of suggesting this a couple of times but decided it wasn’t a good request lol

Same, until they started releasing other UI modifier objects, like UIScale.

3 Likes

Support, I’ve had this problem several times.
The good news is that GetDescendants() makes it a whole lot easier to just make your own script that does this, but having a UI Object that did this would be even easier :smiley:

I understand exactly what you’re asking for, and there is a reason it does not exist in Roblox. In a traditional 2D desktop application or OS, doing something like fading out a complex dialog box was very easy, because the contents of each window are typically composited to a single bitmap (window buffer), using various blend methods, and the whole window could then be faded out as a single bitmap.

In Roblox, like most current 3D games, UI is rendered to a 3D context, even seemingly-2D UI like ScreenGuis. UI elements aren’t composited to a 2D bitmap first, they are rendered by the GPU every frame. If you look carefully at a 3D AAA title that has popups and dialogs fading in and out, what you’ll usually see is that there is a bit of sleight of hand at play: Elements are fading independently, complex things are all pre-rendered textures, and it’s done very quickly with care is taken in the design to not have obvious overlaps. What you’ll also notice a lot of the time is that the images that you think of as being a “2D” overlay, are actually being transformed in ways–sometimes subtle, sometimes not–that give away that they are on 3D surfaces. When you do still encounter true 2D rendering in 3D games, which is increasingly rare, it’s usually just in the out-of-game menu systems, not so much in game or HUD.

6 Likes

Thanks for the explanation! That was what I was worried about; I wasn’t sure how UIs were rendered on ROBLOX. Definitely understandable if this feature is out of scope then.

2 Likes

I do wish it were that easy, but alas, no. What’s being asked for here is not a convenience feature that manages transparency values for you, it’s a method of blending that we simply can’t do. Consider this example dialog box with overlapping elements:

example_dialog

On the left is what you can currently, easily do with Roblox GUI and transparency values: you can fade out individual elements. On the right is how the dialog would appear when halfway-faded-out in a traditional 2D UI renderer. This is what the OP is asking for, and it’s not possible to achieve this with stacked Roblox UI elements like ImageLabel, TextButton, etc., because we have no 2D compositing engine, all of the individual UI elements are draw to their own geometry in 3D space and rendered in z-index order. The illusion of 2D is just from ScreenGuis being rendered using orthographic projection.

18 Likes

My life is a lie!

But thanks for your more in-depth explanation of this. I’m satisfied with that, albeit sad that it can’t be done with the existing system.

4 Likes

The illusion of 3D is from the world being projected onto your 2D screen using perspective projection. If we allowed memes, there would be an image of Morpheus here.

7 Likes

I want an easy way to fade an entire gui group in and out. This object would be great for that.

[UIComponent] UITransparency
  [Number] .Transparency

Mod edit: Merged from seperate thread

18 Likes

pls no more TextStrokeTransparency calcs!!!

6 Likes

I really wish this was a thing by now. Was going to make a post myself but searched and found this old thread, which is actually a merged thread from two different requests of the same thing. I’ve read why this doesn’t exist… but surely there’s gotta be some sort of work around? technology is amazing these days. And even if there isn’t with the current system, i’d take a “convenience feature” (mentioned in quote below) that manages transparency values over nothing. Yeah, it wouldn’t look quite as good as a legitimate overall transparency edit to an entire gui, but it would still save time when coding gui fades.

4 Likes

I suppose it’s worth noting that CanvasGroups do this! Only took 5 years :slight_smile:

10 Likes