Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Resolved Button only works when I click on Image

Discussion in 'UGUI & TextMesh Pro' started by compyler, Feb 25, 2024.

  1. compyler

    compyler

    Joined:
    Mar 30, 2020
    Posts:
    102
    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:


    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. flashframe

    flashframe

    Joined:
    Feb 10, 2015
    Posts:
    811
    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.
     
    compyler likes this.
  3. compyler

    compyler

    Joined:
    Mar 30, 2020
    Posts:
    102
    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).
     
    flashframe likes this.
  4. flashframe

    flashframe

    Joined:
    Feb 10, 2015
    Posts:
    811
    It's in the screenshot you posted above. It's an option on the Canvas Renderer component just above the image component
     
  5. compyler

    compyler

    Joined:
    Mar 30, 2020
    Posts:
    102
    Oh, you are right! How could I missed that lol. Thanks again:)