From f66e69cb7567ea94fea69c9b6f6e4bf5b6079d1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 09:35:24 +0200 Subject: [PATCH] Improving pinch (virtual joystick stops when pinch begins) --- front/src/Phaser/Components/MobileJoystick.ts | 48 ++++++++++++------- front/src/Phaser/Game/GameScene.ts | 17 ++----- front/src/Phaser/Login/EntryScene.ts | 4 ++ front/src/Phaser/UserInput/PinchManager.ts | 23 ++++++++- .../src/Phaser/UserInput/UserInputManager.ts | 8 ++++ 5 files changed, 70 insertions(+), 30 deletions(-) diff --git a/front/src/Phaser/Components/MobileJoystick.ts b/front/src/Phaser/Components/MobileJoystick.ts index 8c3cefdc..0af3d6c8 100644 --- a/front/src/Phaser/Components/MobileJoystick.ts +++ b/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, - y: outOfScreenY, - radius: 20, - base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(60, 60).setDepth(99999), - thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(30, 30).setDepth(99999), + x: -1000, + y: -1000, + radius: radius * window.devicePixelRatio, + base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).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.x = pointer.x; - this.y = pointer.y; + 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.y = outOfScreenY; + this.visible = false; + 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.thumb.setDisplaySize(30 / waScaleManager.zoomModifier, 30 / waScaleManager.zoomModifier); - this.setRadius(20 / waScaleManager.zoomModifier); + this.base.setDisplaySize(baseSize / waScaleManager.zoomModifier * window.devicePixelRatio, baseSize / waScaleManager.zoomModifier * window.devicePixelRatio); + this.thumb.setDisplaySize(thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio, thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio); + this.setRadius(radius / waScaleManager.zoomModifier * window.devicePixelRatio); } public destroy() { diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index de4bea65..6b166ac3 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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(); + } } diff --git a/front/src/Phaser/Login/EntryScene.ts b/front/src/Phaser/Login/EntryScene.ts index 75ee0272..0d75e071 100644 --- a/front/src/Phaser/Login/EntryScene.ts +++ b/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) { diff --git a/front/src/Phaser/UserInput/PinchManager.ts b/front/src/Phaser/UserInput/PinchManager.ts index c702369d..3174c6ad 100644 --- a/front/src/Phaser/UserInput/PinchManager.ts +++ b/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; + } }); } diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index ccc50cce..c569fdd2 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/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); + }); + } }