How to create image buttons with irregular sizes?

Help and Feedback Game Design Support
,
#1

I want to create a Gui where the user chooses lots within a map.
Each lot has irregular sizes, ie, they are not perfect rectangles.

image
image521×548 2.78 KB

I would like it to change the color of the individual lot when the user hovers the mouse over the image.
For instance, if the mouse is over the yellow lot, it must become grey.

Exactly like ImageButton does, but not with a square shape, just that irregular area to be highlighted.

How to do this?

Create Image Buttons with Irregular Selection Box?
#2

I created a workaround that is relatively complex, but it works:

  1. Create multiple buttons (with different sizes and rotations) to cover the entire area of a lot:

image

  1. Group all these buttons inside a folder correspondent of that lot:

image

  1. Create one transparent PNG image for each button, with the exact lot contour (and with the same original map size):

image

  1. Inside a RenderStep, detect the mouse position and the Gui Objects under mouse:
Mouse2.Position = UserInputService:GetMouseLocation() - GuiService:GetGuiInset()
local GuisAtPosition = PlayerGui:GetGuiObjectsAtPosition(Mouse2.Position.X, Mouse2.Position.Y)
  1. Test when the mouse is over any of the various buttons that are within the specific lot. If true, make that PNG image visible, otherwise, make the image invisible.

Result:
image image