Hello, I was just wondering, How would one make a circular menu GUI, Much like the ones in CBRO, BRM5, and as well as the default emote system Roblox implemented a while back.
Example of what I’m trying to achieve;
All of which require a mouse to hover and click on them - It’s not a circular GUI where you have to press a button or such to switch between them.
Some ideas I’ve gotten was that they’d use some art design software to do this (which is most likely) but the thing is the image buttons always overlap each other rendering it difficult to click. Is there some property I could use to change the overlapping and/or crop something?
Solutions I’ve tried so far? Honestly tried to make it fill up the whole image button but it’s very scuffed.
Can’t really figure out how they did it.
I’ve tried searching it up on the web & dev forum and it always comes up with a solution of “use UI Corner to make a frame circular.” - I already know how to do that and it doesn’t help at all with what I’m trying to achieve.
TL;DR Trying to make a circular menu for educational purposes for future projects. Not sure how they did it, Image buttons always overlap each other rendering it difficult to press each individual one.
I think I get it. In your art design software, try designing the whole shape, and use transparent Image/Text buttons to achieve the desirable result. Hope I helped! Make sure you import the image as an ImageLabel!
Where if you we’re to click for example the image button on the left, It would still consider you as pressing the one on the bottom (I know there is something called zindex, Although I would like to make it so it wasn’t overlapping each other at all in terms of clicking it entirely.)
You are absolutely right, that’s why I’d argue that a clicked event for a UI like this isn’t ideal. I wouldn’t rely on the Button.MouseButton1Click event when making radial UIs
I would use UserInputService or ContextActionService and essentially make your own clicked event for it where depending on where the Users mouse position (or for controller the thumbstick vector) is and then execute the function based on that result. You can tie this into UI effects as well and create a really quality UI compared to what you could make with a clicked event.
Ive used ContextActionService & UserInputService before, although it just makes it a tiny bit harder to make work. Thank you so much for the article and the suggestion!
It could work although not very efficient + It wouldn’t cover the area, Since it’s a box. Meanwhile the image/circular GUI I’m trying to achieve is a complex shape in which doesn’t really correspond with it.
It was a good suggestion but not very efficient sorry to say. As Stratiz said in his thing, Basically rotating the image 90 degrees on each angle then using UserInputService of ContextActionService would work best I believe as said in the article of making a radial gui.
TL;DR Good idea but not really what I was looking for
