Fixing some event release bugs in VirtualJoystick & adding support for camera speed on VirtualJoysticksCamera

src/Cameras/babylon.virtualJoysticksCamera.js

@@ -12,19 +12,26 @@ var BABYLON;
         function VirtualJoysticksCamera(name, position, scene) {
             _super.call(this, name, position, scene);
             this._leftjoystick = new BABYLON.VirtualJoystick(true);
-            this._leftjoystick.setAxisForUpDown(BABYLON.JoystickAxis.Z);
-            this._leftjoystick.setAxisForLeftRight(BABYLON.JoystickAxis.X);
+            this._leftjoystick.setAxisForUpDown(2 /* Z */);
+            this._leftjoystick.setAxisForLeftRight(0 /* X */);
             this._leftjoystick.setJoystickSensibility(0.15);
             this._rightjoystick = new BABYLON.VirtualJoystick(false);
-            this._rightjoystick.setAxisForUpDown(BABYLON.JoystickAxis.X);
-            this._rightjoystick.setAxisForLeftRight(BABYLON.JoystickAxis.Y);
+            this._rightjoystick.setAxisForUpDown(0 /* X */);
+            this._rightjoystick.setAxisForLeftRight(1 /* Y */);
             this._rightjoystick.reverseUpDown = true;
             this._rightjoystick.setJoystickSensibility(0.05);
             this._rightjoystick.setJoystickColor("yellow");
         }
+        VirtualJoysticksCamera.prototype.getLeftJoystick = function () {
+            return this._leftjoystick;
+        };
+        VirtualJoysticksCamera.prototype.getRightJoystick = function () {
+            return this._rightjoystick;
+        };
         VirtualJoysticksCamera.prototype._checkInputs = function () {
+            var speed = this._computeLocalCameraSpeed() * 50;
             var cameraTransform = BABYLON.Matrix.RotationYawPitchRoll(this.rotation.y, this.rotation.x, 0);
-            var deltaTransform = BABYLON.Vector3.TransformCoordinates(this._leftjoystick.deltaPosition, cameraTransform);
+            var deltaTransform = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(this._leftjoystick.deltaPosition.x * speed, this._leftjoystick.deltaPosition.y * speed, this._leftjoystick.deltaPosition.z * speed), cameraTransform);
             this.cameraDirection = this.cameraDirection.add(deltaTransform);
             this.cameraRotation = this.cameraRotation.addVector3(this._rightjoystick.deltaPosition);
             if (!this._leftjoystick.pressed) {

src/Cameras/babylon.virtualJoysticksCamera.ts

@@ -18,9 +18,18 @@
             this._rightjoystick.setJoystickColor("yellow");
         }
 
+        public getLeftJoystick(): VirtualJoystick {
+            return this._leftjoystick;
+        }
+
+        public getRightJoystick(): VirtualJoystick {
+            return this._rightjoystick;
+        }
+
         public _checkInputs(): void {
+            var speed = this._computeLocalCameraSpeed() * 50;
             var cameraTransform = Matrix.RotationYawPitchRoll(this.rotation.y, this.rotation.x, 0);
-            var deltaTransform = Vector3.TransformCoordinates(this._leftjoystick.deltaPosition, cameraTransform);
+            var deltaTransform = Vector3.TransformCoordinates(new Vector3(this._leftjoystick.deltaPosition.x * speed, this._leftjoystick.deltaPosition.y * speed, this._leftjoystick.deltaPosition.z * speed), cameraTransform);
             this.cameraDirection = this.cameraDirection.add(deltaTransform);
             this.cameraRotation = this.cameraRotation.addVector3(this._rightjoystick.deltaPosition);
             if (!this._leftjoystick.pressed) {

src/Tools/babylon.virtualJoystick.js

@@ -22,8 +22,8 @@ var BABYLON;
             VirtualJoystick._globalJoystickIndex++;
             // By default left & right arrow keys are moving the X
             // and up & down keys are moving the Y
-            this._axisTargetedByLeftAndRight = JoystickAxis.X;
-            this._axisTargetedByUpAndDown = JoystickAxis.Y;
+            this._axisTargetedByLeftAndRight = 0 /* X */;
+            this._axisTargetedByUpAndDown = 1 /* Y */;
             this.reverseLeftRight = false;
             this.reverseUpDown = false;
             // collections of pointers
@@ -34,16 +34,17 @@ var BABYLON;
             this._rotationSpeed = 25;
             this._inverseRotationSpeed = 1 / (this._rotationSpeed / 1000);
             this._rotateOnAxisRelativeToMesh = false;
+            this._onResize = function (evt) {
+                VirtualJoystick.vjCanvasWidth = window.innerWidth;
+                VirtualJoystick.vjCanvasHeight = window.innerHeight;
+                VirtualJoystick.vjCanvas.width = VirtualJoystick.vjCanvasWidth;
+                VirtualJoystick.vjCanvas.height = VirtualJoystick.vjCanvasHeight;
+                VirtualJoystick.halfWidth = VirtualJoystick.vjCanvasWidth / 2;
+                VirtualJoystick.halfHeight = VirtualJoystick.vjCanvasHeight / 2;
+            };
             // injecting a canvas element on top of the canvas 3D game
             if (!VirtualJoystick.vjCanvas) {
-                window.addEventListener("resize", function () {
-                    VirtualJoystick.vjCanvasWidth = window.innerWidth;
-                    VirtualJoystick.vjCanvasHeight = window.innerHeight;
-                    VirtualJoystick.vjCanvas.width = VirtualJoystick.vjCanvasWidth;
-                    VirtualJoystick.vjCanvas.height = VirtualJoystick.vjCanvasHeight;
-                    VirtualJoystick.halfWidth = VirtualJoystick.vjCanvasWidth / 2;
-                    VirtualJoystick.halfHeight = VirtualJoystick.vjCanvasHeight / 2;
-                }, false);
+                window.addEventListener("resize", this._onResize, false);
                 VirtualJoystick.vjCanvas = document.createElement("canvas");
                 VirtualJoystick.vjCanvasWidth = window.innerWidth;
                 VirtualJoystick.vjCanvasHeight = window.innerHeight;
@@ -73,22 +74,28 @@ var BABYLON;
             // origin joystick position
             this._joystickPointerStartPos = new BABYLON.Vector2(0, 0);
             this._deltaJoystickVector = new BABYLON.Vector2(0, 0);
-            VirtualJoystick.vjCanvas.addEventListener('pointerdown', function (evt) {
+            this._onPointerDownHandlerRef = function (evt) {
                 _this._onPointerDown(evt);
-            }, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointermove', function (evt) {
+            };
+            this._onPointerMoveHandlerRef = function (evt) {
                 _this._onPointerMove(evt);
-            }, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerup', function (evt) {
+            };
+            this._onPointerOutHandlerRef = function (evt) {
                 _this._onPointerUp(evt);
-            }, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerout', function (evt) {
+            };
+            this._onPointerUpHandlerRef = function (evt) {
                 _this._onPointerUp(evt);
-            }, false);
+            };
+            VirtualJoystick.vjCanvas.addEventListener('pointerdown', this._onPointerDownHandlerRef, false);
+            VirtualJoystick.vjCanvas.addEventListener('pointermove', this._onPointerMoveHandlerRef, false);
+            VirtualJoystick.vjCanvas.addEventListener('pointerup', this._onPointerUpHandlerRef, false);
+            VirtualJoystick.vjCanvas.addEventListener('pointerout', this._onPointerUpHandlerRef, false);
             VirtualJoystick.vjCanvas.addEventListener("contextmenu", function (evt) {
                 evt.preventDefault(); // Disables system menu
             }, false);
-            requestAnimationFrame(function () { _this._drawVirtualJoystick(); });
+            requestAnimationFrame(function () {
+                _this._drawVirtualJoystick();
+            });
         }
         VirtualJoystick.prototype.setJoystickSensibility = function (newJoystickSensibility) {
             this._joystickSensibility = newJoystickSensibility;
@@ -132,26 +139,26 @@ var BABYLON;
                 var directionLeftRight = this.reverseLeftRight ? -1 : 1;
                 var deltaJoystickX = directionLeftRight * this._deltaJoystickVector.x / this._inversedSensibility;
                 switch (this._axisTargetedByLeftAndRight) {
-                    case JoystickAxis.X:
+                    case 0 /* X */:
                         this.deltaPosition.x = Math.min(1, Math.max(-1, deltaJoystickX));
                         break;
-                    case JoystickAxis.Y:
+                    case 1 /* Y */:
                         this.deltaPosition.y = Math.min(1, Math.max(-1, deltaJoystickX));
                         break;
-                    case JoystickAxis.Z:
+                    case 2 /* Z */:
                         this.deltaPosition.z = Math.min(1, Math.max(-1, deltaJoystickX));
                         break;
                 }
                 var directionUpDown = this.reverseUpDown ? 1 : -1;
                 var deltaJoystickY = directionUpDown * this._deltaJoystickVector.y / this._inversedSensibility;
                 switch (this._axisTargetedByUpAndDown) {
-                    case JoystickAxis.X:
+                    case 0 /* X */:
                         this.deltaPosition.x = Math.min(1, Math.max(-1, deltaJoystickY));
                         break;
-                    case JoystickAxis.Y:
+                    case 1 /* Y */:
                         this.deltaPosition.y = Math.min(1, Math.max(-1, deltaJoystickY));
                         break;
-                    case JoystickAxis.Z:
+                    case 2 /* Z */:
                         this.deltaPosition.z = Math.min(1, Math.max(-1, deltaJoystickY));
                         break;
                 }
@@ -186,26 +193,26 @@ var BABYLON;
         // Define which axis you'd like to control for left & right 
         VirtualJoystick.prototype.setAxisForLeftRight = function (axis) {
             switch (axis) {
-                case JoystickAxis.X:
-                case JoystickAxis.Y:
-                case JoystickAxis.Z:
+                case 0 /* X */:
+                case 1 /* Y */:
+                case 2 /* Z */:
                     this._axisTargetedByLeftAndRight = axis;
                     break;
                 default:
-                    this._axisTargetedByLeftAndRight = JoystickAxis.X;
+                    this._axisTargetedByLeftAndRight = 0 /* X */;
                     break;
             }
         };
         // Define which axis you'd like to control for up & down 
         VirtualJoystick.prototype.setAxisForUpDown = function (axis) {
             switch (axis) {
-                case JoystickAxis.X:
-                case JoystickAxis.Y:
-                case JoystickAxis.Z:
+                case 0 /* X */:
+                case 1 /* Y */:
+                case 2 /* Z */:
                     this._axisTargetedByUpAndDown = axis;
                     break;
                 default:
-                    this._axisTargetedByUpAndDown = JoystickAxis.Y;
+                    this._axisTargetedByUpAndDown = 1 /* Y */;
                     break;
             }
         };
@@ -250,10 +257,17 @@ var BABYLON;
                     ;
                 });
             }
-            requestAnimationFrame(function () { _this._drawVirtualJoystick(); });
+            requestAnimationFrame(function () {
+                _this._drawVirtualJoystick();
+            });
         };
         VirtualJoystick.prototype.releaseCanvas = function () {
             if (VirtualJoystick.vjCanvas) {
+                VirtualJoystick.vjCanvas.removeEventListener('pointerdown', this._onPointerDownHandlerRef);
+                VirtualJoystick.vjCanvas.removeEventListener('pointermove', this._onPointerMoveHandlerRef);
+                VirtualJoystick.vjCanvas.removeEventListener('pointerup', this._onPointerUpHandlerRef);
+                VirtualJoystick.vjCanvas.removeEventListener('pointerout', this._onPointerUpHandlerRef);
+                window.removeEventListener("resize", this._onResize);
                 document.body.removeChild(VirtualJoystick.vjCanvas);
                 VirtualJoystick.vjCanvas = null;
             }

src/Tools/babylon.virtualJoystick.ts

@@ -41,6 +41,12 @@ module BABYLON {
         private _joystickIndex: number;
         private _touches: SmartCollection;
 
+        private _onPointerDownHandlerRef: (e: PointerEvent) => any;
+        private _onPointerMoveHandlerRef: (e: PointerEvent) => any;
+        private _onPointerUpHandlerRef: (e: PointerEvent) => any;
+        private _onPointerOutHandlerRef: (e: PointerEvent) => any;
+        private _onResize: (e: any) => any;
+
         constructor(leftJoystick?: boolean) {
             if (leftJoystick) {
                 this._leftJoystick = true;
@@ -70,16 +76,18 @@ module BABYLON {
             this._inverseRotationSpeed = 1 / (this._rotationSpeed / 1000);
             this._rotateOnAxisRelativeToMesh = false;
 
+            this._onResize = evt => {
+                VirtualJoystick.vjCanvasWidth = window.innerWidth;
+                VirtualJoystick.vjCanvasHeight = window.innerHeight;
+                VirtualJoystick.vjCanvas.width = VirtualJoystick.vjCanvasWidth;
+                VirtualJoystick.vjCanvas.height = VirtualJoystick.vjCanvasHeight;
+                VirtualJoystick.halfWidth = VirtualJoystick.vjCanvasWidth / 2;
+                VirtualJoystick.halfHeight = VirtualJoystick.vjCanvasHeight / 2;
+            }
+
             // injecting a canvas element on top of the canvas 3D game
             if (!VirtualJoystick.vjCanvas) {
-                window.addEventListener("resize",() => {
-                    VirtualJoystick.vjCanvasWidth = window.innerWidth;
-                    VirtualJoystick.vjCanvasHeight = window.innerHeight;
-                    VirtualJoystick.vjCanvas.width = VirtualJoystick.vjCanvasWidth;
-                    VirtualJoystick.vjCanvas.height = VirtualJoystick.vjCanvasHeight;
-                    VirtualJoystick.halfWidth = VirtualJoystick.vjCanvasWidth / 2;
-                    VirtualJoystick.halfHeight = VirtualJoystick.vjCanvasHeight / 2;
-                }, false);
+                window.addEventListener("resize", this._onResize, false);
                 VirtualJoystick.vjCanvas = document.createElement("canvas");
                 VirtualJoystick.vjCanvasWidth = window.innerWidth;
                 VirtualJoystick.vjCanvasHeight = window.innerHeight;
@@ -110,19 +118,24 @@ module BABYLON {
             // origin joystick position
             this._joystickPointerStartPos = new Vector2(0, 0);
             this._deltaJoystickVector = new Vector2(0, 0);
-
-            VirtualJoystick.vjCanvas.addEventListener('pointerdown',(evt) => {
+            
+            this._onPointerDownHandlerRef = evt => {
                 this._onPointerDown(evt);
-            }, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointermove',(evt) => {
+            }
+            this._onPointerMoveHandlerRef = evt => {
                 this._onPointerMove(evt);
-            }, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerup',(evt) => {
+            }
+            this._onPointerOutHandlerRef = evt => {
                 this._onPointerUp(evt);
-            }, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerout',(evt) => {
+            }
+            this._onPointerUpHandlerRef = evt => {
                 this._onPointerUp(evt);
-            }, false);
+            }
+
+            VirtualJoystick.vjCanvas.addEventListener('pointerdown', this._onPointerDownHandlerRef, false);
+            VirtualJoystick.vjCanvas.addEventListener('pointermove', this._onPointerMoveHandlerRef, false);
+            VirtualJoystick.vjCanvas.addEventListener('pointerup', this._onPointerUpHandlerRef, false);
+            VirtualJoystick.vjCanvas.addEventListener('pointerout', this._onPointerUpHandlerRef, false);
             VirtualJoystick.vjCanvas.addEventListener("contextmenu",(evt) => {
                 evt.preventDefault();    // Disables system menu
             }, false);
@@ -306,6 +319,11 @@ module BABYLON {
 
         public releaseCanvas() {
             if (VirtualJoystick.vjCanvas) {
+                VirtualJoystick.vjCanvas.removeEventListener('pointerdown', this._onPointerDownHandlerRef);
+                VirtualJoystick.vjCanvas.removeEventListener('pointermove', this._onPointerMoveHandlerRef);
+                VirtualJoystick.vjCanvas.removeEventListener('pointerup', this._onPointerUpHandlerRef);
+                VirtualJoystick.vjCanvas.removeEventListener('pointerout', this._onPointerUpHandlerRef);
+                window.removeEventListener("resize", this._onResize);
                 document.body.removeChild(VirtualJoystick.vjCanvas);
                 VirtualJoystick.vjCanvas = null;
             }