Add landscape color & handle different tile heights

example/src/index.ts

@@ -32,14 +32,15 @@ PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
 const shroom = Shroom.create({ application, resourcePath: "./resources" });
 const room = Room.create(shroom, {
   tilemap: `
-    000000000
-    000000000
-    000000000
-    000000000
-    000000000
-    000000000
-    000000000
-    000000000
+    xxx1111111
+    xxx1111111
+    xxx1111111
+    xxx1111111
+    xxx0000000
+    0000000000
+    0000000000
+    0000000000
+    0000000000
   `,
 });
 
@@ -59,85 +60,30 @@ room.floorTexture = loadRoomTexture("./images/tile.png");
 room.wallColor = "#dbbe6e";
 room.floorColor = "#eeeeee";
 
-const furniture1 = new FloorFurniture({
-  roomX: 0,
-  roomY: 0,
-  roomZ: 0,
-  direction: 2,
-  type: "exe_table",
-});
-
-const furniture2 = new FloorFurniture({
-  roomX: 2,
-  roomY: 0,
-  roomZ: 0,
-  direction: 2,
-  type: "exe_table",
-});
-
-const furniture3 = new FloorFurniture({
-  roomX: 4,
-  roomY: 0,
-  roomZ: 0,
-  direction: 2,
-  type: "exe_table",
-});
-
 const wallFurniture1 = new WallFurniture({
   roomX: 0,
-  roomY: 1,
+  roomY: 5,
   roomZ: 0,
   direction: 2,
-  type: "window_hole",
+  type: "window_skyscraper",
 });
 
 const wallFurniture2 = new WallFurniture({
   roomX: 0,
-  roomY: 3,
-  roomZ: 0,
+  roomY: 5,
+  roomZ: 2,
   direction: 2,
-  type: "window_70s_wide",
-});
-
-const wallFurniture3 = new WallFurniture({
-  roomX: 0,
-  roomY: 5.5,
-  roomZ: 0,
-  direction: 2,
-  type: "window_grunge",
-});
-
-const wallFurniture4 = new WallFurniture({
-  roomX: 1,
-  roomY: 0,
-  roomZ: 0,
-  direction: 4,
-  type: "window_diner",
-});
-
-const wallFurniture5 = new WallFurniture({
-  roomX: 5,
-  roomY: 0,
-  roomZ: 0,
-  direction: 4,
-  type: "sf_window",
-  animation: "1",
+  type: "window_skyscraper",
 });
 
 room.addRoomObject(avatar);
-room.addRoomObject(furniture1);
 room.addRoomObject(wallFurniture1);
 room.addRoomObject(wallFurniture2);
-room.addRoomObject(wallFurniture3);
-room.addRoomObject(wallFurniture4);
-room.addRoomObject(wallFurniture5);
-room.addRoomObject(furniture2);
-room.addRoomObject(furniture3);
-
 application.stage.addChild(room);
 
 const landscape = new Landscape();
 landscape.leftTexture = loadRoomTexture("./images/a1.png");
 landscape.rightTexture = loadRoomTexture("./images/a2.png");
+landscape.color = "#cccccc";
 
 room.addRoomObject(landscape);

package.json

@@ -28,6 +28,7 @@
     "ink": "^3.0.8",
     "node-fetch": "^2.6.1",
     "react": "^16.14.0",
+    "rxjs": "^6.6.3",
     "stream": "0.0.2",
     "timers": "^0.1.1",
     "timers-browserify": "^2.0.11",

src/interfaces/IRoomGeometry.ts

@@ -5,6 +5,4 @@ export interface IRoomGeometry {
     roomZ: number,
     type: "plane" | "object" | "none"
   ): { x: number; y: number };
-
-  getMaskLevel(roomX: number, roomY: number): { roomX: number; roomY: number };
 }

src/interfaces/IRoomVisualization.ts

@@ -1,3 +1,5 @@
+import { RoomLandscapeMaskSprite } from "../objects/room/RoomLandscapeMaskSprite";
+
 export interface IRoomVisualization {
   addFloorChild(element: PIXI.DisplayObject): void;
   addWallChild(element: PIXI.DisplayObject): void;
@@ -9,12 +11,20 @@ export interface IRoomVisualization {
   removeContainerChild(element: PIXI.DisplayObject): void;
 
   addCursorChild(element: PIXI.DisplayObject): void;
-  addXLevelMask(level: number, element: PIXI.Sprite): MaskNode;
-  addYLevelMask(level: number, element: PIXI.Sprite): MaskNode;
-
   addLandscape(element: PIXI.DisplayObject): void;
+
+  addMask(id: string, element: PIXI.Sprite): MaskNode;
+  subscribeRoomMeta(
+    listener: (value: RoomVisualizationMeta) => void
+  ): { unsubscribe: () => void };
 }
 
 export type MaskNode = {
   remove: () => void;
 };
+
+export type RoomVisualizationMeta = {
+  masks: Map<string, RoomLandscapeMaskSprite>;
+  wallHeight: number;
+  wallHeightWithZ: number;
+};

src/objects/furniture/BaseFurniture.tsx

@@ -11,6 +11,8 @@ import { Asset } from "./util/parseAssets";
 import { Layer } from "./util/visualization/parseLayers";
 import { MaskNode } from "../../interfaces/IRoomVisualization";
 
+type MaskIdGetter = (direction: number) => string | undefined;
+
 export class BaseFurniture
   extends RoomObject
   implements IFurnitureEventHandlers {
@@ -93,36 +95,36 @@ export class BaseFurniture
     this.updateFurniture();
   }
 
-  public get maskLevel() {
-    return this._maskLevel;
-  }
-
-  public set maskLevel(value) {
-    this._maskLevel = value;
-    this.updateFurniture();
-  }
-
   private animatedSprites: {
     sprites: Map<string, PIXI.Sprite>;
     frames: string[];
   }[] = [];
 
-  private _maskLevel: { roomX: number; roomY: number } | undefined;
   private _maskNodes: MaskNode[] = [];
 
   private cancelTicker: (() => void) | undefined = undefined;
 
+  private _getMaskId: MaskIdGetter;
+
+  public get maskId() {
+    return this._getMaskId;
+  }
+
+  public set maskId(value) {
+    this._getMaskId = value;
+  }
+
   constructor(
     type: string,
     direction: number,
     animation: string = "0",
-    maskLevel?: { roomX: number; roomY: number }
+    getMaskId: MaskIdGetter = () => undefined
   ) {
     super();
     this._direction = direction;
     this._animation = animation;
     this._type = type;
-    this._maskLevel = maskLevel;
+    this._getMaskId = getMaskId;
   }
 
   updateFurniture() {
@@ -183,21 +185,11 @@ export class BaseFurniture
       if (sprite.kind === "simple" || sprite.kind === "mask") {
         this.sprites.push(sprite.sprite);
 
-        if (sprite.kind === "mask" && this._maskLevel != null) {
-          if (this.direction === 4) {
-            const maskNode = this.visualization.addYLevelMask(
-              this._maskLevel.roomY,
-              sprite.sprite
-            );
-
-            this._maskNodes.push(maskNode);
-          } else if (this.direction === 2) {
-            const maskNode = this.visualization.addXLevelMask(
-              this._maskLevel.roomX,
-              sprite.sprite
-            );
-
-            this._maskNodes.push(maskNode);
+        if (sprite.kind === "mask") {
+          const maskId = this.maskId(this.direction);
+
+          if (maskId != null) {
+            this.visualization.addMask(maskId, sprite.sprite);
           }
         } else {
           this.visualization.addContainerChild(sprite.sprite);

src/objects/furniture/WallFurniture.tsx

@@ -5,9 +5,10 @@ import { getZOrder } from "../../util/getZOrder";
 import { BaseFurniture } from "./BaseFurniture";
 import { IFurniture, IFurnitureBehavior } from "./IFurniture";
 import { HitEvent } from "../../interfaces/IHitDetection";
+import { getMaskId } from "../room/util/getMaskId";
 
 export class WallFurniture extends RoomObject implements IFurniture {
-  private baseFurniture: BaseFurniture;
+  private _baseFurniture: BaseFurniture;
   private _type: string;
   private _roomX: number;
   private _roomY: number;
@@ -34,11 +35,11 @@ export class WallFurniture extends RoomObject implements IFurniture {
     this._animation = options.animation;
     this._direction = options.direction;
 
-    this.baseFurniture = new BaseFurniture(
+    this._baseFurniture = new BaseFurniture(
       options.type,
       options.direction,
       options.animation,
-      { roomX: this.roomX, roomY: this.roomY }
+      (direction) => getMaskId(direction, this.roomX, this.roomY)
     );
 
     options.behaviors?.forEach((behavior) => behavior.setParent(this));
@@ -94,27 +95,27 @@ export class WallFurniture extends RoomObject implements IFurniture {
   }
 
   public get onClick() {
-    return this.baseFurniture.onClick;
+    return this._baseFurniture.onClick;
   }
 
   public set onClick(value) {
-    this.baseFurniture.onClick = value;
+    this._baseFurniture.onClick = value;
   }
 
   public get onDoubleClick() {
-    return this.baseFurniture.onDoubleClick;
+    return this._baseFurniture.onDoubleClick;
   }
 
   public set onDoubleClick(value) {
-    this.baseFurniture.onDoubleClick = value;
+    this._baseFurniture.onDoubleClick = value;
   }
 
   private updateAnimation() {
-    this.baseFurniture.animation = this.animation;
+    this._baseFurniture.animation = this.animation;
   }
 
   private updateDirection() {
-    this.baseFurniture.direction = this.direction;
+    this._baseFurniture.direction = this.direction;
   }
 
   private getOffsets(direction: number) {
@@ -125,7 +126,7 @@ export class WallFurniture extends RoomObject implements IFurniture {
   }
 
   destroy(): void {
-    this.baseFurniture.destroy();
+    this._baseFurniture.destroy();
   }
 
   private updatePosition() {
@@ -139,19 +140,17 @@ export class WallFurniture extends RoomObject implements IFurniture {
       "object"
     );
 
-    this.baseFurniture.x = base.x + offsets.x;
-    this.baseFurniture.y = base.y + offsets.y;
-    this.baseFurniture.maskLevel = this.geometry.getMaskLevel(
-      this.roomX,
-      this.roomY
-    );
+    this._baseFurniture.x = base.x + offsets.x;
+    this._baseFurniture.y = base.y + offsets.y;
+    this._baseFurniture.maskId = (direction) =>
+      getMaskId(direction, this.roomX, this.roomY);
 
-    this.baseFurniture.zIndex =
+    this._baseFurniture.zIndex =
       getZOrder(this.roomX, this.roomZ, this.roomY) - 1;
   }
 
   registered(): void {
     this.updatePosition();
-    this.roomObjectContainer.addRoomObject(this.baseFurniture);
+    this.roomObjectContainer.addRoomObject(this._baseFurniture);
   }
 }

src/objects/room/ILandscape.ts

@@ -1,7 +1,4 @@
 import { IRoomObject } from "../../interfaces/IRoomObject";
 import { RoomLandscapeMaskSprite } from "./RoomLandscapeMaskSprite";
 
-export interface ILandscape extends IRoomObject {
-  setYLevelMasks(level: number, mask: PIXI.Sprite): void;
-  setXLevelMasks(level: number, mask: PIXI.Sprite): void;
-}
+export interface ILandscape extends IRoomObject {}

src/objects/room/ILandscapeContainer.ts

@@ -1,6 +1,3 @@
-import { ILandscape } from "./ILandscape";
-
 export interface ILandscapeContainer {
-  setLandscape(landscape: ILandscape): void;
-  unsetLandscapeIfEquals(landscape: ILandscape): void;
+  getMaskLevel(roomX: number, roomY: number): { roomX: number; roomY: number };
 }