Improving pinch (virtual joystick stops when pinch begins)
This commit is contained in:
parent
59b391e983
commit
f66e69cb75
@ -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() {
|
||||||
|
@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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) {
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user