How can I create a radial menu with common UI. I have searched everywhere and found nothing. I need it to work with mouse and gamepad like fortnite’s emote wheel and I want it to use enhanced input so that I can have deadzone on the gamepad joystick. I have created the actual widget but need to make the selecting segment work with gamepad and mouse. Does anyone have any ideas please?
Thank you!
Hi There,
Honestly I never do this before in Unreal atleast so it was a nice problem for me to solve also exercise, so thanks for it. I will try to make this with excuse like a tutorial simple but still a prototype here so it becomes something valuable for more devs I hope.
I made a UI Material custom node, I typed some constraints to AI and what it should use how it should appear and generated a HLSL graph. Suprisingly it worked 
It is code is here
const float DEG2RAD = 0.017453292519943295;
// Fixed apex (left middle) and facing (right)
float2 apex = float2(0.0, 0.5);
float2 d = float2(1.0, 0.0);
// UV vector from apex
float2 p = UV - apex;
float r = length(p);
// Avoid NaNs
float2 v = (r > 1e-6) ? (p / r) : d;
// ----- Angular mask (hard) -----
float halfA = (AngleDeg * 0.5) * DEG2RAD;
float aDot = dot(v, d);
float angMask = step(cos(halfA), aDot); // inside wedge
// ----- Radial mask (hard circle, radius = 1 UV unit) -----
float radMask = 1.0 - step(1.0, r); // r < 1
// ----- Combine -----
return angMask * radMask;
After this created one widget to act like a button. I won’t go into details of its usability for rotations hower with same approaches it can be extended.
Inside there is nothing for now, this is a custom button, thing you can manipulate common ui button or take a different approach as well, it has some events like OnStateChanged OnInteracted like every button should have. Important part at preconstruct I created a dynamic material of the slice material and assigned to necessary parts. Also kept reference to the material since we would like to have it dynamic so our system becomes somewhat extendable. Also can be a function where calculates whatever element shoulld orient relative to angle, like icons, texts, etc. It’s design dependent think its not a big deal.
Added some of my buttons to a parent Radial_WGT put a canvas and overlay for positioning and scaling etc
Get the children, cast them to its class and save them as array, then for each button i set its material angle, render transform angle, pivot and increment. These things can be more manual or you can automise the angle by dividing 360/button count ofcourse. Additionally binded into the clicked function onContstruct
Test and looks like this now we have a working radial menu, atleast with hower function. Not going deep into hitbox zones, mouse behaviours in center and general further usability aspects of interactions. However hover/hitbox zones can be changed and manually controlled with the next subject will go into these since cardinal calculations are more accurate then hower in radial.
After the logic parent widget looks like ok
In my pawn/character I set input mode UI+Game, If we set to UI only then we have to get inputs with native OnKeydowns or we can tunnel position of cardinals into widget however I took this approach for the sake of it so that we can access EnhancedInput inside the widget directly, additionally printed my left stick moves, its axis/cardinals.
Extended logic under widget with direct input, get axis, converted to radians to degrees and percent modulate to 360, with a select function from Left to Righ, Up to Down I have a 360 degree (counterclockwise) rotation. Then I get this degree and divided into my current angle delta which is 60 (we can automate this too) and this basically gives me index for 60 degrees 6 buttons 0-5.
I have a Deselect all which tell all buttons to go unselected state and a SetHover() which compares current index to incoming and if different sets button to hover state for incoming state + updates index.
I encountered a bug which when i go gamepad input mode in editor in windows makes my cursor go to a place near the middle of screen, which makes radial 1st button to hover. So I added a middle circle which is functionally prevents that also looks more nice as a radial menu.
Results.
Let me know if this is what you are looking for and it helps. Improvements and polish can be made easy depending on the design and aspects and interface behaviour desired.
Improvement points:
-CustomRadialButton with input angle calculating all it’s child orientations.
-CustomRadialButton, draw detection. This is more complex can be done so even in high density radials, edges are accurate. This can be done with widget geometry bp I assume but can be easier from C++
