Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Camera now centers on focusable zone properly

Browse source
This commit is contained in:
Hanusiak Piotr 2022-01-13 18:54:38 +01:00
parent a164cedf3f
commit c2b2385e96
6 changed files with 97 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -211,7 +211,6 @@ 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);

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

@ -25,7 +25,6 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
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 },

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

@ -85,26 +85,19 @@ export class CameraManager extends Phaser.Events.EventEmitter {
const zoomModifierChange =
setTo.width && setTo.height ? this.getZoomModifierChange(setTo.width, setTo.height) : 0;
this.camera.stopFollow();
this.camera.pan(
setTo.x + (setTo.width ?? 0) * 0.5,
setTo.y + (setTo.height ?? 0) * 0.5,
duration,
Easing.SineEaseOut,
true,
(camera, progress, x, y) => {
if (this.cameraMode === CameraMode.Positioned) {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
}
if (progress === 1) {
this.playerToFollow?.once(hasMovedEventName, () => {
if (this.playerToFollow) {
this.startFollowPlayer(this.playerToFollow, duration);
}
});
}
this.camera.pan(setTo.x, setTo.y, duration, Easing.SineEaseOut, true, (camera, progress, x, y) => {
if (this.cameraMode === CameraMode.Positioned) {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
}
);
if (progress === 1) {
this.playerToFollow?.once(hasMovedEventName, () => {
if (this.playerToFollow) {
this.startFollowPlayer(this.playerToFollow, duration);
}
});
}
});
}
private getZoomModifierChange(width: number, height: number): number {
@ -135,17 +128,10 @@ export class CameraManager extends Phaser.Events.EventEmitter {
: 0;
this.camera.stopFollow();
this.playerToFollow = undefined;
this.camera.pan(
focusOn.x + (focusOn.width ?? 0) * 0.5 * marginMult,
focusOn.y + (focusOn.height ?? 0) * 0.5 * marginMult,
duration,
Easing.SineEaseOut,
true,
(camera, progress, x, y) => {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
}
);
this.camera.pan(focusOn.x, focusOn.y, duration, Easing.SineEaseOut, true, (camera, progress, x, y) => {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
});
}
public leaveFocusMode(player: Player, duration = 0): void {
@ -249,7 +235,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
if (!focusOn) {
return;
}
this.camera.centerOn(focusOn.x + focusOn.width * 0.5, focusOn.y + focusOn.height * 0.5);
this.camera.centerOn(focusOn.x, focusOn.y);
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
}
);

7
front/src/Phaser/Game/GameScene.ts
View file

@ -840,7 +840,12 @@ export class GameScene extends DirtyScene {
if (focusable && focusable.value === true) {
const zoomMargin = zone.properties?.find((property) => property.name === "zoom_margin");
this.cameraManager.enterFocusMode(
zone,
{
x: zone.x + zone.width * 0.5,
y: zone.y + zone.height * 0.5,
width: zone.width,
height: zone.height,
},
zoomMargin ? Math.max(0, Number(zoomMargin.value)) : undefined
);
break;