From 6a2326c4b3ba3803cc5b3d214f3a3c59b4699695 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Wed, 21 Apr 2021 18:01:26 +0200 Subject: [PATCH 01/14] WIP: testing new resolution config --- front/src/Enum/EnvironmentVariable.ts | 4 ++-- front/src/Phaser/Game/GameScene.ts | 18 +++++++++++++----- front/src/Phaser/Login/EnableCameraScene.ts | 17 ++++++++++++++--- front/src/Phaser/UserInput/UserInputManager.ts | 1 + front/src/index.ts | 7 ++++--- front/src/rex-plugins.d.ts | 4 ++++ 6 files changed, 38 insertions(+), 13 deletions(-) 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; From 04d3cf859348441d12720e11477d7bf64a64ef9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 4 May 2021 11:29:37 +0200 Subject: [PATCH 02/14] Adding HdpiManager to start and scale from a default resolution that is correct by default for the game. Fixing VirtualJoystick on resize. --- front/src/Enum/EnvironmentVariable.ts | 4 +- front/src/Phaser/Components/MobileJoystick.ts | 20 +++++- front/src/Phaser/Game/GameScene.ts | 27 +++++--- front/src/Phaser/Services/HdpiManager.ts | 63 +++++++++++++++++++ front/src/Phaser/Services/WaScaleManager.ts | 47 ++++++++++++++ front/src/Phaser/UserInput/PinchManager.ts | 18 +++--- .../src/Phaser/UserInput/UserInputManager.ts | 6 +- front/src/index.ts | 28 ++++++--- .../tests/Phaser/Services/HdpiManagerTest.ts | 32 ++++++++++ 9 files changed, 213 insertions(+), 32 deletions(-) create mode 100644 front/src/Phaser/Services/HdpiManager.ts create mode 100644 front/src/Phaser/Services/WaScaleManager.ts create mode 100644 front/tests/Phaser/Services/HdpiManagerTest.ts diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index 753a9ef3..b7fc6edb 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 = 1 / window.devicePixelRatio; -const ZOOM_LEVEL = 2 * window.devicePixelRatio/*3/4*/; +const RESOLUTION = 2; +const ZOOM_LEVEL = 1; 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/Components/MobileJoystick.ts b/front/src/Phaser/Components/MobileJoystick.ts index 1ace529c..8c3cefdc 100644 --- a/front/src/Phaser/Components/MobileJoystick.ts +++ b/front/src/Phaser/Components/MobileJoystick.ts @@ -1,4 +1,6 @@ import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js'; +import ScaleManager = Phaser.Scale.ScaleManager; +import {waScaleManager} from "../Services/WaScaleManager"; const outOfScreenX = -1000; const outOfScreenY = -1000; @@ -11,7 +13,8 @@ export const joystickThumbKey = 'joystickThumb'; export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png'; export class MobileJoystick extends VirtualJoystick { - + private resizeCallback: () => void; + constructor(scene: Phaser.Scene) { super(scene, { x: outOfScreenX, @@ -31,5 +34,18 @@ export class MobileJoystick extends VirtualJoystick { this.x = outOfScreenX; this.y = outOfScreenY; }); + this.resizeCallback = this.resize.bind(this); + this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback); } -} \ No newline at end of file + + private resize() { + this.base.setDisplaySize(60 / waScaleManager.zoomModifier, 60 / waScaleManager.zoomModifier); + this.thumb.setDisplaySize(30 / waScaleManager.zoomModifier, 30 / waScaleManager.zoomModifier); + this.setRadius(20 / waScaleManager.zoomModifier); + } + + public destroy() { + super.destroy(); + this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback); + } +} diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index ea293c04..de4bea65 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -81,6 +81,7 @@ import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoading import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {PinchManager} from "../UserInput/PinchManager"; import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick"; +import {waScaleManager} from "../Services/WaScaleManager"; export interface GameSceneInitInterface { initPosition: PointInterface|null, @@ -176,6 +177,7 @@ export class GameScene extends ResizableScene implements CenterListener { private popUpElements : Map = new Map(); private originalMapUrl: string|undefined; private cursorKeys: any; + private pinchManager: PinchManager|undefined; constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) { super({ @@ -364,7 +366,7 @@ export class GameScene extends ResizableScene implements CenterListener { this.startLayerName = urlManager.getStartLayerNameFromUrl(); if (touchScreenManager.supportTouchScreen) { - new PinchManager(this); + this.pinchManager = new PinchManager(this); } this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError()) @@ -420,7 +422,7 @@ export class GameScene extends ResizableScene implements CenterListener { //initialise list of other player this.MapPlayers = this.physics.add.group({immovable: true}); - + //create input to move mediaManager.setUserInputManager(this.userInputManager); this.userInputManager = new UserInputManager(this); @@ -899,6 +901,8 @@ ${escapedMessage} this.simplePeer.closeAllConnections(); this.simplePeer?.unregister(); this.messageSubscription?.unsubscribe(); + this.userInputManager.destroy(); + this.pinchManager?.destroy(); for(const iframeEvents of this.iframeSubscriptionList){ iframeEvents.unsubscribe(); @@ -1185,11 +1189,17 @@ ${escapedMessage} */ update(time: number, delta: number) : void { if (this.cursorKeys.up.isDown) { - this.cameras.main.zoom *= 1.2; + //this.cameras.main.zoom *= 1.2; + //this.scale.setGameSize(this.scale.width * 1.2, this.scale.height * 1.2); + waScaleManager.zoomModifier *= 1.2; + this.updateCameraOffset(); } else if(this.cursorKeys.down.isDown) { - this.cameras.main.zoom *= 0.8; + //this.scale.setGameSize(this.scale.width * 0.8, this.scale.height * 0.8); + //this.cameras.main.zoom *= 0.8; + waScaleManager.zoomModifier /= 1.2; + this.updateCameraOffset(); } - + mediaManager.setLastUpdateScene(); this.currentTick = time; this.CurrentPlayer.moveUser(delta); @@ -1425,17 +1435,18 @@ ${escapedMessage} } /** - * Updates the offset of the character compared to the center of the screen according to the layout mananger - * (tries to put the character in the center of the reamining space if there is a discussion going on. + * Updates the offset of the character compared to the center of the screen according to the layout manager + * (tries to put the character in the center of the remaining space if there is a discussion going on. */ private updateCameraOffset(): void { const array = layoutManager.findBiggestAvailableArray(); let xCenter = (array.xEnd - array.xStart) / 2 + array.xStart; let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart; + const game = HtmlUtils.querySelectorOrFail('#game canvas'); // Let's put this in Game coordinates by applying the zoom level: - this.cameras.main.setFollowOffset(xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2); + this.cameras.main.setFollowOffset((xCenter - game.offsetWidth/2) * window.devicePixelRatio / this.scale.zoom , (yCenter - game.offsetHeight/2) * window.devicePixelRatio / this.scale.zoom); } public onCenterChange(): void { diff --git a/front/src/Phaser/Services/HdpiManager.ts b/front/src/Phaser/Services/HdpiManager.ts new file mode 100644 index 00000000..6ffad8cd --- /dev/null +++ b/front/src/Phaser/Services/HdpiManager.ts @@ -0,0 +1,63 @@ +import ScaleManager = Phaser.Scale.ScaleManager; + +interface Size { + width: number; + height: number; +} + +export class HdpiManager { + private _zoomModifier: number = 1; + + public constructor(private minGamePixelsNumber: number) { + } + + /** + * Returns the optimal size in "game pixels" based on the screen size in "real pixels". + * + * Note: the function is returning the optimal size in "game pixels" in the "game" property, + * but also recommends resizing the "real" pixel screen size of the canvas. + * The proposed new real size is a few pixels bigger than the real size available (if the size is not a multiple of the pixel size) and should overflow. + * + * @param realPixelScreenSize + */ + public getOptimalGameSize(realPixelScreenSize: Size): { game: Size, real: Size } { + const realPixelNumber = realPixelScreenSize.width * realPixelScreenSize.height; + // If the screen has not a definition small enough to match the minimum number of pixels we want to display, + // let's make the canvas the size of the screen (in real pixels) + if (realPixelNumber <= this.minGamePixelsNumber) { + return { + game: realPixelScreenSize, + real: realPixelScreenSize + }; + } + + let i = 1; + + while (true) { + if (realPixelNumber <= this.minGamePixelsNumber * i * i) { + break; + } + + i++; + } + + return { + game: { + width: Math.ceil(realPixelScreenSize.width / (i - 1) / this._zoomModifier), + height: Math.ceil(realPixelScreenSize.height / (i - 1) / this._zoomModifier), + }, + real: { + width: Math.ceil(realPixelScreenSize.width / (i - 1)) * (i - 1), + height: Math.ceil(realPixelScreenSize.height / (i - 1)) * (i - 1), + } + } + } + + public get zoomModifier(): number { + return this._zoomModifier; + } + + public set zoomModifier(zoomModifier: number) { + this._zoomModifier = zoomModifier; + } +} diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts new file mode 100644 index 00000000..05689071 --- /dev/null +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -0,0 +1,47 @@ +import {HdpiManager} from "./HdpiManager"; +import ScaleManager = Phaser.Scale.ScaleManager; +import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; + + +class WaScaleManager { + private hdpiManager: HdpiManager; + private scaleManager!: ScaleManager; + + public constructor(private minGamePixelsNumber: number) { + this.hdpiManager = new HdpiManager(minGamePixelsNumber); + } + + public setScaleManager(scaleManager: ScaleManager) { + this.scaleManager = scaleManager; + } + + public applyNewSize() { + const {width, height} = coWebsiteManager.getGameSize(); + + let devicePixelRatio = 1; + if (window.devicePixelRatio) { + devicePixelRatio = window.devicePixelRatio; + } + + const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio}); + + this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio); + this.scaleManager.resize(gameSize.width, gameSize.height); + + // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves + const style = this.scaleManager.canvas.style; + style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; + style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px'; + }; + + public get zoomModifier(): number { + return this.hdpiManager.zoomModifier; + } + + public set zoomModifier(zoomModifier: number) { + this.hdpiManager.zoomModifier = zoomModifier; + this.applyNewSize(); + } +} + +export const waScaleManager = new WaScaleManager(640*480); diff --git a/front/src/Phaser/UserInput/PinchManager.ts b/front/src/Phaser/UserInput/PinchManager.ts index f7c445fa..c702369d 100644 --- a/front/src/Phaser/UserInput/PinchManager.ts +++ b/front/src/Phaser/UserInput/PinchManager.ts @@ -1,22 +1,20 @@ import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js"; +import {waScaleManager} from "../Services/WaScaleManager"; export class PinchManager { private scene: Phaser.Scene; private pinch!: any; // eslint-disable-line - + constructor(scene: Phaser.Scene) { this.scene = scene; this.pinch = new Pinch(scene); this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line - let newZoom = this.scene.cameras.main.zoom * pinch.scaleFactor; - if (newZoom < 0.25) { - newZoom = 0.25; - } else if(newZoom > 2) { - newZoom = 2; - } - this.scene.cameras.main.setZoom(newZoom); + waScaleManager.zoomModifier *= pinch.scaleFactor; }); } - -} \ No newline at end of file + + destroy() { + this.pinch.removeAllListeners(); + } +} diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index 897fb372..ccc50cce 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -59,7 +59,7 @@ export class UserInputManager { this.initVirtualJoystick(); } } - + initVirtualJoystick() { this.joystick = new MobileJoystick(this.Scene); this.joystick.on("update", () => { @@ -171,4 +171,8 @@ export class UserInputManager { removeSpaceEventListner(callback : Function){ this.Scene.input.keyboard.removeListener('keyup-SPACE', callback); } + + destroy(): void { + this.joystick.destroy(); + } } diff --git a/front/src/index.ts b/front/src/index.ts index 27f19271..0bc7310d 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -17,6 +17,8 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene"; import {localUserStore} from "./Connexion/LocalUserStore"; import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene"; import {iframeListener} from "./Api/IframeListener"; +import {HdpiManager} from "./Phaser/Services/HdpiManager"; +import {waScaleManager} from "./Phaser/Services/WaScaleManager"; const {width, height} = coWebsiteManager.getGameSize(); @@ -67,16 +69,22 @@ switch (phaserMode) { throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"'); } +const hdpiManager = new HdpiManager(640*480); +const { game: gameSize, real: realSize } = hdpiManager.getOptimalGameSize({width, height}); const config: GameConfig = { type: mode, title: "WorkAdventure", - width: width / 2, - height: height / 2, - parent: "game", - zoom: 2, + scale: { + parent: "game", + width: gameSize.width, + height: gameSize.height, + zoom: realSize.width / gameSize.width, + autoRound: true, + resizeInterval: 999999999999 + }, scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene], - resolution: window.devicePixelRatio / 2, + //resolution: window.devicePixelRatio / 2, fps: fps, dom: { createContainer: true @@ -105,10 +113,13 @@ const config: GameConfig = { const game = new Phaser.Game(config); +waScaleManager.setScaleManager(game.scale); +waScaleManager.applyNewSize(); + window.addEventListener('resize', function (event) { coWebsiteManager.resetStyle(); - const {width, height} = coWebsiteManager.getGameSize(); - game.scale.resize(width / RESOLUTION, height / RESOLUTION); + + waScaleManager.applyNewSize(); // Let's trigger the onResize method of any active scene that is a ResizableScene for (const scene of game.scene.getScenes(true)) { @@ -119,8 +130,7 @@ window.addEventListener('resize', function (event) { }); coWebsiteManager.onResize.subscribe(() => { - const {width, height} = coWebsiteManager.getGameSize(); - game.scale.resize(width / RESOLUTION, height / RESOLUTION); + waScaleManager.applyNewSize(); }); iframeListener.init(); diff --git a/front/tests/Phaser/Services/HdpiManagerTest.ts b/front/tests/Phaser/Services/HdpiManagerTest.ts new file mode 100644 index 00000000..2a4d2662 --- /dev/null +++ b/front/tests/Phaser/Services/HdpiManagerTest.ts @@ -0,0 +1,32 @@ +import "jasmine"; +import {HdpiManager} from "../../../src/Phaser/Services/HdpiManager"; + +describe("Test HdpiManager", () => { + it("should match screen size if size is too small.", () => { + const hdpiManager = new HdpiManager(640*480); + + const result = hdpiManager.getOptimalGameSize({ width: 320, height: 200 }); + expect(result.game.width).toEqual(320); + expect(result.game.height).toEqual(200); + expect(result.real.width).toEqual(320); + expect(result.real.height).toEqual(200); + }); + + it("should match multiple just above.", () => { + const hdpiManager = new HdpiManager(640*480); + + let result = hdpiManager.getOptimalGameSize({ width: 960, height: 600 }); + expect(result.game.width).toEqual(960); + expect(result.game.height).toEqual(600); + + result = hdpiManager.getOptimalGameSize({ width: 640 * 2 + 50, height: 480 * 2 + 50 }); + expect(result.game.width).toEqual(Math.ceil((640 * 2 + 50) / 2)); + expect(result.game.height).toEqual((480 * 2 + 50) / 2); + + result = hdpiManager.getOptimalGameSize({ width: 640 * 3 + 50, height: 480 * 3 + 50 }); + expect(result.game.width).toEqual(Math.ceil((640 * 3 + 50) / 3)); + expect(result.game.height).toEqual(Math.ceil((480 * 3 + 50) / 3)); + expect(result.real.width).toEqual(result.game.width * 3); + expect(result.real.height).toEqual(result.game.height * 3); + }); +}); From 85efe208b3ed2e4c0198db54cb9b750bc350b36b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 4 May 2021 11:35:55 +0200 Subject: [PATCH 03/14] Changing default map for docker-compose single-domain --- docker-compose.single-domain.yaml | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/docker-compose.single-domain.yaml b/docker-compose.single-domain.yaml index 1a390f4c..01937bc7 100644 --- a/docker-compose.single-domain.yaml +++ b/docker-compose.single-domain.yaml @@ -36,7 +36,7 @@ services: # Advice: you should instead use Coturn REST API along the TURN_STATIC_AUTH_SECRET in the Back container TURN_USER: "" TURN_PASSWORD: "" - START_ROOM_URL: "$START_ROOM_URL" + START_ROOM_URL: "/_/global/npeguin.github.io/office-map/map.json" command: yarn run start volumes: - ./front:/usr/src/app @@ -152,23 +152,6 @@ services: - "traefik.http.routers.uploader-ssl.tls=true" - "traefik.http.routers.uploader-ssl.service=uploader" - website: - image: thecodingmachine/nodejs:12-apache - environment: - STARTUP_COMMAND_1: npm install - STARTUP_COMMAND_2: npm run watch & - APACHE_DOCUMENT_ROOT: dist/ - volumes: - - ./website:/var/www/html - labels: - - "traefik.http.routers.website.rule=Host(`workadventure.localhost`)" - - "traefik.http.routers.website.entryPoints=web" - - "traefik.http.services.website.loadbalancer.server.port=80" - - "traefik.http.routers.website-ssl.rule=Host(`workadventure.localhost`)" - - "traefik.http.routers.website-ssl.entryPoints=websecure" - - "traefik.http.routers.website-ssl.tls=true" - - "traefik.http.routers.website-ssl.service=website" - messages: #image: thecodingmachine/nodejs:14 image: thecodingmachine/workadventure-back-base:latest From 613ff5d463cb69ad90f2d955660d96074983d446 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 4 May 2021 12:09:00 +0200 Subject: [PATCH 04/14] Adding zoom out limit --- front/src/Phaser/Services/HdpiManager.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/front/src/Phaser/Services/HdpiManager.ts b/front/src/Phaser/Services/HdpiManager.ts index 6ffad8cd..1cc97634 100644 --- a/front/src/Phaser/Services/HdpiManager.ts +++ b/front/src/Phaser/Services/HdpiManager.ts @@ -41,6 +41,23 @@ export class HdpiManager { i++; } + // Has the canvas more pixels than the screen? This is forbidden + if ((i - 1) * this._zoomModifier < 1) { + // Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter) + this._zoomModifier = 1 / (i - 1); + + return { + game: { + width: realPixelScreenSize.width, + height: realPixelScreenSize.height, + }, + real: { + width: realPixelScreenSize.width, + height: realPixelScreenSize.height, + } + } + } + return { game: { width: Math.ceil(realPixelScreenSize.width / (i - 1) / this._zoomModifier), From 59b391e9838916442999c63c04c9f554aa86f13b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 4 May 2021 14:08:40 +0200 Subject: [PATCH 05/14] Prevent WA scale manager from zooming too much --- front/src/Phaser/Services/HdpiManager.ts | 39 ++++++++++++++++--- front/src/Phaser/Services/WaScaleManager.ts | 6 +-- front/src/index.ts | 2 +- .../tests/Phaser/Services/HdpiManagerTest.ts | 27 ++++++++++++- 4 files changed, 63 insertions(+), 11 deletions(-) diff --git a/front/src/Phaser/Services/HdpiManager.ts b/front/src/Phaser/Services/HdpiManager.ts index 1cc97634..96bc0f40 100644 --- a/front/src/Phaser/Services/HdpiManager.ts +++ b/front/src/Phaser/Services/HdpiManager.ts @@ -8,7 +8,12 @@ interface Size { export class HdpiManager { private _zoomModifier: number = 1; - public constructor(private minGamePixelsNumber: number) { + /** + * + * @param minRecommendedGamePixelsNumber The minimum number of pixels we want to display "by default" to the user + * @param absoluteMinPixelNumber The very minimum of game pixels to display. Below, we forbid zooming more + */ + public constructor(private minRecommendedGamePixelsNumber: number, private absoluteMinPixelNumber: number) { } /** @@ -24,7 +29,7 @@ export class HdpiManager { const realPixelNumber = realPixelScreenSize.width * realPixelScreenSize.height; // If the screen has not a definition small enough to match the minimum number of pixels we want to display, // let's make the canvas the size of the screen (in real pixels) - if (realPixelNumber <= this.minGamePixelsNumber) { + if (realPixelNumber <= this.minRecommendedGamePixelsNumber) { return { game: realPixelScreenSize, real: realPixelScreenSize @@ -34,7 +39,7 @@ export class HdpiManager { let i = 1; while (true) { - if (realPixelNumber <= this.minGamePixelsNumber * i * i) { + if (realPixelNumber <= this.minRecommendedGamePixelsNumber * i * i) { break; } @@ -58,10 +63,34 @@ export class HdpiManager { } } + const gameWidth = Math.ceil(realPixelScreenSize.width / (i - 1) / this._zoomModifier); + const gameHeight = Math.ceil(realPixelScreenSize.height / (i - 1) / this._zoomModifier); + + // Let's ensure we display a minimum of pixels, even if crazily zoomed in. + if (gameWidth * gameHeight < this.absoluteMinPixelNumber) { + const minGameHeight = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.height / realPixelScreenSize.width); + const minGameWidth = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.width / realPixelScreenSize.height); + + // Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter) + this._zoomModifier = realPixelScreenSize.width / minGameWidth / (i - 1); + + return { + game: { + width: minGameWidth, + height: minGameHeight, + }, + real: { + width: realPixelScreenSize.width, + height: realPixelScreenSize.height, + } + } + + } + return { game: { - width: Math.ceil(realPixelScreenSize.width / (i - 1) / this._zoomModifier), - height: Math.ceil(realPixelScreenSize.height / (i - 1) / this._zoomModifier), + width: gameWidth, + height: gameHeight, }, real: { width: Math.ceil(realPixelScreenSize.width / (i - 1)) * (i - 1), diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index 05689071..77395675 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -7,8 +7,8 @@ class WaScaleManager { private hdpiManager: HdpiManager; private scaleManager!: ScaleManager; - public constructor(private minGamePixelsNumber: number) { - this.hdpiManager = new HdpiManager(minGamePixelsNumber); + public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) { + this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber); } public setScaleManager(scaleManager: ScaleManager) { @@ -44,4 +44,4 @@ class WaScaleManager { } } -export const waScaleManager = new WaScaleManager(640*480); +export const waScaleManager = new WaScaleManager(640*480, 196*196); diff --git a/front/src/index.ts b/front/src/index.ts index 0bc7310d..79997b76 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -69,7 +69,7 @@ switch (phaserMode) { throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"'); } -const hdpiManager = new HdpiManager(640*480); +const hdpiManager = new HdpiManager(640*480, 196*196); const { game: gameSize, real: realSize } = hdpiManager.getOptimalGameSize({width, height}); const config: GameConfig = { diff --git a/front/tests/Phaser/Services/HdpiManagerTest.ts b/front/tests/Phaser/Services/HdpiManagerTest.ts index 2a4d2662..4e0787a7 100644 --- a/front/tests/Phaser/Services/HdpiManagerTest.ts +++ b/front/tests/Phaser/Services/HdpiManagerTest.ts @@ -3,7 +3,7 @@ import {HdpiManager} from "../../../src/Phaser/Services/HdpiManager"; describe("Test HdpiManager", () => { it("should match screen size if size is too small.", () => { - const hdpiManager = new HdpiManager(640*480); + const hdpiManager = new HdpiManager(640*480, 64*64); const result = hdpiManager.getOptimalGameSize({ width: 320, height: 200 }); expect(result.game.width).toEqual(320); @@ -13,7 +13,7 @@ describe("Test HdpiManager", () => { }); it("should match multiple just above.", () => { - const hdpiManager = new HdpiManager(640*480); + const hdpiManager = new HdpiManager(640*480, 64*64); let result = hdpiManager.getOptimalGameSize({ width: 960, height: 600 }); expect(result.game.width).toEqual(960); @@ -29,4 +29,27 @@ describe("Test HdpiManager", () => { expect(result.real.width).toEqual(result.game.width * 3); expect(result.real.height).toEqual(result.game.height * 3); }); + + it("should not zoom in too much.", () => { + const hdpiManager = new HdpiManager(640*480, 64*64); + + hdpiManager.zoomModifier = 11; + + let result = hdpiManager.getOptimalGameSize({ width: 640, height: 640 }); + expect(result.game.width).toEqual(64); + expect(result.game.height).toEqual(64); + expect(hdpiManager.zoomModifier).toEqual(10); + + }); + + it("should not zoom out too much.", () => { + const hdpiManager = new HdpiManager(640*480, 64*64); + + hdpiManager.zoomModifier = 1/10; + + let result = hdpiManager.getOptimalGameSize({ width: 1280, height: 768 }); + expect(result.game.width).toEqual(1280); + expect(result.game.height).toEqual(768); + expect(hdpiManager.zoomModifier).toEqual(1); + }); }); From f66e69cb7567ea94fea69c9b6f6e4bf5b6079d1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 09:35:24 +0200 Subject: [PATCH 06/14] Improving pinch (virtual joystick stops when pinch begins) --- front/src/Phaser/Components/MobileJoystick.ts | 48 ++++++++++++------- front/src/Phaser/Game/GameScene.ts | 17 ++----- front/src/Phaser/Login/EntryScene.ts | 4 ++ front/src/Phaser/UserInput/PinchManager.ts | 23 ++++++++- .../src/Phaser/UserInput/UserInputManager.ts | 8 ++++ 5 files changed, 70 insertions(+), 30 deletions(-) diff --git a/front/src/Phaser/Components/MobileJoystick.ts b/front/src/Phaser/Components/MobileJoystick.ts index 8c3cefdc..0af3d6c8 100644 --- a/front/src/Phaser/Components/MobileJoystick.ts +++ b/front/src/Phaser/Components/MobileJoystick.ts @@ -2,46 +2,60 @@ import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js'; import ScaleManager = Phaser.Scale.ScaleManager; import {waScaleManager} from "../Services/WaScaleManager"; -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'; +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: 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), + x: -1000, + y: -1000, + radius: radius * window.devicePixelRatio, + base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(99999), + thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(99999), enable: true, dir: "8dir", }); + this.visible = false; + this.enable = false; - this.scene.input.on('pointerdown', (pointer: { x: number; y: number; }) => { - this.x = pointer.x; - this.y = pointer.y; + this.scene.input.on('pointerdown', (pointer: { x: number; y: number; wasTouch: boolean; event: TouchEvent }) => { + if (!pointer.wasTouch) { + return; + } + + // Let's only display the joystick if there is one finger on the screen + if (pointer.event.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.x = outOfScreenX; - this.y = outOfScreenY; + this.visible = false; + this.enable = false; }); this.resizeCallback = this.resize.bind(this); this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback); } private resize() { - this.base.setDisplaySize(60 / waScaleManager.zoomModifier, 60 / waScaleManager.zoomModifier); - this.thumb.setDisplaySize(30 / waScaleManager.zoomModifier, 30 / waScaleManager.zoomModifier); - this.setRadius(20 / waScaleManager.zoomModifier); + this.base.setDisplaySize(baseSize / waScaleManager.zoomModifier * window.devicePixelRatio, baseSize / waScaleManager.zoomModifier * window.devicePixelRatio); + this.thumb.setDisplaySize(thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio, thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio); + this.setRadius(radius / waScaleManager.zoomModifier * window.devicePixelRatio); } public destroy() { diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index de4bea65..6b166ac3 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1188,18 +1188,6 @@ ${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; - //this.scale.setGameSize(this.scale.width * 1.2, this.scale.height * 1.2); - waScaleManager.zoomModifier *= 1.2; - this.updateCameraOffset(); - } else if(this.cursorKeys.down.isDown) { - //this.scale.setGameSize(this.scale.width * 0.8, this.scale.height * 0.8); - //this.cameras.main.zoom *= 0.8; - waScaleManager.zoomModifier /= 1.2; - this.updateCameraOffset(); - } - mediaManager.setLastUpdateScene(); this.currentTick = time; this.CurrentPlayer.moveUser(delta); @@ -1499,4 +1487,9 @@ ${escapedMessage} message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com' }); } + + zoomByFactor(zoomFactor: number) { + waScaleManager.zoomModifier *= zoomFactor; + this.updateCameraOffset(); + } } diff --git a/front/src/Phaser/Login/EntryScene.ts b/front/src/Phaser/Login/EntryScene.ts index 75ee0272..0d75e071 100644 --- a/front/src/Phaser/Login/EntryScene.ts +++ b/front/src/Phaser/Login/EntryScene.ts @@ -2,6 +2,7 @@ import {gameManager} from "../Game/GameManager"; import {Scene} from "phaser"; import {ErrorScene} from "../Reconnecting/ErrorScene"; import {WAError} from "../Reconnecting/WAError"; +import {waScaleManager} from "../Services/WaScaleManager"; export const EntrySceneName = "EntryScene"; @@ -17,7 +18,10 @@ export class EntryScene extends Scene { } create() { +// waScaleManager.applyNewSize(); + gameManager.init(this.scene).then((nextSceneName) => { + waScaleManager.applyNewSize(); this.scene.start(nextSceneName); }).catch((err) => { if (err.response && err.response.status == 404) { diff --git a/front/src/Phaser/UserInput/PinchManager.ts b/front/src/Phaser/UserInput/PinchManager.ts index c702369d..3174c6ad 100644 --- a/front/src/Phaser/UserInput/PinchManager.ts +++ b/front/src/Phaser/UserInput/PinchManager.ts @@ -1,5 +1,6 @@ import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js"; import {waScaleManager} from "../Services/WaScaleManager"; +import {GameScene} from "../Game/GameScene"; export class PinchManager { private scene: Phaser.Scene; @@ -8,9 +9,29 @@ export class PinchManager { constructor(scene: Phaser.Scene) { this.scene = scene; this.pinch = new Pinch(scene); + this.pinch.setDragThreshold(10); + + // The "pinch.scaleFactor" value is very sensitive and causes the screen to flicker. + // We are smoothing its value with previous values to prevent the flicking. + let smoothPinch = 1; + + this.pinch.on('pinchstart', () => { + smoothPinch = 1; + }); + this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line - waScaleManager.zoomModifier *= pinch.scaleFactor; + if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) { + // Pinch too fast! Probably a bad measure. + return; + } + + smoothPinch = 3/5*smoothPinch + 2/5*pinch.scaleFactor; + if (this.scene instanceof GameScene) { + this.scene.zoomByFactor(smoothPinch); + } else { + waScaleManager.zoomModifier *= smoothPinch; + } }); } diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index ccc50cce..c569fdd2 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -3,6 +3,7 @@ import {GameScene} from "../Game/GameScene"; import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {MobileJoystick} from "../Components/MobileJoystick"; import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js'; +import {waScaleManager} from "../Services/WaScaleManager"; interface UserInputManagerDatum { keyInstance: Phaser.Input.Keyboard.Key; @@ -55,6 +56,7 @@ export class UserInputManager { this.Scene = Scene; this.isInputDisabled = false; this.initKeyBoardEvent(); + this.initMouseWheel(); if (touchScreenManager.supportTouchScreen) { this.initVirtualJoystick(); } @@ -175,4 +177,10 @@ export class UserInputManager { destroy(): void { this.joystick.destroy(); } + + private initMouseWheel() { + this.Scene.input.on('wheel', (pointer: unknown, gameObjects: unknown, deltaX: number, deltaY: number, deltaZ: number) => { + this.Scene.zoomByFactor(1 - deltaY / 53 * 0.1); + }); + } } From a6ad1674e3594f99c4d58cc594fbaae4ac222c0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 09:51:04 +0200 Subject: [PATCH 07/14] Fixing broken resize --- front/src/Phaser/Login/EntryScene.ts | 3 ++- front/src/index.ts | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Login/EntryScene.ts b/front/src/Phaser/Login/EntryScene.ts index 0d75e071..96a0a62a 100644 --- a/front/src/Phaser/Login/EntryScene.ts +++ b/front/src/Phaser/Login/EntryScene.ts @@ -18,9 +18,10 @@ export class EntryScene extends Scene { } create() { -// waScaleManager.applyNewSize(); gameManager.init(this.scene).then((nextSceneName) => { + // Let's rescale before starting the game + // We can do it at this stage. waScaleManager.applyNewSize(); this.scene.start(nextSceneName); }).catch((err) => { diff --git a/front/src/index.ts b/front/src/index.ts index 79997b76..6debeeb6 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -114,7 +114,6 @@ const config: GameConfig = { const game = new Phaser.Game(config); waScaleManager.setScaleManager(game.scale); -waScaleManager.applyNewSize(); window.addEventListener('resize', function (event) { coWebsiteManager.resetStyle(); From 7d2cc66f11648370f43f2ba34ef37c0554a0bbce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 11:56:24 +0200 Subject: [PATCH 08/14] Fixing pointer-events interaction preventing virtual joystick from working --- front/dist/resources/style/style.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 213b00f2..eb2f949f 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -381,7 +381,7 @@ body { max-height: 25%; } - + } #game { @@ -540,7 +540,7 @@ input[type=range]:focus::-ms-fill-upper { position: absolute; width: 100%; height: 100%; - pointer-events: all; + pointer-events: none; /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */ } @@ -549,7 +549,7 @@ input[type=range]:focus::-ms-fill-upper { } .game-overlay video { - width: 100% + width: 100%; } .main-section { @@ -565,6 +565,7 @@ input[type=range]:focus::-ms-fill-upper { flex-basis: 96%; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s; cursor: url('/resources/logos/cursor_pointer.png'), pointer; + pointer-events: auto; /*flex-shrink: 2;*/ } @@ -576,7 +577,6 @@ input[type=range]:focus::-ms-fill-upper { .sidebar { flex: 0 0 25%; display: flex; - pointer-events: all; } .sidebar > div { @@ -584,6 +584,7 @@ input[type=range]:focus::-ms-fill-upper { transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s; cursor: url('/resources/logos/cursor_pointer.png'), pointer; border-radius: 15px 15px 15px 15px; + pointer-events: auto; } .sidebar > div:hover { From 10bd073b7d124288aa7f4b6c1028559fa13c764d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 12:12:56 +0200 Subject: [PATCH 09/14] Fixing center computation of popup --- front/src/Phaser/Menu/MenuScene.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts index 05cea305..c67c7119 100644 --- a/front/src/Phaser/Menu/MenuScene.ts +++ b/front/src/Phaser/Menu/MenuScene.ts @@ -192,11 +192,11 @@ export class MenuScene extends Phaser.Scene { } }); - let middleY = (window.innerHeight / 3) - (257); + let middleY = this.scale.height / 2 - 392/2; if(middleY < 0){ middleY = 0; } - let middleX = (window.innerWidth / 3) - 298; + let middleX = this.scale.width / 2 - 457/2; if(middleX < 0){ middleX = 0; } @@ -236,11 +236,11 @@ export class MenuScene extends Phaser.Scene { this.gameShareOpened = true; - let middleY = (window.innerHeight / 3) - (257); + let middleY = this.scale.height / 2 - 85; if(middleY < 0){ middleY = 0; } - let middleX = (window.innerWidth / 3) - 298; + let middleX = this.scale.width / 2 - 200; if(middleX < 0){ middleX = 0; } From bede7abdd8f9c433c9b4d33cf9afe222b9329899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 12:15:13 +0200 Subject: [PATCH 10/14] Removing mousewheel to up down plugin --- front/src/Phaser/Game/GameScene.ts | 4 ---- front/src/Phaser/Login/EnableCameraScene.ts | 5 +---- front/src/Phaser/UserInput/UserInputManager.ts | 2 -- front/src/rex-plugins.d.ts | 8 ++------ 4 files changed, 3 insertions(+), 16 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 15e81bef..2d663fb7 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -60,7 +60,6 @@ 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"; @@ -185,7 +184,6 @@ export class GameScene extends ResizableScene implements CenterListener { private messageSubscription: Subscription|null = null; private popUpElements : Map = new Map(); private originalMapUrl: string|undefined; - private cursorKeys: any; private pinchManager: PinchManager|undefined; constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) { @@ -370,8 +368,6 @@ 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(); diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index fe4984d7..5d5bfa4f 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/front/src/Phaser/Login/EnableCameraScene.ts @@ -9,7 +9,6 @@ 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"; import Zone = Phaser.GameObjects.Zone; import { MenuScene } from "../Menu/MenuScene"; @@ -43,7 +42,7 @@ export class EnableCameraScene extends Phaser.Scene { private enableCameraSceneElement!: Phaser.GameObjects.DOMElement; private mobileTapZone!: Zone; - private cursorKeys!: any; + constructor() { super({ key: EnableCameraSceneName @@ -79,8 +78,6 @@ export class EnableCameraScene extends Phaser.Scene { } //this.scale.setZoom(ZOOM_LEVEL); //Phaser.Display.Align.In.BottomCenter(this.pressReturnField, zone); - const mouseWheelToUpDown = new MouseWheelToUpDown(this); - this.cursorKeys = mouseWheelToUpDown.createCursorKeys(); /* FIX ME */ this.textField = new TextField(this, this.scale.width / 2, 20, ''); diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index c569fdd2..fe78dac8 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -2,8 +2,6 @@ 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'; -import {waScaleManager} from "../Services/WaScaleManager"; interface UserInputManagerDatum { keyInstance: Phaser.Input.Keyboard.Key; diff --git a/front/src/rex-plugins.d.ts b/front/src/rex-plugins.d.ts index 3cb77d91..d5457702 100644 --- a/front/src/rex-plugins.d.ts +++ b/front/src/rex-plugins.d.ts @@ -3,14 +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 + const content: any; // eslint-disable-line export default content; } declare module 'phaser3-rex-plugins/plugins/gestures.js' { export const Pinch: any; // eslint-disable-line -} \ No newline at end of file +} From 4b89e08ea696f4ecc22bbba206b8b928e31a403b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 12:17:06 +0200 Subject: [PATCH 11/14] Reverting hard coded environment variable --- docker-compose.single-domain.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docker-compose.single-domain.yaml b/docker-compose.single-domain.yaml index 28bc0130..81305671 100644 --- a/docker-compose.single-domain.yaml +++ b/docker-compose.single-domain.yaml @@ -37,7 +37,7 @@ services: # Advice: you should instead use Coturn REST API along the TURN_STATIC_AUTH_SECRET in the Back container TURN_USER: "" TURN_PASSWORD: "" - START_ROOM_URL: "/_/global/npeguin.github.io/office-map/map.json" + START_ROOM_URL: "$START_ROOM_URL" command: yarn run start volumes: - ./front:/usr/src/app From cd2873e9d37bd985e4719f8f66082599f416ea2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 13:14:00 +0200 Subject: [PATCH 12/14] Fixing CI --- front/src/Phaser/Game/GameScene.ts | 4 ++-- front/src/Phaser/Services/HdpiManager.ts | 6 +----- front/src/Phaser/Services/WaScaleManager.ts | 2 +- front/tests/Phaser/Services/HdpiManagerTest.ts | 4 ++-- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 2d663fb7..4500779f 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1444,8 +1444,8 @@ ${escapedMessage} */ private updateCameraOffset(): void { const array = layoutManager.findBiggestAvailableArray(); - let xCenter = (array.xEnd - array.xStart) / 2 + array.xStart; - let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart; + const xCenter = (array.xEnd - array.xStart) / 2 + array.xStart; + const yCenter = (array.yEnd - array.yStart) / 2 + array.yStart; const game = HtmlUtils.querySelectorOrFail('#game canvas'); // Let's put this in Game coordinates by applying the zoom level: diff --git a/front/src/Phaser/Services/HdpiManager.ts b/front/src/Phaser/Services/HdpiManager.ts index 96bc0f40..867c7a53 100644 --- a/front/src/Phaser/Services/HdpiManager.ts +++ b/front/src/Phaser/Services/HdpiManager.ts @@ -38,11 +38,7 @@ export class HdpiManager { let i = 1; - while (true) { - if (realPixelNumber <= this.minRecommendedGamePixelsNumber * i * i) { - break; - } - + while (realPixelNumber > this.minRecommendedGamePixelsNumber * i * i) { i++; } diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index 77395675..dfac135e 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -32,7 +32,7 @@ class WaScaleManager { const style = this.scaleManager.canvas.style; style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px'; - }; + } public get zoomModifier(): number { return this.hdpiManager.zoomModifier; diff --git a/front/tests/Phaser/Services/HdpiManagerTest.ts b/front/tests/Phaser/Services/HdpiManagerTest.ts index 4e0787a7..32a6b03a 100644 --- a/front/tests/Phaser/Services/HdpiManagerTest.ts +++ b/front/tests/Phaser/Services/HdpiManagerTest.ts @@ -35,7 +35,7 @@ describe("Test HdpiManager", () => { hdpiManager.zoomModifier = 11; - let result = hdpiManager.getOptimalGameSize({ width: 640, height: 640 }); + const result = hdpiManager.getOptimalGameSize({ width: 640, height: 640 }); expect(result.game.width).toEqual(64); expect(result.game.height).toEqual(64); expect(hdpiManager.zoomModifier).toEqual(10); @@ -47,7 +47,7 @@ describe("Test HdpiManager", () => { hdpiManager.zoomModifier = 1/10; - let result = hdpiManager.getOptimalGameSize({ width: 1280, height: 768 }); + const result = hdpiManager.getOptimalGameSize({ width: 1280, height: 768 }); expect(result.game.width).toEqual(1280); expect(result.game.height).toEqual(768); expect(hdpiManager.zoomModifier).toEqual(1); From 04448c3c503401e205d5896addaf3035ab2de079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 15:46:02 +0200 Subject: [PATCH 13/14] Fixing button position in webcam setting page --- front/src/Phaser/Login/EnableCameraScene.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index 5d5bfa4f..1af0c092 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/front/src/Phaser/Login/EnableCameraScene.ts @@ -246,6 +246,11 @@ export class EnableCameraScene extends Phaser.Scene { this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16; this.arrowUp.y = this.microphoneNameField.y; + + const actionBtn = document.querySelector('#enableCameraScene .action'); + if (actionBtn !== null) { + actionBtn.style.top = (this.scale.height - 65) + 'px'; + } } update(time: number, delta: number): void { @@ -259,6 +264,7 @@ export class EnableCameraScene extends Phaser.Scene { duration: 1000, ease: 'Power3' }); + } private login(): void { @@ -286,12 +292,12 @@ export class EnableCameraScene extends Phaser.Scene { } private getMiddleX() : number{ - return (this.game.renderer.width / RESOLUTION) - + return (this.scale.width / 2) - ( this.enableCameraSceneElement && this.enableCameraSceneElement.node && this.enableCameraSceneElement.node.getBoundingClientRect().width > 0 - ? (this.enableCameraSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION)) + ? (this.enableCameraSceneElement.node.getBoundingClientRect().width / 2 / this.scale.zoom) : (300 / RESOLUTION) ); } From c1be97e366887961d9aef3e65b8dced88958162a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 5 May 2021 16:18:37 +0200 Subject: [PATCH 14/14] Adding test cases for mobile --- maps/tests/autoresize.json | 82 ++++++++++++++++++++++++++++++++++++++ maps/tests/index.html | 24 +++++++++++ maps/tests/mobile.json | 82 ++++++++++++++++++++++++++++++++++++++ maps/tests/mousewheel.json | 82 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 270 insertions(+) create mode 100644 maps/tests/autoresize.json create mode 100644 maps/tests/mobile.json create mode 100644 maps/tests/mousewheel.json diff --git a/maps/tests/autoresize.json b/maps/tests/autoresize.json new file mode 100644 index 00000000..39db9874 --- /dev/null +++ b/maps/tests/autoresize.json @@ -0,0 +1,82 @@ +{ "compressionlevel":-1, + "height":25, + "infinite":false, + "layers":[ + { + "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + "height":25, + "id":1, + "name":"floor", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":25, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":25, + "id":2, + "name":"start", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":25, + "x":0, + "y":0 + }, + { + "draworder":"topdown", + "id":3, + "name":"floorLayer", + "objects":[ + { + "height":114.5, + "id":3, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"Sans Serif", + "pixelsize":11, + "text":"Test:\nOpen your browser to the maximum size of your screen. Resize the browser window just smaller than the blue \"carpet\".\nResult:\nThe viewport is zoomed out x2 so that you can still see the \"carpet\"", + "wrap":true + }, + "type":"", + "visible":true, + "width":252.4375, + "x":162.78125, + "y":129.5 + }], + "opacity":1, + "type":"objectgroup", + "visible":true, + "x":0, + "y":0 + }], + "nextlayerid":8, + "nextobjectid":5, + "orientation":"orthogonal", + "renderorder":"right-down", + "tiledversion":"2021.03.23", + "tileheight":32, + "tilesets":[ + { + "columns":11, + "firstgid":1, + "image":"tileset1.png", + "imageheight":352, + "imagewidth":352, + "margin":0, + "name":"tileset1", + "spacing":0, + "tilecount":121, + "tileheight":32, + "tilewidth":32 + }], + "tilewidth":32, + "type":"map", + "version":1.5, + "width":25 +} \ No newline at end of file diff --git a/maps/tests/index.html b/maps/tests/index.html index f53bbae9..554125df 100644 --- a/maps/tests/index.html +++ b/maps/tests/index.html @@ -42,6 +42,30 @@ Testing scripting API with a script + + + Success Failure Pending + + + Testing auto-zoom of viewport + + + + + Success Failure Pending + + + Testing zoom via mouse wheel + + + + + Success Failure Pending + + + Testing movement on mobile + +