Unexpected Scaling Behavior With ScrollingFrame

Help and Feedback Art Design Support
, , ,
#1

I am attempting to create an inventory UI for Arcade Island 3 that is automatically handled by a ScrollingFrame and UIGridLayout.

However, I am experiencing unintended visual behavior when more children are added to the ScrollingFrame as per the images below.

The intended behavior is to create a scrolling frame that automatically handles children being added and scales the size of items properly for all devices.

image
image1323×807 302 KB

image
image1325×798 321 KB

image
image217×704 6.31 KB

image
image569×837 25.1 KB

image
image571×841 32.6 KB

I’m sure there is a way to achieve this, but I just can’t seem to find it or identify what I am doing wrong - please advise.

Happy developing! :hidere:

#2

I have this issue a lot and eventually I end up finding an old script I used. Most common checks;

  • Make sure the children of the scrollframe are sized with offset.

  • Having a UIAspectRatioConstraint as a child of UIGridLayout.

  • Check if the children of the scroll frame are using the AutomaticSize property, similarly is the Scrollframe using the correct direction for the AutomaticCanvasSize.

I believe that’s all the checks there may be some I missed out but just go through these and make sure. If you do find a solution make sure to mark it as this post will be really useful for people with the same issue. I will try and find the script that I use and post it on here. Good luck and hopefully you find a fix.

This is the script I use, this could be really bad since I have been using for all my games for a while now, at least a year or so. It may be outdated or there could be a better way. Here it is:

-- Services
local RunService = game:FindService("RunService") or game:GetService("RunService")

-- Variables
local UIGridLayout = -- UIGridLayout
local ScrollingFrame = -- Scrolling Frame

-- Changed Connections
UIGridLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
	ScrollingFrame.CanvasSize = UDim2.new(0, UIGridLayout.AbsoluteContentSize.X , 0, UIGridLayout.AbsoluteContentSize.Y)
end)

-- Run Service
RunService.RenderStepped:Connect(function()
	-- Changes the cell size of the UIGrid to offset and makes it an almost perfect square
	UIGridLayout.CellSize = UDim2.new(0.15, 0, 0, UIGridLayout.AbsoluteCellSize.X)
	-- Changes the cell padding to offset to ensure it doesn't scale with the AbsoluteContentSize
	UIGridLayout.CellPadding = UDim2.new(0.005, 0, 0, 10)
end)
1 Like