@rpgjs/tiledmap 5.0.0-alpha.9 → 5.0.0-beta.10

package/src/physics.spec.ts

@@ -0,0 +1,285 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@canvasengine/tiled", () => {
+  class MapClass {
+    width: number;
+    height: number;
+    tilewidth: number;
+    tileheight: number;
+    widthPx: number;
+    heightPx: number;
+    layers: any[];
+    tilesets: any[];
+    private blockedTiles: Set<string>;
+
+    constructor(parsedMap: any) {
+      this.width = parsedMap.width ?? 0;
+      this.height = parsedMap.height ?? 0;
+      this.tilewidth = parsedMap.tilewidth ?? 32;
+      this.tileheight = parsedMap.tileheight ?? 32;
+      this.widthPx = this.width * this.tilewidth;
+      this.heightPx = this.height * this.tileheight;
+      this.layers = parsedMap.layers;
+      this.tilesets = parsedMap.tilesets;
+      this.blockedTiles = new Set(parsedMap.blockedTiles ?? []);
+    }
+
+    getTileByPosition(x: number, y: number) {
+      const tileX = Math.floor(x / this.tilewidth);
+      const tileY = Math.floor(y / this.tileheight);
+      return {
+        hasCollision: this.blockedTiles.has(`${tileX},${tileY}`),
+      };
+    }
+  }
+
+  return { MapClass };
+});
+
+import { applyTiledPointEvents, prepareTiledPhysicsData } from "./physics";
+
+describe("prepareTiledPhysicsData", () => {
+  it("adds tiled collision hitboxes without duplicating them on repeated preparation", () => {
+    const mapData = {
+      parsedMap: {
+        width: 3,
+        height: 2,
+        tilewidth: 16,
+        tileheight: 20,
+        blockedTiles: ["1,0", "2,1"],
+      },
+      hitboxes: [{ id: "custom-hitbox", x: 4, y: 5, width: 6, height: 7 }],
+    };
+    const map: any = {};
+    const expectedHitboxes = [
+      { id: "custom-hitbox", x: 4, y: 5, width: 6, height: 7 },
+      { id: "__tiled_collision__:1,0", x: 16, y: 0, width: 16, height: 20 },
+      { id: "__tiled_collision__:2,1", x: 32, y: 20, width: 16, height: 20 },
+    ];
+
+    prepareTiledPhysicsData(mapData, map);
+
+    expect(mapData.width).toBe(48);
+    expect(mapData.height).toBe(40);
+    expect(mapData.hitboxes).toEqual(expectedHitboxes);
+
+    prepareTiledPhysicsData(mapData, map);
+
+    expect(mapData.hitboxes).toEqual(expectedHitboxes);
+  });
+
+  it("removes stale generated tiled hitboxes when blocked tiles change", () => {
+    const mapData = {
+      parsedMap: {
+        width: 2,
+        height: 1,
+        tilewidth: 32,
+        tileheight: 32,
+        blockedTiles: ["0,0"],
+      },
+      hitboxes: [],
+    };
+    const map: any = {};
+
+    prepareTiledPhysicsData(mapData, map);
+    expect(mapData.hitboxes).toEqual([
+      { id: "__tiled_collision__:0,0", x: 0, y: 0, width: 32, height: 32 },
+    ]);
+
+    mapData.parsedMap.blockedTiles = [];
+    prepareTiledPhysicsData(mapData, map);
+
+    expect(mapData.hitboxes).toEqual([]);
+  });
+
+  it("adds v4 map helpers backed by Tiled data", () => {
+    const groundLayer = { name: "Ground", data: [1, 0, 2, 3] };
+    const mapData = {
+      parsedMap: {
+        width: 2,
+        height: 2,
+        tilewidth: 16,
+        tileheight: 20,
+        layers: [groundLayer],
+        tilesets: [{ firstgid: 1, name: "base" }],
+      },
+    };
+    const map: any = {};
+
+    prepareTiledPhysicsData(mapData, map);
+
+    expect(map.layers).toBe(mapData.parsedMap.layers);
+    expect(map.zTileHeight).toBe(20);
+    expect(map.getLayerByName("Ground")).toBe(groundLayer);
+    expect(map.getTileIndex(1, 1)).toBe(3);
+    expect(map.getTileOriginPosition(1, 1)).toEqual({ x: 16, y: 20 });
+    expect(map.getTileByPosition(16, 20)).toEqual({ hasCollision: false });
+    expect(map.getTileByIndex(2)).toMatchObject({ gid: 2, id: 2, index: 2, layer: groundLayer });
+
+    expect(map.setTile(1, 0, "Ground", { gid: 8 })).toEqual({ gid: 8 });
+    expect(groundLayer.data[1]).toBe(8);
+
+    expect(map.updateTileset({ firstgid: 1, name: "base", tilecount: 4 })).toEqual({
+      firstgid: 1,
+      name: "base",
+      tilecount: 4,
+    });
+    expect(map.tiled.tilesets).toEqual([{ firstgid: 1, name: "base", tilecount: 4 }]);
+    expect(mapData.parsedMap.tilesets).toEqual([{ firstgid: 1, name: "base", tilecount: 4 }]);
+  });
+});
+
+describe("tiled point positions", () => {
+  it("extracts named point objects as map positions", () => {
+    const mapData = {
+      parsedMap: {
+        width: 1,
+        height: 1,
+        objects: [
+          { point: true, name: "start", x: 10, y: 20 },
+          { point: true, name: "entrance", x: 30, y: 40 },
+        ],
+      },
+    };
+
+    prepareTiledPhysicsData(mapData, {});
+
+    expect(mapData.positions).toEqual({
+      start: { x: 10, y: 20 },
+      entrance: { x: 30, y: 40 },
+    });
+  });
+
+  it("uses class or type as a fallback for the special start position", () => {
+    const mapData = {
+      parsedMap: {
+        width: 1,
+        height: 1,
+        objects: [
+          { point: true, class: "start", x: 10, y: 20 },
+          { point: true, type: "start", x: 30, y: 40 },
+        ],
+      },
+    };
+
+    prepareTiledPhysicsData(mapData, {});
+
+    expect(mapData.positions).toEqual({
+      start: { x: 10, y: 20 },
+    });
+  });
+
+  it("keeps explicitly named start before class or type fallback", () => {
+    const mapData = {
+      parsedMap: {
+        width: 1,
+        height: 1,
+        objects: [
+          { point: true, name: "start", x: 10, y: 20 },
+          { point: true, class: "start", x: 30, y: 40 },
+        ],
+      },
+    };
+
+    prepareTiledPhysicsData(mapData, {});
+
+    expect(mapData.positions).toEqual({
+      start: { x: 10, y: 20 },
+    });
+  });
+});
+
+describe("applyTiledPointEvents", () => {
+  it("places direct object events by matching their name with a tiled point", () => {
+    const mapData = {
+      parsedMap: {
+        objects: [
+          { point: true, name: "EV-1", x: 10, y: 20 },
+        ],
+      },
+      events: [
+        { name: "EV-1", onInit() {} },
+      ],
+    };
+
+    applyTiledPointEvents(mapData);
+
+    expect(mapData.events).toEqual([
+      {
+        event: { name: "EV-1", onInit: expect.any(Function) },
+        x: 10,
+        y: 20,
+      },
+    ]);
+  });
+
+  it("places wrapped object events by matching the wrapped event name", () => {
+    const mapData = {
+      parsedMap: {
+        objects: [
+          { point: true, name: "EV-1", x: 10, y: 20 },
+        ],
+      },
+      events: [
+        { id: "event-id", event: { name: "EV-1", onInit() {} } },
+      ],
+    };
+
+    applyTiledPointEvents(mapData);
+
+    expect(mapData.events).toEqual([
+      {
+        id: "event-id",
+        event: { name: "EV-1", onInit: expect.any(Function) },
+        x: 10,
+        y: 20,
+      },
+    ]);
+  });
+
+  it("places class events decorated with EventData metadata", () => {
+    class NpcEvent {}
+    (NpcEvent as any)._name = "EV-1";
+    (NpcEvent as any).prototype._name = "EV-1";
+
+    const mapData = {
+      parsedMap: {
+        objects: [
+          { point: true, name: "EV-1", x: 10, y: 20 },
+        ],
+      },
+      events: [
+        { event: NpcEvent },
+      ],
+    };
+
+    applyTiledPointEvents(mapData);
+
+    expect(mapData.events).toEqual([
+      {
+        event: NpcEvent,
+        x: 10,
+        y: 20,
+      },
+    ]);
+  });
+
+  it("does not override explicit event coordinates", () => {
+    const mapData = {
+      parsedMap: {
+        objects: [
+          { point: true, name: "EV-1", x: 10, y: 20 },
+        ],
+      },
+      events: [
+        { x: 50, y: 60, event: { name: "EV-1" } },
+      ],
+    };
+
+    applyTiledPointEvents(mapData);
+
+    expect(mapData.events).toEqual([
+      { x: 50, y: 60, event: { name: "EV-1" } },
+    ]);
+  });
+});

package/src/physics.ts

@@ -0,0 +1,171 @@
+import { MapClass } from "@canvasengine/tiled";
+import { applyTiledMapCompat } from "./compat";
+
+type AnyMap = {
+  tiled?: MapClass;
+};
+
+type RectHitbox = {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+const TILED_HITBOX_ID_PREFIX = "__tiled_collision__:";
+const START_POSITION_NAME = "start";
+
+export function prepareTiledPhysicsData(mapData: any, map: AnyMap): void {
+  if (!mapData?.parsedMap) {
+    return;
+  }
+
+  const tiledMap = new MapClass(mapData.parsedMap);
+  map.tiled = tiledMap;
+  applyTiledMapCompat(map, mapData.parsedMap);
+
+  const tiledHitboxes = collectBlockedTileHitboxes(tiledMap);
+  mapData.hitboxes = mergeTiledHitboxes(mapData.hitboxes, tiledHitboxes);
+  mapData.width = tiledMap.widthPx;
+  mapData.height = tiledMap.heightPx;
+  mapData.positions = mergeTiledPositions(mapData.positions, collectTiledPointPositions(mapData.parsedMap.objects));
+}
+
+export function applyTiledPointEvents(mapData: any): void {
+  const objects = mapData?.parsedMap?.objects;
+  if (!Array.isArray(objects) || !Array.isArray(mapData?.events)) {
+    return;
+  }
+
+  for (const obj of objects) {
+    if (!obj?.point) {
+      continue;
+    }
+
+    mapData.events = mapData.events
+      .map((eventEntry: any) => {
+        if (
+          obj.name &&
+          eventEntry?.x === undefined &&
+          eventEntry?.y === undefined &&
+          getEventName(eventEntry) === obj.name
+        ) {
+          const isWrappedEvent = eventEntry && typeof eventEntry === "object" && "event" in eventEntry;
+          return {
+            ...(isWrappedEvent ? eventEntry : { event: eventEntry }),
+            x: obj.x,
+            y: obj.y,
+          };
+        }
+        return eventEntry;
+      })
+      .filter((eventEntry: any) => eventEntry !== null);
+  }
+}
+
+function collectTiledPointPositions(objects: any): Record<string, { x: number; y: number }> {
+  if (!Array.isArray(objects)) {
+    return {};
+  }
+
+  const positions: Record<string, { x: number; y: number }> = {};
+
+  for (const obj of objects) {
+    if (!obj?.point || typeof obj.x !== "number" || typeof obj.y !== "number") {
+      continue;
+    }
+
+    if (typeof obj.name === "string" && obj.name.length > 0) {
+      positions[obj.name] = { x: obj.x, y: obj.y };
+    }
+
+    if (
+      !positions[START_POSITION_NAME] &&
+      (obj.class === START_POSITION_NAME || obj.type === START_POSITION_NAME)
+    ) {
+      positions[START_POSITION_NAME] = { x: obj.x, y: obj.y };
+    }
+  }
+
+  return positions;
+}
+
+function mergeTiledPositions(existingPositions: any, tiledPositions: Record<string, { x: number; y: number }>) {
+  return {
+    ...(existingPositions && typeof existingPositions === "object" ? existingPositions : {}),
+    ...tiledPositions,
+  };
+}
+
+function getEventName(eventEntry: any): string | undefined {
+  const event = eventEntry?.event ?? eventEntry;
+
+  if (typeof event === "function") {
+    const staticEventName = (event as any)._name;
+    const prototypeEventName = (event as any).prototype?._name;
+    const staticName = (event as any).name;
+    const prototypeName = (event as any).prototype?.name;
+    if (typeof prototypeEventName === "string") {
+      return prototypeEventName;
+    }
+    if (typeof staticEventName === "string") {
+      return staticEventName;
+    }
+    if (typeof prototypeName === "string") {
+      return prototypeName;
+    }
+    if (typeof staticName === "string") {
+      return staticName;
+    }
+  }
+
+  if (typeof event?.name === "string") {
+    return event.name;
+  }
+
+  return undefined;
+}
+
+function collectBlockedTileHitboxes(tiledMap: MapClass): RectHitbox[] {
+  const hitboxes: RectHitbox[] = [];
+  const mapWidth = tiledMap.width;
+  const mapHeight = tiledMap.height;
+  const tileWidth = tiledMap.tilewidth;
+  const tileHeight = tiledMap.tileheight;
+
+  for (let y = 0; y < mapHeight; y++) {
+    for (let x = 0; x < mapWidth; x++) {
+      const tileInfo = tiledMap.getTileByPosition(x * tileWidth, y * tileHeight, [0, 0], {
+        populateTiles: true,
+      });
+      if (tileInfo.hasCollision) {
+        hitboxes.push({
+          id: createTiledHitboxId(x, y),
+          x: x * tileWidth,
+          y: y * tileHeight,
+          width: tileWidth,
+          height: tileHeight,
+        });
+      }
+    }
+  }
+
+  return hitboxes;
+}
+
+function mergeTiledHitboxes(existingHitboxes: any, tiledHitboxes: RectHitbox[]): any[] {
+  const preservedHitboxes = Array.isArray(existingHitboxes)
+    ? existingHitboxes.filter((hitbox) => !isGeneratedTiledHitbox(hitbox))
+    : [];
+
+  return [...preservedHitboxes, ...tiledHitboxes];
+}
+
+function isGeneratedTiledHitbox(hitbox: any): boolean {
+  return typeof hitbox?.id === "string" && hitbox.id.startsWith(TILED_HITBOX_ID_PREFIX);
+}
+
+function createTiledHitboxId(x: number, y: number): string {
+  return `${TILED_HITBOX_ID_PREFIX}${x},${y}`;
+}

package/src/server.ts

@@ -1,173 +1,66 @@
 import { RpgMap, RpgServer } from "@rpgjs/server";
 import { MapClass } from "@canvasengine/tiled";
 import { defineModule } from "@rpgjs/common";
+import { applyTiledPointEvents, prepareTiledPhysicsData } from "./physics";
 
-// Extend RpgMap interface to include tiled property
 declare module "@rpgjs/server" {
   interface RpgMap {
+    /**
+     * CanvasEngine Tiled map instance attached by `@rpgjs/tiledmap`.
+     */
     tiled?: MapClass;
+    /**
+     * Tiled layers from the parsed map.
+     */
+    layers?: any[];
+    /**
+     * Height used by tile depth calculations. Defaults to the Tiled tile height.
+     */
+    zTileHeight?: number;
+    /**
+     * v4 compatibility helper. Returns a Tiled layer by its name.
+     */
+    getLayerByName?(name: string): any;
+    /**
+     * v4 compatibility helper. Returns the one-dimensional tile index for tile coordinates.
+     */
+    getTileIndex?(x: number, y: number): number;
+    /**
+     * v4 compatibility helper. Returns the pixel origin of a tile coordinate.
+     */
+    getTileOriginPosition?(x: number, y: number): { x: number; y: number };
+    /**
+     * v4 compatibility helper. Returns Tiled tile information from pixel coordinates.
+     */
+    getTileByPosition?(x: number, y: number, z?: number): any;
+    /**
+     * v4 compatibility helper. Returns Tiled tile information from a one-dimensional index.
+     */
+    getTileByIndex?(tileIndex: number): any;
+    /**
+     * v4 compatibility helper. Updates a tile in a Tiled tile layer.
+     */
+    setTile?(x: number, y: number, layer: string | number, tileInfo: any): any;
+    /**
+     * v4 compatibility helper. Updates the parsed Tiled tileset list.
+     */
+    updateTileset?(tileset: any): any;
   }
 }
 
-/**
- * Interface for an RpgMap extended with Tiled functionality
- *
- * @description This interface combines RpgMap with MapClass to enable
- * the use of Tiled methods on RPG maps
- */
 export interface RpgTiledMap extends RpgMap {
   tiled: MapClass;
 }
 
-/**
- * Tiled Module for RPGJS
- *
- * @description This module extends RPGJS maps with Tiled functionality,
- * allowing TMX map parsing and automatic hitbox creation
- * based on collisions defined in Tiled
- *
- * ## Features
- *
- * - **Automatic parsing**: Parses TMX files from Tiled Map Editor
- * - **Collision detection**: Scans all tiles to detect collisions
- * - **Hitbox creation**: Automatically generates hitboxes for each collision tile
- * - **RpgMap extension**: Adds the `tiled` property to all RpgMap instances
- *
- * ## Usage
- *
- * Once this module is activated, you can use Tiled methods on your maps:
- *
- * @example
- * ```ts
- * // In a map class
- * class MyMap extends RpgMap {
- *     onLoad() {
- *         // Access Tiled functionality
- *         const tiles = this.tiled.getTileByPosition(100, 100);
- *
- *         if (tiles.hasCollision) {
- *             console.log('This position has a collision');
- *         }
- *
- *         // Iterate through all tiles by index
- *         for (let i = 0; i < this.tiled.width * this.tiled.height; i++) {
- *             const tileInfo = this.tiled.getTileByIndex(i);
- *             if (tileInfo.hasCollision) {
- *                 console.log(`Tile ${i} has collision`);
- *             }
- *         }
- *
- *         // Get information about a specific layer
- *         const layer = this.tiled.getLayerByName('Collision');
- *         if (layer) {
- *             console.log('Collision layer found:', layer);
- *         }
- *     }
- * }
- * ```
- */
 export default defineModule<RpgServer>({
   map: {
-    /**
-     * Hook called before map update
-     *
-     * @description Parses Tiled data and creates collision hitboxes
-     * automatically by iterating through all tiles on the map.
-     *
-     * This method:
-     * 1. Parses TMX data with TiledParser
-     * 2. Creates a MapClass instance with parsed data
-     * 3. Attaches the Tiled instance to the RpgMap
-     * 4. Scans all tiles to detect collisions
-     * 5. Automatically creates hitboxes for each collision tile
-     *
-     * @param mapData - Map data containing TMX information
-     * @param map - RpgMap instance to extend
-     * @returns The modified map instance with tiled property
-     *
-     * @example
-     * ```ts
-     * // Created hitboxes will have this structure:
-     * {
-     *     id: 'collision_x_y',           // Unique identifier
-     *     x: x * tileWidth,              // X position in pixels
-     *     y: y * tileHeight,             // Y position in pixels
-     *     width: tileWidth,              // Tile width
-     *     height: tileHeight,            // Tile height
-     *     properties: {
-     *         type: 'collision',         // Hitbox type
-     *         tileX: x,                  // X position in tiles
-     *         tileY: y,                  // Y position in tiles
-     *         tileIndex: tileIndex       // Tile index
-     *     }
-     * }
-     * ```
-     */
     onBeforeUpdate<T = RpgMap>(mapData: any, map: T): T {
-      const tiledMap = new MapClass(mapData.parsedMap);
-
-      // Attach Tiled instance to the map
-      (map as any).tiled = tiledMap;
-
-      // Initialize hitboxes array
-      mapData.hitboxes = mapData.hitboxes || [];
-      mapData.width = tiledMap.widthPx;
-      mapData.height = tiledMap.heightPx;
-
-      // Iterate through all map tiles to detect collisions
-      const mapWidth = tiledMap.width;
-      const mapHeight = tiledMap.height;
-      const tileWidth = tiledMap.tilewidth;
-      const tileHeight = tiledMap.tileheight;
-
-      // Iterate through each tile on the map
-      for (let y = 0; y < mapHeight; y++) {
-        for (let x = 0; x < mapWidth; x++) {
-          // Use getTileByPosition which is simpler and handles pixel coordinates directly
-          const pixelX = x * tileWidth;
-          const pixelY = y * tileHeight;
-          const tileInfo = tiledMap.getTileByPosition(pixelX, pixelY, [0, 0], {
-            populateTiles: true,
-          });
-
-          // If tile has collision, create a hitbox
-          if (tileInfo.hasCollision) {
-            const hitbox = {
-              id: `collision_${x}_${y}`,
-              x: pixelX,
-              y: pixelY,
-              width: tileWidth,
-              height: tileHeight,
-              properties: {
-                type: "collision",
-                tileX: x,
-                tileY: y,
-                tileIndex: tileInfo.tileIndex,
-              },
-            };
-
-            mapData.hitboxes.push(hitbox);
-          }
-        }
-      }
-
-      for (let obj of mapData.parsedMap.objects) {
-        if (obj.point) {
-          mapData.events = mapData.events
-            .map((e) => {
-              if (e.name === obj.name) {
-                return {
-                  event: e,
-                  x: obj.x,
-                  y: obj.y,
-                };
-              }
-              return e;
-            })
-            .filter((e) => e !== null);
-        }
-      }
+      prepareTiledPhysicsData(mapData, map as any);
+      applyTiledPointEvents(mapData);
       return map;
     },
+    onPhysicsInit(map: any, context: { mapData: any }) {
+      prepareTiledPhysicsData(context?.mapData, map);
+    },
   },
 });

package/src/tiled.ce

@@ -5,10 +5,14 @@
 <script>
     import { EventLayerComponent } from "@rpgjs/client";
     import { TiledMap } from "@canvasengine/presets";
-    import { signal } from "canvasengine";
+    import { signal, effect } from "canvasengine";
 
     const { data, params } = defineProps()
 
     const map = signal(data())
     const basePath = signal(params().basePath)
+
+    effect(() => {
+        map.set(data())
+    })
 </script>

package/dist/client.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;