From 58af1f05f730abf602b687b9f323a18875f5cd33 Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Wed, 12 Jan 2022 12:08:11 +0100 Subject: [PATCH 1/2] unlocking zooming with a delay when entering / leaving focusable zone --- front/src/Phaser/Game/CameraManager.ts | 21 +++++++++++++++++---- front/src/Phaser/Game/GameScene.ts | 2 +- maps/tests/focusable_zone_map.json | 2 +- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/front/src/Phaser/Game/CameraManager.ts b/front/src/Phaser/Game/CameraManager.ts index 19c4821a..b5de87d2 100644 --- a/front/src/Phaser/Game/CameraManager.ts +++ b/front/src/Phaser/Game/CameraManager.ts @@ -19,10 +19,12 @@ export class CameraManager extends Phaser.Events.EventEmitter { private cameraMode: CameraMode = CameraMode.Free; + private cameraLockedDelayedCall: Phaser.Time.TimerEvent | undefined; private restoreZoomTween?: Phaser.Tweens.Tween; private startFollowTween?: Phaser.Tweens.Tween; private cameraFollowTarget?: { x: number; y: number }; + private cameraLocked: boolean; constructor(scene: GameScene, cameraBounds: { x: number; y: number }, waScaleManager: WaScaleManager) { super(); @@ -30,6 +32,7 @@ export class CameraManager extends Phaser.Events.EventEmitter { this.camera = scene.cameras.main; this.cameraBounds = cameraBounds; + this.cameraLocked = false; this.waScaleManager = waScaleManager; @@ -56,6 +59,8 @@ export class CameraManager extends Phaser.Events.EventEmitter { this.waScaleManager.saveZoom(); this.waScaleManager.setFocusTarget(focusOn); + this.cameraLocked = true; + this.unlockCameraWithDelay(duration); this.restoreZoomTween?.stop(); this.startFollowTween?.stop(); const marginMult = 1 + margin; @@ -79,10 +84,12 @@ export class CameraManager extends Phaser.Events.EventEmitter { ); } - public leaveFocusMode(player: Player): void { + public leaveFocusMode(player: Player, duration = 0): void { + this.cameraLocked = false; this.waScaleManager.setFocusTarget(); - this.startFollow(player, 1000); - this.restoreZoom(1000); + this.unlockCameraWithDelay(duration); + this.startFollow(player, duration); + this.restoreZoom(duration); } public startFollow(target: object | Phaser.GameObjects.GameObject, duration: number = 0): void { @@ -132,7 +139,13 @@ export class CameraManager extends Phaser.Events.EventEmitter { } public isCameraLocked(): boolean { - return this.cameraMode === CameraMode.Focus; + return this.cameraLocked; + } + + private unlockCameraWithDelay(delay: number): void { + this.scene.time.delayedCall(delay, () => { + this.cameraLocked = false; + }); } private setCameraMode(mode: CameraMode): void { diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 740de4c1..f1f5389e 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -855,7 +855,7 @@ export class GameScene extends DirtyScene { for (const zone of zones) { const focusable = zone.properties?.find((property) => property.name === "focusable"); if (focusable && focusable.value === true) { - this.cameraManager.leaveFocusMode(this.CurrentPlayer); + this.cameraManager.leaveFocusMode(this.CurrentPlayer, 1000); break; } } diff --git a/maps/tests/focusable_zone_map.json b/maps/tests/focusable_zone_map.json index 8a9aa6af..e5745929 100644 --- a/maps/tests/focusable_zone_map.json +++ b/maps/tests/focusable_zone_map.json @@ -162,7 +162,7 @@ { "name":"zoom_margin", "type":"float", - "value":3 + "value":0 }], "rotation":0, "type":"zone", From 905bd079ec65b38e781025341889e4e69405ffd1 Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Wed, 12 Jan 2022 12:58:27 +0100 Subject: [PATCH 2/2] camera is now properly focusing on target when zooming, if any --- front/src/Phaser/Game/CameraManager.ts | 2 -- front/src/Phaser/Game/GameScene.ts | 4 ++-- front/src/Phaser/Services/WaScaleManager.ts | 17 ++++++++++++++++- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/front/src/Phaser/Game/CameraManager.ts b/front/src/Phaser/Game/CameraManager.ts index b5de87d2..55ff34de 100644 --- a/front/src/Phaser/Game/CameraManager.ts +++ b/front/src/Phaser/Game/CameraManager.ts @@ -19,7 +19,6 @@ export class CameraManager extends Phaser.Events.EventEmitter { private cameraMode: CameraMode = CameraMode.Free; - private cameraLockedDelayedCall: Phaser.Time.TimerEvent | undefined; private restoreZoomTween?: Phaser.Tweens.Tween; private startFollowTween?: Phaser.Tweens.Tween; @@ -85,7 +84,6 @@ export class CameraManager extends Phaser.Events.EventEmitter { } public leaveFocusMode(player: Player, duration = 0): void { - this.cameraLocked = false; this.waScaleManager.setFocusTarget(); this.unlockCameraWithDelay(duration); this.startFollow(player, duration); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index f1f5389e..3c95205d 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -12,7 +12,7 @@ import { UserInputManager } from "../UserInput/UserInputManager"; import { gameManager } from "./GameManager"; import { touchScreenManager } from "../../Touch/TouchScreenManager"; import { PinchManager } from "../UserInput/PinchManager"; -import { waScaleManager } from "../Services/WaScaleManager"; +import { waScaleManager, WaScaleManagerEvent } from "../Services/WaScaleManager"; import { EmoteManager } from "./EmoteManager"; import { soundManager } from "./SoundManager"; import { SharedVariablesManager } from "./SharedVariablesManager"; @@ -2125,7 +2125,7 @@ ${escapedMessage} if (this.cameraManager.isCameraLocked()) { return; } - waScaleManager.zoomModifier *= zoomFactor; + waScaleManager.handleZoomByFactor(zoomFactor); biggestAvailableAreaStore.recompute(); } diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index c0c01402..0cf189b1 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -5,6 +5,10 @@ import type { Game } from "../Game/Game"; import { ResizableScene } from "../Login/ResizableScene"; import { HtmlUtils } from "../../WebRtc/HtmlUtils"; +export enum WaScaleManagerEvent { + RefreshFocusOnTarget = "wa-scale-manager:refresh-focus-on-target", +} + export class WaScaleManager { private hdpiManager: HdpiManager; private scaleManager!: ScaleManager; @@ -69,7 +73,7 @@ export class WaScaleManager { return; } this.zoomModifier = this.getTargetZoomModifierFor(this.focusTarget.width, this.focusTarget.height); - this.game.events.emit("wa-scale-manager:refresh-focus-on-target", this.focusTarget); + this.game.events.emit(WaScaleManagerEvent.RefreshFocusOnTarget, this.focusTarget); } public setFocusTarget(targetDimensions?: { x: number; y: number; width: number; height: number }): void { @@ -98,6 +102,17 @@ export class WaScaleManager { this.applyNewSize(); } + public handleZoomByFactor(zoomFactor: number): void { + this.zoomModifier *= zoomFactor; + if (this.focusTarget) { + this.game.events.emit(WaScaleManagerEvent.RefreshFocusOnTarget, this.focusTarget); + } + } + + public getFocusTarget(): { x: number; y: number; width: number; height: number } | undefined { + return this.focusTarget; + } + public saveZoom(): void { this._saveZoom = this.hdpiManager.zoomModifier; }