Size Constraining UIPadding

Help and Feedback Art Design Support
, , ,
#1

Hi.

For the past few hours I’ve been trying to find the most effective way to create consistent x-axis padding based on y-axis padding using scale.

For example, by setting the left and right padding scale to 0.02 and setting the top and bottom padding scale to 0.01 would create even, consistent padding for those playing with 9:16 aspect ratio screen resolutions. However, when the aspect ratio is wildly different, such as an iPad mini (2:3), such scaling is inconsistent and ugly.

Here is an example of the problem.

As can be seen, the padding between the buttons and side of the screen warp and stretch when the resolution is shortened and enlarged.
That is exactly my issue. There is no in-built way to consistently pad ui objects throughout a game to enable ‘true cross-platform’. Therefor, I have coded my own solution.

local ScreenGui = script:FindFirstAncestorOfClass("ScreenGui")
local Scale = 0.01

ScreenGui:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
	script.Parent.PaddingLeft = UDim.new(Scale * (ScreenGui.AbsoluteSize.Y / ScreenGui.AbsoluteSize.X))
end)

This code calculates what the left & right padding should be based on the differential that is calculated by multiplying the intended y-axis scale (0.01) by the result of dividing the users absolute screen resolution.

Here are the results.

As can be seen, the padding between the buttons and side of the screen remain consistent, no matter how much the resolution aspect ratio is changed.
However, I feel dirty having to code a fix to a problem that I think could be solved by adding some sort of SizeConstraint property to UIPadding.

I understand that this topic should be posted in feature requests. But in-case there is a simpler solution, or in-built solution that i’ve passed on, I have decided to post it here to get some feedback before elevating my request.

So to close broadly, my question is, is there a way to have consistent x-axis to y-axis vice versa padding, that effectively fixes the aforementioned issue?

Thank-you.

3 Likes
#2

This solution hasn’t been tested, but from what I’m aware offset works best with padding.

local ScreenGui = script:FindFirstAncestorOfClass("ScreenGui")
local Sides = {{"Right", "Left"}, {"Top", "Bottom"}}

ScreenGui:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
	local sumPadding = ({x = 0, y = 0})
	for i = 1, #Sides[1] do
		sumPadding.x += (script.Parent["Padding" .. Sides[i]].Offset / script:FindFirstAncestorWhichIsA("UIElement").AbsoluteSize.X)
	end

	for i = 1, #Sides[2] do
		sumPadding.y += (script.Parent["Padding" .. Sides[i]].Offset / script:FindFirstAncestorWhichIsA("UIElement").AbsoluteSize.Y)
	end

	for i = 1, #Sides do
		for x = 1, #Sides[i] do
			script.Parent["Padding" .. Sides[i][x]] = math.sqrt(sumPadding.x * sumPadding.y)
		end
	end
end)