Button spacing problem

Help and Feedback Scripting Support
#1

hello, I have been experimenting with this code to be able to separate the buttons horizontally for an emotes system I am making; however, I am having a problem aligning the first button on the left correctly, resulting in an unwanted separation.

local numChild = #children
local spacing = 10
local containerWidth = hotbarFrame.AbsoluteSize.X
local totalCellsWidth = 0

for _, cell in ipairs(children) do
	totalCellsWidth = totalCellsWidth + cell.AbsoluteSize.X
end

local offsetX = (containerWidth - totalCellsWidth - numChild * spacing) / 2
local halfCellWidth = .5 * totalCellsWidth / numChild

for _, cell in ipairs(children) do
	local cellWidth = cell.AbsoluteSize.X
	local cellResult = offsetX + halfCellWidth

	cell.Position = UDim2.new(0, cellResult, .5, 0)
	offsetX += cellWidth + spacing
	task.wait(.01)
end

Current results:

image
image797Ă—202 58 KB

Why not a UIListLayout?
using a spring, i can do cool stuff like this

If anyone need more information to help with this, i will provide it.

1 Like
#2

Why don’t you just use a UIGridLayout…?

1 Like
#3

as I said, it makes it easier for me to make dynamic effects for the hotbar.

#4

My bad, I didn’t see that line the first time. Your code looks fine so maybe the problem is with the positioning of hotbarFrame? It could be miss-aligned.

#5

no problem, it has also happened to me. Good idea, this may be one of the causes, currently the frame properties are as follows:

local emotes = Instance.new("Frame")
emotes.Name = "Emotes"
emotes.AnchorPoint = Vector2.new(0.5, 0.5)
emotes.BackgroundTransparency = 1
emotes.Position = UDim2.fromScale(0.5, 0.94)
emotes.Size = UDim2.fromScale(0.485, 0.0881)
emotes.Parent = mainGui

The properties of a button are as follows

local template = Instance.new("ImageButton")
template.Name = emoteName or "NaN"
template.AnchorPoint = Vector2.new(0.5, 0.5)
template.BackgroundColor3 = Color3.fromRGB(25, 25, 25)
template.BackgroundTransparency = 0.25
template.BorderSizePixel = 0
template.Position = UDim2.fromScale(0.0706, 0.406)
template.Size = if isPhone then UDim2.fromScale(.176, 1.749) else UDim2.fromScale(0.146, 1.18)

Within each button there is a list of instances but I doubt very much that this is the cause.

image

the properties of the button on the left are as follows

local leftButton = Instance.new("ImageButton")
leftButton.Name = "0"
leftButton.Image = "rbxassetid://12974423379"
leftButton.AnchorPoint = Vector2.new(0.5, 0.5)
leftButton.BackgroundColor3 = Color3.fromRGB(25, 25, 25)
leftButton.BackgroundTransparency = 0.25
leftButton.BorderSizePixel = 0
leftButton.Size = UDim2.fromScale(0.0898, 0.725)

local uICorner = Instance.new("UICorner")
uICorner.CornerRadius = UDim.new(0.1, 0)
uICorner.Parent = leftButton

local LeftuIAspectRatioConstraint = Instance.new("UIAspectRatioConstraint")
LeftuIAspectRatioConstraint.AspectRatio = 0.988
LeftuIAspectRatioConstraint.Parent = leftButton

to get my function to update in the order I want the buttons, I insert the buttons manually in the table
image

for _, obj in ipairs(hotbarFrame:GetChildren()) do
	result[#result + 1] = obj
end

rightButton.Parent = hotbarFrame
leftButton.Parent = hotbarFrame

table.insert(result, 1, leftButton)
result[#result + 1] = rightButton

this information could be useful to identify the problem, I will test different sizes for the hotbar.

#6 
emotes.Size = UDim2.fromScale(0.200, 0.0881)

image

emotes.Size = UDim2.fromScale(0.300, 0.0881)

image

emotes.Size = UDim2.fromScale(0.400, 0.0881)

image

apparently it is not the size of the hotbar, neither is the position because the hotbar has an open and close function.

#7

Could you show the hierachy of the whole emote ui

#8

Sure, here it is

image

#9

Whats with the NaN for the the buttons names? Is that too see which one is currently selected? Also did you write that code yourself?

#10

I only put NaN for testing purposes; I’ve been doing the code since yesterday, and I don’t have a list of emotes yet to create the buttons in the list. Yes, this code was made by me; it’s a slightly more updated version of this post.

#11

Well that post successfully had it working, what exactly are you doing differently here?
image

#12

I use the same logic, here are the differences between the previous code and this one and why.

since I don’t use any property on the Y axis of the hotbar, I removed any variable that has to do with the Y axis

  • containerHeight
  • cellHeight
  • centerYOffset

Are the variables that I eliminated because they were of no use.

I also redirected the first loop to only one line of code, giving me the same results

for _, cell in ipairs(HotbarFrame:GetChildren()) do
	local cellWidth = cell.AbsoluteSize.X
	local cellHeight = cell.AbsoluteSize.Y
	totalCellsWidth = totalCellsWidth + cellWidth
	maxCellHeight = math.max(maxCellHeight, cellHeight)
end

also, the maxCellHeight variable would not be used because it was for Y axis.

for _, cell in ipairs(children) do
	totalCellsWidth = totalCellsWidth + cell.AbsoluteSize.X
end

and the rest of the code remains almost the same as the original code

#13

Maybe try adding extra spacing to the first element but then the first will have the default, this way it’ll stop the 1st element from looking like it’s right against that arrow ui

Try this

local numChild = #children
local spacing = 10
local extraSpacingForFirst = 1
local containerWidth = hotbarFrame.AbsoluteSize.X
local totalCellsWidth = 0

for _, cell in ipairs(children) do
    totalCellsWidth = totalCellsWidth + cell.AbsoluteSize.X
end

local offsetX = (containerWidth - totalCellsWidth - (numChild - 1) * spacing - extraSpacingForFirst) / 2
local halfCellWidth = .5 * totalCellsWidth / numChild

for _, cell in ipairs(children) do
    local cellWidth = cell.AbsoluteSize.X
    local cellResult = offsetX + halfCellWidth

    cell.Position = UDim2.new(0, cellResult, .5, 0)
    offsetX += cellWidth + spacing

    extraSpacingForFirst = 0
    task.wait(.01)
end
#14

gives practically the same results

these are the different test i maded with the extraSpacingForFirst variable

with 1

image
image855Ă—169 54.6 KB

with 10

image
image734Ă—150 37.5 KB

with 30

image
image780Ă—194 54.1 KB

with 100

image
image710Ă—249 59 KB

#15

Are the arrow buttons in another UI, cause they aren’t in the heirachy you sent earlier

#16

The arrows are the ImageButtons called 1 and 0

#17

I will try putting the arrows on a different frame

#18

Are you taking into a account the arrows when you are doing your calculations for the hotbar?

Why dont you have a frame that has the arrows in them and then have that anchor point at the center and then do your calculations for the hotbar inside of that frame?

#19

Are you taking into a account the arrows when you are doing your calculations for the hotbar?

Yes.

Why dont you have a frame that has the arrows in them and then have that anchor point at the center and then do your calculations for the hotbar inside of that frame?

Yes, the properties of the buttons and arrows are in a post above

#20

Position seems correct here. Maybe the problem is with the arrows buttons? I can’t find where u edited the position of them (Ig the “leftButton” is one of them but the position of it isn’t edited so yea)