Custom UI Aspect Ratio Breaking

Trying to Achieve:

An infinitely scalable shop gui, like how Pet Sim X and some other notable simulators handle their shops.

The Issue:

I have it so the frame is set to {0, 0, 0, 0} size when the button to open it is clicked, and then it will play an opening frame animation (tweens the size to {0.5, 0, 0.5, 0}). When opening for the first time, the code works completely fine, showing the result I need however, upon closing the frame, and then opening it again, the aspect ratio is very far off, causing the Y offset of the UIGridLayout to get smaller and smaller, until it hits 0 and then nothing in the shop is visible.

To add to this, when scaling the UI very fast, it also causes the aspect ratio to get smaller, and the above happen, causing the UI to disappear practically.

The code I found, which works well with offset and that I have implemented into my shop is:

local shopHolder = frame:WaitForChild("ShopHolder"):WaitForChild("Holder")
connections["Shop Size Connection"] = shopHolder:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
	local cellSize = shopHolder.Gamepasses.UIGridLayout.CellSize
	local aspectRatio = cellSize.X.Offset / cellSize.Y.Offset
	local size = shopHolder.Gamepasses.AbsoluteSize
	local x = size.X / 2 -- Columns of children
	local y = x / aspectRatio

	shopHolder.Gamepasses.UIGridLayout.CellSize = UDim2.new(0, x, 0, y)
end)

Any suggestions on how I could go about fixing this, because I’ve been looking at this for the past 2 hours trying to debug it and nothing’s come out of it, everything in my eyes should be working correctly.

1 Like

I’ve solved the issue. I need to put the aspect ratio outside of the function.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.