import VirtualJoystick from "phaser3-rex-plugins/plugins/virtualjoystick.js"; import { waScaleManager } from "../Services/WaScaleManager"; import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes"; //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"; const baseSize = 50; const thumbSize = 25; const radius = 17.5; export class MobileJoystick extends VirtualJoystick { private resizeCallback: () => void; constructor(scene: Phaser.Scene) { super(scene, { x: -1000, y: -1000, radius: radius * window.devicePixelRatio, base: scene.add .image(0, 0, joystickBaseKey) .setDisplaySize( (baseSize / waScaleManager.zoomModifier) * window.devicePixelRatio, (baseSize / waScaleManager.zoomModifier) * window.devicePixelRatio ) .setDepth(DEPTH_INGAME_TEXT_INDEX), thumb: scene.add .image(0, 0, joystickThumbKey) .setDisplaySize( (thumbSize / waScaleManager.zoomModifier) * window.devicePixelRatio, (thumbSize / waScaleManager.zoomModifier) * window.devicePixelRatio ) .setDepth(DEPTH_INGAME_TEXT_INDEX), enable: true, dir: "8dir", }); this.visible = false; this.enable = false; this.scene.input.on("pointerdown", (pointer: Phaser.Input.Pointer) => { if (!pointer.wasTouch) { return; } // Let's only display the joystick if there is one finger on the screen if ((pointer.event as TouchEvent).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.visible = false; this.enable = false; }); this.resizeCallback = this.resize.bind(this); this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback); } public resize() { this.base.setDisplaySize(this.getDisplaySizeByElement(baseSize), this.getDisplaySizeByElement(baseSize)); this.thumb.setDisplaySize(this.getDisplaySizeByElement(thumbSize), this.getDisplaySizeByElement(thumbSize)); this.setRadius( (radius / (waScaleManager.zoomModifier * waScaleManager.uiScalingFactor)) * window.devicePixelRatio ); } private getDisplaySizeByElement(element: integer): integer { return (element / (waScaleManager.zoomModifier * waScaleManager.uiScalingFactor)) * window.devicePixelRatio; } public destroy() { super.destroy(); this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback); } }