WIP: testing new resolution config

front/src/Enum/EnvironmentVariable.ts

@@ -10,8 +10,8 @@ const TURN_USER: string = process.env.TURN_USER || '';
 const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
 const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
 const JITSI_PRIVATE_MODE : boolean = process.env.JITSI_PRIVATE_MODE == "true";
-const RESOLUTION = 2;
+const RESOLUTION = 1 / window.devicePixelRatio;
-const ZOOM_LEVEL = 1/*3/4*/;
+const ZOOM_LEVEL = 2 * window.devicePixelRatio/*3/4*/;
 const POSITION_DELAY = 200; // Wait 200ms between sending position events
 const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
 export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;

front/src/Phaser/Game/GameScene.ts

@@ -52,6 +52,7 @@ import {connectionManager} from "../../Connexion/ConnectionManager";
 import {RoomConnection} from "../../Connexion/RoomConnection";
 import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
 import {userMessageManager} from "../../Administration/UserMessageManager";
+import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';
 import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
 import {ResizableScene} from "../Login/ResizableScene";
 import {Room} from "../../Connexion/Room";
@@ -174,6 +175,7 @@ export class GameScene extends ResizableScene implements CenterListener {
     private messageSubscription: Subscription|null = null;
     private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
     private originalMapUrl: string|undefined;
+    private cursorKeys: any;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
         super({
@@ -192,7 +194,7 @@ export class GameScene extends ResizableScene implements CenterListener {
         })
         this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
             this.connectionAnswerPromiseResolve = resolve;
-        })
+        });
     }
 
     //hook preload scene
@@ -355,6 +357,8 @@ export class GameScene extends ResizableScene implements CenterListener {
 
     //hook create scene
     create(): void {
+        const mouseWheelToUpDown = new MouseWheelToUpDown(this);
+        this.cursorKeys = mouseWheelToUpDown.createCursorKeys();
         gameManager.gameSceneIsCreated(this);
         urlManager.pushRoomIdToUrl(this.room);
         this.startLayerName = urlManager.getStartLayerNameFromUrl();
@@ -1041,8 +1045,8 @@ ${escapedMessage}
     //todo: in a dedicated class/function?
     initCamera() {
         this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
+        this.cameras.main.startFollow(this.CurrentPlayer, true);
         this.updateCameraOffset();
-        this.cameras.main.setZoom(ZOOM_LEVEL);
     }
 
     addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){
@@ -1180,6 +1184,12 @@ ${escapedMessage}
      * @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
      */
     update(time: number, delta: number) : void {
+        if (this.cursorKeys.up.isDown) {
+            this.cameras.main.zoom *= 1.2;
+        } else if(this.cursorKeys.down.isDown) {
+            this.cameras.main.zoom *= 0.8;
+        }
+        
         mediaManager.setLastUpdateScene();
         this.currentTick = time;
         this.CurrentPlayer.moveUser(delta);
@@ -1424,10 +1434,8 @@ ${escapedMessage}
         let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
 
         // Let's put this in Game coordinates by applying the zoom level:
-        xCenter /= ZOOM_LEVEL * RESOLUTION;
-        yCenter /= ZOOM_LEVEL * RESOLUTION;
 
-        this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1,  xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2);
+        this.cameras.main.setFollowOffset(xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2);
     }
 
     public onCenterChange(): void {

front/src/Phaser/Login/EnableCameraScene.ts

@@ -3,12 +3,13 @@ import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
 import {mediaManager} from "../../WebRtc/MediaManager";
-import {RESOLUTION} from "../../Enum/EnvironmentVariable";
+import {RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
 import {SoundMeter} from "../Components/SoundMeter";
 import {SoundMeterSprite} from "../Components/SoundMeterSprite";
 import {HtmlUtils} from "../../WebRtc/HtmlUtils";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
+import MouseWheelToUpDown from "phaser3-rex-plugins/plugins/mousewheeltoupdown.js";
 
 export const EnableCameraSceneName = "EnableCameraScene";
 enum LoginTextures {
@@ -39,6 +40,7 @@ export class EnableCameraScene extends Phaser.Scene {
     private repositionCallback!: (this: Window, ev: UIEvent) => void;
 
     private mobileTapRectangle!: Rectangle;
+    private cursorKeys!: any;
     constructor() {
         super({
             key: EnableCameraSceneName
@@ -59,10 +61,14 @@ export class EnableCameraScene extends Phaser.Scene {
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
+        //this.scale.setZoom(ZOOM_LEVEL);
+        //Phaser.Display.Align.In.BottomCenter(this.pressReturnField, zone);
+        const mouseWheelToUpDown = new MouseWheelToUpDown(this);
+        this.cursorKeys = mouseWheelToUpDown.createCursorKeys();
         
-        this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
+        this.textField = new TextField(this, this.scale.width / 2, 20, 'Turn on your camera and microphone');
 
-        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Touch here\n\n or \n\nPress enter to start');
+        this.pressReturnField = new TextField(this, this.scale.width / 2, this.scale.height - 30, 'Touch here\n\n or \n\nPress enter to start');
         // For mobile purposes - we need a big enough touchable area.
         this.mobileTapRectangle = this.add
           .rectangle(
@@ -247,6 +253,11 @@ export class EnableCameraScene extends Phaser.Scene {
 
     update(time: number, delta: number): void {
         this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
+        if (this.cursorKeys.up.isDown) {
+            this.cameras.main.zoom *= 1.2;
+        } else if(this.cursorKeys.down.isDown) {
+            this.cameras.main.zoom *= 0.8;
+        }
 
         this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
 

front/src/Phaser/UserInput/UserInputManager.ts

@@ -2,6 +2,7 @@ import { Direction } from "../../types";
 import {GameScene} from "../Game/GameScene";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {MobileJoystick} from "../Components/MobileJoystick";
+import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';
 
 interface UserInputManagerDatum {
     keyInstance: Phaser.Input.Keyboard.Key;

front/src/index.ts

@@ -71,11 +71,12 @@ switch (phaserMode) {
 const config: GameConfig = {
     type: mode,
     title: "WorkAdventure",
-    width: width / RESOLUTION,
+    width: width / 2,
-    height: height / RESOLUTION,
+    height: height / 2,
     parent: "game",
+    zoom: 2,
     scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
-    zoom: RESOLUTION,
+    resolution: window.devicePixelRatio / 2,
     fps: fps,
     dom: {
         createContainer: true

front/src/rex-plugins.d.ts

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