angry-pixel 2.1.2 → 2.1.4

package/lib/index.d.ts

@@ -27,7 +27,9 @@ declare class Container {
     has(name: DependencyName): boolean;
 }
 /**
- * Decorator to identify a class as an injectable dependency
+ * Decorator to mark a class as an injectable dependency that can be managed by the IoC container.\
+ * Injectable classes can be automatically instantiated and have their dependencies resolved when requested through the container.\
+ * This enables dependency injection and inversion of control.
  * @param name the name to identify the dependency
  * @public
  * @category Decorators
@@ -39,7 +41,8 @@ declare class Container {
  */
 declare function injectable(name: DependencyName): (target: DependencyType) => void;
 /**
- * Decorator to identify a property, or constructor argument, as a dependency to be injected
+ * Decorator to mark a property or constructor parameter as a dependency that should be automatically injected by the IoC container.\
+ * When applied to a property or constructor parameter, the container will resolve and inject the specified dependency at runtime.
  * @param name the name to identify the dependency
  * @public
  * @category Decorators
@@ -63,7 +66,10 @@ declare function injectable(name: DependencyName): (target: DependencyType) => v
 declare function inject(name: DependencyName): (target: any, propertyKey?: PropertyKey, parameterIndex?: number) => void;
 
 /**
- * Represents a 2D vector and provides static methods for vector calculations.
+ * Represents a two-dimensional vector with x and y components.\
+ * Provides static methods for common vector operations
+ * like addition, subtraction, scaling, dot product, cross product, normalization and more.\
+ * Used throughout the engine for storing 2D positions, directions, velocities and other vector quantities.
  * @category Math
  * @public
  * @example
@@ -305,9 +311,33 @@ declare class Vector2 {
 }
 
 /**
- * Represents an axis aligned rectangle
+ * Represents an axis-aligned bounding rectangle (AABR) defined by position, width and height.
+ * The position represents the bottom-left corner of the rectangle.\
+ * Provides methods and properties for manipulating and querying the rectangle's geometry.
  * @category Math
  * @public
+ * @example
+ * ```js
+ * const rect = new Rectangle(0, 0, 100, 100);
+ * rect.width // 100
+ * rect.height // 100
+ *
+ * rect.x // 0
+ * rect.y // 0
+ *
+ * rect.x1 // 100
+ * rect.y1 // 100
+ *
+ * rect.center // { x: 50, y: 50 }
+ *
+ * rect.intersects(new Rectangle(50, 50, 100, 100)) // true
+ *
+ * rect.contains(new Vector2(50, 50)) // true
+ *
+ * rect.contains(new Rectangle(100, 100, 100, 100)) // false
+ *
+ * rect.toString() // "(0, 0, 100, 100)"
+ * ```
  */
 declare class Rectangle {
     width: number;
@@ -371,7 +401,9 @@ declare class Rectangle {
 }
 
 /**
- * Clamps the given value between the given minimum and maximum values.
+ * Constrains a number to be within a specified range by clamping it between a minimum and maximum value.\
+ * If the value is less than the minimum, returns the minimum. If greater than the maximum, returns the maximum.\
+ * Otherwise returns the original value unchanged.
  * @category Math
  * @public
  * @param value number to clamp
@@ -386,7 +418,8 @@ declare class Rectangle {
  */
 declare const clamp: (value: number, min: number, max: number) => number;
 /**
- * Returns a random integer number between the given minimum and maximum values.
+ * Returns a random integer number between the given minimum (inclusive) and maximum (inclusive) values.\
+ * Uses Math.random() internally to generate the random number, then rounds and scales it to fit the desired range.
  * @category Math
  * @public
  * @param min min value
@@ -399,7 +432,8 @@ declare const clamp: (value: number, min: number, max: number) => number;
  */
 declare const randomInt: (min: number, max: number) => number;
 /**
- * Returns a random float number between the given minimum and maximum values.
+ * Returns a random floating point number between the given minimum (inclusive) and maximum (inclusive) values.\
+ * Uses Math.random() internally to generate the random number and can be rounded to a specified number of decimal places.
  * @category Math
  * @public
  * @param min min value
@@ -413,7 +447,9 @@ declare const randomInt: (min: number, max: number) => number;
  */
 declare const randomFloat: (min: number, max: number, decimals?: number) => number;
 /**
- * Corrects a floating number to a given number of decimal places.
+ * Rounds a floating point number to a specified number of decimal places.\
+ * Uses Math.round() internally to avoid floating point precision errors that can occur with direct decimal arithmetic.\
+ * For example, 5.2345 rounded to 2 decimal places becomes 5.23.
  * @category Math
  * @public
  * @param value the value to round
@@ -426,7 +462,9 @@ declare const randomFloat: (min: number, max: number, decimals?: number) => numb
  */
 declare const fixedRound: (value: number, decimals: number) => number;
 /**
- * Generate an array with a range of numbers.
+ * Generates an array containing a sequence of numbers from start to end (inclusive) with optional step size.\
+ * For example, range(0,5) produces [0,1,2,3,4,5] and range(0,10,2) produces [0,2,4,6,8,10].\
+ * Useful for creating numeric sequences and iteration ranges.
  * @category Math
  * @public
  * @param start the starting value
@@ -441,7 +479,9 @@ declare const fixedRound: (value: number, decimals: number) => number;
  */
 declare const range: (start: number, end: number, steps?: number) => number[];
 /**
- * Evaluates whether the given value is between the minimum and the maximum (both inclusive).
+ * Checks if a number falls within a specified range (inclusive of both minimum and maximum bounds).\
+ * Returns true if the value is greater than or equal to the minimum and less than or equal to the maximum.\
+ * Useful for range checking, input validation, and boundary testing.
  * @category Math
  * @public
  * @param value number to compare
@@ -456,7 +496,8 @@ declare const range: (start: number, end: number, steps?: number) => number[];
  */
 declare const between: (value: number, min: number, max: number) => boolean;
 /**
- * Converts the given radians to degrees.
+ * Converts an angle from radians to degrees by multiplying by (180/π).\
+ * Useful for converting between angular measurement systems and displaying angles in a more human-readable format.
  * @param radians
  * @returns degrees
  * @category Math
@@ -468,7 +509,8 @@ declare const between: (value: number, min: number, max: number) => boolean;
  */
 declare const radiansToDegrees: (radians: number) => number;
 /**
- * Converts the given degrees to radians.
+ * Converts an angle from degrees to radians by multiplying by (π/180).\
+ * Useful for converting between angular measurement systems and performing trigonometric calculations.
  * @param degrees
  * @returns radians
  * @category Math
@@ -480,7 +522,9 @@ declare const radiansToDegrees: (radians: number) => number;
  */
 declare const degreesToRadians: (degrees: number) => number;
 /**
- * Convert RGB to HEX as string
+ * Converts RGB color values to a hexadecimal color string.\
+ * Takes red, green and blue color components (0-255) and returns a hex color code.\
+ * Useful for converting between color formats and generating color strings for CSS/HTML.
  * @param rgb
  * @param prefix default is "#"
  * @returns string
@@ -569,7 +613,16 @@ declare enum BroadPhaseMethods {
 }
 
 /**
- * Contains information about the collision
+ * Contains detailed information about a collision between two shapes, including the penetration depth
+ * and direction vector. Used to determine how to resolve and separate colliding objects.
+ * @example
+ * ```typescript
+ * // Example collision resolution between two shapes
+ * const resolution: CollisionResolution = {
+ *   penetration: 5, // Shapes overlap by 5 pixels
+ *   direction: new Vector2(1, 0) // Collision along X axis
+ * };
+ * ```
  * @public
  * @category Collisions
  */
@@ -599,7 +652,8 @@ declare enum CollisionMethods {
 }
 
 /**
- * Interface implemented by the collider components
+ * Interface defining a collider component that handles collision detection and physics interactions.
+ * Colliders define shapes, layers, and physics properties for game objects that can collide.
  * @public
  * @category Collisions
  */
@@ -617,29 +671,48 @@ interface Collider {
 }
 
 /**
- * This type an unique identifier of an Entity
+ * This type represents a unique numeric identifier for an Entity in the ECS system
  * @public
  * @category Entity-Component-System
  */
 type Entity = number;
 /**
- * This type represents an instance of a component
+ * This type represents an instance of a component in the ECS system.\
+ * Components are data containers that can be attached to entities\
+ * to define their properties and state.\
+ * They are implemented as plain objects with key-value pairs.
  * @public
  * @category Entity-Component-System
+ * @example
+ * ```typescript
+ * class PlayerComponent {
+ *   health: number;
+ *   speed: number;
+ * }
+ * ```
  */
-type Component = {
-    [key: string]: any;
-};
+type Component = Record<string, any>;
 /**
- * This type represents a component class
+ * This type represents a constructor function for creating component instances.\
+ * Component classes define the structure and behavior of components that can be attached to entities.\
+ * They serve as templates/factories for creating component instances with consistent properties and methods.
  * @public
  * @category Entity-Component-System
+ * @example
+ * ```typescript
+ * class PlayerComponent {
+ *   health: number;
+ *   speed: number;
+ * }
+ * ```
  */
 type ComponentType<T extends Component = Component> = {
     new (...args: any[]): T;
 };
 /**
- * This type represents a search result object
+ * This type represents a search result object containing an entity and its matching component.\
+ * Used when searching for entities with specific components and criteria.\
+ * The generic type T extends Component to provide type safety for the returned component.
  * @public
  * @category Entity-Component-System
  */
@@ -648,35 +721,57 @@ type SearchResult<T extends Component> = {
     component: T;
 };
 /**
- * This type represents a search criteria object
- * @public
- * @category Entity-Component-System
- */
-type SearchCriteria = {
-    [key: string]: any;
-};
-/**
- * This type represents an Entity Archetype
+ * This type represents an Entity Archetype, which defines a template for creating entities with a specific set of components.\
+ * It specifies which components should be attached to the entity, whether the entity should be enabled/disabled,\
+ * and can include child archetypes to create hierarchical entity structures.
  * @public
  * @category Entity-Component-System
+ * @example
+ * ```typescript
+ * // Define an archetype for a player entity with multiple components
+ * const playerArchetype: Archetype = {
+ *   components: [
+ *     new Transform({position: new Vector2(0, 0)}),
+ *     new Player({health: 100}),
+ *     new SpriteRenderer({sprite: 'player.png'})
+ *   ],
+ * };
+ *
+ * // Define an archetype with disabled components and child entities
+ * const enemyArchetype: Archetype = {
+ *   components: [
+ *     new Transform(),
+ *     new Enemy(),
+ *     disableComponent(new BoxCollider()) // This component starts disabled
+ *   ],
+ *   children: [
+ *     {
+ *       components: [new WeaponMount()],
+ *       enabled: false // This child entity starts disabled
+ *     }
+ *   ],
+ * };
+ * ```
  */
 type Archetype = {
-    components: (ArchetypeComponent | Component)[];
+    components: (Component | ComponentType | DisabledComponent)[];
     children?: Archetype[];
     enabled?: boolean;
 };
 /**
- * This type represents an Entity Archetype Component
+ * This type represents a disabled component
  * @public
  * @category Entity-Component-System
  */
-type ArchetypeComponent<T extends Component = Component> = {
-    type: ComponentType<T>;
-    data?: Partial<T>;
-    enabled?: boolean;
+type DisabledComponent = {
+    enabled: false;
+    component: Component | ComponentType;
 };
 /**
- * This interface is used for the creation of system classes. You will have to inject the dependencies you need manully.
+ * This interface defines the core structure for system classes in the ECS architecture.\
+ * Systems contain the game logic that operates on entities and their components.\
+ * Dependencies like EntityManager can be injected using dependency injection decorators.\
+ * Systems must implement onUpdate() and can optionally implement lifecycle hooks like onCreate(), onDestroy(), onEnabled() and onDisabled().
  * @public
  * @category Entity-Component-System
  * @example
@@ -720,7 +815,9 @@ interface System {
     onUpdate(): void;
 }
 /**
- * This type represents a system class
+ * This type represents a constructor type for System classes.\
+ * It defines the shape of a class that can be instantiated to create System objects.\
+ * Used for type-safe system registration and retrieval in the SystemManager.
  * @public
  * @category Entity-Component-System
  */
@@ -731,10 +828,58 @@ type SystemType<T extends System = System> = {
 type SystemGroup = string | number | symbol;
 
 /**
- * The EntityManager manages the entities and components.\
- * It provides the necessary methods for reading and writing entities and components.
+ * The EntityManager is responsible for managing the lifecycle and relationships of entities and components.\
+ * It provides methods for creating, reading, updating and deleting entities and their associated components.\
+ * Handles parent-child relationships between entities and enables/disables entities and components.\
+ * Acts as the central registry for all game objects and their behaviors.
  * @public
  * @category Entity-Component-System
+ * @example
+ * ```js
+ * // Create an entity with components
+ * const entity = entityManager.createEntity([
+ *   new Transform({position: new Vector2(100, 100)}),
+ *   new SpriteRenderer({sprite: "player.png"})
+ * ]);
+ *
+ * // Get a component from an entity
+ * const transform = entityManager.getComponent(entity, Transform);
+ *
+ * // Get all components from an entity
+ * const components = entityManager.getComponents(entity);
+ *
+ * // Find entity by component
+ * const entityWithSprite = entityManager.getEntityForComponent(spriteRenderer);
+ *
+ * // Update component data
+ * entityManager.updateComponentData(entity, Transform, (component) => {
+ *   component.position = new Vector2(200, 200);
+ * });
+ *
+ * // Create parent-child relationship
+ * const child = entityManager.createEntity([Transform], parent);
+ * // or if you already have the child entity
+ * entityManager.setParent(child, parent);
+ *
+ * // Enable/disable entities
+ * entityManager.disableEntity(entity);
+ * entityManager.enableEntity(entity);
+ *
+ * // Remove components
+ * entityManager.removeComponent(entity, SpriteRenderer);
+ * entityManager.removeComponent(spriteRenderer);
+ *
+ * // Search for entities with specific components
+ * const searchResult = entityManager.search(SpriteRenderer);
+ * searchResult.forEach(({component, entity}) => {
+ *   // do something with the component and entity
+ * })
+ *
+ * const searchResult = entityManager.search(Enemy, (component) => component.status === "alive");
+ * searchResult.forEach(({component, entity}) => {
+ *   // do something with the component and entity
+ * })
+ * ```
  */
 declare class EntityManager {
     private lastEntityId;
@@ -757,85 +902,10 @@ declare class EntityManager {
      */
     createEntity(): Entity;
     /**
-     * Creates an Entity based on an Archetype
-     * @param archetype The Archetype to create the Entity
-     * @return The created Entity
-     * @public
-     * @example
-     * ```js
-     * // Using ArchetypeComponent to define components
-     * const entity = entityManager.createEntity({
-     *   components: [
-     *     {type: Transform, data: {position: new Vector2(100, 100)}},
-     *     {type: SpriteRenderer, data: {image: "images/player.png"}},
-     *     {type: Player},
-     *   ],
-     *   children: [
-     *     {
-     *       components: [
-     *         {type: Transform, data: {position: new Vector2(8, 0)}},
-     *         {type: SpriteRenderer, data: {image: "images/sword.png"}},
-     *         {type: Weapon, data: {damage: 10}},
-     *       ],
-     *     },
-     *     {
-     *       components: [
-     *         {type: Transform, data: {position: new Vector2(-8, 0)}},
-     *         {type: SpriteRenderer, data: {image: "images/shield.png"}},
-     *         {type: Shield, data: {defense: 5}, enabled: false},
-     *       ],
-     *     },
-     *     {
-     *       components: [
-     *         {type: Transform, data: {position: new Vector2(8, 0)}},
-     *         {type: SpriteRenderer, data: {image: "images/staf.png"}},
-     *         {type: Staff, data: {mana: 5}},
-     *       ],
-     *       enabled: false,
-     *     }
-     *   ]
-     * });
-     * ```
-     * @example
-     * ```js
-     * // Using Component instances as templates
-     * const entity = entityManager.createEntity({
-     *   components: [
-     *     new Transform({position: new Vector2(100, 100)}),
-     *     new SpriteRenderer({image: "images/player.png"}),
-     *     new Player(),
-     *   ],
-     *   children: [
-     *     {
-     *       components: [
-     *         new Transform({position: new Vector2(8, 0)}),
-     *         new SpriteRenderer({image: "images/sword.png"}),
-     *         new Weapon({damage: 10}),
-     *       ],
-     *     },
-     *     {
-     *       components: [
-     *         new Transform({position: new Vector2(-8, 0)}),
-     *         new SpriteRenderer({image: "images/shield.png"}),
-     *         new Shield({defense: 5}),
-     *       ],
-     *     },
-     *     {
-     *       components: [
-     *         new Transform({position: new Vector2(8, 0)}),
-     *         new SpriteRenderer({image: "images/staf.png"}),
-     *         new Staff({mana: 5}),
-     *       ],
-     *       enabled: false,
-     *     }
-     *   ]
-     * });
-     * ```
-     */
-    createEntity(archetype: Archetype): Entity;
-    /**
-     * Creates an Entity based on a collection of Component instances and ComponentTypes
+     * Creates an Entity with the given components.\
+     * Since the components are not cloned, the collection of components must not be reused.
      * @param components A collection of component instances and component classes
+     * @param parent The parent entity (optional)
      * @return The created Entity
      * @public
      * @example
@@ -846,32 +916,35 @@ declare class EntityManager {
      * ]);
      * ```
      */
-    createEntity(components: Array<ComponentType | Component>, parent?: Entity): Entity;
-    private createEntityFromComponents;
-    private createEntityFromArchetype;
+    createEntity(components: (ComponentType | Component)[], parent?: Entity): Entity;
     /**
-     * Creates multiple entities based on an array of component collections
-     * @param componentsList An array of collections of component instances and component classes
-     * @return An array with the created entities, in the same order of the collections of components
+     * Creates an Entity based on an Archetype.\
+     * Since the components are cloned, the archetype can be reused to create multiple entities.
+     * @param archetype The archetype to create the entity from
+     * @param parent The parent entity (optional)
+     * @returns The created Entity
      * @public
      * @example
      * ```js
-     * const player =  [
-     *   new Transform({position: new Vector2(100, 100)}),
-     *   SpriteRenderer,
-     *   Player
-     * ];
-     *
-     * const enemy =  [
-     *   new Transform({position: new Vector2(-100, 100)}),
-     *   SpriteRenderer,
-     *   Enemy
-     * ];
-     *
-     * const entities = entityManager.createEntities([player, enemy]);
+     * const archetype = {
+     *   components: [
+     *     new Transform({position: new Vector2(100, 100)}),
+     *     SpriteRenderer
+     *   ],
+     *   children: [childArchetype],
+     *   enabled: true
+     * }
+     * const entity = entityManager.createEntityFromArchetype(archetype);
      * ```
      */
-    createEntities(componentsList: Array<ComponentType | Component>[]): Entity[];
+    createEntityFromArchetype({ components, children, enabled }: Archetype, parent?: Entity): Entity;
+    /**
+     * Creates components from an archetype
+     * @param components The components to create
+     * @param entity The entity to create the components for
+     * @private
+     */
+    private createComponentsFromArchetype;
     /**
      * Removes an Entity and all its Components
      * @param entity The entity to remove
@@ -1074,6 +1147,20 @@ declare class EntityManager {
      * ```
      */
     getComponents(entity: Entity): Component[];
+    /**
+     * Updates the data of a component instance
+     * @param entity The entity
+     * @param componentType The component type
+     * @param updateCallback The callback to update the component
+     * @public
+     * @example
+     * ```js
+     * entityManager.updateComponentData(entity, Transform, (component) => {
+     *   component.position = new Vector2(100, 100);
+     * });
+     * ```
+     */
+    updateComponentData<T extends Component = Component>(entity: Entity, componentType: ComponentType<T>, updateCallback: (component: T) => void): void;
     /**
      * Searches for and returns an entity for the component instance
      * @param component The component instance
@@ -1186,10 +1273,10 @@ declare class EntityManager {
     /**
      * Performs a search for entities given a component type.\
      * This method returns a collection of objects of type SearchResult, which has the entity found, and the instance of the component.\
-     * This search can be filtered by passing as a second argument an instance of SearchCriteria, which performs a match between the attributes of the component and the given value.\
+     * This search can be filtered by passing as a second argument a filter function.\
      * The third argument determines if disabled entities or components are included in the search result,\its default value is FALSE.
      * @param componentType The component class
-     * @param criteria The search criteria
+     * @param filter The filter function
      * @param includeDisabled TRUE to incluide disabled entities and components, FALSE otherwise
      * @returns SearchResult
      * @public
@@ -1202,20 +1289,21 @@ declare class EntityManager {
      * ```
      * @example
      * ```js
-     * const searchResult = entityManager.search(Enemy, {status: "alive"});
+     * const searchResult = entityManager.search(Enemy, (component) => component.status === "alive");
      * searchResult.forEach(({component, entity}) => {
      *   // do something with the component and entity
      * })
      * ```
      * @example
      * ```js
-     * const searchResult = entityManager.search(Enemy, {status: "dead"}, true);
+     * // include disabled entities and components
+     * const searchResult = entityManager.search(Enemy, (component) => component.status === "dead", true);
      * searchResult.forEach(({component, entity}) => {
      *   // do something with the component and entity
      * })
      * ```
      */
-    search<T extends Component>(componentType: ComponentType<T>, criteria?: SearchCriteria, includeDisabled?: boolean): SearchResult<T>[];
+    search<T extends Component>(componentType: ComponentType<T>, filter?: (component: T, entity?: Entity) => boolean, includeDisabled?: boolean): SearchResult<T>[];
     /**
      * Performs a search for entities given a component type.\
      * This method returns a collection of objects of type SearchResult, which has the entity found, and the instance of the component.\
@@ -1233,6 +1321,7 @@ declare class EntityManager {
      * ```
      * @example
      * ```js
+     * // include disabled entities and components
      * const searchResult = entityManager.search(Enemy, true);
      * searchResult.forEach(({component, entity}) => {
      *   // do something with the component and entity
@@ -1282,8 +1371,10 @@ declare class EntityManager {
 }
 
 /**
- * The SystemManager manages the systems.\
- * It provides the necessary methods for reading and writing systems.
+ * The SystemManager is responsible for managing the lifecycle and execution of game systems.\
+ * It provides methods for adding, enabling, disabling and retrieving systems that operate on entities and components.\
+ * Systems are organized into groups to control their execution order and update frequency.\
+ * Acts as the central orchestrator for all game logic and behavior processing.
  * @public
  * @category Entity-Component-System
  */
@@ -1376,7 +1467,35 @@ declare class SystemManager {
 }
 
 /**
- * Represent a collision. It contains the colliders involved, the entities, and the resolution data.
+ * Creates a disabled component
+ * @param component The component to disable
+ * @returns The disabled component
+ * @category Entity-Component-System
+ * @public
+ * @example
+ * ```js
+ * const disabledTransform = disableComponent(Transform);
+ * ```
+ */
+declare const disableComponent: (component: Component | ComponentType) => DisabledComponent;
+
+/**
+ * Represents a collision between two entities in the game world. It contains information about the colliding entities,
+ * their collider components, and resolution data for handling the collision response.
+ * @example
+ * ```typescript
+ * // Example collision between player and enemy
+ * const collision: Collision = {
+ *   localEntity: playerEntity,
+ *   localCollider: playerCollider,
+ *   remoteEntity: enemyEntity,
+ *   remoteCollider: enemyCollider,
+ *   resolution: {
+ *     normal: new Vector2(1, 0),
+ *     depth: 5
+ *   }
+ * };
+ * ```
  * @category Collisions
  * @public
  */
@@ -1409,9 +1528,25 @@ interface Collision {
 }
 
 /**
- * The CollisionRepository has the necessary methods to perform queries on the current collisions
+ * The CollisionRepository stores and manages collision data between colliders.
+ * It provides methods for querying collisions by collider and layer,
+ * and handles persisting/removing collision records.
  * @public
  * @category Collisions
+ * @example
+ * ```typescript
+ * // Get all collisions for a collider
+ * const collisions = collisionRepository.findCollisionsForCollider(playerCollider);
+ *
+ * // Get collisions between player and enemies
+ * const enemyCollisions = collisionRepository.findCollisionsForColliderAndLayer(
+ *   playerCollider,
+ *   "enemy"
+ * );
+ *
+ * // Get all current collisions
+ * const allCollisions = collisionRepository.findAll();
+ * ```
  */
 declare class CollisionRepository {
     private collisions;
@@ -1448,7 +1583,10 @@ declare class CollisionRepository {
 type CollisionMatrix = [string, string][];
 
 /**
- * Game configuration options
+ * Configuration options for initializing and customizing game behavior.
+ * Includes settings for canvas dimensions, debug visualization, physics simulation,
+ * collision detection, and dependency injection.\
+ * Required for creating a new Game instance.
  * @public
  * @category Config
  *  @example
@@ -1524,7 +1662,9 @@ declare class CreateSystemService {
 }
 
 /**
- * Manages the asset loading (images, fonts, audios, videos).
+ * Manages loading and retrieval of game assets including images, fonts, audio files, videos and JSON data.\
+ * Provides methods to load assets asynchronously and check their loading status.\
+ * Assets can be referenced by URL or optional name identifiers.
  * @public
  * @category Managers
  * @example
@@ -1533,12 +1673,14 @@ declare class CreateSystemService {
  * this.assetManager.loadAudio("audio.ogg");
  * this.assetManager.loadVideo("video.mp4");
  * this.assetManager.loadFont("custom-font", "custom-font.ttf");
+ * this.assetManager.loadJson("data.json");
  *
  * 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");
- *
+ * const jsonData = this.assetManager.getJson("data.json");
+
  * if (this.assetManager.getAssetsLoaded()) {
  *   // do something when assets are loaded
  * }
@@ -1645,18 +1787,37 @@ declare class AssetManager {
 }
 
 /**
- * Options for setting an interval.
+ * Options for configuring an interval timer.
+ * @property {Function} callback - The function to execute at each interval
+ * @property {number} delay - The time in milliseconds between each execution
+ * @property {number} [times] - Optional number of times to execute before auto-clearing. Omit for infinite execution.
+ * @property {boolean} [executeImmediately] - Whether to execute the callback immediately before starting the interval timer
  * @public
  * @category Managers
+ * @example
+ * ```ts
+ * const intervalId = timeManager.setInterval({
+ *     callback: () => console.log("Will be called 5 times!"),
+ *     delay: 1000,
+ *     times: 5,
+ * });
+ * ```
  */
 type IntervalOptions = {
+    /** The function to execute at each interval */
     callback: () => void;
+    /** The time in milliseconds between each execution */
     delay: number;
+    /** Optional number of times to execute before auto-clearing. Omit for infinite execution. */
     times?: number;
+    /** Whether to execute the callback immediately before starting the interval timer */
     executeImmediately?: boolean;
 };
 /**
- * Manages the properties associated with time.
+ * Manages the properties associated with time.\
+ * Provides methods to set intervals, clear intervals, and manage time scaling.\
+ * Manages the fixed game framerate and physics framerate.\
+ * Manages the fixed game delta time and physics delta time.
  * @public
  * @category Managers
  * @example
@@ -1784,13 +1945,17 @@ declare class TimeManager {
 /**
  * This type represents a scene class
  * @public
- * @category Core
+ * @category Managers
  */
 type SceneType<T extends Scene = Scene> = {
     new (entityManager: EntityManager, assetManager: AssetManager): T;
 };
 /**
- * Base class for all game scenes
+ * Base class for all game scenes.\
+ * Provides core functionality for loading assets, registering systems, and setting up entities.\
+ * Scenes are the main organizational unit for game states and levels.\
+ * Each scene has access to the EntityManager for creating/managing entities and the AssetManager
+ * for loading and accessing game resources.
  * @public
  * @category Core
  * @example
@@ -1826,7 +1991,9 @@ declare abstract class Scene {
     setup(): void;
 }
 /**
- * Manges the loading of the scenes.
+ * Manages scene loading, transitions and lifecycle.\
+ * Provides methods to register scenes, load scenes by name, and handles the opening scene.\
+ * Ensures proper cleanup between scene transitions and maintains scene state.
  * @public
  * @category Managers
  * @example
@@ -1859,11 +2026,17 @@ declare class SceneManager {
 }
 
 /**
- * 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.
+ * The Game class is the core entry point for creating and managing a game instance.\
+ * It serves as a central hub that coordinates all game systems including scenes, entities,
+ * components, and various managers (rendering, physics, input, etc.).\
+ * The class provides methods to initialize the game with custom configuration, add scenes
+ * and dependencies, and control the game loop execution.\
+ * Through dependency injection, it ensures proper initialization and communication between all game systems.
  * @public
  * @category Core
  * @example
  * ```js
+ * // Basic game setup with minimal configuration
  * const game = new Game({
  *   containerNode: document.getElementById("app"),
  *   width: 1920,
@@ -1874,6 +2047,7 @@ declare class SceneManager {
  * ```
  * @example
  * ```js
+ * // Advanced game setup with custom physics and collision settings
  * const game = new Game({
  *   containerNode: document.getElementById("app"),
  *   width: 1920,
@@ -1934,8 +2108,35 @@ declare class Game {
 }
 
 /**
+ * Animator component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const walkAnimation = new Animation({
+ *   image: "walk.png",
+ *   slice: { size: new Vector2(32, 32) },
+ *   fps: 12,
+ *   loop: true
+ * });
+ *
+ * const idleAnimation = new Animation({
+ *   image: "idle.png",
+ *   slice: { size: new Vector2(32, 32) },
+ *   fps: 8,
+ *   loop: true
+ * });
+ *
+ * const animator = new Animator({
+ *   animations: new Map([
+ *     ["walk", walkAnimation],
+ *     ["idle", idleAnimation]
+ *   ]),
+ *   animation: "idle",
+ *   speed: 1,
+ *   playing: true
+ * });
+ * ```
  */
 interface AnimatorOptions {
     animations: Map<string, Animation>;
@@ -1944,8 +2145,36 @@ interface AnimatorOptions {
     playing: boolean;
 }
 /**
+ * The Animator component manages sprite animations. It holds a map of named animations
+ * and controls which animation is currently playing, its speed, and playback state.
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const walkAnimation = new Animation({
+ *   image: "walk.png",
+ *   slice: { size: new Vector2(32, 32) },
+ *   fps: 12,
+ *   loop: true
+ * });
+ *
+ * const idleAnimation = new Animation({
+ *   image: "idle.png",
+ *   slice: { size: new Vector2(32, 32) },
+ *   fps: 8,
+ *   loop: true
+ * });
+ *
+ * const animator = new Animator({
+ *   animations: new Map([
+ *     ["walk", walkAnimation],
+ *     ["idle", idleAnimation]
+ *   ]),
+ *   animation: "idle",
+ *   speed: 1,
+ *   playing: true
+ * });
+ * ```
  */
 declare class Animator {
     animations: Map<string, Animation>;
@@ -1957,23 +2186,95 @@ declare class Animator {
     currentTime: number;
     /**  @internal */
     _currentAnimation: string;
+    /**  @internal */
+    _assetsReady: boolean;
     constructor(options?: Partial<AnimatorOptions>);
 }
 /**
+ * Animation configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const walkAnimation = new Animation({
+ *   image: "walk.png",
+ *   slice: { size: new Vector2(32, 32) },
+ *   fps: 12,
+ *   loop: true
+ * });
+ *
+ * const idleAnimation = new Animation({
+ *   image: "idle.png",
+ *   slice: { size: new Vector2(32, 32) },
+ *   fps: 8,
+ *   loop: true
+ * });
+ *
+ * const animator = new Animator({
+ *   animations: new Map([
+ *     ["walk", walkAnimation],
+ *     ["idle", idleAnimation]
+ *   ]),
+ *   animation: "idle",
+ *   speed: 1,
+ *   playing: true
+ * });
+ * ```
+ */
+interface AnimationOptions {
+    image: HTMLImageElement | HTMLImageElement[] | string | string[];
+    slice?: {
+        size: Vector2;
+        offset?: Vector2;
+        padding?: Vector2;
+    };
+    frames?: number[];
+    fps?: number;
+    loop?: boolean;
+}
+/**
+ * Animation class used to configure sprite animations. It defines properties like the source image(s),
+ * slice dimensions for sprite sheets, frame sequence, playback speed and looping behavior.
+ * @public
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const walkAnimation = new Animation({
+ *   image: "walk.png",
+ *   slice: { size: new Vector2(32, 32) },
+ *   fps: 12,
+ *   loop: true
+ * });
+ *
+ * const idleAnimation = new Animation({
+ *   image: "idle.png",
+ *   slice: { size: new Vector2(32, 32) },
+ *   fps: 8,
+ *   loop: true
+ * });
+ *
+ * const animator = new Animator({
+ *   animations: new Map([
+ *     ["walk", walkAnimation],
+ *     ["idle", idleAnimation]
+ *   ]),
+ *   animation: "idle",
+ *   speed: 1,
+ *   playing: true
+ * });
+ * ```
  */
 declare class Animation {
-    image: HTMLImageElement | HTMLImageElement[];
+    image: HTMLImageElement | HTMLImageElement[] | string | string[];
     slice: AnimationSlice;
     frames: number[];
     fps: number;
     loop: boolean;
-    constructor(options?: Partial<Animation>);
+    constructor(options?: AnimationOptions);
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 type AnimationSlice = {
     size: Vector2;
@@ -1982,14 +2283,24 @@ type AnimationSlice = {
 };
 
 /**
+ * AudioPlayer component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const audioPlayer = new AudioPlayer({
+ *   audioSource: "sound.mp3",
+ *   volume: 0.5,
+ *   loop: true,
+ *   fixedToTimeScale: false
+ * });
+ * ```
  */
 interface AudioPlayerOptions {
     /** The action to perform with the audio source. */
     action: AudioPlayerAction;
     /** The audio source to play. */
-    audioSource: HTMLAudioElement;
+    audioSource: HTMLAudioElement | string;
     /** TRUE If the playback rate is fixed to the TimeManager time scale, default FALSE */
     fixedToTimeScale: boolean;
     /** TRUE If the audio source should loop. */
@@ -1998,14 +2309,25 @@ interface AudioPlayerOptions {
     volume: number;
 }
 /**
+ * The AudioPlayer component handles audio playback in the game. It manages playing, pausing and stopping audio sources,
+ * controls volume and looping behavior, and can optionally sync playback speed with the game's time scale.
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const audioPlayer = new AudioPlayer({
+ *   audioSource: "sound.mp3",
+ *   volume: 0.5,
+ *   loop: true,
+ *   fixedToTimeScale: false
+ * });
+ * ```
  */
 declare class AudioPlayer {
     /** The action to perform with the audio source. This action will be erased at the end of the frame */
     action: AudioPlayerAction;
     /** The audio source to play. */
-    audioSource: HTMLAudioElement;
+    audioSource: HTMLAudioElement | string;
     /** TRUE If the playback rate is fixed to the TimeManager time scale, default FALSE */
     fixedToTimeScale: boolean;
     /** TRUE If the audio source should loop. */
@@ -2040,18 +2362,31 @@ declare class AudioPlayer {
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 type AudioPlayerAction = "stop" | "play" | "pause";
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 type AudioPlayerState = "stopped" | "playing" | "paused";
 
 /**
+ * Button component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const button = new Button({
+ *   shape: ButtonShape.Rectangle,
+ *   width: 100,
+ *   height: 50,
+ *   offset: new Vector2(0, 0),
+ *   touchEnabled: true,
+ *   onClick: () => console.log("Button clicked!"),
+ *   onPressed: () => console.log("Button pressed!")
+ * });
+ * ```
  */
 interface ButtonOptions {
     shape: ButtonShape;
@@ -2064,8 +2399,23 @@ interface ButtonOptions {
     onPressed: () => void;
 }
 /**
+ * The Button component creates an interactive button that can be clicked or pressed.\
+ * It supports rectangular or circular shapes and can be configured with dimensions,
+ * position offset, touch input, and click/press event handlers.
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const button = new Button({
+ *   shape: ButtonShape.Rectangle,
+ *   width: 100,
+ *   height: 50,
+ *   offset: new Vector2(0, 0),
+ *   touchEnabled: true,
+ *   onClick: () => console.log("Button clicked!"),
+ *   onPressed: () => console.log("Button pressed!")
+ * });
+ * ```
  */
 declare class Button {
     /** The shape of the button */
@@ -2092,7 +2442,7 @@ declare class Button {
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 declare enum ButtonShape {
     Rectangle = 0,
@@ -2100,25 +2450,56 @@ declare enum ButtonShape {
 }
 
 /**
+ * TiledWrapper component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const tiledWrapper = new TiledWrapper({
+ *   tilemap: "tilemap.json",
+ *   layerToRender: "Ground"
+ * });
+ *
+ * const tiledWrapper = new TiledWrapper({
+ *   tilemap: assetManager.getJson("tilemap.json"),
+ *   layerToRender: "Ground"
+ * });
+ * ```
  */
 interface TiledWrapperOptions {
-    tilemap: TiledTilemap;
+    tilemap: TiledTilemap | string;
     layerToRender: string;
 }
 /**
+ * The TiledWrapper component wraps a Tiled map editor tilemap and handles rendering a specific layer.\
+ * It provides an interface between Tiled's map format and the engine's tilemap rendering system.
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const tiledWrapper = new TiledWrapper({
+ *   tilemap: {
+ *     width: 10,
+ *     height: 10,
+ *     infinite: false,
+ *     layers: [],
+ *     renderorder: "right-down",
+ *     tilesets: [{ firstgid: 1 }],
+ *     tilewidth: 32,
+ *     tileheight: 32
+ *   },
+ *   layerToRender: "Ground"
+ * });
+ * ```
  */
 declare class TiledWrapper {
-    tilemap: TiledTilemap;
+    tilemap: TiledTilemap | string;
     layerToRender: string;
     constructor(options?: Partial<TiledWrapperOptions>);
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 interface TiledTilemap {
     width: number;
@@ -2135,7 +2516,7 @@ interface TiledTilemap {
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 interface TiledChunk {
     data: number[];
@@ -2147,7 +2528,7 @@ interface TiledChunk {
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 interface TiledLayer {
     name: string;
@@ -2170,7 +2551,7 @@ interface TiledLayer {
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 interface TiledObjectLayer {
     draworder: string;
@@ -2186,7 +2567,7 @@ interface TiledObjectLayer {
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 interface TiledObject {
     gid: number;
@@ -2211,7 +2592,7 @@ interface TiledObject {
 }
 /**
  * @public
- * @category Components
+ * @category Components Configuration
  */
 interface TiledProperty {
     name: string;
@@ -2220,8 +2601,17 @@ interface TiledProperty {
 }
 
 /**
+ * Transform component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const transform = new Transform({
+ *   position: new Vector2(100, 100),
+ *   scale: new Vector2(2, 2),
+ *   rotation: Math.PI / 4
+ * });
+ * ```
  */
 interface TransformOptions {
     position: Vector2;
@@ -2229,8 +2619,20 @@ interface TransformOptions {
     rotation: number;
 }
 /**
+ * The Transform component defines an entity's position, scale and rotation in the game world.\
+ * It can be nested under a parent transform to create hierarchical relationships, where child
+ * transforms inherit and combine with their parent's transformations.\
+ * The component provides both local and world-space values, and allows selectively ignoring parent transformations.
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const transform = new Transform({
+ *   position: new Vector2(100, 100),
+ *   scale: new Vector2(2, 2),
+ *   rotation: Math.PI / 4
+ * });
+ * ```
  */
 declare class Transform {
     /** Position relative to the zero point of the simulated world, or relative to the parent if it has one */
@@ -2239,11 +2641,17 @@ declare class Transform {
     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 */
+    /** If TRUE, the parent position will be ignored */
+    ignoreParentPosition: boolean;
+    /** If TRUE, the parent scale will be ignored */
+    ignoreParentScale: boolean;
+    /** If TRUE, the parent rotation will be ignored */
+    ignoreParentRotation: boolean;
+    /** READONLY: 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 */
+    /** READONLY: 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 */
+    /** READONLY: The real rotation in the simulated world. It has the same value as `rotation` property if there is no parent */
     localRotation: number;
     /** @internal */
     _awake: boolean;
@@ -2253,9 +2661,9 @@ declare class Transform {
 }
 
 /**
- * Configuration object for BallCollider creation
+ * BallCollider component configuration
  * @public
- * @category Components
+ * @category Components Configuration
  * @example
  * ```js
  * const ballCollider = new BallCollider({
@@ -2280,7 +2688,10 @@ interface BallColliderOptions {
     ignoreCollisionsWithLayers: string[];
 }
 /**
- * Circumference shaped collider for 2d collisions.
+ * The BallCollider component defines a circular collision shape for an entity.\
+ * It can be used for both physics interactions and collision detection.\
+ * The collider's size is determined by its radius, and it can be offset from the entity's position.\
+ * Collision layers allow controlling which objects can collide with each other.
  * @public
  * @category Components
  * @example
@@ -2311,9 +2722,9 @@ declare class BallCollider implements Collider {
 }
 
 /**
- * Configuration object for BoxCollider creation
+ * BoxCollider component configuration
  * @public
- * @category Components
+ * @category Components Configuration
  * @example
  * ```js
  * const boxCollider = new BoxCollider({
@@ -2344,7 +2755,10 @@ interface BoxColliderOptions {
     ignoreCollisionsWithLayers: string[];
 }
 /**
- * Rectangle shaped collider for 2d collisions.
+ * The BoxCollider component defines a rectangular collision shape for an entity.\
+ * It can be used for both physics interactions and collision detection.\
+ * The collider's size is determined by its width and height, and it can be offset and rotated.\
+ * Collision layers allow controlling which objects can collide with each other.
  * @public
  * @category Components
  * @example
@@ -2381,9 +2795,9 @@ declare class BoxCollider implements Collider {
 }
 
 /**
- * Configuration object for EdgeCollider creation
+ * EdgeCollider component configuration
  * @public
- * @category Components
+ * @category Components Configuration
  * @example
  * ```js
  * const edgeCollider = new EdgeCollider({
@@ -2411,7 +2825,10 @@ interface EdgeColliderOptions {
     ignoreCollisionsWithLayers: string[];
 }
 /**
- * Collider composed of lines defined by its vertices, for 2d collisions.
+ * The EdgeCollider component defines a collision shape made up of connected line segments.\
+ * It can be used for both physics interactions and collision detection.\
+ * The collider's shape is determined by a series of vertices that form edges between them.\
+ * The shape can be offset and rotated, and collision layers allow controlling which objects can collide with each other.
  * @public
  * @category Components
  * @example
@@ -2444,9 +2861,9 @@ declare class EdgeCollider implements Collider {
 }
 
 /**
- * Configuration object for PolygonCollider creation
+ * PolygonCollider component configuration
  * @public
- * @category Components
+ * @category Components Configuration
  * @example
  * ```js
  * const polygonCollider = new PolygonCollider({
@@ -2474,7 +2891,11 @@ interface PolygonColliderOptions {
     ignoreCollisionsWithLayers: string[];
 }
 /**
- * Polygon shaped Collider for 2d collisions. Only convex polygons are allowed.
+ * The PolygonCollider component defines a convex polygon-shaped collision area for an entity.\
+ * It can be used for both physics interactions and collision detection.\
+ * The collider's shape is determined by a series of vertices that form a closed convex polygon.\
+ * Note that only convex polygons are supported - concave shapes must be broken into multiple convex polygons.\
+ * The shape can be offset and rotated, and collision layers allow controlling which objects can collide with each other.
  * @public
  * @category Components
  * @example
@@ -2512,7 +2933,7 @@ declare class PolygonCollider implements Collider {
  * - **Dynamic:** This type of body is affected by gravity and velocity and can be moved by other rigid bodies.
  * - **Kinematic:** This type of body is not affected by gravity and cannot be moved by other rigid bodies, but can be velocity applied.
  * - **Static:** This type of body is immobile, is not affected by velocity or gravity and cannot be moved by other rigid bodies.
- * @category Components
+ * @category Components Configuration
  * @public
  */
 declare enum RigidBodyType {
@@ -2523,7 +2944,7 @@ declare enum RigidBodyType {
 /**
  * RigidBody configuration options
  * @public
- * @category Components
+ * @category Components Configuration
  * @example
  * ```js
   const rigidBody = new RigidBody({
@@ -2574,13 +2995,19 @@ interface RigidBodyOptions {
     acceleration: Vector2;
 }
 /**
- * The RigidBody component puts the entity under simulation of the physics engine, where it will interact with other objects that have a RigidBody.\
- * There are three types of bodies:
- * - **Dynamic:** This type of body is affected by gravity and velocity and can be moved by other rigid bodies.
- * - **Kinematic:** This type of body is not affected by gravity and cannot be moved by other rigid bodies, but can be velocity applied.\
- *   This type of body consumes less processing resources than the Dynamic.
- * - **Static:** This type of body is immobile, is not affected by velocity or gravity and cannot be moved by other rigid bodies.\
- *   This is the body type that consumes the least processing resources.
+ * The RigidBody component enables physics simulation for an entity, allowing it to interact with other physics-enabled objects in the game world.\
+ * It defines how the entity behaves under forces like gravity, collisions, and applied velocities. The component supports three types of bodies:
+ *
+ * - **Dynamic:** Fully physics-simulated bodies that respond to forces, collisions, gravity, and can be moved by other rigid bodies.
+ *   Best for objects that need realistic physical behavior like players, projectiles, or items.
+ *
+ * - **Kinematic:** Bodies that can move with applied velocities but are not affected by gravity or collisions from other bodies.
+ *   Ideal for moving platforms, enemies with predefined paths, or objects that need controlled movement without full physics simulation.
+ *   More performance efficient than Dynamic bodies.
+ *
+ * - **Static:** Immobile bodies that act as solid, unmovable obstacles. They don't respond to any forces or collisions.
+ *   Perfect for level geometry, walls, or any unchanging collision objects.
+ *   The most performance efficient option as they require minimal physics calculations.
  * @public
  * @category Components
  * @example
@@ -2611,6 +3038,7 @@ declare class RigidBody {
     /**
      * The type of the rigid body to create:
      * - Dynamic: This type of body is affected by gravity and velocity.
+     * - Kinematic: This type of body is not affected by gravity and cannot be moved by other rigid bodies, but can be velocity applied.
      * - Static: This type of body is immovable, is unaffected by velocity and gravity.
      * @public
      */
@@ -2634,9 +3062,9 @@ declare class RigidBody {
 }
 
 /**
- * Configuration object for TilemapCollider creation
+ * TilemapCollider component configuration
  * @public
- * @category Components
+ * @category Components Configuration
  * @example
  * ```js
  * const tilemapCollider = new TilemapCollider({
@@ -2661,8 +3089,12 @@ interface TilemapColliderOptions {
     physics: boolean;
 }
 /**
- * Generates rectangle colliders for the map edge tiles (or lines if composite is TRUE).\
- * **Limitations:** At the moment, it is not possible to modify the shape of the collider once it has been generated.
+ * The TilemapCollider component automatically generates collision shapes for tilemap edges.\
+ * When composite is FALSE, it creates individual rectangle colliders for each edge tile.\
+ * When composite is TRUE, it optimizes by generating connected line segments that follow the tilemap's outer edges.\
+ * This is useful for efficiently handling collision detection with tilemap boundaries.\
+ * **Limitations:** The collider shapes are generated once and cannot be modified after creation.
+ * To update the collision shapes, you must create a new TilemapCollider instance.
  * @public
  * @category Components
  * @example
@@ -2699,7 +3131,7 @@ declare enum RenderDataType {
     Mask = 3,
     Geometric = 4,
     Video = 5,
-    Shadow = 6
+    Darkness = 6
 }
 interface CameraData {
     depth: number;
@@ -2715,7 +3147,7 @@ interface RenderData {
 
 /**
  * Mask shape: Rectangle or Circumference.
- * @category Components
+ * @category Components Configuration
  * @public
  */
 declare enum MaskShape {
@@ -2734,7 +3166,7 @@ interface MaskRenderData extends RenderData {
     opacity: number;
 }
 
-interface ShadowRenderData extends RenderData {
+interface DarknessRenderData extends RenderData {
     color: string;
     height: number;
     opacity: number;
@@ -2783,7 +3215,7 @@ interface SpriteRenderData extends RenderData {
 }
 /**
  * Cut the image based on straight coordinates starting from the top left downward.
- * @category Components
+ * @category Components Configuration
  * @public
  */
 interface Slice {
@@ -2799,7 +3231,7 @@ interface Slice {
 
 /**
  * Direction in which the text will be rendered.
- * @category Components
+ * @category Components Configuration
  * @public
  */
 declare enum TextOrientation {
@@ -2835,8 +3267,7 @@ interface TextRenderData extends RenderData {
 
 /**
  * Direction in which the tilemap will be rendered.
- * @category Components
- * @public
+ * @internal
  */
 declare enum TilemapOrientation {
     Center = 0,
@@ -2846,23 +3277,8 @@ declare enum TilemapOrientation {
 }
 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;
-    };
+    tilemap: Tilemap;
+    tileset: Tileset$1;
     smooth?: boolean;
     flipHorizontal?: boolean;
     flipVertical?: boolean;
@@ -2873,6 +3289,23 @@ interface TilemapRenderData extends RenderData {
     tintColor?: string;
     orientation?: TilemapOrientation;
 }
+type Tileset$1 = {
+    image: HTMLImageElement;
+    width: number;
+    tileWidth: number;
+    tileHeight: number;
+    margin?: Vector2;
+    spacing?: Vector2;
+    correction?: Vector2;
+};
+type Tilemap = {
+    width: number;
+    tileWidth: number;
+    tileHeight: number;
+    height: number;
+    realWidth: number;
+    realHeight: number;
+};
 
 interface VideoRenderData extends RenderData {
     video: HTMLVideoElement;
@@ -2890,8 +3323,7 @@ interface VideoRenderData extends RenderData {
 
 /**
  * Default render layer
- * @public
- * @category Components
+ * @internal
  */
 declare const defaultRenderLayer = "Default";
 /**
@@ -2900,8 +3332,18 @@ declare const defaultRenderLayer = "Default";
  */
 declare const debugRenderLayer = "Debug";
 /**
+ * Camera component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const camera = new Camera({
+ *   layers: ["Default", "UI", "Background"],
+ *   zoom: 1.5,
+ *   depth: 0,
+ *   debug: true
+ * });
+ * ```
  */
 interface CameraOptions {
     layers: string[];
@@ -2910,8 +3352,20 @@ interface CameraOptions {
     debug: boolean;
 }
 /**
+ * The Camera component controls what layers and objects are rendered to the screen.\
+ * It supports multiple render layers, zoom level control, and depth ordering when using multiple cameras.\
+ * Each camera can also optionally render debug information for development purposes.\
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const camera = new Camera({
+ *   layers: ["Default", "UI", "Background"],
+ *   zoom: 1.5,
+ *   depth: 0,
+ *   debug: true
+ * });
+ * ```
  */
 declare class Camera {
     /** Layers to be rendered by this camera. Layers are rendered in ascending order */
@@ -2928,8 +3382,18 @@ declare class Camera {
 }
 
 /**
+ * LightRenderer component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const lightRenderer = new LightRenderer({
+ *   radius: 100,
+ *   smooth: true,
+ *   layer: "Default",
+ *   intensity: 0.8
+ * });
+ * ```
  */
 interface LightRendererOptions {
     radius: number;
@@ -2938,15 +3402,29 @@ interface LightRendererOptions {
     intensity: number;
 }
 /**
+ * The LightRenderer component is used to render a light effect on the screen.\
+ * It supports a circular light source with a specified radius and intensity.\
+ * The light can be optionally smoothed for a softer edge effect.\
+ * This component requires a DarknessRenderer component to be present in the scene to function properly,
+ * as it works by illuminating areas within the darkness mask.\
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const lightRenderer = new LightRenderer({
+ *   radius: 100,
+ *   smooth: true,
+ *   layer: "Default",
+ *   intensity: 0.8
+ * });
+ * ```
  */
 declare class LightRenderer {
     /** Light radius */
     radius: number;
     /** Smooth */
     smooth: boolean;
-    /** Shadow render layer */
+    /** Darkness render layer */
     layer: string;
     /** Light intensitry between 0 and 1 */
     intensity: number;
@@ -2956,8 +3434,44 @@ declare class LightRenderer {
 }
 
 /**
+ * MaskRenderer component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const maskRenderer = new MaskRenderer({
+ *   shape: MaskShape.Rectangle,
+ *   width: 32,
+ *   height: 32,
+ *   color: "#000000",
+ *   offset: new Vector2(0, 0),
+ *   rotation: 0,
+ *   opacity: 1,
+ *   layer: "Default"
+ * });
+ * ```
+ * @example
+ * ```js
+ * const maskRenderer = new MaskRenderer({
+ *   shape: MaskShape.Circumference,
+ *   radius: 16,
+ *   color: "#000000",
+ *   offset: new Vector2(0, 0),
+ *   opacity: 1,
+ *   layer: "Default"
+ * });
+ * ```
+ * @example
+ * ```js
+ * const maskRenderer = new MaskRenderer({
+ *   shape: MaskShape.Polygon,
+ *   vertexModel: [new Vector2(0, 0), new Vector2(32, 0), new Vector2(32, 32), new Vector2(0, 32)],
+ *   color: "#000000",
+ *   offset: new Vector2(0, 0),
+ *   opacity: 1,
+ *   layer: "Default"
+ * });
+ * ```
  */
 interface MaskRendererOptions {
     shape: MaskShape;
@@ -2972,37 +3486,46 @@ interface MaskRendererOptions {
     layer: string;
 }
 /**
- * Renders a filled shape (rectangle, circumference or polygon)
+ * The MaskRenderer component renders filled shapes like rectangles, circles, or polygons.\
+ * It supports different shape types with configurable dimensions, colors, positioning and rotation.\
+ * Shapes can be rendered with variable opacity and assigned to specific render layers.\
+ * This component is useful for creating UI elements, visual effects, or masking other rendered content.
  * @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";
+ * const maskRenderer = new MaskRenderer({
+ *   shape: MaskShape.Rectangle,
+ *   width: 32,
+ *   height: 32,
+ *   color: "#000000",
+ *   offset: new Vector2(0, 0),
+ *   rotation: 0,
+ *   opacity: 1,
+ *   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";
+ * const maskRenderer = new MaskRenderer({
+ *   shape: MaskShape.Circumference,
+ *   radius: 16,
+ *   color: "#000000",
+ *   offset: new Vector2(0, 0),
+ *   opacity: 1,
+ *   layer: "Default"
+ * });
  * ```
  * @example
  * ```js
- * maskRenderer.shape       = MaskShape.Polygon;
- * maskRenderer.vertexModel = [new Vector2(0, 0), new Vector2(32, 0), new Vector2(32, 32), new Vector2(0, 32)];
- * maskRenderer.color       = "#000000";
- * maskRenderer.offset      = new Vector2(0, 0);
- * maskRenderer.opacity     = 1;
- * maskRenderer.layer       = "Default";
+ * const maskRenderer = new MaskRenderer({
+ *   shape: MaskShape.Polygon,
+ *   vertexModel: [new Vector2(0, 0), new Vector2(32, 0), new Vector2(32, 32), new Vector2(0, 32)],
+ *   color: "#000000",
+ *   offset: new Vector2(0, 0),
+ *   opacity: 1,
+ *   layer: "Default"
+ * });
  * ```
  */
 declare class MaskRenderer {
@@ -3032,10 +3555,21 @@ declare class MaskRenderer {
 }
 
 /**
+ * DarknessRenderer component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const darknessRenderer = new DarknessRenderer({
+ *   width: 100,
+ *   height: 50,
+ *   color: "#000000",
+ *   opacity: 0.5,
+ *   layer: "Default"
+ * });
+ * ```
  */
-interface ShadowRendererOptions {
+interface DarknessRendererOptions {
     width: number;
     height: number;
     color: string;
@@ -3043,33 +3577,69 @@ interface ShadowRendererOptions {
     layer: string;
 }
 /**
+ * The DarknessRenderer component is used to render a darkness effect on the screen.\
+ * It supports a rectangular darkness mask with configurable width, height, color, opacity, and render layer.\
+ * This component works in conjunction with LightRenderer components in the scene - the darkness will
+ * block and be affected by any lights that intersect with it.
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const darknessRenderer = new DarknessRenderer({
+ *   width: 100,
+ *   height: 50,
+ *   color: "#000000",
+ *   opacity: 0.5,
+ *   layer: "Default"
+ * });
+ * ```
  */
-declare class ShadowRenderer {
-    /** Shadow width */
+declare class DarknessRenderer {
+    /** Darkness rectangle width */
     width: number;
-    /** Shadow height */
+    /** Darkness height */
     height: number;
-    /** Shadow color */
+    /** Darkness color */
     color: string;
-    /** Shadow opacity between 0 and 1 */
+    /** Darkness opacity between 0 and 1 */
     opacity: number;
     /** The render layer */
     layer: string;
     /** @internal */
     _boundingBox: Rectangle;
     /** @internal */
-    _renderData: ShadowRenderData;
-    constructor(options?: Partial<ShadowRendererOptions>);
+    _renderData: DarknessRenderData;
+    constructor(options?: Partial<DarknessRendererOptions>);
 }
 
 /**
+ * SpriteRenderer component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const spriteRenderer = new SpriteRenderer({
+ *   image: this.assetManager.getImage("image.png"),
+ *   width: 1920,
+ *   height: 1080,
+ *   offset: new Vector2(0, 0),
+ *   flipHorizontally: false,
+ *   flipVertically: false,
+ *   rotation: 0,
+ *   opacity: 1,
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   tintColor: "#00FF00",
+ *   layer: "Default",
+ *   slice: {x: 0, y: 0, width: 1920, height: 1080},
+ *   scale: new Vector2(1, 1),
+ *   tiled: new Vector2(1, 1),
+ *   smooth: false
+ * });
+ * ```
  */
 interface SpriteRendererOptions {
-    image: HTMLImageElement;
+    image: HTMLImageElement | string;
     layer: string;
     slice: Slice;
     smooth: boolean;
@@ -3087,33 +3657,39 @@ interface SpriteRendererOptions {
     tiled: Vector2;
 }
 /**
+ * The SpriteRenderer component renders 2D images (sprites) to the screen.\
+ * It supports features like image slicing, scaling, rotation, flipping, opacity, color masking and tinting.\
+ * Images can be rendered with custom dimensions, positioned with offsets, and even tiled across an area.\
+ * The component allows control over pixel smoothing and can be assigned to specific render layers.
  * @public
  * @category Components
  * @example
  * ```js
- * spriteRenderer.image = this.assetManager.getImage("image.png");
- * spriteRenderer.width = 1920;
- * spriteRenderer.height = 1080;
- * spriteRenderer.offset = new Vector2(0, 0);
- * spriteRenderer.flipHorizontally =  false;
- * spriteRenderer.flipVertically = false;
- * spriteRenderer.rotation = 0;
- * spriteRenderer.opacity = 1;
- * spriteRenderer.maskColor = "#FF0000";
- * spriteRenderer.maskColorMix = 0;
- * spriteRenderer.tintColor = "#00FF00";
- * spriteRenderer.layer = "Default";
- * spriteRenderer.slice = {x: 0, y:0, width: 1920, height: 1080};
- * spriteRenderer.scale = new Vector2(1, 1);
- * spriteRenderer.tiled = new Vector2(1, 1);
- * spriteRenderer.smooth = false;
+ * const spriteRenderer = new SpriteRenderer({
+ *   image: this.assetManager.getImage("image.png"),
+ *   width: 1920,
+ *   height: 1080,
+ *   offset: new Vector2(0, 0),
+ *   flipHorizontally: false,
+ *   flipVertically: false,
+ *   rotation: 0,
+ *   opacity: 1,
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   tintColor: "#00FF00",
+ *   layer: "Default",
+ *   slice: {x: 0, y: 0, width: 1920, height: 1080},
+ *   scale: new Vector2(1, 1),
+ *   tiled: new Vector2(1, 1),
+ *   smooth: false
+ * });
  * ```
  */
 declare class SpriteRenderer {
     /** The render layer */
     layer: string;
     /** The image to render */
-    image: HTMLImageElement;
+    image: HTMLImageElement | string;
     /** Cut the image based on straight coordinates starting from the top left downward */
     slice?: Slice;
     /** TRUE for smooth pixels (not recommended for pixel art) */
@@ -3156,8 +3732,40 @@ declare const defaultTextureAtlasOptions: {
     spacing: number;
 };
 /**
+ * TextRenderer component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const textRenderer = new TextRenderer({
+ *   text: "Hello World!",
+ *   color: "#FFFFFF",
+ *   fontSize: 24,
+ *   width: 1920,
+ *   height: 32,
+ *   opacity: 1,
+ *   layer: "TextLayer",
+ *   orientation: TextOrientation.RightCenter,
+ *   shadow: {
+ *     color: "#00FF00",
+ *     offset: new Vector2(3, -3),
+ *     opacity: 0.5,
+ *   },
+ *   textureAtlas: {
+ *     charRanges: [32, 126, 161, 255, 0x3040, 0x309f],
+ *     fontSize: 64,
+ *     spacing: 4,
+ *   },
+ *   font: "Arial",
+ *   flipHorizontally: false,
+ *   flipVertically: false,
+ *   letterSpacing: 0,
+ *   lineHeight: 24,
+ *   offset: new Vector2(0, 0),
+ *   rotation: 0,
+ *   smooth: false,
+ * });
+ * ```
  */
 interface TextRendererOptions {
     /** The text color */
@@ -3214,7 +3822,13 @@ interface TextRendererOptions {
     width: number;
 }
 /**
- * The TextRenderer component allows to render text using font families, colors, and other configuration options.
+ * The TextRenderer component renders text to the screen with extensive customization options.\
+ * It supports both web-safe and imported fonts, but works optimally with bitmap fonts.\
+ * Under the hood, it generates a texture atlas containing all the characters needed for rendering.\
+ * The atlas generation can be configured with custom character ranges, font sizes, and spacing.\
+ * Text can be customized with font families, colors, sizing, orientation, shadows, letter spacing,\
+ * line height, opacity, smoothing, and positioning. The component allows text to be rotated,\
+ * flipped, and assigned to specific render layers.
  * @public
  * @category Components
  *  @example
@@ -3320,8 +3934,34 @@ declare class TextRenderer {
 }
 
 /**
+ * TilemapRenderer component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const tilemapRenderer = new TilemapRenderer({
+ *   layer: "Default",
+ *   tileset: {
+ *     image: this.assetManager.getImage("tileset.png"),
+ *     width: 10,
+ *     tileWidth: 32,
+ *     tileHeight: 32,
+ *     margin: new Vector2(0, 0),
+ *     spacing: new Vector2(0, 0)
+ *   },
+ *   data: [1, 2, 3, 4],
+ *   chunks: [],
+ *   width: 2,
+ *   height: 2,
+ *   tileWidth: 32,
+ *   tileHeight: 32,
+ *   tintColor: "#FFFFFF",
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   opacity: 1,
+ *   smooth: false
+ * });
+ * ```
  */
 interface TilemapRendererOptions {
     layer: string;
@@ -3339,9 +3979,38 @@ interface TilemapRendererOptions {
     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.
+ * The TilemapRenderer component renders 2D tile-based maps to the screen.\
+ * It uses a tileset image as a source for individual tiles, which are arranged according to a provided array of tile IDs.\
+ * The component supports features like tinting, masking, opacity control, and custom tile dimensions.\
+ * Maps can be rendered in chunks for improved performance with large tilemaps, and tiles can be assigned to specific render layers.\
+ * Each tile is referenced by an ID, with 0 representing empty space.
  * @public
  * @category Components
+ * @example
+ * ```js
+ * const tilemapRenderer = new TilemapRenderer({
+ *   layer: "Default",
+ *   tileset: {
+ *     image: this.assetManager.getImage("tileset.png"),
+ *     width: 10,
+ *     tileWidth: 32,
+ *     tileHeight: 32,
+ *     margin: new Vector2(0, 0),
+ *     spacing: new Vector2(0, 0)
+ *   },
+ *   data: [1, 2, 3, 4],
+ *   chunks: [],
+ *   width: 2,
+ *   height: 2,
+ *   tileWidth: 32,
+ *   tileHeight: 32,
+ *   tintColor: "#FFFFFF",
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   opacity: 1,
+ *   smooth: false
+ * });
+ * ```
  */
 declare class TilemapRenderer {
     /** The render layer */
@@ -3377,13 +4046,16 @@ declare class TilemapRenderer {
     constructor(options?: Partial<TilemapRendererOptions>);
 }
 /**
- * Tileset configuration to be used with the TilemapRenderer
+ * The Tileset configuration defines the properties of a tileset used by the TilemapRenderer.\
+ * It specifies the source image containing the tiles, the dimensions of the tileset and individual tiles,\
+ * and optional margin and spacing between tiles. This configuration is essential for properly\
+ * slicing and rendering tiles from the tileset image.
  * @public
- * @category Components
+ * @category Components Configuration
  */
 type Tileset = {
     /** The tileset image element */
-    image: HTMLImageElement;
+    image: HTMLImageElement | string;
     width: number;
     tileWidth: number;
     tileHeight: number;
@@ -3395,7 +4067,7 @@ type Tileset = {
 /**
  * Chunk of tile data
  * @public
- * @category Components
+ * @category Components Configuration
  */
 type Chunk = {
     /** Array of tiles. ID 0 (zero) represents empty space.*/
@@ -3409,8 +4081,30 @@ type Chunk = {
 };
 
 /**
+ * VideoRenderer component configuration
  * @public
- * @category Components
+ * @category Components Configuration
+ * @example
+ * ```js
+ * const videoRenderer = new VideoRenderer({
+ *   video: this.assetManager.getVideo("video.mp4"),
+ *   width: 1920,
+ *   height: 1080,
+ *   offset: new Vector2(0, 0),
+ *   flipHorizontally: false,
+ *   flipVertically: false,
+ *   rotation: 0,
+ *   opacity: 1,
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   tintColor: "#00FF00",
+ *   layer: "Default",
+ *   slice: {x: 0, y: 0, width: 1920, height: 1080},
+ *   volume: 1,
+ *   loop: false,
+ *   fixedToTimeScale: false
+ * });
+ * ```
  */
 interface VideoRendererOptions {
     action: "play" | "pause" | "stop";
@@ -3427,32 +4121,38 @@ interface VideoRendererOptions {
     rotation: number;
     slice: Slice;
     tintColor: string;
-    video: HTMLVideoElement;
+    video: HTMLVideoElement | string;
     volume: number;
     width: number;
 }
 /**
- * The VideoRenderer component plays and renders a video element,
- * and allows configuring options such as its dimensions, coloring, etc.
+ * The VideoRenderer component renders video content to the screen.\
+ * It supports features like video playback control, scaling, rotation, flipping, opacity, color masking and tinting.\
+ * Videos can be rendered with custom dimensions, positioned with offsets, and sliced to show specific regions.\
+ * The component provides control over looping, volume, time scaling, and can be assigned to specific render layers.\
+ * Videos can be paused, played, and stopped programmatically.
  * @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;
+ * const videoRenderer = new VideoRenderer({
+ *   video: this.assetManager.getVideo("video.mp4"),
+ *   width: 1920,
+ *   height: 1080,
+ *   offset: new Vector2(0, 0),
+ *   flipHorizontally: false,
+ *   flipVertically: false,
+ *   rotation: 0,
+ *   opacity: 1,
+ *   maskColor: "#FF0000",
+ *   maskColorMix: 0,
+ *   tintColor: "#00FF00",
+ *   layer: "Default",
+ *   slice: {x: 0, y: 0, width: 1920, height: 1080},
+ *   volume: 1,
+ *   loop: false,
+ *   fixedToTimeScale: false
+ * });
  * videoRenderer.play();
  * ```
  */
@@ -3488,7 +4188,7 @@ declare class VideoRenderer {
     /** Define a color for tinting the video */
     tintColor: string;
     /**The video element to render */
-    video: HTMLVideoElement;
+    video: HTMLVideoElement | string;
     /** The volume of the video (between 1 and 0) */
     volume: number;
     /** Overwrite the original video width */
@@ -3513,7 +4213,8 @@ declare class VideoRenderer {
 }
 
 /**
- * It represents a connected gamepad and has the information of all its buttons and axes..
+ * Represents a connected gamepad controller and provides access to its button states and analog axes values.
+ * Tracks digital button presses, analog stick positions, and d-pad inputs in a normalized format.
  * @public
  * @category Input
  * @example
@@ -3521,11 +4222,11 @@ declare class VideoRenderer {
  * 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 the d-pad x-axis is pressed to the right, do some action
  * }
  *
  * if (gamepad.rightFace) {
- *   // if the right face button is pressed, do some action
+ *   // if the right face button is pressed (Dual Shock: Square. Xbox: X. Nintendo: Y), do some action
  * }
  * ```
  */
@@ -3671,8 +4372,9 @@ type VibrationInput = {
 };
 
 /**
- * Contains the keyboard information in the last frame.
- * It uses the **code** property of the **js keyboard event**.
+ * Tracks and provides access to keyboard input state from the previous frame.
+ * Uses the standardized `code` property from JavaScript KeyboardEvents to identify keys.
+ * Provides methods to check if individual keys or combinations of keys are pressed.
  * @see [KeyboardEvent: code property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
  * @public
  * @category Input
@@ -3749,7 +4451,8 @@ declare class Keyboard {
 }
 
 /**
- * Contains the mouse information in the last frame
+ * Stores the mouse state from the previous frame, including button states, cursor position,
+ * movement status, and scroll wheel information
  * @public
  * @category Input
  * @example
@@ -3789,7 +4492,7 @@ declare class Mouse {
 }
 
 /**
- * The information about one interaction with the screen
+ * Represents a single touch or pointer interaction with the screen, including position and size information
  * @public
  * @category Input
  */
@@ -3800,7 +4503,8 @@ interface TouchInteraction {
     radius: Vector2;
 }
 /**
- * Contains the information about the touch screen interaction
+ * Tracks and provides access to touch screen input state from the previous frame. Supports multi-touch
+ * by storing an array of active touch interactions, each containing position and size information.
  * @public
  * @category Input
  * @example
@@ -3824,7 +4528,52 @@ declare class TouchScreen {
 }
 
 /**
- * Manages the input sources: Keyboard, Mouse, Gamepad, TouchScreen.
+ * Manages input sources including keyboard, mouse, gamepad and touch screen interactions.\
+ * Provides methods to check key states, mouse position/buttons, gamepad inputs and touch events.
+ * @example
+ * ```typescript
+ * // Keyboard input
+ * if (inputManager.keyboard.isPressed("Space")) {
+ *   // Jump action
+ * }
+ *
+ * // Multiple key checks
+ * if (inputManager.keyboard.orPressed(["Enter", "Space"])) {
+ *   // Action for either key pressed
+ * }
+ *
+ * if (inputManager.keyboard.andPressed(["ControlLeft", "KeyC"])) {
+ *   // Action for both keys pressed together
+ * }
+ *
+ * // Mouse input
+ * const mousePos = inputManager.mouse.positionInViewport;
+ * if (inputManager.mouse.leftButtonPressed) {
+ *   // Shoot action
+ * }
+ *
+ * // Mouse wheel scrolling
+ * const scrollAmount = inputManager.mouse.wheelScroll;
+ *
+ * // Gamepad input
+ * const gamepad = inputManager.gamepads[0];
+ * if (gamepad?.bottomFace) {
+ *   // Bottom face button pressed (A on Xbox, B on Nintendo, X on PlayStation)
+ * }
+ *
+ * // Gamepad stick movement
+ * const leftStickPos = gamepad?.leftStickAxes;
+ * const rightStickPos = gamepad?.rightStickAxes;
+ *
+ * // Gamepad vibration
+ * gamepad?.vibrate(200, 0.5, 0.5);
+ *
+ * // Touch input
+ * if (inputManager.touchScreen.touching) {
+ *   const touch = inputManager.touchScreen.interactions[0];
+ *   // Handle touch at touch.positionInViewport
+ * }
+ * ```
  * @public
  * @category Managers
  */
@@ -3841,8 +4590,15 @@ declare class InputManager {
 }
 
 /**
- * Abstract class which can be used to create Systems.\
- * It includes the following dependencies: EntityManager, AssetManager, SceneManager, TimeManager, InputManager, CollisionRepository.
+ * Abstract base class for creating game systems with commonly needed dependencies injected.\
+ * Provides access to the following core managers and services:\
+ * - EntityManager: For managing game entities and components\
+ * - AssetManager: For loading and managing game resources\
+ * - SceneManager: For controlling scene transitions and state\
+ * - TimeManager: For handling game timing and delta time\
+ * - InputManager: For processing keyboard, mouse and touch input\
+ * - CollisionRepository: For physics and collision detection\
+ * - GameConfig: For accessing game configuration settings
  * @public
  * @category Core
  * @example
@@ -3870,7 +4626,9 @@ declare abstract class GameSystem implements System {
 }
 
 /**
- * Decorator to indicate that the target system will run in the game logic loop.
+ * Decorator to indicate that the target system will run in the game logic loop.\
+ * Game logic systems handle core gameplay mechanics, AI behavior, input processing,\
+ * and other non-physics, non-rendering game state updates that occur each frame.
  * @public
  * @category Decorators
  * @example
@@ -3882,7 +4640,9 @@ declare abstract class GameSystem implements System {
  */
 declare function gameLogicSystem(): (target: SystemType) => void;
 /**
- * Decorator to indicate that the target system will run in the physics loop.
+ * Decorator to indicate that the target system will run in the physics loop.\
+ * Physics systems handle physics calculations, collisions, and other physics-related updates.\
+ * They typically run at a lower frequency than game logic systems to ensure accurate physics simulations.
  * @public
  * @category Decorators
  * @example
@@ -3894,7 +4654,10 @@ declare function gameLogicSystem(): (target: SystemType) => void;
  */
 declare function gamePhysicsSystem(): (target: SystemType) => void;
 /**
- * Decorator to indicate that the target system will be executed at the begining of the render loop.
+ * Decorator to indicate that the target system will be executed at the begining of the render loop.\
+ * Pre-render systems handle tasks that need to be completed before the final rendering step.\
+ * They are useful for tasks like sorting sprites, updating UI elements, and positioning the camera before rendering,
+ * along with other preparatory operations.
  * @public
  * @category Decorators
  * @example
@@ -3907,7 +4670,9 @@ declare function gamePhysicsSystem(): (target: SystemType) => void;
 declare function gamePreRenderSystem(): (target: SystemType) => void;
 
 /**
- * Applies a decorator manually.
+ * Applies a decorator manually to a target (class, property, or constructor parameter).\
+ * This utility function simplifies the process of programmatically applying decorators without using the @ syntax.\
+ * This is primarily useful in JavaScript where decorator syntax is not yet standardized.
  * @param decorator The decorator function to be applied.
  * @param target The target to which the decorator is applied (class, prototype, or constructor argument).
  * @param propertyKey The property name or constructor argument index (optional).
@@ -3937,9 +4702,26 @@ declare function gamePreRenderSystem(): (target: SystemType) => void;
 declare function decorate(decorator: (...args: any[]) => any, target: any, propertyKey?: string | symbol | number): void;
 
 /**
- * Options for playSfx function.
+ * Configuration options for playing sound effects with the playSfx function.
+ * Allows specifying the audio source to play, optional volume level (0-1),
+ * and whether the sound should loop continuously.
  * @public
  * @category Audio
+ * @example
+ * ```javascript
+ * const audioSource = this.assetManager.getAudio("audio/sfx/coin.ogg");
+ * playSfx({ audioSource });
+ * ```
+ * @example
+ * ```javascript
+ * const audioSource = this.assetManager.getAudio("audio/sfx/coin.ogg");
+ * playSfx({ audioSource, volume: 0.5 });
+ * ```
+ * @example
+ * ```javascript
+ * const audioSource = this.assetManager.getAudio("audio/sfx/coin.ogg");
+ * playSfx({ audioSource, loop: true });
+ * ```
  */
 interface PlaySfxOptions {
     audioSource: HTMLAudioElement;
@@ -3947,8 +4729,9 @@ interface PlaySfxOptions {
     loop?: boolean;
 }
 /**
- * This funciton is ideal to play one-shot sound effects. It will play the sound effect from the beginning, even if it's already playing.\
- * You can also use this function to play audio tracks, but it is recommended to use the AudioPlayer component for this. The AudioPlayer component can handle the browser's autoplay policy and other audio-related functions.
+ * Plays a sound effect from the beginning, even if it's currently playing. Ideal for one-shot sound effects like explosions, impacts, or UI feedback.\
+ * While this function can play any audio, it's recommended to use the AudioPlayer component for background music or longer tracks.\
+ * The AudioPlayer component provides additional features like handling browser autoplay policies, fading, and advanced playback control.
  * @param playSfxOptions - The options for playing the sound effect.
  * @public
  * @category Audio
@@ -3970,7 +4753,9 @@ interface PlaySfxOptions {
  */
 declare const playSfx: ({ audioSource, volume, loop }: PlaySfxOptions) => void;
 /**
- * Stop a sound effect.
+ * Stops a sound effect by pausing playback and resetting its position to the beginning.\
+ * Useful for immediately silencing sound effects or interrupting looped audio.\
+ * Note that this completely stops the audio - to temporarily pause, use audioSource.pause() directly.
  * @param audioSource - The audio source to stop.
  * @public
  * @category Audio
@@ -3985,9 +4770,9 @@ declare const stopSfx: (audioSource: HTMLAudioElement) => void;
 /**
  * Symbols to be used as dependency identifiers
  * @public
- * @category Config
+ * @category Decorators
  */
-declare const Symbols: {
+declare const BuiltInDependencyIdentifiers: {
     AssetManager: symbol;
     CanvasElement: symbol;
     CollisionRepository: symbol;
@@ -3999,4 +4784,4 @@ declare const Symbols: {
     TimeManager: symbol;
 };
 
-export { Animation, type AnimationSlice, Animator, type AnimatorOptions, type Archetype, type ArchetypeComponent, AssetManager, AudioPlayer, type AudioPlayerAction, type AudioPlayerOptions, type AudioPlayerState, BallCollider, type BallColliderOptions, BoxCollider, type BoxColliderOptions, BroadPhaseMethods, Button, type ButtonOptions, ButtonShape, Camera, type CameraOptions, type Chunk, Circumference, type Collider, type Collision, type CollisionMatrix, CollisionMethods, CollisionRepository, type CollisionResolution, type Component, type ComponentType, type DependencyName, type DependencyType, EdgeCollider, type EdgeColliderOptions, type Entity, EntityManager, Game, type GameConfig, GameSystem, GamepadController, InputManager, type IntervalOptions, Keyboard, LightRenderer, type LightRendererOptions, MaskRenderer, type MaskRendererOptions, MaskShape, Mouse, type PlaySfxOptions, Polygon, PolygonCollider, type PolygonColliderOptions, type PropertyKey, 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, debugRenderLayer, decorate, defaultRenderLayer, defaultTextureAtlasOptions, degreesToRadians, fixedRound, gameLogicSystem, gamePhysicsSystem, gamePreRenderSystem, inject, injectable, playSfx, radiansToDegrees, randomFloat, randomInt, range, rgbToHex, stopSfx };
+export { Animation, type AnimationOptions, type AnimationSlice, Animator, type AnimatorOptions, type Archetype, AssetManager, AudioPlayer, type AudioPlayerAction, type AudioPlayerOptions, type AudioPlayerState, BallCollider, type BallColliderOptions, BoxCollider, type BoxColliderOptions, BroadPhaseMethods, BuiltInDependencyIdentifiers, Button, type ButtonOptions, ButtonShape, Camera, type CameraOptions, type Chunk, Circumference, type Collider, type Collision, type CollisionMatrix, CollisionMethods, CollisionRepository, type CollisionResolution, type Component, type ComponentType, DarknessRenderer, type DarknessRendererOptions, type DependencyName, type DependencyType, type DisabledComponent, EdgeCollider, type EdgeColliderOptions, type Entity, EntityManager, Game, type GameConfig, GameSystem, GamepadController, InputManager, type IntervalOptions, Keyboard, LightRenderer, type LightRendererOptions, MaskRenderer, type MaskRendererOptions, MaskShape, Mouse, type PlaySfxOptions, Polygon, PolygonCollider, type PolygonColliderOptions, type PropertyKey, Rectangle, RigidBody, type RigidBodyOptions, RigidBodyType, Scene, SceneManager, type SceneType, type SearchResult, type Shape, type Slice, SpriteRenderer, type SpriteRendererOptions, 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, debugRenderLayer, decorate, defaultRenderLayer, defaultTextureAtlasOptions, degreesToRadians, disableComponent, fixedRound, gameLogicSystem, gamePhysicsSystem, gamePreRenderSystem, inject, injectable, playSfx, radiansToDegrees, randomFloat, randomInt, range, rgbToHex, stopSfx };