# Babylonjs virtual joystick and scene actions

**URL:** <https://forum.babylonjs.com/t/babylonjs-virtual-joystick-and-scene-actions/50648>\
**Category:** Questions\
**Tags:** gui, camera, joystick\
**Created:** [May 18, 2024, 7:35am UTC](https://forum.babylonjs.com/t/babylonjs-virtual-joystick-and-scene-actions/50648 "2024-05-18T07:35:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![keyra](https://avatars.discourse-cdn.com/v4/letter/k/b3f665/32.png) [@keyra](https://forum.babylonjs.com/u/keyra)\
**Post date:** [May 18, 2024, 7:35am UTC](https://forum.babylonjs.com/t/babylonjs-virtual-joystick-and-scene-actions/50648/1 "2024-05-18T07:35:50Z")

</div>

have a babylon.js project. I am using virtual joystick.

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

```auto
BABYLON.VirtualJoystick.Canvas.style.zIndex = "4";

var movespeed = 5
scene.onBeforeRenderObservable.add(()=>{
    if(leftJoystick.pressed){
       const moveX = leftJoystick.deltaPosition.x * (engine.getDeltaTime()/1000) * movespeed;
       const moveZ = leftJoystick.deltaPosition.y * (engine.getDeltaTime()/1000) * movespeed;
        camera.position.x+=moveX
        camera.position.z+=moveZ
    }
})`

```

but i don’t click another models how to solve this problem.

I tried define touch border with html and css but not worked.

---

<div class="post-metadata">

**Author:** ![onekit](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/onekit/32/49527_2.png) [@onekit](https://forum.babylonjs.com/u/onekit)\
**Post date:** [May 19, 2024, 1:53pm UTC](https://forum.babylonjs.com/t/babylonjs-virtual-joystick-and-scene-actions/50648/2 "2024-05-19T13:53:52Z")

</div>

The VirtualJoystick overlaps with your UI. You can try to hide it on release and show it again when you touch something other than your models.

---

<div class="post-metadata">

**Author:** ![keyra](https://avatars.discourse-cdn.com/v4/letter/k/b3f665/32.png) [@keyra](https://forum.babylonjs.com/u/keyra)\
**Post date:** [May 20, 2024, 2:26pm UTC](https://forum.babylonjs.com/t/babylonjs-virtual-joystick-and-scene-actions/50648/3 "2024-05-20T14:26:41Z")

</div>

Yes i tried but i didn’t find the solution

---

<div class="post-metadata">

**Author:** ![onekit](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/onekit/32/49527_2.png) [@onekit](https://forum.babylonjs.com/u/onekit)\
**Post date:** [May 20, 2024, 3:00pm UTC](https://forum.babylonjs.com/t/babylonjs-virtual-joystick-and-scene-actions/50648/4 "2024-05-20T15:00:09Z")

</div>

When you press F12 to see DevTools in browser, take a look at second canvas:

```auto
<canvas width="965" height="912" touch-action="none" style="width: 100%; height: 100%; position: absolute; background-color: transparent; top: 0px; left: 0px; z-index: 5; touch-action: none;"></canvas>

```

It have `z-index: 5`. You can change `z-index` to -1 on `!stick.pressed`. And set listeners on your main canvas which bring back `z-index` for virtual joystick’s canvas.  
I don’t like this solution, sounds like a hack. Need to think more.

---

<div class="post-metadata">

**Author:** ![onekit](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/onekit/32/49527_2.png) [@onekit](https://forum.babylonjs.com/u/onekit)\
**Post date:** [May 22, 2024, 11:08pm UTC](https://forum.babylonjs.com/t/babylonjs-virtual-joystick-and-scene-actions/50648/5 "2024-05-22T23:08:21Z")

</div>

Hi, I was inspired by your issue because it also concerns me. The fact that VirtualJoystick creates an additional canvas that overlays the main renderCanvas of our BabylonJS application is undoubtedly a problem for many. I decided to extend my add-on to VirtualJoystick a little further and added two features. 🙂 You can go through the script, see what you need, and apply my ideas to your application. For simplicity, you can just use the **CanvasManager** and toggle it when needed in your application. Or you can use the **Swipe Switcher** add-on and swipe up from the bottom of the screen to display the virtual joystick panel, and swipe down from the bottom of the screen to hide it. This way, you can hide the joysticks during usage to make the area with your main Canvas accessible for clicks.

> **[GitHub - onekit/babylonjs-touchstick: This is a TypeScript class extending...](https://github.com/onekit/babylonjs-touchstick)**
>
> This is a TypeScript class extending the functionality of the standard VirtualJoystick in BabylonJS. Smooth motion delta with movement filtering, gesture information such as swipe, hold, hold cente...

Look what I just added now:

```auto
const stick = new TouchStick(true)
stick.enableSwipeSwitcher(scene)

```

This code will work assuming that the canvas of your application has an id, while the VirtualJoystick canvas does not. Thus, I obtain the joystick canvas using the following method:

```typescript
getCanvasWithoutId() {
    const canvases = document.body.getElementsByTagName('canvas')
    for (let i = 0; i < canvases.length; i++) {
      if (!canvases[i].id) {
        return canvases[i]
      }
    }
    return null
}

```

Then, I pass `BABYLON.Scene` as a parameter to the class, and from the scene, I can easily get the application canvas using `scene.getEngine().getRenderingCanvas()`. Having obtained two canvases, I then need to switch them based on some events. I attach listeners to both canvases. Shrinking or expanding the joystick canvas based on swipes at the bottom is achieved through the following methods:

```typescript
show(gradient: boolean = false) {
    const canvas = this.getCanvasWithoutId()
    this.visible = true
    if (canvas) {
      this.setupStickCanvasListener()
      this.removeAppCanvasListener()
      if (!gradient) {
        canvas.style.zIndex = '5'
        return
      }
      canvas.style.height = '100%'
      canvas.style.top = 'inherit'
      canvas.style.bottom = '0'
      canvas.style.background =
          'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 100%)'
      canvas.style.transition =
          'height 0.5s ease, bottom 0.5s ease, background 0.5s ease'
    }
}

hide(gradient: boolean = false) {
    const canvas = this.getCanvasWithoutId()
    this.visible = false
    if (canvas) {
      this.setupAppCanvasListener()
      this.removeStickCanvasListener()
      if (!gradient) {
        canvas.style.zIndex = '-1'
        return
      }
      canvas.style.top = 'inherit'
      canvas.style.bottom = '0'
      canvas.style.height = '0%'
      canvas.style.background =
          'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 100%)'
      canvas.style.transition =
          'height 0.5s ease, bottom 0.5s ease, background 0.5s ease'
    }
}

```

Anyway it’s not an perfect solution, hope you’ll find something useful from it to customize your app.

---

<div class="post-metadata">

**Author:** ![keyra](https://avatars.discourse-cdn.com/v4/letter/k/b3f665/32.png) [@keyra](https://forum.babylonjs.com/u/keyra)\
**Post date:** [May 24, 2024, 6:59am UTC](https://forum.babylonjs.com/t/babylonjs-virtual-joystick-and-scene-actions/50648/6 "2024-05-24T06:59:31Z")

</div>

Thank you for helps I will try.