@rpgjs/tiledmap 5.0.0-alpha.4 → 5.0.0-alpha.40

package/dist/client/index4.js

@@ -0,0 +1,18 @@
+import { useProps, useDefineProps, signal, effect, h, Container } from "canvasengine";
+import { EventLayerComponent } from "@rpgjs/client";
+import { TiledMap } from "@canvasengine/presets";
+function component($$props) {
+  useProps($$props);
+  const defineProps = useDefineProps($$props);
+  var _a = defineProps(), data = _a.data, params = _a.params;
+  var map = signal(data());
+  var basePath = signal(params().basePath);
+  effect(function() {
+    map.set(data());
+  });
+  let $this = h(Container, null, h(TiledMap, { map, basePath, createLayersPerTilesZ: true, objectLayer: () => h(EventLayerComponent) }));
+  return $this;
+}
+export {
+  component as default
+};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export declare function provideTiledMap(options: {
     basePath: string;
+    onLoadMap?: (map: string) => Promise<void>;
 }): any;

package/dist/server/index.js

@@ -1,6 +1,6 @@
 import server from "./index2.js";
 import { createModule } from "@rpgjs/common";
-import "@rpgjs/tiled";
+import "./index3.js";
 const client = null;
 const provideLoadMap = null;
 function provideTiledMap(options) {
@@ -9,7 +9,7 @@ function provideTiledMap(options) {
       server,
       client
     },
-    provideLoadMap == null ? void 0 : provideLoadMap()
+    provideLoadMap?.()
   ]);
 }
 export {

package/dist/server/index2.js

@@ -1,19 +1,24 @@
-import { MapClass } from "@rpgjs/tiled";
+import { MapClass } from "./index3.js";
 import { defineModule } from "@rpgjs/common";
 const server = defineModule({
   map: {
     /**
      * Hook called before map update
      *
-     * @description Parses Tiled data and creates collision hitboxes
-     * automatically by iterating through all tiles on the map.
+     * @description Parses Tiled data and sets up tile-based collision detection
+     * using the physics engine's tile grid system instead of individual hitboxes.
      *
      * 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
+     * 5. Stores blocked tiles in a Set for use with the physics engine tile grid
+     * 6. Configures tile dimensions for proper coordinate conversion
+     *
+     * The blocked tiles are used by the physics engine's `canEnterTile` hook
+     * to prevent entities from entering collision tiles, which is more efficient
+     * than creating individual hitboxes for each tile.
      *
      * @param mapData - Map data containing TMX information
      * @param map - RpgMap instance to extend
@@ -21,20 +26,9 @@ const server = defineModule({
      *
      * @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
-     *     }
-     * }
+     * // Blocked tiles are stored as a Set with keys "x,y" (tile coordinates)
+     * // The physics engine will automatically check these tiles when entities
+     * // try to move, using the canEnterTile hook applied to all entities
      * ```
      */
     onBeforeUpdate(mapData, map) {
@@ -43,10 +37,13 @@ const server = defineModule({
       mapData.hitboxes = mapData.hitboxes || [];
       mapData.width = tiledMap.widthPx;
       mapData.height = tiledMap.heightPx;
-      const mapWidth = tiledMap.width;
-      const mapHeight = tiledMap.height;
       const tileWidth = tiledMap.tilewidth;
       const tileHeight = tiledMap.tileheight;
+      map._tiledTileWidth = tileWidth;
+      map._tiledTileHeight = tileHeight;
+      const blockedTiles = /* @__PURE__ */ new Set();
+      const mapWidth = tiledMap.width;
+      const mapHeight = tiledMap.height;
       for (let y = 0; y < mapHeight; y++) {
         for (let x = 0; x < mapWidth; x++) {
           const pixelX = x * tileWidth;
@@ -55,23 +52,11 @@ const server = defineModule({
             populateTiles: true
           });
           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);
+            blockedTiles.add(`${x},${y}`);
           }
         }
       }
+      map._blockedTiles = blockedTiles;
       for (let obj of mapData.parsedMap.objects) {
         if (obj.point) {
           mapData.events = mapData.events.map((e) => {
@@ -86,10 +71,79 @@ const server = defineModule({
           }).filter((e) => e !== null);
         }
       }
+      setTimeout(() => {
+        applyTileCollisionToEntities(map);
+      }, 0);
       return map;
     }
+  },
+  player: {
+    /**
+     * Hook called when a player joins a map
+     *
+     * @description Applies tile-based collision detection to the player's physics entity
+     * using the blocked tiles stored on the map
+     *
+     * @param player - The player instance
+     * @param map - The map instance
+     */
+    onJoinMap(player, map) {
+      setTimeout(() => {
+        applyTileCollisionToEntity(player, map);
+      }, 0);
+    }
   }
 });
+function applyTileCollisionToEntity(owner, map) {
+  if (!owner?.id || !map?._blockedTiles) {
+    return;
+  }
+  const entity = map.physic?.getEntityByUUID(owner.id);
+  if (!entity) {
+    return;
+  }
+  const blockedTiles = map._blockedTiles;
+  const tiledTileWidth = map._tiledTileWidth ?? 32;
+  const tiledTileHeight = map._tiledTileHeight ?? 32;
+  const physicsTileWidth = 32;
+  const physicsTileHeight = 32;
+  entity.canEnterTile(({ x, y }) => {
+    const tiledX = Math.floor(x * physicsTileWidth / tiledTileWidth);
+    const tiledY = Math.floor(y * physicsTileHeight / tiledTileHeight);
+    const tileKey = `${tiledX},${tiledY}`;
+    if (blockedTiles.has(tileKey)) {
+      return false;
+    }
+    return true;
+  });
+}
+function applyTileCollisionToEntities(map) {
+  if (!map?._blockedTiles) {
+    return;
+  }
+  if (map.players && typeof map.players === "function") {
+    const players = map.players();
+    if (players && typeof players === "object") {
+      for (const playerId in players) {
+        const player = players[playerId];
+        if (player) {
+          applyTileCollisionToEntity(player, map);
+        }
+      }
+    }
+  }
+  if (map.events && typeof map.events === "function") {
+    const events = map.events();
+    if (events && typeof events === "object") {
+      for (const eventId in events) {
+        const event = events[eventId];
+        if (event) {
+          applyTileCollisionToEntity(event, map);
+        }
+      }
+    }
+  }
+}
 export {
   server as default
 };