Scripting oddly shaped imagebuttons


I’m working on a shop right now and I am using trapezoid-ish shapes for the buttons, although I am not sure how I’m going to script them because as far as I know, Roblox doesn’t allow you to exclude the background from user input.


My first idea was to just take a bunch of buttons and size/rotate them to make an invisible button and use those instead, although I don’t really want to do that and think there is a more practical way of doing this. Any help would be appreciated, thanks!

1 Like

This may probably not be the answer, but it’s worth a shot. Is it possible to tweak the Zindex (or whatever it’s called) and use some clever imagery so that some of the picture is blocked by the background, basically cutting off its hitbox?

For those images, it’s rather easy to change the z Index, as none of them would be colliding on the same ZLevel. However, for the background you may need to get some more layers.

Unfortunately with custom made image buttons, there aren’t custom-made hitboxes for the user to click on. The only way to go about this are “hacky” methods (Changing the zindex and overlaying some invisible frames to match the shape of the UI like @Benified4Life has suggested, or you could even do what you suggested, which was making a couple buttons and resizing them to fit the shape of the image).

  1. Make a container encapsulating the 3 buttons, such as a big TextButton.
  2. Get the relative mouse position (x, y).
  3. Assume f(x) is the linear equation that divides “Ranks” from “Gamepasses”/“Items”, check that y < f(x) (remember the smaller y is the higher the cursor is), if so stop there, the user is clicking “Ranks”.
  4. Otherwise, assuming g(x) is the linear equation that divides “Gamepasses” from “Items”, check that y < g(x), if so the user is clicking “Gamepasses”, otherwise “Items”.
1 Like