Improving pinch (virtual joystick stops when pinch begins)

This commit is contained in:
David Négrier 2021-05-05 09:35:24 +02:00
parent 59b391e983
commit f66e69cb75
5 changed files with 70 additions and 30 deletions

View File

@ -2,46 +2,60 @@ import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
import ScaleManager = Phaser.Scale.ScaleManager; import ScaleManager = Phaser.Scale.ScaleManager;
import {waScaleManager} from "../Services/WaScaleManager"; import {waScaleManager} from "../Services/WaScaleManager";
const outOfScreenX = -1000;
const outOfScreenY = -1000;
//the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free //the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
export const joystickBaseKey = 'joystickBase'; export const joystickBaseKey = 'joystickBase';
export const joystickBaseImg = 'resources/objects/joystickSplitted.png'; export const joystickBaseImg = 'resources/objects/joystickSplitted.png';
export const joystickThumbKey = 'joystickThumb'; export const joystickThumbKey = 'joystickThumb';
export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png'; export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png';
const baseSize = 50;
const thumbSize = 25;
const radius = 17.5;
export class MobileJoystick extends VirtualJoystick { export class MobileJoystick extends VirtualJoystick {
private resizeCallback: () => void; private resizeCallback: () => void;
constructor(scene: Phaser.Scene) { constructor(scene: Phaser.Scene) {
super(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, enable: true,
dir: "8dir", 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 }) => {
this.x = pointer.x; if (!pointer.wasTouch) {
this.y = pointer.y; 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.scene.input.on('pointerup', () => {
this.x = outOfScreenX; this.visible = false;
this.y = outOfScreenY; this.enable = false;
}); });
this.resizeCallback = this.resize.bind(this); this.resizeCallback = this.resize.bind(this);
this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback); this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
} }
private resize() { 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() { public destroy() {

View File

@ -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. * @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 { 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(); mediaManager.setLastUpdateScene();
this.currentTick = time; this.currentTick = time;
this.CurrentPlayer.moveUser(delta); this.CurrentPlayer.moveUser(delta);
@ -1499,4 +1487,9 @@ ${escapedMessage}
message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com' message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com'
}); });
} }
zoomByFactor(zoomFactor: number) {
waScaleManager.zoomModifier *= zoomFactor;
this.updateCameraOffset();
}
} }

View File

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

View File

@ -1,5 +1,6 @@
import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js"; import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
import {waScaleManager} from "../Services/WaScaleManager"; import {waScaleManager} from "../Services/WaScaleManager";
import {GameScene} from "../Game/GameScene";
export class PinchManager { export class PinchManager {
private scene: Phaser.Scene; private scene: Phaser.Scene;
@ -8,9 +9,29 @@ export class PinchManager {
constructor(scene: Phaser.Scene) { constructor(scene: Phaser.Scene) {
this.scene = scene; this.scene = scene;
this.pinch = new Pinch(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 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;
}
}); });
} }

View File

@ -3,6 +3,7 @@ import {GameScene} from "../Game/GameScene";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {MobileJoystick} from "../Components/MobileJoystick"; import {MobileJoystick} from "../Components/MobileJoystick";
import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js'; import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';
import {waScaleManager} from "../Services/WaScaleManager";
interface UserInputManagerDatum { interface UserInputManagerDatum {
keyInstance: Phaser.Input.Keyboard.Key; keyInstance: Phaser.Input.Keyboard.Key;
@ -55,6 +56,7 @@ export class UserInputManager {
this.Scene = Scene; this.Scene = Scene;
this.isInputDisabled = false; this.isInputDisabled = false;
this.initKeyBoardEvent(); this.initKeyBoardEvent();
this.initMouseWheel();
if (touchScreenManager.supportTouchScreen) { if (touchScreenManager.supportTouchScreen) {
this.initVirtualJoystick(); this.initVirtualJoystick();
} }
@ -175,4 +177,10 @@ export class UserInputManager {
destroy(): void { destroy(): void {
this.joystick.destroy(); 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);
});
}
} }