How would I make a grid made from UI frames scale with screen size via script?

Help and Feedback Scripting Support
#1

I’m trying to create an inventory system that uses a set dimension grid, in this case 12x4, and I want to have it so that it would scale. Grid is made from individual frames.

image

Script used to make the UI:

	local Resolution = {12,4} -- The amount of slots in the grid
	local SlotSize = 80 -- The size of the slots, in offset

   	local StorageHolderFrame = Instance.new("Frame")
	StorageHolderFrame.Name = "StorageHolderFrame"
	StorageHolderFrame.Size = UDim2.new(0,Resolution[1]*SlotSize,0,Resolution[2]*SlotSize)
	
	for Y=1,Resolution[2] do
		for X=1,Resolution[1] do
			local StorageSlot = Instance.new("Frame")
			StorageSlot.Name = X..","..Y
			StorageSlot.Size = UDim2.new(0,SlotSize,0,SlotSize)
			StorageSlot.AnchorPoint = Vector2.new(1,1)
			StorageSlot.Position = UDim2.new(0,X*SlotSize,0,Y*SlotSize)
			StorageSlot.Parent = StorageHolderFrame
			
		end
	end

How would I make this grid scale while still keeping the dimensions and keeping the slots square?

#2

Have a scale, and multiply the ratios relative to that.

local defaultWidth = 500
local defaultHeight = 200
local scale = 2
local newWidth = defaultWidth * scale
local newHieght = defaultHeight * scale

Pure gui wise, you can set the sizeConstraint to XX or YY and make a ratio accordingly.

#3

I’m not sure how I would get that to work with the frames inside of the frame holding the frames making the grid.

#4

To get the width could you just multiply the values?

local width = Resolution[1] * slotSize

And if you wanted to fit a certain number of slots into a certain place:

local wantedWidth = 500
local slotSize = wantedWidth / Resolution[1]

If you wanted the width to be 80% of the screen, you could do:

local desiredWidth = workspace.CurrentCamera.ViewportSize.X * 0.8
#5

I am confused to why you are using offset and not just Scale with a UIGridLayout instead.

#6

I don’t think there’s anything confusing about this. OP choose to use offset because that’s what their code asked for. Same with a UIGridLayout. The most it’d do is facilitate the positioning and size of elements and that’s it. Sizing would still have to be accounted for.

With Scale its a slippery slope because it works in whole percentages of its respective container to fill rather than offset with pixels. That means cells have to account for downward scaling (unless you’re using RelativeYY?).

#7

Grid Layout handles cell size and position…? I am not sure what you mean by you would still have to account for size. And yes I understand that OP asked for something but I don’t see the usefulness in writing code for something that scaling does already.

#8

I did say that UIGridLayout accounts for position and size. Don’t think you read my post, or rather you might be confused at what I said (which was explained in the last paragraph). I’m talking about scale’s behaviour with cells. Observe with CellSize {0.1, 0, 0.1, 0} and RelativeXY:

The longer the ScrollingFrame gets, the wider it stretches. Scale is handled in percentages of screen space and offset is handled in pixels. You have to account for the container space accordingly, hence accounting for size. Using scale raw produces inaccurate sizes. Changing a container’s size won’t affect the size of something using offset: it will for scale.

Note: ignore my comment on RelativeYY. SizeConstraint doesn’t work when UIGridLayout is applied.

#9

It is distorting because you are using CanvasSize it would look normal if the screen size changed, I am not ignoring your points I am just saying in OP’s use case I don’t see why he can’t use a GridLayout to save time. He has a static amount of Rows and Columns, and Hardcoding something like that would produce the same results if I am not mistaken. Yes, if you wanted it to have more rows and columns on a bigger display I would get hardcoding something, but for this use case that isn’t what is happening.

#10

I wanted a grid that is a specific size in frames (ex: 12 frames by 4 frames) and I could not figure out how to achieve this result using a GridLayout.

#11

Easy to do, with scale you’re basically dividing up the screen, so 0 is none of the screen and 1 is all of the screen, for your use case just make the cell size (0.083,0,0.25,0) which I got by dividing 100 by 12 for X and 100 by 4 for Y.

If you would like I could create an example place for you whenever I get home.

3 Likes
#12

what about padding is there any formula?