Original Title: “Why Does My UI Do The Thing,?”
This thing. I’ve used every single UI constraint that has graced this earth. Why are my UIs doing this? Everything is in scale, also.
Everything looks satisfactory when I add the Explorer window, but when I remove it, the UI starts doing what it does above.
Any advice?
Spoiler alert: He’s referring to the GUI in the viewport.
It’s likely because you’ve edited the GUI with the visual tools, which don’t play nice with very complex GUIs and the different aspect ratios a screen can have.
There are two properties you should edit in your GUI elements:
{0, 20}, {0.2, 50}){1, 0}, {0, 50})The two blocks of numbers in each property correspond to the X and Y coordinates. The first number of each block is the Scale, which is a number from 0 to 1 for how far across the screen, and the second number is the Offset, which is an offset in pixels.
Try going through those properties and experimenting.
You might try grouping your artistic GUIs into a frame and then using a UIAspectRatioConstraint on the frame.
Another thing to try is using pixel math and then using a script that manages a UIScale in relation to the ScreenGui’s AbsoluteSize.
Sorry to bore you with math problems. That’s just how much math is in GUI scaling.
Whoop, caught me red handed. I do use the visual tools to create a Gui.
Everything is positioned and sized via scale, because offset is static and doesn’t change size depending on the viewport size.
Wouldn’t using offset provide more of an issue?
Also, I tried using UIAspectRatioConstraint, but it didn’t like my GUI positions and everything became longer by (seemingly) random amounts, and it still shifted a bit when using a different viewport size than Studio’s. 
Yes it will cause issues. I encountered an issue with a game that I got hired to work on, and I had to redo the UI because all the UI would be out of place, and it was all because of me using offset rather than scale on the size, and position properties.
Offset isn’t bad if used with UIScale and a LocalScript, because it acts as an additional scale to pixel offsets. You will still need to use Scale for alignment however.
You probably need to script your GUI layout to get exactly what you want, such as to align a frame into the center while maintaining an aspect ratio. The builtin GUI layouts Roblox provides are okay, but don’t provide everything GUI designers need. One missing feature is automatically scaling ScrollingFrame CanvasSizes to their contents.
Here’s my UIScale script if you need it:
MinimumPixelHeight = 480
UIScale = script.Parent
ScreenGui = script.Parent.Parent
function Update()
UIScale.Scale = math.min(1, ScreenGui.AbsoluteSize.Y / MinimumPixelHeight)
end
Update()
ScreenGui:GetPropertyChangedSignal("AbsoluteSize"):Connect(Update)
That didn’t help, sorry.
UIScale affects all descendants, so it would only dilate everything by a factor of x, no?
Your answer is already here. Scale (as the name would suggest) scales the UI to the viewport. If you make the viewport less wide, your UI will be squished in the X direction. Likewise if you make it shorter, the UI will be squished in the Y direction.
UIAspectRatioConstraint keeps the X-to-Y ratio constant, and will resize the UI as necessary to keep the same aspect ratio within the defined bounds for the GuiObject it’s parented to.
Put all of your artistic elements into a single frame and apply the UIAspectRatioConstraint to it.
And to clarify, neither Offset nor Scale are inherently “bad” or “good”. They have their individual uses and there’s a reason both exist. Most of my UI make use of both of them to achieve a fully responsive user interface that is able to handle some weird screen sizes too.
The issue isn’t the GUIs changing size, the issue is the GUIs changing position. I do use a single frame (hence PhaseOne and PhaseTwo being the only two child frames of the ScreenGui) with a UIAspectRatioConstraint with a value of 1.778 (16:9), and the sizes maintain their ratio, but when squished or squashed, the positions offset greatly.
Maybe you’ve just uploaded the wrong video or shown us an outdated version of your UI? In the video the positioning is okay, the size is what causes it to go completely wrong, as you can see by all of the squishing and stretching of different objects. I can’t see any aspect ratio constraint there at all.
If you’ve edited the GUI since the original and are now having different problems, show a video or picture of those. My advice in the last post was based on the original post and video.