import { Vector2, Rotation, Rectangle } from '@angry-pixel/math'; export * from '@angry-pixel/math'; import { IInputManager } from '@angry-pixel/input'; export { GamepadController, GamepadData, IInputManager, KeyboardController, MouseController, TouchController, TouchInteraction } from '@angry-pixel/input'; import { CollisionMethods, CollisionMatrix, BroadPhaseMethods, IPhysicsManager, RigidBodyType, ICollisionResolution, ICollider, ICollision } from '@angry-pixel/2d-physics'; export { BroadPhaseMethods, CollisionMatrix, CollisionMethods, ICollider, ICollision, ICollisionResolution, IPhysicsManager, RigidBodyType } from '@angry-pixel/2d-physics'; import { IRenderManager, Slice, TextOrientation, MaskShape } from '@angry-pixel/2d-renderer'; export { IRenderManager, MaskShape, Slice, TextOrientation } from '@angry-pixel/2d-renderer'; /** * All GameObject have a Transform natively, so it cannot be added manually. * It is used to handle the position, rotation and scale of the object. If the object has a parent, * it can be scaled, rotated and translated hierarchically. * @public * @category Components * @example * ```js * this.transform.position = new Vector2(0, 0); * this.transform.position.set(0, 0); * * this.transform.scale = new Vector2(0, 0); * this.transform.scale.set(0, 0); * * this.transform.rotation.radians = 0; * this.transform.rotation.degrees = 0; * * // used to set position relative to the parent * this.transform.innerPosition = new Vector2(0, 0); * this.transform.innerPosition.set(0, 0); * ``` */ declare class Transform extends TransformComponent { /** @internal */ readonly allowMultiple: boolean; /** Apply scale relative to the parent. Default value is TRUE */ parentScale: boolean; /** Apply rotation relative to the parent. Default value is TRUE */ parentRotation: boolean; private _position; private _scale; private _rotation; private _innerPosition; private _parent; private cache; private lastParentRadians; private lastPosition; private scaledInnerPosition; /** Position on x-axis and y-axis in pixels */ get position(): Vector2; /** Position on x-axis and y-axis in pixels */ set position(position: Vector2); /** Scale on x-axis and y-axis in pixels */ get scale(): Vector2; /** Scale on x-axis and y-axis in pixels */ set scale(scale: Vector2); /** Rotation expressed in radians or degrees */ get rotation(): Rotation; /** Direction vector based on the Rotation */ get direction(): Vector2; /** Position vector relative to the parent */ get innerPosition(): Vector2; /** Position vector relative to the parent */ set innerPosition(innerPosition: Vector2); /** Parent transform */ get parent(): Transform | null; /** Parent transform */ set parent(parent: Transform | null); protected update(): void; private setPositionFromParent; private translateInnerPosition; private updateScaledInnerPosition; } type constructor = () => unknown; /** @internal */ declare class Container { private instances; private constructors; private constants; add(name: string, constructor: constructor): void; getSingleton(name: string): T; getTranscient(name: string): T; addConstant(name: string, value: unknown): void; getConstant(name: string): T; } /** * Game configuration options * @public * @category Config * @example * ```js * const gameConfig = { * containerNode: document.getElementById("app"), * gameWidth: 1920, * gameHeight: 1080, * debugEnabled: false, * canvasColor: "#000000", * physicsFramerate: 180, * headless: false, * spriteDefaultScale: new Vector2(1, 1), * collisions: { * collisionMatrix: [ * ["layer1", "layer2"], * ["layer1", "layer3"], * ], * collisionMethod: CollisionMethods.SAT, * collisionBroadPhaseMethod: BroadPhaseMethods.SpartialGrid, * collisionArea: new Rectangle(-960, -540, 1920, 1080), * } * }; * ``` */ interface GameConfig { /** HTML element where the game will be created */ containerNode?: HTMLElement; /** Game width */ gameWidth?: number; /** Game height */ gameHeight?: number; /** Enables the debug mode */ debugEnabled?: boolean; /** Background color of canvas */ canvasColor?: string; /** Framerate for physics execution. The allowed values are 60, 120, 180, 240. * The higher the framerate, the more accurate the physics will be, but it will consume more processor resources. * Default value is 180. */ physicsFramerate?: number; /** Define a general scaling for all sprites. It can be overwritten individually on each sprite */ spriteDefaultScale?: Vector2; /** Enable Headless mode. The input and rendering functions are turned off. Ideal for game server development */ headless?: boolean; /** Collision configuration options */ collisions?: { /** Collision detection method: CollisionMethods.SAT or CollisionMethods.ABB. Default value is CollisionMethods.SAT */ collisionMethod?: CollisionMethods; /** Define a fixed area */ collisionArea?: Rectangle; /** Define a fixed rectangular area for collision detection */ collisionMatrix?: CollisionMatrix; /** Collision broad phase method: BroadPhaseMethods.QuadTree or BroadPhaseMethods.SpartialGrid. Default values is BroadPhaseMethods.SpartialGrid */ collisionBroadPhaseMethod?: BroadPhaseMethods; }; } /** * 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 * } * ``` */ interface IAssetManager { /** * 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, preloadTexture?: boolean): 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 url The asset URL * @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; } /** * Manages the canvas element * @public * @category Managers * @example * ```js * const canvasElement = this.domManager.canvas; * ``` */ interface IDomManager { /** The canvas element where the game is rendered */ canvas: HTMLCanvasElement; } /** * Used to create, retrieve and destroy GameObject instances. * @public * @category Managers * @example * ```js * // create a new game object instance * this.gameObjectManager.addGameObject(Player); * * // find a game object by its class * const player = this.gameObjectManager.findGameObject(Player); * * // find game objects by their class * const coins = this.gameObjectManager.findGameObjects(Coin); * * // find game objects by their tag * const enemies = this.gameObjectManager.findGameObjectsByTag("Enemy"); * * // destroy a game object * this.gameObjectManager.destroyGameObject(player); * ``` */ interface IGameObjectManager { /** * Instantiates a new game object. * @param gameObjectClass The game object class. * @param options [optional] Options for the Init method. * @param parent [optional] The parent game object. * @param name [optional] The name associated to the game object. * @returns The game object instance. */ addGameObject(gameObjectClass: GameObjectClass, options?: InitOptions, parent?: GameObject, name?: string): T; /** * Returns a collection of found game objects for the given class, or all the game objects if there is no class. * @param gameObjectClass [optional] The game object class to find. * @returns The found game objects. */ findGameObjects(gameObjectClass?: GameObjectClass): T[]; /** * Returns the first game object found for the given id, or undefined otherwise. * @param id The game object id to find. * @returns The found game object. */ findGameObjectById(id: number): T; /** * Returns the first game object found for the given class, or undefined otherwise. * @param gameObjectClass The game object class to find. * @returns The found game object. */ findGameObject(gameObjectClass: GameObjectClass): T; /** * Returns the first game object found for the given name, or undefined otherwise. * @param name The name of the game object to find. * @returns The found game object. */ findGameObject(name: string): T; findGameObject(filter: GameObjectClass | string): T; /** * Returns a collection of children game objects for the given parent object. * @param parent The parent game object. * @returns The found game objects. */ findGameObjectsByParent(parent: GameObject): T[]; /** * Returns the first child game object for the given parent object and filtered by the given game object class. * @param parent The parent game object. * @param gameObjectClass The game object class to find. * @returns The found game object. */ findGameObjectByParent(parent: GameObject, gameObjectClass: GameObjectClass): T; /** * Returns the first child game object for the given parent object and filtered by the given name. * @param parent The parent game object. * @param name The name of the game object to find. * @returns The found game object. */ findGameObjectByParent(parent: GameObject, name: string): T; findGameObjectByParent(parent: GameObject, filter: GameObjectClass | string): T; /** * Returns a collection of game objects found for the given tag. * @param tag The tag of the game objects to find. * @returns The found game objects. */ findGameObjectsByTag(tag: string): T[]; /** * Destroy all game objets. * @param ignoreKeep [optional] If TRUE, it also destroys objects with the "keep" property set to TRUE. */ destroyAllGameObjects(ignoreKeep?: boolean): void; /** * Destroy the given game object. * @param gameObject The game object to destory. */ destroyGameObject(gameObject: GameObject): void; } /** * The Camera component is used to organize the rendering order by layers and to manage the general zooming of these layers. * @public * @category Components * @example * ```js * const camera = this.addComponent(Camera); * camera.zoom = 1; * camera.depth = 0; * camera.layers = ["Background", "Foreground"]; * camera.addLayer("UI"); * ``` */ declare class Camera extends CameraComponent { /** @internal */ readonly allowMultiple: boolean; /** * Rectangle representing the field of view of the camera from the perspective of the screen * @readonly */ readonly viewportRect: Rectangle; /** * Rectangle representing the field of view of the camera in the game world * @readonly */ readonly worldSpaceRect: Rectangle; /** In case you have more than one camera, the depth value determines which camera is rendered first */ depth: number; /** Layers to be rendered by this camera */ layers: string[]; private _zoom; private cameraData; private canvas; /** Camera zoom. Default value is 1 */ set zoom(zoom: number); /** Camera zoom. Default value is 1 */ get zoom(): number; /** Adds a new layer to the end of the stack */ addLayer(layer: string): void; protected init(): void; protected update(): void; private updateViewportRect; private updateWorldSpaceRect; private updateCameraData; } /** * This GameCamera object is automatically added to all scenes, but it also allows * new instances of it to be created, for example, to generate parallax effects. * @public * @category Game Objects */ declare class GameCamera extends GameObject { /** The Camera component instance */ camera: Camera; protected init(): void; /** Layers to be rendered by this camera */ set layers(layers: string[]); /** Layers to be rendered by this camera */ get layers(): string[]; /** In case you have more than one camera, the depth value determines which camera is rendered first */ set depth(depth: number); /** In case you have more than one camera, the depth value determines which camera is rendered first */ get depth(): number; /** Camera zoom. Default value is 1 */ set zoom(zoom: number); /** Camera zoom. Default value is 1 */ get zoom(): number; /** * Rectangle representing the field of view of the camera in the game world * @readonly */ get worldSpaceRect(): Rectangle; /** * Rectangle representing the field of view of the camera from the perspective of the screen * @readonly */ get viewportRect(): Rectangle; /** Adds a new layer to the end of the stack */ addLayer(layer: string): void; } /** * Game is the main class that contains all the managers, scenes, objects and components. It allows to start and stop the execution of the game. * @public * @category Core * @example * ```js * const game = new Game({ * containerNode: document.getElementById("app"), * gameWidth: 1920, * gameHeight: 1080, * }); * game.addScene(GameScene, "GameScene"); * game.run(); * ``` * @example * ```js * const game = new Game({ * containerNode: document.getElementById("app"), * gameWidth: 1920, * gameHeight: 1080, * debugEnabled: false, * canvasColor: "#000000", * physicsFramerate: 180, * headless: false, * spriteDefaultScale: new Vector2(1, 1), * collisions: { * collisionMatrix: [ * ["layer1", "layer2"], * ["layer1", "layer3"], * ], * collisionMethod: CollisionMethods.SAT, * collisionBroadPhaseMethod: BroadPhaseMethods.SpartialGrid, * collisionArea: new Rectangle(-960, -540, 1920, 1080), * } * }); * game.addScene(GameScene, "GameScene"); * game.run(); * ``` */ declare class Game { /** @internal */ private readonly container; /** @internal */ private sceneManager; /** @internal */ private iterationManager; /** @internal */ private _config; /** @internal */ constructor(config: GameConfig); /** @internal */ private setupManagers; /** * The game configuration */ get config(): GameConfig; /** * TRUE if the game is running */ get running(): boolean; /** * Add a scene to the game * * @param sceneClass the class of the scene * @param name The name of the scene */ addScene(sceneClass: SceneClass, name: string): void; /** * Add a scene to the game * * @param sceneClass the class of the scene * @param name The name of the scene * @param options This options will be passed to the init method */ addScene(sceneClass: SceneClass, name: string, options: InitOptions): void; /** * Add a scene to the game * * @param sceneClass the class of the scene * @param name The name of the scene * @param openingScene If this is the opening scene, set TRUE, FALSE instead */ addScene(sceneClass: SceneClass, name: string, openingScene: boolean): void; /** * Add a scene to the game * * @param sceneClass the class of the scene * @param name The name of the scene * @param options This options will be passed to the init method * @param openingScene If this is the opening scene, set TRUE, FALSE instead */ addScene(sceneClass: SceneClass, name: string, options: InitOptions, openingScene: boolean): void; /** * Run the game */ run(): void; /** * Stop the game */ stop(): void; /** * Pauses the game */ pause(): void; /** * Resumes the paused game */ resume(): void; } /** @internal */ type SceneClass = new (container: Container, name: string, game: Game) => Scene; /** * Base class for all game scenes * @public * @category Core * @example * ```js * class GameScene extends Scene { * init(options) { * this.addGameObject(Player); * } * start() {} * update() {} * } * ``` * @example * ```ts * class GameScene extends Scene { * protected init(options?: InitOptions): void { * this.addGameObject(Player); * } * protected start(): void {} * protected update(): void {} * } * ``` */ declare class Scene extends GameActor { readonly name: string; readonly game: Game; /** @internal */ constructor(container: Container, name: string, game: Game); /** * The main active camera */ get gameCamera(): GameCamera; /** @internal */ protected _destroy(): void; /** @internal */ protected _stopGame(): void; } /** * Manges the loading of the scenes. * @public * @category Managers * @example * ```js * this.sceneManager.loadScene("MainScene"); * const loadedScene = this.sceneManager.getLoadedScene(); * ``` */ interface ISceneManager { /** * Adds a new scene. * @param sceneClass The scene class . * @param name The name to identify the scene. * @param options [optional] Options for the init method. * @param openingScene [optional] TRUE if it's the first scene to load. */ addScene(sceneClass: SceneClass, name: string, options?: InitOptions, openingScene?: boolean): void; /** * Loads a Scene by the given name. * @param name The name of the Scene. */ loadScene(name: string): void; /** * Retrieves the current loaded scene. * @returns The scene instance. */ getLoadedScene(): T; /** * Loads the scene flagged as the opening scene. * @internal */ loadOpeningScene(): void; /** * Check if there is a pending scene change. * @return TRUE if there is a pending scene to load, FALSE instead * @internal */ pendingSceneToload(): boolean; /** * Loads the next pending scene. * @internal */ loadPendingScene(): void; /** * Unloads the current loaded scene. * @internal */ unloadCurrentScene(): void; } /** * 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; * ``` */ interface ITimeManager { /** @internal */ minGameDeltatime: number; /** @internal */ minPhysicsDeltaTime: number; /** @internal */ gameFramerate: number; /** @internal */ physicsFramerate: number; /** The time difference, in seconds, between the last frame and the current frame. */ deltaTime: number; /** The time difference, in seconds, between the last physics frame and the current one. */ physicsDeltaTime: 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 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; /** The time difference, in seconds, between the last frame of and the current frame recorded by the browser. */ browserDeltaTime: number; /** @internal */ updateForGame(time: number): void; /** @internal */ updateForBrowser(time: number): void; /** @internal */ updateForPhysics(time: number): void; } /** @internal */ declare enum FrameEvent { Init = 0, Start = 1, Update = 2, UpdateEngine = 3, UpdateCollider = 4, UpdatePhysics = 5, UpdateTransform = 6, UpdatePreRender = 7, UpdateCamera = 8, UpdateRender = 9, Destroy = 10, StopGame = 11 } /** @internal */ interface InitOptions { [key: string]: any; } /** * Base class from which Scene, GameObjects and Component are extended. * @internal */ declare abstract class GameActor { /** @internal */ protected readonly updateEvent: FrameEvent; /** @internal */ protected readonly container: Container; /** Used to load and retrieve assets. */ protected readonly assetManager: IAssetManager; /** Used to access the canvas element. */ protected readonly domManager: IDomManager; /** Used to obtain information about the input. */ protected readonly inputManager: IInputManager; /** Used to create, retrieve and destroy GameObject instances. */ protected readonly gameObjectManager: IGameObjectManager; /** Used to manage colliders and rigidBodies. */ protected readonly physicsManager: IPhysicsManager; /** Used to manage the render and camera data. */ protected readonly renderManager: IRenderManager; /** Used to load scenes. */ protected readonly sceneManager: ISceneManager; /** Used to manage and obtain information about the time in the game. */ protected readonly timeManager: ITimeManager; /** Object containing the game configuration. */ protected readonly gameConfig: GameConfig; private started; /** @internal */ constructor(container: Container); /** @internal */ dispatch(event: FrameEvent, options?: InitOptions): void; /** * This method is called after instantiation (recommended for the creation of game objects). */ protected init?(options?: InitOptions): void; /** * This method is called only once on the first available frame. */ protected start?(): void; /** * This method is called on every frame. */ protected update?(): void; /** * This method is called before destruction. */ protected onDestroy?(): void; /** * Adds a new game object to the scene. * @param gameObjectClass The game object class * @returns The added game object */ protected addGameObject(gameObjectClass: GameObjectClass): T; /** * Adds a new game object to the scene. * @param gameObjectClass The game object class * @param name The name of the game object * @returns The added game object */ protected addGameObject(gameObjectClass: GameObjectClass, name: string): T; /** * Adds a new game object to the scene. * @param gameObjectClass The game object class * @param options This options will be passed to the init method * @returns The added game object */ protected addGameObject(gameObjectClass: GameObjectClass, options: InitOptions): T; /** * Adds a new game object to the scene. * @param gameObjectClass The game object class * @param options [optional] This options will be passed to the init method * @param name [optional] The name of the game object * @returns The added game object */ protected addGameObject(gameObjectClass: GameObjectClass, options?: InitOptions | string, name?: string): T; /** * Returns all the game objects in the scene. * @returns The found game objects */ protected findGameObjects(): GameObject[]; /** * Returns a collection of found game objects for the given class * @param gameObjectClass The game object class to find * @returns The found game objects */ protected findGameObjects(gameObjectClass: GameObjectClass): T[]; /** * Returns the first game object found for the given class, or undefined otherwise. * @param gameObjectClass The game object class to find * @returns The found game object */ protected findGameObject(gameObjectClass: GameObjectClass): T; /** * Returns the first game object found for the given name, or undefined otherwise. * @param name The name of the game object to find * @returns The found game object */ protected findGameObject(name: string): T; /** * Returns a collection of game objects found for the given tag * @param tag The tag of the game objects to find * @returns The found game objects */ protected findGameObjectsByTag(tag: string): T[]; /** * Destroy the given game object * @param gameObject The game object to destory */ protected destroyGameObject(gameObject: GameObject): void; /** @internal */ protected abstract _destroy(): void; /** @internal */ protected abstract _stopGame(): void; } /** * RigidBody configuration options * @public * @category Components * @example * ```js const body = this.addComponent(RigidBody, { rigidBodyType: RigidBodyType.Dynamic, gravity: 10 }); * ``` * @example * ```js const body = this.addComponent(RigidBody, { rigidBodyType: RigidBodyType.Kinematic, }); * ``` * @example * ```js const body = this.addComponent(RigidBody, { rigidBodyType: RigidBodyType.Static, }); * ``` */ interface RigidBodyOptions extends InitOptions { /** * The type determines how it will respond to physics and collisions. - Dynamic = This type of body is affected by gravity, can be velocity-applied and collides with all types of bodies. - Kinematic = This body type is not affected by gravity but can have velocity applied to it. Dynamic bodies can collide with it. - Static = This type of body is immovable, no velocity can be applied to it and it is not affected by gravity. It is the body type that consumes the least processing resources. */ rigidBodyType: RigidBodyType; /** Gravity expressed in pixels per second squared. Only applies fot Dynamic bodies */ gravity?: number; } /** * The RigidBody component puts the object under simulation of the physics engine, where it will interact with other objects that have a RigidBody. * The RigidBody component requires the object to have at least one collider. * * There are three types of bodies: * - Dynamic = This type of body is affected by gravity, can be velocity-applied and collides with all types of bodies. * - Kinematic = This body type is not affected by gravity but can have velocity applied to it. Dynamic bodies can collide with it. * - Static = This type of body is immovable, no velocity can be applied to it and it is not affected by gravity. It is the body type that consumes the least processing resources. * @public * @category Components * @example * ```js const body = this.addComponent(RigidBody, { rigidBodyType: RigidBodyType.Dynamic, gravity: 10 }); body.velocity = 200; * ``` * @example * ```js const body = this.addComponent(RigidBody, { rigidBodyType: RigidBodyType.Kinematic, }); body.velocity = 200; * ``` * @example * ```js const body = this.addComponent(RigidBody, { rigidBodyType: RigidBodyType.Static, }); * ``` */ declare class RigidBody extends EngineComponent { /** @internal */ readonly allowMultiple: boolean; private rigidBody; /** Velocity applied to the x-axis and y-axis expressed in pixels per second. */ get velocity(): Vector2; /** Velocity applied to the x-axis and y-axis expressed in pixels per second. */ set velocity(velocity: Vector2); /** Gravity expressed in pixels per second squared. Only applies fot Dynamic bodies */ get gravity(): number; /** Gravity expressed in pixels per second squared. Only applies fot Dynamic bodies */ set gravity(gravity: number); /** * The type determines how it will respond to physics and collisions. - Dynamic = This type of body is affected by gravity, can be velocity-applied and collides with all types of bodies. - Kinematic = This body type is not affected by gravity but can have velocity applied to it. Dynamic bodies can collide with it. - Static = This type of body is immovable, no velocity can be applied to it and it is not affected by gravity. It is the body type that consumes the least processing resources. */ get rigidBodyType(): RigidBodyType; protected init({ rigidBodyType, gravity }: RigidBodyOptions): void; protected update(): void; private getColliderIds; protected onActiveChange(): void; protected onDestroy(): void; } /** @internal */ declare const LAYER_DEFAULT = "Default"; /** @internal */ type GameObjectClass = new (container: Container, id: number, name?: string, parent?: GameObject) => T; /** * Base class for all objects in the scene. * @public * @category Core * @example * ```js * class Player extends GameObject { * init(options) { * this.tag = "Tag"; * this.layer = "Default"; * } * start() { * // executed in the first available frame * } * update() { * // executed on every frame * } * } * ``` * @example * ```ts * class Player extends GameObject { * protected init(options?: InitOptions): void { * this.tag = "Tag"; * this.layer = "Default"; * } * protected start(): void { * // executed in the first available frame * } * protected update(): void { * // executed on every frame * } * } * ``` */ declare class GameObject extends GameActor { /** Id automatically assigned at the time of instantiation. */ readonly id: number; /** Name given manually at the time of instantiation. */ readonly name: string; /** Tag used to group objects and optimize their retrieval. */ tag: string; /** Layer used for rendering and physics. Default value is "Default". */ layer: string; /** TRUE for UI objects. Default value is FALSE. Renders the object outside the game world coordinates. */ ui: boolean; /** TRUE to prevent the object from being automatically destroyed when changing the scene. Default value is FALSE. */ keep: boolean; /** @internal */ private _parent; /** @internal */ private _active; /** @internal */ private components; /** @internal */ private activeComponentsCache; /** @internal */ private activeChildrenCache; /** @internal */ constructor(container: Container, id: number, name?: string, parent?: GameObject); /** TRUE for enabled object, FALSE for disabled object. */ get active(): boolean; /** TRUE for enabled object, FALSE for disabled object. */ set active(active: boolean); /** Parent game object. A child object depends on the parent's Transform. */ get parent(): GameObject | null; /** Parent game object. A child object depends on the parent's Transform. */ set parent(parent: GameObject | null); /** @internal */ private updateComponentsActiveStatus; /** @internal */ private updateChildrenActiveStatus; /** * Transform component added natively in the object */ get transform(): Transform; /** RigidBody Component (if any) */ get rigidBody(): RigidBody; /** * This method is called when the active state changes. */ protected onActiveChange(): void; /** * @returns The current loaded scene */ protected getCurrentScene(): T; /** * Add a component to the game obejct * @param componentClass The class of the component * @returns The added component */ addComponent(componentClass: ComponentClass): ComponentType; /** * Add a component to the game obejct * @param componentClass The class of the component * @param options The options passed to the init method of the component * @returns The added component */ addComponent(componentClass: ComponentClass, options: OptionsType): ComponentType; /** * Add a component to the game obejct * @param componentClass The class of the component * @param name The name of the component * @returns The added component */ addComponent(componentClass: ComponentClass, name: string): ComponentType; /** * Add a component to the game obejct * @param componentClass The class of the component * @param options The options passed to the init method of the component * @param name The name of the component * @returns The added component */ addComponent(componentClass: ComponentClass, options: OptionsType, name: string): ComponentType; /** @internal */ private checkMultipleComponent; /** * Returns all the components in the game object. * @returns The found components */ getComponents(): Component[]; /** * Returns all the components for the given class in the game object. * @param componentClass The class of the components * @returns The found components */ getComponents(componentClass: ComponentClass): T[]; /** * Returns the first component found for the given class, or undefined otherwise. * @param componentClass The class of the component * @returns The found component */ getComponent(componentClass: ComponentClass): T; /** * Returns the first component found for the given name, or undefined otherwise. * @param name The name of the component * @returns The found component */ getComponent(name: string): T; /** * Returns TRUE if the game object has a component for the given class, or FALSE otherwise * @param componentClass The class of the component to find * @returns boolean */ hasComponent(componentClass: ComponentClass): boolean; /** * @param name The name of the component to find * @returns boolean */ hasComponent(name: string): boolean; removeComponent(component: Component): void; /** * Add a child game object. * @param gameObjectClass The class of the child game object * @param options [optional] This options will be passed to the init method * @param name [optional] The name of the game object * @returns The added child game object */ addChild(gameObjectClass: GameObjectClass, options?: InitOptions, name?: string): T; /** * @returns The children game objects */ getChildren(): T[]; /** * Returns the first child found for the given class, or undefined otherwise. * @param gameObjectClass The class of the child game object to find * @returns The found child game object */ getChild(gameObjectClass: GameObjectClass): T; /** * Returns the first child found for the given name, or undefined otherwise. * @param name The name of the child game object to find * @returns The found child game object */ getChild(name: string): T; /** * Destroy all the children game objects */ destroyChildren(): void; /** @internal */ protected _destroy(): void; /** @internal */ private destroyComponents; /** @internal */ protected _stopGame(): void; } /** @internal */ type ComponentClass = new (container: Container, gameObject: GameObject, name?: string) => T; /** * Base class for all components to be added to game objects. * @public * @category Core * @example * ```js * class MovementsController extends Component { * init(options) { * // executed after instantiation * } * start() { * // executed in the first available frame * } * update() { * // executed on every frame * } * } * ``` * @example * ```ts * class MovementsController extends Component { * protected init(options?: InitOptions): void { * // executed after instantiation * } * protected start(): void { * // executed in the first available frame * } * protected update(): void { * // executed on every frame * } * } * ``` */ declare abstract class Component extends GameActor { /** Name given manually at the time of instantiation. */ readonly name: string; /** Object to which it belongs. */ readonly gameObject: GameObject; /** TRUE if several instances of this component are allowed in the same object. */ readonly allowMultiple: boolean; /** @internal */ private _active; /** @internal */ constructor(container: Container, gameObject: GameObject, name?: string); /** TRUE for enabled object, FALSE for disabled object. */ get active(): boolean; /** TRUE for enabled object, FALSE for disabled object. */ set active(active: boolean); /** * This method is called when the active state changes. */ protected onActiveChange(): void; /** * @returns The current loaded scene */ protected getCurrentScene(): T; /** * @returns The GameObject to which this component is attached */ protected getGameObject(): T; /** * Returns all the components in the game object. * @returns The found components */ getComponents(): Component[]; /** * Returns all the components for the given class in the game object. * @param componentClass The class of the components * @returns The found components */ getComponents(componentClass: ComponentClass): T[]; /** * Returns the first component found for the given class, or undefined otherwise. * @param componentClass The class of the component * @returns The found component */ getComponent(componentClass: ComponentClass): T; /** * Returns the first component found for the given name, or undefined otherwise. * @param name The name of the component * @returns The found component */ getComponent(name: string): T; /** * Returns TRUE if the game object has a component for the given class, or FALSE otherwise * @param componentClass The class of the component to find * @returns boolean */ hasComponent(componentClass: ComponentClass): boolean; /** * @param name The name of the component to find * @returns boolean */ hasComponent(name: string): boolean; /** * Removes the given component in the GameObject * @param component The class of the component to remnove */ removeComponent(component: Component): void; /** @internal */ protected _destroy(): void; /** @internal */ protected _stopGame(): void; } /** @internal */ declare abstract class EngineComponent extends Component { protected readonly updateEvent: FrameEvent; } /** @internal */ declare abstract class ColliderComponent extends Component { protected readonly updateEvent: FrameEvent; } /** * Base class for all components that execute logic at physics frame rate. Ideal for custom physics. * @public * @category Core * @example * ```js * class PlayerMovements extends PhysicsComponent { * init(options) { * // executed after instantiation * } * start() { * // executed in the first available frame * } * update() { * // executed on every frame * } * } * ``` * @example * ```ts * class PlayerMovements extends PhysicsComponent { * protected init(options?: InitOptions): void { * // executed after instantiation * } * protected start(): void { * // executed in the first available frame * } * protected update(): void { * // executed on every frame * } * } * ``` */ declare abstract class PhysicsComponent extends Component { protected readonly updateEvent: FrameEvent; } /** @internal */ declare abstract class TransformComponent extends Component { protected readonly updateEvent: FrameEvent; } /** * Base class for all components that execute logic before rendering. Ideal for components that translate cameras. * @public * @category Core * @example * ```js * class FollowPlayerCamera extends PreRenderComponent { * init(options) { * // executed after instantiation * } * start() { * // executed in the first available frame * } * update() { * // executed on every frame * } * } * ``` * @example * ```ts * class FollowPlayerCamera extends PreRenderComponent { * protected init(options?: InitOptions): void { * // executed after instantiation * } * protected start(): void { * // executed in the first available frame * } * protected update(): void { * // executed on every frame * } * } * ``` */ declare abstract class PreRenderComponent extends Component { protected readonly updateEvent: FrameEvent; } /** @internal */ declare abstract class CameraComponent extends Component { protected readonly updateEvent: FrameEvent; } /** @internal */ declare abstract class RenderComponent extends Component { protected readonly updateEvent: FrameEvent; } /** * Information about the collision * @public * @category Components * @example * ``` { resolution: { penetration: 10; direction: {x: 1, y: 0}; displacementDirection: {x: -1, y: 0}; }, collider: {}, localCollider: {}, gameObject: {} } * ``` */ interface CollisionData { /** Contains information about the penetration and direction of the collision. */ resolution: ICollisionResolution; /** The collider on the other side of the collision. */ collider: ICollider; /** The object on the other side of the collision. */ gameObject: GameObject; /** * @return The object on the other side of the collision. */ getGameObject: () => T; /** The collider belonging to the queried component */ localCollider: ICollider; } /** * Every collider component implements this interface. * @public * @category Components */ interface IColliderComponent { /** * Check if the collider is in contact with any collider of the given layer. * @param layer The layer to check * @returns TRUE if is colliding, FALSE instead */ collidesWithLayer(layer: string): boolean; /** * Check if the collider is in contact with any collider of the given layers. * @param layers The layers to check * @param condition "or" if collides with at least one layer (default value), "and" if collides with all layers. * @returns TRUE if is colliding, FALSE instead */ collidesWithLayers(layers: string[], condition: "or" | "and"): boolean; /** * If there is a collision with the given layer, it returns information about it, or null if there is none. * @param layer The layer to check * @returns The collision data object, or NULL instead */ getCollisionWithLayer(layer: string): CollisionData | null; /** * If there are collisions with the given layer, it returns information about every collision. * @param layer The layer to check * @returns The collection of collision data */ getCollisionsWithLayer(layer: string): CollisionData[]; /** * If there are collisions with the given layers, it returns information about every collision. * @param layers The layers to check * @returns The collection of collision data */ getCollisionsWithLayers(layers: string[]): CollisionData[]; } /** @internal */ declare abstract class BaseCollider extends ColliderComponent implements IColliderComponent { protected renderer: RenderComponent; readonly colliders: ICollider[]; /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ layer: string; /** TRUE if this collider interact with rigid bodies */ physics: boolean; private activateColliders; protected abstract updateRealSize(): void; protected abstract updatePosition(): void; protected abstract updateColliders(): void; protected update(): void; /** * Check if the collider is in contact with any collider of the given layer. * @param layer The layer to check * @returns TRUE if is colliding, FALSE instead */ collidesWithLayer(layer: string): boolean; /** * Check if the collider is in contact with any collider of the given layers. * @param layers The layers to check * @param condition "or" if collides with at least one layer (default value), "and" if collides with all layers. * @returns TRUE if is colliding, FALSE instead */ collidesWithLayers(layers: string[], condition?: "or" | "and"): boolean; /** * Finds the first collision with the given layer and returns it, or returns null instead. * @param layer The layer to check * @returns The collision data object, or NULL instead */ getCollisionWithLayer(layer: string): CollisionData | null; /** * If there are collisions with the given layer, it returns information about every collision. * @param layer The layer to check * @returns The collection of collision data */ getCollisionsWithLayer(layer: string): CollisionData[]; /** * If there are collisions with the given layers, it returns information about every collision. * @param layers The layers to check * @returns The collection of collision data */ getCollisionsWithLayers(layers: string[]): CollisionData[]; protected createCollisionData(collision: ICollision): CollisionData; protected onActiveChange(): void; protected onDestroy(): void; } /** * BoxCollider configuration options * @public * @category Components * @example * ```js * this.addComponent(BoxCollider, { * width: 32, * height: 32, * rotation: new Rotation(0), * offsetX: 0, * offsetY: 0, * layer: "PlayerHitbox", * debug: false, * physics: true, * }); * ``` */ interface BoxColliderOptions extends InitOptions { /** Width of the rectangle in pixels */ width: number; /** Height of the rectangle in pixels */ height: number; /** x-axis offset */ offsetX?: number; /** y-axis offset */ offsetY?: number; /** Rectangle rotation (degrees or radians) */ rotation?: Rotation; /** Collision layer, if it's not setted, it uses the game object layer */ layer?: string; /** TRUE if this collider interact with rigid bodies */ physics?: boolean; /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug?: boolean; } /** * Rectangle shaped collider for 2d collisions. * @public * @category Components * @example * ```js * this.addComponent(BoxCollider, { * width: 32, * height: 32, * }); * ``` * @example * ```js * this.addComponent(BoxCollider, { * width: 32, * height: 32, * rotation: new Rotation(0), * offsetX: 0, * offsetY: 0, * layer: "PlayerHitbox", * debug: false, * physics: true, * }); * ``` */ declare class BoxCollider extends BaseCollider { /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug: boolean; /** Width of the rectangle in pixels */ width: number; /** Height of the rectangle in pixels */ height: number; /** x-axis offset */ offsetX: number; /** y-axis offset */ offsetY: number; /** Rectangle rotation (degrees or radians) */ rotation: Rotation; private realWidth; private realHeight; private realOffset; private realPosition; private realRotation; private applyRotation; private innerPosition; protected init(config: BoxColliderOptions): void; protected updateRealSize(): void; protected updatePosition(): void; private translate; protected updateColliders(): void; } /** * BallCollider configuration options * @public * @category Components * @example * ```js * this.addComponent(BallCollider, { * radius: 32, * offsetX: 0, * offsetY: 0, * layer: "PlayerHitbox", * debug: false, * physics: true, * }); * ``` */ interface BallColliderOptions extends InitOptions { /** Radius in pixels */ radius: number; /** x-axis offset */ offsetX?: number; /** y-axis offset */ offsetY?: number; /** Collision layer, if it's not setted, it uses the game object layer */ layer?: string; /** TRUE if this collider interact with rigid bodies */ physics?: boolean; /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug?: boolean; } /** * Circumference shaped collider for 2d collisions. * @public * @category Components * @example * ```js * this.addComponent(BallCollider, { * radius: 32 * }); * ``` * @example * ```js * this.addComponent(BallCollider, { * radius: 32, * offsetX: 0, * offsetY: 0, * layer: "PlayerHitbox", * debug: false, * physics: true, * }); * ``` */ declare class BallCollider extends BaseCollider { /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug: boolean; /** Radius in pixels */ radius: number; /** x-axis offset */ offsetX: number; /** y-axis offset */ offsetY: number; private realRadius; private realOffset; private realPosition; private innerPosition; protected init(config: BallColliderOptions): void; protected updateRealSize(): void; protected updatePosition(): void; private translate; protected updateColliders(): void; } /** * Tileset configuration to be used with the TilemapRenderer * @public * @category Components * @example * ```js * const tileset = { * image: this.assetManager.getImage("image.png"), * width: 3, * tileWidth: 16, * tileHeight: 16, * margin: new Vector2(0, 0), * spacing: new Vector2(0, 0), * }; * ``` */ interface Tileset { /** The tileset image element */ image: HTMLImageElement; width: number; tileWidth: number; tileHeight: number; /** Margin of the tile in pixels (space in the top and the left) */ margin?: Vector2; /** Spacing of the tile in pixels (space in the bottom and the right) */ spacing?: Vector2; } /** * TilemapRenderer configuration options * @public * @category Components * @example * ```js * this.addComponent(TilemapRenderer, { * tileset: { * image: this.assetManager.getImage("image.png"), * width: 3, * tileWidth: 16, * tileHeight: 16, * margin: new Vector2(0, 0), * spacing: new Vector2(0, 0), * } * tiles: [1, 2, 0, 0, 0, 0, 2, 1, 3, 4, 5, 5, 5, 5, 4, 3], * width: 8, * tileWidth: 16, * tileHeight: 16, * layer: "Tilemap", * smooth: false, * }); * ``` */ interface TilemapRendererOptions { /** Id of tiles separated by commas. The ids start at 1, and increment from left to right, * from top to bottom. ID 0 (zero) represents a space with no tile. */ tiles: string; /** The Tileset instance */ tileset: Tileset; width: number; tileWidth?: number; tileHeight?: number; /** The render layer */ layer?: string; /** Change the opacity between 1 and 0 */ opacity?: number; /** Define a color for tinting the tiles */ tintColor?: string; /** Smoothing pixels (not recommended for pixel art) */ smooth?: boolean; } /** * @internal */ interface ITilemapRenderer { tiles: number[]; width: number; height: number; tileWidth: number; tileHeight: number; realWidth: number; realHeight: number; } /** * The TilemapRenderer component allows you to render a tile map defined by an array of tile ids, using an instance of the TileSet object. * @public * @category Components * @example * ```js * this.addComponent(TilemapRenderer, { * tileset: { * image: this.assetManager.getImage("image.png"), * width: 3, * tileWidth: 16, * tileHeight: 16, * } * tiles: [1, 2, 0, 0, 0, 0, 2, 1, 3, 4, 5, 5, 5, 5, 4, 3], * width: 8, * tileWidth: 16, * tileHeight: 16, * }); * ``` * @example * ```js * this.addComponent(TilemapRenderer, { * tileset: { * image: this.assetManager.getImage("image.png"), * width: 3, * tileWidth: 16, * tileHeight: 16, * margin: new Vector2(0, 0), * spacing: new Vector2(0, 0), * } * tiles: [1, 2, 0, 0, 0, 0, 2, 1, 3, 4, 5, 5, 5, 5, 4, 3], * width: 8, * tileWidth: 16, * tileHeight: 16, * layer: "Tilemap", * smooth: false, * }); * ``` */ declare class TilemapRenderer extends RenderComponent implements ITilemapRenderer { /** Id of tiles separated by commas. The ids start at 1, and increment from left to right, * from top to bottom. ID 0 (zero) represents a space with no tile. */ tiles: number[]; /** The width of the tilemap in tiles */ width: number; /** * The height of the tilemap in tiles (this is calculated by the component) * @readonly */ height: number; /** The width of the tile to render in pixels */ tileWidth: number; /** The height of the tile to render in pixels */ tileHeight: number; /** Define a color for tinting the tiles */ tintColor: string; /** Change the opacity between 1 and 0 */ opacity: number; /** * Tilemap width in pixels (this is calculated by the component) * @readonly */ realWidth: number; /** * Tilemap height in pixels (this is calculated by the component) * @readonly */ realHeight: number; private tileset; private renderData; private layer; private scaledTileWidth; private scaledTileHeight; protected init({ tiles, tileset, tileWidth, tileHeight, width, layer, opacity, tintColor, smooth, }: TilemapRendererOptions): void; protected update(): void; private updateRenderData; } /** * TilemapCollider configuration options * @public * @category Components * @example * ```js * this.addComponent(TilemapCollider, { * tilemapRenderer: this.getComponent(TilemapRenderer), * layer: "Foreground", * debug: false, * composite: true, * }); * ``` */ interface TilemapColliderOptions extends InitOptions { /** TilemapRenderer from which the tiles information will be obtained to generate the colliders */ tilemapRenderer: ITilemapRenderer; /** Generate colliders that represent the outer lines of the tile map */ composite?: boolean; /** Collision layer, if it's not setted, it uses the game object layer */ layer?: string; /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug?: 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, position, scale and rotation of the collider once it has been generated. * @public * @category Components * @example * ```js * this.addComponent(TilemapCollider, { * tilemapRenderer: this.getComponent(TilemapRenderer), * }); * ``` * @example * ```js * this.addComponent(TilemapCollider, { * tilemapRenderer: this.getComponent(TilemapRenderer), * layer: "Foreground", * debug: false, * composite: true, * }); * ``` */ declare class TilemapCollider extends BaseCollider { /** TilemapRenderer from which the tiles information will be obtained to generate the colliders */ private tilemapRenderer; /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ private debug; /** Generate colliders that represent the outer lines of the tile map */ private composite; private scaledWidth; private scaledHeight; private scaledTileWidth; private scaledTileHeight; private position; protected init(config: TilemapColliderOptions): void; private useBoxColliders; private needsCollider; private useLineColliders; private hasTile; private addLineCollider; private getNeighbors; protected updateRealSize(): void; protected updatePosition(): void; protected updateColliders(): void; } /** * PolygonCollider configuration options * @public * @category Components * @example * ```js * this.addComponent(PolygonCollider, { * vertexModel: [new Vector2(0,0), new Vector2(32, 32), new Vector2(64, 0)], * rotation: new Rotation(0), * offsetX: 0, * offsetY: 0, * layer: "Hills", * debug: false, * physics: true, * }); * ``` */ interface PolygonColliderOptions extends InitOptions { /** Collection of 2d vectors representing the vertices of the collider */ vertexModel: Vector2[]; /** x-axis offset */ offsetX?: number; /** y-axis offset */ offsetY?: number; /** Edges rotation (degrees or radians) */ rotation?: Rotation; /** Collision layer, if it's not setted, it uses the game object layer */ layer?: string; /** TRUE if this collider interact with rigid bodies */ physics?: boolean; /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug?: boolean; } /** * Polygon shaped Collider for 2d collisions. Only convex polygons are allowed. * @public * @category Components * @example * ```js * this.addComponent(PolygonCollider, { * vertexModel: [new Vector2(0,0), new Vector2(32, 32), new Vector2(64, 0)], * }); * ``` * @example * ```js * this.addComponent(PolygonCollider, { * vertexModel: [new Vector2(0,0), new Vector2(32, 32), new Vector2(64, 0)], * rotation: new Rotation(0), * offsetX: 0, * offsetY: 0, * layer: "Hills", * debug: false, * physics: true, * }); * ``` */ declare class PolygonCollider extends BaseCollider { /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug: boolean; /** Collection of 2d vectors representing the vertices of the collider */ vertexModel: Vector2[]; /** x-axis offset */ offsetX: number; /** y-axis offset */ offsetY: number; /** Rectangle rotation (degrees or radians) */ rotation: Rotation; private scaledVertexModel; private scaledOffset; private scaledPosition; private finalRotation; private innerPosition; protected init(config: PolygonColliderOptions): void; protected updateRealSize(): void; protected updatePosition(): void; private translate; protected updateColliders(): void; } /** @internal */ declare class PolygonColliderRenderer extends RenderComponent { private renderData; private collider; protected init({ collider }: { collider: ICollider; }): void; protected update(): void; } /** * EdgeCollider configuration options * @public * @category Components * @example * ```js * this.addComponent(EdgeCollider, { * vertexModel: [new Vector2(0,0), new Vector2(32, 32)], * rotation: new Rotation(0), * offsetX: 0, * offsetY: 0, * layer: "Hills", * debug: false, * physics: true, * }); * ``` */ interface EdgeColliderOptions extends InitOptions { /** Collection of 2d vectors representing the vertices of the collider */ vertexModel: Vector2[]; /** x-axis offset */ offsetX?: number; /** y-axis offset */ offsetY?: number; /** Edges rotation (degrees or radians) */ rotation?: Rotation; /** Collision layer, if it's not setted, it uses the game object layer */ layer?: string; /** TRUE if this collider interact with rigid bodies */ physics?: boolean; /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug?: boolean; } /** * Collider composed of lines defined by its vertices, for 2d collisions. * @public * @category Components * @example * ```js * this.addComponent(EdgeCollider, { * vertexModel: [new Vector2(0,0), new Vector2(32, 32)], * }); * ``` * @example * ```js * this.addComponent(EdgeCollider, { * vertexModel: [new Vector2(0,0), new Vector2(32, 32)], * rotation: new Rotation(0), * offsetX: 0, * offsetY: 0, * layer: "Hills", * debug: false, * physics: true, * }); * ``` */ declare class EdgeCollider extends BaseCollider { /** If debug mode is enabled, the collider shape is rendered using the object's render layer */ debug: boolean; /** Collection of 2d vectors representing the vertices of the collider */ vertexModel: Vector2[]; /** x-axis offset */ offsetX: number; /** y-axis offset */ offsetY: number; /** Rectangle rotation (degrees or radians) */ rotation: Rotation; private scaledVertexModel; private scaledOffset; private scaledPosition; private finalRotation; private innerPosition; protected init(config: EdgeColliderOptions): void; protected updateRealSize(): void; protected updatePosition(): void; private translate; protected updateColliders(): void; } /** * Sprite configuration options * @public * @category Components * @example * ```js * const sprite = new Sprite({ * image: this.assetManager.getImage("image.png"), * slice: {x: 0, y:0, width: 16, height: 16}, * smooth: false * }); * ``` */ interface SpriteConfig { /** The image element to render */ image: HTMLImageElement; /** Cut the image based on straight coordinates starting from the top left downward */ slice?: Slice; /** Smoothing pixels (not recommended for pixel art) */ smooth?: boolean; } /** * The Sprite is an object that is composed of the Image element and allow to slice it and smooth its pixels. * @public * @category Components * @example * ```js * const sprite = new Sprite({image: this.assetManager.getImage("image.png")}); * ``` * @example * ```js * const sprite = new Sprite({ * image: this.assetManager.getImage("image.png"), * slice: {x: 0, y:0, width: 16, height: 16}, * smooth: false * }); * ``` */ declare class Sprite { /** The image element to render */ readonly image: HTMLImageElement; /** Cut the image based on straight coordinates starting from the top left downward */ readonly slice: Slice; /** Smoothing pixels (not recommended for pixel art) */ readonly smooth: boolean; private _width; private _height; private _loaded; /** * @param config The sprite configuration options */ constructor(config: SpriteConfig); /** The image width */ get width(): number; /** The image height */ get height(): number; /** TRUE if the image is loaded */ get loaded(): boolean; } /** * SpriteRenderer configuration options. * @public * @category Components * @example * ```js * this.addComponent(SpriteRenderer, { * sprite: new Sprite({image: this.assetManager.getImage("image.png")}), * offset: new Vector2(0, 0), * flipHorizontal: false, * flipVertical: false, * rotation: new Rotation(0), * opacity: 1, * tiled: new Vector2(1,1), * maskColor: "#FF0000", * maskColorMix: 0, * tintColor: "#00FF00", * layer: "Background", * scale: new Vector2(1,1), * width: 16, * height: 16 * }); * ``` */ interface SpriteRendererOptions { /** The sprite to render */ sprite?: Sprite; /** X-axis and Y-axis offset */ offset?: Vector2; /** Image rotation (degrees or radians) */ rotation?: Rotation; /** Flip the image horizontally */ flipHorizontal?: boolean; /** Flip the image vertically */ flipVertical?: boolean; /** Change the opacity between 1 and 0 */ opacity?: number; /** Render the image in tiles */ tiled?: Vector2; /** Define a mask color for the image */ maskColor?: string; /** Define the opacity of the mask color between 1 and 0 */ maskColorMix?: number; /** Define a color for tinting the sprite image */ tintColor?: string; /** The render layer */ layer?: string; /** Scale the image based on a vector */ scale?: Vector2; /** Overwrite the original image width */ width?: number; /** Overwrite the original image height */ height?: number; } /** * The SpriteRenderer component renders the Sprite and allows to configure options such as opacity, offser, color, etc. * @public * @category Components * @example * ```js * this.addComponent(SpriteRenderer, { * sprite: new Sprite({image: this.assetManager.getImage("image.png")}) * }); * ``` * @example * ```js * this.addComponent(SpriteRenderer, { * sprite: new Sprite({image: this.assetManager.getImage("image.png")}), * offset: new Vector2(0, 0), * flipHorizontal: false, * flipVertical: false, * rotation: new Rotation(0), * opacity: 1, * tiled: new Vector2(1,1), * maskColor: "#FF0000", * maskColorMix: 0, * tintColor: "#00FF00", * layer: "Background", * scale: new Vector2(1,1), * width: 16, * height: 16 * }); * ``` */ declare class SpriteRenderer extends RenderComponent { /** The sprite to render */ sprite: Sprite; /** X-axis and Y-axis offset */ offset: Vector2; /** Flip the image horizontally */ flipHorizontal: boolean; /** Flip the image vertically */ flipVertical: boolean; /** Image rotation (degrees or radians) */ rotation: Rotation; /** Change the opacity between 1 and 0 */ opacity: number; /** Define a mask color for the image */ maskColor: string; /** Define the opacity of the mask color between 1 and 0 */ maskColorMix: number; /** Define a color for tinting the sprite image */ tintColor: string; /** The render layer */ layer: string; /** Scale the image based on a vector */ scale: Vector2; /** Overwrite the original image width */ width: number; /** Overwrite the original image height */ height: number; private _tiled; private renderData; private innerPosition; private cachePosition; private cacheRenderPosition; private scaledOffset; private cacheScale; protected init(config?: SpriteRendererOptions): void; /** Render the image in tiles */ get tiled(): Vector2; /** Renders the image in tiles */ set tiled(tiled: Vector2); protected update(): void; private updateRenderDataArray; private updateRenderData; private calculateRenderPosition; private translateRenderPosition; } /** * TextRenderer configuration options. * @public * @category Components * @example * ```js * this.addComponent(TextRenderer, { * text: "Hello world", * font: "Impact", * fontSize: 16, * width: 320, * height: 32, * color: "#FF0000", * offset: new Vector2(0, 0), * lineSeparation: 1, * letterSpacing: 1, * charRanges: [32, 126, 161, 255], * smooth: false, * rotation: new Rotation(0), * opacity: 1, * orientation: TextOrientation.RightDown * bitmapMargin: new Vector2(0, 0), * bitmapSpacing: new Vector2(0, 0), * }); * ``` */ interface TextRendererOptions { /** The text to render */ text: string; /** The font family to use */ font: FontFace | string; /** The size of the font in pixels */ fontSize: number; /** The text color */ color: string; /** The width of the invisible box where the text is rendered */ width: number; /** The height of the invisible box where the text is rendered */ height: number; /** The separation between lines in pixels */ lineSeparation?: number; /** The space between chars in pixels */ letterSpacing?: number; /** X-axis and Y-axis offset */ offset?: Vector2; /** Range of characters covered by the component defined in number pairs. * The default value is [32, 126, 161, 255], this means that characters * from 32 to 126 and from 161 to 255 will be valid. */ charRanges?: number[]; /** Smoothing pixels (not recommended for pixel art) */ smooth?: boolean; /** Text rotation (degrees or radians) */ rotation?: Rotation; /** Change the opacity between 1 and 0 */ opacity?: number; /** Direction in which the text will be rendered. */ orientation?: TextOrientation; /** Margin in pixels to correct badly sliced characters. */ bitmapMargin?: Vector2; /** Spacing in pixels to correct badly sliced characters. */ bitmapSpacing?: Vector2; } /** * The TextRenderer component allows to render text using font families, colors, and other configuration options. * @public * @category Components * @example * ```js * this.addComponent(TextRenderer, { * text: "Hello world", * font: "Impact", * fontSize: 16, * width: 320, * height: 32, * color: "#FF0000", * }); * ``` * @example * ```js * this.addComponent(TextRenderer, { * text: "Hello world", * font: "Impact", * fontSize: 16, * width: 320, * height: 32, * color: "#FF0000", * offset: new Vector2(0, 0), * lineSeparation: 1, * letterSpacing: 1, * charRanges: [32, 126, 161, 255], * smooth: false, * rotation: new Rotation(0), * opacity: 1, * orientation: TextOrientation.RightDown * bitmapMargin: new Vector2(0, 0), * bitmapSpacing: new Vector2(0, 0), * }); * ``` */ declare class TextRenderer extends RenderComponent { /** The text to render */ text: string; /** The font family to use */ font: FontFace | string; /** The size of the font in pixels. */ fontSize: number; /** The width of the invisible box where the text is rendered */ width: number; /** The height of the invisible box where the text is rendered */ height: number; /** X-axis and Y-axis offset */ offset: Vector2; /** The text color */ color: string; /** The separation between lines in pixels */ lineSeparation: number; /** The space between chars in pixels */ letterSpacing: number; /** Range of characters covered by the component defined in number pairs. * The default value is [32, 126, 161, 255], this means that characters * from 32 to 126 and from 161 to 255 will be valid. */ charRanges: number[]; /** Smoothing pixels (not recommended for pixel art) */ smooth: boolean; /** Text rotation (degrees or radians) */ rotation: Rotation; /** Change the opacity between 1 and 0 */ opacity: number; /** Direction in which the text will be rendered. */ orientation: TextOrientation; /** Margin in pixels to correct badly sliced characters. */ bitmapMargin: Vector2; /** Spacing in pixels to correct badly sliced characters. */ bitmapSpacing: Vector2; private renderData; private lastFrameText; protected init(config: TextRendererOptions): void; protected start(): void; protected update(): void; private crop; } /** * MaskRenderer configuration options. * @public * @category Components * @example * ```js * this.addComponent(MaskRenderer, { * shape: MaskShape.Rectangle, * width: 32, * height: 32, * color: "#000000", * offset: new Vector2(0, 0), * rotation: new Rotation(0), * opacity: 1, * layer: "Mask", * }); * ``` * @example * ```js * this.addComponent(MaskRenderer, { * shape: MaskShape.Circumference, * radius: 16, * color: "#000000", * offset: new Vector2(0, 0), * rotation: new Rotation(0), * opacity: 1, * layer: "Mask", * }); * ``` */ interface MaskRendererOptions { /** Mask shape: Rectangle or Circumference */ shape: MaskShape; /** The color of the mask */ color: string; /** Mask width in pixels (only for rectangle) */ width?: number; /** Mask height in pixels (only for rectangle) */ height?: number; /** Mask radius in pixels (only for circumference) */ radius?: number; /** X-axis and Y-axis offset */ offset?: Vector2; /** Mask rotation (degrees or radians) */ rotation?: Rotation; /** Change the opacity between 1 and 0 */ opacity?: number; /** The render layer */ layer?: string; } /** * Renders a rectangle based on width, height and color * @public * @category Components * @example * ```js * this.addComponent(MaskRenderer, { * shape: MaskShape.Rectangle, * width: 32, * height: 32, * color: "#000000", * }); * ``` * @example * ```js * this.addComponent(MaskRenderer, { * shape: MaskShape.Circumference, * radius: 16, * color: "#000000", * offset: new Vector2(0, 0), * rotation: new Rotation(0), * opacity: 1, * layer: "Mask", * }); * ``` */ declare class MaskRenderer extends RenderComponent { /** 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 (degrees or radians) */ rotation: Rotation; /** Change the opacity between 1 and 0 */ opacity: number; /** The render layer */ layer: string; private renderData; private innerPosition; private scaledOffset; protected init(config: MaskRendererOptions): void; protected update(): void; private calculateRenderPosition; private translateRenderPosition; } /** * VideoRenderer configuration options. * @public * @category Components * @example * ```js * this.addComponent(VideoRenderer, { * video: this.assetManager.getVideo("video.mp4"), * width: 1920, * height: 1080, * offset: new Vector2(0, 0), * flipHorizontal: false, * flipVertical: false, * rotation: new Rotation(0), * opacity: 1, * maskColor: "#FF0000", * maskColorMix: 0, * tintColor: "#00FF00", * layer: "Video", * slice: {x: 0, y:0, width: 1920, height: 1080}, * volume: 1, * loop: false, * }); * ``` */ interface VideoRendererOptions { /**The video element to render */ video: HTMLVideoElement; /** Overwrite the original video width */ width?: number; /** Overwrite the original video height */ height?: number; /** X-axis and Y-axis offset */ offset?: Vector2; /** Video rotation (degrees or radians) */ rotation?: Rotation; /** Flip the video horizontally */ flipHorizontal?: boolean; /** Flip the video vertically */ flipVertical?: boolean; /** Change the opacity between 1 and 0 */ opacity?: number; /** Define a mask color for the video */ maskColor?: string; /** Define the opacity of the mask color between 1 and 0 */ maskColorMix?: number; /** Define a color for tinting the video */ tintColor?: string; /** The render layer */ layer?: string; /** Cut the video based on straight coordinates starting from the top left downward */ slice?: Slice; /** The volume of the video. Values between 1 and 0 */ volume?: number; /** TRUE if the video will play in loop */ loop?: boolean; } /** * The VideoRenderer component plays and renders a video element, and allows configuring options such as its dimensions, coloring, etc. * @public * @category Components * @example * ```js * this.addComponent(VideoRenderer, { * video: this.assetManager.getVideo("video.mp4"), * }); * ``` * @example * ```js * this.addComponent(VideoRenderer, { * video: this.assetManager.getVideo("video.mp4"), * width: 1920, * height: 1080, * offset: new Vector2(0, 0), * flipHorizontal: false, * flipVertical: false, * rotation: new Rotation(0), * opacity: 1, * maskColor: "#FF0000", * maskColorMix: 0, * tintColor: "#00FF00", * layer: "Video", * slice: {x: 0, y:0, width: 1920, height: 1080}, * volume: 1, * loop: false, * }); * ``` */ declare class VideoRenderer extends RenderComponent { /**The video element to render */ video: HTMLVideoElement; /** Overwrite the original video width */ width: number; /** Overwrite the original video height */ height: number; /** X-axis and Y-axis offset */ offset: Vector2; /** Video rotation (degrees or radians) */ rotation: Rotation; /** Flip the video horizontally */ flipHorizontal: boolean; /** Flip the video vertically */ flipVertical: boolean; /** Change the opacity between 1 and 0 */ opacity: number; /** Define a mask color for the video */ maskColor: string; /** Define the opacity of the mask color between 1 and 0 */ maskColorMix: number; /** Define a color for tinting the video */ tintColor: string; /** The render layer */ layer: string; /** Cut the video based on straight coordinates starting from the top left downward */ slice?: Slice; private renderData; private innerPosition; private scaledOffset; private _loop; private _volume; private _playing; private _paused; /** The volume of the video */ set volume(volume: number); /** The volume of the video */ get volume(): number; /** TRUE if the video will play in loop */ set loop(loop: boolean); /** TRUE if the video will play in loop */ get loop(): boolean; /** TRUE if the video is playing */ get playing(): boolean; /** TRUE if the video is paused */ get paused(): boolean; protected init(config: VideoRendererOptions): void; /** * Play the loaded video */ play(): void; /** * Stop playing the current video */ stop(): void; /** * Plause the current video */ pause(): void; private videoEventHandler; private userInputEventHandler; protected update(): void; private calculateRenderPosition; private translateRenderPosition; protected onActiveChange(): void; protected onDestroy(): void; } /** * TiledTilemapRenderer configuration options * @public * @category Components * @example * ```js * import TilemapData from "export.json"; * * this.addComponent(TilemapRenderer, { * tileset: { * image: this.assetManager.getImage("image.png"), * width: 3, * tileWidth: 16, * tileHeight: 16, * margin: new Vector2(0, 0), * spacing: new Vector2(0, 0), * } * tiledData: TilemapData, * tilemapLayer: "Layer1", * tileWidth: 16, * tileHeight: 16, * layer: "Tilemap", * smooth: false, * }); * ``` */ interface TiledTilemapRendererOptions { /** Export of the Tiles application in JSON */ tiledData: TiledTilemap; /** The Tiled tilemap layer to render */ tilemapLayer: string; /** The Tileset instance */ tileset: Tileset; tileWidth?: number; tileHeight?: number; /** The render layer */ layer?: string; /** Smoothing pixels (not recommended for pixel art) */ smooth?: boolean; } /** * The TiledTilemapRenderer component allows you to render a tile map exported from the Tiled application, * using an instance of the TileSet object. * @public * @category Components * @example * ```js * import TilemapData from "export.json"; * * this.addComponent(TiledTilemapRenderer, { * tileset: { * image: this.assetManager.getImage("image.png"), * width: 3, * tileWidth: 16, * tileHeight: 16, * } * tiledData: TilemapData, * tilemapLayer: "Layer1", * tileWidth: 16, * tileHeight: 16, * }); * ``` * @example * ```js * import TilemapData from "export.json"; * * this.addComponent(TilemapRenderer, { * tileset: { * image: this.assetManager.getImage("image.png"), * width: 3, * tileWidth: 16, * tileHeight: 16, * margin: new Vector2(0, 0), * spacing: new Vector2(0, 0), * } * tiledData: TilemapData, * tilemapLayer: "Layer1", * tileWidth: 16, * tileHeight: 16, * layer: "Tilemap", * smooth: false, * }); * ``` */ declare class TiledTilemapRenderer extends RenderComponent implements ITilemapRenderer { /** * Id of tiles separated by commas. The ids start at 1, and increment from left to right, * from top to bottom. ID 0 (zero) represents a space with no tile. * @readonly */ tiles: number[]; /** The width of the tile to render in pixels */ tileWidth: number; /** The height of the tile to render in pixels */ tileHeight: number; /** * The width of the tilemap in tiles (this is calculated by the component) * @readonly */ width: number; /** * The height of the tilemap in tiles (this is calculated by the component) * @readonly */ height: number; /** Define a color for tinting the tiles */ tintColor: string; /** Change the opacity between 1 and 0 */ opacity: number; /** * Tilemap width in pixels (this is calculated by the component) * @readonly */ realWidth: number; /** * Tilemap height in pixels (this is calculated by the component) * @readonly */ realHeight: number; private tiledData; private tiledLayer; private tileset; private layer; private smooth?; private infinite; private tilesetTileIds; private chunks; private scaledTileWidth; private scaledTileHeight; private renderData; protected init({ tiledData, tilemapLayer, tileset, tileWidth, tileHeight, layer, smooth, }: TiledTilemapRendererOptions): void; protected update(): void; private processTilemap; private processFixedLayer; private processChunk; private getTilesetTileId; private updateRenderData; } /** @category Components */ interface TiledTilemap { width: number; height: number; infinite: boolean; layers: (TiledLayer | TiledObjectLayer)[]; renderorder: string; tilesets: { firstgid: number; }[]; tilewidth: number; tileheight: number; } /** @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; } /** * Animation configuration options * @public * @category Components * @example * ```js animator.addAnimation({ sprites: [0, 16, 32, 48].map( (x: number) => new Sprite({ image: assetManager.getImage("spritesheet.png"), smooth: false, slice: {x, y: 64, width: 16, height: 16), }) ), framerate: 10, loop: true, }); * ``` */ interface AnimationConfig { /** Array of sprites to represent each animation frame */ sprites: Sprite[]; /** Plays the animation in a loop */ loop: boolean; /** Frame rate in seconds */ framerate: number; } /** * Animator configuration options * @public * @category Components * @example * ```js this.addComponent(Animator, { spriteRenderer: this.getComponent(SpriteRenderer), }); * ``` */ interface AnimatorOptions extends InitOptions { /** The SpriteRenderer component in which the animation will be rendered */ spriteRenderer: SpriteRenderer; } /** * The Animator component is used to render sets of sprites as animations. * @public * @category Components * @example * ```js const animator = this.addComponent(Animator, { spriteRenderer: this.getComponent(SpriteRenderer), }); animator.addAnimation({ sprites: [0, 16, 32, 48].map( (x: number) => new Sprite({ image: assetManager.getImage("spritesheet.png"), smooth: false, slice: {x, y: 64, width: 16, height: 16), }) ), framerate: 10, loop: true, }); animator.playAnimation(); * ``` * @example * ```js const animator = this.addComponent(Animator, { spriteRenderer: this.getComponent(SpriteRenderer), }); animator.addAnimation({ sprites: [0, 16, 32, 48].map( (x: number) => new Sprite({ image: assetManager.getImage("spritesheet.png"), smooth: false, slice: {x, y: 64, width: 16, height: 16), }) ), framerate: 10, loop: true, }, "idle", 10); animator.playAnimation("idle"); * ``` */ declare class Animator extends EngineComponent { private spriteRenderer; private animations; private currentAnimation; private paused; protected init({ spriteRenderer }: AnimatorOptions): void; protected update(): void; /** * Adds an animation to the component * @param animation The animation config object * @param name The name to identify the animation. Optional if the animator will only play one animation. * @param framerate [optional] Overwrites the framerate * @returns The animator instance */ addAnimation(animation: AnimationConfig, name?: string, framerate?: number): this; /** * Plays the animation * @param name The name to identify the animation. Optional if the animator will only play one animation. * @throws Exception when animation name does not exist */ playAnimation(name?: string): void; /** * Pauses the current animation */ pause(): void; /** * Resumes the current animation */ resume(): void; /** * Stops the current animation */ stopAnimation(): void; /** * Returns TRUE if the current animatio is playing, FALSE instead * @param name The name to identify the animation. Optional if the animator will only play one animation * @returns TRUE if the current animatio is playing, FALSE instead */ isPlayingAnimation(name?: string): boolean; /** * Returns TRUE if the current animatio is paused, FALSE instead * @returns TRUE if the current animatio is paused, FALSE instead */ isPaused(): boolean; } /** * AudioPlayer configuration options * @public * @category Components * @example * ```js * const audioPlayer = this.addComponent(AudioPlayer, { * volume: 1, * loop: true, * }); * ``` */ interface AudioPlayerOptions extends InitOptions { /** [optional] The initial volume. Values between 1 and 0. */ volume?: number; /** [optional] Plays the audio in loop */ loop?: boolean; } /** * The AudioPlayer component is used to play audio files and audio clips, like music and sound fx. * @public * @category Components * @example * ```js * const audioPlayer = this.addComponent(AudioPlayer); * audioPlayer.addAudioSource(AssetManager.getAudio("audio.ogg"), "AudioName"); * audioPlayer.loadAudioSource("AudioName", true, 1); * audioPlayer.play(); * * // plays a clip only once * audioPlayer.playClip(AssetManager.getAudio("clip.ogg"), 1); * ``` */ declare class AudioPlayer extends EngineComponent { /** @internal */ readonly allowMultiple: boolean; private audioContext; private tracks; private audioSourceCache; private _audioSource; private _volume; private _loop; private _playing; private _paused; /** The loaded audio source element */ get audioSource(): HTMLAudioElement; /** The loaded audio volume */ set volume(volume: number); /** The loaded audio volume */ get volume(): number; /** Plays the loaded audio in loop */ set loop(loop: boolean); /** Plays the loaded audio in loop */ get loop(): boolean; /** The loaded audio is playing */ get playing(): boolean; /** The loaded audio is paused */ get paused(): boolean; protected init({ loop, volume }?: AudioPlayerOptions): void; /** * Play once the given audio source * @param audioSource The audio source element * @param volume [optional] The audio volume. Values between 1 and 0. */ playClip(audioSource: HTMLAudioElement, volume?: number): void; /** * Add a new audio source * @param audioSource The audio source element * @param name The name to identify the audio source. Optional if the AudioPlayer will only play one audio. */ addAudioSource(audioSource: HTMLAudioElement, name?: string): void; /** * Load the given audio source (if there is other audio source playing, it will stop) * @param audioSourceName The name to identify the audio source * @param loop [optional] Play the audio in loop * @param volume [optional] The audio volume. Values between 1 and 0. */ loadAudioSource(audioSourceName: string, loop?: boolean, volume?: number): void; /** * Play the loaded audio source */ play(): void; /** * Stop playing the current audio source */ stop(): void; /** * Plause the current audio source */ pause(): void; private audioEventHandler; private userInputEventHandler; protected onActiveChange(): void; protected onDestroy(): void; } /** @category Components */ declare enum ButtonType { Rectangle = 0, Circumference = 1 } /** * Button configuration options * @public * @category Components * @example * ```js * cosnt button = this.addComponent(Button, { type: ButtonType.Rectangle, width: 64, height: 64, touchEnabled: true, offset: new Vector2(0, 0), }); cosnt button = this.addComponent(Button, { type: ButtonType.Circumference, radius: 32, touchEnabled: true, offset: new Vector2(0, 0), }); * ``` */ interface ButtonOptions extends InitOptions { /** The shape of the button */ type: ButtonType; /** 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; } /** * The Button component is used to interact with the mouse and touch screens. * @public * @category Components * @example * ```js * cosnt button = this.addComponent(Button, { type: ButtonType.Rectangle, width: 64, height: 64, touchEnabled: true, }); button.onClick = () => { // some action on click }; button.onPressed = () => { // some action on pressed }; * ``` * @example * ```js * cosnt button = this.addComponent(Button, { type: ButtonType.Circumference, radius: 32, touchEnabled: true, }); button.onClick = () => { // some action on click }; button.onPressed = () => { // some action on pressed }; * ``` */ declare class Button extends EngineComponent { /** @internal */ readonly allowMultiple: boolean; /** The shape of the button */ type: ButtonType; /** 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 is pressed */ pressed: boolean; /** Function executed when the button's click */ onClick: () => void; /** Function executed when the button is pressed */ onPressed: () => void; private mouse; private touch; private position; private distance; private pressedLastFrame; private scaled; protected init({ type, height, radius, touchEnabled, width, offset }: ButtonOptions): void; protected update(): void; private scale; protected resolveMouseAndRectangle(): void; protected resolveMouseAndCircumference(): void; protected resolveTouchAndRectangle(): void; protected resolveTouchAndCircumference(): void; } /** * This object can be used to click anywhere in the game and get the coordinates relative to the game world. * The coordinates are expressed as an xy vector in the browser console. * It is a useful tool to know where to position objects. * @public * @category Game Objects */ declare class SpacePointer extends GameObject { private camera; private mousePressed; private position; protected start(): void; protected update(): void; } export { type AnimationConfig, Animator, type AnimatorOptions, AudioPlayer, type AudioPlayerOptions, BallCollider, type BallColliderOptions, BoxCollider, type BoxColliderOptions, Button, type ButtonOptions, ButtonType, Camera, type IColliderComponent as ColliderComponent, type CollisionData, Component, EdgeCollider, type EdgeColliderOptions, Game, GameCamera, type GameConfig, GameObject, type GameObjectClass, type IAssetManager, type IDomManager, type IGameObjectManager, type ISceneManager, type ITilemapRenderer, type ITimeManager, type InitOptions, LAYER_DEFAULT, MaskRenderer, type MaskRendererOptions, PhysicsComponent, PolygonCollider, type PolygonColliderOptions, PolygonColliderRenderer, PreRenderComponent, RigidBody, type RigidBodyOptions, Scene, type SceneClass, SpacePointer, Sprite, type SpriteConfig, SpriteRenderer, type SpriteRendererOptions, TextRenderer, type TextRendererOptions, type TiledChunk, type TiledLayer, type TiledObject, type TiledObjectLayer, type TiledProperty, type TiledTilemap, TiledTilemapRenderer, type TiledTilemapRendererOptions, TilemapCollider, type TilemapColliderOptions, TilemapRenderer, type TilemapRendererOptions, type Tileset, Transform, VideoRenderer, type VideoRendererOptions };