Invisible square blocking UI

Video example: video example

I’ve been making a main menu for a game concept I have, as a proof of concept, and it was all going well until I made the Online screen. For some, weird reason, I can’t interact with anything in a specific area, as if there’s an invisible Image blocking that part.

The UI is made of main tabs (seen at the top and the right), which show different screens using a Widget Switcher in the middle. These work fine. I then decided that sub-menus of the contents of the main tabs would be widgets inside of the contents widgets. I originally thought that this may be the cause of the problem because of how many layers of widgets there are, however I then remade the screen and re-did the logic for it in the main menu screen (basically just moving the widget one up in the hierarchy), and this didn’t fix anything.

I’ve tried remaking the screen, putting it in the main menu widget, re-doing the logic for it, changed the Z Order of the components, etc., and I cannot get it to work properly.

If there’s any more information you may need, I’d be happy to provide it, as I’ve never seen this happen before and can’t find anyone else getting the same problem.

You can use the widget reflector while running the game. It should tell you exactly which widget is blocking the mouse and you can continue from there.

1 Like

You are a life saver. Turns out I was changing the render opacity of a component in my button widget which kept the collisions of it, so I swapped it with visibility to make it collapsed and boom, no more invisible square. Thank you so much.