- Home /
The question is answered, right answer was accepted
Image with transparency cut-offs as button
I want to make these images as buttons but the 'border' crosses with each other (see picture). When I pressed the 'jump' button but within the run border, it still presses the run.
I've tried sprite editor. I don't really know how it works but what I did is I set a custom outline and physical size. Hasn't done anything. 
What else can I do?
Looks like your button image is having too much empty space. Trim it to exact size and your build size will shrink. Ins$$anonymous$$d of using the exact image for the button component, i would suggest you to to create an empty image object ButtonClickHolder as child of this run image and set it's transparency to zero. Now attach the button component to this ButtonClickHolder guy and you can set the size however you want without disturbing your icon size. This is a good practice for flexibility of the click size.
When you say trim, do you mean trim$$anonymous$$g the transparent pixels (in Photoshop) or resizing the entire image to where it fits? I guess the latter because of the build size?
I have done your suggestion and created ButtonClickHolders. It's the best solution so far, so thank you!
But with that, the clickable shape is still rectangular, and won't encompass the circle part of the image. Isn't there a way to have the exact shape of the image to be the button?
Yes. You can do that. Check this answer.
Answer by Casiell · Aug 29, 2018 at 10:29 AM
You can add a polygon collider 2D to UI Image and not use Unity button component, instead use OnMouseDown method to detect clicks
@Liquicidize I would definitely use this awesome method mentioned above when:-
I am not making a lot of vertices due to it. {which i think won't be a problem for you }
I don't need to use the flexibility of the Unity UI button.
If you have the above 2 points checked, i will recommend this method as it suits your requirement better.
Answer by 3kWikiGames · Aug 27, 2018 at 02:26 PM
If you don't need it, I would create two separate images, and make the run button separately activated from the half-circle object, so that its much smaller box to click on.
That's currently my solution for now. I would still like to have the whole shape of the image as the button, if possible.