Positioning UI buttons on a curve

UI

Im struggeling to get 3 buttons positioned properly on a curve. They all have the same size and Anchor points, but there positions are like (0.0132, 0, 0.242, 0)

Because of these odd numbers, it causes them to look off. Anyone got suggestion or maths or something that could position these a bit better

1 Like

Are you consistent in using on both scale and offset values? See if you can find offset values that affects its position. How about the size? You want the icons to have approximately or exactly the same size as each other.

I believe you can now click and drag each GUI element in Roblox Studio to your desired position. You can also experiment with the numbers yourself, then you can also test how it would look across different devices with the emulator Roblox Studio have provided.

1 Like

You can use trigonometry to position your buttons - here’s how!

image

I’ve labelled the radii of the two circles in your UI; rA is the radius of the inner circle, and rB is the radius of the outer circle.

We want to find the radius of this circle, which goes nicely between those two:
image

Simple enough - we just take the average of the two radii, so r = (rA + rB) ÷ 2.
Assuming the radius of your inner circle is 0.1 and the radius of the outer circle is 0.15, r = 0.125 (in scale coordinates)

We can then use the parametric circle equations to get our coordinates for our buttons!

x = 0.125 cos(t)
y = 0.125 sin(t)

So what values of t to use? Depends how many menu items you want! I’ll assume you’re going to have 5 menu items - we’ll add 2 to that number and call it n.

Now, we know that when t = 360°, we’ve done a full turn. We have a quarter of a circle here, so we want to have values between t = 0 and t = 90°.

To find the coordinates of each menu item, we’ll use this knowledge to get the coordinates! For each menu item, 1 to 5, we’ll have a number m which represents this menu item (the first menu item is 1, second is 2, and so on).

We’ll now divide 90 by n and multiply by m, to get 90m/n for our value of t. So the coordinates of the first menu item are:

t = 90/7 °
x = 0.125 cos(90/7 °) = 0.12186…
y = 0.125 sin(90/7 °) = 0.02781… (edit: Roblox flips the Y axis, so you’ll want to make this number negative)

You can plug those coordinates in to your buttons’ Positions to make them line up perfectly! Something to note - when you do this, the buttons will start due east and go anticlockwise, so make sure you do it in reverse order:

image

27 Likes

You could use invisible frames at the center of your circle and rotate them. Make your buttons children of those frames, their position value should be based on the radius of your circle, and then you can rotate each of those parent frames at e.g. 0°, 30°, 60° and 90° to move the buttons around the edge of the circle. You’ll have to rotate the buttons back -30° etc. though.

2 Likes

Not sure what I’m doing wrong, but the first button isn’t right:

The bigger circle for mine is 0.5, smaller circle is 0.3, so r would be 0.4.

x = 0.4 cos(90/7)
= 0.3832091061
y = 0.4 sin(90/7)
= 0.11467685467 (made it negative in studio)


ButtonHolder takes up the corner of the screen

As the circle images I am using aren’t 1/4 circles, they are full circles, but with the 3/4 being off screen

And can I ask why it’s 90/7? I do plan of eventually having 5 buttons, but I’m not sure why you 5+2? Just seems like you picked 2 at random, is there a reason for it?

EDIT I think I know what the problem is. Since I’m using AspectRatios and what not, it means that the radius isn’t technically correct. The diameter of the circle between my 2 current circles would be 0.4 (as the larger circle is 0.5, smaller one is 0.3), and so the circles XY is 0.4, 0.4 in scale, but I’m using AspectRatioConstraints so it’s a perfect square, and so I think this might be affecting how the trig actually works

1 Like

I’m a fan of learning to use trig in general, but I think dr01d3k4 has the right idea here.

Assuming that we are talking about the image shown in post #1:

  • Create a frame that is centered at the bottom left corner of the image.
  • Place a button (without any rotation) directly above it between the inner & outer lines of the curve.
  • Parent the button to the frame you placed in the corner.
  • Rotate the corner frame to place the child button along the curve.
  • Once placed, rotate the child button (around it’s own center) to an orientation you are happy with.

Can probably capture absolute pos and rot of the child and do away with the corner frame, but I didn’t go look, so I’m kind of guessing there. Nice design. That’s going to look cool.

2 Likes

Not entirely sure what you mean here??

1 Like

You could try making the curve again, same exact size and everything, but instead, have buttons on them beforehand when you created it so you know where to put it. Might not be so exact but closer than guessing… I guess? :thinking:

Edit: Looking closer at the picture, something actually seems really off about the curve itself? Its raised up more I think?

1 Like

I’ve made a little example of what I was trying to say (I don’t think I explained it well).
CircleGuiExample.rbxm (2.2 KB)

1 Like