littlejsengine 1.12.4 → 1.13.1

package/dist/littlejs.d.ts

@@ -59,20 +59,34 @@ declare module "littlejsengine" {
      *  @default false
      *  @memberof Engine */
     export let paused: boolean;
+    /** Get if game is paused
+     *  @return {boolean}
+     *  @memberof Engine */
+    export function getPaused(): boolean;
     /** Set if game is paused
-     *  @param {boolean} isPaused
+     *  @param {boolean} [isPaused]
      *  @memberof Engine */
-    export function setPaused(isPaused: boolean): void;
+    export function setPaused(isPaused?: boolean): void;
     /** Startup LittleJS engine with your callback functions
-     *  @param {Function|function():Promise} gameInit - Called once after the engine starts up
-     *  @param {Function} gameUpdate - Called every frame before objects are updated
-     *  @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused
-     *  @param {Function} gameRender - Called before objects are rendered, for drawing the background
-     *  @param {Function} gameRenderPost - Called after objects are rendered, useful for drawing UI
-     *  @param {Array<string>} [imageSources=[]] - List of images to load
-     *  @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default
+     *  @param {Function|function():Promise} gameInit - Called once after the engine starts up, can be async for loading
+     *  @param {Function} gameUpdate - Called every frame before objects are updated (60fps), use for game logic
+     *  @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused, use for UI updates
+     *  @param {Function} gameRender - Called before objects are rendered, use for drawing backgrounds/world elements
+     *  @param {Function} gameRenderPost - Called after objects are rendered, use for drawing UI/overlays
+     *  @param {Array<string>} [imageSources=[]] - List of image file paths to preload (e.g., ['player.png', 'tiles.png'])
+     *  @param {HTMLElement} [rootElement] - Root DOM element to attach canvas to, defaults to document.body
+     *  @example
+     *  // Basic engine startup
+     *  engineInit(
+     *    () => { console.log('Game initialized!'); },  // gameInit
+     *    () => { updatePlayer(); },                    // gameUpdate
+     *    () => { updateUI(); },                        // gameUpdatePost
+     *    () => { drawBackground(); },                  // gameRender
+     *    () => { drawHUD(); },                         // gameRenderPost
+     *    ['tiles.png', 'tilesLevel.png']               // images to load
+     *  );
      *  @memberof Engine */
-    export function engineInit(gameInit: Function | (() => Promise<any>), gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, imageSources?: Array<string>, rootElement?: HTMLElement): void;
+    export function engineInit(gameInit: Function | (() => Promise<any>), gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, imageSources?: Array<string>, rootElement?: HTMLElement): Promise<void>;
     /** Update each engine object, remove destroyed objects, and update time
      *  @memberof Engine */
     export function engineObjectsUpdate(): void;
@@ -131,9 +145,9 @@ declare module "littlejsengine" {
     export let showWatermark: boolean;
     /** Asserts if the expression is false, does not do anything in release builds
      *  @param {boolean} assert
-     *  @param {Object} [output]
+     *  @param {...Object} [output] - error message output
      *  @memberof Debug */
-    export function ASSERT(assert: boolean, output?: any): void;
+    export function ASSERT(assert: boolean, ...output?: any[]): void;
     /** Draw a debug rectangle in world space
      *  @param {Vector2} pos
      *  @param {Vector2} [size=Vector2()]
@@ -176,13 +190,13 @@ declare module "littlejsengine" {
      *  @memberof Debug */
     export function debugLine(posA: Vector2, posB: Vector2, color?: string, thickness?: number, time?: number): void;
     /** Draw a debug combined axis aligned bounding box in world space
-     *  @param {Vector2} pA - position A
-     *  @param {Vector2} sA - size A
-     *  @param {Vector2} pB - position B
-     *  @param {Vector2} sB - size B
+     *  @param {Vector2} posA
+     *  @param {Vector2} sizeA
+     *  @param {Vector2} posB
+     *  @param {Vector2} sizeB
      *  @param {string}  [color]
      *  @memberof Debug */
-    export function debugOverlap(pA: Vector2, sA: Vector2, pB: Vector2, sB: Vector2, color?: string): void;
+    export function debugOverlap(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB: Vector2, color?: string): void;
     /** Draw a debug axis aligned bounding box in world space
      *  @param {string}  text
      *  @param {Vector2} pos
@@ -200,11 +214,11 @@ declare module "littlejsengine" {
      *  @memberof Debug */
     export function debugScreenshot(): void;
     /** Save a canvas to disk
-     *  @param {HTMLCanvasElement} canvas
-     *  @param {string}            [filename]
-     *  @param {string}            [type]
+     *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
+     *  @param {string} [filename]
+     *  @param {string} [type]
      *  @memberof Debug */
-    export function debugSaveCanvas(canvas: HTMLCanvasElement, filename?: string, type?: string): void;
+    export function debugSaveCanvas(canvas: HTMLCanvasElement | OffscreenCanvas, filename?: string, type?: string): void;
     /** Save a text file to disk
      *  @param {string}     text
      *  @param {string}     [filename]
@@ -238,6 +252,11 @@ declare module "littlejsengine" {
      *  @default Vector2()
      *  @memberof Settings */
     export let cameraPos: Vector2;
+    /** Rotation angle of camera in world space
+     *  @type {number}
+     *  @default
+     *  @memberof Settings */
+    export let cameraAngle: number;
     /** Scale of camera in world space
      *  @type {number}
      *  @default
@@ -316,7 +335,7 @@ declare module "littlejsengine" {
      *  @type {number}
      *  @default
      *  @memberof Settings */
-    export let objectDefaultElasticity: number;
+    export let objectDefaultRestitution: number;
     /** How much to slow when touching (0-1)
      *  @type {number}
      *  @default
@@ -343,12 +362,6 @@ declare module "littlejsengine" {
      *  @default
      *  @memberof Settings */
     export let glEnable: boolean;
-    /** Fixes slow rendering in some browsers by not compositing the WebGL canvas
-     *  - Must be set before startup to take effect
-     *  @type {boolean}
-     *  @default
-     *  @memberof Settings */
-    export let glOverlay: boolean;
     /** Should gamepads be allowed
      *  @type {boolean}
      *  @default
@@ -430,6 +443,10 @@ declare module "littlejsengine" {
      *  @param {Vector2} pos
      *  @memberof Settings */
     export function setCameraPos(pos: Vector2): void;
+    /** Set angle of camera in world space
+     *  @param {number} angle
+     *  @memberof Settings */
+    export function setCameraAngle(angle: number): void;
     /** Set scale of camera in world space
      *  @param {number} scale
      *  @memberof Settings */
@@ -465,11 +482,7 @@ declare module "littlejsengine" {
     /** Set if webgl rendering is enabled
      *  @param {boolean} enable
      *  @memberof Settings */
-    export function setGlEnable(enable: boolean): void;
-    /** Set to not composite the WebGL canvas
-     *  @param {boolean} overlay
-     *  @memberof Settings */
-    export function setGlOverlay(overlay: boolean): void;
+    export function setGLEnable(enable: boolean): void;
     /** Set default size of tiles in pixels
      *  @param {Vector2} size
      *  @memberof Settings */
@@ -495,9 +508,9 @@ declare module "littlejsengine" {
      *  @memberof Settings */
     export function setObjectDefaultAngleDamping(damp: number): void;
     /** Set how much to bounce when a collision occur
-     *  @param {number} elasticity
+     *  @param {number} restitution
      *  @memberof Settings */
-    export function setObjectDefaultElasticity(elasticity: number): void;
+    export function setObjectDefaultRestitution(restitution: number): void;
     /** Set how much to slow when touching
      *  @param {number} friction
      *  @memberof Settings */
@@ -609,18 +622,16 @@ declare module "littlejsengine" {
      *  @return {number}
      *  @memberof Utilities */
     export function abs(value: number): number;
-    /** Returns lowest of two values passed in
-     *  @param {number} valueA
-     *  @param {number} valueB
+    /** Returns lowest value passed in
+     *  @param {...number} values
      *  @return {number}
      *  @memberof Utilities */
-    export function min(valueA: number, valueB: number): number;
-    /** Returns highest of two values passed in
-     *  @param {number} valueA
-     *  @param {number} valueB
+    export function min(...values: number[]): number;
+    /** Returns highest value passed in
+     *  @param {...number} values
      *  @return {number}
      *  @memberof Utilities */
-    export function max(valueA: number, valueB: number): number;
+    export function max(...values: number[]): number;
     /** Returns the sign of value passed in
      *  @param {number} value
      *  @return {number}
@@ -654,13 +665,13 @@ declare module "littlejsengine" {
      *  @memberof Utilities */
     export function distanceWrap(valueA: number, valueB: number, wrapSize?: number): number;
     /** Linearly interpolates between values passed in with wrapping
-     *  @param {number} percent
      *  @param {number} valueA
      *  @param {number} valueB
+     *  @param {number} percent
      *  @param {number} [wrapSize]
      *  @returns {number}
      *  @memberof Utilities */
-    export function lerpWrap(percent: number, valueA: number, valueB: number, wrapSize?: number): number;
+    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
@@ -668,19 +679,19 @@ declare module "littlejsengine" {
      *  @memberof Utilities */
     export function distanceAngle(angleA: number, angleB: number): number;
     /** Linearly interpolates between the angles passed in with wrapping
-     *  @param {number} percent
      *  @param {number} angleA
      *  @param {number} angleB
+     *  @param {number} percent
      *  @returns {number}
      *  @memberof Utilities */
-    export function lerpAngle(percent: number, angleA: number, angleB: number): number;
+    export function lerpAngle(angleA: number, angleB: number, percent: number): number;
     /** Linearly interpolates between values passed in using percent
-     *  @param {number} percent
      *  @param {number} valueA
      *  @param {number} valueB
+     *  @param {number} percent
      *  @return {number}
      *  @memberof Utilities */
-    export function lerp(percent: number, valueA: number, valueB: number): number;
+    export function lerp(valueA: number, valueB: number, percent: number): number;
     /** Applies smoothstep function to the percentage value
      *  @param {number} percent
      *  @return {number}
@@ -719,6 +730,11 @@ declare module "littlejsengine" {
      *  @return {string}
      *  @memberof Utilities */
     export function formatTime(t: number): string;
+    /** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
+     *  @param {string} url - URL of JSON file
+     *  @return {Promise<object>}
+     *  @memberof Utilities */
+    export function fetchJSON(url: string): Promise<object>;
     /** Random global functions
      *  @namespace Random */
     /** Returns a random value between the two values passed in
@@ -748,7 +764,7 @@ declare module "littlejsengine" {
      *  @param {number} [length]
      *  @return {Vector2}
      *  @memberof Random */
-    export function randVector(length?: number): Vector2;
+    export function randVec2(length?: number): Vector2;
     /** Returns a random color between the two passed in colors, combine components if linear
      *  @param {Color}   [colorA=(1,1,1,1)]
      *  @param {Color}   [colorB=(0,0,0,1)]
@@ -768,8 +784,8 @@ declare module "littlejsengine" {
      */
     export class RandomGenerator {
         /** Create a random number generator with the seed passed in
-         *  @param {number} seed - Starting seed */
-        constructor(seed: number);
+         *  @param {number} [seed] - Starting seed or engine default seed */
+        constructor(seed?: number);
         /** @property {number} - random seed */
         seed: number;
         /** Returns a seeded random value between the two values passed in
@@ -782,9 +798,26 @@ declare module "littlejsengine" {
         *  @param {number} [valueB]
         *  @return {number} */
         int(valueA: number, valueB?: number): number;
+        /** Randomly returns true or false given the chance of true passed in
+        *  @param {number} [chance]
+        *  @return {boolean} */
+        bool(chance?: number): boolean;
         /** Randomly returns either -1 or 1 deterministically
         *  @return {number} */
         sign(): number;
+        /** Returns a seeded random value between the two values passed in with a random sign
+        *  @param {number} [valueA]
+        *  @param {number} [valueB]
+        *  @return {number} */
+        floatSign(valueA?: number, valueB?: number): number;
+        /** Returns a random angle between -PI and PI
+        *  @return {number} */
+        angle(): number;
+        /** Returns a seeded vec2 with size between the two values passed in
+        *  @param {number} valueA
+        *  @param {number} [valueB]
+        *  @return {Vector2} */
+        vec2(valueA?: number, valueB?: number): Vector2;
     }
     /**
      * 2D Vector object with vector math library
@@ -862,6 +895,11 @@ declare module "littlejsengine" {
          * @param {Vector2} v - other vector
          * @return {number} */
         cross(v: Vector2): number;
+        /** Returns a copy this vector reflected by the surface normal
+         * @param {Vector2} normal - surface normal (should be normalized)
+         * @param {number} restitution - how much to bounce, 1 is perfect bounce, 0 is no bounce
+         * @return {Vector2} */
+        reflect(normal: Vector2, restitution?: number): Vector2;
         /** Returns the clockwise angle of this vector, up is angle 0
          * @return {number} */
         angle(): number;
@@ -884,9 +922,16 @@ declare module "littlejsengine" {
         /** Returns a copy of this vector that has been inverted
          * @return {Vector2} */
         invert(): Vector2;
+        /** Returns a copy of this vector absolute values
+         * @return {Vector2} */
+        abs(): Vector2;
         /** Returns a copy of this vector with each axis floored
          * @return {Vector2} */
         floor(): Vector2;
+        /** Returns new vec2 with modded values
+        *  @param {number} [divisor]
+        *  @return {Vector2} */
+        mod(divisor?: number): Vector2;
         /** Returns the area this vector covers as a rectangle
          * @return {number} */
         area(): number;
@@ -913,7 +958,7 @@ declare module "littlejsengine" {
      * let a = new Color;              // white
      * let b = new Color(1, 0, 0);     // red
      * let c = new Color(0, 0, 0, 0);  // transparent black
-     * let d = rgb(0, 0, 1);           // blue using rgb color
+     * let d = rgb(0, 0, 1);         // blue using rgb color
      * let e = hsl(.3, 1, .5);         // green using hsl color
      */
     export class Color {
@@ -1085,10 +1130,18 @@ declare module "littlejsengine" {
      *  @type {Color}
      *  @memberof Utilities */
     export const WHITE: Color;
+    /** Color - Clear White #ffffff with 0 alpha
+     *  @type {Color}
+     *  @memberof Utilities */
+    export const CLEAR_WHITE: Color;
     /** Color - Black #000000
      *  @type {Color}
      *  @memberof Utilities */
     export const BLACK: Color;
+    /** Color - Clear Black #000000 with 0 alpha
+     *  @type {Color}
+     *  @memberof Utilities */
+    export const CLEAR_BLACK: Color;
     /** Color - Gray #808080
      *  @type {Color}
      *  @memberof Utilities */
@@ -1165,6 +1218,8 @@ declare module "littlejsengine" {
         textureIndex: number;
         /** @property {number} - How many pixels padding around tiles */
         padding: number;
+        /** @property {TextureInfo} - The texture info for this tile */
+        textureInfo: TextureInfo;
         /** Returns a copy of this tile offset by a vector
         *  @param {Vector2} offset - Offset to apply in pixels
         *  @return {TileInfo}
@@ -1175,26 +1230,31 @@ declare module "littlejsengine" {
         *  @return {TileInfo}
         */
         frame(frame: number): TileInfo;
-        /** Returns the texture info for this tile
-        *  @return {TextureInfo}
-        */
-        getTextureInfo(): TextureInfo;
+        /**
+         * Set this tile to use a full image
+         * @param {HTMLImageElement|OffscreenCanvas} image
+         * @param {WebGLTexture} [glTexture] - webgl texture
+         * @return {TileInfo}
+         */
+        setFullImage(image: HTMLImageElement | OffscreenCanvas, glTexture?: WebGLTexture): TileInfo;
     }
     /** Texture Info - Stores info about each texture */
     export class TextureInfo {
         /**
          * Create a TextureInfo, called automatically by the engine
-         * @param {HTMLImageElement} image
+         * @param {HTMLImageElement|OffscreenCanvas} image
+         * @param {WebGLTexture} [glTexture] - webgl texture
          */
-        constructor(image: HTMLImageElement);
+        constructor(image: HTMLImageElement | OffscreenCanvas, glTexture?: WebGLTexture);
         /** @property {HTMLImageElement} - image source */
-        image: HTMLImageElement;
+        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;
+        createWebGLTexture(): void;
     }
     /**
      * LittleJS Drawing System
@@ -1286,9 +1346,9 @@ declare module "littlejsengine" {
      *  @param {number}  [lineWidth=0]
      *  @param {Color}   [lineColor=(0,0,0,1)]
      *  @param {boolean} [screenSpace=false]
-     *  @param {CanvasRenderingContext2D} [context=mainContext]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawPoly(points: Array<Vector2>, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
+    export function drawPoly(points: Array<Vector2>, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored ellipse using passed in point
      *  @param {Vector2} pos
      *  @param {number}  [width=1]
@@ -1298,9 +1358,9 @@ declare module "littlejsengine" {
      *  @param {number}  [lineWidth=0]
      *  @param {Color}   [lineColor=(0,0,0,1)]
      *  @param {boolean} [screenSpace=false]
-     *  @param {CanvasRenderingContext2D} [context=mainContext]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawEllipse(pos: Vector2, width?: number, height?: number, angle?: number, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
+    export function drawEllipse(pos: Vector2, width?: number, height?: number, angle?: number, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored circle using passed in point
      *  @param {Vector2} pos
      *  @param {number}  [radius=1]
@@ -1308,19 +1368,19 @@ declare module "littlejsengine" {
      *  @param {number}  [lineWidth=0]
      *  @param {Color}   [lineColor=(0,0,0,1)]
      *  @param {boolean} [screenSpace=false]
-     *  @param {CanvasRenderingContext2D} [context=mainContext]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawCircle(pos: Vector2, radius?: number, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
+    export function drawCircle(pos: Vector2, radius?: number, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw directly to a 2d canvas context in world space
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
      *  @param {number}   angle
-     *  @param {boolean}  mirror
-     *  @param {Function} drawFunction
+     *  @param {boolean}  [mirror]
+     *  @param {Function} [drawFunction]
      *  @param {boolean} [screenSpace=false]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawCanvas2D(pos: Vector2, size: Vector2, angle: number, mirror: boolean, drawFunction: Function, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawCanvas2D(pos: Vector2, size: Vector2, angle?: number, mirror?: boolean, drawFunction?: Function, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw text on main canvas in world space
      *  Automatically splits new lines into rows
      *  @param {string}  text
@@ -1332,7 +1392,7 @@ declare module "littlejsengine" {
      *  @param {CanvasTextAlign}  [textAlign='center']
      *  @param {string}  [font=fontDefault]
      *  @param {number}  [maxWidth]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+     *  @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;
     /** Draw text on overlay canvas in world space
@@ -1365,7 +1425,7 @@ declare module "littlejsengine" {
     /** Enable normal or additive blend mode
      *  @param {boolean} [additive]
      *  @param {boolean} [useWebGL=glEnable]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
     export function setBlendMode(additive?: boolean, useWebGL?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Combines all LittleJS canvases onto the main canvas and clears them
@@ -1452,11 +1512,10 @@ declare module "littlejsengine" {
      *  @return {WebGLShader}
      *  @memberof WebGL */
     export function glCompileShader(source: string, type: number): WebGLShader;
-    /** Draw any sprites still in the buffer and copy to main canvas
+    /** Flush any sprites still in the buffer and copy to main canvas
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
-     *  @param {boolean} [forceDraw]
      *  @memberof WebGL */
-    export function glCopyToContext(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, forceDraw?: boolean): void;
+    export function glCopyToContext(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Create WebGL program with given shaders
      *  @param {String} vsSource
      *  @param {String} fsSource
@@ -1464,37 +1523,42 @@ declare module "littlejsengine" {
      *  @memberof WebGL */
     export function glCreateProgram(vsSource: string, fsSource: string): WebGLProgram;
     /** Create WebGL texture from an image and init the texture settings
-     *  @param {HTMLImageElement} image
+     *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} [image]
      *  @return {WebGLTexture}
      *  @memberof WebGL */
-    export function glCreateTexture(image: HTMLImageElement): WebGLTexture;
+    export function glCreateTexture(image?: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas): WebGLTexture;
+    /** Deletes a WebGL texture
+     *  @param {WebGLTexture} [texture]
+     *  @memberof WebGL */
+    export function glDeleteTexture(texture?: WebGLTexture): void;
     /** Set WebGL texture data from an image
      *  @param {WebGLTexture} texture
-     *  @param {HTMLImageElement} image
+     *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} image
      *  @memberof WebGL */
-    export function glSetTextureData(texture: WebGLTexture, image: HTMLImageElement): void;
+    export function glSetTextureData(texture: WebGLTexture, image: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas): void;
     /** Add a sprite to the gl draw list, used by all gl draw functions
      *  @param {Number} x
      *  @param {Number} y
      *  @param {Number} sizeX
      *  @param {Number} sizeY
-     *  @param {Number} angle
-     *  @param {Number} uv0X
-     *  @param {Number} uv0Y
-     *  @param {Number} uv1X
-     *  @param {Number} uv1Y
+     *  @param {Number} [angle]
+     *  @param {Number} [uv0X]
+     *  @param {Number} [uv0Y]
+     *  @param {Number} [uv1X]
+     *  @param {Number} [uv1Y]
      *  @param {Number} [rgba=-1] - white is -1
      *  @param {Number} [rgbaAdditive=0] - black is 0
      *  @memberof WebGL */
-    export function glDraw(x: number, y: number, sizeX: number, sizeY: number, angle: number, uv0X: number, uv0Y: number, uv1X: number, uv1Y: number, rgba?: number, rgbaAdditive?: number): void;
+    export function glDraw(x: number, y: number, sizeX: number, sizeY: number, angle?: number, uv0X?: number, uv0Y?: number, uv1X?: number, uv1Y?: number, rgba?: number, rgbaAdditive?: number): void;
     /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
      *  @memberof WebGL */
     export function glFlush(): void;
     /** Set the WebGl texture, called automatically if using multiple textures
      *  - This may also flush the gl buffer resulting in more draw calls and worse performance
      *  @param {WebGLTexture} texture
+     *  @param {boolean} wrap - Should the texture wrap or clamp
      *  @memberof WebGL */
-    export function glSetTexture(texture: WebGLTexture): void;
+    export function glSetTexture(texture: WebGLTexture, wrap?: boolean): void;
     /** Set anti-aliasing for webgl canvas
      *  @param {boolean} [antialias]
      *  @memberof WebGL */
@@ -1548,34 +1612,33 @@ declare module "littlejsengine" {
     export function keyDirection(up?: string, down?: string, left?: string, right?: string): Vector2;
     /** Clears all input
      *  @memberof Input */
-    export function clearInput(): void;
-    /**
-     * LittleJS Input System
-     * - Tracks keyboard down, pressed, and released
-     * - Tracks mouse buttons, position, and wheel
-     * - Tracks multiple analog gamepads
-     * - Touch input is handled as mouse input
-     * - Virtual gamepad for touch devices
-     * @namespace Input
-     */
-    /** Returns true if device key is down
+    export function inputClear(): void;
+    /** Clears an input key state
      *  @param {string|number} key
      *  @param {number} [device]
+     *  @param {boolean} [clearDown=true]
+     *  @param {boolean} [clearPressed=true]
+     *  @param {boolean} [clearReleased=true]
+     *  @memberof Input */
+    export function inputClearKey(key: string | number, device?: number, clearDown?: boolean, clearPressed?: boolean, clearReleased?: boolean): void;
+    /** Returns true if mouse button is down
+     *  @function
+     *  @param {number} button
      *  @return {boolean}
      *  @memberof Input */
-    export function mouseIsDown(key: string | number, device?: number): boolean;
-    /** Returns true if device key was pressed this frame
-     *  @param {string|number} key
-     *  @param {number} [device]
+    export function mouseIsDown(button: number): boolean;
+    /** Returns true if mouse button was pressed
+     *  @function
+     *  @param {number} button
      *  @return {boolean}
      *  @memberof Input */
-    export function mouseWasPressed(key: string | number, device?: number): boolean;
-    /** Returns true if device key was released this frame
-     *  @param {string|number} key
-     *  @param {number} [device]
+    export function mouseWasPressed(button: number): boolean;
+    /** Returns true if mouse button was released
+     *  @function
+     *  @param {number} button
      *  @return {boolean}
      *  @memberof Input */
-    export function mouseWasReleased(key: string | number, device?: number): boolean;
+    export function mouseWasReleased(button: number): boolean;
     /** Mouse pos in world space
      *  @type {Vector2}
      *  @memberof Input */
@@ -1584,6 +1647,14 @@ declare module "littlejsengine" {
      *  @type {Vector2}
      *  @memberof Input */
     export let mousePosScreen: Vector2;
+    /** Mouse movement delta in world space
+     *  @type {Vector2}
+     *  @memberof Input */
+    export let mouseDelta: Vector2;
+    /** Mouse movement delta in screen space
+     *  @type {Vector2}
+     *  @memberof Input */
+    export let mouseDeltaScreen: Vector2;
     /** Mouse wheel delta this frame
      *  @type {number}
      *  @memberof Input */
@@ -1636,6 +1707,16 @@ declare module "littlejsengine" {
     /** True if a touch device has been detected
      *  @memberof Input */
     export const isTouchDevice: boolean;
+    /** Request to lock the pointer, does not work on touch devices
+     *  @memberof Input */
+    export function pointerLockRequest(): void;
+    /** Request to unlock the pointer
+     *  @memberof Input */
+    export function pointerLockExit(): void;
+    /** Check if pointer is locked (true if locked)
+     *  @return {boolean}
+     *  @memberof Input */
+    export function pointerLockIsActive(): boolean;
     /**
      * Sound Object - Stores a sound for later use and can be played positionally
      *
@@ -1650,13 +1731,13 @@ declare module "littlejsengine" {
     export class Sound {
         /** Create a sound object and cache the zzfx samples for later use
          *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
-         *  @param {number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
+         *  @param {number} [range=soundDefaultRange] - World space max range of sound
          *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
          */
         constructor(zzfxSound: any[], range?: number, taper?: number);
-        /** @property {number} - World space max range of sound, will not play if camera is farther away */
+        /** @property {number} - World space max range of sound */
         range: number;
-        /** @property {number} - At what percentage of range should it start tapering off */
+        /** @property {number} - At what percentage of range should it start tapering */
         taper: number;
         /** @property {number} - How much to randomize frequency each time sound plays */
         randomness: any;
@@ -1677,8 +1758,10 @@ declare module "littlejsengine" {
          *  @param {number}  [volume] - How much to scale volume by
          */
         setVolume(volume?: number): void;
-        /** Stop the last instance of this sound that was played */
-        stop(): void;
+        /** Stop the last instance of this sound that was played
+         *  @param {number}  [fadeTime] - How long to fade out (seconds)
+         */
+        stop(fadeTime?: number): void;
         /** Get source of most recent instance of this sound that was played
          *  @return {AudioBufferSourceNode}
          */
@@ -1713,11 +1796,17 @@ declare module "littlejsengine" {
         /** Create a sound object and cache the wave file for later use
          *  @param {string} filename - Filename of audio file to load
          *  @param {number} [randomness] - How much to randomize frequency each time sound plays
-         *  @param {number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
-         *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
+         *  @param {number} [range=soundDefaultRange] - World space max range of sound
+         *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
          *  @param {Function} [onloadCallback] - callback function to call when sound is loaded
          */
         constructor(filename: string, randomness?: number, range?: number, taper?: number, onloadCallback?: Function);
+        /** @property {Function} - callback function to call when sound is loaded */
+        onloadCallback: Function;
+        /** Loads a sound from a URL and decodes it into sample data. Must be used with await!
+        *  @param {string} filename
+        *  @return {Promise<void>} */
+        loadSound(filename: string): Promise<void>;
     }
     /** Play an mp3, ogg, or wav audio from a local file or url
      *  @param {string}  filename - Location of sound file to play
@@ -1852,45 +1941,45 @@ declare module "littlejsengine" {
         drawSize: any;
         /** @property {TileInfo} - Tile info to render object (undefined is untextured) */
         tileInfo: TileInfo;
-        /** @property {number}  - Angle to rotate the object */
+        /** @property {number} - Angle to rotate the object */
         angle: number;
-        /** @property {Color}   - Color to apply when rendered */
+        /** @property {Color} - Color to apply when rendered */
         color: Color;
-        /** @property {Color}   - Additive color to apply when rendered */
+        /** @property {Color} - Additive color to apply when rendered */
         additiveColor: any;
         /** @property {boolean} - Should it flip along y axis when rendered */
         mirror: boolean;
-        /** @property {number} [mass=objectDefaultMass]                 - How heavy the object is, static if 0 */
+        /** @property {number} [mass=objectDefaultMass] - How heavy the object is, static if 0 */
         mass: number;
-        /** @property {number} [damping=objectDefaultDamping]           - How much to slow down velocity each frame (0-1) */
+        /** @property {number} [damping=objectDefaultDamping] - How much to slow down velocity each frame (0-1) */
         damping: number;
         /** @property {number} [angleDamping=objectDefaultAngleDamping] - How much to slow down rotation each frame (0-1) */
         angleDamping: number;
-        /** @property {number} [elasticity=objectDefaultElasticity]     - How bouncy the object is when colliding (0-1) */
-        elasticity: number;
-        /** @property {number} [friction=objectDefaultFriction]         - How much friction to apply when sliding (0-1) */
+        /** @property {number} [restitution=objectDefaultRestitution] - How bouncy the object is when colliding (0-1) */
+        restitution: number;
+        /** @property {number} [friction=objectDefaultFriction] - How much friction to apply when sliding (0-1) */
         friction: number;
-        /** @property {number}  - How much to scale gravity by for this object */
+        /** @property {number} - How much to scale gravity by for this object */
         gravityScale: number;
-        /** @property {number}  - Objects are sorted by render order */
+        /** @property {number} - Objects are sorted by render order */
         renderOrder: number;
         /** @property {Vector2} - Velocity of the object */
         velocity: Vector2;
-        /** @property {number}  - Angular velocity of the object */
+        /** @property {number} - Angular velocity of the object */
         angleVelocity: number;
-        /** @property {number}  - Track when object was created  */
+        /** @property {number} - Track when object was created  */
         spawnTime: number;
-        /** @property {Array<EngineObject>}   - List of children of this object */
+        /** @property {Array<EngineObject>} - List of children of this object */
         children: any[];
-        /** @property {boolean}  - Limit object speed using linear or circular math */
-        clampSpeedLinear: boolean;
+        /** @property {boolean} - Limit object speed along x and y axis */
+        clampSpeed: boolean;
         /** @property {EngineObject} - Object we are standing on, if any  */
         groundObject: EngineObject | TileCollisionLayer;
         /** @property {EngineObject} - Parent of object if in local space  */
         parent: any;
-        /** @property {Vector2}      - Local position if child */
+        /** @property {Vector2} - Local position if child */
         localPos: Vector2;
-        /** @property {number}       - Local angle if child  */
+        /** @property {number} - Local angle if child  */
         localAngle: number;
         /** @property {boolean} - Object collides with the tile collision */
         collideTiles: boolean;
@@ -1906,7 +1995,7 @@ declare module "littlejsengine" {
         update(): void;
         /** Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder */
         render(): void;
-        /** Destroy this object, destroy it's children, detach it's parent, and mark it for removal */
+        /** Destroy this object, destroy its children, detach it's parent, and mark it for removal */
         destroy(): void;
         destroyed: number;
         /** Convert from local space to world space
@@ -1937,6 +2026,9 @@ declare module "littlejsengine" {
         /** Apply acceleration to this object (adjust velocity, not affected by mass)
          *  @param {Vector2} acceleration */
         applyAcceleration(acceleration: Vector2): void;
+        /** Apply angular acceleration to this object
+         *  @param {number} acceleration */
+        applyAngularAcceleration(acceleration: number): void;
         /** Apply force to this object (adjust velocity, affected by mass)
          *  @param {Vector2} force */
         applyForce(force: Vector2): void;
@@ -1980,22 +2072,34 @@ declare module "littlejsengine" {
     *  @param {Vector2} pos
     *  @return {number}
     *  @memberof TileCollision */
-    export function getTileCollisionData(pos: Vector2): number;
+    export function tileCollisionGetData(pos: Vector2): number;
     /** Check if a tile layer collides with another object
      *  @param {Vector2}      pos
      *  @param {Vector2}      [size=(0,0)]
-     *  @param {EngineObject} [object]
+     *  @param {EngineObject} [object] - An object or undefined for generic test
+     *  @param {boolean}      [solidOnly] - Only check solid layers if true
      *  @return {TileCollisionLayer}
      *  @memberof TileCollision */
-    export function tileCollisionTest(pos: Vector2, size?: Vector2, object?: EngineObject): TileCollisionLayer;
+    export function tileCollisionTest(pos: Vector2, size?: Vector2, object?: EngineObject, solidOnly?: boolean): TileCollisionLayer;
     /** Return the center of first tile hit, undefined if nothing was hit.
      *  This does not return the exact intersection, but the center of the tile hit.
      *  @param {Vector2}      posStart
      *  @param {Vector2}      posEnd
-     *  @param {EngineObject} [object]
+     *  @param {EngineObject} [object] - An object or undefined for generic test
+     *  @param {boolean}      [solidOnly=true] - Only check solid layers if true
      *  @return {Vector2}
      *  @memberof TileCollision */
-    export function tileCollisionRaycast(posStart: Vector2, posEnd: Vector2, object?: EngineObject): Vector2;
+    export function tileCollisionRaycast(posStart: Vector2, posEnd: Vector2, object?: EngineObject, solidOnly?: boolean): Vector2;
+    /**
+     * Load tile layers from exported data
+     *  @param {Object}   tileMapData - Level data from exported data
+     *  @param {TileInfo} [tileInfo] - Default tile info (used for size and texture)
+     *  @param {number}   [renderOrder] - Render order of the top layer
+     *  @param {number}   [collisionLayer] - Layer to use for collision if any
+     *  @param {boolean}  [draw] - Should the layer be drawn automatically
+     *  @return {Array<TileCollisionLayer>}
+     *  @memberof TileCollision */
+    export function tileCollisionLoad(tileMapData: any, tileInfo?: TileInfo, renderOrder?: number, collisionLayer?: number, draw?: boolean): Array<TileCollisionLayer>;
     /**
      * Tile layer data object stores info about how to draw a tile
      * @example
@@ -2024,33 +2128,85 @@ declare module "littlejsengine" {
         /** Set this tile to clear, it will not be rendered */
         clear(): void;
     }
+    /**
+     * Canvas Layer - cached off screen rendering system
+     * - Contains an offscreen canvas that can be rendered to
+     * - Webgl rendering is optional, call useWebGL to enable
+     * @extends EngineObject
+     * @example
+     * const canvasLayer = new CanvasLayer(vec2(), vec2(200,100));
+     */
+    export class CanvasLayer extends EngineObject {
+        /** Create a canvas layer object
+         *  @param {Vector2}  [position] - World space position of the layer
+         *  @param {Vector2}  [size] - World space size of the layer
+         *  @param {number}   [angle] - Angle the layer is rotated by
+         *  @param {number}   [renderOrder] - Objects sorted by renderOrder
+         *  @param {Vector2}  [canvasSize] - Default size of canvas, can be changed later
+        */
+        constructor(position?: Vector2, size?: Vector2, angle?: number, renderOrder?: number, canvasSize?: Vector2);
+        /** @property {HTMLCanvasElement} - The canvas used by this layer */
+        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;
+        /** 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
+        *  @param {Color}   [color] - Color to modulate with
+        *  @param {number}  [angle] - Angle to rotate by
+        *  @param {boolean} [mirror] - If true image is flipped along the Y axis
+        *  @param {Color}   [additiveColor] - Additive color to be applied if any
+        *  @param {boolean} [screenSpace] - If true the pos and size are in screen space
+        *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
+        *  @memberof Draw */
+        draw(pos: Vector2, size?: Vector2, angle?: number, color?: Color, mirror?: boolean, additiveColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+        /** Draw onto the layer canvas in world space (bypass webgl)
+         *  @param {Vector2}  pos
+         *  @param {Vector2}  size
+         *  @param {number}   angle
+         *  @param {boolean}  mirror
+         *  @param {Function} drawFunction */
+        drawCanvas2D(pos: Vector2, size: Vector2, angle: number, mirror: boolean, drawFunction: Function): void;
+        /** Draw a tile onto the layer canvas in world space
+         *  @param {Vector2}  pos
+         *  @param {Vector2}  [size=(1,1)]
+         *  @param {TileInfo} [tileInfo]
+         *  @param {Color}    [color=(1,1,1,1)]
+         *  @param {number}   [angle=0]
+         *  @param {boolean}  [mirror=0] */
+        drawTile(pos: Vector2, size?: Vector2, tileInfo?: TileInfo, color?: Color, angle?: number, mirror?: boolean): void;
+        /** Draw a rectangle onto the layer canvas in world space
+         *  @param {Vector2} pos
+         *  @param {Vector2} [size=(1,1)]
+         *  @param {Color}   [color=(1,1,1,1)]
+         *  @param {number}  [angle=0] */
+        drawRect(pos: Vector2, size?: Vector2, color?: Color, angle?: number): void;
+        /** Create or update the webgl texture for this layer
+         *  @param {boolean} [enable] - enable webgl rendering and update the texture */
+        useWebGL(enable?: boolean): void;
+    }
     /**
      * Tile Layer - cached rendering system for tile layers
      * - Each Tile layer is rendered to an off screen canvas
      * - To allow dynamic modifications, layers are rendered using canvas 2d
      * - Some devices like mobile phones are limited to 4k texture resolution
      * - For with 16x16 tiles this limits layers to 256x256 on mobile devices
-     * @extends EngineObject
+     * @extends CanvasLayer
      * @example
      * const tileLayer = new TileLayer(vec2(), vec2(200,100));
      */
-    export class TileLayer extends EngineObject {
+    export class TileLayer extends CanvasLayer {
         /** Create a tile layer object
-        *  @param {Vector2}  [position=(0,0)] - World space position
-        *  @param {Vector2}  [size=(1,1)]     - World space size
-        *  @param {TileInfo} [tileInfo]       - Tile info for layer
-        *  @param {Vector2}  [scale=(1,1)]    - How much to scale this layer when rendered
-        *  @param {number}   [renderOrder]    - Objects are sorted by renderOrder
+        *  @param {Vector2}  position      - World space position
+        *  @param {Vector2}  size          - World space size
+        *  @param {TileInfo} [tileInfo]    - Default tile info for layer (used for size and texture)
+        *  @param {Vector2}  [scale=(1,1)] - How much to scale this layer when rendered
+        *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
+        *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering
         */
-        constructor(position?: Vector2, size?: Vector2, tileInfo?: TileInfo, scale?: Vector2, renderOrder?: number);
-        /** @property {HTMLCanvasElement} - The canvas used by this tile layer */
-        canvas: HTMLCanvasElement;
-        /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
-        context: CanvasRenderingContext2D;
-        /** @property {Vector2} - How much to scale this layer when rendered */
-        scale: Vector2;
-        /** @property {boolean} - If true this layer will render to overlay canvas and appear above all objects */
-        isOverlay: boolean;
+        constructor(position: Vector2, size: Vector2, tileInfo?: TileInfo, scale?: Vector2, renderOrder?: number, useWebGL?: boolean);
         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 */
@@ -2068,13 +2224,6 @@ declare module "littlejsengine" {
          *  @param {boolean} [clear] - should the old tile be cleared out
          */
         drawTileData(layerPos: Vector2, clear?: boolean): void;
-        /** Draw directly to the 2D canvas in world space (bypass webgl)
-         *  @param {Vector2}  pos
-         *  @param {Vector2}  size
-         *  @param {number}   angle
-         *  @param {boolean}  mirror
-         *  @param {Function} drawFunction */
-        drawCanvas2D(pos: Vector2, size: Vector2, angle: number, mirror: boolean, drawFunction: Function): void;
         /** Set data at a given position in the array
          *  @param {Vector2}       layerPos - Local position in array
          *  @param {TileLayerData} data     - Data to set
@@ -2084,22 +2233,8 @@ declare module "littlejsengine" {
          *  @param {Vector2} layerPos - Local position in array
          *  @return {TileLayerData} */
         getData(layerPos: Vector2): TileLayerData;
-        /** @type {[HTMLCanvasElement, CanvasRenderingContext2D, Vector2, Vector2, number]} */
-        savedRenderSettings: [HTMLCanvasElement, CanvasRenderingContext2D, Vector2, Vector2, number];
-        /** Draw a tile directly onto the layer canvas in world space
-         *  @param {Vector2}  pos
-         *  @param {Vector2}  [size=(1,1)]
-         *  @param {TileInfo} [tileInfo]
-         *  @param {Color}    [color=(1,1,1,1)]
-         *  @param {number}   [angle=0]
-         *  @param {boolean}  [mirror=0] */
-        drawTile(pos: Vector2, size?: Vector2, tileInfo?: TileInfo, color?: Color, angle?: number, mirror?: boolean): void;
-        /** Draw a rectangle directly onto the layer canvas in world space
-         *  @param {Vector2} pos
-         *  @param {Vector2} [size=(1,1)]
-         *  @param {Color}   [color=(1,1,1,1)]
-         *  @param {number}  [angle=0] */
-        drawRect(pos: Vector2, size?: Vector2, color?: Color, angle?: number): void;
+        /** @type {[HTMLCanvasElement|OffscreenCanvas, CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number]} */
+        savedRenderSettings: [HTMLCanvasElement | OffscreenCanvas, CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, Vector2, Vector2, number];
     }
     /**
      * Tile Collision Layer - a tile layer with collision
@@ -2110,25 +2245,26 @@ declare module "littlejsengine" {
      */
     export class TileCollisionLayer extends TileLayer {
         /** Create a tile layer object
-        *  @param {Vector2}  [position=(0,0)] - World space position
-        *  @param {Vector2}  [size=(0,0)]     - World space size
-        *  @param {TileInfo} [tileInfo]       - Tile info for layer
-        *  @param {number}   [renderOrder]    - Objects are sorted by renderOrder
+        *  @param {Vector2}  position      - World space position
+        *  @param {Vector2}  size          - World space size
+        *  @param {TileInfo} [tileInfo]    - Tile info for layer
+        *  @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);
+        constructor(position: Vector2, size: Vector2, tileInfo?: TileInfo, renderOrder?: number, useWebGL?: boolean);
         /** @property {Array<number>} - The tile collision grid */
         collisionData: any[];
         /** Clear and initialize tile collision to new size
         *  @param {Vector2} size - width and height of tile collision 2d grid */
         initCollision(size: Vector2): void;
         /** Set tile collision data for a given cell in the grid
-        *  @param {Vector2} pos
+        *  @param {Vector2} gridPos
         *  @param {number}  [data] */
-        setCollisionData(pos: Vector2, data?: number): void;
+        setCollisionData(gridPos: Vector2, data?: number): void;
         /** Get tile collision data for a given cell in the grid
-        *  @param {Vector2} pos
+        *  @param {Vector2} gridPos
         *  @return {number} */
-        getCollisionData(pos: Vector2): number;
+        getCollisionData(gridPos: Vector2): number;
         /** Check if collision with another object should occur
         *  @param {Vector2}      pos
         *  @param {Vector2}      [size=(0,0)]
@@ -2156,7 +2292,7 @@ declare module "littlejsengine" {
      * (
      *     pos, 0, 1, 0, 500, PI,      // pos, angle, emitSize, emitTime, emitRate, emitCone
      *     tile(0, 16),                // tileInfo
-     *     rgb(1,1,1),   rgb(0,0,0),   // colorStartA, colorStartB
+     *     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
      *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate,
@@ -2528,10 +2664,20 @@ declare module "littlejsengine" {
         defaultButtonColor: Color;
         /** @property {Color} - Default hover color for UI elements */
         defaultHoverColor: Color;
+        /** @property {Color} - Default color for disabled UI elements */
+        defaultDisabledColor: Color;
         /** @property {number} - Default line width for UI elements */
         defaultLineWidth: number;
+        /** @property {number} - Default rounded rect corner radius for UI elements */
+        defaultCornerRadius: number;
         /** @property {string} - Default font for UI elements */
         defaultFont: string;
+        /** @property {Sound} - Default sound when interactive UI element is pressed */
+        defaultSoundPress: any;
+        /** @property {Sound} - Default sound when interactive UI element is released */
+        defaultSoundRelease: any;
+        /** @property {Sound} - Default sound when interactive UI element is clicked */
+        defaultSoundClick: any;
         /** @property {Array<UIObject>} - List of all UI elements */
         uiObjects: any[];
         /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
@@ -2541,8 +2687,9 @@ declare module "littlejsengine" {
         *  @param {Vector2} size
         *  @param {Color}   [color=uiSystem.defaultColor]
         *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
-        *  @param {Color}   [lineColor=uiSystem.defaultLineColor] */
-        drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color): void;
+        *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
+        *  @param {number}  [lineWidth=uiSystem.defaultCornerRadius] */
+        drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, cornerRadius?: number): void;
         /** Draw a line to the UI context
         *  @param {Vector2} posA
         *  @param {Vector2} posB
@@ -2583,24 +2730,40 @@ declare module "littlejsengine" {
         pos: Vector2;
         /** @property {Vector2} - Screen space size of the object */
         size: Vector2;
-        /** @property {Color} */
+        /** @property {Color} - color of the object */
         color: Color;
-        /** @property {Color} */
-        lineColor: Color;
-        /** @property {Color} */
+        /** @property {Color} - color for text */
         textColor: Color;
-        /** @property {Color} */
+        /** @property {Color} - color used when hovering over the object */
         hoverColor: Color;
-        /** @property {number} */
+        /** @property {Color} - color for line drawing */
+        lineColor: Color;
+        /** @property {number} - width for line drawing */
         lineWidth: number;
-        /** @property {string} */
+        /** @property {string} - font for this objecct */
         font: string;
-        /** @property {boolean} */
+        /** @property {number} - override for text height */
+        textHeight: any;
+        /** @property {boolean} - should this object be drawn */
         visible: boolean;
-        /** @property {Array<UIObject>} */
+        /** @property {Array<UIObject>} - a list of this object's children */
         children: any[];
-        /** @property {UIObject} */
+        /** @property {UIObject} - this object's parent, position is in parent space */
         parent: any;
+        /** @property {number} - Extra size added when checking if element is touched */
+        extraTouchSize: number;
+        /** @property {Sound} - Sound when interactive element is pressed */
+        soundPress: any;
+        /** @property {Sound} - Sound when interactive element is released */
+        soundRelease: any;
+        /** @property {Sound} - Sound when interactive element is clicked */
+        soundClick: any;
+        /** @property {boolean} - Is the mouse over this element */
+        mouseIsOver: boolean;
+        /** @property {boolean} - Is this element interactive */
+        interactive: boolean;
+        /** @property {boolean} - Is the mouse held on this element (was pressed while over and hasn't been released) */
+        mouseIsHeld: boolean;
         /** Add a child UIObject to this object
          *  @param {UIObject} child
          */
@@ -2611,10 +2774,10 @@ declare module "littlejsengine" {
         removeChild(child: UIObject): void;
         /** Update the object, called automatically by plugin once each frame */
         update(): void;
-        mouseIsOver: boolean;
-        mouseIsHeld: boolean;
         /** Render the object, called automatically by plugin once each frame */
         render(): void;
+        /** Special update for when object is invisible */
+        updateInvisible(): void;
         /** Called when the mouse enters the object */
         onEnter(): void;
         /** Called when the mouse leaves the object */
@@ -2623,6 +2786,8 @@ declare module "littlejsengine" {
         onPress(): void;
         /** Called when the mouse is released while over the object */
         onRelease(): void;
+        /** Called when user clicks on this object */
+        onClick(): void;
         /** Called when the state of this object changes */
         onChange(): void;
     }
@@ -2679,6 +2844,10 @@ declare module "littlejsengine" {
         constructor(pos?: Vector2, size?: Vector2, text?: string, color?: Color);
         /** @property {string} */
         text: string;
+        /** @property {Color} */
+        disabledColor: Color;
+        /** @property {boolean} */
+        disabled: boolean;
     }
     /**
      * UICheckbox - A UI object that acts as a checkbox
@@ -2712,41 +2881,41 @@ declare module "littlejsengine" {
         value: number;
         /** @property {string} */
         text: string;
+        /** @property {Color} */
         handleColor: Color;
     }
     /**
      * LittleJS Box2D Physics Plugin
      * - Box2dObject extends EngineObject with Box2D physics
-     * - Call box2dEngineInit() to start instead of normal engineInit()
+     * - Call box2dInit() before engineInit() to enable
      * - You will also need to include box2d.wasm.js
-     * - Uses box2d.js super fast web assembly port of Box2D
+     * - Uses a super fast web assembly port of Box2D
      * - More info: https://github.com/kripken/box2d.js
-     * - Fully wraps everything in Box2d
      * - Functions to create polygon, circle, and edge shapes
-     * - Raycasting and querying
-     * - Joint creation
      * - Contact begin and end callbacks
+     * - Wraps b2Vec2 type to/from Vector2
+     * - Raycasting and querying
+     * - Every type of joint
      * - Debug physics drawing
+     * @namespace Box2D
      */
     /** Global Box2d Plugin object
-     *  @type {Box2dPlugin} */
+     *  @type {Box2dPlugin}
+     *  @memberof Box2D */
     export let box2d: Box2dPlugin;
     /** Enable Box2D debug drawing
      *  @type {boolean}
-     *  @default */
+     *  @default
+     *  @memberof Box2D */
     export let box2dDebug: boolean;
     /** Enable Box2D debug drawing
-     *  @param {boolean} enable */
+     *  @param {boolean} enable
+     *  @memberof Box2D */
     export function box2dSetDebug(enable: boolean): void;
-    /** Box2d Init - Startup LittleJS engine with your callback functions
-     *  @param {Function|function():Promise} gameInit - Called once after the engine starts up
-     *  @param {Function} gameUpdate - Called every frame before objects are updated
-     *  @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused
-     *  @param {Function} gameRender - Called before objects are rendered, for drawing the background
-     *  @param {Function} gameRenderPost - Called after objects are rendered, useful for drawing UI
-     *  @param {Array<string>} [imageSources=[]] - List of images to load
-     *  @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default */
-    export function box2dEngineInit(gameInit: Function | (() => Promise<any>), gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, imageSources?: Array<string>, rootElement?: HTMLElement): void;
+    /** Box2d Init - Call with await before starting LittleJS to init box2d
+     *  @return {Promise<Box2dPlugin>}
+     *  @memberof Box2D */
+    export function box2dInit(): Promise<Box2dPlugin>;
     /**
      * Box2D Global Object
      * - Wraps Box2d world and provides global functions
@@ -3050,9 +3219,6 @@ declare module "littlejsengine" {
         /** Apply torque to this object
          *  @param {number} torque */
         applyTorque(torque: number): void;
-        /** Apply angular acceleration to this object
-         *  @param {number} acceleration */
-        applyAngularAcceleration(acceleration: number): void;
         /** Check if this object has any fixtures
          *  @return {boolean} */
         hasFixtures(): boolean;
@@ -3625,4 +3791,56 @@ declare module "littlejsengine" {
          *  @return {number} */
         getCorrectionFactor(): number;
     }
+    /** Draw a scalable nine-slice UI element in world space
+     *  This function can apply color and additive color if webgl is enabled
+     *  @param {Vector2} pos - World space position
+     *  @param {Vector2} size - World space size
+     *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
+     *  @param {Color} [color] - Color to modulate with
+     *  @param {number} [borderSize=1] - Width of the border sections
+     *  @param {Color} [additiveColor] - Additive color
+     *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+     *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
+     *  @param {boolean} [screenSpace] - Use screen space coordinates
+     *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
+     *  @memberof DrawUtilities */
+    export function drawNineSlice(pos: Vector2, size: Vector2, startTile: TileInfo, color?: Color, borderSize?: number, additiveColor?: Color, extraSpace?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
+    /**
+     * LittleJS Drawing Utilities Plugin
+     * - Extra drawing functions for LittleJS
+     * - 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
+     *  @param {Vector2} pos - Screen space position
+     *  @param {Vector2} size - Screen space size
+     *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
+     *  @param {number} [borderSize=1] - Width of the border sections
+     *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+     *  @memberof DrawUtilities */
+    export function drawNineSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number): void;
+    /** Draw a scalable three-slice UI element in world space
+     *  This function can apply color and additive color if webgl is enabled
+     *  @param {Vector2} pos - World space position
+     *  @param {Vector2} size - World space size
+     *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
+     *  @param {Color} [color] - Color to modulate with
+     *  @param {number} [borderSize=1] - Width of the border sections
+     *  @param {Color} [additiveColor] - Additive color
+     *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+     *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
+     *  @param {boolean} [screenSpace] - Use screen space coordinates
+     *  @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, 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
+     *  @param {Vector2} pos - Screen space position
+     *  @param {Vector2} size - Screen space size
+     *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
+     *  @param {number} [borderSize=1] - Width of the border sections
+     *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+     *  @memberof DrawUtilities */
+    export function drawThreeSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number): void;
 }