Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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;
}
}
});