Weapon Wheel Similar to GTA V

[redbloxian1212 (Terror)]

Hello, you may seem familiar with the smooth weapon wheel in GTA V or GTA IV, the flow feels amazing to me and the simplicity adds up to it.

If not then here are a few screenshots of it,

Now, I want to recreate it for my mini project and I don’t know where to start. I have already made a simple gui but I was wondering how to make it responsive to mouse movements.

e.g
-Moving the mouse upwards will highlight/preview the weapon that is located above the wheel.
-Same goes to moving on different directions, different weapons on the wheel will be highlighted according to where the player moves the mouse.

Feel free to drop other links of topics that has already achieved this. However, I would appreciate it if you are able to give me suggestions on what to use in the Roblox API Reference with the link attatched to it as I think it is the best way for me to enhance my knowledge. If you have any questions/confusions please ping me in the comments/replies, I am currently new to devforums so I don’t know much about how things work.

Cheers,
Karl

[acecombat606]

Does look cool and practical, but you also need a game that features this weapon wheel (weapons menu to me at least).

[V_ladzec]

start by determining an angle the mouse is at from the center
https://gyazo.com/1623d3dfa589237901a20c3419584c86

[V_ladzec]

not necessary to have anything at all he could start by making the gui first

[acecombat606]

I understand, I shall leave it as it is.

[redbloxian1212 (Terror)]

This is exactly what I’m looking for! How am I able to do achieve this? Do you have api reference link which I can start with?

[redbloxian1212 (Terror)]

I just planned to print which weapon was equipped

[V_ladzec]

no api references just math
first start by getting relative position of the mouse to center of the screen

-- in pixels i.e. Vector2
local Camera = workspace.CurrentCamera
local Center = Camera.ViewportSize / 2
-- get mouse position using UserInputService:GetMouseLocation() - Vector2.new(0, TopbarSizeY)
-- no need to subtract topbar size Y if screengui ignoreGuiInset is set to true 
local RelativePosition = MousePosition - Center

relative mouse position to center means starting point of mouse position would be screen centre

lets normalise this vector as we only need the direction

local Direction = RelativePosition.Unit

now we can find dot product of the mouse direction and for example positive X axis i.e. Vector2.new(1, 0)

local XAxis = Vector2.new(1, 0)
local dotProduct = Direction:Dot(XAxis)

since both vectors are unit vectors our dot product value is cosine of the angle

lets get the angle by using arc cosine function

local Angle = math.acos(dotProduct)
-- Angle is in radians
-- convert to degrees if you would like to display current angle
print(math.deg(Angle))
-- equivalent to Angle * 180/pi

using this angle check whether the mouse is within given range to point out which ui is selected

i was typing from my phone lol

[redbloxian1212 (Terror)]

This is really amazing man, thank you very much!!!

[acecombat606]

This is going to be really good and very interesting.

[V_ladzec]

here is the file of the mouse angle demo that you have seen above
MouseAngleDemo.rbxl (60.6 KB)