So as of right now I am making an emote wheel for my game:
As you can see in this picture, there are two darker frames. That are near the edge’s of the frame.
I want to make more of those frames. And I want them to be perfectly rotated around the center(Where the image label is)
Anyway to achieve this? Or am I just going to have to line it up with my eyes?
I’m not really sure if this would work since I don’t do a lot of UI, but maybe you could set the anchor point of the frames to the center and rotate them.
Isnt the anchor point for the object itself? And not the object its in. There for I dont thing I can rotate around that
Math time!
Say we wanted to add 2 elements on each side. That’s a 60 degree angle between them.
We can get the absolute size of the frame, and divide it by two. In my case, 190.5 x 190.5, thus the relevant value is 95.25. The angle from the horizontal line - origin - is 30 degrees.
hyp = 95.25
sin(30) = y/hyp; cos(30) = x/hyp
x ~= 82
y ~= 48
(values are rounded because of the pixel unit)
Now we take a new element with an AnchorPoint of .5,.5 and apply the calculated offset (for now!).
In the above picture, for this given element, Y is 48 and X is hyp + 82. Same applies to the rest of the elements.
What bothers us are the offset values. We prefer scale, so it’s some conversion time as well.
offset/absolute size = relative offset
-- For the above element in the top right corner (in my case):
x = 174/190.5 ~= 0.913
y = 48/190.5 ~= 0.252
At this point, you can also apply the angle to the rotation property.
Hopefully you find this helpful.
PS: The same logic may be applied in code, so the script calculates positions automatically.
So lets say I was extremely dumb. And horrible at math.
Um could you explain this in a more easy way to understand?(Sorry I am really dumb lol)
I suppose this is as easy as it gets. Try to follow along the above post.
Find the absolute size of the frame. Since it’s a circle, x and y are identical. We’ll take half of that size.
Determine the angles. Let’s take a different example.
The horizontal line is actually at position (1, .5). The upper and lower one are at angles 45 and -45.
To get Y, we’ll multiply the circle radius (half of the frame) by sin(45), and to get X we’ll do the same but with cos(45). Finally, we’ll round and try those offset values to see if everything is correct. We may have to add and reduce by the radius to get appropriate positions. Upper one would be at (x + radius, y). The lower one would be at offset (x + radius, y + radious).
Edit. The left upper one would be at offset (absolutesize - radius - offset X, offset y).
Scale is a percentual value - between 0 and 1. Therefore, offset size divided by the diameter (absolute size).