Question Buttons registering clicks on transparent part of image

Hi!

I made a UI in Photoshop. I separated each element into different files. Each of these files is the same size as my whole UI (1920x1080) with a transparent background. This is so that after importing everything into Unity each object remains in the exact position it was in Photoshop.

However, now I am having a problem with my buttons. Unity is detecting clicks on the transparent part of the image when I only want it to detect clicks on the actual element. How can I solve this?

My buttons have a SpriteRenderer component as opposed to an Image. Does alphaHitTestMinimumThreshold (https://docs.unity3d.com/2018.1/Doc...ce/UI.Image-alphaHitTestMinimumThreshold.html) work for sprites also? Also, has alphaHitTestMinimumThreshold been deprecated? I can't find it in the current documentation.

What would be the best, easiest solution to keep each element in its proper place as I designed it in Photoshop while solving the clicking problem?

Thanks a lot!

 

It's still there: https://docs.unity3d.com/Packages/c...yEngine_UI_Image_alphaHitTestMinimumThreshold

Unity moved some packages out of the "main" scripting reference and into some package specific reference pages since Unity 2019. It should work for you. As per the documentation, make sure read/write is enabled on the sprite in the import settings for it to work properly.

 

Thank you so much! Since this is under "Image", do I also need to delete my SpriteRenderer component and replace it with an "Image" component or can I just use the "Sprite" field somehow?

 

Ah - ok, so be careful here.

Image and SpriteRenderer are two very different things.

The Image component is a UI element. It goes on a Canvas and needs a CanvasRenderer and a RectTransform. It's part of the UI.

A SpriteRenderer is a component that goes on an object that lives in the game world, with a normal Transform. It simply draws a 2d object in the 3d game world. It's what you would use to draw your character in a 2D platformer, for example.

Based on your description of this image as a UI, you almost definitely want to use an Image, not a SpriteRenderer. So yes, delete the SpriteRenderer object, and go to Create -> UI -> Image. Both components use a Sprite asset, which is just the imported version of your image from photoshop.

 

Thank you so very much!!

 

Sorry to bother you again but for some reason the click only registers for a threshold value of 0, so all transparent spaces are still registering the click. I have made sure to check "Read/Write Enabled" as shown in the attached picture. The documentation also says to disable atlassing for the sprite but I don't see this option. How do I fix this?

I figured it out! Or rather, I found a solution online https://forum.unity.com/threads/image-alphahittestminimumthreshold-not-working-correctly.465586/. For some reason the Sprite's Mesh Type needs to be changed from Tight to Full Rect.

It's working perfectly now! Thanks

 

oh well another old threads that helped me. It took me 4hrs to fix this and all I need to do is full rect

 

For anyone stumbling across this thread in the future, I would not recommend this method. Though in the short run it allows for easy positioning of UI elements, it makes the UI completely non-adjustable to different resolutions and pixel densities. Additionally, it inflates the size of the UI textures for no reason (though admittedly the empty space would be mitigated by compression).