What is Automatic Size?
Automatic Size changes the size of a GuiObject object based on its child content hierarchy. Developers control how the GuiObject object changes size by specifying along which axis the GuiObject object will grow or shrink to fit the child content as needed.
Automatic Size is particularly useful for UI that’s driven by dynamic content. Some examples include:
- Localized text: languages will vary in the amount of real-estate required to display text. To avoid cropping (or overflowing) text, one option is to use Automatic Size.
- User input: instead of imposing arbitrary limits for sizing user-entry, Automatic Size can size the content for you, based on what the user provided.
- Catalog items: when combined with layouts, such as UIListLayout, Automatic Size can resize your UI based on an arbitrary number of items, which can be useful when your UI is populated by dynamic sources.
How do I use it?
First, the feature must be enabled as a Studio Beta feature.
Enable the Beta Feature
To enable the beta feature:- Launch Studio
- Select File, Beta Features.
- Check the box next to “Automatic Size Beta” and click Save.
- When prompted, restart Studio.
With Automatic Size, all GuiObjects have a new Enum property named ‘AutomaticSize’. This property can have the following values:
| Property Value | Description |
|---|---|
| None | Default sizing behavior |
| X | Resize along the X axis to fit child content |
| Y | Resize along the Y axis to fit child content |
| XY | Resize along both the X and Y axes to fit child content |
Examples
A TextLabel whose AutomaticSize property is ‘X’:
A TextLabel whose AutomaticSize property is ‘Y’ (and TextWrapped enabled):
A parent Frame (white background) whose AutomaticSize is ‘XY’ containing a child Frame (grey) with an animating position:
- As the child Frame moves along the positive Y-axis (upper-left to bottom-left in image above), the parent Frame increases it’s Y-axis size to contain it.
- Then, as the child Frame moves along the positive X-axis (bottom-left of image to bottom-right of image), the parent Frame increases it’s X-axis size to contain it.
- As the child Frame moves in the negative Y-axis direction (bottom-right of image to upper-right of image), the parent Frame’s Y-axis size decreases.
- Finally, as the child Frame moves along the negative X-axis direction (upper-right of image to upper-left of image), the parent Frame’s X-axis size decreases.
Controlling AutomaticSize Behavior
In addition to the enum property values mentioned above, the behavior of an automatically-sized element is indirectly controlled by the size of it’s parent GuiObject. The size of the parent GuiObject determines the maximum extents that an automatically-sized element can resize up to.
For example, a TextLabel whose AutomaticSize is set to ‘XY’ and is parented to a 200x100 Frame will resize up to 200x100, but no larger.
For automatically-sized GuiObjects containing automatically-sized children, the maximum extents will be determined by the nearest ancestor in the hierarchy with either an X and/or Y-axis size that isn’t determined by AutomaticSize.
Lua Code Sample
The following script creates an automatically-sized parent frame that has a fixed-size child. The child’s position animates diagonally to demonstrate the parent’s re-sizing to fit the child contents. This script can be parented to a ScreenGui:
local TweenService = game:GetService("TweenService")
-- Create an automatically-sized parent frame
local parentFrame = Instance.new("Frame")
parentFrame.AutomaticSize = Enum.AutomaticSize.XY
parentFrame.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
parentFrame.Parent = script.Parent
-- Add a fixed-size child frame
local childFrame = Instance.new("Frame")
local origFixedSize = 50
childFrame.Size = UDim2.new(0, 50, 0, 50)
childFrame.BackgroundColor3 = Color3.fromRGB(145, 144, 146)
childFrame.Parent = parentFrame
-- Animate within the parentFrame to demonstrate the parent's resizing
-- to contain the child.
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1)
local tween = TweenService:Create(childFrame, tweenInfo, {Position=UDim2.new(0.0, 200, 0.0, 200)})
tween:Play()
Known Issues
Several issues impacting Automatic Size are being investigated and should be resolved by the end of the beta period:
Fixes: v458
These fixes are now available:
- ScrollingFrame’s AutomaticCanvasSize property now working.
- Fixed an issue where UIListLayout with AutomaticSize and UIAspectRatioConstraint constrains the object size smaller than it should be. Reported by @blobbyblob.
- Fixed an issue where UI objects marked dirty weren’t getting updated properly (this was the source of several reported bugs). Reported by @UFAIL2 (and others!).
Fixes: v459
The following fixes are live in v459 of Studio:
- Resolved a bug that was impacting performance (even for GuiObjects not automatically sized).
- Resolved an issue where padding of automatically sized hierarchies wasn’t properly accounted for. Reported by @rogeriodec_games.
- Resolved an issue with UIGridLayout and UIAspectRatioConstraint where frames were being sized smaller than they should.
- Fixed a couple issues with automatic size and rich text where available space of an automatically sized object wasn’t being used correctly and sizing events were improperly queued.
- Resolved an issue with UIListLayout and scaled padding for automatically sized elements.
- Fixed an issue where a GuiObject with automatic size could be sized smaller than the GuiObject’s own Size property (the Size property acts as a ‘min’ for automatic size).
Non-blocking Issues
Please be aware of these issues, however they will not block the release of automatic size:
- ScrollingFrame’s with AutomaticSize and AutomaticCanvasSize may overflow their parent bounds.
- Improper positioning of automatically sized GuiObjects with inset and middle borders. Reported by @TheCarbyneUniverse .
- Other minor performance issues are being investigated.
- Scaled children sizes (with scaling > 1) of automatically-sized parents scale based on parent’s updated/automatic size rather than original size (double-accounting for automatic size).
- Scaled children positions of ScrollingFrame’s with AutomaticCanvasSize may not automatically resize canvas size properly.
Please report any additional issues that you find as a reply to this post and we will add them to the list.
Is there anything else I should know about?
TextScaled
The TextScaled property controls whether text is resized to fit the dimensions of the GuiObject size. Although similar in concept, TextScaled and AutomaticSize are somewhat independent of each other:
- AutomaticSize determines the maximum amount of available space that a GuiObject (in this case, text) can use.
- TextScaled uses the available space (determined by AutomaticSize) to scale the font size to best fit the available space (up to the maximum font size).
Despite being independent of each other, using both AutomaticSize and TextScaled at the same time can result in significant scaling differences than when AutomaticSize is off. Consider using a UITextSizeConstraint and/or fixed-size parent container to limit the potential increase in size made available by AutomaticSize.
Thanks
Thank you for participation (and patience) in this beta!
