Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
12 Jun 22 - 14 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
1
Question by Tomer-Barkan · Aug 27, 2015 at 05:24 PM · uiguiraycastimage

New UI - Ignore raycast where alpha is 0

So new UI, I have a frame for a panel, and I want the frame to block clicks to components behind it. Of course, the center of the frame is transparent, and contains the contents of the window. The clicks in the transparent area should not be blocked.

Seems obvious, but found no solution in unity. Canvas group component (for UI elements) and IsPointerOverGameObject() (for game objects) do not take alpha into account and will cause the entire inside of the frame to be blocked as well...

(Edit: See image below. Green area should pass clicks through to components below, while red area should block)

alt text

Ideas?

raycastblock.png (300.0 kB)
Comment
Add comment · Show 2
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 RafiXWPT · Aug 27, 2015 at 05:40 PM 0
Share

I think best option is to create 2 types of images, which can pass ray, and can't, then just palce them and everything will be okey.

avatar image _Gkxd · Aug 27, 2015 at 07:47 PM 0
Share

Splitting the image into four parts is always an option if everything else fails. It's probably the easiest way of doing things, but it's a bit annoying.

Perhaps you can put an invisible component above the UI that covers the green area. This component would intercept raycasts that would originally hit the transparent pixels of the red image and pass those raycasts to the area behind.

2 Replies

· Add your reply
  • Sort: 
avatar image
1

Answer by RafiXWPT · Aug 27, 2015 at 05:26 PM

Just for that "transparent" area use stand alone panel and add script where you will be checking alpha:

 if(yourobject.getComponent<CanvasGroup>().alpha == 0f)
      yourobject.getComponent<CanvasGroup>().blockRaycast = false;
 else
      yourobject.getComponent<CanvasGroup>().blockRaycast = true;

Please check if my spelling is correct cus its from memory ;)

Comment
Add comment · Show 4 · 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 Tomer-Barkan · Aug 27, 2015 at 05:34 PM 0
Share

That's not what I meant, the alpha of the canvas group is constant. I need the image to block clicks to elements behind it only in the areas where the image is not transparent, ins$$anonymous$$d of the entire area of the image.

avatar image RafiXWPT · Aug 27, 2015 at 05:36 PM 0
Share

If that image is one GameObject you can't do that.

avatar image Tomer-Barkan · Aug 27, 2015 at 05:40 PM 0
Share

Yes it is, and that is the question, seems like something other people might have tried to do as well...

avatar image RafiXWPT · Aug 27, 2015 at 05:41 PM 0
Share

I can't see any good UI method if you won't separate that onto different objects, you have to hardcode GetPixels, method and check alpha there.

avatar image
1

Answer by seguso · Apr 15, 2017 at 08:14 AM

Here is the solution: use RaycastAll to retrieve all the objects hit, then return the closest object such that the alpha value of the pixel is not 0.

 private static RaycastHit? RaycastWithTransparency(Ray ray)
 {

     var res = Physics.RaycastAll(ray, float.MaxValue).ToList().OrderBy(h => h.distance);


     foreach (var h in res)
     {
         var col = h.collider;


         Renderer rend = h.transform.GetComponent<Renderer>();
         Texture2D tex = rend.material.mainTexture as Texture2D;
         var xInTex = (int) (h.textureCoord.x*tex.width);
         var yInTex = (int) (h.textureCoord.y*tex.height);
         var pix = tex.GetPixel(xInTex, yInTex);

         if (pix.a > 0)
         {
             //Debug.Log("You hit: " + col.name + " position " + h.textureCoord.x + " , " + h.textureCoord.y);
             return h;
             
         }
     }
     return null;
 }
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

31 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

Related Questions

Unity 5.0 Trying to Change the Image - Source Image via Script 3 Answers

How can I add a distance cap to this script? 3 Answers

How can I make an image maintain it's aspect ratio in Unity UI? 2 Answers

Image overlay in center of screen 2 Answers

Detecting game object under UI 2 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