Tapping through virtual joystick canvas

How can we pick meshes or tap UI elements when using the virtual joystick? Its canvas covers the whole screen and consumes tap events. I tried resizing the joystick canvas, but that screws up its position calculations.

Cc @RaananW and I’ll also take a look at this when possible :slight_smile:

Hi! Apologies for the delay. There is documentation showing how to do that already :smiley: Virtual Joysticks | Babylon.js Documentation (babylonjs.com). From it:
“Note: This will create an overlay canvas on top of the canvas for the scene. This will disable interaction with the Babylon GUI elements and scene pointer events. To avoid this the overlay joystick canvas’s z index can be modified to toggle between scene interaction and joysticks input as seen in the playground above. Another option would be to create a custom joystick using the Babylon GUI as described below.”

Hi @carolhmj,

The demo on the docs page uses a HTML button… I’m using the Babylon GUI.

Maybe I can make a custom joystick from DOM elements, instead of the canvas-based one.

Then in that case the picking should work as expected. Can you share your implementation so we can see better what’s going on?

Sorry, I don’t mean picking with rays… I meant tapping on Babylon UI elements.

There’s a menu button in the corner of the screen, but it’s not clickable when the virtual joystick is shown. My solution was to change it to an HTML button, with a higher z-order. When the menu button is clicked, I hide the joystick canvas. It works, but it would be nice to resize the joystick canvas so it doesn’t have to take up the whole screen.

Oooh, I see what you mean now :confused: yeah, currently there is no way to resize the JoystickCanvas.

@alekop, we are open to PR if you want to add the support for this ?

Yeah, I should… I’ll put it on my board.

2 Likes