I have just started creating a radial menu for a project I am planing on releasing, and am having trouble detecting the click events for the UI as they overlap.
The issue is that the only areas that overlay are alpha 0, so aren’t seen anyway.
I have noticed several scripts and packages on the Asset Store for doing this, but wanted to see if I could figure this out with the help of the community first.
I need to only be able to click on the area of a UI element that has alpha, so isn’t completely transparent.
As I understand it, this is achieved on a pixel-by-pixel basis using raycasts, but have no idea how to do it.
without seeing what the ui looks like, best I can offer is:
bottom two functions can be used to work out the rect transform x/y position given a mouse coordinate, going to need to google on that but a lot of people don’t know they exist :).
What I’m trying to do is make sure that the transparent parts of a UI element don’t detect collisions such as Hover and Click events.
As the UI system works on a rect-based system, it assumes the UI element is rectangular, if it is circular for example though, the areas outside of the graphic but inside the rect (the transparent areas) can still be clicked on and registered as clicks, this is what I am trying to avoid doing.
The radial menu I have uses 5 individual buttons, all identical but rotated, making a 5-slice pie shape like this:
The only problem is the rect area of each button registers the entire object when clicked, not just the visible areas, so only the button on the very top gets registered, even when the cursor is pointed at another one.
There have been some threads about that toppic.
One good looking solution was a custom script that implements the ICanvasRaycastFilter interface and do checks in for a valid raycast in it.
In the linked post you find a script that will check the valid area via a 2D Collider. In your case a Polygon collider should to the trick.
