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

package/dist/server.d.ts

@@ -1,5 +1,5 @@
 import { RpgMap } from '@rpgjs/server';
-import { MapClass } from '@rpgjs/tiled';
+import { MapClass } from '@canvasengine/tiled';
 declare module "@rpgjs/server" {
     interface RpgMap {
         tiled?: MapClass;
@@ -18,14 +18,14 @@ export interface RpgTiledMap extends RpgMap {
  * 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
+ * allowing TMX map parsing and automatic tile-based collision detection
+ * using the physics engine's tile grid system
  *
  * ## 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
+ * - **Tile grid system**: Uses physics engine tile grid to block movement on collision tiles
  * - **RpgMap extension**: Adds the `tiled` property to all RpgMap instances
  *
  * ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/tiledmap",
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.40",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -22,23 +22,25 @@
   "license": "MIT",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "peerDependencies": {
-    "canvasengine": "2.0.0-beta.21",
-    "@canvasengine/presets": "2.0.0-beta.21",
-    "@rpgjs/common": "5.0.0-alpha.4",
-    "@rpgjs/server": "5.0.0-alpha.4",
-    "@rpgjs/client": "5.0.0-alpha.4",
-    "@rpgjs/tiled": "5.0.0-alpha.4",
-    "@rpgjs/vite": "5.0.0-alpha.4"
+    "@canvasengine/presets": "*",
+    "@rpgjs/client": "5.0.0-alpha.40",
+    "@rpgjs/common": "5.0.0-alpha.40",
+    "@rpgjs/server": "5.0.0-alpha.40",
+    "@rpgjs/vite": "5.0.0-alpha.40",
+    "canvasengine": "*"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@canvasengine/compiler": "2.0.0-beta.21",
-    "vite": "^6.2.5",
-    "vite-plugin-dts": "^4.5.3"
+    "@canvasengine/compiler": "^2.0.0-beta.44",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
   },
   "type": "module",
+  "dependencies": {
+    "@canvasengine/tiled": "^2.0.0-beta.44"
+  },
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build"

package/src/client.ts

@@ -2,5 +2,5 @@ import { RpgClient, RpgClientEngine } from "@rpgjs/client";
 import { defineModule } from "@rpgjs/common";
 
 export default defineModule<RpgClient>({
-    effects: []
+    componentAnimations: []
 })

package/src/index.ts

@@ -2,11 +2,12 @@ import server from "./server";
 import client from "./client";
 import { createModule } from "@rpgjs/common";
 import { provideLoadMap } from "@rpgjs/client";
-import { TiledParser } from "@rpgjs/tiled";
+import { TiledParser } from "@canvasengine/tiled";
 import Tiled from "./tiled.ce";
 
 export function provideTiledMap(options: {
   basePath: string;
+  onLoadMap?: (map: string) => Promise<void>;
 }) {
   return createModule("TiledMap", [
     {
@@ -14,33 +15,41 @@ export function provideTiledMap(options: {
       client,
     },
     provideLoadMap?.(async (map) => {
-      'use client';
-      const response = await fetch(`${options.basePath}/${map}.tmx`)
-      const mapData = (await response.text()).replace(/source="([^"]+)"/g, `source="${options.basePath}/$1"`)
+      "use client";
+      const response = await fetch(`${options.basePath}/${map}.tmx`);
+      const mapData = (await response.text());
       const parser = new TiledParser(mapData);
       const parsedMap = parser.parseMap();
-      const tilesets: any = []
+      const tilesets: any = [];
       for (let tileset of parsedMap.tilesets) {
-        const response = await fetch(`${tileset.source}`);
+        const response = await fetch(`${options.basePath}/${tileset.source}`);
         const tilesetData = await response.text();
         const parser = new TiledParser(tilesetData);
         const parsedTileset = parser.parseTileset();
-        parsedTileset.image.source = `${options.basePath}/${parsedTileset.image.source}`
+        parsedTileset.image.source = `${options.basePath}/${parsedTileset.image.source}`;
         // Preserve firstgid from the original tileset reference
         tilesets.push({
-          ...tileset,  // Preserve original properties including firstgid
-          ...parsedTileset  // Merge with parsed tileset data
-        })
+          ...tileset, // Preserve original properties including firstgid
+          ...parsedTileset, // Merge with parsed tileset data
+        });
       }
-      parsedMap.tilesets = tilesets
-      
+      parsedMap.tilesets = tilesets;
+
       const obj = {
-       data: mapData,
-       component: Tiled,
-       parsedMap,
-       id: map
-     }
-      return obj
+        data: mapData,
+        component: Tiled,
+        parsedMap,
+        id: map,
+        params: {
+          basePath: options.basePath,
+        },
+      };
+
+      if (options.onLoadMap) {
+        await options.onLoadMap(map);
+      }
+
+      return obj;
     }),
   ]);
 }

package/src/server.ts

@@ -1,10 +1,7 @@
 import { RpgMap, RpgServer } from "@rpgjs/server";
-import { TiledParser, MapClass } from "@rpgjs/tiled";
+import { MapClass } from "@canvasengine/tiled";
 import { defineModule } from "@rpgjs/common";
 
-// Import TileInfo depuis le bon endroit
-import type { TileInfo } from "@rpgjs/tiled/src/classes/Map";
-
 // Extend RpgMap interface to include tiled property
 declare module "@rpgjs/server" {
   interface RpgMap {
@@ -26,14 +23,14 @@ export interface RpgTiledMap extends RpgMap {
  * 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
+ * allowing TMX map parsing and automatic tile-based collision detection
+ * using the physics engine's tile grid system
  *
  * ## 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
+ * - **Tile grid system**: Uses physics engine tile grid to block movement on collision tiles
  * - **RpgMap extension**: Adds the `tiled` property to all RpgMap instances
  *
  * ## Usage
@@ -74,15 +71,20 @@ export default defineModule<RpgServer>({
     /**
      * 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
@@ -90,20 +92,9 @@ export default defineModule<RpgServer>({
      *
      * @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<T = RpgMap>(mapData: any, map: T): T {
@@ -112,16 +103,24 @@ export default defineModule<RpgServer>({
       // Attach Tiled instance to the map
       (map as any).tiled = tiledMap;
 
-      // Initialize hitboxes array
+      // Initialize hitboxes array (for backward compatibility, but we won't populate it)
       mapData.hitboxes = mapData.hitboxes || [];
       mapData.width = tiledMap.widthPx;
       mapData.height = tiledMap.heightPx;
 
+      // Store tile dimensions for coordinate conversion
+      const tileWidth = tiledMap.tilewidth;
+      const tileHeight = tiledMap.tileheight;
+      (map as any)._tiledTileWidth = tileWidth;
+      (map as any)._tiledTileHeight = tileHeight;
+
+      // Store blocked tiles in a Set for efficient lookup
+      // Key format: "x,y" where x and y are tile coordinates in Tiled's coordinate system
+      const blockedTiles = new Set<string>();
+
       // 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++) {
@@ -133,27 +132,16 @@ export default defineModule<RpgServer>({
             populateTiles: true,
           });
 
-          // If tile has collision, create a hitbox
+          // If tile has collision, add it to the blocked tiles set
           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}`);
           }
         }
       }
 
+      // Store blocked tiles on the map instance
+      (map as any)._blockedTiles = blockedTiles;
+
       for (let obj of mapData.parsedMap.objects) {
         if (obj.point) {
           mapData.events = mapData.events
@@ -170,7 +158,131 @@ export default defineModule<RpgServer>({
             .filter((e) => e !== null);
         }
       }
+
+      // Apply tile collision to all existing entities after a short delay
+      // to ensure physics entities are created
+      setTimeout(() => {
+        applyTileCollisionToEntities(map as any);
+      }, 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: any, map: any) {
+      // Apply tile collision after a short delay to ensure physics entity is created
+      setTimeout(() => {
+        applyTileCollisionToEntity(player, map);
+      }, 0);
+    },
+  },
 });
+
+/**
+ * Applies tile-based collision detection to a single entity
+ *
+ * @description This function sets up the `canEnterTile` hook on an entity's physics body
+ * to prevent movement into blocked tiles. It converts tile coordinates from the physics
+ * engine's coordinate system (based on default 32x32 tiles) to Tiled's coordinate system.
+ *
+ * @param owner - The owner object (player or event) that has a physics entity
+ * @param map - The map instance containing blocked tiles
+ *
+ * @example
+ * ```ts
+ * // This is called automatically when a player joins a map or an event is created
+ * // The function checks if the tile the entity is trying to enter is in the
+ * // blocked tiles set, converting coordinates as needed
+ * ```
+ */
+function applyTileCollisionToEntity(owner: any, map: any) {
+  if (!owner?.id || !map?._blockedTiles) {
+    return;
+  }
+
+  const entity = map.physic?.getEntityByUUID(owner.id);
+  if (!entity) {
+    return;
+  }
+
+  const blockedTiles = map._blockedTiles as Set<string>;
+  const tiledTileWidth = map._tiledTileWidth ?? 32;
+  const tiledTileHeight = map._tiledTileHeight ?? 32;
+
+  // Physics engine uses default 32x32 tiles, but Tiled may have different dimensions
+  // We need to convert physics engine tile coordinates to Tiled tile coordinates
+  const physicsTileWidth = 32; // Default physics engine tile width
+  const physicsTileHeight = 32; // Default physics engine tile height
+
+  // Apply canEnterTile hook to the entity
+  entity.canEnterTile(({ x, y }) => {
+    // x, y are tile coordinates from the physics engine (based on 32x32 tiles)
+    // Convert to Tiled tile coordinates
+    const tiledX = Math.floor((x * physicsTileWidth) / tiledTileWidth);
+    const tiledY = Math.floor((y * physicsTileHeight) / tiledTileHeight);
+
+    // Check if this tile is blocked
+    const tileKey = `${tiledX},${tiledY}`;
+    if (blockedTiles.has(tileKey)) {
+      return false; // Block movement into this tile
+    }
+
+    return true; // Allow movement
+  });
+}
+
+/**
+ * Applies tile-based collision detection to all existing entities on a map
+ *
+ * @description This function iterates through all players and events on the map
+ * and applies the tile collision hook to each one's physics entity. This is useful
+ * when setting up the map for the first time or when entities already exist before
+ * the map is loaded.
+ *
+ * @param map - The map instance containing blocked tiles
+ *
+ * @example
+ * ```ts
+ * // Called automatically in onBeforeUpdate to apply collision to existing entities
+ * ```
+ */
+function applyTileCollisionToEntities(map: any) {
+  if (!map?._blockedTiles) {
+    return;
+  }
+
+  // Apply to all players
+  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);
+        }
+      }
+    }
+  }
+
+  // Apply to all events
+  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);
+        }
+      }
+    }
+  }
+}

package/src/tiled.ce

@@ -1,13 +1,18 @@
 <Container>
-    <TiledMap map basePath="map" createLayersPerTilesZ={true} objectLayer={() => <EventLayerComponent />}  />
+    <TiledMap map basePath createLayersPerTilesZ={true} objectLayer={() => <EventLayerComponent />}  />
 </Container>
 
 <script>
     import { EventLayerComponent } from "@rpgjs/client";
     import { TiledMap } from "@canvasengine/presets";
-    import { signal } from "canvasengine";
+    import { signal, effect } from "canvasengine";
 
-    const { data, children } = defineProps()
+    const { data, params } = defineProps()
 
     const map = signal(data())
+    const basePath = signal(params().basePath)
+
+    effect(() => {
+        map.set(data())
+    })
 </script>