angry-pixel 1.2.3 → 1.2.4

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

@@ -2,26 +2,81 @@ import { TilemapOrientation } from "angry-pixel-2d-renderer";
 import { Vector2 } from "angry-pixel-math";
 import { RenderComponent } from "../../core/Component";
 export { TilemapOrientation };
+/**
+ * Tileset configuration to be used with the TilemapRenderer
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * const tileset = {
+ *   image: this.assetManager.getImage("image.png"),
+ *   width: 3,
+ *   tileWidth: 16,
+ *   tileHeight: 16,
+ *   margin: new Vector2(0, 0),
+ *   spacing: new Vector2(0, 0),
+ * };
+ * ```
+ */
 export interface Tileset {
+    /** The tileset image element */
     image: HTMLImageElement;
     width: number;
     tileWidth: number;
     tileHeight: number;
+    /** Margin of the tile in pixels (space in the top and the left) */
     margin?: Vector2;
+    /** Spacing of the tile in pixels (space in the bottom and the right) */
     spacing?: Vector2;
 }
+/**
+ * TilemapRenderer configuration options
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * 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),
+ *   }
+ *   tiles: [1, 2, 0, 0, 0, 0, 2, 1, 3, 4, 5, 5, 5, 5, 4, 3],
+ *   width: 8,
+ *   tileWidth: 16,
+ *   tileHeight: 16,
+ *   layer: "Tilemap",
+ *   orientation: TilemapOrientation.Center,
+ *   smooth: false,
+ * });
+ * ```
+ */
 export interface TilemapRendererOptions {
+    /** 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.  */
     tiles: string;
+    /** The Tileset instance */
     tileset: Tileset;
     width: number;
     tileWidth: number;
     tileHeight: number;
+    /** The render layer */
     layer?: string;
+    /** Direction in which the tilemap will be rendered. */
     orientation?: TilemapOrientation;
-    alpha?: number;
+    /** Change the opacity between 1 and 0 */
+    opacity?: number;
+    /** Define a color for tinting the tiles */
     tintColor?: string;
+    /** Smoothing pixels (not recommended for pixel art) */
     smooth?: boolean;
 }
+/**
+ * @private
+ */
 export interface ITilemapRenderer {
     tiles: number[];
     width: number;
@@ -32,23 +87,83 @@ export interface ITilemapRenderer {
     realWidth: number;
     realHeight: number;
 }
+/**
+ * The TilemapRenderer component allows you to render a tile map defined by an array of tile ids, using an instance of the TileSet object.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(TilemapRenderer, {
+ *   tileset: {
+ *     image: this.assetManager.getImage("image.png"),
+ *     width: 3,
+ *     tileWidth: 16,
+ *     tileHeight: 16,
+ *   }
+ *   tiles: [1, 2, 0, 0, 0, 0, 2, 1, 3, 4, 5, 5, 5, 5, 4, 3],
+ *   width: 8,
+ *   tileWidth: 16,
+ *   tileHeight: 16,
+ * });
+ * ```
+ * @example
+ * ```js
+ * 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),
+ *   }
+ *   tiles: [1, 2, 0, 0, 0, 0, 2, 1, 3, 4, 5, 5, 5, 5, 4, 3],
+ *   width: 8,
+ *   tileWidth: 16,
+ *   tileHeight: 16,
+ *   layer: "Tilemap",
+ *   orientation: TilemapOrientation.Center,
+ *   smooth: false,
+ * });
+ * ```
+ */
 export declare class TilemapRenderer extends RenderComponent implements ITilemapRenderer {
+    /** 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.  */
     tiles: number[];
+    /** The width of the tilemap in tiles */
     width: number;
+    /**
+     * The height of the tilemap in tiles (this is calculated by the component)
+     * @readonly
+     */
     height: number;
+    /** The width of the tile to render in pixels */
     tileWidth: number;
+    /** The height of the tile to render in pixels */
     tileHeight: number;
+    /** Define a color for tinting the tiles */
     tintColor: string;
-    alpha: number;
+    /** Change the opacity between 1 and 0 */
+    opacity: number;
+    /** Direction in which the tilemap will be rendered (default value TilemapOrientation.Center) */
     orientation: TilemapOrientation;
+    /**
+     * 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 tileset;
     private renderData;
     private layer;
     private scaledTileWidth;
     private scaledTileHeight;
-    realWidth: number;
-    realHeight: number;
-    protected init({ tiles, tileset, tileWidth, tileHeight, width, layer, orientation, alpha, tintColor, smooth, }: TilemapRendererOptions): void;
+    protected init({ tiles, tileset, tileWidth, tileHeight, width, layer, orientation, opacity, tintColor, smooth, }: TilemapRendererOptions): void;
     protected update(): void;
     private updateRenderData;
 }

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

@@ -1,36 +1,120 @@
 import { RenderComponent } from "../../core/Component";
 import { Rotation, Vector2 } from "angry-pixel-math";
 import { Slice } from "angry-pixel-2d-renderer";
+/**
+ * VideoRenderer configuration options.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(VideoRenderer, {
+ *   video: this.assetManager.getVideo("video.mp4"),
+ *   width: 1920,
+ *   height: 1080,
+ *   offset: new Vector2(0, 0),
+ *   flipHorizontal:  false,
+ *   flipVertical: false,
+ *   rotation: new Rotation(0),
+ *   opacity: 1,
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   tintColor: "#00FF00",
+ *   layer: "Video",
+ *   slice: {x: 0, y:0, width: 1920, height: 1080},
+ *   volume: 1,
+ *   loop: false,
+ * });
+ * ```
+ */
 export interface VideoRendererOptions {
+    /**The video element to render */
     video: HTMLVideoElement;
+    /** Overwrite the original video width */
     width?: number;
+    /** Overwrite the original video height */
     height?: number;
+    /** X-axis and Y-axis offset */
     offset?: Vector2;
+    /** Video rotation (degrees or radians) */
     rotation?: Rotation;
+    /** Flip the video horizontally */
     flipHorizontal?: boolean;
+    /** Flip the video vertically */
     flipVertical?: boolean;
+    /** Change the opacity between 1 and 0 */
     opacity?: number;
+    /** Define a mask color for the video */
     maskColor?: string;
+    /** Define the opacity of the mask color between 1 and 0 */
     maskColorMix?: number;
+    /** Define a color for tinting the video */
     tintColor?: string;
+    /** The render layer */
     layer?: string;
+    /** Cut the video based on straight coordinates starting from the top left downward */
     slice?: Slice;
+    /** The volume of the video. Values between 1 and 0 */
     volume?: number;
+    /** TRUE if the video will play in loop */
     loop?: boolean;
 }
+/**
+ * The VideoRenderer component plays and renders a video element, and allows configuring options such as its dimensions, coloring, etc.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * this.addComponent(VideoRenderer, {
+ *   video: this.assetManager.getVideo("video.mp4"),
+ * });
+ * ```
+ * @example
+ * ```js
+ * this.addComponent(VideoRenderer, {
+ *   video: this.assetManager.getVideo("video.mp4"),
+ *   width: 1920,
+ *   height: 1080,
+ *   offset: new Vector2(0, 0),
+ *   flipHorizontal:  false,
+ *   flipVertical: false,
+ *   rotation: new Rotation(0),
+ *   opacity: 1,
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   tintColor: "#00FF00",
+ *   layer: "Video",
+ *   slice: {x: 0, y:0, width: 1920, height: 1080},
+ *   volume: 1,
+ *   loop: false,
+ * });
+ * ```
+ */
 export declare class VideoRenderer extends RenderComponent {
+    /**The video element to render */
     video: HTMLVideoElement;
+    /** Overwrite the original video width */
     width: number;
+    /** Overwrite the original video height */
     height: number;
+    /** X-axis and Y-axis offset */
     offset: Vector2;
+    /** Video rotation (degrees or radians) */
+    rotation: Rotation;
+    /** Flip the video horizontally */
     flipHorizontal: boolean;
+    /** Flip the video vertically */
     flipVertical: boolean;
-    rotation: Rotation;
+    /** Change the opacity between 1 and 0 */
     opacity: number;
+    /** Define a mask color for the video */
     maskColor: string;
+    /** Define the opacity of the mask color between 1 and 0 */
     maskColorMix: number;
+    /** Define a color for tinting the video */
     tintColor: string;
+    /** The render layer */
     layer: string;
+    /** Cut the video based on straight coordinates starting from the top left downward */
     slice?: Slice;
     private renderData;
     private innerPosition;
@@ -39,11 +123,17 @@ export declare class VideoRenderer extends RenderComponent {
     private _volume;
     private _playing;
     private _paused;
+    /** The volume of the video */
     set volume(volume: number);
+    /** The volume of the video */
     get volume(): number;
+    /** TRUE if the video will play in loop */
     set loop(loop: boolean);
+    /** TRUE if the video will play in loop */
     get loop(): boolean;
+    /** TRUE if the video is playing */
     get playing(): boolean;
+    /** TRUE if the video is paused */
     get paused(): boolean;
     protected init(config: VideoRendererOptions): void;
     /**

package/lib/core/Component.d.ts

@@ -3,14 +3,55 @@ import { Scene } from "./Scene";
 import { FrameEvent } from "./managers/IterationManager";
 import { GameActor } from "./GameActor";
 import { Container } from "../utils/Container";
+/** @private */
 export type ComponentClass<T extends Component = Component> = new (container: Container, gameObject: GameObject, name?: string) => T;
+/**
+ * Base class for all components to be added to game objects.
+ * @public
+ * @category Core
+ * @example
+ * ```js
+ * class MovementsController extends Component {
+ *   init(options) {
+ *     // executed after instantiation
+ *   }
+ *   start() {
+ *     // executed in the first available frame
+ *   }
+ *   update() {
+ *     // executed on every frame
+ *   }
+ * }
+ * ```
+ * @example
+ * ```ts
+ * class MovementsController extends Component {
+ *   protected init(options?: InitOptions): void {
+ *     // executed after instantiation
+ *   }
+ *   protected start(): void {
+ *     // executed in the first available frame
+ *   }
+ *   protected update(): void {
+ *     // executed on every frame
+ *   }
+ * }
+ * ```
+ */
 export declare abstract class Component extends GameActor {
+    /** Name given manually at the time of instantiation. */
     readonly name: string;
+    /** Object to which it belongs. */
     readonly gameObject: GameObject;
+    /** TRUE if several instances of this component are allowed in the same object. */
     readonly allowMultiple: boolean;
+    /** @private */
     private _active;
+    /** @private */
     constructor(container: Container, gameObject: GameObject, name?: string);
+    /** TRUE for enabled object, FALSE for disabled object. */
     get active(): boolean;
+    /** TRUE for enabled object, FALSE for disabled object. */
     set active(active: boolean);
     /**
      * This method is called when the active state changes.
@@ -58,28 +99,105 @@ export declare abstract class Component extends GameActor {
      * @returns boolean
      */
     hasComponent(name: string): boolean;
+    /**
+     * Removes the given component in the GameObject
+     * @param component The class of the component to remnove
+     */
     removeComponent(component: Component): void;
+    /** @private */
     protected _destroy(): void;
+    /** @private */
     protected _stopGame(): void;
 }
+/** @private */
 export declare abstract class EngineComponent extends Component {
     protected readonly updateEvent: FrameEvent;
 }
+/** @private */
 export declare abstract class ColliderComponent extends Component {
     protected readonly updateEvent: FrameEvent;
 }
+/**
+ * Base class for all components that execute logic at physics frame rate. Ideal for custom physics.
+ * @public
+ * @category Core
+ * @example
+ * ```js
+ * class PlayerMovements extends PhysicsComponent {
+ *   init(options) {
+ *     // executed after instantiation
+ *   }
+ *   start() {
+ *     // executed in the first available frame
+ *   }
+ *   update() {
+ *     // executed on every frame
+ *   }
+ * }
+ * ```
+ * @example
+ * ```ts
+ * class PlayerMovements extends PhysicsComponent {
+ *   protected init(options?: InitOptions): void {
+ *     // executed after instantiation
+ *   }
+ *   protected start(): void {
+ *     // executed in the first available frame
+ *   }
+ *   protected update(): void {
+ *     // executed on every frame
+ *   }
+ * }
+ * ```
+ */
 export declare abstract class PhysicsComponent extends Component {
     protected readonly updateEvent: FrameEvent;
 }
+/** @private */
 export declare abstract class TransformComponent extends Component {
     protected readonly updateEvent: FrameEvent;
 }
+/**
+ * Base class for all components that execute logic before rendering. Ideal for components that translate cameras.
+ * @public
+ * @category Core
+ * @example
+ * ```js
+ * class FollowPlayerCamera extends PreRenderComponent {
+ *   init(options) {
+ *     // executed after instantiation
+ *   }
+ *   start() {
+ *     // executed in the first available frame
+ *   }
+ *   update() {
+ *     // executed on every frame
+ *   }
+ * }
+ * ```
+ * @example
+ * ```ts
+ * class FollowPlayerCamera extends PreRenderComponent {
+ *   protected init(options?: InitOptions): void {
+ *     // executed after instantiation
+ *   }
+ *   protected start(): void {
+ *     // executed in the first available frame
+ *   }
+ *   protected update(): void {
+ *     // executed on every frame
+ *   }
+ * }
+ * ```
+ */
 export declare abstract class PreRenderComponent extends Component {
     protected readonly updateEvent: FrameEvent;
 }
+/** @private */
 export declare abstract class CameraComponent extends Component {
     protected readonly updateEvent: FrameEvent;
 }
+/** @private */
 export declare abstract class RenderComponent extends Component {
     protected readonly updateEvent: FrameEvent;
 }

package/lib/core/Game.d.ts

@@ -1,19 +1,64 @@
 import { InitOptions } from "./GameActor";
 import { GameConfig } from "./GameConfig";
 import { SceneClass } from "./Scene";
+/**
+ * Game is the main class that contains all the managers, scenes, objects and components. It allows to start and stop the execution of the game.
+ * @public
+ * @category Core
+ * @example
+ * ```js
+ * const game = new Game({
+ *   containerNode: document.getElementById("app"),
+ *   gameWidth: 1920,
+ *   gameHeight: 1080,
+ * });
+ * game.addScene(GameScene, "GameScene");
+ * game.run();
+ * ```
+ * @example
+ * ```js
+ * const game = new Game({
+ *   containerNode: document.getElementById("app"),
+ *   gameWidth: 1920,
+ *   gameHeight: 1080,
+ *   debugEnabled: false,
+ *   canvasColor: "#000000",
+ *   physicsFramerate: 180,
+ *   headless: false,
+ *   spriteDefaultScale: new Vector2(1, 1),
+ *   collisions: {
+ *     collisionMatrix: [
+ *       ["layer1", "layer2"],
+ *       ["layer1", "layer3"],
+ *     ],
+ *     collisionMethod: CollisionMethods.SAT,
+ *     collisionBroadPhaseMethod: BroadPhaseMethods.SpartialGrid,
+ *     collisionArea: new Rectangle(-960, -540, 1920, 1080),
+ *   }
+ * });
+ * game.addScene(GameScene, "GameScene");
+ * game.run();
+ * ```
+ */
 export declare class Game {
+    /** @private */
     private readonly container;
+    /** @private */
     private sceneManager;
+    /** @private */
     private iterationManager;
+    /** @private */
     private _config;
+    /** @private */
     constructor(config: GameConfig);
+    /** @private */
     private setupManagers;
     /**
-     * @returns GameConfig
+     * The game configuration
      */
     get config(): GameConfig;
     /**
-     * @returns running
+     * TRUE if the game is running
      */
     get running(): boolean;
     /**

package/lib/core/GameActor.d.ts

@@ -10,23 +10,41 @@ import { FrameEvent } from "./managers/IterationManager";
 import { ISceneManager } from "./managers/SceneManager";
 import { ITimeManager } from "./managers/TimeManager";
 import { IRenderManager } from "angry-pixel-2d-renderer";
+/** @private */
 export interface InitOptions {
     [key: string]: any;
 }
+/**
+ * Base class from which Scene, GameObjects and Component are extended.
+ * @private
+ */
 export declare abstract class GameActor {
+    /** @private */
     protected readonly updateEvent: FrameEvent;
+    /** @private */
     protected readonly container: Container;
+    /** Used to load and retrieve assets. */
     protected readonly assetManager: IAssetManager;
+    /** Used to access the canvas element. */
     protected readonly domManager: IDomManager;
+    /** Used to obtain information about the input. */
     protected readonly inputManager: IInputManager;
+    /** Used to create, retrieve and destroy GameObject instances. */
     protected readonly gameObjectManager: IGameObjectManager;
+    /** Used to manage colliders and rigidBodies. */
     protected readonly physicsManager: IPhysicsManager;
+    /** Used to manage the render and camera data. */
     protected readonly renderManager: IRenderManager;
+    /** Used to load scenes. */
     protected readonly sceneManager: ISceneManager;
+    /** Used to manage and obtain information about the time in the game. */
     protected readonly timeManager: ITimeManager;
+    /** Object containing the game configuration. */
     protected readonly gameConfig: GameConfig;
     private started;
+    /** @private */
     constructor(container: Container);
+    /** @private */
     dispatch(event: FrameEvent, options?: InitOptions): void;
     /**
      * This method is called after instantiation (recommended for the creation of game objects).
@@ -48,7 +66,6 @@ export declare abstract class GameActor {
      * Adds a new game object to the scene.
      * @param gameObjectClass The game object class
      * @returns The added game object
-     * @returns
      */
     protected addGameObject<T extends GameObject>(gameObjectClass: GameObjectClass<T>): T;
     /**
@@ -56,7 +73,6 @@ export declare abstract class GameActor {
      * @param gameObjectClass The game object class
      * @param name The name of the game object
      * @returns The added game object
-     * @returns
      */
     protected addGameObject<T extends GameObject>(gameObjectClass: GameObjectClass<T>, name: string): T;
     /**
@@ -64,7 +80,6 @@ export declare abstract class GameActor {
      * @param gameObjectClass The game object class
      * @param options This options will be passed to the init method
      * @returns The added game object
-     * @returns
      */
     protected addGameObject<T extends GameObject>(gameObjectClass: GameObjectClass<T>, options: InitOptions): T;
     /**
@@ -73,7 +88,6 @@ export declare abstract class GameActor {
      * @param options [optional] This options will be passed to the init method
      * @param name [optional] The name of the game object
      * @returns The added game object
-     * @returns
      */
     protected addGameObject<T extends GameObject>(gameObjectClass: GameObjectClass<T>, options?: InitOptions | string, name?: string): T;
     /**
@@ -110,6 +124,8 @@ export declare abstract class GameActor {
      * @param gameObject The game object to destory
      */
     protected destroyGameObject(gameObject: GameObject): void;
+    /** @private */
     protected abstract _destroy(): void;
+    /** @private */
     protected abstract _stopGame(): void;
 }

package/lib/core/GameConfig.d.ts

@@ -1,18 +1,61 @@
 import { BroadPhaseMethods, CollisionMatrix, CollisionMethods } from "angry-pixel-2d-physics";
 import { Rectangle, Vector2 } from "angry-pixel-math";
+/**
+ * Game configuration options
+ * @public
+ * @category Core
+ *  @example
+ * ```js
+ * const gameConfig = {
+ *   containerNode: document.getElementById("app"),
+ *   gameWidth: 1920,
+ *   gameHeight: 1080,
+ *   debugEnabled: false,
+ *   canvasColor: "#000000",
+ *   physicsFramerate: 180,
+ *   headless: false,
+ *   spriteDefaultScale: new Vector2(1, 1),
+ *   collisions: {
+ *     collisionMatrix: [
+ *       ["layer1", "layer2"],
+ *       ["layer1", "layer3"],
+ *     ],
+ *     collisionMethod: CollisionMethods.SAT,
+ *     collisionBroadPhaseMethod: BroadPhaseMethods.SpartialGrid,
+ *     collisionArea: new Rectangle(-960, -540, 1920, 1080),
+ *   }
+ * };
+ * ```
+ */
 export interface GameConfig {
-    containerNode?: HTMLElement | null;
+    /** HTML element where the game will be created */
+    containerNode?: HTMLElement;
+    /** Game width */
     gameWidth?: number;
+    /** Game height */
     gameHeight?: number;
+    /** Enables the debug mode */
     debugEnabled?: boolean;
+    /** Background color of canvas */
     canvasColor?: string;
+    /** Framerate for physics execution. The allowed values are 60, 120, 180, 240.
+     * The higher the framerate, the more accurate the physics will be, but it will consume more processor resources.
+     * Default value is 180.
+     */
     physicsFramerate?: number;
-    spriteDefaultScale?: Vector2 | null;
+    /** Define a general scaling for all sprites. It can be overwritten individually on each sprite */
+    spriteDefaultScale?: Vector2;
+    /** Enable Headless mode. The input and rendering functions are turned off. Ideal for game server development */
     headless?: boolean;
+    /** Collision configuration options */
     collisions?: {
+        /** Collision detection method: CollisionMethods.SAT or CollisionMethods.ABB. Default value is CollisionMethods.SAT */
         collisionMethod?: CollisionMethods;
+        /** Define a fixed area  */
         collisionArea?: Rectangle;
+        /** Define a fixed rectangular area for collision detection */
         collisionMatrix?: CollisionMatrix;
+        /** Collision broad phase method: BroadPhaseMethods.QuadTree or BroadPhaseMethods.SpartialGrid. Default values is BroadPhaseMethods.SpartialGrid */
         collisionBroadPhaseMethod?: BroadPhaseMethods;
     };
 }