Frame scaling problem

Info

Hi. While I was working on a project, I came across a problem which I was unable to solve. I am not great at words so I have created an explanation in paint.

Explanation

Calculating Width

--[[
Intention:
Evenly fit a supplied number of bars into a frame (AmountOfBars or AOB)
The Red bar width is unknown and needs to be calculated.

Method:
Firstly get the total width of gaps by doing UiListPaddingScale * (AOB - 1)
Secondly subtract it by 1 to get the total width of red bars
Finally divide the total width of red bars by AmountOfRedBars to get the calculated width that 1 bar should be
]]
RedBarWidth = (1 - UiListPaddingScale * (AmountOfBars - 1)) / AmountOfBars
RedBar.Size = UDim2.new(RedBarWidth, 0, 1, 0)

1 Like

This rather seems to have something to do with how you scale your red squares.

GuiObject.SizeConstraint allows you to scale the width and length of a GuiObject whilst respecting the length of either the length or width.

You need to use AspectRatio constraints, which will limit the red frames to an aspect ratio, such as 1:1 (square). From there, you will also need to adjust the white frame

Parent a UIAspectRatioConstraint into the containing frame.

https://developer.roblox.com/en-us/api-reference/class/UIAspectRatioConstraint