angry-pixel 1.2.3 → 1.2.5

package/lib/component/rendering/MaskRenderer.d.ts

@@ -1,21 +1,77 @@
 import { RenderComponent } from "../../core/Component";
 import { Vector2, Rotation } from "angry-pixel-math";
+/**
+ * MaskRenderer configuration options.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(MaskRenderer, {
+ *   width: 32,
+ *   height: 32,
+ *   color: "#000000",
+ *   offset: new Vector2(0, 0),
+ *   rotation: new Rotation(0),
+ *   opacity: 1,
+ *   layer: "Mask",
+ * });
+ * ```
+ */
 export interface MaskRendererOptions {
+    /** Mask width in pixels */
     width: number;
+    /** Mask height in pixels */
     height: number;
+    /** The color of the mask */
     color: string;
+    /** X-axis and Y-axis offset */
     offset?: Vector2;
+    /** Mask rotation (degrees or radians) */
     rotation?: Rotation;
+    /** Change the opacity between 1 and 0 */
     opacity?: number;
+    /** The render layer */
     layer?: string;
 }
+/**
+ * Renders a rectangle based on width, height and color
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(MaskRenderer, {
+ *   width: 32,
+ *   height: 32,
+ *   color: "#000000",
+ * });
+ * ```
+ * @example
+ * ```js
+ * this.addComponent(MaskRenderer, {
+ *   width: 32,
+ *   height: 32,
+ *   color: "#000000",
+ *   offset: new Vector2(0, 0),
+ *   rotation: new Rotation(0),
+ *   opacity: 1,
+ *   layer: "Mask",
+ * });
+ * ```
+ */
 export declare class MaskRenderer extends RenderComponent {
+    /** Mask width in pixels */
     width: number;
+    /** Mask height in pixels */
     height: number;
+    /** The color of the mask */
     color: string;
+    /** X-axis and Y-axis offset */
     offset: Vector2;
+    /** Mask rotation (degrees or radians) */
     rotation: Rotation;
+    /** Change the opacity between 1 and 0 */
     opacity: number;
+    /** The render layer */
     layer: string;
     private renderData;
     private innerPosition;

package/lib/component/rendering/Sprite.d.ts

@@ -0,0 +1,61 @@
+import { Slice } from "angry-pixel-2d-renderer";
+export { Slice };
+/**
+ * Sprite configuration options
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * const sprite = new Sprite({
+ *   image: this.assetManager.getImage("image.png"),
+ *   slice: {x: 0, y:0, width: 16, height: 16},
+ *   smooth: false
+ * });
+ * ```
+ */
+export interface SpriteConfig {
+    /** The image element to render */
+    image: HTMLImageElement;
+    /** Cut the image based on straight coordinates starting from the top left downward */
+    slice?: Slice;
+    /** Smoothing pixels (not recommended for pixel art) */
+    smooth?: boolean;
+}
+/**
+ * The Sprite is an object that is composed of the Image element and allow to slice it and smooth its pixels.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * const sprite = new Sprite({image: this.assetManager.getImage("image.png")});
+ * ```
+ * @example
+ * ```js
+ * const sprite = new Sprite({
+ *   image: this.assetManager.getImage("image.png"),
+ *   slice: {x: 0, y:0, width: 16, height: 16},
+ *   smooth: false
+ * });
+ * ```
+ */
+export declare class Sprite {
+    /** The image element to render */
+    readonly image: HTMLImageElement;
+    /** Cut the image based on straight coordinates starting from the top left downward */
+    readonly slice: Slice;
+    /** Smoothing pixels (not recommended for pixel art) */
+    readonly smooth: boolean;
+    private _width;
+    private _height;
+    private _loaded;
+    /**
+     * @param config The sprite configuration options
+     */
+    constructor(config: SpriteConfig);
+    /** The image width */
+    get width(): number;
+    /** The image height */
+    get height(): number;
+    /** TRUE if the image is loaded */
+    get loaded(): boolean;
+}

package/lib/component/rendering/SpriteRenderer.d.ts

@@ -1,39 +1,129 @@
 import { RenderComponent } from "../../core/Component";
-import { Sprite } from "../Sprite";
+import { Sprite } from "./Sprite";
 import { Rotation, Vector2 } from "angry-pixel-math";
+/**
+ * SpriteRenderer configuration options.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(SpriteRenderer, {
+ *   sprite: new Sprite({image: this.assetManager.getImage("image.png")}),
+ *   offset: new Vector2(0, 0),
+ *   flipHorizontal:  false,
+ *   flipVertical: false,
+ *   rotation: new Rotation(0),
+ *   opacity: 1,
+ *   tiled: new Vector2(1,1),
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   tintColor: "#00FF00",
+ *   layer: "Background",
+ *   scale: new Vector2(1,1),
+ *   width: 16,
+ *   height: 16
+ * });
+ * ```
+ */
 export interface SpriteRendererOptions {
+    /** The sprite to render */
     sprite?: Sprite;
+    /** X-axis and Y-axis offset */
     offset?: Vector2;
+    /** Image rotation (degrees or radians) */
     rotation?: Rotation;
+    /** Flip the image horizontally */
     flipHorizontal?: boolean;
+    /** Flip the image vertically */
     flipVertical?: boolean;
+    /** Change the opacity between 1 and 0 */
     opacity?: number;
+    /** Render the image in tiles */
     tiled?: Vector2;
+    /** Define a mask color for the image */
     maskColor?: string;
+    /** Define the opacity of the mask color between 1 and 0 */
     maskColorMix?: number;
+    /** Define a color for tinting the sprite image */
     tintColor?: string;
+    /** The render layer */
     layer?: string;
+    /** Scale the image based on a vector */
+    scale?: Vector2;
+    /** Overwrite the original image width */
+    width?: number;
+    /** Overwrite the original image height */
+    height?: number;
 }
+/**
+ * The SpriteRenderer component renders the Sprite and allows to configure options such as opacity, offser, color, etc.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(SpriteRenderer, {
+ *   sprite: new Sprite({image: this.assetManager.getImage("image.png")})
+ * });
+ * ```
+ * @example
+ * ```js
+ * this.addComponent(SpriteRenderer, {
+ *   sprite: new Sprite({image: this.assetManager.getImage("image.png")}),
+ *   offset: new Vector2(0, 0),
+ *   flipHorizontal:  false,
+ *   flipVertical: false,
+ *   rotation: new Rotation(0),
+ *   opacity: 1,
+ *   tiled: new Vector2(1,1),
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   tintColor: "#00FF00",
+ *   layer: "Background",
+ *   scale: new Vector2(1,1),
+ *   width: 16,
+ *   height: 16
+ * });
+ * ```
+ */
 export declare class SpriteRenderer extends RenderComponent {
     private readonly spriteDefaultScale;
+    /** The sprite to render */
     sprite: Sprite;
+    /** X-axis and Y-axis offset */
     offset: Vector2;
+    /** Flip the image horizontally */
     flipHorizontal: boolean;
+    /** Flip the image vertically */
     flipVertical: boolean;
+    /** Image rotation (degrees or radians) */
     rotation: Rotation;
+    /** Change the opacity between 1 and 0 */
     opacity: number;
-    private _tiled;
+    /** Define a mask color for the image */
     maskColor: string;
+    /** Define the opacity of the mask color between 1 and 0 */
     maskColorMix: number;
+    /** Define a color for tinting the sprite image */
     tintColor: string;
+    /** The render layer */
     layer: string;
+    /** Scale the image based on a vector */
+    scale: Vector2;
+    /** Overwrite the original image width */
+    width: number;
+    /** Overwrite the original image height */
+    height: number;
+    private _tiled;
     private renderData;
     private innerPosition;
     private cachePosition;
     private cacheRenderPosition;
     private scaledOffset;
+    private cacheScale;
     protected init(config?: SpriteRendererOptions): void;
+    /** Render the image in tiles */
     get tiled(): Vector2;
+    /** Renders the image in tiles */
     set tiled(tiled: Vector2);
     protected update(): void;
     private updateRenderDataArray;

package/lib/component/rendering/TextRenderer.d.ts

@@ -2,40 +2,139 @@ import { RenderComponent } from "../../core/Component";
 import { Rotation, Vector2 } from "angry-pixel-math";
 import { TextOrientation } from "angry-pixel-2d-renderer";
 export { TextOrientation };
+/**
+ * TextRenderer configuration options.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(TextRenderer, {
+ *   text: "Hello world",
+ *   font: "Impact",
+ *   fontSize: 16,
+ *   width: 320,
+ *   height: 32,
+ *   color: "#FF0000",
+ *   offset: new Vector2(0, 0),
+ *   lineSeparation: 1,
+ *   letterSpacing: 1,
+ *   charRanges: [32, 126, 161, 255],
+ *   smooth: false,
+ *   rotation: new Rotation(0),
+ *   opacity: 1,
+ *   orientation: TextOrientation.RightDown
+ *   bitmapMargin: new Vector2(0, 0),
+ *   bitmapSpacing: new Vector2(0, 0),
+ * });
+ * ```
+ */
 export interface TextRendererOptions {
+    /** The text to render */
     text: string;
+    /** The font family to use */
     font: FontFace | string;
-    fontSize?: number;
-    color?: string;
+    /** The size of the font in pixels */
+    fontSize: number;
+    /** The text color */
+    color: string;
+    /** The width of the invisible box where the text is rendered */
+    width: number;
+    /** The height of the invisible box where the text is rendered */
+    height: number;
+    /** The separation between lines in pixels */
     lineSeparation?: number;
+    /** The space between chars in pixels */
     letterSpacing?: number;
-    width?: number;
-    height?: number;
+    /** X-axis and Y-axis offset */
     offset?: Vector2;
+    /** Range of characters covered by the component defined in number pairs.
+     * The default value is [32, 126, 161, 255], this means that characters
+     * from 32 to 126 and from 161 to 255 will be valid. */
     charRanges?: number[];
+    /** Smoothing pixels (not recommended for pixel art) */
     smooth?: boolean;
+    /** Text rotation (degrees or radians) */
     rotation?: Rotation;
+    /** Change the opacity between 1 and 0 */
     opacity?: number;
+    /** Direction in which the text will be rendered. */
     orientation?: TextOrientation;
+    /** Margin in pixels to correct badly sliced characters. */
     bitmapMargin?: Vector2;
+    /** Spacing in pixels to correct badly sliced characters. */
     bitmapSpacing?: Vector2;
 }
+/**
+ * The TextRenderer component allows to render text using font families, colors, and other configuration options.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(TextRenderer, {
+ *   text: "Hello world",
+ *   font: "Impact",
+ *   fontSize: 16,
+ *   width: 320,
+ *   height: 32,
+ *   color: "#FF0000",
+ * });
+ * ```
+ * @example
+ * ```js
+ * this.addComponent(TextRenderer, {
+ *   text: "Hello world",
+ *   font: "Impact",
+ *   fontSize: 16,
+ *   width: 320,
+ *   height: 32,
+ *   color: "#FF0000",
+ *   offset: new Vector2(0, 0),
+ *   lineSeparation: 1,
+ *   letterSpacing: 1,
+ *   charRanges: [32, 126, 161, 255],
+ *   smooth: false,
+ *   rotation: new Rotation(0),
+ *   opacity: 1,
+ *   orientation: TextOrientation.RightDown
+ *   bitmapMargin: new Vector2(0, 0),
+ *   bitmapSpacing: new Vector2(0, 0),
+ * });
+ * ```
+ */
 export declare class TextRenderer extends RenderComponent {
+    /** The text to render */
     text: string;
+    /** The font family to use */
     font: FontFace | string;
+    /** The size of the font in pixels. */
     fontSize: number;
+    /** The width of the invisible box where the text is rendered */
     width: number;
+    /** The height of the invisible box where the text is rendered */
     height: number;
+    /** X-axis and Y-axis offset */
     offset: Vector2;
+    /** The text color */
     color: string;
+    /** The separation between lines in pixels */
     lineSeparation: number;
+    /** The space between chars in pixels */
     letterSpacing: number;
+    /** Range of characters covered by the component defined in number pairs.
+     * The default value is [32, 126, 161, 255], this means that characters
+     * from 32 to 126 and from 161 to 255 will be valid. */
     charRanges: number[];
+    /** Smoothing pixels (not recommended for pixel art) */
     smooth: boolean;
+    /** Text rotation (degrees or radians) */
     rotation: Rotation;
+    /** Change the opacity between 1 and 0 */
     opacity: number;
+    /** Direction in which the text will be rendered. */
     orientation: TextOrientation;
+    /** Margin in pixels to correct badly sliced characters. */
     bitmapMargin: Vector2;
+    /** Spacing in pixels to correct badly sliced characters. */
     bitmapSpacing: Vector2;
     private renderData;
     private lastFrameText;

package/lib/component/rendering/TiledTilemapRenderer.d.ts

@@ -1,26 +1,133 @@
 import { RenderComponent } from "../../core/Component";
 import { ITilemapRenderer, Tileset, TilemapOrientation } from "./TilemapRenderer";
+/**
+ * TiledTilemapRenderer configuration options
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * import TilemapData from "export.json";
+ *
+ * this.addComponent(TilemapRenderer, {
+ *   tileset: {
+ *     image: this.assetManager.getImage("image.png"),
+ *     width: 3,
+ *     tileWidth: 16,
+ *     tileHeight: 16,
+ *     margin: new Vector2(0, 0),
+ *     spacing: new Vector2(0, 0),
+ *   }
+ *   tiledData: TilemapData,
+ *   tilemapLayer: "Layer1",
+ *   tileWidth: 16,
+ *   tileHeight: 16,
+ *   layer: "Tilemap",
+ *   orientation: TilemapOrientation.Center,
+ *   smooth: false,
+ * });
+ * ```
+ */
 export interface TiledTilemapRendererOptions {
+    /** Export of the Tiles application in JSON */
     tiledData: TiledTilemap;
+    /** The Tiled tilemap layer to render */
     tilemapLayer: string;
+    /** The Tileset instance */
     tileset: Tileset;
-    tileWidth: number;
-    tileHeight: number;
+    tileWidth?: number;
+    tileHeight?: number;
+    /** The render layer */
     layer?: string;
+    /** Direction in which the tilemap will be rendered. */
     orientation?: TilemapOrientation;
+    /** Smoothing pixels (not recommended for pixel art) */
     smooth?: boolean;
 }
+/**
+ * The TiledTilemapRenderer component allows you to render a tile map exported from the Tiled application,
+ * using an instance of the TileSet object.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * import TilemapData from "export.json";
+ *
+ * this.addComponent(TiledTilemapRenderer, {
+ *   tileset: {
+ *     image: this.assetManager.getImage("image.png"),
+ *     width: 3,
+ *     tileWidth: 16,
+ *     tileHeight: 16,
+ *   }
+ *   tiledData: TilemapData,
+ *   tilemapLayer: "Layer1",
+ *   tileWidth: 16,
+ *   tileHeight: 16,
+ * });
+ * ```
+ * @example
+ * ```js
+ * import TilemapData from "export.json";
+ *
+ * this.addComponent(TilemapRenderer, {
+ *   tileset: {
+ *     image: this.assetManager.getImage("image.png"),
+ *     width: 3,
+ *     tileWidth: 16,
+ *     tileHeight: 16,
+ *     margin: new Vector2(0, 0),
+ *     spacing: new Vector2(0, 0),
+ *   }
+ *   tiledData: TilemapData,
+ *   tilemapLayer: "Layer1",
+ *   tileWidth: 16,
+ *   tileHeight: 16,
+ *   layer: "Tilemap",
+ *   orientation: TilemapOrientation.Center,
+ *   smooth: false,
+ * });
+ * ```
+ */
 export declare class TiledTilemapRenderer extends RenderComponent implements ITilemapRenderer {
+    private readonly spriteDefaultScale;
+    /**
+     * Id of tiles separated by commas. The ids start at 1, and increment from left to right,
+     * from top to bottom. ID 0 (zero) represents a space with no tile.
+     * @readonly
+     */
     tiles: number[];
+    /** The width of the tile to render in pixels */
     tileWidth: number;
+    /** The height of the tile to render in pixels */
     tileHeight: number;
+    /**
+     * The width of the tilemap in tiles (this is calculated by the component)
+     * @readonly
+     */
     width: number;
+    /**
+     * The height of the tilemap in tiles (this is calculated by the component)
+     * @readonly
+     */
     height: number;
+    /** Direction in which the tilemap will be rendered (default value TilemapOrientation.Center) */
     orientation: TilemapOrientation;
+    /** Define a color for tinting the tiles */
     tintColor: string;
-    alpha: number;
+    /** Change the opacity between 1 and 0 */
+    opacity: number;
+    /**
+     * Tilemap width in pixels (this is calculated by the component)
+     * @readonly
+     */
+    realWidth: number;
+    /**
+     * Tilemap height in pixels (this is calculated by the component)
+     * @readonly
+     */
+    realHeight: number;
     private tiledData;
-    private tilemapLayer;
+    private tiledLayer;
     private tileset;
     private layer;
     private smooth?;
@@ -28,8 +135,6 @@ export declare class TiledTilemapRenderer extends RenderComponent implements ITi
     private chunks;
     private scaledTileWidth;
     private scaledTileHeight;
-    realWidth: number;
-    realHeight: number;
     private renderData;
     protected init({ tiledData, tilemapLayer, tileset, tileWidth, tileHeight, layer, orientation, smooth, }: TiledTilemapRendererOptions): void;
     protected update(): void;
@@ -38,6 +143,7 @@ export declare class TiledTilemapRenderer extends RenderComponent implements ITi
     private getTilesetTileId;
     private updateRenderData;
 }
+/** @category Components */
 export interface TiledTilemap {
     width: number;
     height: number;
@@ -50,6 +156,7 @@ export interface TiledTilemap {
     tilewidth: number;
     tileheight: number;
 }
+/** @category Components */
 export interface TiledChunk {
     data: number[];
     x: number;
@@ -58,6 +165,7 @@ export interface TiledChunk {
     height: number;
     type?: string;
 }
+/** @category Components */
 export interface TiledLayer {
     name: string;
     id: number;