I will see lots of people ask how to make their UI fit on the screen, and provide a screenshot similiar to this:
The UI is cut off, and isn’t scaling to the user’s resolution! Let’s see how we can fix that, with multiple techniques.
Scaling
1. Use scale instead of offset
Scale is basically saying to the UI engine, “hey, render this at 0.9 percent of the screen’s full size (1)”. If we did 0.9 as X scale, we would get a better result:
The text is no longer the same size as the frame that it’s inside though… fortunately, we can fix that by putting 1 as the X value, which will tell the UI engine “render this at 1 percent of the parent’s scale”.
Scale is not perfect though… here are some more techniques.
2. Use UIAspectRatioConstraints
A UIAspectRatioConstraint will ensure that the parent of itself will maintain a specified aspect ratio. Basically, height and width will ALWAYS stay the same… which is as exciting as it seems!
I will add one to my UI using the Autoscale Lite plugin:
You can also change how it behaves with the properties. I won’t get into that though, you can experiment and see what fits your UI the best.
There isn’t much left to cover for scaling, so let’s just jump into positioning.
Positioning
1. Basic Positioning
When you make a frame, or any other GUI object, you can move it around using the cursor. It’s just like scale and offset though; so, if you want to use scale, set the position in the properties to {0.1,0,0.1,0}, then you can move it around, and studio will automatically do scale now!
2. Anchor Points
Anchor points detemine the origin point of a GUI object, relative to it’s absolute position (where it is on the monitor in pixels). It’s a bit hard to explain, but you’ll see what I mean, they are very important.
Here’s a real world example, if we set the anchor point to 0.5 on both X and Y on a frame, and then positioned it to {0.5,0,0.5,0}, it would be in the very center of the screen, which could be used as something like a crosshair!
These will adjust with the object’s parent as usual, so if you did 1,1 as the anchor point and {1,0,1,0} as the position, it would be at the bottom right!
3. UIListLayouts
UIListLayouts are pretty self explanatory. They will lay out objects, so you don’t have to do it yourself:
These are most commonly used in scrolling frames, and could be compared to UIGridLayouts, which have a set size.
4. UIPadding
UIPadding can have different behaviours, but it’s most common is offsetting objects inside it by a set value:
It has 4 key values: Bottom, Top, Left and Right. These are all UDims, which act the same as Scale and Offset (X being scale and Y being offset).
5. IgnoreGuiInset
IgnoreGuiInset is a property on ScreenGuis. It will ignore the topbar, which could be useful for making crosshairs the EXACT center of the screen.
That’s it… for now! Please leave a comment if I missed anything, but I think this should cover every basic aspect everyone should know. I am open to any criticism.
If you need any more information, refer to Roblox’s official documentation, which lists every topic explained here.
Honorable mentions:
- UICorners, which add a smooth, round corner at each edge of an object
- UIStrokes, which add a more customizable border that follows UICorner rules
- ZacBytes for the autoscale lite plugin (which saves me from slamming my head against a table every time I want to make a UI)