Have UI buttons on an arch

[NinjoOnline]

I am trying to figure out how I can create a UI layout like so

I can’t use UIListLayout and was thinking I need to do some sort of radial thing to get the arch on the buttons. It’d need to scale based on the amount of elements too. So if you had like 50, they can’t go off screen

My attempt yielded this monstrocity

local HUD = script.Parent

local CardContainer = HUD:WaitForChild("CardContainer")

local Cards = {}

for i = 1, 7 do
	local NewCard = script.Card:Clone()

	NewCard.Parent = CardContainer

	table.insert(Cards, NewCard)

	--task.wait(0.5)
end

local radius = 0.5
local angularSpacingDegrees = 45


local sweep = (#Cards - 1) * angularSpacingDegrees
local startingAngle = -90 - (sweep / 2)
for i, button in pairs(Cards) do
	local degree = startingAngle + ((i - 1) * angularSpacingDegrees)
	
	local pos = UDim2.new(
		0.5 + (radius * math.cos(math.rad(degree))), 0,
		0.5 + (radius * math.sin(math.rad(degree))), 0
	)

	button.Position = pos
end

[Krystaltinan (Krypt)]

Possibly just set the y position based on the card number, and then set rotation from the card number aswell.

[NinjoOnline]

How could I get an even rotation and position on them based on amount of cards

[Jaudr3y (Audrey)]

Divide the amount of pixels you want it to be by the amount of cards you want(x), then you can figure out the spacing, Then just clone it and set the spacing by x. For rotation, it’s the same on all these cards. Just check if the position is on one side, if it is then set it to - whatever.

[Krystaltinan (Krypt)]

Well get the spacing between each card, then space each card out. For example 10 cards, each card takes up 1/10 scale space or px/10 offset space. Once that’s done, loop through each card and offset it based on it’s index, with the middle being the highest.

[winterscode (winter)]

One way you can make an arch without ifs is getting the sin of (card number / 10) and multiply it by some number, then change the Y offset by that.

[NinjoOnline]

cc @Krystaltinan

Slightly unsure on the math of positioning them. I have a CardContainer that’s 0.8 on the X. Card inside aren’t being positioned centrally tho. CardContainer is the semi transparent black frame that’s selected

local ScreenSize = CardContainer.AbsoluteSize.X
local CardSize = CardContainer.AbsoluteSize.Y

while true do
	local TotalCards = #Cards
	
	for i = 1, TotalCards do
		local Card = CardContainer:FindFirstChild(i)
		
		Card.Position = UDim2.fromScale((i / TotalCards), 0.5)
		
		Card.ImageLabel.ZIndex = i
	end
	
	task.wait()
	
	break
end

And as cards get removed, the scaling becomes worse, and everything kinda moves to one side, like 4 cards

Everything should try staying central and as more cards get added, they get more bunched together

[Krystaltinan (Krypt)]

Not sure if this would work as I’m doing this on the fly, but:

local totalSpace = 0.8
local totalCards = 20
local spacing = totalSpace / totalCards -- 0.04

for count = 1, totalCards do
  local newPos = UDim2.fromScale((i - 1) * spacing, 0.5)
  print(newPos)
  -- 0.00, 0, 0.5, 0
  -- 0.04, 0, 0.5, 0
  -- 0.08, 0, 0.5, 0
  -- 0.12, 0, 0.5, 0
  -- 0.16, 0, 0.5, 0
  -- ...
end

?

[TWMGhostkiller]

Cooooooooooll project.

Aaaaaaaaawesome, bro!