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 /
avatar image
0
Question by greatwhiteshark17283 · Oct 28, 2016 at 11:58 PM · uiimagetransparencypngonmouseover

On Pointer Enter for semi-transparent UI?

I'm trying to make a map using UI that is divided into different sections that when hovered over, they display information about that area. I was using On Pointer Enter, but I ran into a problem. On Pointer Enter assumes that the shape of the object is a rectangle, when that wasn't the case with the map I was making. I had each section of the map as a png image displayed using UI and then put together like puzzle pieces on the map. None of the sections are perfectly rectangular. Is there a way to make it so that On Pointer Enter doesn't include when the mouse is hovering over the transparent part of the UI image? This is the map I was using.: alt text

northeast-map-with-borders.png (13.5 kB)
Comment
Add comment
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

2 Replies

· Add your reply
  • Sort: 
avatar image
1
Best Answer

Answer by Naphier · Oct 29, 2016 at 03:49 AM

I've put together an example for you. You'll need to create polygon triggers and Event Triggers on them. Turn off the RayCast target on their UI component and make sure that the canvas is in Camera Space. The Camera will need to have a Physics 2D Raycaster on it. I tend to like to do this with just sprites instead because unity will do a decent job of making the polygon on a sprite, but a crap job of it on a UI image. The setup for doing this on Sprites is about the same, you just don't turn off raycast target on the sprite because it's not there.

Cheers!

zipped unity package example


testpolyui.zip (16.4 kB)
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 greatwhiteshark17283 · Oct 29, 2016 at 04:42 PM 1
Share

Thank you for your help. Using sprites and a depth-only orthographic camera with your method seemed to work best.

avatar image
0

Answer by JoshuaMcKenzie · Oct 29, 2016 at 04:51 AM

The current input Module issues a simple raycast that hits the first object thats valid for its event check (Pointer Enter for example). This works great for 98% of all the applications regarding the event system. however your condition is more specialized

What I would do is write my own Input Module to override the default one that the EventSystem GameObject implements. Instead have it implement a RayCastAll sorted by (distance to camera for 3d, or by last child for canvas) which it will issue the event to the first object. that object can then validate if its truly applicable to them (pointer event compares the pointer position against the transparent pixels via script) if valid then it uses the event.

I'd recommend that Input module still pass the events to the other elements in the RaycastAll stack. Since the event is now flagged as used, those later listeners can choose to ignore the event call and not highlight. this way enables only the first valid element to take the event by default, but also allows you to optionally chain multiple elements to using the same event raycast if wanted.

Comment
Add comment · 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

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

87 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

Related Questions

Canvas with mask and transparent image 1 Answer

Transparent Images as UI 0 Answers

Saving UI Image to file with transparent background 3 Answers

How can I make nested UI Image elements the same transparency? 1 Answer

Get current sprite from filled Image PRESERVING ITS TRANSPARENCY 0 Answers


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