Is there a way to block raycasts?

Hello all,

I am playing around with the UI Toolkit on a game I am making and loving it so far. The issue I am running into is that the UI does not seem to block raycasts, so the scene items behind the UI still get the OnMouseEnter/OnMouseExit events. Is there a way to toggle this so certain items block raycasts in the new UI?

Thanks!

 

Will there be an official release eventually to do this?

 

Thank you for the replies, it definitely feels like a basic function of UI to be on even base level parity with old UI system, but for now I will just use a boolean in my scene to determine if the overlay is open and block all mouse enter/exit events.

Thanks!

 

I am interested in something like this. Can you suggest or point me in the right direction on how to do this? I have more than just menu's that I need to know if the mouse is over.

 

What I am asking for is the equivalent of EventSystem.current.IsPointerOverGameObject(). Not sure how the event system will block OnMouseEnter/OnMouseExit, or doing physics queries using the mouse. I would like to block my code from performing those types of operations when the mouse is over the UI.

 

I ended up with a solution similar to what uDamian mentioned above and it works well. I'm using the new input system and I was having an issue with the order of events when I had an action bound to left click, it would fire the action before UITK handled the event. The way around this was to bind to virtual mouse left click instead, then capture the event in UITK and when the event needed to propagate, fire off a fake virtual mouse action using the `UnityEngine.InputSystem.OnScreen.OnScreenControl` class. This way I was able to capture UI events correctly.

 

This works only within one UIDocument it seems.
When you have multiple UIDocuments layered over each other, uielements of one UIDocument don't block events for the UIDocument below.

 

I get the concept of this, but how exactly do I do this? I am making an AR app, where the user places the object on a plane using ARRaycast. Once they are happy with the placement, they should hit a 'done' button and turn off all the ARPlaneManager stuff. Without blocking, the object jumps to a cast under the button.

I might have to convert this to a uGUI button, but I really like the UI Tool Kit, and would like to use it for everything if possible.

 

OK, to answer my own question this is super-ugly but it works. Create a fullscreen Visual Element named 'screen', which contains the button. The button doesn't get the Pointer events.

Code (CSharp):

1.  
2. using System.Collections;
3. using System.Collections.Generic;
4. using UnityEngine;
5. using UnityEngine.UIElements;
6. using UnityEngine.XR.ARFoundation;
7.  
8. public class PlacementInitializer : MonoBehaviour
9. {
10.     public GameObject thingToPlace;
11.     public UIDocument placementControls;
12.  
13.     ARPlaneManager aRPlaneManager;
14.     PlacementController placement;
15.  
16.     void Start()
17.     {
18.         aRPlaneManager = FindObjectOfType<ARPlaneManager>();
19.         placement = FindObjectOfType<PlacementController>();
20.  
21.         var root = placementControls.rootVisualElement;
22.         root?.Q("done")?.RegisterCallback<ClickEvent>(ev => MakeTheThing());
23.  
24.         root?.Q("screen")?.RegisterCallback<PointerDownEvent>(ev => DownOverScreen());
25.  
26.         root?.Q("screen")?.RegisterCallback<PointerUpEvent>(ev => UpOverScreen());
27.     }
28.  
29.     void DownOverScreen()
30.     {
31.         if (placement)
32.             placement.isOverGameScreen = true;
33.  
34.         //Debug.Log("Is Over screen " + Time.time);
35.     }
36.  
37.     void UpOverScreen()
38.     {
39.         if (placement)
40.             placement.isOverGameScreen = false;
41.  
42.         //Debug.Log("Is Up Over screen " + Time.time);
43.     }
44.  
45.     void MakeTheThing()
46.     {
47.         if (placement)
48.             placement.isOverGameScreen = false;
49.  
50.         //Debug.Log("Is Over Button " + Time.time);
51.  
52.         Instantiate(thingToPlace, transform.position, transform.rotation);
53.  
54.         DisablePlanesAndManager();
55.         Destroy(this.gameObject);
56.     }
57.  
58.     void DisablePlanesAndManager()
59.     {
60.         if (!aRPlaneManager)
61.         {
62.             Debug.LogError("Got no ARPlane Manager!");
63.             return;
64.         }
65.  
66.         aRPlaneManager.enabled = false;
67.  
68.         foreach (ARPlane arp in aRPlaneManager.trackables)
69.         {
70.             arp.gameObject.SetActive(false);
71.         }
72.  
73.         ARRaycastManager aRRaycastManager = FindObjectOfType<ARRaycastManager>();
74.         if (aRRaycastManager)
75.             aRRaycastManager.enabled = false;
76.  
77.  
78.         if (placement)
79.             placement.enabled = false;
80.     }
81.  
82. }
83.  

 

I created something like this in our project, only with serveral uidocuments.
Unforunatelly in 2021.1.0b8 this does not work anymore because you can't klick through the invisible Fullscreen VisualElement anymore (the UI document below does not register any clicks because of that)

 

Running into this same problem. It would be nice for PC games to have a proper integrated solution, but I'm okay with rolling my own. However, I'm stuck with an issue of how to pass on mouse events which are blocked by transparent portions of images.

I'm using both vector graphics to mask images and images with transparency and in both cases the rectangle of the visual element is capturing all mouse events, but I need to be able to only capture those over non-transparent, non-masked pixels so I can pass on the others.

I'm not sure what the solution is but without one the UI Toolkit is basically unusable for PC games that use the mouse.

 

2022 and frankly, it's pathetic that the new input system doesn't handle this basic case. Almost every game has some UI elements that when interacted with should NOT propagate the events further into the 3D scene behind. The old solution with IsPointerOverGameObject was already clunky, but at least it worked. Offer nothing comparable in the new input system is a joke, sorry for being rude but it is.

I positively regret moving my project over to the new input system.

 

I was planing to jump into UIToolkit.
Now I'm starting to worry, can you please answer one question.
Can we check if cursor is over GUI elements ? (flag,event,anything )

 

According to https://docs.unity3d.com/Packages/c...l#handling-ambiguities-for-pointer-type-input the recommended ways are essentially "build your game so this problem doesn't appear" or "poll the InputSystem in Update()" (which defeats half of the point of using it, but hey) or "use EventSystem.
RaycastAll" (because the stupid Input System didn't already make TWO raycasts (graphics and physics), so let's make the exact same ones again, because why not?

Is it really so frigging difficult to store "cursor is currently over UI element" somewhere when you're doing graphics raycast every frame anyways?

 

You can use the EventSystem, they made a version that works with UI elements. So you get the "clunky" IsPointerOverGameObject() with UI Elements. It also makes it work with the new Input System. The link you posted actually states that you can use it. It's a solution that works without any extra ray casts.

 

Wrong.

The link specifically warns against using it, and so does an in-game warning in the console. And if you ignore the warning and do it anyways (I've tried that) you get false results.

If it is so easy, please fill in this example code:

Code (CSharp):

1. using UnityEngine.InputSystem;
2.  
3. public class Something : Monobehaviour {
4.  
5.         [SerializeField] InputActionReference LeftMouseClick;
6.  
7.         void OnEnable() {
8.             LeftMouseClick.action.performed += (InputAction.CallbackContext ctx) => {
9. if (SomeWayToDetermineThisClickAlsoHitSomeUIElement() == false) { HandleClick(); }
10. };
11.         }
12.  

 

Code (CSharp):

1. [SerializeField] InputActionReference LeftMouseClick;
2. private bool pointerOverUI = false;
3.  
4. void OnEnable()
5. {
6.     LeftMouseClick.action.performed += (InputAction.CallbackContext ctx) =>
7.     {
8.         if (pointerOverUI ==  false) { HandleClick(); }
9.     };
10. }
11.  
12. private void Update()
13. {
14.     pointerOverUI = EventSystem.current.IsPointerOverGameObject();
15. }
16.  

 

That was literally the 2nd thing I tried and it does not work. pointerOverUI is always true as long as the pointer is somewhere in the editor window.

Sorry if I'm angry, but switching to the new input system completely broke my game, my players are angry, basic things that shouldn't be an issue are broken (my friggin main menu which is just UI buttons stopped working!) and I regret doing it so much I'm considering switching everything to Unreal Engine just to get away from this broken crap with unfinished documentation.

 

You might have a VisualElement covering the entire canvas that is making it true, happened to me when I first started using the new Input System with UITK.

 

Negative on that. Thanks for trying to help. But I think there are deeper issues at work here and I'm trying to figure it out despite the incomplete documentation and nonsense API. Going to waste another two days on something I should've never started (if only the old input system would support runtime configuration, I surely would've stayed with it, everything worked flawlessly :-( )

 

Have you checked the debugger. Select your panel from the drop down and take a look, it might help.

 

I'll try. But it definitely isn't my canvas or any of my UI elements - I can go into play mode and simple set the whole thing to inactive and the pointerOverUI is STILL true. Only when I move the mouse out of the editor window does it go false.

I disabled EVERYTHING and then it goes false. That was the clue - it reacts to ALL gameobjects, not just UI elements.

Why? Because my main camera has a physics raycaster. If I disable that, I get the intended behaviour.

Except that I can't disable that because otherwise my 3D scene doesn't get pointer events (which obviously I need, it's an RTS style game). So yeah... on to more wasted time on things that should be a simple bool somewhere in the stupid InputSystem.

 

An hour of F***ing around, reading docs, stackoverflow and a lot of trial & error later, here is code that works for anyone else who has this problem:

This works for me because I put all my UI elements on their own layer for other reasons. I don't see a way of making this work without doing that, but maybe someone smarter than me (and less angry about how messy all this is) can figure that out:

Code (CSharp):

1.  
2.         [SerializeField] LayerMask UI_Layers;
3.  
4.         private bool IsPointerOverUI() {
5.             PointerEventData pointer = new PointerEventData(EventSystem.current);
6.             pointer.position = Mouse.current.position.ReadValue();
7.             List<RaycastResult> raycastResults = new List<RaycastResult>();
8.             EventSystem.current.RaycastAll(pointer, raycastResults);
9.          
10.             if (raycastResults.Count > 0) {
11.                 foreach(RaycastResult result in raycastResults) {
12.                     if ((UI_Layers & (1 << result.gameObject.layer)) != 0) {
13.                         return true;
14.                     }
15.                 }
16.             }
17.             return false;
18.         }

 

Yeah, I see that all your objects are also a part of the EventSystem. You can set the PhysicsRaycaster to only pick certain layers, but not the EventSystem its self, but then again you need the event system to be able to pick the units and such. Yeah that would require a custom solution like you have done, not sure if it is the best myself as IsPointerOverGameObject() does some caching so it knows what its over at the beginning of the frame. I'd stick with what you got or make your RTS work without the event system.

 

Hi,
thanks for posting the code!
I was wondering how do you assign layers for your UI elements? since UI elements in UI Toolkit are not even in the "classic" scene gameobject hierarchy.
It would be great if you could share your workflow!

 

I'm using classic UI objects, so they are part of the scene.

And after my experience with the Input System, I'm not touching anything from Unity outside the main branch with a 10 foot pole for a long time.

 

UI Elements dont have layers.
But you can use the following trick:
Since UI elements are rendered not in the 3D world but in screen space, just check if the object the raycast hit isValid and has distance = 0.

 

Thank you both for the reply!
What I want to do is to use raycast to detect which UI element I hit (I want to know if I hit button01, button02, panel01, etc.), without using the classic "button01.clicked += DoSomething()" way
This is what I have:
-- screen (VisualElement)
---- menu (VisualElement)
------- btn01 (Button)
------- btn02 (Button)


With the following code I can detect if my mouse is hovering on the UI. However result.gameObject.name is always "PanelSettings".
I was wondering if there is a way to know what specific UI element is being hit?

Code (CSharp):

1.  void Update()
2.     {
3.      
4.         PointerEventData pointer = new PointerEventData(EventSystem.current);
5.         pointer.position = Mouse.current.position.ReadValue();
6.         List<RaycastResult> raycastResults = new List<RaycastResult>();
7.  
8.         // this can hit ui with "picking mode" set to "position"
9.         EventSystem.current.RaycastAll(pointer, raycastResults);
10.        
11.         Debug.Log($"count: {raycastResults.Count}");
12.         if (raycastResults.Count > 0)
13.         {
14.             foreach (RaycastResult result in raycastResults)
15.             {
16.                 Debug.Log($"name: {result.gameObject.name}");
17.             }
18.         }      
19.     }

result of the above code:

 

I don't think that will work.

a) why do you want to do that anyway, since there are the ui events for that?
b) you could calculate the screenposition of the buttons
c) you could create world collider of the size of the buttons and on there position for you raycast.

 

hmm it's complicated to explain. Due to our design, we prefer not to use the classic ui events which relies on unity.
Thank you very much for the suggestions! I will try these workaround to see if we still want to avoid the classic way.

 

"Is there a way to block raycasts?"

Partially yes, you can add a visual element as blocker ui on the bottom of your ui that want to block. Then you can disable or enable the blocker ui.