Refactoring and documentation update
This commit is contained in:
parent
5b6a8ca4d7
commit
f761858328
23
docs/maps/api-camera.md
Normal file
23
docs/maps/api-camera.md
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{.section-title.accent.text-primary}
|
||||||
|
# API Camera functions Reference
|
||||||
|
|
||||||
|
### Listen to the camera update
|
||||||
|
|
||||||
|
```
|
||||||
|
WA.camera.onCameraUpdate(callback: WasCameraUpdatedEventCallback): void
|
||||||
|
```
|
||||||
|
|
||||||
|
Listens to the updating of the camera linked to the player. It will trigger for every update of the camera's properties (position or scale for instance) or of the Game Object it is linked to (undestand: if the player moves). An event will then be sent.
|
||||||
|
|
||||||
|
The event has the following attributes :
|
||||||
|
* **x (number):** coordinate X of the camera's world view (the area looked at by the camera).
|
||||||
|
* **y (number):** coordinate Y of the camera's world view.
|
||||||
|
* **width (number):** the width of the camera's world view.
|
||||||
|
* **height (number):** the height of the camera's world view.
|
||||||
|
|
||||||
|
**callback:** the function that will be called when the camera is updated.
|
||||||
|
|
||||||
|
Example :
|
||||||
|
```javascript
|
||||||
|
WA.camera.onCameraUpdate((worldView) => console.log(worldView));
|
||||||
|
```
|
@ -10,5 +10,6 @@
|
|||||||
- [UI functions](api-ui.md)
|
- [UI functions](api-ui.md)
|
||||||
- [Sound functions](api-sound.md)
|
- [Sound functions](api-sound.md)
|
||||||
- [Controls functions](api-controls.md)
|
- [Controls functions](api-controls.md)
|
||||||
|
- [Camera functions](api-camera.md)
|
||||||
|
|
||||||
- [List of deprecated functions](api-deprecated.md)
|
- [List of deprecated functions](api-deprecated.md)
|
||||||
|
@ -30,7 +30,7 @@ import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEv
|
|||||||
import type { ChangeLayerEvent } from "./ChangeLayerEvent";
|
import type { ChangeLayerEvent } from "./ChangeLayerEvent";
|
||||||
import { isPlayerPropertyEvent } from "./PlayerPropertyEvent";
|
import { isPlayerPropertyEvent } from "./PlayerPropertyEvent";
|
||||||
import { isPlayerPosition } from "./PlayerPosition";
|
import { isPlayerPosition } from "./PlayerPosition";
|
||||||
import type { HasCameraMovedEvent } from "./HasCameraMovedEvent";
|
import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
|
||||||
|
|
||||||
export interface TypedMessageEvent<T> extends MessageEvent {
|
export interface TypedMessageEvent<T> extends MessageEvent {
|
||||||
data: T;
|
data: T;
|
||||||
@ -51,7 +51,7 @@ export type IframeEventMap = {
|
|||||||
displayBubble: null;
|
displayBubble: null;
|
||||||
removeBubble: null;
|
removeBubble: null;
|
||||||
onPlayerMove: undefined;
|
onPlayerMove: undefined;
|
||||||
onCameraMove: undefined;
|
onCameraUpdate: undefined;
|
||||||
showLayer: LayerEvent;
|
showLayer: LayerEvent;
|
||||||
hideLayer: LayerEvent;
|
hideLayer: LayerEvent;
|
||||||
setProperty: SetPropertyEvent;
|
setProperty: SetPropertyEvent;
|
||||||
@ -82,7 +82,7 @@ export interface IframeResponseEventMap {
|
|||||||
leaveLayerEvent: ChangeLayerEvent;
|
leaveLayerEvent: ChangeLayerEvent;
|
||||||
buttonClickedEvent: ButtonClickedEvent;
|
buttonClickedEvent: ButtonClickedEvent;
|
||||||
hasPlayerMoved: HasPlayerMovedEvent;
|
hasPlayerMoved: HasPlayerMovedEvent;
|
||||||
hasCameraMoved: HasCameraMovedEvent;
|
wasCameraUpdated: WasCameraUpdatedEvent;
|
||||||
menuItemClicked: MenuItemClickedEvent;
|
menuItemClicked: MenuItemClickedEvent;
|
||||||
setVariable: SetVariableEvent;
|
setVariable: SetVariableEvent;
|
||||||
messageTriggered: MessageReferenceEvent;
|
messageTriggered: MessageReferenceEvent;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import * as tg from "generic-type-guard";
|
import * as tg from "generic-type-guard";
|
||||||
|
|
||||||
export const isHasCameraMovedEvent = new tg.IsInterface()
|
export const isWasCameraUpdatedEvent = new tg.IsInterface()
|
||||||
.withProperties({
|
.withProperties({
|
||||||
x: tg.isNumber,
|
x: tg.isNumber,
|
||||||
y: tg.isNumber,
|
y: tg.isNumber,
|
||||||
@ -13,6 +13,6 @@ export const isHasCameraMovedEvent = new tg.IsInterface()
|
|||||||
* A message sent from the game to the iFrame to notify a movement from the camera.
|
* A message sent from the game to the iFrame to notify a movement from the camera.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export type HasCameraMovedEvent = tg.GuardedType<typeof isHasCameraMovedEvent>;
|
export type WasCameraUpdatedEvent = tg.GuardedType<typeof isWasCameraUpdatedEvent>;
|
||||||
|
|
||||||
export type HasCameraMovedEventCallback = (event: HasCameraMovedEvent) => void;
|
export type WasCameraUpdatedEventCallback = (event: WasCameraUpdatedEvent) => void;
|
@ -31,7 +31,7 @@ import type { SetVariableEvent } from "./Events/SetVariableEvent";
|
|||||||
import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
|
import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
|
||||||
import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
|
import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
|
||||||
import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
|
import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
|
||||||
import type { HasCameraMovedEvent } from "./Events/HasCameraMovedEvent";
|
import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
|
||||||
|
|
||||||
type AnswererCallback<T extends keyof IframeQueryMap> = (
|
type AnswererCallback<T extends keyof IframeQueryMap> = (
|
||||||
query: IframeQueryMap[T]["query"],
|
query: IframeQueryMap[T]["query"],
|
||||||
@ -95,7 +95,7 @@ class IframeListener {
|
|||||||
private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>();
|
private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>();
|
||||||
private readonly scripts = new Map<string, HTMLIFrameElement>();
|
private readonly scripts = new Map<string, HTMLIFrameElement>();
|
||||||
private sendPlayerMove: boolean = false;
|
private sendPlayerMove: boolean = false;
|
||||||
private sendCameraMove: boolean = false;
|
private sendCameraUpdate: boolean = false;
|
||||||
|
|
||||||
// Note: we are forced to type this in unknown and later cast with "as" because of https://github.com/microsoft/TypeScript/issues/31904
|
// Note: we are forced to type this in unknown and later cast with "as" because of https://github.com/microsoft/TypeScript/issues/31904
|
||||||
private answerers: {
|
private answerers: {
|
||||||
@ -227,8 +227,8 @@ class IframeListener {
|
|||||||
this._removeBubbleStream.next();
|
this._removeBubbleStream.next();
|
||||||
} else if (payload.type == "onPlayerMove") {
|
} else if (payload.type == "onPlayerMove") {
|
||||||
this.sendPlayerMove = true;
|
this.sendPlayerMove = true;
|
||||||
} else if (payload.type == "onCameraMove") {
|
} else if (payload.type == "onCameraUpdate") {
|
||||||
this.sendCameraMove = true;
|
this.sendCameraUpdate = true;
|
||||||
} else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
|
} else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
|
||||||
this._setTilesStream.next(payload.data);
|
this._setTilesStream.next(payload.data);
|
||||||
} else if (payload.type == "modifyEmbeddedWebsite" && isEmbeddedWebsiteEvent(payload.data)) {
|
} else if (payload.type == "modifyEmbeddedWebsite" && isEmbeddedWebsiteEvent(payload.data)) {
|
||||||
@ -427,10 +427,10 @@ class IframeListener {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hasCameraMoved(event: HasCameraMovedEvent) {
|
sendCameraUpdated(event: WasCameraUpdatedEvent) {
|
||||||
if (this.sendCameraMove) {
|
if (this.sendCameraUpdate) {
|
||||||
this.postMessage({
|
this.postMessage({
|
||||||
type: "hasCameraMoved",
|
type: "wasCameraUpdated",
|
||||||
data: event,
|
data: event,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -1,26 +1,26 @@
|
|||||||
import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
|
import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
|
||||||
import { Subject } from "rxjs";
|
import { Subject } from "rxjs";
|
||||||
import type { HasCameraMovedEvent, HasCameraMovedEventCallback } from "../Events/HasCameraMovedEvent";
|
import type { WasCameraUpdatedEvent, WasCameraUpdatedEventCallback } from "../Events/WasCameraUpdatedEvent";
|
||||||
import { apiCallback } from "./registeredCallbacks";
|
import { apiCallback } from "./registeredCallbacks";
|
||||||
import { isHasCameraMovedEvent } from "../Events/HasCameraMovedEvent";
|
import { isWasCameraUpdatedEvent } from "../Events/WasCameraUpdatedEvent";
|
||||||
|
|
||||||
const moveStream = new Subject<HasCameraMovedEvent>();
|
const moveStream = new Subject<WasCameraUpdatedEvent>();
|
||||||
|
|
||||||
export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdventureCameraCommands> {
|
export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdventureCameraCommands> {
|
||||||
callbacks = [
|
callbacks = [
|
||||||
apiCallback({
|
apiCallback({
|
||||||
type: "hasCameraMoved",
|
type: "wasCameraUpdated",
|
||||||
typeChecker: isHasCameraMovedEvent,
|
typeChecker: isWasCameraUpdatedEvent,
|
||||||
callback: (payloadData) => {
|
callback: (payloadData) => {
|
||||||
moveStream.next(payloadData);
|
moveStream.next(payloadData);
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
];
|
];
|
||||||
|
|
||||||
onCameraMove(callback: HasCameraMovedEventCallback): void {
|
onCameraUpdate(callback: WasCameraUpdatedEventCallback): void {
|
||||||
moveStream.subscribe(callback);
|
moveStream.subscribe(callback);
|
||||||
sendToWorkadventure({
|
sendToWorkadventure({
|
||||||
type: "onCameraMove",
|
type: "onCameraUpdate",
|
||||||
data: null,
|
data: null,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -90,7 +90,7 @@ import { contactPageStore } from "../../Stores/MenuStore";
|
|||||||
import { GameMapProperties } from "./GameMapProperties";
|
import { GameMapProperties } from "./GameMapProperties";
|
||||||
import SpriteSheetFile = Phaser.Loader.FileTypes.SpriteSheetFile;
|
import SpriteSheetFile = Phaser.Loader.FileTypes.SpriteSheetFile;
|
||||||
import Camera = Phaser.Cameras.Scene2D.Camera;
|
import Camera = Phaser.Cameras.Scene2D.Camera;
|
||||||
import type { HasCameraMovedEvent } from "../../Api/Events/HasCameraMovedEvent";
|
import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
|
||||||
|
|
||||||
export interface GameSceneInitInterface {
|
export interface GameSceneInitInterface {
|
||||||
initPosition: PointInterface | null;
|
initPosition: PointInterface | null;
|
||||||
@ -754,13 +754,13 @@ export class GameScene extends DirtyScene {
|
|||||||
|
|
||||||
//listen event to share the actual worldView when the camera is updated
|
//listen event to share the actual worldView when the camera is updated
|
||||||
this.cameras.main.on("followupdate", (camera: Camera) => {
|
this.cameras.main.on("followupdate", (camera: Camera) => {
|
||||||
const worldView: HasCameraMovedEvent = {
|
const worldView: WasCameraUpdatedEvent = {
|
||||||
x: camera.worldView.x,
|
x: camera.worldView.x,
|
||||||
y: camera.worldView.y,
|
y: camera.worldView.y,
|
||||||
width: camera.worldView.width,
|
width: camera.worldView.width,
|
||||||
height: camera.worldView.height,
|
height: camera.worldView.height,
|
||||||
};
|
};
|
||||||
iframeListener.hasCameraMoved(worldView);
|
iframeListener.sendCameraUpdated(worldView);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set up variables manager
|
// Set up variables manager
|
||||||
|
Loading…
Reference in New Issue
Block a user