improved the visuals of the joystick

This commit is contained in:
kharhamel 2021-04-20 11:40:39 +02:00
parent 415d8f9466
commit 341b048d6c
5 changed files with 45 additions and 25 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,35 @@
import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
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';
export class MobileJoystick extends VirtualJoystick {
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),
enable: true,
dir: "8dir",
});
this.scene.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
this.x = pointer.x;
this.y = pointer.y;
});
this.scene.input.on('pointerup', () => {
this.x = outOfScreenX;
this.y = outOfScreenY;
});
}
}

View File

@ -72,6 +72,7 @@ import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager"; import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import {PinchManager} from "../UserInput/PinchManager";
import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
export interface GameSceneInitInterface { export interface GameSceneInitInterface {
initPosition: PointInterface|null, initPosition: PointInterface|null,
@ -189,6 +190,7 @@ export class GameScene extends ResizableScene implements CenterListener {
//hook preload scene //hook preload scene
preload(): void { preload(): void {
addLoader(this);
const localUser = localUserStore.getLocalUser(); const localUser = localUserStore.getLocalUser();
const textures = localUser?.textures; const textures = localUser?.textures;
if (textures) { if (textures) {
@ -198,6 +200,10 @@ export class GameScene extends ResizableScene implements CenterListener {
} }
this.load.image(openChatIconName, 'resources/objects/talk.png'); this.load.image(openChatIconName, 'resources/objects/talk.png');
if (touchScreenManager.supportTouchScreen) {
this.load.image(joystickBaseKey, joystickBaseImg);
this.load.image(joystickThumbKey, joystickThumbImg);
}
this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => { this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
// If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments) // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) { if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
@ -244,8 +250,6 @@ export class GameScene extends ResizableScene implements CenterListener {
this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32}); this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
addLoader(this);
} }
// FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving. // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.

View File

@ -1,7 +1,7 @@
import { Direction, IVirtualJoystick } from "../../types"; import { Direction } from "../../types";
import {GameScene} from "../Game/GameScene"; import {GameScene} from "../Game/GameScene";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js'; import {MobileJoystick} from "../Components/MobileJoystick";
interface UserInputManagerDatum { interface UserInputManagerDatum {
keyInstance: Phaser.Input.Keyboard.Key; keyInstance: Phaser.Input.Keyboard.Key;
@ -19,8 +19,6 @@ export enum UserInputEvent {
JoystickMove, JoystickMove,
} }
const outOfScreenX = -1000;
const outOfScreenY = -1000;
//we cannot use a map structure so we have to create a replacment //we cannot use a map structure so we have to create a replacment
export class ActiveEventList { export class ActiveEventList {
@ -46,7 +44,7 @@ export class UserInputManager {
private Scene: GameScene; private Scene: GameScene;
private isInputDisabled : boolean; private isInputDisabled : boolean;
private joystick!: IVirtualJoystick; private joystick!: MobileJoystick;
private joystickEvents = new ActiveEventList(); private joystickEvents = new ActiveEventList();
private joystickForceThreshold = 60; private joystickForceThreshold = 60;
private joystickForceAccuX = 0; private joystickForceAccuX = 0;
@ -62,24 +60,7 @@ export class UserInputManager {
} }
initVirtualJoystick() { initVirtualJoystick() {
this.joystick = new VirtualJoystick(this, { this.joystick = new MobileJoystick(this.Scene);
x: outOfScreenX,
y: outOfScreenY,
radius: 20,
base: this.Scene.add.circle(0, 0, 20, 0xdddddd),
thumb: this.Scene.add.circle(0, 0, 10, 0x000000),
enable: true,
dir: "8dir",
});
this.Scene.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
this.joystick.x = pointer.x;
this.joystick.y = pointer.y;
});
this.Scene.input.on('pointerup', (pointer: { x: number; y: number; }) => {
this.joystick.x = outOfScreenX;
this.joystick.y = outOfScreenY;
});
this.joystick.on("update", () => { this.joystick.on("update", () => {
this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0; this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0;
this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0; this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0;