Generating UIs radially

Hiya, I’m currently attempting to create a radial UI generator for an upcoming game with a similar interaction system to Bloxburg. The initial radial generation is really straight forward and simple, just by using a little bit of code:

-- Incredibly simplified, and ugly version of the script before I start making the real system.

local totalAmountOfItems = 3 -- Total amount of UIs to be created
local amplitude = 120 -- Extra modifier from the middle point

for myItemNumber = 1,totalAmountOfItems do
	local angle = myItemNumber * 2 * math.pi / totalAmountOfItems
	local positionOnCircle = UDim2.new(0.5, math.sin(angle) * amplitude, 0.5, math.cos(angle) * amplitude)

	local key = game.ReplicatedStorage.Content.UI.Interaction.InteractClick:Clone()
	key.Parent = game.StarterGui.Interaction
	key.Position = positionOnCircle
end
As you can probably expect, the results were actually perfect!

But it’s not exactly how I want this to workout, assuming that each UI isn’t actually just a perfectly square frame I’ll need to allow support for rectangular UIs. As seen below, it may look really quite nice replacing the normal frames for rectangles but the closer eyed people probably will notice the fact that this isn’t perfect! It’s especially noticeable in the right picture with many more.

The problem initially stems from the fact that because we’re using the 0.5,0.5 anchor points within these frames it doesn’t look visually correct to the user but is in fact correct. The way I plan to solve this problem, is by setting each frame to the correct anchor point to each frame like this:

Anywho, my main problem is the fact that I have no idea how I’m going to be able to figure out which frame needs what anchor point especially as it gets larger with more frames. Any ideas, and suggestions would be so incredibly helpful! Also, sure I guess if it comes to it I can be really lame and instead of generating each frame I could make presets… BUT THAT’S TOTALLY LAME! We here at Already Studios go big or go home. :sunglasses:

Seems like the solution that would look the best would be if the vertical distance between each “layer” of buttons is the same. Simplest solution is to use a vertical ListLayout for the vertical placement and math.sin(x) for the horizontal separation.

I’m afraid I’m not entirely sure what you’re talking about, could you rephrase this better.

I’m saying that what makes it look weird is that these gaps are different sizes:

image

Compared to a different game with similar UI

image

vertical gaps are the same

Tried modifying your image

still looks kinda weird tbh. Think it might be because of the single buttons at the very top and bottom. Here’s one where it’s rotated 30 degs

image

I think it’s a lot better.

1 Like