Until now, GUIs on Roblox were some of the more time-consuming (but rewarding!) features that game developers could build. It takes a lot of scripting work to build a nice GUI – especially if you want to implement more complicated features, like fading in and out. But never fear! The Roblox engineering team has been hard at work coming up with new ways to streamline this process, so creating GUIs is much more accessible for our developers. These added features will allow you to create high-quality GUIs quickly and easily without having to deal with a ton of finicky code.
We’ve added five new components to Studio: UIGridLayout, UIListLayout, and three different types of UIConstraints.
Arrange your GUI with UIGridLayout and UI ListLayout
UIGridLayout allows you to arrange your GUI on a 1D or 2D grid on your screen; no coding required. UIListLayout, on the other hand, allows you to specify a 1D list layout that does not affect object size; instead, it just arranges the object in line.
Simply parent UIGridLayout to any GuiObject to place the object and adjust its size along the grid. Originally, developers needed to write a fairly long Lua script to create and alter their GUIs. Now it’s as simple as dragging and dropping the elements that you want where you want them.
Make your GUI more versatile with UIConstraints
There are three main types of UIConstraints: UISizeConstraint, UITextConstraint, and UIAspectRatioConstraint. These UIConstraints set particular rules for the size of your elements on a screen, so that they stay between a minimum and maximum size.
- UISizeConstraint: Specifies the maxiumum/minimum size of each element.
- UITextSizeConstraint: Specifies the maximum/minimum font size so that text does not become illegible or too large.
- UIAspectRatioConstraint: Defines the aspect ratio for an element regardless of its size, so that it does not become warped or distorted. These limits will override all other size-related layouts that you apply to the object.
In the future, we’ll also be looking to add special UI in Studio that can help you better understand how these UIConstraints can interact with one another, as well as even more improvements to come. In the meantime, be sure to check out our Wiki pages below for more information.