We all know how GTA v works, an amazing game, but, how the TAB inventory works? I was, like, trying to do something similar, but what would be more efficient, calculting if the mouse is on a frame? or use mouse.Enter and mouse.Leave?
A radial menu? Iâve made something like this before with a friend here and itâs actually a lot simpler than it looks.
The radial menu is really just a single, circular ImageLabel
(with ImageLabel
s on top for the images) and we split the circle into 6 even parts to make that âcircular trapezoidalâ shape (I donât know the actual name of that shape). Then we use that as a separate ImageLabel
and determine which of the 6 segments theyâre on and just draw that shape with a higher ZIndex.
To determine which of the segments they are on, I calculated the angle between the vectors (mouseX, mouseY) - RadialAbsolutePosition
and the vector (1, 0)
and rounded it to the nearest 60 (360/6) degrees.
How can you separate or âsplitâ the circle in 6 even parts?
360 degrees/6 segments = 60 degrees/segment
In an image editor, you can determine the 2 straight lines to draw from the origin to point (x1, y1)
, (x2, y2)
to make this shape (I wasnât using the straight line tool but you should):
To get the actual end point, itâs as simple as finding a point on the circumference of the circle. Assuming the radius from the center to the outer circle of the disk is R
, the points would just be center + R(cos(60 deg), -sin(60 deg))
and center + R(-cos(60 deg), -sin(60 deg))
.
Then youâd crop out everything but that black outlined shape.
Well, I guess I pass for now, I need to learn about cos, sin, tan, asin, acos, atanâŚ
You donât particularly need to learn them to do this (albeit it would be good to know so you can understand whatâs going on). Those 2 points are just getting the end points of the straight line you should draw from the center of the circle. You can just calculate it and create the line from the center to that point.
Here this should help:
(a, b)
is the origin of the disk (in an image editor this will probably be half the size of the image), R
is the radius from the center to the outer-circle, and r
is the radius from the center to the inner-circle. You can get the values you need by adjusting these parameters and looking at the relevant intersection points.
For example, if I want my radial menu to be 512x512
and the inner-circle to be 448x448
:
R = 512/2, r = 448/2, a = 512/2, b = 512/2
. Then create those circles in your favorite image editor, draw the outer black lines as seen in the desmos graph above, then crop everything outside of it (but keep the image size 512x512
!)