diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index 11479b0f..753a9ef3 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/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 ZOOM_LEVEL = 1/*3/4*/; +const RESOLUTION = 1 / window.devicePixelRatio; +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; diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 990f702c..ea293c04 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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 = new Map(); 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((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 { diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index 6a91fc34..7b609ab6 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/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()); diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index 2f14672b..897fb372 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/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; diff --git a/front/src/index.ts b/front/src/index.ts index 268f857d..27f19271 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -71,11 +71,12 @@ switch (phaserMode) { const config: GameConfig = { type: mode, title: "WorkAdventure", - width: width / RESOLUTION, - height: height / RESOLUTION, + width: width / 2, + 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 diff --git a/front/src/rex-plugins.d.ts b/front/src/rex-plugins.d.ts index 7ba8f65b..3cb77d91 100644 --- a/front/src/rex-plugins.d.ts +++ b/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;