Inventory ScrollingFrame

[nuttela_for1me]

So I am trying to use scrolling frame in combination with UiGridLayout, for a better visualization check this video: robloxapp-20210122-1831590.wmv (607.0 KB) , basically I am trying to make an inventory, but I cant get it right (canvas size cuts of all of the meat under). So I am wondering how u guys do it. Which UI elements are u using and what properties. Keep in mind I want to use scale if possible

[AvionicScript]

UIGrid layout has a property AbsoluteContentSize (something like that)
Just have a script that listens to when it changes :GetPropertyChangedSignal(property):Connect(function()

Then just set the ScrollingFrame CanvasSize to the AbsoluteContentSize property of the UIGridLayout.
Note: Sice AbsoluteContentSize only has offset sizes, you need to use UDim2.new/.formOffset and then get the values one by one (AbsoluteContentSize.X/Y)

[Neutron_Flow]

I’ve used this tutorial before and it worked out pretty well for me:

Quick Tutorial: How to make scrolling frames properly

Quick note: this is meant for people who have little to no UI expierence so they can improve their games design. This tutorial may no longer be needed because of the new AutoCanvasSize property - however this property has some issues as of now and I am not sure if it works in game or studio only. Note: it is recommended that you don’t use “scale” for sizing your frames but instead “offset”. Don’t you just hate it in games when you have an inventory GUI that is too small to fit all your items …

[nuttela_for1me]

Thanks for the reply! I understand this now but I am still confused about scale of my items (squere images), since canvas size gets updated, items take scale from that canvas and become huge and I actually didnt run that code, but that could lead to infinity I guess? How to handle squere frames that can be used for a computer and mobile at the same time?

[AvionicScript]

What I usually do is, let’s say I have an “example” frame that is used to create the new frames. If you have the frames inside the scrolling frame created by a script then there’s a chance that you do it like this.
Nevertheless, what I do is set the size of the “example” frame (in the case I mentioned) or all frames (if you have them all before you run the game), or any other combination - set the frame’s size to the absolute size of that same frame

frame.Size = UDim2.fromOffset(frame.AbsoluteSize.X, frame.AbsoluteSize.Y)
Then no matter how much you change the frame they’ll stay the same size, you can adapt this to the UIGridLayout, grab the frame that’s already there and then set the UIGridLayout cell size to that, and then clone the new frames.

Not sure if this makes sense but

1. Set frame size to the same frame’s absoluteSize OR set UIGRidLayout cell size to an “example” frame absoluteSize, upon starting the game
2. clone the frames

[nuttela_for1me]

I am not sure if I understood that correctly, lets say I have a frame, “example” that would be big 100, 100 in offset, as I understand your reply you actually just change offset to scale and if I were on mobile that wouldnt work properly

[jigwv]

Try this:

frame.CanvasSize = UDim2.new(0,0,0, frame.UIGridLayout.AbsoluteContentSize.Y )

you can add an offset if you like