VirtualJoystick on mobile devices

[Superfly]

Hey,

i'am trying to use a VirtualJoystick in my project. It works on my desktop but when i try it on iOS nothing happens. I also tryed it on a Surface2 but the VirtualJoystick disapears after a second.

here is the code. Dont paste it into the playground,it will overlay the editor.

var createScene = function () {
    var movespeed = 3.0;
    var moveX;
    var moveZ;
    var scene = new BABYLON.Scene(engine);

    scene.collisionsEnabled = true;

    var joystick = new BABYLON.VirtualJoystick(leftJoystick=true);

    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 8, -7), scene);

    camera.setTarget(BABYLON.Vector3.Zero());

    //camera.attachControl(canvas, true);

    console.log(engine.getDeltaTime());

    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    light.intensity = 0.7;

    var cube = BABYLON.Mesh.CreateBox("cube", 1, scene);

    cube.position.y = 0.5;
    cube.showBoundingBox = true;
    cube.checkCollisions = true;

    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 0, scene);

    camera.parent = cube;

    scene.registerBeforeRender(function(){
        //Update here
        if(joystick.pressed){
            moveX = joystick.deltaPosition.x * (engine.getDeltaTime()/1000) * movespeed;
            moveZ = joystick.deltaPosition.y * (engine.getDeltaTime()/1000) * movespeed;
            cube.moveWithCollisions(new BABYLON.Vector3(moveX,0,moveZ));
        }
    });

    return scene;

};

 

Is there anything i miseed?

 

[Guest]

Hello, did you make sure to add pep.js (jquery PEP) to simulate pointer events?

[Superfly]

Thank you, Deltakosh... now it works perfect!

[Superfly]

i ran into anoter problem. i have two html elements on top of the renadercanavs but they cant be clicked/touchted anymoe. i tryed to use pep's "pointerdown" event but nothing changed

[Sebavan]

You might try the attachControl(element, true) in order to not preventingDefault  ?

My bad, thought the issue was with camera ? silly me.

[Sebavan]

Actually, it might still be related to the same kind of issue, you would need to ensure your element are in front of the virtual joystick probably playing with zindex to not let the joystick capture the click before you elements.

[Superfly]

zindex works. the canvas of the virtual stick is on index 5 so i have a callback on the elements wenn i put it above. the other problem is, that the canvas of the stick is 100%wide an tall, so its impossible to trigger the html elemts when the stick is in use...

[eps]

On 10/24/2018 at 7:39 PM, Superfly said:

zindex works. the canvas of the virtual stick is on index 5 so i have a callback on the elements wenn i put it above. the other problem is, that the canvas of the stick is 100%wide an tall, so its impossible to trigger the html elemts when the stick is in use...

I'm facing a similar issue - did you manage to work round this?  My game has the VirtualJoystick in play, but once the game ends, I want to give control to the GUI but can't seem to switch easily between the two input intercepting concepts.

[Guest]

Hello, I'm interested to fix this virtual joystick for good

Can you help by sharing a PG reproducing your issue?

[eps]

Well my issue is this.... (on Android)

 

The game starts of by using the VirtualJoystick - all good   But....  if the player dies, I want to ask them if they want to play again.  I've ended up using BABYLON.GUI to put a button on the screen and this works, but I can't seem to press the button!!  It seems like the VirtualJoystick is still consuming the presses on the screen.

 

In my mind VirtualJoystick sits at zindex 5 and if I put the button 'above' this (0 or 1?) then it should get consumed first, but it doesn't.

 

I think there were a few 'ancient' PGs around which switched the VirtualJoystick 'off' but these no longer seem to work.

 

I've tried removing the VirtualJoystick before putting the GUI button on the screen but this then means that User input moves the camera around and I don't want the camera to move around.

 

I'll try and put a PG together to illustrate the above.

 

 

[Guest]

Thanks a lot!

pinging @trevordev to have a look

[trevordev]

Will do, created https://github.com/BabylonJS/Babylon.js/issues/5467 so I don't forget

[eps]

I can't really put a PG together - once I set the VirtualJoystick in place it consumes all presses and you can't halt it!  I'm sure it's probably an 'obvious' issue for some but I can't quite get my head round how to elegantly stop or pause the VirtualJoystick so that I can handle a 'Play Again?' request at the end of a game and handle user input.

[eps]

Actually I'm going to pass control back to the Android App that generates the WebView...  This seems like the cleanest and most appropriate solution.

[trevordev]

Sorry for the delay, glad you found a workaround, the virtual joystick creates it's own canvas that is overlayed on top of the entire screen. The reason other buttons stop working is due to them being under the overlay canvas. I updated the joystick class to make that canvas public so you can modify the zIndex of it to position it below any other html element you want to still be active (eg. buttons). See this PR: https://github.com/BabylonJS/Babylon.js/pull/5487/ after that is merged this pg should show how to use it with a button on a zIndex above the joystick https://playground.babylonjs.com/#PRQU53