Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
This question was closed Aug 29, 2018 at 12:48 PM by Liquicidize for the following reason:

The question is answered, right answer was accepted

avatar image
0
Question by Liquicidize · Aug 27, 2018 at 10:54 AM · canvasimagebuttons

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.

alt text 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. alt text

What else can I do?

Comment
Add comment · Show 4
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Piyush_Pandey · Aug 27, 2018 at 12:37 PM 2
Share

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.

avatar image Liquicidize Piyush_Pandey · Aug 27, 2018 at 01:54 PM 0
Share

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?

avatar image Piyush_Pandey Liquicidize · Aug 28, 2018 at 12:35 PM 2
Share

Yes. You can do that. Check this answer.

Show more comments

2 Replies

  • Sort: 
avatar image
1

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

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Piyush_Pandey · Aug 30, 2018 at 05:44 AM 1
Share

@Liquicidize I would definitely use this awesome method mentioned above when:-

  1. I am not making a lot of vertices due to it. {which i think won't be a problem for you }

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

avatar image
0

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.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Liquicidize · Aug 27, 2018 at 08:17 PM 0
Share

That's currently my solution for now. I would still like to have the whole shape of the image as the button, if possible.

Follow this Question

Answers Answers and Comments

100 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

[Solved]Why my Unity Button's Positions are different. 1 Answer

How to network canvas elements ?? 2 Answers

Canvas Scaler / math behind: Scale with Screen Size 3 Answers

How to change anchor? 1 Answer

How do i pop up a canvas, when a click some key from keyboard? 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges