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

package/dist/client/index2.js

@@ -1,6 +1,21 @@
 import { defineModule } from "@rpgjs/common";
+import { resetTiledCollisionHandlers, detachTiledCollisionFromEntity, attachTiledCollisionToEntity, prepareTiledPhysicsData } from "./index5.js";
 const client = defineModule({
-  componentAnimations: []
+  componentAnimations: [],
+  sceneMap: {
+    onPhysicsInit(map, context) {
+      prepareTiledPhysicsData(context?.mapData, map);
+    },
+    onPhysicsEntityAdd(map, context) {
+      attachTiledCollisionToEntity(context?.owner, map);
+    },
+    onPhysicsEntityRemove(map, context) {
+      detachTiledCollisionFromEntity(context?.owner, map);
+    },
+    onPhysicsReset(map) {
+      resetTiledCollisionHandlers(map);
+    }
+  }
 });
 export {
   client as default

package/dist/client/index3.js

@@ -1,3 +1,10 @@
+var TiledLayerType = /* @__PURE__ */ ((TiledLayerType2) => {
+  TiledLayerType2["Tile"] = "tilelayer";
+  TiledLayerType2["ObjectGroup"] = "objectgroup";
+  TiledLayerType2["Image"] = "imagelayer";
+  TiledLayerType2["Group"] = "group";
+  return TiledLayerType2;
+})(TiledLayerType || {});
 function joinPath(...segments) {
   return segments.filter((segment) => segment && segment.length > 0).join("/").replace(/\/+/g, "/");
 }
@@ -4636,6 +4643,579 @@ _TiledParser.propToBool = (obj, props) => {
   return obj;
 };
 let TiledParser = _TiledParser;
+class TiledProperties {
+  constructor(data) {
+    this.properties = {};
+    this.properties = data?.properties ?? {};
+  }
+  getProperty(name, defaultValue) {
+    const val = this.properties[name];
+    if (val === void 0) {
+      return defaultValue;
+    }
+    return val;
+  }
+  hasProperty(name) {
+    return !!this.properties[name];
+  }
+  setProperty(name, value) {
+    this.properties[name] = value;
+  }
+  getType() {
+    return this.class || this["type"];
+  }
+}
+const FLIPPED_HORIZONTALLY_FLAG = 2147483648;
+const FLIPPED_VERTICALLY_FLAG = 1073741824;
+const FLIPPED_DIAGONALLY_FLAG = 536870912;
+const ROTATED_HEXAGONAL_120_FLAG = 268435456;
+class TileGid extends TiledProperties {
+  constructor(obj) {
+    super(obj);
+    this.obj = obj;
+    this._gid = obj?.gid;
+  }
+  static getRealGid(gid) {
+    return gid & 268435455;
+  }
+  get horizontalFlip() {
+    return !!(this._gid & FLIPPED_HORIZONTALLY_FLAG);
+  }
+  get verticalFlip() {
+    return !!(this._gid & FLIPPED_VERTICALLY_FLAG);
+  }
+  get diagonalFlip() {
+    return !!(this._gid & FLIPPED_DIAGONALLY_FLAG);
+  }
+  get rotatedHex120() {
+    return !!(this._gid & ROTATED_HEXAGONAL_120_FLAG);
+  }
+  get gid() {
+    return TileGid.getRealGid(this._gid);
+  }
+  set gid(val) {
+    this._gid = val;
+  }
+}
+class Tile extends TileGid {
+  constructor(tile) {
+    super(tile);
+    this.tile = tile;
+    const preservedProperties = this.properties;
+    Reflect.deleteProperty(tile, "gid");
+    Object.assign(this, tile);
+    if (preservedProperties && Object.keys(preservedProperties).length > 0) {
+      this.properties = { ...preservedProperties, ...this.properties };
+    }
+  }
+}
+class TiledObjectClass extends TileGid {
+  constructor(object) {
+    super(object);
+    this.layerName = "";
+    Object.assign(this, object);
+    if (object?.gid) {
+      this.y -= this.height;
+    }
+  }
+}
+class Layer extends TiledProperties {
+  constructor(layer, tilesets, parent) {
+    super(layer);
+    this.tilesets = tilesets;
+    this.parent = parent;
+    this.cacheTiles = false;
+    this.tiles = [];
+    Object.assign(this, layer);
+    this.mapObjects();
+    this.mergePropertiesWithParent();
+    this.cacheTiles = this.getProperty("cache-tiles", false);
+    if (this.cacheTiles) this.propertiesTiles();
+  }
+  get size() {
+    return this.data.length;
+  }
+  createTile(gid, tileIndex, layerIndex) {
+    if (gid == 0) {
+      return;
+    }
+    const realGid = TileGid.getRealGid(gid);
+    const tileset = Layer.findTileSet(realGid, this.tilesets);
+    if (!tileset) {
+      return void 0;
+    }
+    const tile = tileset.getTile(realGid - tileset.firstgid);
+    if (tile) {
+      return new Tile({
+        ...tile.tile,
+        gid,
+        index: tileIndex,
+        layerIndex
+      });
+    }
+    return new Tile({
+      gid,
+      index: tileIndex,
+      layerIndex
+    });
+  }
+  mergePropertiesWithParent() {
+    const parent = this.getLayerParent();
+    if (!this.properties) this.properties = {};
+    if (!parent) return;
+    for (let key in parent.properties) {
+      const val = parent.properties[key];
+      const valChild = this.properties[key];
+      if (valChild === void 0) {
+        this.properties[key] = val;
+      } else {
+        if (key == "z") {
+          this.properties[key] += val;
+        } else {
+          continue;
+        }
+      }
+    }
+    this.opacity = Math.round((parent.opacity ?? 1) * (this.opacity ?? 1) * 100) / 100;
+    this.offsetx = (parent.offsetx ?? 0) + (this.offsetx ?? 0);
+    this.offsety = (parent.offsety ?? 0) + (this.offsety ?? 0);
+    this.locked = parent.locked ?? false;
+  }
+  propertiesTiles() {
+    if (!this.data) return;
+    const data = this.data;
+    for (let i = 0; i < data.length; i++) {
+      const id = data[i];
+      this.tiles.push(this.createTile(id, i));
+    }
+  }
+  mapObjects() {
+    if (this.objects) {
+      this.objects = this.objects.map((object) => {
+        const obj = new TiledObjectClass(object);
+        obj.layerName = this.name;
+        return obj;
+      });
+    }
+  }
+  getTileByIndex(tileIndex) {
+    if (this.cacheTiles) {
+      return this.tiles[tileIndex];
+    }
+    return this.createTile(this.data[tileIndex], tileIndex);
+  }
+  static findTileSet(gid, tileSets) {
+    let tileset;
+    for (let i = tileSets.length - 1; i >= 0; i--) {
+      tileset = tileSets[i];
+      if (tileset.firstgid && tileset.firstgid <= gid) {
+        break;
+      }
+    }
+    return tileset;
+  }
+  getLayerParent() {
+    return this.parent;
+  }
+  tilesForEach(cb) {
+    for (let i = 0; i < this.data.length; i++) {
+      if (this.cacheTiles) {
+        cb(this.tiles[i], i);
+        continue;
+      }
+      cb(this.createTile(this.data[i], i), i);
+    }
+  }
+  setData(tileIndex, gid) {
+    this.data[tileIndex] = gid;
+  }
+}
+class Tileset extends TiledProperties {
+  constructor(tileset) {
+    super(tileset);
+    this.tileset = tileset;
+    this.cacheTileId = /* @__PURE__ */ new Map();
+    Object.assign(this, tileset);
+    this.margin = this.margin ?? 0;
+    this.spacing = this.spacing ?? 0;
+    const tilesArray = tileset.tiles || tileset.tile || [];
+    for (let tile of tilesArray) {
+      this.addTile(tile);
+    }
+    Reflect.deleteProperty(this, "tiles");
+    Reflect.deleteProperty(this, "tile");
+  }
+  addTile(tileObj) {
+    const tile = new Tile(tileObj);
+    this.cacheTileId.set(tile.id, tile);
+    return tile;
+  }
+  getTile(id) {
+    return this.cacheTileId.get(+id);
+  }
+}
+let bufferTilesets = {};
+class MapClass extends TiledProperties {
+  constructor(map) {
+    super(map ?? {});
+    this.tilesets = [];
+    this.layers = [];
+    this.tmpLayers = [];
+    this.tilesIndex = {};
+    this.allocateMemory = 0;
+    this.lowMemory = false;
+    if (map) this.load(map);
+  }
+  load(map) {
+    Object.assign(this, map);
+    if (this.hasProperty("low-memory")) {
+      this.lowMemory = this.getProperty("low-memory", false);
+    }
+    this.tmpLayers = [];
+    this.mapTilesets();
+    this.mapLayers(this.layers);
+    this.layers = [...this.tmpLayers];
+    Reflect.deleteProperty(this, "tmpLayers");
+    this.setTilesIndex();
+    this.data = map;
+  }
+  /** 
+   * @title Width of the map in pixels
+   * @prop {number} [widthPx]
+   * @readonly
+   * @memberof Map
+   * @memberof RpgSceneMap
+   * */
+  get widthPx() {
+    return this.width * this.tilewidth;
+  }
+  /** 
+  * @title Height of the map in pixels
+  * @prop {number} [heightPx]
+  * @readonly
+  * @memberof Map
+  * @memberof RpgSceneMap
+  * */
+  get heightPx() {
+    return this.height * this.tileheight;
+  }
+  /** 
+   * @title The depth of the map in pixels (this is the height of a tile ;))
+   * @prop {number} map.zTileHeight
+   * @readonly
+   * @memberof Map
+   * @memberof RpgSceneMap
+   * */
+  get zTileHeight() {
+    return this.tileheight;
+  }
+  /**
+       * Find a layer by name. Returns `undefined` is the layer is not found
+  
+       * @title Get Layer by name
+       * @method map.getLayerByName(name)
+       * @param {string} name layer name
+       * @returns {LayerInfo | undefined}
+       * @example
+       *  ```ts
+       *  const tiles = map.getLayerByName(0, 0)
+       *  ```
+       * @memberof Map
+       * @memberof RpgSceneMap
+       */
+  getLayerByName(name) {
+    return this.layers.find((layer) => layer.name == name);
+  }
+  /**
+  * Get the tile index on the tileset
+  * 
+  * @title Get index of tile
+  * @method map.getTileIndex(x,y)
+  * @param {number} x Position X
+  * @param {number} x Position Y
+  * @returns {number}
+  * @memberof Map
+  * @memberof RpgSceneMap
+  */
+  getTileIndex(x, y, [z] = [0]) {
+    return this.width * Math.floor((y - z) / this.tileheight) + Math.floor(x / this.tilewidth);
+  }
+  getTilePosition(index) {
+    return {
+      y: Math.floor(index / this.width) * this.tileheight,
+      x: index % this.width * this.tilewidth
+    };
+  }
+  /**
+       * Find the point of origin (top left) of a tile. Of course, its position depends on the size of the tile
+  
+       * @title Get origin position of tile
+       * @method map.getTileOriginPosition(x,y)
+       * @param {number} x Position X
+       * @param {number} x Position Y
+       * @returns { {x: number, y: number }}
+       * @example
+       *  ```ts
+       *  // If the size of a tile is 32x32px
+       *  const position = map.getTileOriginPosition(35, 12)
+       *  console.log(position) // { x: 32, y: 0 }
+       *  ```
+       * @memberof Map
+       * @memberof RpgSceneMap
+       */
+  getTileOriginPosition(x, y) {
+    return {
+      x: Math.floor(x / this.tilewidth) * this.tilewidth,
+      y: Math.floor(y / this.tileheight) * this.tileheight
+    };
+  }
+  /**
+      * Recover tiles according to a position
+  
+      * @title Get tile by position
+      * @method map.getTileByPosition(x,y)
+      * @param {number} x Position X
+      * @param {number} x Position Y
+      * @returns {TileInfo}
+      * @example
+      *  ```ts
+      *  const tiles = map.getTileByPosition(0, 0)
+      *  ```
+      * @memberof Map
+      * @memberof RpgSceneMap
+      */
+  getTileByPosition(x, y, z = [0, 0], options = {}) {
+    const tileIndex = this.getTileIndex(x, y, [z[0]]);
+    return this.getTileByIndex(tileIndex, z, options);
+  }
+  /**
+       * Retrieves tiles according to its index
+  
+       * @title Get tile by index
+       * @method map.getTileByIndex(tileIndex)
+       * @param {number} tileIndex tile index
+       * @returns {TileInfo}
+       * @example
+       *  ```ts
+       *  const index = map.getTileIndex(0, 0)
+       *  const tiles = map.getTileByIndex(index)
+       *  ```
+       * @memberof Map
+       * @memberof RpgSceneMap
+       */
+  getTileByIndex(tileIndex, zPlayer = [0, 0], options = {
+    populateTiles: true
+  }) {
+    const zA = Math.floor(zPlayer[0] / this.zTileHeight);
+    Math.floor(zPlayer[1] / this.zTileHeight);
+    const level = this.tilesIndex[zA];
+    const obj = {
+      tiles: [],
+      hasCollision: false,
+      isOverlay: false,
+      objectGroups: [],
+      tileIndex
+    };
+    if (!level) {
+      return obj;
+    }
+    const [layer] = this.layers;
+    const getTileByPointer = (pointer = 0) => {
+      const pos = tileIndex * this.realAllocateMemory + pointer;
+      const gid = level[pos];
+      if (gid === 0) {
+        return obj;
+      }
+      const tile2 = layer.createTile(gid, tileIndex, level[pos + 1]);
+      if (tile2) obj.tiles.push(tile2);
+    };
+    if (options.populateTiles) {
+      for (let i = 0; i < this.realAllocateMemory; i += 2) {
+        getTileByPointer(i);
+      }
+    } else {
+      getTileByPointer();
+    }
+    const [tile] = obj.tiles;
+    if (tile) {
+      obj.hasCollision = tile.getProperty("collision", false);
+      obj.objectGroups = tile.objects ?? [];
+    }
+    return obj;
+  }
+  getAllObjects() {
+    return this.layers.reduce((prev, current) => {
+      if (!current.objects) return prev;
+      return prev.concat(...current.objects);
+    }, []);
+  }
+  getData() {
+    return {
+      ...this.data,
+      layers: this.layers
+    };
+  }
+  setTile(x, y, layerFilter, tileInfo) {
+    if (this.lowMemory) {
+      throw "Impossible to change a tile with the lowMemory option";
+    }
+    const tileIndex = this.getTileIndex(x, y);
+    let fnFilter;
+    let tilesEdited = {};
+    if (typeof layerFilter == "string") {
+      fnFilter = (layer) => layer.name == layerFilter;
+    } else {
+      fnFilter = layerFilter;
+    }
+    for (let i = 0; i < this.layers.length; i++) {
+      const layer = this.layers[i];
+      if (!fnFilter(layer)) continue;
+      let tile;
+      const oldTile = this.getTileByIndex(tileIndex);
+      if (tileInfo.gid) {
+        tile = layer.createTile(tileInfo.gid, tileIndex);
+      }
+      if (!tile) continue;
+      for (let key in tileInfo) {
+        if (key == "gid") continue;
+        tile[key] = tileInfo[key];
+      }
+      tilesEdited[layer.name] = {
+        gid: tile.gid,
+        properties: tile.properties
+      };
+      this.setTileIndex(layer, oldTile.tiles[0], tile, tileIndex, i);
+      layer.setData(tileIndex, tile.gid);
+    }
+    return {
+      x,
+      y,
+      tiles: tilesEdited
+    };
+  }
+  removeCacheTileset(name) {
+    delete bufferTilesets[name];
+  }
+  clearCacheTilesets() {
+    bufferTilesets = {};
+  }
+  mapTilesets() {
+    this.tilesets = this.tilesets.map((tileset) => {
+      if (bufferTilesets[tileset.name]) {
+        const instance = bufferTilesets[tileset.name];
+        instance.firstgid = tileset.firstgid;
+        return instance;
+      }
+      const _tileset = new Tileset(tileset);
+      bufferTilesets[_tileset.name] = _tileset;
+      return _tileset;
+    });
+  }
+  mapLayers(layers = [], parent) {
+    for (let layer of layers) {
+      const layerInstance = new Layer(layer, this.tilesets, parent);
+      this.tmpLayers.push(layerInstance);
+      if (layer.layers) {
+        this.mapLayers(layer.layers, layerInstance);
+      }
+    }
+    if (this.lowMemory) this.allocateMemory = 1;
+    if (!this.allocateMemory) this.allocateMemory = this.layers.length;
+  }
+  setTileIndex(layer, oldTile, newTile, tileIndex, layerIndex) {
+    const startPos = tileIndex * this.realAllocateMemory;
+    let pointer = startPos + this.realAllocateMemory - 2;
+    const zLayer = layer.getProperty("z", 0);
+    const zTile = oldTile.getProperty("z", 0);
+    let z = zLayer + zTile;
+    while (pointer >= startPos) {
+      const zlayer = this.tilesIndex[z];
+      if (zlayer[pointer] === oldTile.gid && zlayer[pointer + 1] === layerIndex) {
+        this.tilesIndex[z][pointer] = newTile.gid;
+      }
+      pointer -= 2;
+    }
+  }
+  /**
+   * We multiply by 2 because 2 entries are stored for a tile: its GID and the Layer Index
+   * 
+   * Example If I have 3 layers, The array will have the following form 
+   * 
+   * [
+   *  GID of Layer 3, 
+   *  Layer Index of Layer 3, 
+   *  GID of Layer 2, 
+   *  Layer Index of Layer 2, 
+   *  GID of Layer 1, 
+   *  Layer Index of Layer 1,
+   * ... others tiles
+   * ]
+   * 
+   * The size in memory of the map is therefore:
+   * 
+   * `(map width * map height * number of layers * 4) bytes`
+   * 
+   * > We multiply by 4, because an element takes 2 bytes and has 2 elements for a tile is 4 bytes in all
+   * 
+   * Example (a 100x100 map with 5 layers)
+   * 
+   * `100 * 100 * 5 * 4 = 200000 bytes = ~195 Kb`
+   * 
+   * If we define on lowMemory then the calculation is the following
+   * 
+   * `(map width * map height * 4) bytes`
+   * 
+   * Example
+   * 
+   * `100 * 100 * 4 = 40000 bytes = ~39 Kb`
+   */
+  get realAllocateMemory() {
+    return this.allocateMemory * 2;
+  }
+  /**
+   * We keep each tile in memory classified by z value. The values are ordered from the end to the beginning so that the first element of the array (when retrieved with getTileByIndex() is the tile on the highest layer. This way, the tile search is very fast for collisions 
+   * 
+   */
+  addTileIndex(layer, tile, tileIndex, layerIndex) {
+    if (!tile || tile && tile.gid == 0) {
+      return;
+    }
+    const zLayer = layer.getProperty("z", 0);
+    const zTile = tile.getProperty("z", 0);
+    let z = zLayer + zTile;
+    if (!this.tilesIndex[z]) {
+      const buffer2 = new ArrayBuffer(layer.size * this.realAllocateMemory * 2);
+      this.tilesIndex[z] = new Uint16Array(buffer2);
+    }
+    const startPos = tileIndex * this.realAllocateMemory;
+    let pointer = startPos + this.realAllocateMemory - 2;
+    while (this.tilesIndex[z][pointer] !== 0 && pointer > startPos) {
+      pointer -= 2;
+    }
+    this.tilesIndex[z][pointer] = tile.gid;
+    this.tilesIndex[z][pointer + 1] = layerIndex;
+    this.tilesIndex[z][startPos] = tile.gid;
+    this.tilesIndex[z][startPos + 1] = layerIndex;
+  }
+  setTilesIndex() {
+    for (let i = 0; i < this.layers.length; i++) {
+      const layer = this.layers[i];
+      if (layer.type != TiledLayerType.Tile) {
+        continue;
+      }
+      layer.tilesForEach((tile, index) => {
+        this.addTileIndex(layer, tile, index, i);
+      });
+    }
+  }
+}
 export {
-  TiledParser
+  Layer,
+  MapClass,
+  Tile,
+  TiledLayerType,
+  TiledObjectClass,
+  TiledParser,
+  TiledProperties,
+  Tileset
 };

package/dist/client/index5.js

@@ -0,0 +1,95 @@
+import { MapClass } from "./index3.js";
+function prepareTiledPhysicsData(mapData, map) {
+  if (!mapData?.parsedMap) {
+    return;
+  }
+  const tiledMap = new MapClass(mapData.parsedMap);
+  map.tiled = tiledMap;
+  mapData.hitboxes = mapData.hitboxes || [];
+  mapData.width = tiledMap.widthPx;
+  mapData.height = tiledMap.heightPx;
+  map._tiledTileWidth = tiledMap.tilewidth;
+  map._tiledTileHeight = tiledMap.tileheight;
+  map._blockedTiles = collectBlockedTiles(tiledMap);
+}
+function attachTiledCollisionToEntity(owner, map) {
+  if (!owner?.id || !map?._blockedTiles) {
+    return;
+  }
+  const entity = map.physic?.getEntityByUUID(owner.id);
+  if (!entity || typeof entity.canEnterTile !== "function") {
+    return;
+  }
+  const unsubscribers = ensureUnsubscribers(map);
+  const previousUnsubscribe = unsubscribers.get(owner.id);
+  if (previousUnsubscribe) {
+    previousUnsubscribe();
+    unsubscribers.delete(owner.id);
+  }
+  const blockedTiles = map._blockedTiles;
+  const tiledTileWidth = map._tiledTileWidth ?? 32;
+  const tiledTileHeight = map._tiledTileHeight ?? 32;
+  const physicsTileWidth = 32;
+  const physicsTileHeight = 32;
+  const unsubscribe = entity.canEnterTile(({ x, y }) => {
+    const tiledX = Math.floor(x * physicsTileWidth / tiledTileWidth);
+    const tiledY = Math.floor(y * physicsTileHeight / tiledTileHeight);
+    return !blockedTiles.has(`${tiledX},${tiledY}`);
+  });
+  unsubscribers.set(owner.id, unsubscribe);
+}
+function detachTiledCollisionFromEntity(owner, map) {
+  if (!owner?.id) {
+    return;
+  }
+  const unsubscribers = map._tiledCollisionUnsubscribers;
+  if (!unsubscribers) {
+    return;
+  }
+  const unsubscribe = unsubscribers.get(owner.id);
+  if (!unsubscribe) {
+    return;
+  }
+  unsubscribe();
+  unsubscribers.delete(owner.id);
+}
+function resetTiledCollisionHandlers(map) {
+  const unsubscribers = map._tiledCollisionUnsubscribers;
+  if (unsubscribers) {
+    for (const unsubscribe of unsubscribers.values()) {
+      unsubscribe();
+    }
+    unsubscribers.clear();
+  }
+  map._blockedTiles = void 0;
+  map._tiledTileWidth = void 0;
+  map._tiledTileHeight = void 0;
+}
+function collectBlockedTiles(tiledMap) {
+  const blockedTiles = /* @__PURE__ */ new Set();
+  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) {
+        blockedTiles.add(`${x},${y}`);
+      }
+    }
+  }
+  return blockedTiles;
+}
+function ensureUnsubscribers(map) {
+  map._tiledCollisionUnsubscribers = map._tiledCollisionUnsubscribers || /* @__PURE__ */ new Map();
+  return map._tiledCollisionUnsubscribers;
+}
+export {
+  attachTiledCollisionToEntity,
+  detachTiledCollisionFromEntity,
+  prepareTiledPhysicsData,
+  resetTiledCollisionHandlers
+};