angry-pixel 1.2.17 → 2.0.0

package/lib/index.d.ts

@@ -1 +1,2218 @@
-export * from '@angry-pixel/core';
+type DependencyType = {
+    new (...args: any[]): any;
+};
+type DependencyName = string | symbol;
+type PropertyKey = string | symbol;
+declare class Container {
+    private instances;
+    private types;
+    add(type: DependencyType, name?: DependencyName): Container;
+    set(name: DependencyName, dependency: any): Container;
+    get<T>(name: DependencyName): T;
+    has(name: DependencyName): boolean;
+}
+declare function injectable(name: DependencyName): (target: DependencyType) => void;
+declare function inject(name: DependencyName): (target: any, propertyKey: PropertyKey, parameterIndex?: number) => void;
+
+/**
+ * Represents a 2D vector and provides static methods for vector calculations.
+ * @category Math
+ * @public
+ * @example
+ * ```js
+ * const v1 = new Vector2(2, 1);
+ * const v2 = new Vector2(3, 2);
+ * const v3 = new Vector2(); // zero vector
+ *
+ * Vector2.add(v3, v1, v2);
+ * v3.x // 5
+ * v3.y // 3
+ * ```
+ */
+declare class Vector2 {
+    private _x;
+    private _y;
+    private _direction;
+    constructor(x?: number, y?: number);
+    get x(): number;
+    set x(x: number);
+    get y(): number;
+    set y(y: number);
+    /**
+     * Get the magnitude of the vector
+     *
+     * @returns The magnitude of the vector
+     */
+    get magnitude(): number;
+    /**
+     * Get the direction as an unit vector
+     *
+     * @returns The direction vector
+     */
+    get direction(): Vector2;
+    /**
+     * Set the vector
+     *
+     * @param x The x value
+     * @param y The y value
+     */
+    set(x: number, y: number): void;
+    /**
+     * Copy the target vector properties
+     *
+     * @param vector The vector to copy from
+     */
+    copy(vector: Vector2): void;
+    /**
+     * Compare if two vector are equals
+     *
+     * @param vector The vector to compare
+     * @returns True if the vectors are equals, false if not
+     */
+    equals(vector: Vector2): boolean;
+    /**
+     * Colne a vector into a new instace
+     *
+     * @returns The cloned vector
+     */
+    clone(): Vector2;
+    /**
+     * Get the distance with another vector
+     *
+     * @param vector The vector to compare
+     * @returns The magnitude of the distance
+     */
+    distance(vector: Vector2): number;
+    /**
+     * Calculates a + b
+     * @param out The output vector
+     * @param a The first operand
+     * @param b The second operand
+     * @returns The output vector
+     * @example
+     * ```js
+     * const v1 = new Vector2(2, 1);
+     * const v2 = new Vector2(3, 2);
+     * const v3 = Vector2.add(new Vector2(), v1, v2);
+     * v3.x // 5
+     * v3.y // 3
+     * ```
+     */
+    static add(out: Vector2, a: Vector2, b: Vector2): Vector2;
+    /**
+     * Calculates a - b
+     *
+     * @param out The output vector
+     * @param a The first operand
+     * @param b The second operand
+     * @returns The output vector
+     * @example
+     * ```js
+     * const v1 = new Vector2(3, 2);
+     * const v2 = new Vector2(2, 1);
+     * const v3 = Vector2.subtract(new Vector2(), v1, v2);
+     * v3.x // 1
+     * v3.y // 1
+     * ```
+     */
+    static subtract(out: Vector2, a: Vector2, b: Vector2): Vector2;
+    /**
+     * Returns the unit vector
+     *
+     * @param out The output vector
+     * @param a The vector to get the unit
+     * @returns The output vector
+     * @example
+     * ```js
+     * const v1 = new Vector2(3, 0);
+     * const v2 = Vector2.unit(new Vector2(), v1);
+     * v2.x // 1
+     * v2.y // 0
+     * ```
+     */
+    static unit(out: Vector2, a: Vector2): Vector2;
+    /**
+     * Normalize a vector
+     *
+     * @param out The output vector
+     * @param a The vector to normalize
+     * @returns The output vector
+     * @example
+     * ```js
+     * const v1 = new Vector2(0, 2);
+     * const v2 = Vector2.normal(new Vector2(), v1);
+     * v2.x // -2
+     * v2.y // 0
+     * ```
+     */
+    static normal(out: Vector2, a: Vector2): Vector2;
+    /**
+     * Scale a vector
+     *
+     * @param out The output vector
+     * @param a The vector to scale
+     * @param scalar The scalar value
+     * @returns The output vector
+     * @example
+     * ```js
+     * const v1 = new Vector2(3, 2);
+     * const v2 = Vector2.scale(new Vector2(), v1, 2);
+     * v2.x // 6
+     * v2.y // 4
+     * ```
+     */
+    static scale(out: Vector2, a: Vector2, scalar: number): Vector2;
+    /**
+     * Calculates the dot product of two vectors and returns a scalar value
+     *
+     * @param a The first operand
+     * @param b The second operand
+     * @returns The dot product result
+     * @example
+     * ```js
+     * const v1 = new Vector2(3, 2);
+     * const v2 = new Vector2(2, 1);
+     * Vector2.dot(v1, v2); // 8
+     * ```
+     */
+    static dot(a: Vector2, b: Vector2): number;
+    /**
+     * Calculates the cross product of two vectors and returns a scalar value
+     *
+     * @param a The first operand
+     * @param b The second operand
+     * @returns The cross produc result
+     * @example
+     * ```js
+     * const v1 = new Vector2(3, 2);
+     * const v2 = new Vector2(2, 1);
+     * Vector2.cross(v1, v2); // -1
+     * ```
+     */
+    static cross(a: Vector2, b: Vector2): number;
+    /**
+     * Rounds a vector
+     *
+     * @param a The vector to round
+     * @returns The output vector
+     * @example
+     * ```js
+     * const v1 = new Vector2(3.9, 2.2);
+     * const v2 = Vector2.round(new Vector2(), v1);
+     * v2.x // 4
+     * v2.y // 2
+     * ```
+     */
+    static round(out: Vector2, a: Vector2): Vector2;
+}
+
+/**
+ * Represents an axis aligned rectangle
+ * @category Math
+ * @public
+ */
+declare class Rectangle {
+    width: number;
+    height: number;
+    private _position;
+    private _center;
+    constructor(x?: number, y?: number, width?: number, height?: number);
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    get x1(): number;
+    get y1(): number;
+    get position(): Vector2;
+    set position(position: Vector2);
+    get center(): Vector2;
+    /**
+     * Set the rectangle
+     *
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     */
+    set(x: number, y: number, width: number, height: number): void;
+    /**
+     * Compare if two rectangles are equals
+     *
+     * @param rectangle The rectangle to compare
+     * @returns TRUE if the rectangles are equals, FALSE if not
+     */
+    equals(rectangle: Rectangle): boolean;
+    /**
+     * Copy the target rectangle properties
+     *
+     * @param rect The rectangle to copy from
+     */
+    copy(rect: Rectangle): void;
+    /**
+     * Check if the target rectangle is overlapping
+     *
+     * @param rect The target rectangle
+     * @returns TRUE or FALSE
+     */
+    overlaps(rect: Rectangle): boolean;
+    /**
+     * Check if the target rectangle is contained
+     *
+     * @param rect The target rectangle
+     * @returns TRUE or FALSE
+     */
+    contains(rect: Rectangle): boolean;
+    /**
+     * Check if the target vector is contained
+     *
+     * @param vector The target vector
+     * @returns TRUE or FALSE
+     */
+    contains(vector: Vector2): boolean;
+}
+
+/**
+ * Clamps the given value between the given minimum and maximum values.
+ * @category Math
+ * @public
+ * @param value number to clamp
+ * @param min min value
+ * @param max max value
+ * @returns clamped value
+ */
+declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Returns a random integer number between the given minimum and maximum values.
+ * @category Math
+ * @public
+ * @param min min value
+ * @param max max value
+ * @returns the random int value
+ */
+declare const randomInt: (min: number, max: number) => number;
+/**
+ * Returns a random float number between the given minimum and maximum values.
+ * @category Math
+ * @public
+ * @param min min value
+ * @param max max value
+ * @returns the random float value
+ */
+declare const randomFloat: (min: number, max: number, decimals?: number) => number;
+/**
+ * Corrects a floating number to a given number of decimal places.
+ * @category Math
+ * @public
+ * @param value the value to round
+ * @param decimals the number of decimals
+ * @returns the rounded value
+ */
+declare const fixedRound: (value: number, decimals: number) => number;
+/**
+ * Generate an array with a range of numbers.
+ * @category Math
+ * @public
+ * @param start the starting value
+ * @param end the end value
+ * @param steps the steps to move
+ * @returns number range
+ */
+declare const range: (start: number, end: number, steps?: number) => number[];
+/**
+ * Evaluates whether the given value is between the minimum and the maximum (both inclusive).
+ * @category Math
+ * @public
+ * @param value number to compare
+ * @param min min value
+ * @param max max value
+ * @returns true if the number is between the min and the max, false instead
+ */
+declare const between: (value: number, min: number, max: number) => boolean;
+
+interface Shape {
+    boundingBox: Rectangle;
+    collider: number;
+    entity: number;
+    id: number;
+    ignoreCollisionsWithLayers: string[];
+    layer: string;
+    position: Vector2;
+    projectionAxes: Vector2[];
+    radius: number;
+    rotation: number;
+    vertexModel: Vector2[];
+    vertices: Vector2[];
+    updateCollisions: boolean;
+}
+declare class Polygon implements Shape {
+    rotation: number;
+    boundingBox: Rectangle;
+    collider: number;
+    entity: number;
+    id: number;
+    ignoreCollisionsWithLayers: string[];
+    layer: string;
+    position: Vector2;
+    projectionAxes: Vector2[];
+    radius: number;
+    vertices: Vector2[];
+    updateCollisions: boolean;
+    private _vertexModel;
+    get vertexModel(): Vector2[];
+    set vertexModel(vertexModel: Vector2[]);
+    constructor(vertexModel: Vector2[], rotation?: number);
+}
+declare class Circumference implements Shape {
+    radius: number;
+    boundingBox: Rectangle;
+    collider: number;
+    entity: number;
+    id: number;
+    ignoreCollisionsWithLayers: string[];
+    layer: string;
+    position: Vector2;
+    projectionAxes: Vector2[];
+    rotation: number;
+    vertexModel: Vector2[];
+    vertices: Vector2[];
+    updateCollisions: boolean;
+    constructor(radius: number);
+}
+
+/**
+ * Broad phase collision methods
+ * - QuadTree: Stores the shapes in an incremental quad tree.
+ * - SpartialGrid: Stores the shapes in an incremental spartial grid.
+ * @category Config
+ * @public
+ */
+declare enum BroadPhaseMethods {
+    QuadTree = 0,
+    SpartialGrid = 1
+}
+
+interface CollisionResolution {
+    penetration: number;
+    direction: Vector2;
+}
+
+/**
+ * Resolution phase collision methods
+ * - AABB (axis-aligned bounding box): It only works with axis-aligned rectangles and lines and cimcurferences.
+ * - SAT (Separation axis theorem): It works with every type of shape.
+ * @category Config
+ * @public
+ */
+declare enum CollisionMethods {
+    AABB = 0,
+    SAT = 1
+}
+
+interface Collider {
+    ignoreCollisionsWithLayers: string[];
+    layer: string;
+    offset: Vector2;
+    physics: boolean;
+    shapes: Shape[];
+}
+
+type Entity = number;
+type Component = {
+    [key: string]: any;
+};
+type ComponentType<T extends Component = Component> = {
+    new (...args: any[]): T;
+};
+type SearchResult<T extends Component> = {
+    entity: Entity;
+    component: T;
+};
+type SearchCriteria = {
+    [key: string]: any;
+};
+declare class EntityManager {
+    private lastEntityId;
+    private lastComponentTypeId;
+    private components;
+    private disabledEntities;
+    private disabledComponents;
+    createEntity(): Entity;
+    createEntity(components: Array<ComponentType | Component>): Entity;
+    removeEntity(entity: Entity): void;
+    removeAllEntities(): void;
+    isEntityEnabled(entity: Entity): boolean;
+    enableEntity(entity: Entity): void;
+    disableEntity(entity: Entity): void;
+    disableEntitiesByComponent(componentType: ComponentType): void;
+    enableEntitiesByComponent(componentType: ComponentType): void;
+    addComponent<T extends Component>(entity: Entity, componentType: ComponentType<T>): T;
+    addComponent<T extends Component>(entity: Entity, component: T): T;
+    hasComponent(entity: Entity, componentType: ComponentType): boolean;
+    getComponent<T extends Component>(entity: Entity, componentType: ComponentType<T>): T;
+    getComponents(entity: Entity): Component[];
+    getEntityForComponent(component: Component): Entity;
+    removeComponent(component: Component): void;
+    removeComponent(entity: Entity, componentType: ComponentType): void;
+    isComponentEnabled(component: Component): boolean;
+    isComponentEnabled<T extends Component>(entity: Entity, componentType: ComponentType<T>): boolean;
+    disableComponent(component: Component): void;
+    disableComponent<T extends Component>(entity: Entity, componentType: ComponentType<T>): void;
+    enableComponent(component: Component): void;
+    enableComponent<T extends Component>(entity: Entity, componentType: ComponentType<T>): void;
+    search<T extends Component>(componentType: ComponentType<T>, criteria?: SearchCriteria, includeDisabled?: boolean): SearchResult<T>[];
+    searchEntitiesByComponents(componentTypes: ComponentType[]): Entity[];
+    private getComponentTypeId;
+}
+
+interface System {
+    onCreate?(): void;
+    onDestroy?(): void;
+    onDisabled?(): void;
+    onEnabled?(): void;
+    onUpdate(): void;
+}
+type SystemType<T extends System = System> = {
+    new (...args: any[]): T;
+};
+type SystemGroup = string | number | symbol;
+declare class SystemManager {
+    private systems;
+    private findSystemIndex;
+    addSystem(system: System, group: SystemGroup): void;
+    hasSystem(systemType: SystemType): boolean;
+    getSystem<T extends System>(systemType: SystemType<T>): T;
+    enableSystem(systemType: SystemType): void;
+    disableSystem(systemType: SystemType): void;
+    setExecutionOrder(systemType: SystemType, position: number): void;
+    removeSystem(systemType: SystemType): void;
+    update(group: SystemGroup): void;
+}
+
+/**
+ * Represent a collision. It contains the colliders involved and the resolution data.
+ * @category Components
+ * @public
+ */
+interface Collision {
+    localCollider: Collider;
+    localEntity: Entity;
+    remoteCollider: Collider;
+    remoteEntity: Entity;
+    resolution: CollisionResolution;
+}
+
+declare class CollisionRepository {
+    private collisions;
+    findCollisionsForCollider(collider: Collider): Collision[];
+    findCollisionsForColliderAndLayer(collider: Collider, layer: string): Collision[];
+    findAll(): Collision[];
+    persist(collision: Collision): void;
+    removeAll(): void;
+}
+
+/**
+ * Array containing which layers will collide with each other.
+ * @category Config
+ * @public
+ */
+type CollisionMatrix = [string, string][];
+
+interface GameConfig {
+    /** HTML element where the game will be created */
+    containerNode: HTMLElement;
+    /** Game width */
+    width: number;
+    /** Game height */
+    height: 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;
+    /** 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 rectangular area for collision detection */
+        collisionMatrix?: CollisionMatrix;
+        /** Collision broad phase method: BroadPhaseMethods.QuadTree or BroadPhaseMethods.SpartialGrid. Default values is BroadPhaseMethods.SpartialGrid */
+        collisionBroadPhaseMethod?: BroadPhaseMethods;
+    };
+}
+
+declare class SystemFactory {
+    private readonly container;
+    private readonly systemManager;
+    private lastSystemTypeId;
+    constructor(container: Container, systemManager: SystemManager);
+    createSystemIfNotExists(systemType: SystemType): void;
+}
+
+/**
+ * Manages the asset loading (images, fonts, audios, videos).
+ * @public
+ * @category Managers
+ * @example
+ * ```js
+ * this.assetManager.loadImage("image.png");
+ * this.assetManager.loadAudio("audio.ogg");
+ * this.assetManager.loadVideo("video.mp4");
+ * this.assetManager.loadFont("custom-font", "custom-font.ttf");
+ *
+ * const imageElement = this.assetManager.getImage("image.png");
+ * const audioElement = this.assetManager.getAudio("audio.ogg");
+ * const videoElement = this.assetManager.getVideo("video.mp4");
+ * const fontFace = this.assetManager.getFont("custom-font");
+ *
+ * if (this.assetManager.getAssetsLoaded()) {
+ *   // do something when assets are loaded
+ * }
+ * ```
+ */
+declare class AssetManager {
+    private readonly assets;
+    /**
+     * Returns TRUE if the assets are loaded
+     * @returns TRUE or FALSE
+     */
+    getAssetsLoaded(): boolean;
+    /**
+     * Loads an image asset
+     * @param url The asset URL
+     * @param preloadTexture Creates the texture to be rendered at load time [optional]
+     * @returns The HTML Image element created
+     */
+    loadImage(url: string): HTMLImageElement;
+    /**
+     * Loads an audio asset
+     * @param url The asset URL
+     * @returns The HTML Audio element created
+     */
+    loadAudio(url: string): HTMLAudioElement;
+    /**
+     * Loads a font asset
+     * @param family The font family name
+     * @param url The asset URL
+     * @returns The FontFace object created
+     */
+    loadFont(family: string, url: string): FontFace;
+    /**
+     * Loads an video asset
+     * @param url The asset URL
+     * @returns The HTML Video element created
+     */
+    loadVideo(url: string): HTMLVideoElement;
+    /**
+     * Retrieves an image asset
+     * @param url The asset URL
+     * @returns The HTML Image element
+     */
+    getImage(url: string): HTMLImageElement;
+    /**
+     * Retrieves an audio asset
+     * @param url The asset URL
+     * @returns The HTML Audio element
+     */
+    getAudio(url: string): HTMLAudioElement;
+    /**
+     * Retrieves a font asset
+     * @param family The font family name
+     * @returns The Font element
+     */
+    getFont(family: string): FontFace;
+    /**
+     * Retrieves a video asset
+     * @param url The asset URL
+     * @returns The HTML Video element
+     */
+    getVideo(url: string): HTMLVideoElement;
+    private createAsset;
+}
+
+type SceneType<T extends Scene = Scene> = {
+    new (entityManager: EntityManager, assetManager: AssetManager): T;
+};
+declare abstract class Scene {
+    protected readonly entityManager: EntityManager;
+    protected readonly assetManager: AssetManager;
+    systems: SystemType[];
+    constructor(entityManager: EntityManager, assetManager: AssetManager);
+    loadAssets(): void;
+    setup(): void;
+}
+declare class SceneManager {
+    private readonly systemManager;
+    private readonly systemFactory;
+    private readonly entityManager;
+    private readonly assetManager;
+    private readonly scenes;
+    private openingSceneName;
+    private currentSceneName;
+    private sceneNameToBeLoaded;
+    private loadingScene;
+    constructor(systemManager: SystemManager, systemFactory: SystemFactory, entityManager: EntityManager, assetManager: AssetManager);
+    addScene(sceneType: SceneType, name: string, openingScene?: boolean): void;
+    loadScene(name: string): void;
+    loadOpeningScene(): void;
+    /** @internal */
+    update(): void;
+    private destroyCurrentScene;
+}
+
+/**
+ * Game is the main class that contains all the managers, scenes, entities 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"),
+ *   width: 1920,
+ *   height: 1080,
+ * });
+ * game.addScene(MainScene, "MainScene");
+ * game.start();
+ * ```
+ * @example
+ * ```js
+ * const game = new Game({
+ *   containerNode: document.getElementById("app"),
+ *   width: 1920,
+ *   height: 1080,
+ *   debugEnabled: false,
+ *   canvasColor: "#000000",
+ *   physicsFramerate: 180,
+ *   collisions: {
+ *     collisionMatrix: [
+ *       ["layer1", "layer2"],
+ *       ["layer1", "layer3"],
+ *     ],
+ *     collisionMethod: CollisionMethods.SAT,
+ *     collisionBroadPhaseMethod: BroadPhaseMethods.SpartialGrid,
+ *   }
+ * });
+ * game.addScene(MainScene, "MainScene");
+ * game.start();
+ * ```
+ */
+declare class Game {
+    private readonly container;
+    constructor(gameConfig: GameConfig);
+    /**
+     * TRUE if the game is running
+     */
+    get running(): boolean;
+    /**
+     * Add a scene to the game
+     *
+     * @param sceneType The class of the scene
+     * @param name The name for the scene
+     * @param openingScene If this is the opening scene, set TRUE, FALSE instead (optional: default FALSE)
+     */
+    addScene(sceneType: SceneType, name: string, openingScene?: boolean): void;
+    /**
+     * Add a new class to be used as dependency
+     *
+     * @param dependencyType The class of the dependency
+     * @param name The name for the dependecy (optional: if the class uses the "injectable" decorator, this parameter is unnecesary)
+     */
+    addDependencyType(dependencyType: DependencyType, name?: DependencyName): void;
+    /**
+     * Add a new instance to be used as dependency
+     *
+     * @param dependency The dependency instance
+     * @param name The name for the dependecy
+     */
+    addDependencyInstance(dependencyInstance: any, name: DependencyName): void;
+    /**
+     * Start the game
+     */
+    start(): void;
+    /**
+     * Stop the game
+     */
+    stop(): void;
+}
+
+/** @category Components */
+interface AnimatorOptions {
+    animations: Map<string, Animation>;
+    animation: string;
+    speed: number;
+    playing: boolean;
+}
+/** @category Components */
+declare class Animator {
+    animations: Map<string, Animation>;
+    animation: string;
+    speed: number;
+    reset: boolean;
+    playing: boolean;
+    currentFrame: number;
+    currentTime: number;
+    /**  @internal */
+    _currentAnimation: string;
+    constructor(options?: Partial<AnimatorOptions>);
+}
+/** @category Components */
+declare class Animation {
+    image: HTMLImageElement | HTMLImageElement[];
+    slice: AnimationSlice;
+    frames: number[];
+    fps: number;
+    loop: boolean;
+    constructor(options?: Partial<Animation>);
+}
+/** @category Components */
+type AnimationSlice = {
+    size: Vector2;
+    offset: Vector2;
+    padding: Vector2;
+};
+
+/** @category Components */
+interface AudioPlayerOptions {
+    action: AudioPlayerAction;
+    audioSource: HTMLAudioElement;
+    loop: boolean;
+    volume: number;
+}
+/** @category Components */
+declare class AudioPlayer {
+    action: AudioPlayerAction;
+    audioSource: HTMLAudioElement;
+    loop: boolean;
+    playing: boolean;
+    volume: number;
+    /** @internal */
+    _currentAudio: string;
+    constructor(options?: Partial<AudioPlayerOptions>);
+}
+type AudioPlayerAction = "stop" | "play" | "pause";
+
+/** @category Components */
+interface ButtonOptions {
+    shape: ButtonShape;
+    width: number;
+    height: number;
+    radius: number;
+    touchEnabled: boolean;
+    offset: Vector2;
+    onClick: () => void;
+    onPressed: () => void;
+}
+/** @category Components */
+declare class Button {
+    /** The shape of the button */
+    shape: ButtonShape;
+    /** Width in pixels. Only for rectangle shaped buttons */
+    width: number;
+    /** Height in pixels. Only for rectangle shaped buttons */
+    height: number;
+    /** Radius in pixels. Only for circumference shaped buttons */
+    radius: number;
+    /** Enables interaction with touch screens */
+    touchEnabled: boolean;
+    /** X-axis and Y-axis offset */
+    offset: Vector2;
+    /** TRUE if it's pressed */
+    pressed: boolean;
+    /** Function executed when the button's click */
+    onClick: () => void;
+    /** Function executed when the button is pressed */
+    onPressed: () => void;
+    constructor(options?: Partial<ButtonOptions>);
+}
+/** @category Components */
+declare enum ButtonShape {
+    Rectangle = 0,
+    Circumference = 1
+}
+
+/** @category Components */
+declare class Children {
+    entities: Entity[];
+}
+
+/** @category Components */
+declare class Parent {
+    entity: Entity;
+}
+
+/** @category Components */
+interface TiledWrapperOptions {
+    tilemap: TiledTilemap;
+    layerToRender: string;
+}
+/** @category Components */
+declare class TiledWrapper {
+    tilemap: TiledTilemap;
+    layerToRender: string;
+    constructor(options?: Partial<TiledWrapperOptions>);
+}
+/** @category Components */
+interface TiledTilemap {
+    width: number;
+    height: number;
+    infinite: boolean;
+    layers: (TiledLayer | TiledObjectLayer)[];
+    renderorder: string;
+    tilesets: {
+        firstgid: number;
+    }[];
+    tilewidth: number;
+    tileheight: number;
+    properties?: TiledProperty[];
+}
+/** @category Components */
+interface TiledChunk {
+    data: number[];
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    type?: string;
+}
+/** @category Components */
+interface TiledLayer {
+    name: string;
+    id: number;
+    chunks?: TiledChunk[];
+    data?: number[];
+    x: number;
+    y: number;
+    type: "tilelayer";
+    width: number;
+    height: number;
+    opacity: number;
+    visible: boolean;
+    startx?: number;
+    starty?: number;
+    offsetx?: number;
+    offsety?: number;
+    tintcolor?: string;
+    properties?: TiledProperty[];
+}
+/** @category Components */
+interface TiledObjectLayer {
+    draworder: string;
+    id: number;
+    name: string;
+    objects: TiledObject[];
+    opacity: number;
+    type: "objectgroup";
+    visible: true;
+    x: number;
+    y: number;
+    properties?: TiledProperty[];
+}
+/** @category Components */
+interface TiledObject {
+    gid: number;
+    height: number;
+    id: number;
+    name: string;
+    rotation: number;
+    type: string;
+    visible: true;
+    width: number;
+    x: number;
+    y: number;
+    properties?: TiledProperty[];
+}
+/** @category Components */
+interface TiledProperty {
+    name: string;
+    type: "int" | "bool" | "float" | "color" | "string";
+    value: number | string | boolean;
+}
+
+/** @category Components */
+interface TransformOptions {
+    position: Vector2;
+    scale: Vector2;
+    rotation: number;
+    parent: Transform;
+    localPosition: Vector2;
+    localScale: Vector2;
+    localRotation: number;
+}
+/** @category Components */
+declare class Transform {
+    /** Position relative to the zero point of the simulated world, or relative to the parent if it has one */
+    position: Vector2;
+    /** Scale on x-axis and y-axis */
+    scale: Vector2;
+    /** Rotation expressed in radians */
+    rotation: number;
+    /** The real position in the simulated world. It has the same value as `position` property if there is no parent */
+    localPosition: Vector2;
+    /** The real scale in the simulated world. It has the same value as `scale` property if there is no parent */
+    localScale: Vector2;
+    /** The real rotation in the simulated world. It has the same value as `rotation` property if there is no parent */
+    localRotation: number;
+    /** @internal */
+    _parentEntity: Entity;
+    /** @internal */
+    _childEntities: Entity[];
+    private _parent;
+    /** The parent transform. The position property became relative to this transform */
+    get parent(): Transform;
+    /** The parent transform. The position property became relative to this transform */
+    set parent(parent: Transform);
+    constructor(options?: Partial<TransformOptions>);
+}
+
+interface BallColliderOptions {
+    /** Circumference radius */
+    radius: number;
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** Collision layer*/
+    layer: string;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+}
+/**
+ * Circumference shaped collider for 2d collisions.
+ * @public
+ * @category Components
+ */
+declare class BallCollider implements Collider {
+    /** Circumference radius */
+    radius: number;
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** Collision layer*/
+    layer: string;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+    /** @internal */
+    shapes: Shape[];
+    constructor(options?: Partial<BallColliderOptions>);
+}
+
+interface BoxColliderOptions {
+    /** Collision layer*/
+    layer: string;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** Width of the rectangle */
+    width: number;
+    /** Height of the rectangle */
+    height: number;
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** Rectangle rotation in radians */
+    rotation: number;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+}
+/**
+ * Rectangle shaped collider for 2d collisions.
+ * @public
+ * @category Components
+ */
+declare class BoxCollider implements Collider {
+    /** Collision layer*/
+    layer: string;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** Width of the rectangle */
+    width: number;
+    /** Height of the rectangle */
+    height: number;
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** Rectangle rotation in radians */
+    rotation: number;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+    /** @internal */
+    shapes: Shape[];
+    constructor(options?: Partial<BoxColliderOptions>);
+}
+
+interface EdgeColliderOptions {
+    /** Collection of 2d vectors representing the vertices of the collider */
+    vertexModel: Vector2[];
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** Edges rotation in radians */
+    rotation: number;
+    /** Collision layer */
+    layer: string;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+}
+/**
+ * Collider composed of lines defined by its vertices, for 2d collisions.
+ * @public
+ * @category Components
+ */
+declare class EdgeCollider implements Collider {
+    /** Collection of 2d vectors representing the vertices of the collider */
+    vertexModel: Vector2[];
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** Edges rotation in radians */
+    rotation: number;
+    /** Collision layer */
+    layer: string;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+    /** @internal */
+    shapes: Shape[];
+    constructor(options?: Partial<EdgeColliderOptions>);
+}
+
+interface PolygonColliderOptions {
+    /** Collection of 2d vectors representing the vertices of the collider */
+    vertexModel: Vector2[];
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** Edges rotation in radians */
+    rotation: number;
+    /** Collision layer */
+    layer: string;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+}
+/**
+ * Polygon shaped Collider for 2d collisions. Only convex polygons are allowed.
+ * @public
+ * @category Components
+ */
+declare class PolygonCollider implements Collider {
+    /** Collection of 2d vectors representing the vertices of the collider */
+    vertexModel: Vector2[];
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** Edges rotation in radians */
+    rotation: number;
+    /** Collision layer */
+    layer: string;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+    /** @internal */
+    shapes: Shape[];
+    constructor(options?: Partial<PolygonColliderOptions>);
+}
+
+/**
+ * The type of the rigid body to create:
+ * - Dynamic: This type of body is affected by gravity and velopcity.
+ * - Static: This type of body is immovable, is unaffected by velocity and gravity.
+ * @category Components
+ * @public
+ */
+declare enum RigidBodyType {
+    Dynamic = 0,
+    Static = 1
+}
+interface RigidBodyOptions {
+    type: RigidBodyType;
+    velocity: Vector2;
+    gravity: number;
+    acceleration: Vector2;
+}
+declare class RigidBody {
+    type: RigidBodyType;
+    velocity: Vector2;
+    gravity: number;
+    acceleration: Vector2;
+    constructor(options?: Partial<RigidBodyOptions>);
+}
+
+interface TilemapColliderOptions {
+    /** Generate colliders that represent the outer lines of the tile map */
+    composite: boolean;
+    /** Collision layer */
+    layer: string;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+}
+declare class TilemapCollider implements Collider {
+    /** Generate colliders that represent the outer lines of the tile map */
+    composite: boolean;
+    /** Collision layer */
+    layer: string;
+    /** Ignores collisions with layers in the array */
+    ignoreCollisionsWithLayers: string[];
+    /** X-Y axis offset */
+    offset: Vector2;
+    /** TRUE if this collider interact with rigid bodies */
+    physics: boolean;
+    /** @internal */
+    shapes: Shape[];
+    constructor(options?: Partial<TilemapColliderOptions>);
+}
+
+declare enum RenderDataType {
+    Sprite = 0,
+    Text = 1,
+    Tilemap = 2,
+    Mask = 3,
+    Geometric = 4,
+    Video = 5,
+    Shadow = 6
+}
+interface CameraData {
+    depth: number;
+    layers: string[];
+    position: Vector2;
+    zoom: number;
+}
+interface RenderData {
+    type: RenderDataType;
+    position: Vector2;
+    layer: string;
+}
+
+/**
+ * Mask shape: Rectangle or Circumference.
+ * @category Components
+ * @public
+ */
+declare enum MaskShape {
+    Rectangle = 0,
+    Circumference = 1
+}
+interface MaskRenderData extends RenderData {
+    color: string;
+    shape: MaskShape;
+    width: number;
+    height: number;
+    radius: number;
+    rotation: number;
+    opacity: number;
+}
+
+interface ShadowRenderData extends RenderData {
+    color: string;
+    height: number;
+    opacity: number;
+    rotation: number;
+    width: number;
+    lights: Light[];
+}
+interface Light {
+    position: Vector2;
+    radius: number;
+    smooth: boolean;
+    intensity: number;
+}
+
+interface SpriteRenderData extends RenderData {
+    image: HTMLImageElement;
+    width: number;
+    height: number;
+    smooth?: boolean;
+    slice?: Slice;
+    flipHorizontally?: boolean;
+    flipVertically?: boolean;
+    rotation?: number;
+    opacity?: number;
+    maskColor?: string;
+    maskColorMix?: number;
+    tintColor?: string;
+}
+/**
+ * Cut the image based on straight coordinates starting from the top left downward.
+ * @category Components
+ * @public
+ */
+interface Slice {
+    /** Top left x coordinate */
+    x: number;
+    /** Top left y coordinate */
+    y: number;
+    /** The width to slice */
+    width: number;
+    /** The height to slice */
+    height: number;
+}
+
+/**
+ * Direction in which the text will be rendered.
+ * @category Components
+ * @public
+ */
+declare enum TextOrientation {
+    Center = 0,
+    RightUp = 1,
+    RightDown = 2,
+    RightCenter = 3
+}
+interface TextRenderData extends RenderData {
+    font: FontFace | string;
+    text: string;
+    fontSize: number;
+    color: string;
+    lineSeparation: number;
+    letterSpacing: number;
+    orientation: TextOrientation;
+    rotation: number;
+    opacity: number;
+    smooth: boolean;
+    bitmap: {
+        charRanges: number[];
+        fontSize: number;
+        margin: Vector2;
+        spacing: Vector2;
+    };
+}
+
+/**
+ * Direction in which the tilemap will be rendered.
+ * @category Components
+ * @public
+ */
+declare enum TilemapOrientation {
+    Center = 0,
+    RightUp = 1,
+    RightDown = 2,
+    RightCenter = 3
+}
+interface TilemapRenderData extends RenderData {
+    tiles: number[];
+    tilemap: {
+        width: number;
+        tileWidth: number;
+        tileHeight: number;
+        height: number;
+        realWidth: number;
+        realHeight: number;
+    };
+    tileset: {
+        image: HTMLImageElement;
+        width: number;
+        tileWidth: number;
+        tileHeight: number;
+        margin?: Vector2;
+        spacing?: Vector2;
+        correction?: Vector2;
+    };
+    smooth?: boolean;
+    flipHorizontal?: boolean;
+    flipVertical?: boolean;
+    rotation?: number;
+    opacity?: number;
+    maskColor?: string;
+    maskColorMix?: number;
+    tintColor?: string;
+    orientation?: TilemapOrientation;
+}
+
+interface VideoRenderData extends RenderData {
+    video: HTMLVideoElement;
+    width: number;
+    height: number;
+    slice?: Slice;
+    flipHorizontal?: boolean;
+    flipVertical?: boolean;
+    rotation?: number;
+    opacity?: number;
+    maskColor?: string;
+    maskColorMix?: number;
+    tintColor?: string;
+}
+
+declare const defaultRenderLayer = "Default";
+/**
+ * @public
+ * @category Components
+ */
+interface CameraOptions {
+    layers: string[];
+    zoom: number;
+    depth: number;
+}
+/**
+ * @public
+ * @category Components
+ */
+declare class Camera {
+    /** Layers to be rendered by this camera. Layers are rendered in ascending order */
+    layers: string[];
+    /** Camera zoom. Default value is 1 */
+    zoom: number;
+    /** In case you have more than one camera, the depth value determines which camera is rendered first. The lesser value, the first to render */
+    depth: number;
+    /** @internal */
+    _renderData: CameraData;
+    constructor(options?: Partial<CameraOptions>);
+}
+
+/**
+ * @public
+ * @category Components
+ */
+interface LightRendererOptions {
+    radius: number;
+    smooth: boolean;
+    layer: string;
+    intensity: number;
+}
+/**
+ * @public
+ * @category Components
+ */
+declare class LightRenderer {
+    /** Light radius */
+    radius: number;
+    /** Smooth */
+    smooth: boolean;
+    /** Shadow render layer */
+    layer: string;
+    /** Light intensitry between 0 and 1 */
+    intensity: number;
+    /** @internal */
+    _boundingBox: Rectangle;
+    constructor(options?: Partial<LightRendererOptions>);
+}
+
+/**
+ * @public
+ * @category Components
+ */
+interface MaskRendererOptions {
+    shape: MaskShape;
+    color: string;
+    width: number;
+    height: number;
+    radius: number;
+    offset: Vector2;
+    rotation: number;
+    opacity: number;
+    layer: string;
+}
+/**
+ * Renders a filled shape (rectangle or circumference)
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ * maskRenderer.shape    = MaskShape.Rectangle;
+ * maskRenderer.width    = 32;
+ * maskRenderer.height   = 32;
+ * maskRenderer.color    = "#000000";
+ * maskRenderer.offset   = new Vector2(0, 0);
+ * maskRenderer.rotation = 0;
+ * maskRenderer.opacity  = 1;
+ * maskRenderer.layer    = "Default";
+ * ```
+ * @example
+ * ```js
+ * maskRenderer.shape    = MaskShape.Circumference;
+ * maskRenderer.radius   = 16;
+ * maskRenderer.color    = "#000000";
+ * maskRenderer.offset   = new Vector2(0, 0);
+ * maskRenderer.opacity  = 1;
+ * maskRenderer.layer    = "Default";
+ * ```
+ */
+declare class MaskRenderer {
+    /** Mask shape: Rectangle or Circumference */
+    shape: MaskShape;
+    /** Mask width in pixels */
+    width: number;
+    /** Mask height in pixels */
+    height: number;
+    /** Mask radius in pixels (only for circumference) */
+    radius: number;
+    /** The color of the mask */
+    color: string;
+    /** X-axis and Y-axis offset */
+    offset: Vector2;
+    /** Mask rotation in radians */
+    rotation: number;
+    /** Change the opacity between 1 and 0 */
+    opacity: number;
+    /** The render layer */
+    layer: string;
+    /** @internal */
+    _renderData: MaskRenderData;
+    constructor(options?: Partial<MaskRendererOptions>);
+}
+
+/**
+ * @public
+ * @category Components
+ */
+interface ShadowRendererOptions {
+    width: number;
+    height: number;
+    color: string;
+    opacity: number;
+    layer: string;
+}
+/**
+ * @public
+ * @category Components
+ */
+declare class ShadowRenderer {
+    /** Shadow width */
+    width: number;
+    /** Shadow height */
+    height: number;
+    /** Shadow color */
+    color: string;
+    /** Shadow opacity between 0 and 1 */
+    opacity: number;
+    /** The render layer */
+    layer: string;
+    /** @internal */
+    _boundingBox: Rectangle;
+    /** @internal */
+    _renderData: ShadowRenderData;
+    constructor(options?: Partial<ShadowRendererOptions>);
+}
+
+/**
+ * @public
+ * @category Components
+ */
+interface SpriteRendererOptions {
+    image: HTMLImageElement;
+    layer: string;
+    slice: Slice;
+    smooth: boolean;
+    offset: Vector2;
+    flipHorizontally: boolean;
+    flipVertically: boolean;
+    rotation: number;
+    opacity: number;
+    maskColor: string;
+    maskColorMix: number;
+    tintColor: string;
+    scale: Vector2;
+    width: number;
+    height: number;
+}
+/**
+ * @public
+ * @category Components
+ */
+declare class SpriteRenderer {
+    /** The render layer */
+    layer: string;
+    /** The image to render */
+    image: HTMLImageElement;
+    /** Cut the image based on straight coordinates starting from the top left downward */
+    slice?: Slice;
+    /** TRUE for smooth pixels (not recommended for pixel art) */
+    smooth: boolean;
+    /** X-axis and Y-axis offset */
+    offset: Vector2;
+    /** Flip the image horizontally */
+    flipHorizontally: boolean;
+    /** Flip the image vertically */
+    flipVertically: boolean;
+    /** Image rotation in radians */
+    rotation: number;
+    /** Change the opacity between 1 and 0 */
+    opacity: number;
+    /** 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;
+    /** Scale the image based on a vector */
+    scale: Vector2;
+    /** Overwrite the original image width */
+    width: number;
+    /** Overwrite the original image height */
+    height: number;
+    /** @internal */
+    _renderData: SpriteRenderData;
+    constructor(options?: Partial<SpriteRendererOptions>);
+}
+
+/**
+ * @public
+ * @category Components
+ */
+interface TextRendererOptions {
+    layer: string;
+    text: string;
+    font: FontFace | string;
+    fontSize: number;
+    width: number;
+    height: number;
+    offset: Vector2;
+    color: string;
+    lineSeparation: number;
+    letterSpacing: number;
+    charRanges: number[];
+    smooth: boolean;
+    rotation: number;
+    opacity: number;
+    orientation: TextOrientation;
+    bitmapMargin: Vector2;
+    bitmapSpacing: Vector2;
+}
+/**
+ * The TextRenderer component allows to render text using font families, colors, and other configuration options.
+ * @public
+ * @category Components
+ * @example
+ * ```js
+ *   textRenderer.layer: "default";
+ *   textRenderer.text: "Hello world!";
+ *   textRenderer.font: "Arial";
+ *   textRenderer.fontSize: 16;
+ *   textRenderer.width: 160;
+ *   textRenderer.height: 16;
+ *   textRenderer.color: "#000000";
+ *   textRenderer.offset: new Vector2();
+ *   textRenderer.lineSeparation: 0;
+ *   textRenderer.letterSpacing: 0;
+ *   textRenderer.charRanges: [32, 126, 161, 255];
+ *   textRenderer.smooth: false;
+ *   textRenderer.rotation: 0;
+ *   textRenderer.opacity: 1;
+ *   textRenderer.orientation: TextOrientation.RightDown;
+ *   textRenderer.bitmapMargin: new Vector2();
+ *   textRenderer.bitmapSpacing: new Vector2();
+ * ```
+ */
+declare class TextRenderer {
+    /** The render layer */
+    layer: string;
+    /** 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 the component
+     * will render characters from 32 to 126 and from 161 to 255. */
+    charRanges: number[];
+    /** Smoothing pixels (not recommended for bitmap fonts) */
+    smooth: boolean;
+    /** Text rotation in radians */
+    rotation: number;
+    /** 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;
+    /** @internal */
+    _renderData: TextRenderData;
+    constructor(options?: Partial<TextRendererOptions>);
+}
+
+/**
+ * @public
+ * @category Components
+ */
+interface TilemapRendererOptions {
+    layer: string;
+    tileset: Tileset;
+    data: number[];
+    chunks: Chunk[];
+    width: number;
+    height: number;
+    tileWidth: number;
+    tileHeight: number;
+    tintColor: string;
+    opacity: number;
+    smooth: boolean;
+}
+/**
+ * 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
+ */
+declare class TilemapRenderer {
+    /** The render layer */
+    layer: string;
+    /** The Tileset instance */
+    tileset: Tileset;
+    /** Array of tiles. ID 0 (zero) represents empty space.*/
+    data: number[];
+    /** Array of tile data split into chunks */
+    chunks: Chunk[];
+    /** The width of the tilemap (in tiles) */
+    width: number;
+    /** The height of the tilemap (in tiles) */
+    height: number;
+    /** The width of the tile to render */
+    tileWidth: number;
+    /** The height of the tile to render */
+    tileHeight: number;
+    /** Define a color for tinting the tiles */
+    tintColor: string;
+    /** Change the opacity between 1 and 0 */
+    opacity: number;
+    /** TRUE for smooth pixels (not recommended for pixel art) */
+    smooth: boolean;
+    /** @internal */
+    _processed: boolean;
+    /** @internal */
+    _renderData: TilemapRenderData[];
+    constructor(options?: Partial<TilemapRendererOptions>);
+}
+/**
+ * Tileset configuration to be used with the TilemapRenderer
+ * @public
+ * @category Components
+ */
+type 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;
+};
+/**
+ * Chunk of tile data
+ * @public
+ * @category Components
+ */
+type Chunk = {
+    /** Array of tiles. ID 0 (zero) represents empty space.*/
+    data: number[];
+    x: number;
+    y: number;
+    /** Chunk width (in tails) */
+    width: number;
+    /** Chunk height (in tails) */
+    height: number;
+};
+
+/**
+ * @public
+ * @category Components
+ */
+interface VideoRendererOptions {
+    video: HTMLVideoElement;
+    width: number;
+    height: number;
+    offset: Vector2;
+    rotation: number;
+    flipHorizontally: boolean;
+    flipVertically: boolean;
+    opacity: number;
+    maskColor: string;
+    maskColorMix: number;
+    tintColor: string;
+    layer: string;
+    slice: Slice;
+    loop: boolean;
+    volume: number;
+    play: boolean;
+    pause: 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
+ * videoRenderer.video = this.assetManager.getVideo("video.mp4");
+ * videoRenderer.width = 1920;
+ * videoRenderer.height = 1080;
+ * videoRenderer.offset = new Vector2(0, 0);
+ * videoRenderer.flipHorizontally =  false;
+ * videoRenderer.flipVertically = false;
+ * videoRenderer.rotation = 0;
+ * videoRenderer.opacity = 1;
+ * videoRenderer.maskColor = "#FF0000";
+ * videoRenderer.maskColorMix = 0;
+ * videoRenderer.tintColor = "#00FF00";
+ * videoRenderer.layer = "Default";
+ * videoRenderer.slice = {x: 0, y:0, width: 1920, height: 1080};
+ * videoRenderer.volume = 1;
+ * videoRenderer.loop = false;
+ * videoRenderer.play = true;
+ * videoRenderer.pause = false;
+ * ```
+ */
+declare class VideoRenderer {
+    /**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: number;
+    /** Flip the video horizontally */
+    flipHorizontally: boolean;
+    /** Flip the video vertically */
+    flipVertically: 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;
+    /** TRUE to play the video in loop */
+    loop: boolean;
+    /** The volume of the video (between 1 and 0) */
+    volume: number;
+    /** TRUE to play the video. If the video stops playing it becomes FALSE */
+    play: boolean;
+    /** TRUE to pause the video */
+    pause: boolean;
+    /** @internal */
+    _renderData: VideoRenderData;
+    constructor(options?: Partial<VideoRendererOptions>);
+}
+
+/**
+ * It represents a connected gamepad and has the information of all its buttons and axes..
+ * @public
+ * @category Input
+ * @example
+ * ```js
+ * const gamepad = this.inputManager.gamepads[0];
+ *
+ * if (gamepad.dpadAxes.x > 1) {
+ *   // if the depad x-axis is pressed to the right, do some action
+ * }
+ *
+ * if (gamepad.rightFace) {
+ *   // if the right face button is pressed, do some action
+ * }
+ * ```
+ */
+declare class GamepadController {
+    /** @internal */
+    readonly buttons: Map<number, boolean>;
+    /** @internal */
+    readonly axes: Map<number, number>;
+    private readonly _dpadAxes;
+    private readonly _leftStickAxes;
+    private readonly _rightStickAxes;
+    /**
+     * The gamepad id
+     */
+    id: string;
+    /**
+     * The gamepad index
+     */
+    index: number;
+    /**
+     * TRUE if the gamepad is connected
+     */
+    connected: boolean;
+    /**
+     * The values of the d-pad axes represented as a xy vector
+     */
+    get dpadAxes(): Vector2;
+    /**
+     * The values of the left stick axes represented as a xy vector
+     */
+    get leftStickAxes(): Vector2;
+    /**
+     * The values of the right stick axes represented as a xy vector
+     */
+    get rightStickAxes(): Vector2;
+    /**
+     * TRUE if d-pad up is pressed
+     */
+    get dpadUp(): boolean;
+    /**
+     * TRUE if d-pad down is pressed
+     */
+    get dpadDown(): boolean;
+    /**
+     * TRUE if d-pad left is pressed
+     */
+    get dpadLeft(): boolean;
+    /**
+     * TRUE if d-pad right is pressed
+     */
+    get dpadRight(): boolean;
+    /**
+     * TRUE if bottom face button is pressed (Dual Shock: X. Xbox: A. Nintendo: B)
+     */
+    get bottomFace(): boolean;
+    /**
+     * TRUE if right face button is pressed (Dual Shock: Square. Xbox: X. Nintendo: Y)
+     */
+    get rightFace(): boolean;
+    /**
+     * TRUE if left face button is pressed (Dual Shock: Circle. Xbox: B. Nintendo: A)
+     */
+    get leftFace(): boolean;
+    /**
+     * TRUE if top face button is pressed (Dual Shock: Triangle. Xbox: Y. Nintendo: X)
+     */
+    get topFace(): boolean;
+    /**
+     * TRUE if left shoulder button is pressed (Dual Shock: L1. Xbox: LB. Nintendo: L)
+     */
+    get leftShoulder(): boolean;
+    /**
+     * TRUE if right shoulder button is pressed (Dual Shock: R1. Xbox: RB. Nintendo: R)
+     */
+    get rightShoulder(): boolean;
+    /**
+     * TRUE if left trigger button is pressed (Dual Shock: L2. Xbox: LT. Nintendo: ZL)
+     */
+    get leftTrigger(): boolean;
+    /**
+     * TRUE if right trigger button is pressed (Dual Shock: R2. Xbox: RT. Nintendo: ZR)
+     */
+    get rightTrigger(): boolean;
+    /**
+     * TRUE if back button is pressed (a.k.a. select button)
+     */
+    get back(): boolean;
+    /**
+     * TRUE if start button is pressed (a.k.a. options button)
+     */
+    get start(): boolean;
+    /**
+     * TRUE if left stick button is pressed
+     */
+    get leftStickButton(): boolean;
+    /**
+     * TRUE if right stick button is pressed
+     */
+    get rightStickButton(): boolean;
+    /**
+     * Left stick horizontal axes value
+     */
+    get leftStickHorizontal(): number;
+    /**
+     * Left stick vertical axes value
+     */
+    get leftStickVertical(): number;
+    /**
+     * Right stick horizontal axes value
+     */
+    get rightStickHorizontal(): number;
+    /**
+     * Right stick vertical axes value
+     */
+    get rightStickVertical(): number;
+    /**
+     * TRUE if any button is pressed
+     */
+    get anyButtonPressed(): boolean;
+    /**
+     * TRUE if the vibration is on
+     */
+    vibrating: boolean;
+    /**
+     * @internal
+     */
+    vibrationInput: VibrationInput;
+    /**
+     * Turns on the gamepad vibration
+     * @param duration The duration of the effect in milliseconds
+     * @param weakMagnitude Rumble intensity of the high-frequency (weak) rumble motors, normalized to the range between 0.0 and 1.0
+     * @param strongMagnitude Rumble intensity of the low-frequency (strong) rumble motors, normalized to the range between 0.0 and 1.0
+     * @param startDelay The delay in milliseconds before the effect is started
+     */
+    vibrate(duration?: number, weakMagnitude?: number, strongMagnitude?: number, startDelay?: number): void;
+}
+type VibrationInput = {
+    duration: number;
+    weakMagnitude: number;
+    strongMagnitude: number;
+    startDelay: number;
+};
+
+/**
+ * Contains the keyboard information in the last frame.
+ * It uses the **code** property of the **js keyboard event**.
+ * @see [KeyboardEvent: code property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+ * @public
+ * @category Input
+ * @example
+ * ```js
+ * const keyboard = this.inputManager.keyboard;
+ *
+ * if (keyboard.isPressed("ArrowRight")) {
+ *   // if the right arrow key is pressed, do some action
+ * }
+ *
+ * if (keyboard.orPressed("Enter", "Space")) {
+ *   // if the enter key or space key are pressed, do some action
+ * }
+ *
+ * if (keyboard.andPressed("ControlLeft", "KeyC")) {
+ *   // if the left control key and the letter C key are pressed, do some action
+ * }
+ * ```
+ */
+declare class Keyboard {
+    /**
+     * The current pressed key codes
+     */
+    pressedKeys: string[];
+    /**
+     * Returns TRUE if the given key is being pressed.
+     * @see [KeyboardEvent: code property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+     * @param keyCode The code of the key to check
+     * @returns TRUE true for pressed, FALSE instead
+     */
+    isPressed(keyCode: string): boolean;
+    /**
+     * Returns TRUE if one of the given keys is being pressed.
+     * @see [KeyboardEvent: code property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+     * @param keyCodes The codes of the keys to check
+     * @returns TRUE for pressed, FALSE instead
+     */
+    orPressed(keyCodes: string[]): boolean;
+    /**
+     * Returns TRUE if all the given keys are being pressed.
+     * @see [KeyboardEvent: code property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+     * @param keyCodes The codes of the keys to check
+     * @returns TRUE for pressed, FALSE instead
+     */
+    andPressed(keyCodes: string[]): boolean;
+    /**
+     * This method accepts two parameters that will be returned depending on whether the key is pressed or not.
+     * @see [KeyboardEvent: code property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+     * @param keyCode The code of the key to check
+     * @param returnTrue The value to return if the key is pressed
+     * @param returnFalse The value to return if the key is not pressed
+     * @returns The returnTrue for pressed or the returnFalse instead
+     */
+    isPressedReturn<T>(keyCode: string, returnTrue: T, returnFalse: T): T;
+    /**
+     * This method accepts two parameters that will be returned depending on whether one of the given keys is being pressed.
+     * @see [KeyboardEvent: code property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+     * @param keyCodes The codes of the keys to check
+     * @param returnTrue The value to return if the key is pressed
+     * @param returnFalse The value to return if the key is not pressed
+     * @returns The returnTrue for pressed or the returnFalse instead
+     */
+    orPressedReturn<T>(keyCodes: string[], returnTrue: T, returnFalse: T): T;
+    /**
+     * This method accepts two parameters that will be returned depending on whether all the given keys are being pressed.
+     * @see [KeyboardEvent: code property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+     * @param keyCodes The codes of the keys to check
+     * @param returnTrue The value to return if the key is pressed
+     * @param returnFalse The value to return if the key is not pressed
+     * @returns The returnTrue for pressed or the returnFalse instead
+     */
+    andPressedReturn<T>(keyCodes: string[], returnTrue: T, returnFalse: T): T;
+}
+
+/**
+ * Contains the mouse information in the last frame
+ * @public
+ * @category Input
+ * @example
+ * ```js
+ * const mouse = this.inputManager.mouse;
+ *
+ * if (mouse.positionInViewport.y < 0 && mouse.leftButtonPressed) {
+ *   // if the mouse pointer is below the middle of the screen and left click, do something
+ * }
+ * ```
+ */
+declare class Mouse {
+    /**
+     * TRUE if the left button is being pressed
+     */
+    leftButtonPressed: boolean;
+    /**
+     * TRUE if the scroll button is being pressed
+     */
+    scrollButtonPressed: boolean;
+    /**
+     * TRUE if the right button is beign pressed
+     */
+    rightButtonPressed: boolean;
+    /**
+     * The position of the pointer in the screen view port
+     */
+    positionInViewport: Vector2;
+    /**
+     * TRUE if the mouse moved during the last frame
+     */
+    hasMoved: boolean;
+    /**
+     * The scroll amount of the mouse wheel
+     */
+    wheelScroll: Vector2;
+}
+
+/**
+ * The information about one interaction with the screen
+ * @public
+ * @category Input
+ */
+interface TouchInteraction {
+    /** The interaction position on the screen */
+    positionInViewport: Vector2;
+    /** The area of the interaction represented as a radius of the ellipse */
+    radius: Vector2;
+}
+/**
+ * Contains the information about the touch screen interaction
+ * @public
+ * @category Input
+ * @example
+ * ```js
+ * const touch = this.inputController.touch;
+ *
+ * if (touch.touching) {
+ *   const interaction = touch.interactions[0];
+ * }
+ * ```
+ */
+declare class TouchScreen {
+    /**
+     * TRUE if there is an interaction with the screen
+     */
+    touching: boolean;
+    /**
+     * The information about the interactions with the screen
+     */
+    interactions: TouchInteraction[];
+}
+
+declare class InputManager {
+    readonly keyboard: Keyboard;
+    readonly mouse: Mouse;
+    readonly touchScreen: TouchScreen;
+    readonly gamepads: GamepadController[];
+    constructor();
+}
+
+/**
+ * Manages the properties associated with time.
+ * @public
+ * @category Managers
+ * @example
+ * ```js
+ * // using deltaTime to increment a timer
+ * this.timer += this.timeManager.deltaTime;
+ *
+ * // using physicsDeltaTime within a physics component to move the object it belongs to
+ * this.transform.position.x += speed * this.timeManager.physicsDeltaTime;
+ *
+ * // stop all time-related interactions by setting the scale to zero
+ * this.timeManager.timeScale = 0;
+ * ```
+ */
+declare class TimeManager {
+    /** @internal */
+    readonly fixedGameFramerate: number;
+    /** @internal */
+    readonly fixedGameDeltaTime: number;
+    /** @internal */
+    readonly fixedPhysicsFramerate: number;
+    /** @internal */
+    readonly fixedPhysicsDeltaTime: number;
+    /**
+     * The scale on which time passes. The default value is 1.\
+     * For example, if set to 2, the time will run at twice the speed.\
+     * If set to 0.5, it will run at half the speed.\
+     * If set to 0, everything associated with the time will stop.
+     */
+    timeScale: number;
+    /** The time difference, in seconds, between the last frame of and the current frame recorded by the browser. */
+    browserDeltaTime: number;
+    /** The time difference, in seconds, between the last frame and the current frame, unaffected by the scale. */
+    unscaledDeltaTime: number;
+    /** The time difference, in seconds, between the last physics frame and the current one, unaffected by the scale. */
+    unscaledPhysicsDeltaTime: number;
+    private maxDeltaTime;
+    private thenForGame;
+    private thenForPhysics;
+    private thenForRender;
+    /** The time difference, in seconds, between the last frame and the current frame. */
+    get deltaTime(): number;
+    /** The time difference, in seconds, between the last physics frame and the current one. */
+    get physicsDeltaTime(): number;
+    /** The browser delta time affected by time scale. */
+    get renderDeltaTime(): number;
+    constructor({ physicsFramerate }: GameConfig);
+    /** @internal */
+    updateForRender(time: number): void;
+    /** @internal */
+    updateForGame(time: number): void;
+    /** @internal */
+    updateForPhysics(time: number): void;
+}
+
+declare abstract class GameSystem implements System {
+    protected readonly entityManager: EntityManager;
+    protected readonly assetManager: AssetManager;
+    protected readonly sceneManager: SceneManager;
+    protected readonly timeManager: TimeManager;
+    protected readonly inputManager: InputManager;
+    protected readonly collisionRepository: CollisionRepository;
+    onUpdate(): void;
+}
+
+declare function gameLogicSystem(): (target: SystemType) => void;
+declare function gamePhysicsSystem(): (target: SystemType) => void;
+declare function gamePreRenderSystem(): (target: SystemType) => void;
+
+declare const Symbols: {
+    AssetManager: symbol;
+    CanvasElement: symbol;
+    CollisionRepository: symbol;
+    EntityManager: symbol;
+    GameConfig: symbol;
+    InputManager: symbol;
+    SceneManager: symbol;
+    SystemManager: symbol;
+    TimeManager: symbol;
+};
+
+export { Animation, type AnimationSlice, Animator, type AnimatorOptions, AssetManager, AudioPlayer, type AudioPlayerAction, type AudioPlayerOptions, BallCollider, type BallColliderOptions, BoxCollider, type BoxColliderOptions, BroadPhaseMethods, Button, type ButtonOptions, ButtonShape, Camera, type CameraOptions, Children, type Chunk, Circumference, type Collider, type Collision, type CollisionMatrix, CollisionMethods, CollisionRepository, type CollisionResolution, type Component, type ComponentType, EdgeCollider, type EdgeColliderOptions, type Entity, EntityManager, Game, type GameConfig, GameSystem, GamepadController, InputManager, Keyboard, type Light, LightRenderer, type LightRendererOptions, MaskRenderer, type MaskRendererOptions, MaskShape, Mouse, Parent, Polygon, PolygonCollider, type PolygonColliderOptions, Rectangle, RigidBody, type RigidBodyOptions, RigidBodyType, Scene, SceneManager, type SceneType, type SearchCriteria, type SearchResult, ShadowRenderer, type ShadowRendererOptions, type Shape, type Slice, SpriteRenderer, type SpriteRendererOptions, Symbols, type System, type SystemGroup, SystemManager, type SystemType, TextOrientation, TextRenderer, type TextRendererOptions, type TiledChunk, type TiledLayer, type TiledObject, type TiledObjectLayer, type TiledProperty, type TiledTilemap, TiledWrapper, type TiledWrapperOptions, TilemapCollider, type TilemapColliderOptions, TilemapOrientation, TilemapRenderer, type TilemapRendererOptions, type Tileset, TimeManager, type TouchInteraction, TouchScreen, Transform, type TransformOptions, Vector2, type VibrationInput, VideoRenderer, type VideoRendererOptions, between, clamp, defaultRenderLayer, fixedRound, gameLogicSystem, gamePhysicsSystem, gamePreRenderSystem, inject, injectable, randomFloat, randomInt, range };