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

Merge branch 'develop' of github.com:thecodingmachine/workadventure

Browse Source
This commit is contained in:
_Bastler 2022-01-17 08:21:06 +01:00
commit 24aaa4582f
19 changed files with 798 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
back/src/Model/GameRoom.ts
View File

@ -213,13 +213,13 @@ export class GameRoom {
}
private updateUserGroup(user: User): void {
user.group?.updatePosition();
user.group?.searchForNearbyUsers();
if (user.silent) {
return;
}
const group = user.group;
const closestItem: User | Group | null = this.searchClosestAvailableUserOrGroup(user);
if (group === undefined) {
// If the user is not part of a group:
// should he join a group?
@ -229,12 +229,11 @@ export class GameRoom {
return;
}
const closestItem: User | Group | null = this.searchClosestAvailableUserOrGroup(user);
if (closestItem !== null) {
if (closestItem instanceof Group) {
// Let's join the group!
closestItem.join(user);
closestItem.setOutOfBounds(false);
} else {
const closestUser: User = closestItem;
const group: Group = new Group(
@ -249,32 +248,95 @@ export class GameRoom {
}
}
} else {
// If the user is part of a group:
// should he leave the group?
let noOneOutOfBounds = true;
group.getUsers().forEach((foreignUser: User) => {
if (foreignUser.group === undefined) {
return;
let hasKickOutSomeone = false;
let followingMembers: User[] = [];
const previewNewGroupPosition = group.previewGroupPosition();
if (!previewNewGroupPosition) {
this.leaveGroup(user);
return;
}
if (user.hasFollowers() || user.following) {
followingMembers = user.hasFollowers()
? group.getUsers().filter((currentUser) => currentUser.following === user)
: group.getUsers().filter((currentUser) => currentUser.following === user.following);
// If all group members are part of the same follow group
if (group.getUsers().length - 1 === followingMembers.length) {
let isOutOfBounds = false;
// If a follower is far away from the leader, "outOfBounds" is set to true
for (const member of followingMembers) {
const distance = GameRoom.computeDistanceBetweenPositions(
member.getPosition(),
previewNewGroupPosition
);
if (distance > this.groupRadius) {
isOutOfBounds = true;
break;
}
}
group.setOutOfBounds(isOutOfBounds);
}
const usrPos = foreignUser.getPosition();
const grpPos = foreignUser.group.getPosition();
const distance = GameRoom.computeDistanceBetweenPositions(usrPos, grpPos);
}
// Check if the moving user has kicked out another user
for (const headMember of group.getGroupHeads()) {
if (!headMember.group) {
this.leaveGroup(headMember);
continue;
}
const headPosition = headMember.getPosition();
const distance = GameRoom.computeDistanceBetweenPositions(headPosition, previewNewGroupPosition);
if (distance > this.groupRadius) {
if (foreignUser.hasFollowers() || foreignUser.following) {
// If one user is out of the group bounds BUT following, the group still exists... but should be hidden.
// We put it in 'outOfBounds' mode
group.setOutOfBounds(true);
noOneOutOfBounds = false;
} else {
this.leaveGroup(foreignUser);
}
hasKickOutSomeone = true;
break;
}
}
/**
* If the current moving user has kicked another user from the radius,
* the moving user leaves the group because he is too far away.
*/
const userDistance = GameRoom.computeDistanceBetweenPositions(user.getPosition(), previewNewGroupPosition);
if (hasKickOutSomeone && userDistance > this.groupRadius) {
if (user.hasFollowers() && group.getUsers().length === 3 && followingMembers.length === 1) {
const other = group
.getUsers()
.find((currentUser) => !currentUser.hasFollowers() && !currentUser.following);
if (other) {
this.leaveGroup(other);
}
} else if (user.hasFollowers()) {
this.leaveGroup(user);
for (const member of followingMembers) {
this.leaveGroup(member);
}
// Re-create a group with the followers
const newGroup: Group = new Group(
this.roomUrl,
[user, ...followingMembers],
this.groupRadius,
this.connectCallback,
this.disconnectCallback,
this.positionNotifier
);
this.groups.add(newGroup);
} else {
this.leaveGroup(user);
}
});
if (noOneOutOfBounds && !user.group?.isEmpty()) {
group.setOutOfBounds(false);
}
}
user.group?.updatePosition();
user.group?.searchForNearbyUsers();
}
public sendToOthersInGroupIncludingUser(user: User, message: ServerToClientMessage): void {

57
back/src/Model/Group.ts
View File

@ -59,6 +59,39 @@ export class Group implements Movable {
};
}
/**
* Returns the list of users of the group, ignoring any "followers".
* Useful to compute the position of the group if a follower is "trapped" far away from the the leader.
*/
getGroupHeads(): User[] {
return Array.from(this.users).filter((user) => user.group?.leader === user || !user.following);
}
/**
* Preview the position of the group but don't update it
*/
previewGroupPosition(): { x: number; y: number } | undefined {
const users = this.getGroupHeads();
let x = 0;
let y = 0;
if (users.length === 0) {
return undefined;
}
users.forEach((user: User) => {
const position = user.getPosition();
x += position.x;
y += position.y;
});
x /= users.length;
y /= users.length;
return { x, y };
}
/**
* Computes the barycenter of all users (i.e. the center of the group)
*/
@ -66,19 +99,15 @@ export class Group implements Movable {
const oldX = this.x;
const oldY = this.y;
let x = 0;
let y = 0;
// Let's compute the barycenter of all users.
this.users.forEach((user: User) => {
const position = user.getPosition();
x += position.x;
y += position.y;
});
x /= this.users.size;
y /= this.users.size;
if (this.users.size === 0) {
throw new Error("EMPTY GROUP FOUND!!!");
const newPosition = this.previewGroupPosition();
if (!newPosition) {
return;
}
const { x, y } = newPosition;
this.x = x;
this.y = y;
@ -97,10 +126,12 @@ export class Group implements Movable {
if (!this.currentZone) return;
for (const user of this.positionNotifier.getAllUsersInSquareAroundZone(this.currentZone)) {
// Todo: Merge two groups with a leader
if (user.group || this.isFull()) return; //we ignore users that are already in a group.
const distance = GameRoom.computeDistanceBetweenPositions(user.getPosition(), this.getPosition());
if (distance < this.groupRadius) {
this.join(user);
this.setOutOfBounds(false);
this.updatePosition();
}
}
@ -176,4 +207,8 @@ export class Group implements Movable {
this.outOfBounds = true;
}
}
get getOutOfBounds() {
return this.outOfBounds;
}
}

169
back/tests/PositionNotifierTest.ts
View File

@ -1,11 +1,10 @@
import "jasmine";
import {PositionNotifier} from "../src/Model/PositionNotifier";
import {User, UserSocket} from "../src/Model/User";
import {Zone} from "_Model/Zone";
import {Movable} from "_Model/Movable";
import {PositionInterface} from "_Model/PositionInterface";
import {ZoneSocket} from "../src/RoomManager";
import { PositionNotifier } from "../src/Model/PositionNotifier";
import { User, UserSocket } from "../src/Model/User";
import { Zone } from "_Model/Zone";
import { Movable } from "_Model/Movable";
import { PositionInterface } from "_Model/PositionInterface";
import { ZoneSocket } from "../src/RoomManager";
describe("PositionNotifier", () => {
it("should receive notifications when player moves", () => {
@ -13,28 +12,59 @@ describe("PositionNotifier", () => {
let moveTriggered = false;
let leaveTriggered = false;
const positionNotifier = new PositionNotifier(300, 300, (thing: Movable) => {
enterTriggered = true;
}, (thing: Movable, position: PositionInterface) => {
moveTriggered = true;
}, (thing: Movable) => {
leaveTriggered = true;
}, () => {},
() => {});
const positionNotifier = new PositionNotifier(
300,
300,
(thing: Movable) => {
enterTriggered = true;
},
(thing: Movable, position: PositionInterface) => {
moveTriggered = true;
},
(thing: Movable) => {
leaveTriggered = true;
},
() => {},
() => {}
);
const user1 = new User(1, 'test', '10.0.0.2', {
x: 500,
y: 500,
moving: false,
direction: 'down'
}, false, positionNotifier, {} as UserSocket, [], null, 'foo', []);
const user1 = new User(
1,
"test",
"10.0.0.2",
{
x: 500,
y: 500,
moving: false,
direction: "down",
},
false,
positionNotifier,
{} as UserSocket,
[],
null,
"foo",
[]
);
const user2 = new User(2, 'test', '10.0.0.2', {
x: -9999,
y: -9999,
moving: false,
direction: 'down'
}, false, positionNotifier, {} as UserSocket, [], null, 'foo', []);
const user2 = new User(
2,
"test",
"10.0.0.2",
{
x: -9999,
y: -9999,
moving: false,
direction: "down",
},
false,
positionNotifier,
{} as UserSocket,
[],
null,
"foo",
[]
);
positionNotifier.addZoneListener({} as ZoneSocket, 0, 0);
positionNotifier.addZoneListener({} as ZoneSocket, 0, 1);
@ -47,21 +77,21 @@ describe("PositionNotifier", () => {
bottom: 500
});*/
user2.setPosition({x: 500, y: 500, direction: 'down', moving: false});
user2.setPosition({ x: 500, y: 500, direction: "down", moving: false });
expect(enterTriggered).toBe(true);
expect(moveTriggered).toBe(false);
enterTriggered = false;
// Move inside the zone
user2.setPosition({x:501, y:500, direction: 'down', moving: false});
user2.setPosition({ x: 501, y: 500, direction: "down", moving: false });
expect(enterTriggered).toBe(false);
expect(moveTriggered).toBe(true);
moveTriggered = false;
// Move out of the zone in a zone that we don't track
user2.setPosition({x: 901, y: 500, direction: 'down', moving: false});
user2.setPosition({ x: 901, y: 500, direction: "down", moving: false });
expect(enterTriggered).toBe(false);
expect(moveTriggered).toBe(false);
@ -69,7 +99,7 @@ describe("PositionNotifier", () => {
leaveTriggered = false;
// Move back in
user2.setPosition({x: 500, y: 500, direction: 'down', moving: false});
user2.setPosition({ x: 500, y: 500, direction: "down", moving: false });
expect(enterTriggered).toBe(true);
expect(moveTriggered).toBe(false);
expect(leaveTriggered).toBe(false);
@ -89,28 +119,59 @@ describe("PositionNotifier", () => {
let moveTriggered = false;
let leaveTriggered = false;
const positionNotifier = new PositionNotifier(300, 300, (thing: Movable, fromZone: Zone|null ) => {
enterTriggered = true;
}, (thing: Movable, position: PositionInterface) => {
moveTriggered = true;
}, (thing: Movable) => {
leaveTriggered = true;
}, () => {},
() => {});
const positionNotifier = new PositionNotifier(
300,
300,
(thing: Movable, fromZone: Zone | null) => {
enterTriggered = true;
},
(thing: Movable, position: PositionInterface) => {
moveTriggered = true;
},
(thing: Movable) => {
leaveTriggered = true;
},
() => {},
() => {}
);
const user1 = new User(1, 'test', '10.0.0.2', {
x: 500,
y: 500,
moving: false,
direction: 'down'
}, false, positionNotifier, {} as UserSocket, [], null, 'foo', []);
const user1 = new User(
1,
"test",
"10.0.0.2",
{
x: 500,
y: 500,
moving: false,
direction: "down",
},
false,
positionNotifier,
{} as UserSocket,
[],
null,
"foo",
[]
);
const user2 = new User(2, 'test', '10.0.0.2', {
x: 0,
y: 0,
moving: false,
direction: 'down'
}, false, positionNotifier, {} as UserSocket, [], null, 'foo', []);
const user2 = new User(
2,
"test",
"10.0.0.2",
{
x: 0,
y: 0,
moving: false,
direction: "down",
},
false,
positionNotifier,
{} as UserSocket,
[],
null,
"foo",
[]
);
const listener = {} as ZoneSocket;
positionNotifier.addZoneListener(listener, 0, 0);
@ -126,14 +187,12 @@ describe("PositionNotifier", () => {
positionNotifier.enter(user1);
positionNotifier.enter(user2);
//expect(newUsers.length).toBe(2);
expect(enterTriggered).toBe(true);
enterTriggered = false;
//positionNotifier.updatePosition(user2, {x:500, y:500}, {x:0, y: 0})
user2.setPosition({x: 500, y: 500, direction: 'down', moving: false});
user2.setPosition({ x: 500, y: 500, direction: "down", moving: false });
expect(enterTriggered).toBe(true);
expect(moveTriggered).toBe(false);
@ -184,4 +243,4 @@ describe("PositionNotifier", () => {
enterTriggered = false;
//expect(newUsers.length).toBe(2);
});
})
});

28
docs/maps/api-camera.md
View File

@ -1,6 +1,32 @@
{.section-title.accent.text-primary}
# API Camera functions Reference
### Start following player
```javascript
WA.camera.followPlayer(smooth: boolean): void
```
Set camera to follow the player. Set `smooth` to true for smooth transition.
### Set spot for camera to look at
```javascript
WA.camera.set(
x: number,
y: number,
width?: number,
height?: number,
lock: boolean = false,
smooth: boolean = false,
): void
```
Set camera to look at given spot.
Setting `width` and `height` will adjust zoom.
Set `lock` to true to lock camera in this position.
Set `smooth` to true for smooth transition.
### Listen to camera updates
```
@ -21,4 +47,4 @@ Example :
```javascript
const subscription = WA.camera.onCameraUpdate().subscribe((worldView) => console.log(worldView));
//later...
subscription.unsubscribe();
subscription.unsubscribe();

21
docs/maps/api-player.md
View File

@ -58,6 +58,27 @@ WA.onInit().then(() => {
})
```
### Get the position of the player
```
WA.player.getPosition(): Promise<Position>
```
The player's current position is available using the `WA.player.getPosition()` function.
`Position` has the following attributes :
* **x (number) :** The coordinate x of the current player's position.
* **y (number) :** The coordinate y of the current player's position.
{.alert.alert-info}
You need to wait for the end of the initialization before calling `WA.player.getPosition()`
```typescript
WA.onInit().then(() => {
console.log('Position: ', WA.player.getPosition());
})
```
### Get the user-room token of the player
```

11
front/src/Api/Events/CameraFollowPlayerEvent.ts Normal file
View File

@ -0,0 +1,11 @@
import * as tg from "generic-type-guard";
export const isCameraFollowPlayerEvent = new tg.IsInterface()
.withProperties({
smooth: tg.isBoolean,
})
.get();
/**
* A message sent from the iFrame to the game to make the camera follow player.
*/
export type CameraFollowPlayerEvent = tg.GuardedType<typeof isCameraFollowPlayerEvent>;

16
front/src/Api/Events/CameraSetEvent.ts Normal file
View File

@ -0,0 +1,16 @@
import * as tg from "generic-type-guard";
export const isCameraSetEvent = new tg.IsInterface()
.withProperties({
x: tg.isNumber,
y: tg.isNumber,
width: tg.isOptional(tg.isNumber),
height: tg.isOptional(tg.isNumber),
lock: tg.isBoolean,
smooth: tg.isBoolean,
})
.get();
/**
* A message sent from the iFrame to the game to change the camera position.
*/
export type CameraSetEvent = tg.GuardedType<typeof isCameraSetEvent>;

2
front/src/Api/Events/GameStateEvent.ts
View File

@ -9,8 +9,8 @@ export const isGameStateEvent = new tg.IsInterface()
startLayerName: tg.isUnion(tg.isString, tg.isNull),
tags: tg.isArray(tg.isString),
variables: tg.isObject,
userRoomToken: tg.isUnion(tg.isString, tg.isUndefined),
playerVariables: tg.isObject,
userRoomToken: tg.isUnion(tg.isString, tg.isUndefined),
})
.get();
/**

8
front/src/Api/Events/IframeEvent.ts
View File

@ -28,10 +28,12 @@ import type { MessageReferenceEvent } from "./ui/TriggerActionMessageEvent";
import { isMessageReferenceEvent, isTriggerActionMessageEvent } from "./ui/TriggerActionMessageEvent";
import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEvent";
import type { ChangeLayerEvent } from "./ChangeLayerEvent";
import type { ChangeZoneEvent } from "./ChangeZoneEvent";
import { isColorEvent } from "./ColorEvent";
import { isPlayerPosition } from "./PlayerPosition";
import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
import type { ChangeZoneEvent } from "./ChangeZoneEvent";
import type { CameraSetEvent } from "./CameraSetEvent";
import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent";
import { isColorEvent } from "./ColorEvent";
import { isGetPropertyEvent } from "./GetPropertyEvent";
export interface TypedMessageEvent<T> extends MessageEvent {
@ -44,6 +46,8 @@ export interface TypedMessageEvent<T> extends MessageEvent {
export type IframeEventMap = {
loadPage: LoadPageEvent;
chat: ChatEvent;
cameraFollowPlayer: CameraFollowPlayerEvent;
cameraSet: CameraSetEvent;
openPopup: OpenPopupEvent;
closePopup: ClosePopupEvent;
openTab: OpenTabEvent;

12
front/src/Api/IframeListener.ts
View File

@ -33,6 +33,8 @@ import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Store
import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
import { CameraSetEvent, isCameraSetEvent } from "./Events/CameraSetEvent";
import { CameraFollowPlayerEvent, isCameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent";
type AnswererCallback<T extends keyof IframeQueryMap> = (
query: IframeQueryMap[T]["query"],
@ -56,6 +58,12 @@ class IframeListener {
private readonly _disablePlayerControlStream: Subject<void> = new Subject();
public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();
private readonly _cameraSetStream: Subject<CameraSetEvent> = new Subject();
public readonly cameraSetStream = this._cameraSetStream.asObservable();
private readonly _cameraFollowPlayerStream: Subject<CameraFollowPlayerEvent> = new Subject();
public readonly cameraFollowPlayerStream = this._cameraFollowPlayerStream.asObservable();
private readonly _enablePlayerControlStream: Subject<void> = new Subject();
public readonly enablePlayerControlStream = this._enablePlayerControlStream.asObservable();
@ -205,6 +213,10 @@ class IframeListener {
this._hideLayerStream.next(payload.data);
} else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
this._setPropertyStream.next(payload.data);
} else if (payload.type === "cameraSet" && isCameraSetEvent(payload.data)) {
this._cameraSetStream.next(payload.data);
} else if (payload.type === "cameraFollowPlayer" && isCameraFollowPlayerEvent(payload.data)) {
this._cameraFollowPlayerStream.next(payload.data);
} else if (payload.type === "chat" && isChatEvent(payload.data)) {
scriptUtils.sendAnonymousChat(payload.data);
} else if (payload.type === "openPopup" && isOpenPopupEvent(payload.data)) {

21
front/src/Api/iframe/camera.ts
View File

@ -17,6 +17,27 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
}),
];
public set(
x: number,
y: number,
width?: number,
height?: number,
lock: boolean = false,
smooth: boolean = false
): void {
sendToWorkadventure({
type: "cameraSet",
data: { x, y, width, height, lock, smooth },
});
}
public followPlayer(smooth: boolean = false): void {
sendToWorkadventure({
type: "cameraFollowPlayer",
data: { smooth },
});
}
onCameraUpdate(): Subject<WasCameraUpdatedEvent> {
sendToWorkadventure({
type: "onCameraUpdate",

1
front/src/Api/iframe/chat.ts
View File

@ -1,4 +1,3 @@
import type { ChatEvent } from "../Events/ChatEvent";
import { isUserInputChatEvent, UserInputChatEvent } from "../Events/UserInputChatEvent";
import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
import { apiCallback } from "./registeredCallbacks";

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

@ -1,28 +1,49 @@
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 { hasMovedEventName, Player } from "../Player/Player";
import { WaScaleManager, WaScaleManagerEvent, WaScaleManagerFocusTarget } from "../Services/WaScaleManager";
import type { GameScene } from "./GameScene";
export enum CameraMode {
Free = "Free",
/**
* Camera looks at certain point but is not locked and will start following the player on his movement
*/
Positioned = "Positioned",
/**
* Camera is actively following the player
*/
Follow = "Follow",
/**
* Camera is focusing on certain point and will not break this focus even on player movement
*/
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;
private cameraBounds: { x: number; y: number };
private waScaleManager: WaScaleManager;
private cameraMode: CameraMode = CameraMode.Free;
private cameraMode: CameraMode = CameraMode.Positioned;
private restoreZoomTween?: Phaser.Tweens.Tween;
private startFollowTween?: Phaser.Tweens.Tween;
private cameraFollowTarget?: { x: number; y: number };
private playerToFollow?: Player;
private cameraLocked: boolean;
constructor(scene: GameScene, cameraBounds: { x: number; y: number }, waScaleManager: WaScaleManager) {
@ -41,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();
}
@ -49,52 +70,96 @@ export class CameraManager extends Phaser.Events.EventEmitter {
return this.camera;
}
public enterFocusMode(
focusOn: { x: number; y: number; width: number; height: number },
margin: number = 0,
duration: number = 1000
): void {
/**
* Set camera view to specific destination without changing current camera mode. Won't work if camera mode is set to Focus.
* @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: WaScaleManagerFocusTarget, duration: number = 1000): void {
if (this.cameraMode === CameraMode.Focus) {
return;
}
this.setCameraMode(CameraMode.Positioned);
this.waScaleManager.saveZoom();
this.camera.stopFollow();
const currentZoomModifier = this.waScaleManager.zoomModifier;
const zoomModifierChange = this.getZoomModifierChange(setTo.width, setTo.height);
if (duration === 0) {
this.waScaleManager.zoomModifier = currentZoomModifier + zoomModifierChange;
this.camera.centerOn(setTo.x, setTo.y);
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
this.playerToFollow?.once(hasMovedEventName, () => {
if (this.playerToFollow) {
this.startFollowPlayer(this.playerToFollow, duration);
}
});
return;
}
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);
}
});
}
});
}
/**
* Set camera to focus mode. As long as the camera is in the Focus mode, its view cannot be changed.
* @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: WaScaleManagerFocusTarget, margin: number = 0, duration: number = 1000): void {
this.setCameraMode(CameraMode.Focus);
this.waScaleManager.saveZoom();
this.waScaleManager.setFocusTarget(focusOn);
this.cameraLocked = true;
this.unlockCameraWithDelay(duration);
this.restoreZoomTween?.stop();
this.startFollowTween?.stop();
const marginMult = 1 + margin;
const targetZoomModifier = this.waScaleManager.getTargetZoomModifierFor(
focusOn.width * marginMult,
focusOn.height * marginMult
);
const currentZoomModifier = this.waScaleManager.zoomModifier;
const zoomModifierChange = targetZoomModifier - currentZoomModifier;
this.camera.stopFollow();
this.cameraFollowTarget = undefined;
this.camera.pan(
focusOn.x + focusOn.width * 0.5 * marginMult,
focusOn.y + focusOn.height * 0.5 * marginMult,
duration,
Easing.SineEaseOut,
true,
(camera, progress, x, y) => {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
this.playerToFollow = undefined;
const currentZoomModifier = this.waScaleManager.zoomModifier;
const zoomModifierChange = this.getZoomModifierChange(focusOn.width, focusOn.height, 1 + margin);
if (duration === 0) {
this.waScaleManager.zoomModifier = currentZoomModifier + zoomModifierChange;
this.camera.centerOn(focusOn.x, focusOn.y);
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
return;
}
this.camera.pan(focusOn.x, focusOn.y, duration, Easing.SineEaseOut, true, (camera, progress, x, y) => {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
if (progress === 1) {
// NOTE: Making sure the last action will be centering after zoom change
this.camera.centerOn(focusOn.x, focusOn.y);
}
);
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
});
}
public leaveFocusMode(player: Player, duration = 0): void {
this.waScaleManager.setFocusTarget();
this.unlockCameraWithDelay(duration);
this.startFollow(player, duration);
this.startFollowPlayer(player, duration);
this.restoreZoom(duration);
}
public startFollow(target: object | Phaser.GameObjects.GameObject, duration: number = 0): void {
this.cameraFollowTarget = target as { x: number; y: number };
public startFollowPlayer(player: Player, duration: number = 0): void {
this.playerToFollow = player;
this.setCameraMode(CameraMode.Follow);
if (duration === 0) {
this.camera.startFollow(target, true);
this.camera.startFollow(player, true);
return;
}
const oldPos = { x: this.camera.scrollX, y: this.camera.scrollY };
@ -104,17 +169,18 @@ export class CameraManager extends Phaser.Events.EventEmitter {
duration,
ease: Easing.SineEaseOut,
onUpdate: (tween: Phaser.Tweens.Tween) => {
if (!this.cameraFollowTarget) {
if (!this.playerToFollow) {
return;
}
const shiftX =
(this.cameraFollowTarget.x - this.camera.worldView.width * 0.5 - oldPos.x) * tween.getValue();
(this.playerToFollow.x - this.camera.worldView.width * 0.5 - oldPos.x) * tween.getValue();
const shiftY =
(this.cameraFollowTarget.y - this.camera.worldView.height * 0.5 - oldPos.y) * tween.getValue();
(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(target, true);
this.camera.startFollow(player, true);
},
});
}
@ -140,6 +206,18 @@ export class CameraManager extends Phaser.Events.EventEmitter {
return this.cameraLocked;
}
private getZoomModifierChange(width?: number, height?: number, multiplier: number = 1): number {
if (!width || !height) {
return 0;
}
const targetZoomModifier = this.waScaleManager.getTargetZoomModifierFor(
width * multiplier,
height * multiplier
);
const currentZoomModifier = this.waScaleManager.zoomModifier;
return targetZoomModifier - currentZoomModifier;
}
private unlockCameraWithDelay(delay: number): void {
this.scene.time.delayedCall(delay, () => {
this.cameraLocked = false;
@ -166,6 +244,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());
},
});
}
@ -177,13 +256,28 @@ 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;
}
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());
}
);
this.camera.on("followupdate", () => {
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,
};
}
}

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

@ -64,7 +64,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";
@ -75,6 +75,7 @@ import { playersStore } from "../../Stores/PlayersStore";
import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
import { userIsAdminStore } from "../../Stores/GameStore";
import { contactPageStore } from "../../Stores/MenuStore";
import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore";
import EVENT_TYPE = Phaser.Scenes.Events;
@ -91,7 +92,6 @@ import { MapStore } from "../../Stores/Utils/MapStore";
import { followUsersColorStore, followUsersStore } from "../../Stores/FollowStore";
import { getColorRgbFromHue } from "../../WebRtc/ColorGenerator";
import Camera = Phaser.Cameras.Scene2D.Camera;
import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
export interface GameSceneInitInterface {
initPosition: PointInterface | null;
@ -586,7 +586,7 @@ export class GameScene extends DirtyScene {
waScaleManager
);
biggestAvailableAreaStore.recompute();
this.cameraManager.startFollow(this.CurrentPlayer);
this.cameraManager.startFollowPlayer(this.CurrentPlayer);
this.animatedTiles.init(this.Map);
this.events.on("tileanimationupdate", () => (this.dirty = true));
@ -860,7 +860,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;
@ -1143,6 +1148,21 @@ export class GameScene extends DirtyScene {
})
);
this.iframeSubscriptionList.push(
iframeListener.cameraSetStream.subscribe((cameraSetEvent) => {
const duration = cameraSetEvent.smooth ? 1000 : 0;
cameraSetEvent.lock
? this.cameraManager.enterFocusMode({ ...cameraSetEvent }, undefined, duration)
: this.cameraManager.setPosition({ ...cameraSetEvent }, duration);
})
);
this.iframeSubscriptionList.push(
iframeListener.cameraFollowPlayerStream.subscribe((cameraFollowPlayerEvent) => {
this.cameraManager.leaveFocusMode(this.CurrentPlayer, cameraFollowPlayerEvent.smooth ? 1000 : 0);
})
);
this.iframeSubscriptionList.push(
iframeListener.playSoundStream.subscribe((playSoundEvent) => {
const url = new URL(playSoundEvent.url, this.MapUrlFile);
@ -1155,30 +1175,31 @@ export class GameScene extends DirtyScene {
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);
);
}
})
);

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;
}

2
front/src/iframe_api.ts
View File

@ -34,9 +34,9 @@ const initPromise = queryWorkadventure({
setMapURL(gameState.mapUrl);
setTags(gameState.tags);
setUuid(gameState.uuid);
setUserRoomToken(gameState.userRoomToken);
globalState.initVariables(gameState.variables as Map<string, unknown>);
player.state.initVariables(gameState.playerVariables as Map<string, unknown>);
setUserRoomToken(gameState.userRoomToken);
});
const wa = {

188
maps/tests/CameraApi/camera_api_test.json Normal file
View File

@ -0,0 +1,188 @@
{ "compressionlevel":-1,
"height":30,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":30,
"id":1,
"name":"floor",
"opacity":1,
"properties":[
{
"name":"openWebsite",
"type":"string",
"value":"script.php"
},
{
"name":"openWebsiteAllowApi",
"type":"bool",
"value":true
}],
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
},
{
"data":[24, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 24, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":30,
"id":6,
"name":"furnitures",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":30,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"floorLayer",
"objects":[
{
"height":115.775966464835,
"id":1,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"MS Shell Dlg 2",
"pixelsize":21,
"text":"Set Viewport - Move the camera to the given point. It will be locked if Lock checkbox is checked",
"wrap":true
},
"type":"",
"visible":true,
"width":315.4375,
"x":68.4021076998051,
"y":160.733918128655
},
{
"height":115.776,
"id":4,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"MS Shell Dlg 2",
"pixelsize":21,
"text":"Follow Player - Camera will start following the player if doesn't do this already",
"wrap":true
},
"type":"",
"visible":true,
"width":315.438,
"x":64.7309301350722,
"y":256.224715416861
},
{
"height":30.8202477876106,
"id":8,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"MS Shell Dlg 2",
"pixelsize":21,
"text":"x: 16 y: 16",
"wrap":true
},
"type":"",
"visible":true,
"width":111.991330228225,
"x":39.0206367023754,
"y":2.47529762459247
},
{
"height":30.8202,
"id":9,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"MS Shell Dlg 2",
"pixelsize":21,
"text":"x: 464 y: 432",
"wrap":true
},
"type":"",
"visible":true,
"width":149.997520726595,
"x":483.920662086633,
"y":417.193532976246
},
{
"height":113.333333333333,
"id":10,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"MS Shell Dlg 2",
"pixelsize":21,
"text":"Top: 256\/512 Center: 496\/655 Width: 480 Height: 286",
"wrap":true
},
"type":"",
"visible":true,
"width":172,
"x":256,
"y":512
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":7,
"nextobjectid":11,
"orientation":"orthogonal",
"properties":[
{
"name":"openWebsite",
"type":"string",
"value":"script.php"
},
{
"name":"openWebsiteAllowApi",
"type":"bool",
"value":true
}],
"renderorder":"right-down",
"tiledversion":"1.7.2",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"..\/tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":"1.6",
"width":30
}

50
maps/tests/CameraApi/script.php Normal file
View File

@ -0,0 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
<script>
window.addEventListener('load', () => {
//@ts-ignore
WA.camera.onCameraUpdate((worldView) => console.log(worldView));
WA.onInit().then(() => {
console.log('After WA init');
const setCameraButton = document.getElementById('setCameraButton');
const followPlayerButton = document.getElementById('followPlayerButton');
const xField = document.getElementById('x');
const yField = document.getElementById('y');
const widthField = document.getElementById('width');
const heightField = document.getElementById('height');
const smoothField = document.getElementById('smooth');
const lockField = document.getElementById('lock');
setCameraButton.addEventListener('click', () => {
WA.camera.set(
parseInt(xField.value),
parseInt(yField.value),
widthField.value ? parseInt(widthField.value) : undefined,
heightField.value ? parseInt(heightField.value) : undefined,
lockField.checked,
smoothField.checked,
);
});
followPlayerButton.addEventListener('click', () => {
WA.camera.followPlayer(smoothField.checked);
});
});
})
</script>
</head>
<body>
X: <input type="text" id="x" value="496" /><br/>
Y: <input type="text" id="y" value="655" /><br/>
width: <input type="text" id="width" value="480" /><br/>
height: <input type="text" id="height" value="286" /><br/>
Smooth: <input type="checkbox" id="smooth" value=1 /><br/>
Lock: <input type="checkbox" id="lock" value=1 /><br/>
<button id="setCameraButton">Set Camera</button>
<button id="followPlayerButton">Follow Player</button>
</body>
</html>

8
maps/tests/index.html
View File

@ -219,6 +219,14 @@
<a href="#" class="testLink" data-testmap="Metadata/setTiles.json" target="_blank">Test set tiles</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-set-tiles"> Success <input type="radio" name="test-set-tiles"> Failure <input type="radio" name="test-set-tiles" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="CameraApi/camera_api_test.json" target="_blank">Test camera API</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-variables"> Success <input type="radio" name="test-variables"> Failure <input type="radio" name="test-variables" checked> Pending