Button only works when I click on Image

Unity Engine
,
1

Hello,

I need a button whose click area is much bigger than the actualy image (to make it easier to hit).

So I have a large button (“DownButton”) and a smaller image (“Image”, the white triangle) as child:

736×144 14.3 KB

The image inside the button:

The button has no image, a button component and a script written by me (ButtonClickHandler). The script just overrides OnPointerDown, OnPointerUp etc

The image just has an image:

The problem: When I click on the image, the click works. But when I click anywhere on the big button area outside the image (the white triangle) the click is not registered.
Anyone knows why only the image is clickable and NOT the whole button area?

2

You need a “raycast target” to catch the click. You can see the Image component has a bool “Raycast Target” which determines if it intercepts mouse or touch input.

Not sure what version of Unity you are using, my version has settings for “Raycast Padding” on the Image component that lets you increase the size of the clickable area.

If you don’t have that option, you could either make your own component that implements Graphic.raycastTarget or just put an image component on the bigger button area and set its opacity to 0. If you tick “Cull Transparent Mesh” you should still be able to click the invisible image but avoid overdraw.

1 Like
3

Adding a transparent image to the button indeed solved the problem. Thank you very much!

I couldn’t find an option “Cull Transparent Mesh” but I guess its no big deal (I guess my Unity version 2019.4.40 is too old).

1 Like
4

It’s in the screenshot you posted above. It’s an option on the Canvas Renderer component just above the image component

5

Oh, you are right! How could I missed that lol. Thanks again:)