improved the visuals of the joystick

front/src/Phaser/Components/MobileJoystick.ts

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

front/src/Phaser/Game/GameScene.ts

@@ -72,6 +72,7 @@ import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
+import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -189,6 +190,7 @@ export class GameScene extends ResizableScene implements CenterListener {
 
     //hook preload scene
     preload(): void {
+        addLoader(this);
         const localUser = localUserStore.getLocalUser();
         const textures = localUser?.textures;
         if (textures) {
@@ -198,6 +200,10 @@ export class GameScene extends ResizableScene implements CenterListener {
         }
 
         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}) => {
             // 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) {
@@ -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.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.

front/src/Phaser/UserInput/UserInputManager.ts

@@ -1,7 +1,7 @@
-import { Direction, IVirtualJoystick } from "../../types";
+import { Direction } from "../../types";
 import {GameScene} from "../Game/GameScene";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
-import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
+import {MobileJoystick} from "../Components/MobileJoystick";
 
 interface UserInputManagerDatum {
     keyInstance: Phaser.Input.Keyboard.Key;
@@ -19,8 +19,6 @@ export enum UserInputEvent {
     JoystickMove,
 }
 
-const outOfScreenX = -1000;
-const outOfScreenY = -1000;
 
 //we cannot use a map structure so we have to create a replacment
 export class ActiveEventList {
@@ -46,7 +44,7 @@ export class UserInputManager {
     private Scene: GameScene;
     private isInputDisabled : boolean;
 
-    private joystick!: IVirtualJoystick;
+    private joystick!: MobileJoystick;
     private joystickEvents = new ActiveEventList();
     private joystickForceThreshold = 60;
     private joystickForceAccuX = 0;
@@ -62,24 +60,7 @@ export class UserInputManager {
     }
     
     initVirtualJoystick() {
-        this.joystick = new VirtualJoystick(this, {
-            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 = new MobileJoystick(this.Scene);
         this.joystick.on("update", () => {
             this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0;
             this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0;