angry-pixel 2.3.6 → 2.3.7

package/lib/index.d.ts

@@ -2631,12 +2631,12 @@ declare enum ButtonShape {
  * @example
  * ```js
  * const tiledWrapper = new TiledWrapper({
- *   tilemap: "tilemap.json",
+ *   tilemapPath: "tilemap.json",
  *   layerToRender: "Ground"
  * });
  *
  * const tiledWrapper = new TiledWrapper({
- *   tilemap: assetManager.getJson("tilemap.json"),
+ *   tilemapPath: "tilemap.json",
  *   layerToRender: "Ground",
  *   objects: new Map([
  *     ["Player", playerArchetype],
@@ -2647,37 +2647,31 @@ declare enum ButtonShape {
  * ```
  */
 interface TiledWrapperOptions {
-    tilemap: TiledTilemap | string;
+    tilemapPath: string;
     layerToRender: string;
     objects: Map<string, TiledObjectBlueprint>;
 }
 /**
  * The TiledWrapper component wraps a Tiled map editor tilemap and handles rendering a specific layer.\
  * It provides an interface between Tiled's map format and the engine's tilemap rendering system.\
- * The tiles animated in Tiled are mapped to the animations of the TilemapRenderer tileset.\
+ * The tilemap is referenced by the URL of its JSON export, and it is loaded if the scene did not load it.\
+ * The tilesets of the TilemapRenderer are created from the ones embedded in the tilemap, unless they are declared,\
+ * so the tilesets need to be embedded in the JSON export.\
+ * The tiles animated in Tiled are mapped to the animations of the tileset they belong to.\
  * It can also create entities from the objects of the tilemap, matching them by class with the `objects` map.
  * @public
  * @category Components
  * @example
  * ```js
  * const tiledWrapper = new TiledWrapper({
- *   tilemap: {
- *     width: 10,
- *     height: 10,
- *     infinite: false,
- *     layers: [],
- *     renderorder: "right-down",
- *     tilesets: [{ firstgid: 1 }],
- *     tilewidth: 32,
- *     tileheight: 32
- *   },
+ *   tilemapPath: "tilemap/map.json",
  *   layerToRender: "Ground"
  * });
  * ```
  */
 declare class TiledWrapper {
-    /** The tilemap to render. */
-    tilemap: TiledTilemap | string;
+    /** The URL of the JSON tilemap exported from Tiled. It is loaded if the scene did not load it. */
+    tilemapPath: string;
     /** The layer to render. */
     layerToRender: string;
     /**
@@ -2691,8 +2685,12 @@ declare class TiledWrapper {
     _objectsCreated: boolean;
     /** @internal */
     _animationsMapped: boolean;
-    /** The coordinates (in tiles) of the top-left corner of the rendered layer. @internal */
+    /**  @internal The coordinates (in tiles) of the top-left corner of the rendered layer. */
     _origin: Vector2;
+    /** @internal The tilemap read from the JSON export. */
+    _tilemap: TiledTilemap;
+    /** @internal TRUE if the tilesets of the TilemapRenderer were created from the tilemap. */
+    _tilesetsCreated: boolean;
     /** @internal */
     static componentName: string;
     constructor(options?: Partial<TiledWrapperOptions>);
@@ -3656,6 +3654,10 @@ type Tileset$1 = {
     margin?: number;
     /** Space in pixels between adjacent tiles */
     spacing?: number;
+    /** The id of the first tile of the tileset. Defaults to 1 */
+    firstgid?: number;
+    /** The number of tiles of the tileset. Obtained from the image if it is not set */
+    tileCount?: number;
     /** Maps each animated tile id to the tile id currently displayed. @internal */
     _animationState?: Map<number, number>;
     /** Tileset values in texture coordinates. Computed once by the renderer. @internal */
@@ -3668,6 +3670,10 @@ type Tileset$1 = {
 type TilesetTexData = {
     /** The width of the tileset (in tiles) */
     columns: number;
+    /** The id of the first tile of the tileset */
+    firstgid: number;
+    /** The number of tiles of the tileset */
+    tileCount: number;
     /** The margin of the image */
     margin: Vector2;
     /** The distance between the origin of two adjacent tiles */
@@ -4479,13 +4485,13 @@ declare class TextRenderer {
  * ```js
  * const tilemapRenderer = new TilemapRenderer({
  *   layer: "Default",
- *   tileset: {
+ *   tilesets: [{
  *     image: this.assetManager.getImage("tileset.png"),
  *     tileWidth: 32,
  *     tileHeight: 32,
  *     margin: 0,
  *     spacing: 0
- *   },
+ *   }],
  *   data: [1, 2, 3, 4],
  *   chunks: [],
  *   width: 2,
@@ -4502,7 +4508,7 @@ declare class TextRenderer {
  */
 interface TilemapRendererOptions {
     layer: string;
-    tileset: Tileset;
+    tilesets: Tileset[];
     data: number[];
     chunks: Chunk[];
     width: number;
@@ -4518,7 +4524,8 @@ interface TilemapRendererOptions {
 }
 /**
  * The TilemapRenderer component renders 2D tile-based maps to the screen.\
- * It uses a tileset image as a source for individual tiles, which are arranged according to a provided array of tile IDs.\
+ * It uses one or more tileset images as a source for individual tiles, which are arranged according to a provided array of tile IDs.\
+ * Each tileset owns the range of ids that starts at its `firstgid` and covers as many tiles as the tileset has.\
  * The component supports features like tinting, masking, opacity control, and custom tile dimensions.\
  * Maps can be rendered in chunks for improved performance with large tilemaps, and tiles can be assigned to specific render layers.\
  * Each tile is referenced by an ID, with 0 representing empty space.
@@ -4528,13 +4535,13 @@ interface TilemapRendererOptions {
  * ```js
  * const tilemapRenderer = new TilemapRenderer({
  *   layer: "Default",
- *   tileset: {
+ *   tilesets: [{
  *     image: this.assetManager.getImage("tileset.png"),
  *     tileWidth: 32,
  *     tileHeight: 32,
  *     margin: 0,
  *     spacing: 0
- *   },
+ *   }],
  *   data: [1, 2, 3, 4],
  *   chunks: [],
  *   width: 2,
@@ -4552,8 +4559,11 @@ interface TilemapRendererOptions {
 declare class TilemapRenderer {
     /** The render layer */
     layer: string;
-    /** The Tileset instance */
-    tileset: Tileset;
+    /**
+     * The tilesets used by the tilemap, each one owning a range of tile ids defined by its `firstgid`.\
+     * They are created by the TiledWrapper when the tilemap comes from Tiled.
+     */
+    tilesets: Tileset[];
     /** Array of tiles. ID 0 (zero) represents empty space.*/
     data: number[];
     /** Array of tile data split into chunks */
@@ -4619,14 +4629,14 @@ interface TileAnimationOptions {
  * @example
  * ```js
  * const tilemapRenderer = new TilemapRenderer({
- *   tileset: {
+ *   tilesets: [{
  *     image: "tileset.png",
  *     tileWidth: 32,
  *     tileHeight: 32,
  *     animations: new Map([
  *       [3, new TileAnimation({ tiles: [3, 4, 5], fps: 6 })]
  *     ])
- *   },
+ *   }],
  *   data: [1, 2, 3, 4],
  *   width: 2
  * });
@@ -4646,8 +4656,10 @@ declare class TileAnimation {
 /**
  * The Tileset configuration defines the properties of a tileset used by the TilemapRenderer.\
  * It specifies the source image containing the tiles, the size of the individual tiles,\
- * and the optional margin and spacing of the image. The number of columns of the tileset\
- * is obtained from the image. The tileset cannot be updated at runtime.
+ * and the optional margin and spacing of the image. The number of columns and the number\
+ * of tiles of the tileset are obtained from the image. When a tilemap uses several tilesets,\
+ * each one needs a `firstgid`, the id of its first tile, following the same criteria as Tiled.\
+ * The tileset cannot be updated at runtime.
  * @public
  * @category Components Configuration
  * @example
@@ -4660,6 +4672,14 @@ declare class TileAnimation {
  *   margin: 1,
  *   spacing: 2
  * };
+ *
+ * // a second tileset of 16x16 tiles, used by a tilemap whose first tileset has 72 tiles
+ * const anotherTileset = {
+ *   image: this.assetManager.getImage("another-tileset.png"),
+ *   tileWidth: 16,
+ *   tileHeight: 16,
+ *   firstgid: 73
+ * };
  * ```
  */
 type Tileset = {
@@ -4671,6 +4691,10 @@ type Tileset = {
     margin?: number;
     /** Space in pixels between adjacent tiles */
     spacing?: number;
+    /** The id of the first tile of the tileset. Defaults to 1 */
+    firstgid?: number;
+    /** The number of tiles of the tileset. Obtained from the image if it is not set */
+    tileCount?: number;
     /** Animated tiles, keyed by the tile id to animate */
     animations?: Map<number, TileAnimation>;
     /** Maps each animated tile id to the tile id currently displayed. @internal */