GUI does not work with Joystick! And alternative to joystick!

Hello everyone.:slightly_smiling_face:

Well I am 4 days trying to use the GUI of Babylonjs. I getting the problem that is the use of a smartphone and browser (test in several … chorme, Opera, Edge, Firefox, Comodor).

Gui does not work with the joystick! If you use the Babylon joystick the Gui stop working … I deactivated the joystick and look for any demand for an external library, some tip please respond.

So the problem is this: GUI do not proceed along with the scene I often have to update or initialize the game again to load the GUI so this works;

Hello! can you please create a repro in the playground? Do you mean virtual joystick?

You have to understand that Virtual joystick will capture all the touch inputs and thus the GUI will not be able to get them.

Let’s start with a repro in the playground and we will find a way to make it work

1 Like

Hi, thanks for replying.

all the playgrounds with joystick I found they brake!
msg >> vj.clearCanvas is not a function <<
so I can not even parse the code.

do you know how I can call a function after a certain time? I’m doing a construction system.
I select the object that I want to drag on the map and I confirm, so it does only that I want a time until the final state.

because _clearCanvas() was a private function which seems to have been removed.
it’s still buggy as heck through

1 Like

Pinging @trevordev as he reworked the joystick code a bit

Yep, I modified the class to fix the problem described in this thread VirtualJoystick on mobile devices - Questions & Answers - HTML5 Game Devs Forum but only modified private variables.

@lcarlos here is a playground I created from the older thread that works Babylon.js Playground . In the playground you linked, it was using internal/private functions (ones starting with _) which are not recommended to be used as there is not backcompat support for them. Let me know if you have issues with what is available and I can potentially make a PR to address them.

@aWeirdo could you clarify what buggy behavior you are seeing? Do those issues exist in the playground I linked above?

1 Like

Hi, trevordev!

Your code works perfectly in the playground, but is it possible to use with GUI at the same time?
running locally did not work because of this;
var btn = document.createElement (“button”)
btn.innerText = “Enable / Disable Joystick” = 10; = “absolute” = “50px” = “0px”
document.body.appendChild (btn)

Uncaught TypeError: Can not read property ‘style’ of undefined
at GUI_1 (main.js: 310)
at createScene.

Running locally it does not work because of this error.

Primarily the pg code accessing old private variables :slight_smile:

I did notise it seems like it creates a canvas at full window width / height, blocking the pg editor?

I see, the way the joysticks are implemented are such that they use an overlay canvas to work blocks the use of the gui because clicks are only hitting the top most canvas. Unfortunately the workaround might be to adjust the placement of the overlay canvas so that it does not block the underlying gui elements. Another option would be to use html to do the gui. Another option would be to build your own joysticks by manually handling scene.onPointerObservable events.

Yep that’s why in that playground theres a button to disable joysticks :joy: . I think the babylon joysticks were created before the babylon gui existed but it has been suggested in the past to implement a new version of the joysticks using the gui which might be a good idea, Ill see if i can take a stab at it.

1 Like


Here is something I played with before. Maybe It can help you. It uses GUI to create joysticks, so there is no canvas blocking.

lines 44-187

1 Like

That looks great :+1: @nogalo, I might just make a PR to add this to the docs for people to use/modify as an alternative to the built in virtual controllers for developers that need more customization instead of a adding another joystick class to Babylon. @lcarlos does this work for you?


That would be great @trevordev. :grinning:

Also. If you don’t want joysticks to be on the edge of the screen. You can use left and top properties to define position. (lines 58-59 and 119-120 )

I think that these joysticks are responsive. But not tested on every screen and devices (it works fine on mobile devices for me).

It was a bit problematic for me to slow down cameraRotation (right joystick) in registerBeforeRender function. There is maybe a better way to deal with that.


And yes. You have to take into account the position of pucks when you use those left and top properties on the container. I updated the code so you can easier do that.

You can see a variables on lines 49 and 50. Which are controlling those left and top properties and updates the position of the pucks and containers symmetrically on both joysticks.

And if the screen size changes it works properly.

1 Like

Me again people.
@trevordev, yes I looked at the code @nogalo and I was impressed I do not know much about the javascript, but I thought to do this to create a joystick with the BABYLON.GUI.AdvancedDynamicTexture itself.

I spent a few hours and could use an external plugin called> nipplejs!
demo link -> Nipplejs by yoannmoinet

has its own system of listening and events, I have not yet mastered, but I can make it work! xD
Here’s what I did>
game_base.html: </ script>
So in my main.js I put these two variables.

var options = {
    zone: document.getElementById ('zone_joystick'),
    White color
    size: 120,
    threshold: 0.1,
    fadeTime: 250,
    multitouch: false,
    maxNumberOfNipples: 1,
    dataOnly: false,
    position: {top: '500px', left: '120px'},
    mode: 'static'
    restJoystick: true
    restOpacity: 0.5,
    lockX: false,
    lockY: false,
    catchDistance: 200
    var manager = nipplejs.create (options);
so in the scene.onBeforeRenderObservable, I put this>
manager.on ('end', function (evt) {
manager [0] .frontPosition.y = 0;
manager [0] .frontPosition.x = 0;

if (manager.on ('move, end', function (evt, data) {
if (manager [0] .frontPosition.y == 0) {
manager [0] .frontPosition.y = 0;
manager [0] .frontPosition.x = 0;
})) {
browser.position.z- = manager [0] .frontPosition.y * (engine.getDeltaTime () / 1000) * movepeed;
browser.position.x + = manager [0] .frontPosition.x * (engine.getDeltaTime () / 1000) * movepeed;


I know this is awful I use the playground but not everything works there and I tested on the smartphone and other browsers the game I’m doing - I’m seriously studying 5 days of javascript -
Sorry if the code is crazy.:upside_down_face:

@trevordev I think you should do what I said do not know if it is one of the developers of Babylonjs more is the best webgl engine and searched the internet everyone believes! and babylonjs stands out for being simple and easy to use seeing me with 5 days I’m doing a game of rts. Babylonjs also helps me with javascript.
and @nogalo I’m going to spend some time dating your code.

I believe that with the @nogalo code everything is solved. hope @trevordev, bring something based on it. Thank you:slightly_smiling_face:

1 Like

@nogalo - Hi thanks for responding!

I thought of doing something like the GUI itself.
but I’m new compared to you in javascript anyway I’ll try xD.

About your incredible code.
I hope the babylonjs developers see this and use the GUI itself to bring a custom and functional joystick.

+1 to add it in the doc…Can you do a PR for that @nogalo?

I am not sure I know how to do that properly. If you have time to do it it would be great. I am really busy at the moment so I can look into it in next few days.

No rush. Do it when you can:)

No worries, I started this here virtual joystick by TrevorDev · Pull Request #1475 · BabylonJS/Documentation · GitHub , If anyone wants to add or modify please do :slight_smile: