littlejsengine 1.12.6 → 1.13.4

package/dist/littlejs.d.ts

@@ -59,18 +59,32 @@ 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): Promise<void>;
     /** Update each engine object, remove destroyed objects, and update time
@@ -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,11 +252,22 @@ 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
      *  @memberof Settings */
     export let cameraScale: number;
+    /** Enable applying color to tiles when using canvas2d
+     *  - This is slower but should be the same as webgl rendering
+     *  @type {boolean}
+     *  @default
+     *  @memberof Settings */
+    export let canvasColorTiles: boolean;
     /** The max size of the canvas, centered if window is larger
      *  @type {Vector2}
      *  @default Vector2(1920,1080)
@@ -254,13 +279,19 @@ declare module "littlejsengine" {
      *  @default Vector2()
      *  @memberof Settings */
     export let canvasFixedSize: Vector2;
-    /** Use nearest neighbor canvas scaling for more pixelated look
-     *  - Must be set before startup to take effect
+    /** Use nearest canvas scaling for more pixelated look
      *  - If enabled sets css image-rendering:pixelated
      *  @type {boolean}
      *  @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
@@ -316,7 +347,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 +374,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,10 +455,21 @@ 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 */
     export function setCameraScale(scale: number): void;
+    /** Set if tiles should be colorized when using canvas2d
+     *  This can be slower but results should look nearly identical to webgl rendering
+     *  It can be enabled/disabled at any time
+     *  Optimized for performance, and will use faster method if color is white or untextured
+     *  @param {boolean} colorTiles
+     *  @memberof Settings */
+    export function setCanvasColorTiles(colorTiles: boolean): void;
     /** Set max size of the canvas
      *  @param {Vector2} size
      *  @memberof Settings */
@@ -442,10 +478,17 @@ declare module "littlejsengine" {
      *  @param {Vector2} size
      *  @memberof Settings */
     export function setCanvasFixedSize(size: Vector2): void;
-    /** Use nearest neighbor scaling algorithm for canvas for more pixelated look
+    /** 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 */
@@ -465,11 +508,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 +534,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 +648,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 +691,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 +705,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}
@@ -692,10 +729,11 @@ declare module "littlejsengine" {
      *  @memberof Utilities */
     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
      *  @param {Vector2} posA          - Center of box A
      *  @param {Vector2} sizeA         - Size of box A
      *  @param {Vector2} posB          - Center of box B
-     *  @param {Vector2} [sizeB=(0,0)] - Size of box B, a point if undefined
+     *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
      *  @return {boolean}              - True if overlapping
      *  @memberof Utilities */
     export function isOverlapping(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB?: Vector2): boolean;
@@ -711,9 +749,10 @@ declare module "littlejsengine" {
      *  @param {number} [frequency] - Frequency of the wave in Hz
      *  @param {number} [amplitude] - Amplitude (max height) of the wave
      *  @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 */
-    export function wave(frequency?: number, amplitude?: number, t?: number): number;
+    export function wave(frequency?: number, amplitude?: number, t?: number, offset?: number): number;
     /** Formats seconds to mm:ss style for display purposes
      *  @param {number} t - time in seconds
      *  @return {string}
@@ -753,7 +792,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)]
@@ -773,8 +812,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
@@ -787,6 +826,10 @@ 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;
@@ -795,6 +838,14 @@ declare module "littlejsengine" {
         *  @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
@@ -872,6 +923,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;
@@ -894,9 +950,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;
@@ -923,7 +986,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 {
@@ -1091,14 +1154,36 @@ declare module "littlejsengine" {
      * @memberof Utilities
      */
     export function isColor(c: any): boolean;
+    /**
+     * Check if object is a valid Vector2
+     * @param {any} v
+     * @return {boolean}
+     * @memberof Utilities
+     */
+    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
+     */
+    export function isNumber(n: any): boolean;
     /** Color - White #ffffff
      *  @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 */
@@ -1143,10 +1228,10 @@ declare module "littlejsengine" {
      * 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]                - Index of tile in sheet
+     * @param {Vector2|number} [pos=0] - Index of tile in sheet
      * @param {Vector2|number} [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} [textureIndex] - Texture index to use
+     * @param {number} [padding] - How many pixels padding around tiles
      * @return {TileInfo}
      * @example
      * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -1175,6 +1260,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}
@@ -1185,26 +1272,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
@@ -1276,7 +1368,7 @@ declare module "littlejsengine" {
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [angle]
      *  @param {boolean} [useWebGL=glEnable]
-     *  @param {boolean} [screenSpace=false]
+     *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
     export function drawRect(pos: Vector2, size?: Vector2, color?: Color, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
@@ -1285,52 +1377,58 @@ declare module "littlejsengine" {
      *  @param {Vector2} posB
      *  @param {number}  [thickness]
      *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {number}  [angle] - Angle to rotate by
      *  @param {boolean} [useWebGL=glEnable]
-     *  @param {boolean} [screenSpace=false]
+     *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
-    export function drawLine(posA: Vector2, posB: Vector2, thickness?: number, color?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawLine(posA: Vector2, posB: Vector2, thickness?: number, color?: Color, pos?: Vector2, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored polygon using passed in points
-     *  @param {Array<Vector2>}   points - Array of Vector2 points
+     *  @param {Array<Vector2>} points - Array of Vector2 points
      *  @param {Color}   [color=(1,1,1,1)]
-     *  @param {number}  [lineWidth=0]
+     *  @param {number}  [lineWidth]
      *  @param {Color}   [lineColor=(0,0,0,1)]
-     *  @param {boolean} [screenSpace=false]
-     *  @param {CanvasRenderingContext2D} [context=mainContext]
+     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {number}  [angle] - Angle to rotate by
+     *  @param {boolean} [useWebGL] - Webgl not supported
+     *  @param {boolean} [screenSpace]
+     *  @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, pos?: Vector2, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored ellipse using passed in point
      *  @param {Vector2} pos
-     *  @param {number}  [width=1]
-     *  @param {number}  [height=1]
-     *  @param {number}  [angle=0]
+     *  @param {Vector2} [size=(1,1)]
      *  @param {Color}   [color=(1,1,1,1)]
-     *  @param {number}  [lineWidth=0]
+     *  @param {number}  [angle]
+     *  @param {number}  [lineWidth]
      *  @param {Color}   [lineColor=(0,0,0,1)]
-     *  @param {boolean} [screenSpace=false]
-     *  @param {CanvasRenderingContext2D} [context=mainContext]
+     *  @param {boolean} [useWebGL] - Webgl not supported
+     *  @param {boolean} [screenSpace]
+     *  @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, size?: Vector2, color?: Color, angle?: number, lineWidth?: number, lineColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored circle using passed in point
      *  @param {Vector2} pos
      *  @param {number}  [radius=1]
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [lineWidth=0]
      *  @param {Color}   [lineColor=(0,0,0,1)]
+     *  @param {boolean} [useWebGL] - Webgl not supported
      *  @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, useWebGL?: boolean, 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
@@ -1342,7 +1440,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
@@ -1374,10 +1472,9 @@ declare module "littlejsengine" {
     export function drawTextScreen(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, maxWidth?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** 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;
+    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
      *  @memberof Draw */
@@ -1440,12 +1537,13 @@ declare module "littlejsengine" {
     /**
      * LittleJS WebGL Interface
      * - All webgl used by the engine is wrapped up here
+     * - Will fall back to 2D canvas rendering if webgl is not supported
      * - For normal stuff you won't need to see or call anything in this file
      * - For advanced stuff there are helper functions to create shaders, textures, etc
      * - Can be disabled with glEnable to revert to 2D canvas rendering
      * - Batches sprite rendering on GPU for incredibly fast performance
      * - Sprite transform math is done in the shader where possible
-     * - Supports shadertoy style post processing shaders
+     * - Supports shadertoy style post processing shaders via plugin
      * @namespace WebGL
      */
     /** The WebGL canvas which appears above the main canvas and below the overlay canvas
@@ -1462,11 +1560,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
@@ -1474,37 +1571,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 */
@@ -1558,7 +1660,15 @@ declare module "littlejsengine" {
     export function keyDirection(up?: string, down?: string, left?: string, right?: string): Vector2;
     /** Clears all input
      *  @memberof Input */
-    export function clearInput(): void;
+    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
@@ -1585,6 +1695,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 */
@@ -1637,6 +1755,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
      *
@@ -1678,8 +1806,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}
          */
@@ -1859,45 +1989,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;
@@ -1913,7 +2043,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
@@ -1944,6 +2074,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;
@@ -1987,22 +2120,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
@@ -2031,33 +2176,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 */
@@ -2075,13 +2272,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
@@ -2091,22 +2281,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
@@ -2117,25 +2293,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)]
@@ -2163,7 +2340,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,
@@ -2535,10 +2712,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 */
@@ -2548,8 +2735,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
@@ -2590,26 +2778,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 {number} - override for text height */
         textHeight: any;
-        /** @property {boolean} */
+        /** @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
          */
@@ -2620,10 +2822,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 */
@@ -2632,6 +2834,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;
     }
@@ -2688,6 +2892,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
@@ -2721,6 +2929,7 @@ declare module "littlejsengine" {
         value: number;
         /** @property {string} */
         text: string;
+        /** @property {Color} */
         handleColor: Color;
     }
     /**
@@ -2811,42 +3020,10 @@ declare module "littlejsengine" {
          *  @param {Vector2} pos
          *  @param {number} angle
          *  @param {Color} [color]
-         *  @param {Color} [outlineColor]
+         *  @param {Color} [lineColor]
          *  @param {number} [lineWidth]
          *  @param {CanvasRenderingContext2D} [context] */
-        drawFixture(fixture: any, pos: Vector2, angle: number, color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
-        /** draws a circle
-         *  @param {Vector2} pos
-         *  @param {number} radius
-         *  @param {Color} [color]
-         *  @param {Color} [outlineColor]
-         *  @param {number} [lineWidth]
-         *  @param {CanvasRenderingContext2D} [context] */
-        drawCircle(pos: Vector2, radius: number, color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
-        /** draws a polygon
-         *  @param {Vector2} pos
-         *  @param {number} angle
-         *  @param {Array<Vector2>} points
-         *  @param {Color} [color]
-         *  @param {Color} [outlineColor]
-         *  @param {number} [lineWidth]
-         *  @param {CanvasRenderingContext2D} [context] */
-        drawPoly(pos: Vector2, angle: number, points: Array<Vector2>, color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
-        /** draws a line
-         *  @param {Vector2} pos
-         *  @param {number} angle
-         *  @param {Vector2} posA
-         *  @param {Vector2} posB
-         *  @param {Color} [color]
-         *  @param {number} [lineWidth]
-         *  @param {CanvasRenderingContext2D} [context] */
-        drawLine(pos: Vector2, angle: number, posA: Vector2, posB: Vector2, color?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
-        /** performs a fill or stroke as a helper to the other draw functions
-         *  @param {Color} [color]
-         *  @param {Color} [outlineColor]
-         *  @param {number} [lineWidth]
-         *  @param {CanvasRenderingContext2D} [context] */
-        drawFillStroke(color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
+        drawFixture(fixture: any, pos: Vector2, angle: number, color?: Color, lineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
         /** converts a box2d vec2 to a Vector2
          *  @param {Object} v */
         vec2From(v: any): Vector2;
@@ -2881,13 +3058,13 @@ declare module "littlejsengine" {
          *  @param {number}   [renderOrder] */
         constructor(pos?: Vector2, size?: Vector2, tileInfo?: TileInfo, angle?: number, color?: Color, bodyType?: number, renderOrder?: number);
         body: any;
-        outlineColor: Color;
+        lineColor: Color;
         /** Draws all this object's fixtures
          *  @param {Color}  [color]
-         *  @param {Color}  [outlineColor]
+         *  @param {Color}  [lineColor]
          *  @param {number} [lineWidth]
          *  @param {CanvasRenderingContext2D} [context] */
-        drawFixtures(color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
+        drawFixtures(color?: Color, lineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
         /** Called when a contact begins
          *  @param {Box2dObject} otherObject */
         beginContact(otherObject: Box2dObject): void;
@@ -3058,9 +3235,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;
@@ -3633,4 +3807,60 @@ 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] - Width of the border sections
+     *  @param {Color} [additiveColor] - Additive color
+     *  @param {number} [extraSpace] - Extra spacing adjustment
+     *  @param {number} [angle] - Angle to rotate by
+     *  @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, angle?: 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] - Width of the border sections
+     *  @param {number} [extraSpace] - Extra spacing adjustment
+     *  @param {number} [angle] - Angle to rotate by
+     *  @memberof DrawUtilities */
+    export function drawNineSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number, angle?: 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] - Width of the border sections
+     *  @param {Color} [additiveColor] - Additive color
+     *  @param {number} [extraSpace] - Extra spacing adjustment
+     *  @param {number} [angle] - Angle to rotate by
+     *  @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, 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
+     *  @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] - Width of the border sections
+     *  @param {number} [extraSpace] - Extra spacing adjustment
+     *  @param {number} [angle] - Angle to rotate by
+     *  @memberof DrawUtilities */
+    export function drawThreeSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number, angle?: number): void;
 }