UMG canvas blocks virtual joystick

Hello i am using UMG for my mobile project as well as the default virtual joystick that is provided. When i add my GameHUD class to the game, the joysticks can no longer receive input. I have tried playing with the visibility settings (i.e self hit test invisible) but only seemed to stop input to my on screen buttons. Do i need to re create the joysticks in umg or can i use an easier method to simply " click/touch through" the canvas and onto the virtual joysticks. I am doing this project in c++ fyi.

1 Like

this really sucks

OOkkk so this is very strange. i added the widget to the screen using
HUDWidget->AddToViewport();
when i change this to
HUDWidget->AddToViewport(-15);
it actually places the umg widget behind the touch interface …so i guess the default viewport layer for the default touch interface virtual joysticks is like -12 which is weird i personally think it should be 1 - 10.

1 Like

So almost one year later we still can’t use UMG buttons AND virtual joystick at the same time?

It is possible to have UMG widgets behind the virtual joystick. The UMG widget must be added to a negative Z order (such as -20) when added to the Viewport. This will put the UMG widget behind the virtual joystick. The caveat to this is that UMG buttons behind the virtual joystick won’t receive input. The trick I used to get this to work was to split my UI into multiple widgets. I then created and added the widgets to the Viewport separately, manually setting the Z order as I added the widgets.

The ordering is:

  • UMG buttons at Z order 0
  • Virtual Joystick at Z order negative something ( Haoris mentioned in this thread the joysticks at at -12; I haven’t confirmed this though)
  • UMG background widget at Z order of -20

This let me have a background widget behind a virtual joystick and UMG buttons, and the UMG buttons are still able to receive input.

Note: I did this in Unreal 4.18.3, binary version

I’ve discovered a solve by setting all aspects of the widget to “Self Hit Test Invisible” and then specifically only setting the UMG widget buttons you intend to be clicked back to “Visible”. This will prevent non-interactive portions of your widget (like vertical boxes and canvas areas) from interfering with your virtual joystick.

Using this method, I’ve been setting the Z order of my widget to 0 with no issues with functionality of either the joystick or widget button, even if the button is hanging over the joystick a little bit.

Also, to head off the related problem of “Hide All Widgets” permanently destroying your virtual joystick, always make sure to “Activate Touch Interface” and set class to blank, then “Hide All Widgets”, then “Activate Touch Interface” and set class to your virtual joystick.

Hope both these tips help you and others. Controlling a combined usage of UMG widget buttons and virtual joysticks seems to pain a lot of people, including me for the past several months, but this solution has worked really well for me since I found it a few hours ago.

1 Like

Sorry, just noticed you mentioned yours was C++. My solve is in blueprints, not sure how conceptually transferable it is.

Thank you for posting this solution! This definitely sounds like a better solution than splitting up the UI.

Don’t put any widget component on stick which is set to visible. I’m actually using a "fake widget on the joystick which is acting like it is the controller and all it’s components are Not- Hit Testable( cosmetic) no problem there . My problem with buttons solved when I use button trigger as pressed, NOT clicked.