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

send camera update event from CameraManager

Browse source
This commit is contained in:
Hanusiak Piotr 2021-12-17 11:05:11 +01:00
parent 4871b406de
commit f8353bd7b5
3 changed files with 62 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,6 +20,18 @@ export enum CameraMode {
Focus = "Focus",
}
export enum CameraManagerEvent {
CameraUpdate = "CameraUpdate",
}
export interface CameraManagerEventCameraUpdateData {
x: number;
y: number;
width: number;
height: number;
zoom: number;
}
export class CameraManager extends Phaser.Events.EventEmitter {
private scene: GameScene;
private camera: Phaser.Cameras.Scene2D.Camera;
@ -78,6 +90,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
(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, () => {
@ -125,6 +138,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
true,
(camera, progress, x, y) => {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
}
);
}
@ -157,6 +171,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
const shiftY =
(this.playerToFollow.y - this.camera.worldView.height * 0.5 - oldPos.y) * tween.getValue();
this.camera.setScroll(oldPos.x + shiftX, oldPos.y + shiftY);
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
},
onComplete: () => {
this.camera.startFollow(player, true);
@ -205,6 +220,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
ease: Easing.SineEaseOut,
onUpdate: (tween: Phaser.Tweens.Tween) => {
this.waScaleManager.zoomModifier = tween.getValue();
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
},
});
}
@ -222,7 +238,26 @@ export class CameraManager extends Phaser.Events.EventEmitter {
return;
}
this.camera.centerOn(focusOn.x + focusOn.width * 0.5, focusOn.y + focusOn.height * 0.5);
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
}
);
this.camera.on("followupdate", () => {
this.sendCameraUpdateEvent();
});
}
private sendCameraUpdateEvent(): void {
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
}
private getCameraUpdateEventData(): CameraManagerEventCameraUpdateData {
return {
x: this.camera.worldView.x,
y: this.camera.worldView.y,
width: this.camera.worldView.width,
height: this.camera.worldView.height,
zoom: this.camera.scaleManager.zoom,
};
}
}

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

@ -65,7 +65,7 @@ import type { ActionableItem } from "../Items/ActionableItem";
import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface";
import type { ITiledMap, ITiledMapLayer, ITiledMapProperty, ITiledMapObject, ITiledTileSet } from "../Map/ITiledMap";
import type { AddPlayerInterface } from "./AddPlayerInterface";
import { CameraManager } from "./CameraManager";
import { CameraManager, CameraManagerEvent, CameraManagerEventCameraUpdateData } from "./CameraManager";
import type { HasPlayerMovedEvent } from "../../Api/Events/HasPlayerMovedEvent";
import type { Character } from "../Entity/Character";
@ -1102,28 +1102,31 @@ ${escapedMessage}
this.iframeSubscriptionList.push(
iframeListener.trackCameraUpdateStream.subscribe(() => {
if (!this.firstCameraUpdateSent) {
this.cameras.main.on("followupdate", (camera: Camera) => {
const cameraEvent: WasCameraUpdatedEvent = {
x: camera.worldView.x,
y: camera.worldView.y,
width: camera.worldView.width,
height: camera.worldView.height,
zoom: camera.scaleManager.zoom,
};
if (
this.lastCameraEvent?.x == cameraEvent.x &&
this.lastCameraEvent?.y == cameraEvent.y &&
this.lastCameraEvent?.width == cameraEvent.width &&
this.lastCameraEvent?.height == cameraEvent.height &&
this.lastCameraEvent?.zoom == cameraEvent.zoom
) {
return;
}
this.cameraManager.on(
CameraManagerEvent.CameraUpdate,
(data: CameraManagerEventCameraUpdateData) => {
const cameraEvent: WasCameraUpdatedEvent = {
x: data.x,
y: data.y,
width: data.width,
height: data.height,
zoom: data.zoom,
};
if (
this.lastCameraEvent?.x == cameraEvent.x &&
this.lastCameraEvent?.y == cameraEvent.y &&
this.lastCameraEvent?.width == cameraEvent.width &&
this.lastCameraEvent?.height == cameraEvent.height &&
this.lastCameraEvent?.zoom == cameraEvent.zoom
) {
return;
}
this.lastCameraEvent = cameraEvent;
iframeListener.sendCameraUpdated(cameraEvent);
this.firstCameraUpdateSent = true;
});
this.lastCameraEvent = cameraEvent;
iframeListener.sendCameraUpdated(cameraEvent);
this.firstCameraUpdateSent = true;
}
);
iframeListener.sendCameraUpdated(this.cameras.main);
}

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

@ -4,7 +4,8 @@
<script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
<script>
window.addEventListener('load', () => {
console.log('On load');
//@ts-ignore
WA.camera.onCameraUpdate((worldView) => console.log(worldView));
WA.onInit().then(() => {
console.log('After WA init');
const setPositionButton = document.getElementById('setPositionButton');