CanvasGroup Beta: Group Transparency on UI Groups

I am overwhelmed with the possibilities here

I know roblox’s entire brand is powering imagination but I think there’s too much of it right now (not that its bad or anything :wink: )

I still dont know how to communicate my love for this update
im about to cry tears of joy

3 Likes

Given how the feature is described to work, I imagine this is intended behaviour. But given that it isn’t mentioned anywhere from what I saw and no one has mentioned it yet, I figured I’d mention it. Buttons in a CanvasGroup with AutoButtonColor enabled will not interact when hovered over or clicked like they will under a regular Frame. I made a quick example file in case this isn’t intended behavior.

CanvasGroupNoAutoButtonColor.rbxl (48.5 KB)

4 Likes

This might be due to it not updating unless the properties of it’s descendants change, hope they fix it.

1 Like

Good job engineers!!

We are provided with an example place file, a lot of showcase images and very descriptive explanations

WELL DONE!

the only issue I have is with Studio Beta, I would like to show the new changes to my players which don’t have access to Studio place for obvious reasons.

1 Like

Rotating a UI Object with clipping was a very much needed update, and this is great.

I don’t know how feasible it is, but given that it is rendered as a texture, it would be a game-changer if you could use a CanvasGroup as a Decal’s TextureId, a Texture’s TextureId, a Mesh’ TextureId, and mostly any sort of image if possible. Roblox has lacked spritesheet usage and wrapped GUI support for the longest time, only now it has been introduced with flipbook particles, yet we still don’t have the latter. If GUI images were able to be used without the restrictions of being flat, it would open up a ton of creative solutions to effects that can be done in other engines, but are inefficient or need unoptimal workarounds.

An example that comes to mind is flipbook effects on meshes, which is possible on other engines by scaling down the image and properly aligning it to the UV’s when cycling through them, but in Roblox you’d need to upload every single frame of the effect animation and preload them on the client, in terms of instance count and game loading time, spritesheets can cut down those two by a lot.

CanvasGroups as image textures would allow for so much. The effects I said earlier, dynamic damaging of enemies, by showing wounds where they are hit; animated textures, and lots more.

It’s just a feature that I’ve been hoping would come, seeing as how spritesheet support is something that Roblox has plans for the future, but GUI’s as textures would be a much bigger breakthrough.

6 Likes

Wow finally! i don’t have to spam on image transparency and this also helps with reducing WHOLE line of code but are we able to use it for TweenService()??? would be good if they work for it.

1 Like

What does “group size” mean?

If you mean scaling an entire frame and all of its descendants, you can just convert descendant frames into Scale instead of Offset, and resizing the main frame would resize all the descendants.

Its so good, now i can make fading screens properly. Thanks.

question:

can we tween canvasgroups? if so this is literally the best, would be useful for my test.

Please boost the max resolution for this. Other than that, this is great!

4 Likes

Is there a way for a Lua script to determine if it was able to allocate the necessary memory to render the contents, or is it just core scripts?

I hate to be the person who obsesses over names, but the only other “canvas” in Roblox I can think of is the ScrollingFrame canvas, which makes this feature sound like it’s related to that. Is there a reason for the name CanvasGroup, rather than something like RenderGroup, GroupFrame, UIGroup, or something?

Well this was unexpected, I was just complaining about grouptransparency not being released yet!
Despite the special notes, this update is pretty good and reduced a lot of lines on my UI code.
Thanks Roblox, really cool.

The GUI renders low quality, nonetheless
this is a great feature, Great job for the Roblox Engineers!!

This is not intended, we will file a bug for this.

4 Likes

Yes, you can tween the properties of a CanvasGroup.

Amazing! Can’t wait to be able to use this feature in a year.

1 Like

The current setting should make all render crisp unless you are creating a texture that exceeds 2k in any dimension. Do you mind sharing about your place settings?

I will write about this hopefully shortly in the future. Putting everything under one ScreenGui is not a great choice, as our internal caching system works at individual GuiLayerCollector (ScreenGui/SurfaceGui/Billboard) level. Putting them together would make gui cache keeps invalidate and rebuild through the whole ui tree.

8 Likes

finally I’ve been waiting for this so much

I’m a little biased, but this is one of the best updates for UI Designers! I had a chance to really play around with it today. The UI itself is made up entirely of Frames, UIGradient, UIStroke, and UICorner scripts. There’s no imported bitmaps used here! I used rotation and gradient transparency to create custom shapes like corner brackets and faded lines.

For the hide/show animation, I used TweenService to tween the offset of the UIGradient. The possibilities with this are endless!

Mask3.2022-05-20 17_30_48

14 Likes

Looks amazing! I can’t even imagine what people can do with this

2 Likes