I’m trying to implement a circular menu in UMG. It’s done mostly procedurally, but I’m hitting a hard wall.
There are 3 pieces in that menu.
I want to have a Mouse Over event (to change it’s appearance) and a Mouse Click (to issue a game command). The problem is, I can’t find a way to detect
Right now I have a Widget (Circular Menu) that contains a Canvas Panel (as usual for every widgets out there). In this panel, I have an Overlay component where I add children widgets to compose my menu.
Each child widget (Circle Slice) is added via a function. The children added are widgets with a single component, a border, where I set the material.
I use this secondary widget because I couldn’t find a way to directly create and add an Image/Border component to the overlay component.
So, is there a way to detect the mouse over and clicks on each of the circle slices ? I’m trying for hours, but I can’t find a way to make this happens.
Yes, you can use the “Is Hovered” node to figure out on Tick if a widget is being moused over. You can override the Mouse Down function (by clicking “override+” next to “Add Function” in the left pane and choosing “OnMouseDown”) and add your custom click logic there.
Hello,
If your widgets are independant ones you can use “on mouse enter” to activate your over and “on mouse leave” to deactivate. If your click doesn’t work for some reason, you can use as work around a “ismouse button down” selecting “left mouse button” then do an action based on an integer : 0 nothing 1 (value set when you enter slice 1) do event for 1, 2 value set when you enter slice 2) do event for 2 … but it would need to know why your click doesn’t work and it needs more to be able to help.
Thanks for the input! Unfortunately, like I said, that doesn’t work.
Perhaps I wasn’t clear enough. To be able to do that setup, all the images are stacked on top of each other.
So I have 3 slice images (border components) stacked on top of each other. In that screenshot, 3 images (border components) are stacked on top of each other.
Ok, i had not realize that you had stack them, my bad. You can’t detect a widget under another one except if the first one is on “self hit test invisible”, you need to create a radial menu. I don’t know how it is done with separate elements which would be the right way but as workaround, an idea on the fly : With a single image and a mouse position. On enter : set a bool active “true” on leave : set it false. On tick : if bool active “true” get mouse position, then you need some maths to define the areas. area 1 click 1 area 2 click 2 area 3 click 3 and all others results : no effect. But as i said this maybe a lot of work for nothing if there is a way to add separate widgets in their specific form.
Edit : As watching for pie menus, i see that they do a visual circle but set only small widgets in each part to have it working, a quick work around too with no tick and maths involved.
Thank you Fen! While I did not implement that bool for mouse state (apparently, it’s not necessary, UE4 already handles that in the background), I was able to override the Mouse Move event and extract the mouse coordinates from there.
Apparently, a limitation to the system, is that I can’t check if I didn’t hit an UI element while taking consideration of all the alphas of all layers (I couldn’t find a way even to do a single layer anyway - I think this is the limitation…), so, it doesn’t matter if it’s a circular menu, you can click in a square area…
Still, it’s great to see it working!
Thank you very much for your help and ideas!
Yes, that’s currently a limitation of the hit testing system. We don’t permit arbitrary polygonal geometry or texture masks to function as a hit test mask, the hit test grid only understands boxes. The workaround is to unify all your hit testing math in a single control. When hit it would internally determine if it chooses to style or handle any mouse related events based on its own rules for hit testing.
Hey I’m having a problem where I’m putting multiple sliders into an overlay but only the first slider is receiving mouse down events. Something to note also is that I made a new USlider widget where it will only allow you to change the slider value if you use the slider handle. But it is an almost one to one copy of the USlider just with an additional check in its OnMouseDown() event. But is there a way to pass a mouse down event through each widget in an overlay? Also something to note is that all these sliders are stacked on top of each other.
I ended up catching the mouse down event on the first slider in the overlay, then if the mouse cursor doesn’t hit the handle of that slider I go through all other sliders to see if the mouse event could hit their handles. If one does, I move it to the top of the overlay (just by removing it then adding it again, doesn’t seem like you have any other type of control over overlay children), then all the mouse events go to the top slider. So yeah, that’s the only way I could figure out how to do this.
