Improving pinch (virtual joystick stops when pinch begins)

front/src/Phaser/Components/MobileJoystick.ts

@@ -2,46 +2,60 @@ import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
 import ScaleManager = Phaser.Scale.ScaleManager;
 import {waScaleManager} from "../Services/WaScaleManager";
 
-const outOfScreenX = -1000;
-const outOfScreenY = -1000;
-
-
 //the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
 export const joystickBaseKey = 'joystickBase';
 export const joystickBaseImg = 'resources/objects/joystickSplitted.png';
 export const joystickThumbKey = 'joystickThumb';
 export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png';
 
+const baseSize = 50;
+const thumbSize = 25;
+const radius = 17.5;
+
 export class MobileJoystick extends VirtualJoystick {
     private resizeCallback: () => void;
 
     constructor(scene: Phaser.Scene) {
         super(scene, {
-            x: outOfScreenX,
+            x: -1000,
-            y: outOfScreenY,
+            y: -1000,
-            radius: 20,
+            radius: radius * window.devicePixelRatio,
-            base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(60, 60).setDepth(99999),
+            base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(99999),
-            thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(30, 30).setDepth(99999),
+            thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(99999),
             enable: true,
             dir: "8dir",
         });
+        this.visible = false;
+        this.enable = false;
 
-        this.scene.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
+        this.scene.input.on('pointerdown', (pointer: { x: number; y: number; wasTouch: boolean; event: TouchEvent }) => {
+            if (!pointer.wasTouch) {
+                return;
+            }
+
+            // Let's only display the joystick if there is one finger on the screen
+            if (pointer.event.touches.length === 1) {
                 this.x = pointer.x;
                 this.y = pointer.y;
+                this.visible = true;
+                this.enable = true;
+            } else {
+                this.visible = false;
+                this.enable = false;
+            }
         });
         this.scene.input.on('pointerup', () => {
-            this.x = outOfScreenX;
+            this.visible = false;
-            this.y = outOfScreenY;
+            this.enable = false;
         });
         this.resizeCallback = this.resize.bind(this);
         this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
     }
 
     private resize() {
-        this.base.setDisplaySize(60 / waScaleManager.zoomModifier, 60 / waScaleManager.zoomModifier);
+        this.base.setDisplaySize(baseSize / waScaleManager.zoomModifier * window.devicePixelRatio, baseSize / waScaleManager.zoomModifier * window.devicePixelRatio);
-        this.thumb.setDisplaySize(30 / waScaleManager.zoomModifier, 30 / waScaleManager.zoomModifier);
+        this.thumb.setDisplaySize(thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio, thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio);
-        this.setRadius(20 / waScaleManager.zoomModifier);
+        this.setRadius(radius / waScaleManager.zoomModifier * window.devicePixelRatio);
     }
 
     public destroy() {

front/src/Phaser/Game/GameScene.ts

@@ -1188,18 +1188,6 @@ ${escapedMessage}
      * @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
      */
     update(time: number, delta: number) : void {
-        if (this.cursorKeys.up.isDown) {
-            //this.cameras.main.zoom *= 1.2;
-            //this.scale.setGameSize(this.scale.width * 1.2, this.scale.height * 1.2);
-            waScaleManager.zoomModifier *= 1.2;
-            this.updateCameraOffset();
-        } else if(this.cursorKeys.down.isDown) {
-            //this.scale.setGameSize(this.scale.width * 0.8, this.scale.height * 0.8);
-            //this.cameras.main.zoom *= 0.8;
-            waScaleManager.zoomModifier /= 1.2;
-            this.updateCameraOffset();
-        }
-
         mediaManager.setLastUpdateScene();
         this.currentTick = time;
         this.CurrentPlayer.moveUser(delta);
@@ -1499,4 +1487,9 @@ ${escapedMessage}
             message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com'
         });
     }
+
+    zoomByFactor(zoomFactor: number) {
+        waScaleManager.zoomModifier *= zoomFactor;
+        this.updateCameraOffset();
+    }
 }

front/src/Phaser/Login/EntryScene.ts

@@ -2,6 +2,7 @@ import {gameManager} from "../Game/GameManager";
 import {Scene} from "phaser";
 import {ErrorScene} from "../Reconnecting/ErrorScene";
 import {WAError} from "../Reconnecting/WAError";
+import {waScaleManager} from "../Services/WaScaleManager";
 
 export const EntrySceneName = "EntryScene";
 
@@ -17,7 +18,10 @@ export class EntryScene extends Scene {
     }
 
     create() {
+//        waScaleManager.applyNewSize();
+
         gameManager.init(this.scene).then((nextSceneName) => {
+            waScaleManager.applyNewSize();
             this.scene.start(nextSceneName);
         }).catch((err) => {
             if (err.response && err.response.status == 404) {

front/src/Phaser/UserInput/PinchManager.ts

@@ -1,5 +1,6 @@
 import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
 import {waScaleManager} from "../Services/WaScaleManager";
+import {GameScene} from "../Game/GameScene";
 
 export class PinchManager {
     private scene: Phaser.Scene;
@@ -8,9 +9,29 @@ export class PinchManager {
     constructor(scene: Phaser.Scene) {
         this.scene = scene;
         this.pinch = new Pinch(scene);
+        this.pinch.setDragThreshold(10);
+
+        // The "pinch.scaleFactor" value is very sensitive and causes the screen to flicker.
+        // We are smoothing its value with previous values to prevent the flicking.
+        let smoothPinch = 1;
+
+        this.pinch.on('pinchstart', () => {
+            smoothPinch = 1;
+        });
+
 
         this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line
-            waScaleManager.zoomModifier *= pinch.scaleFactor;
+            if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) {
+                // Pinch too fast! Probably a bad measure.
+                return;
+            }
+
+            smoothPinch = 3/5*smoothPinch + 2/5*pinch.scaleFactor;
+            if (this.scene instanceof GameScene) {
+                this.scene.zoomByFactor(smoothPinch);
+            } else {
+                waScaleManager.zoomModifier *= smoothPinch;
+            }
         });
     }
 

front/src/Phaser/UserInput/UserInputManager.ts

@@ -3,6 +3,7 @@ import {GameScene} from "../Game/GameScene";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {MobileJoystick} from "../Components/MobileJoystick";
 import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';
+import {waScaleManager} from "../Services/WaScaleManager";
 
 interface UserInputManagerDatum {
     keyInstance: Phaser.Input.Keyboard.Key;
@@ -55,6 +56,7 @@ export class UserInputManager {
         this.Scene = Scene;
         this.isInputDisabled = false;
         this.initKeyBoardEvent();
+        this.initMouseWheel();
         if (touchScreenManager.supportTouchScreen) {
             this.initVirtualJoystick();
         }
@@ -175,4 +177,10 @@ export class UserInputManager {
     destroy(): void {
         this.joystick.destroy();
     }
+
+    private initMouseWheel() {
+        this.Scene.input.on('wheel', (pointer: unknown, gameObjects: unknown, deltaX: number, deltaY: number, deltaZ: number) => {
+            this.Scene.zoomByFactor(1 - deltaY / 53 * 0.1);
+        });
+    }
 }