noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

put the virtual joystick into the userInputManager and restricted it to touchscreens

This commit is contained in:
kharhamel 2021-04-16 18:49:04 +02:00
parent d7a74baa9d
commit 56287a2958
5 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/.eslintrc.json
View File

@ -24,6 +24,7 @@
"@typescript-eslint"
],
"rules": {
"no-unused-vars": "off"
"no-unused-vars": "off",
"@typescript-eslint/no-explicit-any": "error"
}
}

20
front/src/Phaser/Game/GameScene.ts
View File

@ -408,26 +408,10 @@ export class GameScene extends ResizableScene implements CenterListener {
//initialise list of other player
this.MapPlayers = this.physics.add.group({immovable: true});
this.virtualJoystick = new VirtualJoystick(this, {
x: this.game.renderer.width / 2,
y: this.game.renderer.height / 2,
radius: 20,
base: this.add.circle(0, 0, 20),
thumb: this.add.circle(0, 0, 10),
enable: true,
dir: "8dir",
});
this.virtualJoystick.visible = true;
//create input to move
mediaManager.setUserInputManager(this.userInputManager);
this.userInputManager = new UserInputManager(this, this.virtualJoystick);
// Listener event to reposition virtual joystick
// whatever place you click in game area
this.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
this.virtualJoystick.x = pointer.x;
this.virtualJoystick.y = pointer.y;
});
this.userInputManager = new UserInputManager(this);
if (localUserStore.getFullscreen()) {
document.querySelector('body')?.requestFullscreen();

12
front/src/Phaser/UserInput/PinchManager.ts
View File

@ -2,14 +2,20 @@ import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
export class PinchManager {
private scene: Phaser.Scene;
private pinch!: any;
private pinch!: any; // eslint-disable-line
constructor(scene: Phaser.Scene) {
this.scene = scene;
this.pinch = new Pinch(scene);
this.pinch.on('pinch', (pinch:any) => {
this.scene.cameras.main.zoom *= pinch.scaleFactor;
this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line
let newZoom = this.scene.cameras.main.zoom * pinch.scaleFactor;
if (newZoom < 0.25) {
newZoom = 0.25;
} else if(newZoom > 2) {
newZoom = 2;
}
this.scene.cameras.main.setZoom(newZoom);
});
}

53
front/src/Phaser/UserInput/UserInputManager.ts
View File

@ -1,5 +1,6 @@
import { Direction, IVirtualJoystick } from "../../types";
import {GameScene} from "../Game/GameScene";
import {touchScreenManager} from "../../Touch/TouchScreenManager";
const {
default: VirtualJoystick,
} = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
@ -44,17 +45,39 @@ export class UserInputManager {
private Scene: GameScene;
private isInputDisabled : boolean;
private joystick : IVirtualJoystick;
private joystick!: IVirtualJoystick;
private joystickEvents = new ActiveEventList();
private joystickForceThreshold = 60;
private joystickForceAccuX = 0;
private joystickForceAccuY = 0;
constructor(Scene: GameScene, virtualJoystick: IVirtualJoystick) {
constructor(Scene: GameScene) {
this.Scene = Scene;
this.isInputDisabled = false;
this.initKeyBoardEvent();
this.joystick = virtualJoystick;
if (touchScreenManager.supportTouchScreen) {
this.initVirtualJoystick();
}
}
initVirtualJoystick() {
this.joystick = new VirtualJoystick(this, {
x: this.Scene.game.renderer.width / 2,
y: this.Scene.game.renderer.height / 2,
radius: 20,
base: this.Scene.add.circle(0, 0, 20),
thumb: this.Scene.add.circle(0, 0, 10),
enable: true,
dir: "8dir",
});
this.joystick.visible = true;
// Listener event to reposition virtual joystick
// whatever place you click in game area
this.Scene.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
this.joystick.x = pointer.x;
this.joystick.y = pointer.y;
});
this.joystick.on("update", () => {
this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0;
this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0;
@ -62,18 +85,18 @@ export class UserInputManager {
for (const name in cursorKeys) {
const key = cursorKeys[name as Direction];
switch (name) {
case "up":
this.joystickEvents.set(UserInputEvent.MoveUp, key.isDown);
break;
case "left":
this.joystickEvents.set(UserInputEvent.MoveLeft, key.isDown);
break;
case "down":
this.joystickEvents.set(UserInputEvent.MoveDown, key.isDown);
break;
case "right":
this.joystickEvents.set(UserInputEvent.MoveRight, key.isDown);
break;
case "up":
this.joystickEvents.set(UserInputEvent.MoveUp, key.isDown);
break;
case "left":
this.joystickEvents.set(UserInputEvent.MoveLeft, key.isDown);
break;
case "down":
this.joystickEvents.set(UserInputEvent.MoveDown, key.isDown);
break;
case "right":
this.joystickEvents.set(UserInputEvent.MoveRight, key.isDown);
break;
}
}
});

6
front/src/rex-plugins.d.ts vendored
View File

@ -1,12 +1,12 @@
declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' {
const content: any;
const content: any; // eslint-disable-line
export default content;
}
declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
const content: any;
const content: any; // eslint-disable-line
export default content;
}
declare module 'phaser3-rex-plugins/plugins/gestures.js' {
export const Pinch: any;
export const Pinch: any; // eslint-disable-line
}