VirtualJoysticksCamera issues

[max123]

Hi,

I have a few issues with VirtualJoysticksCamera:

1. Z-index: It can't be reliably used in a user's UI as it draws a 2d canvas which will ether cover html elements or will get buried under.
2. When Babylon scene gets destroyed, the canvas created by VirtualJoystick class remains attached to html (camera.detachControl() has no effect).
3. I couldn't get the UI of VirtualJoystick (the circles) to show.

I'd gladly use Universal Camera for all scenarios, but it doesn't provide adequate controls for touch devices (you can't look up and down). 

 

Has anyone got a chance to successfully implement FPS-like cameras (move-forward/back, move-sideways, look-up, look-down, rotate) on a touch device? 

[GameMonetize]

ping @davrous

[max123]

Please ignore point 2 (camera.detachControl) - my bad, I was referencing the wrong canvas.

Also, is there a way to control rotation/movement speed with VirtualJoysticksCamera? 

[davrous]

I've fixed some issues in v3.0. Are you using v2.5 or v3.0? 

For instance, here is a working sample of VJ Camera: http://playground.babylonjs.com/#PMLB22 (press the canvas to enable it).

Once enabled, you're right, I'm creating a full frame transparent canvas on top of the screen which then block a lot of scenarios.

I still need to book some time to use the DynamicTexture instead to render directly in the WebGL canvas and avoid that. 

[davrous]

For sensibility, it's a bit tricky since we moved to our composable input management, but here is a way to change it: http://playground.babylonjs.com/#PMLB22#1

The magic line of code: camera.inputs.attached.virtualJoystick.getLeftJoystick().setJoystickSensibility(0.02); (or getRightJoystick())

Default values are 0.15 for left and 0.05 for right: https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.freeCameraVirtualJoystickInput.ts

[max123]

58 minutes ago, davrous said:

I've fixed some issues in v3.0. Are you using v2.5 or v3.0? 

For instance, here is a working sample of VJ Camera: http://playground.babylonjs.com/#PMLB22 (press the canvas to enable it).

Once enabled, you're right, I'm creating a full frame transparent canvas on top of the screen which then block a lot of scenarios.

I still need to book some time to use the DynamicTexture instead to render directly in the WebGL canvas and avoid that. 

Hi @davrous,

I'm using 2.5 at the moment.
Just a suggestion: can you set the z-index of 2d canvas to zIndex + 1 of the 3d rendering canvas? And add a couple of properties to VJ camera, smth like:
- setUIzIndex(value:number) - although this will be fixed with DynamicTexture I suppose.
- showHelpers(value:boolean) - to show or hide pointer circles.
- getters/setters for rotation/translation sensitivity
- getters/setters to constrain rotation angles.

I know, I'm asking a lot!

 

[max123]

52 minutes ago, davrous said:

For sensibility, it's a bit tricky since we moved to our composable input management, but here is a way to change it: http://playground.babylonjs.com/#PMLB22#1

The magic line of code: camera.inputs.attached.virtualJoystick.getLeftJoystick().setJoystickSensibility(0.02); (or getRightJoystick())

Default values are 0.15 for left and 0.05 for right: https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.freeCameraVirtualJoystickInput.ts

Cheers, will try your suggestions!

[bestog]

I would like to join the cause with three small additions:

• Specify the colors of the joysticks in the constructor/setter (currently I do it via a timeout and dirty code - other solution?)
• Select joystick areas. I only want to trigger the joysticks in the lower 1/3 of the screen. Currently the joysticks are distorted when I adjust the size of the canvas - it's logical.
• Option to permanently display the joysticks

Thanks @davrous for your great support :-)