AutomaticSize Studio Beta

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:

  1. 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.
  2. 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.
  3. 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 FeatureTo enable the beta feature:
  1. Launch Studio
  2. Select File, Beta Features.
  3. Check the box next to “Automatic Size Beta” and click Save.
  4. 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’:
devForumPost_autosizeX_00

A TextLabel whose AutomaticSize property is ‘Y’ (and TextWrapped enabled):
devForumPost_autosizeY_00

A parent Frame (white background) whose AutomaticSize is ‘XY’ containing a child Frame (grey) with an animating position:
devForumPost_autosizeXY_01

  1. 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.
  2. 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.
  3. 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.
  4. 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:

  1. Resolved as of v452: Changing the AutomaticSize setting (and/or child content changes) sometimes won’t properly trigger a new layout operation, leading to incorrect results.
    a. Workaround: in a script, reading the AbsoluteSize property of the affected object (for example, assign to a local variable) should resolve this until a fix is deployed.
  2. The new ‘AutomaticCanvasSize’ property of ScrollingFrame isn’t updating CanvasSize.
  3. Rich text can sometimes be re-sized incorrectly.
  4. Issues reported with inset and padding.
  5. Issues reported with SurfaceGUI.
  6. Issues reported with image GuiObjects.

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:

  1. AutomaticSize determines the maximum amount of available space that a GuiObject (in this case, text) can use.
  2. 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!

235 Likes

4 posts were split to a new topic: Feedback - Like Instead of Reply

Will automatic size on a TextLabel cause it to scale based on its own text, or is this assuming your TextLabel already scales based on the localized text’s length?


Edit: Okay, so it works if you apply it to a TextLabel directly. I was trying it with the Parent of a TextLabel that had overflowing text, and it scaled based on the TextLabel’s size and not the text itself.

7 Likes

Check out the first image in the post…

5 Likes

Nice work roblox! First UICorner, then RichText, now this!

I’d love to see what you guys would make with this!

So I guess now we can make something like the default roblox chat?

Also, about TextScaled, I just want to know, it won’t be like how TextScaled normally works when doing AutomaticSize, right? Like, TextScaled normally is like it scales the text size that way it fits all into the textlabel. Will it be a certain size when both are on? (I don’t have the time to try this out so you can just reply to me telling and I will appreciate it.)

9 Likes

This feature will especially be useful for text! No more needing to use TextService:GetTextSize() to get the proper size for a text label. I cant think of any other examples off the top of my head but I assume this will be very useful for making guis.

1 Like

Yeah, I was trying that and it wasn’t working like I expected.

image

I didn’t realize it had to be the TextLabel itself, since it seemed like it’d scale based off descendants or any of their text and not just the instance’s own text.

7 Likes

Can we have a changable Tween property that automatically tweens instead of being forced without transition?

9 Likes

This is the first time I’m hearing about this, did this beta feature just come out today?

They tend to create a draft of the post days or even months before actually releasing the post, which is why the date you see is “3 days ago” when the feature has just now been officially released.

2 Likes

AS = AutomaticSize

This is certainly an easy way to create resizable frames because all you’d have to do is change the button’s to follow the mouse and it will resize!

Strange Behavior(s)

I think there is really weird behavior, intentional or not, but it makes it a little strange to use.

When the parent frame resizes, it doesn’t actually change its size property, which is what should happen IMO. Similar to how the red triangle pops up that says that the size property is controlled by UIAspectRatioConstraint (when added), that should also happen with AS, and the property would become a “read-only” for that state.

Bugs

Also, a “bug” occurs when using Inset and Middle Borders:


The gray frame should be overlapping the border and staying inside.


Weirdly, this behaves how it INSET should behave. For middle, the box’s rightmost edge should end between the border.

Additional Features

  • I think a great addition should be allowing UIPadding to add padding between the child and parent borders (only for the directions set because otherwise, it’d bleed over the edge anyway).

  • Two properties should appear when setting AS to anything but None: Min Size and Max Size. When the child is within the Min Size area, then the frame won’t follow to scale with the child’s position. On the contrary, when the child leaves the Max Size area, then the frame will just say at the Max Size and let the child wander off. (good parenting XD).


I hope I didn’t reiterate what was said in the post but do let me know anyone.

Anyways, thank you for this feature y’all!
Keep it up, Roblox! :roblox: :roblox_light:

8 Likes

This is actually perfect timing. I was going to make a plugin that has a TextLabel appear when you hover your mouse over a button telling you what it did. Before I had to make use of TextLabel.TextBounds to size the textbox to fit its text, but it had multiple issues. And now we have this feature which makes doing that 10x easier!

Thank you Roblox! image

1 Like

Finally! I have been waiting for this for so long! Can’t wait to try it.

2 Likes

Yes, yes, YES! Finally, I don’t have to have any awkward conversations with the devs that the translated text doesn’t fit the UI! Thank you guys so much.

3 Likes

I wish this works with ScrollingFrames.

3 Likes

Just to inform you, this new feature messed up my current icons layout:

1 Like

Maybe try reloading an old save and copying the gui then pasting it back in the current game.

I think is partially intentional as you should be using AbsoluteSize to determine the current size of a frame.

2 Likes

This is great! I can finally get rid of my manual scrolling frame canvas size changing.
Though it doesn’t seem to work at all and makes the scrolling bar not move and sometimes snap to different positions. It also seems to mess with tweening on pretty much every GUI object. Hopefully, this gets fixed soon!

1 Like

thank you so much, one of my first topics are finally solved


i kept using a ugly workaround but now automaticsize

this is revolutionary

2 Likes