Jump to content

VirtualJoystick on mobile devices


Recommended Posts


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.attachControl(canvas, true);


    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;

        //Update here
            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?


Link to comment
Share on other sites

  • 2 weeks later...
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.

Link to comment
Share on other sites

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.




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...