littlejsengine 1.14.16 → 1.14.19

package/dist/littlejs.d.ts

@@ -165,10 +165,12 @@ declare module "littlejsengine" {
      * @memberof Engine
      */
     /** Add a new update function for a plugin
-     *  @param {PluginCallback} [updateFunction]
-     *  @param {PluginCallback} [renderFunction]
+     *  @param {PluginCallback} [update]
+     *  @param {PluginCallback} [render]
+     *  @param {PluginCallback} [glContextLost]
+     *  @param {PluginCallback} [glContextRestored]
      *  @memberof Engine */
-    export function engineAddPlugin(updateFunction?: PluginCallback, renderFunction?: PluginCallback): void;
+    export function engineAddPlugin(update?: PluginCallback, render?: PluginCallback, glContextLost?: PluginCallback, glContextRestored?: PluginCallback): void;
     /**
      * LittleJS Debug System
      * - Press Esc to show debug overlay with mouse pick
@@ -1340,12 +1342,11 @@ declare module "littlejsengine" {
         */
         frame(frame: number): TileInfo;
         /**
-         * Set this tile to use a full image
-         * @param {HTMLImageElement|OffscreenCanvas} image
-         * @param {WebGLTexture} [glTexture] - WebGL texture
+         * Set this tile to use a full image in a texture info
+         * @param {TextureInfo} textureInfo
          * @return {TileInfo}
          */
-        setFullImage(image: HTMLImageElement | OffscreenCanvas, glTexture?: WebGLTexture): TileInfo;
+        setFullImage(textureInfo: TextureInfo): TileInfo;
     }
     /**
      * Tile Info - Stores info about each texture
@@ -1355,18 +1356,24 @@ declare module "littlejsengine" {
         /**
          * Create a TextureInfo, called automatically by the engine
          * @param {HTMLImageElement|OffscreenCanvas} image
-         * @param {WebGLTexture} [glTexture] - WebGL texture
+         * @param {boolean} [useWebGL] - Should use WebGL if available?
          */
-        constructor(image: HTMLImageElement | OffscreenCanvas, glTexture?: WebGLTexture);
-        /** @property {HTMLImageElement} - image source */
+        constructor(image: HTMLImageElement | OffscreenCanvas, useWebGL?: boolean);
+        /** @property {HTMLImageElement|OffscreenCanvas} - image source */
         image: OffscreenCanvas | HTMLImageElement;
         /** @property {Vector2} - size of the image */
         size: Vector2;
         /** @property {Vector2} - inverse of the size, cached for rendering */
         sizeInverse: Vector2;
         /** @property {WebGLTexture} - WebGL texture */
-        glTexture: WebGLTexture;
+        glTexture: any;
+        /** Creates the WebGL texture, updates if already created */
         createWebGLTexture(): void;
+        /** Destroys the WebGL texture */
+        destroyWebGLTexture(): void;
+        /** Check if the texture is webgl enabled
+         * @return {boolean} */
+        hasWebGL(): boolean;
     }
     /**
      * LittleJS Drawing System
@@ -1553,10 +1560,11 @@ declare module "littlejsengine" {
      *  @param {Color}   [lineColor=(0,0,0,1)]
      *  @param {CanvasTextAlign}  [textAlign='center']
      *  @param {string}  [font=fontDefault]
+     *  @param {string}  [fontStyle]
      *  @param {number}  [maxWidth]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawText(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, maxWidth?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawText(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw text on overlay canvas in world space
      *  Automatically splits new lines into rows
      *  @param {string}  text
@@ -1567,9 +1575,10 @@ declare module "littlejsengine" {
      *  @param {Color}   [lineColor=(0,0,0,1)]
      *  @param {CanvasTextAlign}  [textAlign='center']
      *  @param {string}  [font=fontDefault]
+     *  @param {string}  [fontStyle]
      *  @param {number}  [maxWidth]
      *  @memberof Draw */
-    export function drawTextOverlay(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, maxWidth?: number): void;
+    export function drawTextOverlay(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number): void;
     /** Draw text on overlay canvas in screen space
      *  Automatically splits new lines into rows
      *  @param {string}  text
@@ -1580,10 +1589,11 @@ declare module "littlejsengine" {
      *  @param {Color}   [lineColor=(0,0,0,1)]
      *  @param {CanvasTextAlign}  [textAlign]
      *  @param {string}  [font=fontDefault]
+     *  @param {string}  [fontStyle]
      *  @param {number}  [maxWidth]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
      *  @memberof Draw */
-    export function drawTextScreen(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, maxWidth?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawTextScreen(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Enable normal or additive blend mode
      *  @param {boolean} [additive]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -1609,11 +1619,11 @@ declare module "littlejsengine" {
      */
     export class FontImage {
         /** Create an image font
-         *  @param {HTMLImageElement} [image]    - Image for the font, if undefined default font is used
-         *  @param {Vector2} [tileSize=(8,8)]    - Size of the font source tiles
-         *  @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
+         *  @param {HTMLImageElement} [image] - Image for the font, default if undefined
+         *  @param {Vector2} [tileSize=(8,8)] - Size of the font source tiles
+         *  @param {Vector2} [paddingSize=(0,1)] - How much space between characters
          */
-        constructor(image?: HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2, context?: CanvasRenderingContext2D);
+        constructor(image?: HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2);
         image: any;
         tileSize: Vector2;
         paddingSize: Vector2;
@@ -2154,7 +2164,7 @@ declare module "littlejsengine" {
      *  @param {GainNode} [gainNode] - Optional gain node for volume control while playing
      *  @param {number}   [offset] - Offset in seconds to start playback from
      *  @param {AudioEndedCallback} [onended] - Callback for when the sound ends
-     *  @return {AudioBufferSourceNode} - The audio node of the sound played
+     *  @return {AudioBufferSourceNode} - The source node of the sound played, may be undefined if play fails
      *  @memberof Audio */
     export function playSamples(sampleChannels: any[], volume?: number, rate?: number, pan?: number, loop?: boolean, sampleRate?: number, gainNode?: GainNode, offset?: number, onended?: AudioEndedCallback): AudioBufferSourceNode;
     /** Generate and play a ZzFX sound
@@ -2445,8 +2455,7 @@ declare module "littlejsengine" {
         canvas: OffscreenCanvas;
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this layer */
         context: OffscreenCanvasRenderingContext2D;
-        /** @property {WebGLTexture} - Texture if using WebGL for this layer, call useWebGL to enable */
-        glTexture: WebGLTexture;
+        textureInfo: TextureInfo;
         /** Draw this canvas layer centered in world space, with color applied if using WebGL
         *  @param {Vector2} pos - Center in world space
         *  @param {Vector2} [size] - Size in world space
@@ -2506,9 +2515,8 @@ declare module "littlejsengine" {
         *  @param {Vector2}  size          - World space size
         *  @param {TileInfo} [tileInfo]    - Default tile info for layer (used for size and texture)
         *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
-        *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering
         */
-        constructor(position: Vector2, size: Vector2, tileInfo?: TileInfo, renderOrder?: number, useWebGL?: boolean);
+        constructor(position: Vector2, size: Vector2, tileInfo?: TileInfo, renderOrder?: number);
         data: TileLayerData[];
         /** Draw all the tile data to an offscreen canvas
          *  - This may be slow in some browsers but only needs to be done once */
@@ -2595,7 +2603,7 @@ declare module "littlejsengine" {
      *     tile(0, 16),                // tileInfo
      *     rgb(1,1,1,1), rgb(0,0,0,1), // colorStartA, colorStartB
      *     rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
-     *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
+     *     1, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
      *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate,
      *     .5, 1                // randomness, collide, additive, randomColorLinear, renderOrder
      * );
@@ -2881,17 +2889,16 @@ declare module "littlejsengine" {
         /** Create global post processing shader
         *  @param {string} shaderCode
         *  @param {boolean} [includeOverlay]
+        *  @param {boolean} [includeMainCanvas]
          *  @example
          *  // create the post process plugin object
          *  new PostProcessPlugin(shaderCode);
          */
-        constructor(shaderCode: string, includeOverlay?: boolean);
+        constructor(shaderCode: string, includeOverlay?: boolean, includeMainCanvas?: boolean);
         /** @property {WebGLProgram} - Shader for post processing */
-        shader: WebGLProgram;
+        shader: any;
         /** @property {WebGLTexture} - Texture for post processing */
-        texture: WebGLTexture;
-        /** @property {boolean} - Should overlay canvas be included in post processing */
-        includeOverlay: boolean;
+        texture: any;
     }
     /**
      * LittleJS ZzFXM Plugin
@@ -2980,6 +2987,8 @@ declare module "littlejsengine" {
         defaultHoverColor: Color;
         /** @property {Color} - Default color for disabled UI elements */
         defaultDisabledColor: Color;
+        /** @property {Color} - Uses a gradient fill combined with color */
+        defaultGradientColor: any;
         /** @property {number} - Default line width for UI elements */
         defaultLineWidth: number;
         /** @property {number} - Default rounded rect corner radius for UI elements */
@@ -3004,14 +3013,17 @@ declare module "littlejsengine" {
         hoverObject: any;
         /** @property {UIObject} - Hover object at start of update */
         lastHoverObject: any;
+        /** @property {number} - If set ui coords will be renormalized to this canvas height */
+        nativeHeight: number;
         /** Draw a rectangle to the UI context
         *  @param {Vector2} pos
         *  @param {Vector2} size
         *  @param {Color}   [color=uiSystem.defaultColor]
         *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
         *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
-        *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius] */
-        drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, cornerRadius?: number): void;
+        *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius]
+        *  @param {Color}   [gradientColor=uiSystem.defaultGradientColor] */
+        drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, cornerRadius?: number, gradientColor?: Color): void;
         /** Draw a line to the UI context
         *  @param {Vector2} posA
         *  @param {Vector2} posB
@@ -3035,8 +3047,9 @@ declare module "littlejsengine" {
         *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
         *  @param {string}  [align]
         *  @param {string}  [font=uiSystem.defaultFont]
+        *  @param {string}  [fontStyle]
         *  @param {boolean} [applyMaxWidth=true] */
-        drawText(text: string, pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, align?: string, font?: string, applyMaxWidth?: boolean): void;
+        drawText(text: string, pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, align?: string, font?: string, fontStyle?: string, applyMaxWidth?: boolean): void;
         /**
          * @callback DragAndDropCallback - Callback for drag and drop events
          * @param {DragEvent} event - The drag event
@@ -3081,12 +3094,16 @@ declare module "littlejsengine" {
         hoverColor: Color;
         /** @property {Color} - Color for line drawing */
         lineColor: Color;
+        /** @property {Color} - Uses a gradient fill combined with color */
+        gradientColor: any;
         /** @property {number} - Width for line drawing */
         lineWidth: number;
         /** @property {number} - Corner radius for rounded rects */
         cornerRadius: number;
         /** @property {string} - Font for this objecct */
         font: string;
+        /** @property {string} - Font style for this object or undefined */
+        fontStyle: any;
         /** @property {number} - Override for text width */
         textWidth: any;
         /** @property {number} - Override for text height */
@@ -3111,6 +3128,8 @@ declare module "littlejsengine" {
         interactive: boolean;
         /** @property {boolean} - Activate when dragged over with mouse held down */
         dragActivate: boolean;
+        /** @property {boolean} - True if this can be a hover object */
+        canBeHover: boolean;
         /** Add a child UIObject to this object
          *  @param {UIObject} child
          */
@@ -3119,6 +3138,10 @@ declare module "littlejsengine" {
          *  @param {UIObject} child
          */
         removeChild(child: UIObject): void;
+        /** Check if the mouse is overlapping a box in screen space
+         *  @return {boolean} - True if overlapping
+         */
+        isMouseOverlapping(): boolean;
         /** Update the object, called automatically by plugin once each frame */
         update(): void;
         /** Render the object, called automatically by plugin once each frame */