Create Image Buttons with Irregular Selection Box?

Hello everyone I come with most likely an unsolvable problem, but I want to hear if there could possibly be any other solutions I haven’t tried yet. I’m creating a 2D territory war game, and in order for players to select their territory, the image has to be an image button. Furthermore, I want to darken the image button’s color whenever the player’s mouse is hovering over it.

The second part I can achieve. The first part is complicated. As the title says, the territories are not regular squares and rectangles (otherwise I could just use textbuttons), they are abstract and abnormal shapes. This is what one of the maps look like:

As you can see, there are a ton of irregular shapes, and since ImageButtons have rectangular selection boxes, I could click somewhere away from a territory, and still select it. Another problem is that some selection boxes could even overlap, meaning that I try and select one territory, but end up selecting another.

This post explains my problem a little better: Creating image buttons with irregular sizes

I’ve already looked at the post’s solution, however the images they used were still mostly rectangular and sharp, while a lot of my territories are rounded and circular. I’ve tried placing textbuttons over the images (with the images being ImageLabels), however that didn’t work as not all of the ImageButton could be covered without the textbutton touching another territory:

If anyone has any possible solutions, no matter how clunky or hacky they might be, I am totally open to trying to them. I’m also willing to take a different approach to this problem as long as I get the outcome shown in the first picture, where each territory is separate and selectable.

You can’t make UI with irregular selection, squares are the only way.

Instead of using UI with buttons, you could instead have a system which detects what part the mouse is hovering over, and when you click on a part, which lets you do the things you want done, darkening when hovering and clicking to select territory.

I’m assuming you already have it setup in a 3d space from the screenshot you’ve shown, so this would be easier to do. If its MeshParts, just make sure the collision type is PreciseConvexDecomposition.

3 Likes

I really think this will work! I have not tested this yet, but based on your reasoning and the plan I am developing in my head, I think this will work perfectly. The map is indeed set up in a 3D space, however how I have the camera situated will still make it look as if it’s 2D, even if the territories are 3D parts.

Thank you so much for providing this solution. Crazy how this never crossed my mind, and shows how two brains are better than one!

1 Like