lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Camera FocusTarget width and height are now optional

Browse source
This commit is contained in:
Hanusiak Piotr 2022-01-13 16:43:58 +01:00
parent d99930a67e
commit a164cedf3f
6 changed files with 31 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
front/src/Api/Events/CameraSetViewportEvent.ts
View file

@ -4,8 +4,8 @@ export const isCameraSetViewportEvent = new tg.IsInterface()
.withProperties({
x: tg.isNumber,
y: tg.isNumber,
width: tg.isNumber,
height: tg.isNumber,
width: tg.isOptional(tg.isNumber),
height: tg.isOptional(tg.isNumber),
lock: tg.isBoolean,
smooth: tg.isBoolean,
})

1
front/src/Api/IframeListener.ts
View file

@ -211,6 +211,7 @@ class IframeListener {
} else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
this._setPropertyStream.next(payload.data);
} else if (payload.type === "cameraSetViewport" && isCameraSetViewportEvent(payload.data)) {
console.log(payload.data);
this._cameraSetViewportStream.next(payload.data);
} else if (payload.type === "cameraFollowPlayer" && isCameraFollowPlayerEvent(payload.data)) {
this._cameraFollowPlayerStream.next(payload.data);

5
front/src/Api/iframe/camera.ts
View file

@ -20,11 +20,12 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
public setViewport(
x: number,
y: number,
width: number,
height: number,
width?: number,
height?: number,
lock: boolean = false,
smooth: boolean = false
): void {
console.log({ x, y, width, height, lock, smooth });
sendToWorkadventure({
type: "cameraSetViewport",
data: { x, y, width, height, lock, smooth },

30
front/src/Phaser/Game/CameraManager.ts
View file

@ -2,7 +2,7 @@ import { Easing } from "../../types";
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
import type { Box } from "../../WebRtc/LayoutManager";
import { hasMovedEventName, Player } from "../Player/Player";
import type { WaScaleManager } from "../Services/WaScaleManager";
import { WaScaleManager, WaScaleManagerEvent, WaScaleManagerFocusTarget } from "../Services/WaScaleManager";
import type { GameScene } from "./GameScene";
export enum CameraMode {
@ -62,7 +62,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
}
public destroy(): void {
this.scene.game.events.off("wa-scale-manager:refresh-focus-on-target");
this.scene.game.events.off(WaScaleManagerEvent.RefreshFocusOnTarget);
super.destroy();
}
@ -75,18 +75,19 @@ export class CameraManager extends Phaser.Events.EventEmitter {
* @param setTo Viewport on which the camera should set the position
* @param duration Time for the transition im MS. If set to 0, transition will occur immediately
*/
public setPosition(setTo: { x: number; y: number; width: number; height: number }, duration: number = 1000): void {
public setPosition(setTo: WaScaleManagerFocusTarget, duration: number = 1000): void {
if (this.cameraMode === CameraMode.Focus) {
return;
}
this.setCameraMode(CameraMode.Positioned);
this.waScaleManager.saveZoom();
const currentZoomModifier = this.waScaleManager.zoomModifier;
const zoomModifierChange = this.getZoomModifierChange(setTo.width, setTo.height);
const zoomModifierChange =
setTo.width && setTo.height ? this.getZoomModifierChange(setTo.width, setTo.height) : 0;
this.camera.stopFollow();
this.camera.pan(
setTo.x + setTo.width * 0.5,
setTo.y + setTo.height * 0.5,
setTo.x + (setTo.width ?? 0) * 0.5,
setTo.y + (setTo.height ?? 0) * 0.5,
duration,
Easing.SineEaseOut,
true,
@ -117,11 +118,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
* @param setTo Viewport on which the camera should focus on
* @param duration Time for the transition im MS. If set to 0, transition will occur immediately
*/
public enterFocusMode(
focusOn: { x: number; y: number; width: number; height: number },
margin: number = 0,
duration: number = 1000
): void {
public enterFocusMode(focusOn: WaScaleManagerFocusTarget, margin: number = 0, duration: number = 1000): void {
this.setCameraMode(CameraMode.Focus);
this.waScaleManager.saveZoom();
this.waScaleManager.setFocusTarget(focusOn);
@ -132,12 +129,15 @@ export class CameraManager extends Phaser.Events.EventEmitter {
this.startFollowTween?.stop();
const marginMult = 1 + margin;
const currentZoomModifier = this.waScaleManager.zoomModifier;
const zoomModifierChange = this.getZoomModifierChange(focusOn.width * marginMult, focusOn.height * marginMult);
const zoomModifierChange =
focusOn.width && focusOn.height
? this.getZoomModifierChange(focusOn.width * marginMult, focusOn.height * marginMult)
: 0;
this.camera.stopFollow();
this.playerToFollow = undefined;
this.camera.pan(
focusOn.x + focusOn.width * 0.5 * marginMult,
focusOn.y + focusOn.height * 0.5 * marginMult,
focusOn.x + (focusOn.width ?? 0) * 0.5 * marginMult,
focusOn.y + (focusOn.height ?? 0) * 0.5 * marginMult,
duration,
Easing.SineEaseOut,
true,
@ -244,7 +244,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
private bindEventHandlers(): void {
this.scene.game.events.on(
"wa-scale-manager:refresh-focus-on-target",
WaScaleManagerEvent.RefreshFocusOnTarget,
(focusOn: { x: number; y: number; width: number; height: number }) => {
if (!focusOn) {
return;

12
front/src/Phaser/Services/WaScaleManager.ts
View file

@ -9,6 +9,8 @@ export enum WaScaleManagerEvent {
RefreshFocusOnTarget = "wa-scale-manager:refresh-focus-on-target",
}
export type WaScaleManagerFocusTarget = { x: number; y: number; width?: number; height?: number };
export class WaScaleManager {
private hdpiManager: HdpiManager;
private scaleManager!: ScaleManager;
@ -16,7 +18,7 @@ export class WaScaleManager {
private actualZoom: number = 1;
private _saveZoom: number = 1;
private focusTarget?: { x: number; y: number; width: number; height: number };
private focusTarget?: WaScaleManagerFocusTarget;
public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
@ -72,11 +74,13 @@ export class WaScaleManager {
if (!this.focusTarget) {
return;
}
this.zoomModifier = this.getTargetZoomModifierFor(this.focusTarget.width, this.focusTarget.height);
if (this.focusTarget.width && this.focusTarget.height) {
this.zoomModifier = this.getTargetZoomModifierFor(this.focusTarget.width, this.focusTarget.height);
}
this.game.events.emit(WaScaleManagerEvent.RefreshFocusOnTarget, this.focusTarget);
}
public setFocusTarget(targetDimensions?: { x: number; y: number; width: number; height: number }): void {
public setFocusTarget(targetDimensions?: WaScaleManagerFocusTarget): void {
this.focusTarget = targetDimensions;
}
@ -109,7 +113,7 @@ export class WaScaleManager {
}
}
public getFocusTarget(): { x: number; y: number; width: number; height: number } | undefined {
public getFocusTarget(): WaScaleManagerFocusTarget | undefined {
return this.focusTarget;
}

4
maps/tests/CameraApi/script.php
View file

@ -21,8 +21,8 @@
WA.camera.setViewport(
parseInt(xField.value),
parseInt(yField.value),
parseInt(widthField.value),
parseInt(heightField.value),
widthField.value ? parseInt(widthField.value) : undefined,
heightField.value ? parseInt(heightField.value) : undefined,
lockField.checked,
smoothField.checked,
);