littlejsengine 1.15.9 → 1.16.2

package/dist/littlejs.d.ts

@@ -199,7 +199,7 @@ declare module "littlejsengine" {
      *  @type {boolean}
      *  @default
      *  @memberof Debug */
-    export let showWatermark: boolean;
+    export let debugWatermark: boolean;
     /** Asserts if the expression is false, does nothing in release builds
      *  Halts execution if the assert fails and throws an error
      *  @param {boolean} assert
@@ -283,37 +283,20 @@ declare module "littlejsengine" {
     /** Trigger debug system to take a screenshot
      *  @memberof Debug */
     export function debugScreenshot(): void;
-    /** Save a canvas to disk
-     *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
-     *  @param {string} [filename]
-     *  @param {string} [type]
-     *  @memberof Debug */
-    export function debugSaveCanvas(canvas: HTMLCanvasElement | OffscreenCanvas, filename?: string, type?: string): void;
-    /** Save a text file to disk
-     *  @param {string}     text
-     *  @param {string}     [filename]
-     *  @param {string}     [type]
-     *  @memberof Debug */
-    export function debugSaveText(text: string, filename?: string, type?: string): void;
-    /** Save a data url to disk
-     *  @param {string}     dataURL
-     *  @param {string}     filename
-     *  @memberof Debug */
-    export function debugSaveDataURL(dataURL: string, filename: string): void;
     /** Breaks on all asserts/errors, hides the canvas, and shows message in plain text
      *  This is a good function to call at the start of your game to catch all errors
      *  In release builds this function has no effect
      *  @memberof Debug */
     export function debugShowErrors(): void;
-    /** Check if video capture is active
-     *  @memberof Debug */
-    export function debugVideoCaptureIsActive(): boolean;
     /** Start capturing video
      *  @memberof Debug */
     export function debugVideoCaptureStart(): void;
     /** Stop capturing video and save to disk
      *  @memberof Debug */
     export function debugVideoCaptureStop(): void;
+    /** Check if video capture is active
+     *  @memberof Debug */
+    export function debugVideoCaptureIsActive(): boolean;
     /**
      * LittleJS Engine Settings
      * - All settings for the engine are here
@@ -340,7 +323,7 @@ declare module "littlejsengine" {
      *  @default
      *  @memberof Settings */
     export let canvasColorTiles: boolean;
-    /** Color to clear the canvas to before render
+    /** Color to clear the canvas to before render, does not clear if alpha is 0
      *  @type {Color}
      *  @memberof Draw */
     export let canvasClearColor: Color;
@@ -373,13 +356,6 @@ declare module "littlejsengine" {
      *  @default
      *  @memberof Settings */
     export let canvasPixelated: boolean;
-    /** Use nearest canvas scaling for more pixelated look
-     *  - If enabled sets css image-rendering:pixelated
-     *  - This defaults to false because text looks better with smoothing
-     *  @type {boolean}
-     *  @default
-     *  @memberof Settings */
-    export let overlayCanvasPixelated: boolean;
     /** Disables texture filtering for crisper pixel art
      *  @type {boolean}
      *  @default
@@ -404,12 +380,17 @@ declare module "littlejsengine" {
      *  @type {Vector2}
      *  @default Vector2(16,16)
      *  @memberof Settings */
-    export let tileSizeDefault: Vector2;
-    /** How many pixels smaller to draw tiles to prevent bleeding from neighbors
+    export let tileDefaultSize: Vector2;
+    /** Default padding pixels around tiles
+     *  @type {number}
+     *  @default
+     *  @memberof Settings */
+    export let tileDefaultPadding: number;
+    /** Default amount of pixels smaller to draw tiles to prevent neighbor bleeding
      *  @type {number}
      *  @default
      *  @memberof Settings */
-    export let tileFixBleedScale: number;
+    export let tileDefaultBleed: number;
     /** Enable physics solver for collisions between objects
      *  @type {boolean}
      *  @default
@@ -562,7 +543,7 @@ declare module "littlejsengine" {
      *  @param {boolean} colorTiles
      *  @memberof Settings */
     export function setCanvasColorTiles(colorTiles: boolean): void;
-    /** Set color to clear the canvas to before render
+    /** Set color to clear the canvas to before render, does not clear if alpha is 0
      *  @param {Color} color
      *  @memberof Settings */
     export function setCanvasClearColor(color: Color): void;
@@ -583,16 +564,9 @@ declare module "littlejsengine" {
      *  @memberof Settings */
     export function setCanvasFixedSize(size: Vector2): void;
     /** Use nearest scaling algorithm for canvas for more pixelated look
-     *  - If enabled sets css image-rendering:pixelated
      *  @param {boolean} pixelated
      *  @memberof Settings */
     export function setCanvasPixelated(pixelated: boolean): void;
-    /** Use nearest scaling algorithm for canvas for more pixelated look
-     *  - If enabled sets css image-rendering:pixelated
-     *  - This defaults to false because text looks better with smoothing
-     *  @param {boolean} pixelated
-     *  @memberof Settings */
-    export function setOverlayCanvasPixelated(pixelated: boolean): void;
     /** Disables texture filtering for crisper pixel art
      *  @param {boolean} pixelated
      *  @memberof Settings */
@@ -616,11 +590,15 @@ declare module "littlejsengine" {
     /** Set default size of tiles in pixels
      *  @param {Vector2} size
      *  @memberof Settings */
-    export function setTileSizeDefault(size: Vector2): void;
-    /** Set to prevent tile bleeding from neighbors in pixels
-     *  @param {number} scale
+    export function setTileDefaultSize(size: Vector2): void;
+    /** Default padding pixels around tiles
+     *  @param {number} padding
+     *  @memberof Settings */
+    export function setTileDefaultPadding(padding: number): void;
+    /** Default amount of pixels smaller to draw tiles to prevent neighbor bleeding
+     *  @param {number} bleed
      *  @memberof Settings */
-    export function setTileFixBleedScale(scale: number): void;
+    export function setTileDefaultBleed(bleed: number): void;
     /** Set if collisions between objects are enabled
      *  @param {boolean} enable
      *  @memberof Settings */
@@ -737,7 +715,7 @@ declare module "littlejsengine" {
     /** Set if watermark with FPS should be shown
      *  @param {boolean} show
      *  @memberof Debug */
-    export function setShowWatermark(show: boolean): void;
+    export function setDebugWatermark(show: boolean): void;
     /** Set key code used to toggle debug mode, Esc by default
      *  @param {string} key
      *  @memberof Debug */
@@ -749,105 +727,105 @@ declare module "littlejsengine" {
      * - Color - holds a rgba color with some math functions
      * - Timer - tracks time automatically
      * - RandomGenerator - seeded random number generator
-     * @namespace Utilities
+     * @namespace Math
      */
     /** The value of PI
      *  @type {number}
      *  @default Math.PI
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const PI: number;
     /** Returns absolute value of value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const abs: (x: number) => number;
     /** Returns floored value of value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const floor: (x: number) => number;
     /** Returns ceiled value of value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const ceil: (x: number) => number;
     /** Returns rounded value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const round: (x: number) => number;
     /** Returns lowest value passed in
      *  @param {...number} values
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const min: (...values: number[]) => number;
     /** Returns highest value passed in
      *  @param {...number} values
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const max: (...values: number[]) => number;
     /** Returns the sign of value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const sign: (x: number) => number;
     /** Returns hypotenuse of values passed in
      *  @param {...number} values
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const hypot: (...values: number[]) => number;
     /** Returns log2 of value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const log2: (x: number) => number;
     /** Returns sin of value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const sin: (x: number) => number;
     /** Returns cos of value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const cos: (x: number) => number;
     /** Returns tan of value passed in
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const tan: (x: number) => number;
     /** Returns atan2 of values passed in
      *  @param {number} y
      *  @param {number} x
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const atan2: (y: number, x: number) => number;
     /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
      *  @param {number} dividend
      *  @param {number} [divisor]
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function mod(dividend: number, divisor?: number): number;
     /** Clamps the value between max and min
      *  @param {number} value
      *  @param {number} [min]
      *  @param {number} [max]
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function clamp(value: number, min?: number, max?: number): number;
     /** Returns what percentage the value is between valueA and valueB
      *  @param {number} value
      *  @param {number} valueA
      *  @param {number} valueB
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function percent(value: number, valueA: number, valueB: number): number;
     /** Returns signed wrapped distance between the two values passed in
      *  @param {number} valueA
      *  @param {number} valueB
      *  @param {number} [wrapSize]
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function distanceWrap(valueA: number, valueB: number, wrapSize?: number): number;
     /** Linearly interpolates between values passed in with wrapping
      *  @param {number} valueA
@@ -855,37 +833,37 @@ declare module "littlejsengine" {
      *  @param {number} percent
      *  @param {number} [wrapSize]
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function lerpWrap(valueA: number, valueB: number, percent: number, wrapSize?: number): number;
     /** Returns signed wrapped distance between the two angles passed in
      *  @param {number} angleA
      *  @param {number} angleB
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function distanceAngle(angleA: number, angleB: number): number;
     /** Linearly interpolates between the angles passed in with wrapping
      *  @param {number} angleA
      *  @param {number} angleB
      *  @param {number} percent
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function lerpAngle(angleA: number, angleB: number, percent: number): number;
     /** Linearly interpolates between values passed in using percent
      *  @param {number} valueA
      *  @param {number} valueB
      *  @param {number} percent
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function lerp(valueA: number, valueB: number, percent: number): number;
     /** Applies smoothstep function to the percentage value
      *  @param {number} percent
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function smoothStep(percent: number): number;
     /** Returns the nearest power of two not less than the value
      *  @param {number} value
      *  @return {number}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function nearestPowerOfTwo(value: number): number;
     /** Returns true if two axis aligned bounding boxes are overlapping
      *  this can be used for simple collision detection between objects
@@ -894,7 +872,7 @@ declare module "littlejsengine" {
      *  @param {Vector2} posB          - Center of box B
      *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
      *  @return {boolean}              - True if overlapping
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function isOverlapping(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB?: Vector2): boolean;
     /** Returns true if a line segment is intersecting an axis aligned box
      *  @param {Vector2} start - Start of raycast
@@ -902,7 +880,7 @@ declare module "littlejsengine" {
      *  @param {Vector2} pos   - Center of box
      *  @param {Vector2} size  - Size of box
      *  @return {boolean}      - True if intersecting
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function isIntersecting(start: Vector2, end: Vector2, pos: Vector2, size: Vector2): boolean;
     /** Returns an oscillating wave between 0 and amplitude with frequency of 1 Hz by default
      *  @param {number} [frequency] - Frequency of the wave in Hz
@@ -910,8 +888,17 @@ declare module "littlejsengine" {
      *  @param {number} [t=time]    - Value to use for time of the wave
      *  @param {number} [offset]    - Value to use for time offset of the wave
      *  @return {number}            - Value waving between 0 and amplitude
-     *  @memberof Utilities */
+     *  @memberof Math */
     export function wave(frequency?: number, amplitude?: number, t?: number, offset?: number): number;
+    /**
+     * LittleJS Utility Classes and Functions
+     * - General purpose math library
+     * - Vector2 - fast, simple, easy 2D vector class
+     * - Color - holds a rgba color with some math functions
+     * - Timer - tracks time automatically
+     * - RandomGenerator - seeded random number generator
+     * @namespace Utilities
+     */
     /** Formats seconds to mm:ss style for display purposes
      *  @param {number} t - time in seconds
      *  @return {string}
@@ -922,6 +909,24 @@ declare module "littlejsengine" {
      *  @return {Promise<object>}
      *  @memberof Utilities */
     export function fetchJSON(url: string): Promise<object>;
+    /** Save a text file to disk
+     *  @param {string} text
+     *  @param {string} [filename]
+     *  @param {string} [type]
+     *  @memberof Utilities */
+    export function saveText(text: string, filename?: string, type?: string): void;
+    /** Save a canvas to disk
+     *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
+     *  @param {string} [filename]
+     *  @param {string} [type]
+     *  @memberof Utilities */
+    export function saveCanvas(canvas: HTMLCanvasElement | OffscreenCanvas, filename?: string, type?: string): void;
+    /** Save a data url to disk
+     *  @param {string} url
+     *  @param {string} [filename]
+     *  @param {number} [revokeTime] - how long before revoking the url
+     *  @memberof Utilities */
+    export function saveDataURL(url: string, filename?: string, revokeTime?: number): void;
     /** Random global functions
      *  @namespace Random */
     /** Returns a random value between the two values passed in
@@ -1324,7 +1329,7 @@ declare module "littlejsengine" {
      * let a = vec2(0, 1); // vector with coordinates (0, 1)
      * a = vec2(5);        // set a to (5, 5)
      * b = vec2();         // set b to (0, 0)
-     * @memberof Utilities */
+     * @memberof Math */
     export function vec2(x?: number, y?: number): Vector2;
     /**
      * Create a color object with RGBA values, white by default
@@ -1333,7 +1338,7 @@ declare module "littlejsengine" {
      * @param {number} [b=1] - blue
      * @param {number} [a=1] - alpha
      * @return {Color}
-     * @memberof Utilities
+     * @memberof Math
      */
     export function rgb(r?: number, g?: number, b?: number, a?: number): Color;
     /**
@@ -1343,96 +1348,96 @@ declare module "littlejsengine" {
      * @param {number} [l=1] - lightness
      * @param {number} [a=1] - alpha
      * @return {Color}
-     * @memberof Utilities */
+     * @memberof Math */
     export function hsl(h?: number, s?: number, l?: number, a?: number): Color;
     /**
      * Check if object is a valid Color
      * @param {any} c
      * @return {boolean}
-     * @memberof Utilities */
+     * @memberof Math */
     export function isColor(c: any): boolean;
     /**
      * Check if object is a valid Vector2
      * @param {any} v
      * @return {boolean}
-     * @memberof Utilities */
+     * @memberof Math */
     export function isVector2(v: any): boolean;
     /**
      * Check if object is a valid number, not NaN or undefined, but it may be infinite
      * @param {any} n
      * @return {boolean}
-     * @memberof Utilities */
+     * @memberof Math */
     export function isNumber(n: any): boolean;
     /**
      * Check if object is a valid string or can be converted to one
      * @param {any} s
      * @return {boolean}
-     * @memberof Utilities */
+     * @memberof Math */
     export function isString(s: any): boolean;
     /**
      * Check if object is an array
      * @param {any} a
      * @return {boolean}
-     * @memberof Utilities */
+     * @memberof Math */
     export function isArray(a: any): boolean;
     /** Color - White #ffffff
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const WHITE: Color;
     /** Color - Clear White #757474ff with 0 alpha
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const CLEAR_WHITE: Color;
     /** Color - Black #000000
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const BLACK: Color;
     /** Color - Clear Black #000000 with 0 alpha
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const CLEAR_BLACK: Color;
     /** Color - Gray #808080
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const GRAY: Color;
     /** Color - Red #ff0000
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const RED: Color;
     /** Color - Orange #ff8000
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const ORANGE: Color;
     /** Color - Yellow #ffff00
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const YELLOW: Color;
     /** Color - Green #00ff00
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const GREEN: Color;
     /** Color - Cyan #00ffff
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const CYAN: Color;
     /** Color - Blue #0000ff
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const BLUE: Color;
     /** Color - Purple #8000ff
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const PURPLE: Color;
     /** Color - Magenta #ff00ff
      *  @type {Color}
-     *  @memberof Utilities */
+     *  @memberof Math */
     export const MAGENTA: Color;
     /**
      * Create a tile info object using a grid based system
      * - This can take vecs or floats for easier use and conversion
      * - If an index is passed in, the tile size and index will determine the position
      * @param {Vector2|number} [pos=0] - Position of the tile in pixels, or tile index
-     * @param {Vector2|number} [size=tileSizeDefault] - Size of tile in pixels
+     * @param {Vector2|number} [size] - Size of tile in pixels
      * @param {number} [textureIndex] - Texture index to use
      * @param {number} [padding] - How many pixels padding around tiles
      * @return {TileInfo}
@@ -1449,13 +1454,13 @@ declare module "littlejsengine" {
      */
     export class TileInfo {
         /** Create a tile info object
-         *  @param {Vector2} [pos=(0,0)]            - Top left corner of tile in pixels
-         *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
-         *  @param {number}  [textureIndex]         - Texture index to use
-         *  @param {number}  [padding]              - How many pixels padding around tiles
-         *  @param {number}  [bleedScale]           - How many pixels smaller to draw tiles
+         *  @param {Vector2} [pos=(0,0)] - Top left corner of tile in pixels
+         *  @param {Vector2} [size] - Size of tile in pixels
+         *  @param {number}  [textureIndex] - Texture index to use
+         *  @param {number}  [padding] - How many pixels padding around tiles
+         *  @param {number}  [bleed] - How many pixels smaller to draw tiles
          */
-        constructor(pos?: Vector2, size?: Vector2, textureIndex?: number, padding?: number, bleedScale?: number);
+        constructor(pos?: Vector2, size?: Vector2, textureIndex?: number, padding?: number, bleed?: number);
         /** @property {Vector2} - Top left corner of tile in pixels */
         pos: Vector2;
         /** @property {Vector2} - Size of tile in pixels */
@@ -1467,7 +1472,7 @@ declare module "littlejsengine" {
         /** @property {TextureInfo} - The texture info for this tile */
         textureInfo: TextureInfo;
         /** @property {number} - Shrinks tile by this many pixels to prevent neighbors bleeding */
-        bleedScale: number;
+        bleed: number;
         /** Returns a copy of this tile offset by a vector
         *  @param {Vector2} offset - Offset to apply in pixels
         *  @return {TileInfo}
@@ -1524,7 +1529,6 @@ declare module "littlejsengine" {
      * There are 3 canvas/contexts available to draw to...
      * mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
      * glCanvas - Used by the accelerated WebGL batch rendering system.
-     * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
      *
      * The WebGL rendering system is very fast with some caveats...
      * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
@@ -1541,22 +1545,26 @@ declare module "littlejsengine" {
      *  @type {CanvasRenderingContext2D}
      *  @memberof Draw */
     export let mainContext: CanvasRenderingContext2D;
-    /** The default canvas to use for drawing, usually mainCanvas
-     *  @type {HTMLCanvasElement|OffscreenCanvas}
-     *  @memberof Draw */
-    export let drawCanvas: HTMLCanvasElement | OffscreenCanvas;
     /** The default 2d context to use for drawing, usually mainContext
      *  @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
      *  @memberof Draw */
     export let drawContext: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-    /** A canvas that appears on top of everything the same size as mainCanvas
-     *  @type {HTMLCanvasElement}
+    /** Offscreen canvas that can be used for image processing
+     *  @type {OffscreenCanvas}
      *  @memberof Draw */
-    export let overlayCanvas: HTMLCanvasElement;
-    /** 2d context for overlayCanvas
-     *  @type {CanvasRenderingContext2D}
+    export let workCanvas: OffscreenCanvas;
+    /** Offscreen canvas that can be used for image processing
+     *  @type {OffscreenCanvasRenderingContext2D}
+     *  @memberof Draw */
+    export let workContext: OffscreenCanvasRenderingContext2D;
+    /** Offscreen canvas with willReadFrequently that can be used for image processing
+     *  @type {OffscreenCanvas}
      *  @memberof Draw */
-    export let overlayContext: CanvasRenderingContext2D;
+    export let workReadCanvas: OffscreenCanvas;
+    /** Offscreen canvas with willReadFrequently that can be used for image processing
+     *  @type {OffscreenCanvasRenderingContext2D}
+     *  @memberof Draw */
+    export let workReadContext: OffscreenCanvasRenderingContext2D;
     /** The size of the main canvas (and other secondary canvases)
      *  @type {Vector2}
      *  @memberof Draw */
@@ -1589,6 +1597,13 @@ declare module "littlejsengine" {
      *  @return {Vector2}
      *  @memberof Draw */
     export function worldToScreenDelta(worldDelta: Vector2): Vector2;
+    /** Convert screen space transform to world space
+     *  @param {Vector2} screenPos
+     *  @param {Vector2} screenSize
+     *  @param {number} [screenAngle]
+     *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
+     *  @memberof Draw */
+    export function screenToWorldTransform(screenPos: Vector2, screenSize: Vector2, screenAngle?: number): [Vector2, Vector2, number];
     /** Draw textured tile centered in world space, with color applied if using WebGL
      *  @param {Vector2}  pos                 - Center of the tile in world space
      *  @param {Vector2}  [size=(1,1)]        - Size of the tile in world space
@@ -1713,22 +1728,7 @@ declare module "littlejsengine" {
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
     export function drawText(text: string | number, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
-    /** Draw text on overlay canvas in world space
-     *  Automatically splits new lines into rows
-     *  @param {string|number}  text
-     *  @param {Vector2} pos
-     *  @param {number}  [size]
-     *  @param {Color}   [color=(1,1,1,1)]
-     *  @param {number}  [lineWidth]
-     *  @param {Color}   [lineColor=(0,0,0,1)]
-     *  @param {CanvasTextAlign}  [textAlign='center']
-     *  @param {string}  [font=fontDefault]
-     *  @param {string}  [fontStyle]
-     *  @param {number}  [maxWidth]
-     *  @param {number}  [angle]
-     *  @memberof Draw */
-    export function drawTextOverlay(text: string | number, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number): void;
-    /** Draw text on overlay canvas in screen space
+    /** Draw text in screen space
      *  Automatically splits new lines into rows
      *  @param {string|number}  text
      *  @param {Vector2} pos
@@ -1741,7 +1741,7 @@ declare module "littlejsengine" {
      *  @param {string}  [fontStyle]
      *  @param {number}  [maxWidth]
      *  @param {number}  [angle]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
     export function drawTextScreen(text: string | number, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Enable normal or additive blend mode
@@ -1749,8 +1749,8 @@ declare module "littlejsengine" {
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
     export function setBlendMode(additive?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
-    /** Combines all LittleJS canvases onto the main canvas and clears them
-     *  This is necessary for things like saving a screenshot
+    /** Combines LittleJS canvases onto the main canvas
+     *  This is necessary for things like screenshots and video
      *  @memberof Draw */
     export function combineCanvases(): void;
     export let engineFontImage: any;
@@ -1785,14 +1785,7 @@ declare module "littlejsengine" {
          *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
          */
         drawText(text: string | number, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
-        /** Draw text on overlay canvas in world space using the image font
-         *  @param {string|number}  text
-         *  @param {Vector2} pos
-         *  @param {number}  [scale]
-         *  @param {boolean} [center]
-         */
-        drawTextOverlay(text: string | number, pos: Vector2, scale?: number, center?: boolean): void;
-        /** Draw text on overlay canvas in screen space using the image font
+        /** Draw text in screen space using the image font
          *  @param {string|number}  text
          *  @param {Vector2} pos
          *  @param {number}  [scale]
@@ -1828,7 +1821,7 @@ declare module "littlejsengine" {
      * - Supports shadertoy style post processing shaders via plugin
      * @namespace WebGL
      */
-    /** The WebGL canvas which appears above the main canvas and below the overlay canvas
+    /** The WebGL canvas which appears below the main canvas
      *  @type {HTMLCanvasElement}
      *  @memberof WebGL */
     export let glCanvas: HTMLCanvasElement;
@@ -2193,12 +2186,12 @@ declare module "littlejsengine" {
         isLoaded(): boolean;
     }
     /**
-     * Sound Wave Object - Stores a wave sound for later use and can be played positionally
-     * - this can be used to play wave, mp3, and ogg files
+     * Sound Wave Object - Loads and stores an audio file for later use
+     * - this can be used to load and play wave, mp3, and ogg files
      * @extends Sound
      * @memberof Audio
      * @example
-     * // create a sound
+     * // load an audio asset file
      * const sound_example = new SoundWave('sound.mp3');
      *
      * // play the sound
@@ -2524,11 +2517,12 @@ declare module "littlejsengine" {
         /** Get the direction of the mirror
          *  @return {number} -1 if this.mirror is true, or 1 if not mirrored */
         getMirrorSign(): number;
-        /** Attaches a child to this with a given local transform
+        /** Attaches a child to this with a local transform, returns child for chaining
          *  @param {EngineObject} child
          *  @param {Vector2}      [localPos=(0,0)]
-         *  @param {number}       [localAngle] */
-        addChild(child: EngineObject, localPos?: Vector2, localAngle?: number): void;
+         *  @param {number}       [localAngle]
+         *  @return {EngineObject} The child object added */
+        addChild(child: EngineObject, localPos?: Vector2, localAngle?: number): EngineObject;
         /** Removes a child from this one
          *  @param {EngineObject} child */
         removeChild(child: EngineObject): void;
@@ -2742,8 +2736,8 @@ declare module "littlejsengine" {
          *  @param {Vector2} layerPos - Local position in array
          *  @return {TileLayerData} */
         getData(layerPos: Vector2): TileLayerData;
-        /** @type {[HTMLCanvasElement|OffscreenCanvas, CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number]} */
-        savedRenderSettings: [HTMLCanvasElement | OffscreenCanvas, CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, Vector2, Vector2, number];
+        /** @type {[CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color]} */
+        savedRenderSettings: [CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color];
     }
     /**
      * Tile Collision Layer - a tile layer with collision
@@ -3092,13 +3086,12 @@ declare module "littlejsengine" {
     export class PostProcessPlugin {
         /** 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, includeMainCanvas?: boolean);
+        constructor(shaderCode: string, includeMainCanvas?: boolean);
         /** @property {WebGLProgram} - Shader for post processing */
         shader: any;
         /** @property {WebGLTexture} - Texture for post processing */
@@ -3193,6 +3186,8 @@ declare module "littlejsengine" {
          *  new UISystemPlugin;
          */
         constructor(context?: CanvasRenderingContext2D);
+        /** @property {boolean} - Activate when mouse is pressed down instead of clicked */
+        activateOnPress: boolean;
         /** @property {Color} - Default fill color for UI elements */
         defaultColor: Color;
         /** @property {Color} - Default outline color for UI elements */
@@ -3421,9 +3416,10 @@ declare module "littlejsengine" {
         navigationIndex: any;
         /** @property {boolean} - Should this be auto selected by navigation? Must also have valid navigation index. */
         navigationAutoSelect: boolean;
-        /** Add a child UIObject to this object
-         *  @param {UIObject} child */
-        addChild(child: UIObject): void;
+        /** Add a child UIObject to this object, returns child for chaining
+         *  @param {UIObject} child
+         *  @return {UIObject} The child object added */
+        addChild(child: UIObject): UIObject;
         /** Remove a child UIObject from this object
          *  @param {UIObject} child */
         removeChild(child: UIObject): void;
@@ -4575,8 +4571,8 @@ declare module "littlejsengine" {
      * - Nine slice and three slice drawing
      * @namespace DrawUtilities
      */
-    /** Draw a scalable nine-slice UI element to the overlay canvas in screen space
-     *  This function can not apply color because it draws using the overlay 2d context
+    /** Draw a scalable nine-slice UI element to the main canvas in screen space
+     *  This function can not apply color because it draws using the 2d context
      *  @param {Vector2} pos - Screen space position
      *  @param {Vector2} size - Screen space size
      *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
@@ -4600,8 +4596,8 @@ declare module "littlejsengine" {
      *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
      *  @memberof DrawUtilities */
     export function drawThreeSlice(pos: Vector2, size: Vector2, startTile: TileInfo, color?: Color, borderSize?: number, additiveColor?: Color, extraSpace?: number, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
-    /** Draw a scalable three-slice UI element to the overlay canvas in screen space
-     *  This function can not apply color because it draws using the overlay 2d context
+    /** Draw a scalable three-slice UI element to the main canvas in screen space
+     *  This function can not apply color because it draws using the 2d context
      *  @param {Vector2} pos - Screen space position
      *  @param {Vector2} size - Screen space size
      *  @param {TileInfo} startTile - Starting tile for the three-slice pattern