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.
After enabling Canvas Group in Studio Beta features with the following steps:
Below is an example of the new CanvasGroup instance to create a semi-transparent prompt:
Insert a ScreenGui. Make sure its
ZIndexBehavioris set to Sibling.
Insert a CanvasGroup, you can configure it the same way as configuring a GuiObject.
Insert all children as usual.
Insert UICorner under CanvasGroup to apply round corner for the whole group.
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:
- 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:
- Display Resolution (all of connected displays)
- Display Window Scale (if applicable)
Pending shipping bug-fixes/features:
CanvasGroup will respect the dpi scale of the screen.
GroupColorwill be renamed to
ClipDescendantsalways set to
trueto reduce confusion.
- CanvasGroup’s behavior(update fps/resolution) will respect graphics settings of user.
- Image asset update should immediately trigger a canvas update.
- AutoButtonColor for buttons does not get stably triggered under canvas group.
- Crash when typing into TextBoxes under CanvasGroups.
- 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
- 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.
- 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.
- 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.