go from zones to area name for interactive Tiled Objects
This commit is contained in:
Piotr 'pwh' Hanusiak
parent
2fa504a189
commit
255f4375da
@ -1,6 +1,6 @@
|
||||
import * as tg from "generic-type-guard";
|
||||
|
||||
export const isChangeZoneEvent = new tg.IsInterface()
|
||||
export const isChangeAreaEvent = new tg.IsInterface()
|
||||
.withProperties({
|
||||
name: tg.isString,
|
||||
})
|
||||
@ -8,4 +8,4 @@ export const isChangeZoneEvent = new tg.IsInterface()
|
||||
/**
|
||||
* A message sent from the game to the iFrame when a user enters or leaves a zone.
|
||||
*/
|
||||
export type ChangeZoneEvent = tg.GuardedType<typeof isChangeZoneEvent>;
|
||||
export type ChangeAreaEvent = tg.GuardedType<typeof isChangeAreaEvent>;
|
||||
@ -31,7 +31,7 @@ import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEv
|
||||
import type { ChangeLayerEvent } from "./ChangeLayerEvent";
|
||||
import { isPlayerPosition } from "./PlayerPosition";
|
||||
import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
|
||||
import type { ChangeZoneEvent } from "./ChangeZoneEvent";
|
||||
import type { ChangeAreaEvent } from "./ChangeAreaEvent";
|
||||
import type { CameraSetEvent } from "./CameraSetEvent";
|
||||
import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent";
|
||||
import { isColorEvent } from "./ColorEvent";
|
||||
@ -95,8 +95,8 @@ export interface IframeResponseEventMap {
|
||||
leaveEvent: EnterLeaveEvent;
|
||||
enterLayerEvent: ChangeLayerEvent;
|
||||
leaveLayerEvent: ChangeLayerEvent;
|
||||
enterZoneEvent: ChangeZoneEvent;
|
||||
leaveZoneEvent: ChangeZoneEvent;
|
||||
enterAreaEvent: ChangeAreaEvent;
|
||||
leaveAreaEvent: ChangeAreaEvent;
|
||||
buttonClickedEvent: ButtonClickedEvent;
|
||||
remotePlayerClickedEvent: RemotePlayerClickedEvent;
|
||||
actionsMenuActionClickedEvent: ActionsMenuActionClickedEvent;
|
||||
|
||||
@ -31,7 +31,7 @@ import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/Emb
|
||||
import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
|
||||
import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
|
||||
import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
|
||||
import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
|
||||
import type { ChangeAreaEvent } from "./Events/ChangeAreaEvent";
|
||||
import { CameraSetEvent, isCameraSetEvent } from "./Events/CameraSetEvent";
|
||||
import { CameraFollowPlayerEvent, isCameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent";
|
||||
import type { RemotePlayerClickedEvent } from "./Events/RemotePlayerClickedEvent";
|
||||
@ -441,21 +441,21 @@ class IframeListener {
|
||||
});
|
||||
}
|
||||
|
||||
sendEnterZoneEvent(zoneName: string) {
|
||||
sendEnterAreaEvent(areaName: string) {
|
||||
this.postMessage({
|
||||
type: "enterZoneEvent",
|
||||
type: "enterAreaEvent",
|
||||
data: {
|
||||
name: zoneName,
|
||||
} as ChangeZoneEvent,
|
||||
name: areaName,
|
||||
} as ChangeAreaEvent,
|
||||
});
|
||||
}
|
||||
|
||||
sendLeaveZoneEvent(zoneName: string) {
|
||||
sendLeaveAreaEvent(areaName: string) {
|
||||
this.postMessage({
|
||||
type: "leaveZoneEvent",
|
||||
type: "leaveAreaEvent",
|
||||
data: {
|
||||
name: zoneName,
|
||||
} as ChangeZoneEvent,
|
||||
name: areaName,
|
||||
} as ChangeAreaEvent,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -22,9 +22,9 @@ export type layerChangeCallback = (
|
||||
allLayersOnNewPosition: Array<ITiledMapLayer>
|
||||
) => void;
|
||||
|
||||
export type zoneChangeCallback = (
|
||||
zonesChangedByAction: Array<ITiledMapObject>,
|
||||
allZonesOnNewPosition: Array<ITiledMapObject>
|
||||
export type areaChangeCallback = (
|
||||
areasChangedByAction: Array<ITiledMapObject>,
|
||||
allAreasOnNewPosition: Array<ITiledMapObject>
|
||||
) => void;
|
||||
|
||||
/**
|
||||
@ -54,8 +54,8 @@ export class GameMap {
|
||||
|
||||
private enterLayerCallbacks = Array<layerChangeCallback>();
|
||||
private leaveLayerCallbacks = Array<layerChangeCallback>();
|
||||
private enterZoneCallbacks = Array<zoneChangeCallback>();
|
||||
private leaveZoneCallbacks = Array<zoneChangeCallback>();
|
||||
private enterAreaCallbacks = Array<areaChangeCallback>();
|
||||
private leaveAreaCallbacks = Array<areaChangeCallback>();
|
||||
|
||||
private tileNameMap = new Map<string, number>();
|
||||
|
||||
@ -63,7 +63,7 @@ export class GameMap {
|
||||
public readonly flatLayers: ITiledMapLayer[];
|
||||
public readonly tiledObjects: ITiledMapObject[];
|
||||
public readonly phaserLayers: TilemapLayer[] = [];
|
||||
public readonly zones: ITiledMapObject[] = [];
|
||||
public readonly areas: ITiledMapObject[] = [];
|
||||
|
||||
public exitUrls: Array<string> = [];
|
||||
|
||||
@ -76,7 +76,8 @@ export class GameMap {
|
||||
) {
|
||||
this.flatLayers = flattenGroupLayersMap(map);
|
||||
this.tiledObjects = this.getObjectsFromLayers(this.flatLayers);
|
||||
this.zones = this.tiledObjects.filter((object) => object.width > 0);
|
||||
// NOTE: We leave "zone" for legacy reasons
|
||||
this.areas = this.tiledObjects.filter((object) => ["zone", "area"].includes(object.type));
|
||||
|
||||
let depth = -2;
|
||||
for (const layer of this.flatLayers) {
|
||||
@ -148,7 +149,7 @@ export class GameMap {
|
||||
public setPosition(x: number, y: number) {
|
||||
this.oldPosition = this.position;
|
||||
this.position = { x, y };
|
||||
this.triggerZonesChange();
|
||||
this.triggerAreasChange();
|
||||
|
||||
this.oldKey = this.key;
|
||||
|
||||
@ -201,17 +202,17 @@ export class GameMap {
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a callback called when the user moves inside another zone.
|
||||
* Registers a callback called when the user moves inside another area.
|
||||
*/
|
||||
public onEnterZone(callback: zoneChangeCallback) {
|
||||
this.enterZoneCallbacks.push(callback);
|
||||
public onEnterArea(callback: areaChangeCallback) {
|
||||
this.enterAreaCallbacks.push(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a callback called when the user moves outside another zone.
|
||||
* Registers a callback called when the user moves outside another area.
|
||||
*/
|
||||
public onLeaveZone(callback: zoneChangeCallback) {
|
||||
this.leaveZoneCallbacks.push(callback);
|
||||
public onLeaveArea(callback: areaChangeCallback) {
|
||||
this.leaveAreaCallbacks.push(callback);
|
||||
}
|
||||
|
||||
public findLayer(layerName: string): ITiledMapLayer | undefined {
|
||||
@ -420,33 +421,33 @@ export class GameMap {
|
||||
}
|
||||
|
||||
/**
|
||||
* We use Tiled Objects with type "zone" as zones with defined x, y, width and height for easier event triggering.
|
||||
* We use Tiled Objects with type "area" as areas with defined x, y, width and height for easier event triggering.
|
||||
*/
|
||||
private triggerZonesChange(): void {
|
||||
const zonesByOldPosition = this.getZonesOnPosition(this.oldPosition);
|
||||
const zonesByNewPosition = this.getZonesOnPosition(this.position);
|
||||
private triggerAreasChange(): void {
|
||||
const areasByOldPosition = this.getAreasOnPosition(this.oldPosition);
|
||||
const areasByNewPosition = this.getAreasOnPosition(this.position);
|
||||
|
||||
const enterZones = new Set(zonesByNewPosition);
|
||||
const leaveZones = new Set(zonesByOldPosition);
|
||||
const enterAreas = new Set(areasByNewPosition);
|
||||
const leaveAreas = new Set(areasByOldPosition);
|
||||
|
||||
enterZones.forEach((zone) => {
|
||||
if (leaveZones.has(zone)) {
|
||||
leaveZones.delete(zone);
|
||||
enterZones.delete(zone);
|
||||
enterAreas.forEach((area) => {
|
||||
if (leaveAreas.has(area)) {
|
||||
leaveAreas.delete(area);
|
||||
enterAreas.delete(area);
|
||||
}
|
||||
});
|
||||
|
||||
if (enterZones.size > 0) {
|
||||
const zonesArray = Array.from(enterZones);
|
||||
for (const callback of this.enterZoneCallbacks) {
|
||||
callback(zonesArray, zonesByNewPosition);
|
||||
if (enterAreas.size > 0) {
|
||||
const areasArray = Array.from(enterAreas);
|
||||
for (const callback of this.enterAreaCallbacks) {
|
||||
callback(areasArray, areasByNewPosition);
|
||||
}
|
||||
}
|
||||
|
||||
if (leaveZones.size > 0) {
|
||||
const zonesArray = Array.from(leaveZones);
|
||||
for (const callback of this.leaveZoneCallbacks) {
|
||||
callback(zonesArray, zonesByNewPosition);
|
||||
if (leaveAreas.size > 0) {
|
||||
const areasArray = Array.from(leaveAreas);
|
||||
for (const callback of this.leaveAreaCallbacks) {
|
||||
callback(areasArray, areasByNewPosition);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -454,9 +455,9 @@ export class GameMap {
|
||||
private getProperties(key: number): Map<string, string | boolean | number> {
|
||||
const properties = new Map<string, string | boolean | number>();
|
||||
|
||||
for (const zone of this.getZonesOnPosition(this.position)) {
|
||||
if (zone.properties !== undefined) {
|
||||
for (const property of zone.properties) {
|
||||
for (const area of this.getAreasOnPosition(this.position)) {
|
||||
if (area.properties !== undefined) {
|
||||
for (const property of area.properties) {
|
||||
if (property.value === undefined) {
|
||||
continue;
|
||||
}
|
||||
@ -503,13 +504,13 @@ export class GameMap {
|
||||
return properties;
|
||||
}
|
||||
|
||||
private getZonesOnPosition(position?: { x: number; y: number }): ITiledMapObject[] {
|
||||
private getAreasOnPosition(position?: { x: number; y: number }): ITiledMapObject[] {
|
||||
return position
|
||||
? this.zones.filter((zone) => {
|
||||
? this.areas.filter((area) => {
|
||||
if (!position) {
|
||||
return false;
|
||||
}
|
||||
return MathUtils.isOverlappingWithRectangle(position, zone);
|
||||
return MathUtils.isOverlappingWithRectangle(position, area);
|
||||
})
|
||||
: [];
|
||||
}
|
||||
|
||||
@ -892,42 +892,42 @@ export class GameScene extends DirtyScene {
|
||||
});
|
||||
});
|
||||
|
||||
this.gameMap.onEnterZone((zones) => {
|
||||
for (const zone of zones) {
|
||||
const focusable = zone.properties?.find(
|
||||
this.gameMap.onEnterArea((areas) => {
|
||||
for (const area of areas) {
|
||||
const focusable = area.properties?.find(
|
||||
(property) => property.name === GameMapProperties.FOCUSABLE
|
||||
);
|
||||
if (focusable && focusable.value === true) {
|
||||
const zoomMargin = zone.properties?.find(
|
||||
const zoomMargin = area.properties?.find(
|
||||
(property) => property.name === GameMapProperties.ZOOM_MARGIN
|
||||
);
|
||||
this.cameraManager.enterFocusMode(
|
||||
{
|
||||
x: zone.x + zone.width * 0.5,
|
||||
y: zone.y + zone.height * 0.5,
|
||||
width: zone.width,
|
||||
height: zone.height,
|
||||
x: area.x + area.width * 0.5,
|
||||
y: area.y + area.height * 0.5,
|
||||
width: area.width,
|
||||
height: area.height,
|
||||
},
|
||||
zoomMargin ? Math.max(0, Number(zoomMargin.value)) : undefined
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
zones.forEach((zone) => {
|
||||
iframeListener.sendEnterZoneEvent(zone.name);
|
||||
areas.forEach((area) => {
|
||||
iframeListener.sendEnterAreaEvent(area.name);
|
||||
});
|
||||
});
|
||||
|
||||
this.gameMap.onLeaveZone((zones) => {
|
||||
for (const zone of zones) {
|
||||
const focusable = zone.properties?.find((property) => property.name === "focusable");
|
||||
this.gameMap.onLeaveArea((areas) => {
|
||||
for (const area of areas) {
|
||||
const focusable = area.properties?.find((property) => property.name === "focusable");
|
||||
if (focusable && focusable.value === true) {
|
||||
this.cameraManager.leaveFocusMode(this.CurrentPlayer, 1000);
|
||||
break;
|
||||
}
|
||||
}
|
||||
zones.forEach((zone) => {
|
||||
iframeListener.sendLeaveZoneEvent(zone.name);
|
||||
areas.forEach((area) => {
|
||||
iframeListener.sendLeaveAreaEvent(area.name);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
"y":0
|
||||
},
|
||||
{
|
||||
"data":[201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201],
|
||||
"data":[201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 223, 223, 223, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201],
|
||||
"height":17,
|
||||
"id":4,
|
||||
"name":"floor",
|
||||
@ -72,7 +72,7 @@
|
||||
"value":"onaction"
|
||||
}],
|
||||
"rotation":0,
|
||||
"type":"",
|
||||
"type":"area",
|
||||
"visible":true,
|
||||
"width":320,
|
||||
"x":317.331510594668,
|
||||
@ -89,7 +89,7 @@
|
||||
"value":"MeetingRoom"
|
||||
}],
|
||||
"rotation":0,
|
||||
"type":"",
|
||||
"type":"area",
|
||||
"visible":true,
|
||||
"width":192.568694463431,
|
||||
"x":30.738664843928,
|
||||
@ -106,11 +106,28 @@
|
||||
"value":true
|
||||
}],
|
||||
"rotation":0,
|
||||
"type":"",
|
||||
"type":"area",
|
||||
"visible":true,
|
||||
"width":225.115516062885,
|
||||
"x":735.919799498747,
|
||||
"y":354.398724082935
|
||||
},
|
||||
{
|
||||
"height":63.2854864433812,
|
||||
"id":13,
|
||||
"name":"",
|
||||
"properties":[
|
||||
{
|
||||
"name":"openWebsite",
|
||||
"type":"string",
|
||||
"value":"https:\/\/youtu.be\/iF-ucIgP0OE?list=RDGMEMWO-g6DgCWEqKlDtKbJA1GwVMiF-ucIgP0OE"
|
||||
}],
|
||||
"rotation":0,
|
||||
"type":"area",
|
||||
"visible":true,
|
||||
"width":96.736386420597,
|
||||
"x":799.205285942128,
|
||||
"y":96.736386420597
|
||||
}],
|
||||
"opacity":1,
|
||||
"type":"objectgroup",
|
||||
@ -119,7 +136,7 @@
|
||||
"y":0
|
||||
}],
|
||||
"nextlayerid":39,
|
||||
"nextobjectid":13,
|
||||
"nextobjectid":15,
|
||||
"orientation":"orthogonal",
|
||||
"properties":[
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user