CanvasGroup Beta: Group Transparency on UI Groups

[0xabcdef1234]

CanvasGroup Beta: Group Transparency on UI Groups

Dear developers, we are planning on turning on a performance restriction for this feature around this week, and you might encounter behavior difference when you are on different graphics level. For example, if you are on low graphics quality level (client level 3- or studio editing level 6-), you might see display result downscaled as well as animations getting throttled if you are using a lot of CanvasGroup instances. If you encounter any issues/feedbacks with the graphics quality level change…

What is CanvasGroup?

CanvasGroup is an instance that allows you to specify a sub-tree of UI instances as a group and render them together like one item. Transparency and color tint can be applied to the whole group through GroupTransparency and GroupColor properties on CanvasGroup.

---

How do I use it?

After enabling Canvas Group in Studio Beta features with the following steps:

How to Enable Studio Beta Features

• Go to File - Beta Features
  
  

  
  
  
  

• Check Canvas Group
  
  

  
  
  
  

• Restart Studio
  

Below is an example of the new CanvasGroup instance to create a semi-transparent prompt:

1. Insert a ScreenGui. Make sure its ZIndexBehavior is set to Sibling.
   

   

2. Insert a CanvasGroup, you can configure it the same way as configuring a GuiObject.
   

   

3. Insert all children as usual.
   

   

4. Insert UICorner under CanvasGroup to apply round corner for the whole group.
   

   

5. Change GroupTransparency to make the whole prompt semi-transparent.
   

   

The Example Place

• This example place is available at:
  ExamplePlace - Roblox
• You can check it out by directly copying the place:
  
  

Special Notes

• CanvasGroup ONLY works if the ancestor ScreenGui/SurfaceGui/BillboardGui is in Sibling ZIndex behavior.
• CanvasGroup always ClipsDescendants.
• If you encounter any issue related to blinking/corrupted display result, we would like to know the following specs of your development device:
  • CPU
  • GPU
  • Display Resolution (all of connected displays)
  • Display Window Scale (if applicable)

Known Issues

Pending shipping bug-fixes/features:

• CanvasGroup will respect the dpi scale of the screen.
• GroupColor will be renamed to GroupColor3
• Make ClipDescendants always set to true to reduce confusion.
• Text is blurry under CanvasGroups.
• CanvasGroup’s behavior(update fps/resolution) will respect graphics settings of user.
• Rotated text objects with gradient have rendering artifacts.
• Image asset update should immediately trigger a canvas update.
• Crash when typing into TextBoxes under CanvasGroups.

WIP

• AutoButtonColor for buttons does not get stably triggered under canvas group.

---

FAQ

Why CanvasGroup only works with ZIndexBehavior-Sibling?

• When ZIndexBehavior is Global, there could be situations where some of the children render before the parent and some of the children render after the parent. In order to use CanvasGroup, the parent-children order must be determined, as all the children are rendered as one group.
• For detailed information about ZIndexBehavior and render order of instances, check out this place: Beautiful World - Roblox

Why is CanvasGroup always ClipsDescendants?

• CanvasGroup utilizes its own GUI rectangle as a viewport when rendering its child content. The resulting texture is the exact size of its own absolute size.

I am a developer that cares more about performance, what should I know about this feature?

• While it could be used to achieve effects like GroupTransaprency/ColorTint/Group Effects, it is used with extra time and memory cost. For developers concerned with performance, consider the following memory and operation requirements for each CanvasGroup used:
• An extra texture of size AbsoluteSize.x * AbsoluteSize.y (with DPI scaling applied) will be allocated to achieve the final result.

What will happen with different graphics settings or the device is out of memory?

• CanvasGroup items will be subjected to down-res fallbacks when the system is high on texture memory pressure, which means there could be appearance (resolution) differences depending on system memory conditions.

References of different quality levels:

• High Quality Reference
  
  
• Medium Quality Reference
  
  
• Low Quality Reference
  
  

• When the device completely fails to allocate the necessary memory, the item will be displayed as a blank texture.

[local_ip (jmk)]

This is very exciting!

I would love to see a way way to force a CanvasGroup to render either at full quality or not render at all rather than at a lower resolution. This feature is great but the possibility of a lower-quality render without the ability to know when it occurs is a bit of a deal-breaker. It would be great if we could have an event or property that indicates whether the group is being rendered and at what quality.

It would also be nice if we could ask Roblox whether rendering a CanvasGroup of X,Y size will render at what quality, as it’s not possible to calculate at runtime. This would allow us to build our UI in a way where we can choose not to render a piece of UI, or render something else in place of it, when under VRAM constraints.

[VegetationBush (FartedWayTooHard)]

I’m glad that it scales like an image rather than individual objects (objects overlay each other so a pixel with more objects is less opaque). I would like a different icon though. ScrollingFrames and Frames have the exact same icons, adding another one increases confusion.

[BackspaceRGB]

Absolutely amazing!!!

I was just thinking when this will release, and it did!

Why does this property exist if CanvasGroups always clip?

Another thing: it seems like setting the size to 0 on any axis breaks it: (only the border is visible, even though frame transparency is 0 and group transparency is 0 as well) And there is no way to fix it other than cutting it and pasting

Also also, it would be nice if we could maybe “disable” the canvas group (or make it disable itself automatically when GroupTransparency is 0 and GroupColor is 255,255,255) so all the children remain the same, but you dont lose quality? You can technically already do this by just parenting the children to a normal frame, but that could mess up some scripts. You can also technically do this by changing ZIndexBehavior to Global, but it seems like transparency doesnt work correctly in that mode (overlapping transparent frames are a lot more opaque)

Also also ALSO, it seems like canvas groups always sink input, regardless if Active is checked or not.

Also also ALSO ALSO (wow there is a lot of also’s) Viewports in canvas groups only update if you hover over buttons or scroll in a scrolling frame, stuff like that. I’m not sure, but maybe its already known?:

@0xabcdef1234

Image asset update should immediately trigger a canvas update.

[joritochip]

Thank you so much to the team who worked on this feature!

I have been waiting for something just like this for years now, as I’ve had to resort to tweening the transparency of each descendant of a frame just to get a fade effect (which probably came at an even heavier performance cost than this ever will). The UICorner support is a nice touch, too. Looking forward to integrating this into my projects once it is fully released!

[LegendOJ1 (Owen)]

I saw previews of this on Twitter and I’ve been so excited for it, super glad it’s finally out in Beta. Can’t wait to play around with this!

[Abcreator]

@0xabcdef1234

Transparency and color tint can be applied to the whole group through

Does this mean that transparency can finally be applied to VideoFrames with the use of this feature?

[BillB1ox (Will)]

If we use a UICorner in a UI Element and set the CornerRadius to 0, 0 on a normal Frame, does it only affect that UI Element that the UICorner is applied to?

[Inconcludable]

I think it’s because it’s part of the GuiObject class and has ClipsDescendants as an inherited property from it. To solve this they could either:

• Create an entirely new class for it OUTSIDE the GuiObject class (which could break some :IsA() checks and is kinda just weird)
• Ignore the property (Not consistent with other gui objects, but doesn’t break :IsA())

It makes sense to just ignore the property, but they might do something about it later about it

[dokso]

THANK YOU SO MUCH ROBLOX!

I’m convinced this is the greatest update to the UI system so far, and opens up so many new possibilities, I’m really looking forward to making stuff with this.

If you cant tell from the image, you can essentially use canvas group for a way better alternative ClipsDescendants, now supporting rotation and UICorner, which it doesn’t on normal ui objects.

[imskyyc]

This is a great feature and I’m very excited to not have to make complicated transparency tweening functions!

[IConsumeCheddar (DerangedDevforumUser)]

im glad performance was accounted for as well, very interesting announcement, do you have an idea to when this will release?

[Evercyan (Cyan)]

It’s great that it’s finally here, but it turns out this feature isn’t as useful as I thought it would’ve been due to a couple of issues.

---

The first is that it appears very blurry, even in the highest render quality.

CanvasGroup

Frame

It would be nice if there was some way to force it to render in the highest quality possible, as this makes my interface look really low-quality, and is the reason I don’t like to use RichText currently and often avoid it due to the blurry scaling of it. This seems to suffer with the same issue as some dimensions it being rendered in look decent, but most really awful.

---

Secondly, I understand that due to technological concerns, ZIndexBehavior must be “Sibling”. I make all of my interfaces in “Global”, especially considering it seems to automatically pick the deepest one first if it can - similar to Sibling, but without the constraints. If I need something nested in one object to take up its transformation, but appear lower than it (such as a drop shadow), then I can just subtract. I haven’t been able to do this with Sibling.

The main reason I bring this up is that I usually like to put everything relating to the games main interface in one ScreenGui, as it’s a lot easier to manage. Since I have tooltips and such which have drop shadows or certain frames which meet the needs above, I have to give this entire interface Sibling to be able to make use of this feature.

A possible solution could be if all GuiObjects had a “ZIndexBehavior” property that allowed its descendants to be ordered based off of it, and ZIndex of the current GuiObject would act as ScreenGui’s LayoutOrder property.

I’d be able to have this one shop frame be Sibling, with most of the other frames being Global, all under the same Gui.

---

Not supporting ClipsDescendants is quite disappointing, but I understand here, and currently don’t have any issues with it other than having to touch up on my interfaces a bit.

ON THE POSITIVE SIDE, I was hoping this would allow for more customization than just color & transparency (assuming it would’ve been treated as one image), and it turns out we can use effects like UIGradient to make nice transitions for the entire frame seamlessly!! Thank you for this!

[jigwv]

Extremely useful however as someone who never uses Sibling ZIndex behavior, this amazing feature becomes un-usable. Would really love to see that change.

[0xabcdef1234]

Thanks for the feedback, we will make ClipsDescendants always displayed as true and untoggleable in the future releases.

[ko01_41d (koolaid)]

I’m absolutely happy with how the CanvasGroup turned out as it unlocks many new ways of customization for UI designers!

However, I have unfortunately found a bug with it as trying to use a TextBox that has a UICorner inside of it parented in a CanvasGroup, which also has a UICorner in it crashes Studio.

Nonetheless, this is another beta feature I am not disappointed with! Way to go!

[devaleporbet]

This is an amazing change, certainly going to benefit tons of developers with the only deal-breaker being the ZIndexBehavior.

Hopefully, Roblox can figure out some way to let Global ZIndex work as converting a game to Sibling is pretty tedious but other than this I love this update.

[EGOTISMS]

Another day another victory for the UIUX community. Thank you guys for the amazing features!

[Obsentiel (Albert)]

This is so cool!
I’ve been waiting for this since I started UI designing. With the new CanvasGroup, it will make my life easier. Thank you very much, and kudos to the team for making this quality of life change.

Regards,
Obsentiel