_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

some more tweaks with smooth zooming control

Browse Source
This commit is contained in:
Hanusiak Piotr 2021-12-02 14:44:13 +01:00
parent d0cd7b0806
commit c09609f70c
3 changed files with 54 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
front/src/Phaser/Game/CameraManager.ts
View File

@ -1,16 +1,26 @@
import { Easing } from '../../types';
import { HtmlUtils } from '../../WebRtc/HtmlUtils';
import type { Box } from '../../WebRtc/LayoutManager';
import type { Player } from '../Player/Player';
import type { WaScaleManager } from '../Services/WaScaleManager';
import type { GameScene } from './GameScene';
export enum CameraMode {
Free = 'Free',
Follow = 'Follow',
Focus = 'Focus',
}
export class CameraManager extends Phaser.Events.EventEmitter {
private scene: GameScene;
private camera: Phaser.Cameras.Scene2D.Camera;
private cameraBounds: { x: number, y: number };
private waScaleManager: WaScaleManager;
private cameraBounds: { x: number, y: number };
private cameraMode: CameraMode = CameraMode.Free;
private restoreZoomTween?: Phaser.Tweens.Tween;
constructor(scene: GameScene, cameraBounds: { x: number, y: number }, waScaleManager: WaScaleManager) {
super();
@ -28,11 +38,13 @@ export class CameraManager extends Phaser.Events.EventEmitter {
return this.camera;
}
public changeCameraFocus(
public enterFocusMode(
focusOn: { x: number, y: number, width: number, height: number }, duration: number = 1000,
): void {
this.setCameraMode(CameraMode.Focus);
this.waScaleManager.saveZoom();
this.waScaleManager.lockZoomingViaPlayerInput();
this.restoreZoomTween?.stop();
const maxZoomModifier = 2.84; // How to get max zoom value?
const currentZoomModifier = this.waScaleManager.zoomModifier;
const zoomModifierChange = maxZoomModifier - currentZoomModifier;
@ -46,9 +58,15 @@ export class CameraManager extends Phaser.Events.EventEmitter {
});
}
public leaveFocusMode(player: Player): void {
// We are forcing camera.pan to kill previous pan animation on EnterFocusMode
this.camera.pan(player.x, player.y, 1, Easing.SineEaseOut, true);
this.startFollow(player);
this.restoreZoom();
}
public startFollow(target: object | Phaser.GameObjects.GameObject): void {
this.waScaleManager.lockZoomingViaPlayerInput(false);
this.waScaleManager.restoreZoom();
this.setCameraMode(CameraMode.Follow);
this.camera.startFollow(target, true);
}
@ -69,6 +87,30 @@ export class CameraManager extends Phaser.Events.EventEmitter {
);
}
public isCameraLocked(): boolean {
return this.cameraMode === CameraMode.Focus;
}
private setCameraMode(mode: CameraMode): void {
if (this.cameraMode === mode) {
return;
}
this.cameraMode = mode;
}
private restoreZoom(): void {
this.restoreZoomTween?.stop();
this.restoreZoomTween = this.scene.tweens.addCounter({
from: this.waScaleManager.zoomModifier,
to: this.waScaleManager.getSaveZoom(),
duration: 1000,
ease: Easing.SineEaseOut,
onUpdate: (tween: Phaser.Tweens.Tween) => {
this.waScaleManager.zoomModifier = tween.getValue();
}
});
}
private initCamera() {
this.camera = this.scene.cameras.main;
this.camera.setBounds(0, 0, this.cameraBounds.x, this.cameraBounds.y);

6
front/src/Phaser/Game/GameScene.ts
View File

@ -788,7 +788,7 @@ export class GameScene extends DirtyScene {
for (const zone of zones) {
for (const property of zone.properties ?? []) {
if (property.name === 'focusable' && property.value === true) {
this.cameraManager.changeCameraFocus(zone);
this.cameraManager.enterFocusMode(zone);
break;
}
}
@ -802,7 +802,7 @@ export class GameScene extends DirtyScene {
for (const zone of zones) {
for (const property of zone.properties ?? []) {
if (property.name === 'focusable' && property.value === true) {
this.cameraManager.startFollow(this.CurrentPlayer);
this.cameraManager.leaveFocusMode(this.CurrentPlayer);
break;
}
}
@ -1954,7 +1954,7 @@ ${escapedMessage}
}
zoomByFactor(zoomFactor: number) {
if (waScaleManager.isZoomingViaPlayerInputLocked()) {
if (this.cameraManager.isCameraLocked()) {
return;
}
waScaleManager.zoomModifier *= zoomFactor;

14
front/src/Phaser/Services/WaScaleManager.ts
View File

@ -12,8 +12,6 @@ export class WaScaleManager {
private actualZoom: number = 1;
private _saveZoom: number = 1;
private zoomingViaPlayerInputLocked: boolean = false;
public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
}
@ -23,14 +21,6 @@ export class WaScaleManager {
this.game = game;
}
public isZoomingViaPlayerInputLocked(): boolean {
return this.zoomingViaPlayerInputLocked;
}
public lockZoomingViaPlayerInput(lock: boolean = true): void {
this.zoomingViaPlayerInputLocked = lock;
}
public applyNewSize() {
const { width, height } = coWebsiteManager.getGameSize();
@ -82,6 +72,10 @@ export class WaScaleManager {
this._saveZoom = this.hdpiManager.zoomModifier;
}
public getSaveZoom(): number {
return this._saveZoom;
}
public restoreZoom(): void {
this.hdpiManager.zoomModifier = this._saveZoom;
this.applyNewSize();