How do I scale a fixed size GUI to fit within screen/resolution?

[brainfartimus]

Hi,

I currently have a GUI that is fixed to these default dimensions: 640 by 400.

I want to upscale and downscale this GUI the same way UIScale works based on the players current screen size / resolution. There should always be empty space at the top and at the bottom like so:

I don’t know how to achieve this other than scripting it, but I shouldn’t have to do that.

Issue: Here’s what happens to mobile players and I don’t want this:

Issue: And if they play sideways:

Issue: Even if I script it and use UIScale, this is what happens on narrow screens. (It’s close to what I want but it’s not centered):

Here is my GUI structure:

Canvas (Frame) settings:

I’d appreciate any help I can get! Thanks!

[gianmarco2712]

What you are using is Offset, it wont change according to screen size, use scale instead

With scale, the value 1 will cover up the whole axis, so just play with values between 1 and 0
if you dont want to play with values, I recommend you get this plugin.

[brainfartimus]

Please re-read my post. I need to retain a fixed screen size of 640 by 400. Using scale will stretch the GUI, not upscale and downscale it.

This is NOT what I want:

[Aqua_Turneur (Aqua)]

I’m not an expert in uis, but I think you can use a UISizeConstraint to do that

[7538SAV]

You can use UiAspectRatioConstraint to fix that problem.
Documentation Link

[brainfartimus]

I have tried using UIAspectRatioContraint and it does not work properly. I have to set it to 1.6 to even keep the original size and when I try it on different screen size it does not even take bordersize into account.

[7538SAV]

You could try using UiStoke and set its type to border?

Or make another frame a little larger and have the zoffset lower than the frame above it

[brainfartimus]

But using UIAspectRatioConstraint does not even work in the first place, my GUI is now a square and notice how it doesn’t stay properly inside the screen either:

[7538SAV]

The plugin that @gianmarco2712 sent has an aspect constraint button where it automatically finds and sets the correct ratio.

[gianmarco2712]

Its a square because it doesnt have the right aspect ratio, also it probably doesnt fill the screen right because the scale of the UI is 1 on the Y axis, this GUI has the size set to {.4, 0}, {.4, 0}

[brainfartimus]

I got the plugin and tried it out and while I got it to work visually the way I wanted it to, technically this is not a feasible solution in my specific case.

The reason why I need to use UIScale here is because this UI has thousands of inner Frames that also need to scale along with the canvas.

Issue The GUI here works as intended, but not the contents:

This is with UIScaling, but the original issue still remains :

Is there anything else you can think of that would make this work the same way without having me script it?

UIScaling also seems to stretch the border correctly.

[7538SAV]

Can you make the border with a separate frame? Just have it’s zoffset lower than the main frame?

It’s not the best but it could work for now.

[kaabzuag]

size aspect

[brainfartimus]

While this does visually solve the GUI issue that I originally asked, it does not scale child instances and the border stays the same size.

I’ve now made a script that does what I want:

local camera = workspace.CurrentCamera
local canvasWidth = script.Parent.Parent.Size.X.Offset

local function scale()
	local screenSize = camera.ViewportSize
	local smallest = screenSize.X

	if screenSize.Y < smallest then
		smallest = screenSize.Y
	end

	script.Parent.Scale = (smallest / canvasWidth) / 1.2
end

-- Setup for the first time:
scale()

camera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
	scale()
end)

I want to thank everyone for participating though and providing me answers that visually solved the problem to a certain degree. I appreciate it a lot.