littlejsengine 1.16.2 → 1.17.5

package/dist/littlejs.d.ts

@@ -123,11 +123,11 @@ declare module "littlejsengine" {
      *  @example
      *  // Basic engine startup
      *  engineInit(
-     *    () => { LOG('Game initialized!'); },  // gameInit
-     *    () => { updateGameLogic(); },         // gameUpdate
-     *    () => { updateUI(); },                // gameUpdatePost
-     *    () => { drawBackground(); },          // gameRender
-     *    () => { drawHUD(); },                 // gameRenderPost
+     *    ()=> { LOG('Game initialized!'); },  // gameInit
+     *    ()=> { updateGameLogic(); },         // gameUpdate
+     *    ()=> { updateUI(); },                // gameUpdatePost
+     *    ()=> { drawBackground(); },          // gameRender
+     *    ()=> { drawHUD(); },                 // gameRenderPost
      *    ['tiles.png', 'tilesLevel.png']       // images to load
      *  );
      *  @memberof Engine */
@@ -203,16 +203,16 @@ declare module "littlejsengine" {
     /** Asserts if the expression is false, does nothing in release builds
      *  Halts execution if the assert fails and throws an error
      *  @param {boolean} assert
-     *  @param {...Object} [output] - error message 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;
     /** Log to console if debug is enabled, does nothing in release builds
-     *  @param {...Object} [output] - message output
+     *  @param {...Object} output - message output
      *  @memberof Debug */
-    export function LOG(...output?: any[]): void;
+    export function LOG(...output: any[]): void;
     /** Draw a debug rectangle in world space
      *  @param {Vector2} pos
-     *  @param {Vector2} [size=Vector2()]
+     *  @param {Vector2} [size=vec2(0)]
      *  @param {Color|string} [color]
      *  @param {number} [time]
      *  @param {number} [angle]
@@ -721,12 +721,11 @@ declare module "littlejsengine" {
      *  @memberof Debug */
     export function setDebugKey(key: string): void;
     /**
-     * LittleJS Utility Classes and Functions
+     * LittleJS Math Classes and Functions
      * - General purpose math library
-     * - Vector2 - fast, simple, easy 2D vector class
-     * - Color - holds a rgba color with some math functions
-     * - Timer - tracks time automatically
      * - RandomGenerator - seeded random number generator
+     * - Vector2 - fast, simple, easy 2D vector class
+     * - Color - holds a rgba color with math functions
      * @namespace Math
      */
     /** The value of PI
@@ -735,22 +734,22 @@ declare module "littlejsengine" {
      *  @memberof Math */
     export const PI: number;
     /** Returns absolute value of value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const abs: (x: number) => number;
     /** Returns floored value of value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const floor: (x: number) => number;
     /** Returns ceiled value of value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const ceil: (x: number) => number;
     /** Returns rounded value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const round: (x: number) => number;
@@ -765,7 +764,7 @@ declare module "littlejsengine" {
      *  @memberof Math */
     export const max: (...values: number[]) => number;
     /** Returns the sign of value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const sign: (x: number) => number;
@@ -775,22 +774,22 @@ declare module "littlejsengine" {
      *  @memberof Math */
     export const hypot: (...values: number[]) => number;
     /** Returns log2 of value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const log2: (x: number) => number;
     /** Returns sin of value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const sin: (x: number) => number;
     /** Returns cos of value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const cos: (x: number) => number;
     /** Returns tan of value passed in
-     *  @param {number} value
+     *  @param {number} x
      *  @return {number}
      *  @memberof Math */
     export const tan: (x: number) => number;
@@ -867,11 +866,11 @@ declare module "littlejsengine" {
     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, uses a point if undefined
-     *  @return {boolean}              - True if overlapping
+     *  @param {Vector2} posA - Center of box A
+     *  @param {Vector2} sizeA - Size of box A
+     *  @param {Vector2} posB - Center of box B
+     *  @param {Vector2} [sizeB=vec2()] - Size of box B, uses a point if undefined
+     *  @return {boolean} - True if overlapping
      *  @memberof Math */
     export function isOverlapping(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB?: Vector2): boolean;
     /** Returns true if a line segment is intersecting an axis aligned box
@@ -892,11 +891,8 @@ declare module "littlejsengine" {
     export function wave(frequency?: number, amplitude?: number, t?: number, offset?: number): number;
     /**
      * LittleJS Utility Classes and Functions
-     * - General purpose math library
-     * - Vector2 - fast, simple, easy 2D vector class
-     * - Color - holds a rgba color with some math functions
+     * - General purpose utilities
      * - Timer - tracks time automatically
-     * - RandomGenerator - seeded random number generator
      * @namespace Utilities
      */
     /** Formats seconds to mm:ss style for display purposes
@@ -927,6 +923,12 @@ declare module "littlejsengine" {
      *  @param {number} [revokeTime] - how long before revoking the url
      *  @memberof Utilities */
     export function saveDataURL(url: string, filename?: string, revokeTime?: number): void;
+    /** Share content using the native share dialog if available
+     *  @param {string} title - title of the share
+     *  @param {string} url - url to share
+     *  @param {Function} [callback] - Called when share is complete
+     *  @memberof Utilities */
+    export function shareURL(title: string, url: string, callback?: Function): void;
     /** Random global functions
      *  @namespace Random */
     /** Returns a random value between the two values passed in
@@ -963,8 +965,8 @@ declare module "littlejsengine" {
      *  @memberof Random */
     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)]
+     *  @param {Color}   [colorA=WHITE]
+     *  @param {Color}   [colorB=BLACK]
      *  @param {boolean} [linear]
      *  @return {Color}
      *  @memberof Random */
@@ -1017,8 +1019,8 @@ declare module "littlejsengine" {
         *  @return {Vector2} */
         vec2(valueA?: number, valueB?: 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)]
+        *  @param {Color}   [colorA=WHITE]
+        *  @param {Color}   [colorB=BLACK]
         *  @param {boolean} [linear]
         *  @return {Color} */
         randColor(colorA?: Color, colorB?: Color, linear?: boolean): Color;
@@ -1148,9 +1150,6 @@ declare module "littlejsengine" {
         /** Returns the area this vector covers as a rectangle
          * @return {number} */
         area(): number;
-        /** Returns true if this vector is (0,0)
-         * @return {boolean} */
-        isZero(): boolean;
         /** Returns a new vector that is p percent between this and the vector passed in
          * @param {Vector2} v - other vector
          * @param {number}  percent
@@ -1436,10 +1435,11 @@ 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] - Position of the tile in pixels, or tile index
+     * @param {Vector2|number} [index=0] - Index of the tile in 1d or 2d form
      * @param {Vector2|number} [size] - Size of tile in pixels
-     * @param {number} [textureIndex] - Texture index to use
+     * @param {TextureInfo|number} [texture] - Texture index or info to use
      * @param {number} [padding] - How many pixels padding around tiles
+     * @param {number} [bleed] - How many pixels smaller to draw tiles
      * @return {TileInfo}
      * @example
      * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -1447,26 +1447,24 @@ declare module "littlejsengine" {
      * tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3
      * tile(vec2(4,8), vec2(30,10))  // a tile at index (4,8) with a size of (30,10)
      * @memberof Draw */
-    export function tile(pos?: Vector2 | number, size?: Vector2 | number, textureIndex?: number, padding?: number): TileInfo;
+    export function tile(index?: Vector2 | number, size?: Vector2 | number, texture?: TextureInfo | number, padding?: number, bleed?: number): TileInfo;
     /**
      * Tile Info - Stores info about how to draw a tile
      * @memberof Draw
      */
     export class TileInfo {
         /** Create a tile info object
-         *  @param {Vector2} [pos=(0,0)] - Top left corner of tile in pixels
+         *  @param {Vector2} [pos=vec2()] - Top left corner of tile in pixels
          *  @param {Vector2} [size] - Size of tile in pixels
-         *  @param {number}  [textureIndex] - Texture index to use
-         *  @param {number}  [padding] - How many pixels padding around tiles
-         *  @param {number}  [bleed] - How many pixels smaller to draw tiles
+         *  @param {TextureInfo} [textureInfo] - Texture info to use
+         *  @param {number} [padding] - How many pixels padding around tiles
+         *  @param {number} [bleed] - How many pixels smaller to draw tiles
          */
-        constructor(pos?: Vector2, size?: Vector2, textureIndex?: number, padding?: number, bleed?: number);
+        constructor(pos?: Vector2, size?: Vector2, textureInfo?: TextureInfo, padding?: number, bleed?: number);
         /** @property {Vector2} - Top left corner of tile in pixels */
         pos: Vector2;
         /** @property {Vector2} - Size of tile in pixels */
         size: Vector2;
-        /** @property {number} - Texture index to use */
-        textureIndex: number;
         /** @property {number} - How many pixels padding around tiles */
         padding: number;
         /** @property {TextureInfo} - The texture info for this tile */
@@ -1485,10 +1483,16 @@ declare module "littlejsengine" {
         frame(frame: number): TileInfo;
         /**
          * Set this tile to use a full image in a texture info
-         * @param {TextureInfo} textureInfo
+         * @param {TextureInfo} [textureInfo]
+         * @return {TileInfo}
+         */
+        setFullImage(textureInfo?: TextureInfo): TileInfo;
+        /**
+         * Returns a tile info for an index using this tile as refrence
+         * @param {Vector2|number} [index=0]
          * @return {TileInfo}
          */
-        setFullImage(textureInfo: TextureInfo): TileInfo;
+        tile(index?: Vector2 | number): TileInfo;
     }
     /**
      * Tile Info - Stores info about each texture
@@ -1604,14 +1608,14 @@ declare module "littlejsengine" {
      *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
      *  @memberof Draw */
     export function screenToWorldTransform(screenPos: Vector2, screenSize: Vector2, screenAngle?: number): [Vector2, Vector2, number];
-    /** Draw textured tile centered in world space, with color applied if using WebGL
-     *  @param {Vector2}  pos                 - Center of the tile in world space
-     *  @param {Vector2}  [size=(1,1)]        - Size of the tile in world space
-     *  @param {TileInfo} [tileInfo]          - Tile info to use, untextured if undefined
-     *  @param {Color}    [color=(1,1,1,1)]   - Color to modulate with
-     *  @param {number}   [angle]             - Angle to rotate by
-     *  @param {boolean}  [mirror]            - Is image flipped along the Y axis?
-     *  @param {Color}    [additiveColor]     - Additive color to be applied if any
+    /** Draw textured tile centered in world space
+     *  @param {Vector2}  pos - Center of the tile in world space
+     *  @param {Vector2}  [size=vec2(1)] - Size of the tile in world space
+     *  @param {TileInfo} [tileInfo] - Tile info to use, untextured if undefined
+     *  @param {Color}    [color=WHITE] - Color to modulate with
+     *  @param {number}   [angle] - Angle to rotate by
+     *  @param {boolean}  [mirror] - Is image flipped along the Y axis?
+     *  @param {Color}    [additiveColor] - Additive color to be applied if any
      *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering?
      *  @param {boolean}  [screenSpace=false] - Are the pos and size are in screen space?
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
@@ -1619,8 +1623,8 @@ declare module "littlejsengine" {
     export function drawTile(pos: Vector2, size?: Vector2, tileInfo?: TileInfo, color?: Color, angle?: number, mirror?: boolean, additiveColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored rect centered on pos
      *  @param {Vector2} pos
-     *  @param {Vector2} [size=(1,1)]
-     *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {Vector2} [size=vec2(1)]
+     *  @param {Color}   [color=WHITE]
      *  @param {number}  [angle]
      *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
@@ -1629,9 +1633,9 @@ declare module "littlejsengine" {
     export function drawRect(pos: Vector2, size?: Vector2, color?: Color, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw a rect centered on pos with a gradient from top to bottom
      *  @param {Vector2} pos
-     *  @param {Vector2} [size=(1,1)]
-     *  @param {Color}   [colorTop=(1,1,1,1)]
-     *  @param {Color}   [colorBottom=(0,0,0,1)]
+     *  @param {Vector2} [size=vec2(1)]
+     *  @param {Color}   [colorTop=WHITE]
+     *  @param {Color}   [colorBottom=BLACK]
      *  @param {number}  [angle]
      *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
@@ -1641,9 +1645,9 @@ declare module "littlejsengine" {
     /** Draw connected lines between a series of points
      *  @param {Array<Vector2>} points
      *  @param {number}  [width]
-     *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {Color}   [color=WHITE]
      *  @param {boolean} [wrap] - Should the last point connect to the first?
-     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {Vector2} [pos=vec2()] - Offset to apply
      *  @param {number}  [angle] - Angle to rotate by
      *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
@@ -1654,8 +1658,8 @@ declare module "littlejsengine" {
      *  @param {Vector2} posA
      *  @param {Vector2} posB
      *  @param {number}  [width]
-     *  @param {Color}   [color=(1,1,1,1)]
-     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {Color}   [color=WHITE]
+     *  @param {Vector2} [pos=vec2()] - Offset to apply
      *  @param {number}  [angle] - Angle to rotate by
      *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
@@ -1664,10 +1668,10 @@ declare module "littlejsengine" {
     export function drawLine(posA: Vector2, posB: Vector2, width?: 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 {Color}   [color=(1,1,1,1)]
+     *  @param {Color}   [color=WHITE]
      *  @param {number}  [lineWidth]
-     *  @param {Color}   [lineColor=(0,0,0,1)]
-     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {Color}   [lineColor=BLACK]
+     *  @param {Vector2} [pos=vec2()] - Offset to apply
      *  @param {number}  [angle] - Angle to rotate by
      *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
@@ -1676,11 +1680,11 @@ declare module "littlejsengine" {
     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 {Vector2} [size=(1,1)] - Width and height diameter
-     *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {Vector2} [size=vec2(1)] - Width and height diameter
+     *  @param {Color}   [color=WHITE]
      *  @param {number}  [angle]
      *  @param {number}  [lineWidth]
-     *  @param {Color}   [lineColor=(0,0,0,1)]
+     *  @param {Color}   [lineColor=BLACK]
      *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -1689,9 +1693,9 @@ declare module "littlejsengine" {
     /** Draw colored circle using passed in point
      *  @param {Vector2} pos
      *  @param {number}  [size=1] - Diameter
-     *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {Color}   [color=WHITE]
      *  @param {number}  [lineWidth=0]
-     *  @param {Color}   [lineColor=(0,0,0,1)]
+     *  @param {Color}   [lineColor=BLACK]
      *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -1717,9 +1721,9 @@ declare module "littlejsengine" {
      *  @param {string|number}  text
      *  @param {Vector2} pos
      *  @param {number}  [size]
-     *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {Color}   [color=WHITE]
      *  @param {number}  [lineWidth]
-     *  @param {Color}   [lineColor=(0,0,0,1)]
+     *  @param {Color}   [lineColor=BLACK]
      *  @param {CanvasTextAlign}  [textAlign='center']
      *  @param {string}  [font=fontDefault]
      *  @param {string}  [fontStyle]
@@ -1732,10 +1736,10 @@ declare module "littlejsengine" {
      *  Automatically splits new lines into rows
      *  @param {string|number}  text
      *  @param {Vector2} pos
-     *  @param {number}  [size]
-     *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {number}  size
+     *  @param {Color}   [color=WHITE]
      *  @param {number}  [lineWidth]
-     *  @param {Color}   [lineColor=(0,0,0,1)]
+     *  @param {Color}   [lineColor=BLACK]
      *  @param {CanvasTextAlign}  [textAlign]
      *  @param {string}  [font=fontDefault]
      *  @param {string}  [fontStyle]
@@ -1743,7 +1747,7 @@ declare module "littlejsengine" {
      *  @param {number}  [angle]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawTextScreen(text: string | number, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawTextScreen(text: string | number, pos: Vector2, size: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Enable normal or additive blend mode
      *  @param {boolean} [additive]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -1753,46 +1757,52 @@ declare module "littlejsengine" {
      *  This is necessary for things like screenshots and video
      *  @memberof Draw */
     export function combineCanvases(): void;
-    export let engineFontImage: any;
+    /** Engine font image, 8x8 font provided by the engine
+     *  @type {FontImage}
+     *  @memberof Draw */
+    export let engineFontImage: FontImage;
     /**
-     * Font Image Object - Draw text on a 2D canvas by using characters in an image
+     * Font Image Object - Draw text by using tiles in an image
      * - 96 characters (from space to tilde) are stored in an image
-     * - Uses a default 8x8 font if none is supplied
-     * - You can also use fonts from the main tile sheet
+     * - A 8x8 default engine font is supplied for general use
+     * - This system is WebGL enabled for fast text rendering
+     * - Fonts can also be colored and scaled along each axis
+     *
      * @memberof Draw
      * @example
      * // use built in font
-     * const font = new FontImage;
+     * const font = engineFontImage;
      *
      * // draw text
      * font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50));
      */
     export class FontImage {
         /** Create an image font
-         *  @param {HTMLImageElement} [image] - Image for the font, default if undefined
-         *  @param {Vector2} [tileSize=(8,8)] - Size of the font source tiles
-         *  @param {Vector2} [paddingSize=(0,1)] - How much space between characters
+         *  @param {TileInfo} tileInfo - Tile info of first characeter in font
          */
-        constructor(image?: HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2);
-        image: any;
-        tileSize: Vector2;
-        paddingSize: Vector2;
+        constructor(tileInfo: TileInfo);
+        /** @property {TileInfo} - Tile info for the font */
+        tileInfo: TileInfo;
         /** Draw text in world space using the image font
-         *  @param {string|number}  text
+         *  @param {string|number} text
          *  @param {Vector2} pos
-         *  @param {number}  [scale=.25]
-         *  @param {boolean} [center]
-         *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+         *  @param {Vector2|number} [size]
+         *  @param {boolean} [center=true]
+         *  @param {Color} [color=WHITE]
+         *  @param {boolean} [useWebGL=glEnable]
+         *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
          */
-        drawText(text: string | number, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+        drawText(text: string | number, pos: Vector2, size?: Vector2 | number, center?: boolean, color?: Color, useWebGL?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
         /** Draw text in screen space using the image font
-         *  @param {string|number}  text
+         *  @param {string|number} text
          *  @param {Vector2} pos
-         *  @param {number}  [scale]
+         *  @param {Vector2|number} size
          *  @param {boolean} [center]
-         *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+         *  @param {Color} [color=WHITE]
+         *  @param {boolean} [useWebGL=glEnable]
+         *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
          */
-        drawTextScreen(text: string | number, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+        drawTextScreen(text: string | number, pos: Vector2, size: Vector2 | number, center?: boolean, color?: Color, useWebGL?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     }
     /** Returns true if fullscreen mode is active
      *  @return {boolean}
@@ -1829,6 +1839,10 @@ declare module "littlejsengine" {
      *  @type {WebGL2RenderingContext}
      *  @memberof WebGL */
     export let glContext: WebGL2RenderingContext;
+    /** Should WebGL be setup with anti-aliasing? must be set before calling engineInit
+     *  @type {boolean}
+     *  @memberof WebGL */
+    export let glAntialias: boolean;
     /** Clear the canvas and setup the viewport
      *  @memberof WebGL */
     export function glClearCanvas(): void;
@@ -1924,21 +1938,18 @@ declare module "littlejsengine" {
      *  @param {Array<number>} pointColors - Array of 32-bit integer colors
      *  @memberof WebGL */
     export function glDrawColoredPoints(points: Array<Vector2>, pointColors: Array<number>): void;
-    /** Should WebGL be setup with anti-aliasing? must be set before calling engineInit
-     *  @type {boolean}
+    /** Set the WebGL render target to the given texture or back to the canvas
+     *  @param {WebGLTexture} [texture] - a texture or undefined to use normal glCanvas
+     *  @param {boolean} [clear] - should the render target be cleared
      *  @memberof WebGL */
-    export let glAntialias: boolean;
-    export let glShader: any;
-    export let glPolyShader: any;
-    export let glPolyMode: any;
-    export let glAdditive: any;
-    export let glBatchAdditive: any;
-    export let glActiveTexture: any;
-    export let glArrayBuffer: any;
-    export let glGeometryBuffer: any;
-    export let glPositionData: any;
-    export let glColorData: any;
-    export let glBatchCount: any;
+    export function glSetRenderTarget(texture?: WebGLTexture, clear?: boolean): void;
+    /** Clear out a rectangle area of the WebGL canvas or render target
+     *  @param {number} x
+     *  @param {number} y
+     *  @param {number} width
+     *  @param {number} height
+     *  @memberof WebGL */
+    export function glClearRect(x: number, y: number, width: number, height: number): void;
     /** Returns true if device key is down
      *  @param {string|number} key
      *  @param {number} [device]
@@ -2039,6 +2050,9 @@ declare module "littlejsengine" {
      *  @type {number}
      *  @memberof Input */
     export let gamepadPrimary: number;
+    /** True if a touch device has been detected
+     *  @memberof Input */
+    export const isTouchDevice: boolean;
     /** Prevents input continuing to the default browser handling
      *  This is useful to disable for html menus so the browser can handle input normally
      *  @param {boolean} preventDefault
@@ -2085,9 +2099,6 @@ declare module "littlejsengine" {
     /** Cancel any ongoing vibration
      *  @memberof Input */
     export function vibrateStop(): void;
-    /** 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;
@@ -2121,24 +2132,38 @@ declare module "littlejsengine" {
      *  @memberof Audio */
     export const audioDefaultSampleRate: 44100;
     /**
-     * Sound Object - Stores a sound for later use and can be played positionally
+     * Sound Object - Stores a sound for later
+     * - this can be used to load and play wave, mp3, and ogg files
+     * - it can also create sounds using the ZzFX sound generator
+     * - can attenuate and apply stereo panning to sounds
+     * - sound instance control with pause/resume capability
      *
      * <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
      * @memberof Audio
      * @example
-     * // create a sound
+     * // load an audio asset file
+     * const sound_example = new Sound('sound.mp3');
+     *
+     * // create a zzfx sound
      * const sound_example = new Sound([.5,.5]);
      *
-     * // play the sound
+     * // play a sound
      * sound_example.play();
      */
     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]
+        /**
+         * @callback SoundLoadCallback - Function called when sound is loaded
+         * @param {Sound} sound
+         * @memberof Audio
+         */
+        /** Create a sound object and cache the audio for later use
+         *  @param {string|Array} [asset] - Filename of audio file or zzfx array
+         *  @param {number} [randomness] - How much to randomize frequency each time sound plays, for zzfx sounds the zzfx default is used if undefined
          *  @param {number} [range=soundDefaultRange] - World space max range of sound
          *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
+         *  @param {SoundLoadCallback} [onloadCallback] - callback function to call when sound is loaded
          */
-        constructor(zzfxSound: any[], range?: number, taper?: number);
+        constructor(asset?: string | any[], randomness?: number, range?: number, taper?: number, onloadCallback?: (sound: Sound) => Sound);
         /** @property {number} - World space max range of sound */
         range: number;
         /** @property {number} - At what percentage of range should it start tapering */
@@ -2149,6 +2174,8 @@ declare module "littlejsengine" {
         sampleRate: number;
         /** @property {number} - Percentage of this sound currently loaded */
         loadedPercent: number;
+        /** @property {SoundLoadCallback} - function to call when sound is loaded */
+        onloadCallback: (sound: Sound) => Sound;
         sampleChannels: any[][];
         /** Play the sound
          *  Sounds may not play until a user interaction occurs
@@ -2165,7 +2192,7 @@ declare module "littlejsengine" {
          *  @param {number} [volume] - Volume to play the music at
          *  @param {boolean} [loop] - Should the music loop?
          *  @param {boolean} [paused] - Should the music start paused
-         *  @return {SoundInstance} - The audio source node
+         *  @return {SoundInstance} - The sound instance
          */
         playMusic(volume?: number, loop?: boolean, paused?: boolean): SoundInstance;
         /** Play the sound as a musical note with a semitone offset
@@ -2173,7 +2200,7 @@ declare module "littlejsengine" {
          *  @param {number}  [semitoneOffset=0] - How many semitones to offset pitch
          *  @param {Vector2} [pos] - World space position to play the sound if any
          *  @param {number}  [volume=1] - How much to scale volume by
-         *  @return {SoundInstance} - The audio source node
+         *  @return {SoundInstance} - The sound instance
          */
         playNote(semitoneOffset?: number, pos?: Vector2, volume?: number): SoundInstance;
         /** Get how long this sound is in seconds
@@ -2184,36 +2211,7 @@ declare module "littlejsengine" {
          *  @return {boolean} - True if sound is loaded and ready to play
          */
         isLoaded(): boolean;
-    }
-    /**
-     * Sound Wave Object - Loads and stores an audio file for later use
-     * - this can be used to load and play wave, mp3, and ogg files
-     * @extends Sound
-     * @memberof Audio
-     * @example
-     * // load an audio asset file
-     * const sound_example = new SoundWave('sound.mp3');
-     *
-     * // play the sound
-     * sound_example.play();
-     */
-    export class SoundWave extends Sound {
-        /**
-         * @callback SoundLoadCallback - Function called when sound is loaded
-         * @param {SoundWave} sound
-         * @memberof Audio
-         */
-        /** 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
-         *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
-         *  @param {SoundLoadCallback} [onloadCallback] - callback function to call when sound is loaded
-         */
-        constructor(filename: string, randomness?: number, range?: number, taper?: number, onloadCallback?: (sound: SoundWave) => SoundWave);
-        /** @property {SoundLoadCallback} - callback function to call when sound is loaded */
-        onloadCallback: (sound: SoundWave) => SoundWave;
-        /** Loads a sound from a URL and decodes it into sample data. Must be used with await!
+        /** Loads a sound from a URL and decodes it into sample data.
         *  @param {string} filename
         *  @return {Promise<void>} */
         loadSound(filename: string): Promise<void>;
@@ -2394,10 +2392,10 @@ declare module "littlejsengine" {
      */
     export class EngineObject {
         /** Create an engine object and adds it to the list of objects
-         *  @param {Vector2}  [pos=(0,0)]   - World space position of the object
-         *  @param {Vector2}  [size=(1,1)]  - World space size of the object
-         *  @param {TileInfo} [tileInfo]    - Tile info to render object (undefined is untextured)
-         *  @param {number}   [angle]       - Angle the object is rotated by
+         *  @param {Vector2}  [pos=vec2()] - World space position of the object
+         *  @param {Vector2}  [size=vec2(1)] - World space size of the object
+         *  @param {TileInfo} [tileInfo] - Tile info to render object (undefined is untextured)
+         *  @param {number}   [angle] - Angle the object is rotated by
          *  @param {Color}    [color=WHITE] - Color to apply to tile when rendered
          *  @param {number}   [renderOrder] - Objects sorted by renderOrder before being rendered
          */
@@ -2481,14 +2479,14 @@ declare module "littlejsengine" {
         /** Convert from world space to local space for a vector (rotation only)
          *  @param {Vector2} vec - world space vector */
         worldToLocalVector(vec: Vector2): Vector2;
-        /** Called to check if a tile collision should be resolved
+        /** Called to check if a tile collision should be resolved. Return true for physics to resolve the collision or false to ignore and resolve it manually.
          *  @param {number}  tileData - the value of the tile at the position
-         *  @param {Vector2} pos      - tile where the collision occurred
-         *  @return {boolean}         - true if the collision should be resolved */
+         *  @param {Vector2} pos - tile where the collision occurred
+         *  @return {boolean} - true if the collision should be resolved by modifying it's position and velocity */
         collideWithTile(tileData: number, pos: Vector2): boolean;
-        /** Called to check if a object collision should be resolved
+        /** Called by the engine to check if an object collision should be resolved. Return true for physics to resolve the collision or false to ignore and resolve it manually.
          *  @param {EngineObject} object - the object to test against
-         *  @return {boolean}            - true if the collision should be resolved
+         *  @return {boolean} - true if the collision should be resolved by modifying it's position and velocity
          */
         collideWithObject(object: EngineObject): boolean;
         /** Get this object's up vector
@@ -2519,7 +2517,7 @@ declare module "littlejsengine" {
         getMirrorSign(): number;
         /** Attaches a child to this with a local transform, returns child for chaining
          *  @param {EngineObject} child
-         *  @param {Vector2}      [localPos=(0,0)]
+         *  @param {Vector2}      [localPos=vec2()]
          *  @param {number}       [localAngle]
          *  @return {EngineObject} The child object added */
         addChild(child: EngineObject, localPos?: Vector2, localAngle?: number): EngineObject;
@@ -2533,7 +2531,7 @@ declare module "littlejsengine" {
         isOverlappingObject(object: EngineObject): boolean;
         /** Check if overlapping a point or aligned bounding box
          *  @param {Vector2} pos          - Center of box
-         *  @param {Vector2} [size=(0,0)] - Size of box, uses a point if undefined
+         *  @param {Vector2} [size=vec2()] - Size of box, uses a point if undefined
          *  @return {boolean} */
         isOverlapping(pos: Vector2, size?: Vector2): boolean;
         /** Set how this object collides
@@ -2567,7 +2565,7 @@ declare module "littlejsengine" {
     export function tileCollisionGetData(pos: Vector2): number;
     /** Check if a tile layer collides with another object
      *  @param {Vector2}      pos
-     *  @param {Vector2}      [size=(0,0)]
+     *  @param {Vector2}      [size=vec2()]
      *  @param {EngineObject} [object] - An object or undefined for generic test
      *  @param {boolean}      [solidOnly] - Only check solid layers if true
      *  @return {TileCollisionLayer}
@@ -2606,18 +2604,18 @@ declare module "littlejsengine" {
      */
     export class TileLayerData {
         /** Create a tile layer data object, one for each tile in a TileLayer
-         *  @param {number}  [tile]      - The tile to use, untextured if undefined
+         *  @param {number}  [tile] - The tile to use, untextured if undefined
          *  @param {number}  [direction] - Integer direction of tile, in 90 degree increments
-         *  @param {boolean} [mirror]    - If the tile should be mirrored along the x axis
-         *  @param {Color}   [color]     - Color of the tile */
+         *  @param {boolean} [mirror] - If the tile should be mirrored along the x axis
+         *  @param {Color}   [color] - Color of the tile */
         constructor(tile?: number, direction?: number, mirror?: boolean, color?: Color);
-        /** @property {number}  - The tile to use, untextured if undefined */
+        /** @property {number} - The tile to use, untextured if undefined */
         tile: number;
-        /** @property {number}  - Integer direction of tile, in 90 degree increments */
+        /** @property {number} - Integer direction of tile, in 90 degree increments */
         direction: number;
         /** @property {boolean} - If the tile should be mirrored along the x axis */
         mirror: boolean;
-        /** @property {Color}   - Color of the tile */
+        /** @property {Color} - Color of the tile */
         color: Color;
         /** Set this tile to clear, it will not be rendered */
         clear(): void;
@@ -2625,7 +2623,7 @@ declare module "littlejsengine" {
     /**
      * Canvas Layer - cached off screen rendering system
      * - Contains an offscreen canvas that can be rendered to
-     * - WebGL rendering is optional, call useWebGL to enable
+     * - WebGL rendering is optional, call updateWebGL to enable/update
      * @extends EngineObject
      * @memberof TileLayers
      * @example
@@ -2633,20 +2631,20 @@ declare module "littlejsengine" {
      */
     export class CanvasLayer extends EngineObject {
         /** Create a canvas layer object
-         *  @param {Vector2}  [position] - World space position of the layer
+         *  @param {Vector2}  [pos] - 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
+         *  @param {boolean}  [useWebGL] - Should this layer use WebGL for rendering
         */
-        constructor(position?: Vector2, size?: Vector2, angle?: number, renderOrder?: number, canvasSize?: Vector2);
+        constructor(pos?: Vector2, size?: Vector2, angle?: number, renderOrder?: number, canvasSize?: Vector2, useWebGL?: boolean);
         /** @property {HTMLCanvasElement} - The canvas used by this layer */
         canvas: OffscreenCanvas;
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this layer */
         context: OffscreenCanvasRenderingContext2D;
+        /** @property {TextureInfo} - Texture info to use for this object rendering */
         textureInfo: TextureInfo;
-        /** @property {boolean} - True if WebGL texture needs to be refreshed */
-        refreshWebGL: boolean;
         /** 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
@@ -2657,38 +2655,26 @@ declare module "littlejsengine" {
         *  @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;
-        /**
-         * @callback Canvas2DDrawCallback - Function that draws to a canvas 2D context
-         * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
-         * @memberof TileLayers
-         */
-        /** Draw onto the layer canvas in world space (bypass WebGL)
-         *  @param {Vector2}  pos
-         *  @param {Vector2}  size
-         *  @param {number}   angle
-         *  @param {boolean}  mirror
-         *  @param {Canvas2DDrawCallback} drawFunction */
-        drawCanvas2D(pos: Vector2, size: Vector2, angle: number, mirror: boolean, drawFunction: (context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => any): void;
+        draw(pos: Vector2, size?: Vector2, color?: Color, angle?: number, mirror?: boolean, additiveColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
         /** Draw a tile onto the layer canvas in world space
          *  @param {Vector2}  pos
-         *  @param {Vector2}  [size=(1,1)]
+         *  @param {Vector2}  [size=vec2(1)]
          *  @param {TileInfo} [tileInfo]
-         *  @param {Color}    [color=(1,1,1,1)]
-         *  @param {number}   [angle=0]
-         *  @param {boolean}  [mirror=false] */
+         *  @param {Color}    [color=WHITE]
+         *  @param {number}   [angle]
+         *  @param {boolean}  [mirror] */
         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] */
+         *  @param {Vector2} [size=vec2(1)]
+         *  @param {Color}   [color=WHITE]
+         *  @param {number}  [angle] */
         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
-         *  @param {boolean} [immediate] - shoulkd the texture be updated immediately
-         */
-        useWebGL(enable?: boolean, immediate?: boolean): void;
+        /** Create WebGL texture if necessary and copy layer canvas to it */
+        updateWebGL(): void;
+        /** Check if this layer is using WebGL
+         *  @return {boolean} */
+        hasWebGL(): boolean;
     }
     /**
      * Tile Layer - cached rendering system for tile layers
@@ -2704,38 +2690,76 @@ declare module "littlejsengine" {
      */
     export class TileLayer extends CanvasLayer {
         /** Create a tile layer object
-        *  @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}  pos - World space position
+        *  @param {Vector2}  size - World space size
+        *  @param {TileInfo} [tileInfo] - Default tile info for layer (used for size and texture)
         *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
+        *  @param {boolean}  [useWebGL] - Should this layer use WebGL for rendering
         */
-        constructor(position: Vector2, size: Vector2, tileInfo?: TileInfo, renderOrder?: number);
+        constructor(pos: Vector2, size: Vector2, tileInfo?: TileInfo, renderOrder?: number, useWebGL?: boolean);
+        /** @property {Array<TileLayerData>} - Default tile info for layer */
         data: TileLayerData[];
+        /** @property {boolean} - Is this layer using a webgl texture? */
+        isUsingWebGL: boolean;
         /** Draw all the tile data to an offscreen canvas
-         *  - This may be slow in some browsers but only needs to be done once */
+         *  - This may be slow if not using webgl but only needs to be done once */
         redraw(): void;
         /** Call to start the redraw process
-         *  - This can be used to manually update small parts of the level
+         *  - This can be used to manually update parts of the level
          *  @param {boolean} [clear] - Should it clear the canvas before drawing */
         redrawStart(clear?: boolean): void;
         /** Call to end the redraw process */
         redrawEnd(): void;
-        /** Draw the tile at a given position in the tile grid
+        /** Draw the tile at a given position in the tile layer
          *  This can be used to clear out tiles when they are destroyed
          *  Tiles can also be redrawn if inside a redrawStart/End block
          *  @param {Vector2} layerPos
          *  @param {boolean} [clear] - should the old tile be cleared out
          */
         drawTileData(layerPos: Vector2, clear?: boolean): void;
+        /** Draw the tile at a given position in the tile layer
+         *  This can be used to clear tiles when they are destroyed
+         *  For better performance use drawTileData inside a redrawStart/End block
+         *  @param {Vector2} layerPos
+         *  @param {boolean} [clear] - should the old tile be cleared
+         */
+        redrawTileData(layerPos: Vector2, clear?: boolean): void;
+        /** Draw textured tile in layer space
+         *  @param {Vector2}  pos - Position in pixel coordinates
+         *  @param {Vector2}  [size=vec2(1)] - Size of the tile
+         *  @param {TileInfo} [tileInfo] - Tile info to use, untextured if undefined
+         *  @param {Color}    [color=WHITE] - Color to modulate with
+         *  @param {number}   [angle] - Angle to rotate by
+         *  @param {boolean}  [mirror] - Is image flipped along the Y axis?
+         *  @param {Color}    [additiveColor] - Additive color to be applied if any */
+        drawLayerTile(pos: Vector2, size?: Vector2, tileInfo?: TileInfo, color?: Color, angle?: number, mirror?: boolean, additiveColor?: Color): void;
+        /** Clear a rectangle in layer space
+         *  @param {Vector2} pos
+         *  @param {Vector2} size
+         *  @param {Color} [color=WHITE] - Color to modulate with
+         *  @param {number} [angle] - Angle to rotate by
+         */
+        drawLayerRect(pos: Vector2, size: Vector2, color?: Color, angle?: number): void;
+        /** Clear a rectangle in layer space
+         *  @param {Vector2} pos - position in pixel coordinates
+         *  @param {Vector2} size
+         */
+        clearLayerRect(pos: Vector2, size: Vector2): void;
         /** Set data at a given position in the array
          *  @param {Vector2}       layerPos - Local position in array
-         *  @param {TileLayerData} data     - Data to set
+         *  @param {TileLayerData} data - Data to set
          *  @param {boolean}       [redraw] - Force the tile to redraw if true */
         setData(layerPos: Vector2, data: TileLayerData, redraw?: boolean): void;
+        /** Clear data at a given position in the array
+         *  @param {Vector2} layerPos - Local position in array
+         *  @param {boolean} [redraw] - Force the tile to redraw if true */
+        clearData(layerPos: Vector2, redraw?: boolean): void;
         /** Get data at a given position in the array
          *  @param {Vector2} layerPos - Local position in array
          *  @return {TileLayerData} */
         getData(layerPos: Vector2): TileLayerData;
+        /** Called after this layer is redrawn, does nothing by default */
+        onRedraw(): void;
         /** @type {[CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color]} */
         savedRenderSettings: [CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color];
     }
@@ -2743,7 +2767,6 @@ declare module "littlejsengine" {
      * Tile Collision Layer - a tile layer with collision
      * - adds collision data and functions to TileLayer
      * - there can be multiple tile collision layers
-     * - tile collision layers should not overlap each other
      * @extends TileLayer
      * @memberof TileLayers
      */
@@ -2753,17 +2776,20 @@ declare module "littlejsengine" {
         /** 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} gridPos
+        /** Set tile collision data for a given cell in the layer
+        *  @param {Vector2} layerPos
         *  @param {number}  [data] */
-        setCollisionData(gridPos: Vector2, data?: number): void;
-        /** Get tile collision data for a given cell in the grid
-        *  @param {Vector2} gridPos
+        setCollisionData(layerPos: Vector2, data?: number): void;
+        /** Clear tile collision data for a given cell in the layer
+        *  @param {Vector2} layerPos */
+        clearCollisionData(layerPos: Vector2): void;
+        /** Get tile collision data for a given cell in the layer
+        *  @param {Vector2} layerPos
         *  @return {number} */
-        getCollisionData(gridPos: Vector2): number;
+        getCollisionData(layerPos: Vector2): number;
         /** Check if collision with another object should occur
         *  @param {Vector2}      pos
-        *  @param {Vector2}      [size=(0,0)]
+        *  @param {Vector2}      [size=vec2()]
         *  @param {EngineObject} [object]
         *  @return {boolean} */
         collisionTest(pos: Vector2, size?: Vector2, object?: EngineObject): boolean;
@@ -3086,16 +3112,19 @@ declare module "littlejsengine" {
     export class PostProcessPlugin {
         /** Create global post processing shader
         *  @param {string} shaderCode
-        *  @param {boolean} [includeMainCanvas]
-         *  @example
-         *  // create the post process plugin object
-         *  new PostProcessPlugin(shaderCode);
-         */
-        constructor(shaderCode: string, includeMainCanvas?: boolean);
+        *  @param {boolean} [includeMainCanvas] - combine mainCanvs onto glCanvas
+        *  @param {boolean} [feedbackTexture] - use glCanvas from previous frame as the texture
+        *  @example
+        *  // create the post process plugin object
+        *  new PostProcessPlugin(shaderCode);
+        */
+        constructor(shaderCode: string, includeMainCanvas?: boolean, feedbackTexture?: boolean);
         /** @property {WebGLProgram} - Shader for post processing */
         shader: any;
         /** @property {WebGLTexture} - Texture for post processing */
         texture: any;
+        /** @property {WebGLVertexArrayObject} - Vertex array object */
+        vao: any;
     }
     /**
      * LittleJS ZzFXM Plugin
@@ -3142,9 +3171,9 @@ declare module "littlejsengine" {
         /** Play the music that loops by default
          *  @param {number}  [volume] - Volume to play the music at
          *  @param {boolean} [loop] - Should the music loop?
-         *  @return {AudioBufferSourceNode} - The audio source node
+         *  @return {SoundInstance} - The sound instance
          */
-        playMusic(volume?: number, loop?: boolean): AudioBufferSourceNode;
+        playMusic(volume?: number, loop?: boolean): SoundInstance;
     }
     /**
      * LittleJS User Interface Plugin
@@ -3171,9 +3200,9 @@ declare module "littlejsengine" {
     export let uiDebug: number;
     /** Enable UI system debug drawing
      *  0=off, 1=normal, 2=show invisible
-     *  @param {number|boolean} enable
+     *  @param {number|boolean} debugMode
      *  @memberof UISystem */
-    export function uiSetDebug(debugMode: any): void;
+    export function uiSetDebug(debugMode: number | boolean): void;
     /**
      * UI System Global Object
      * @memberof UISystem
@@ -3338,8 +3367,8 @@ declare module "littlejsengine" {
      * @memberof UISystem */
     export class UIObject {
         /** Create a UIObject
-         *  @param {Vector2}  [pos=(0,0)]
-         *  @param {Vector2}  [size=(1,1)]
+         *  @param {Vector2}  [pos=vec2()]
+         *  @param {Vector2}  [size=vec2(1)]
          */
         constructor(pos?: Vector2, size?: Vector2);
         /** @property {Vector2} - Local position of the object */
@@ -3350,7 +3379,7 @@ declare module "littlejsengine" {
         size: Vector2;
         /** @property {Color} - Color of the object */
         color: Color;
-        /** @property {Color} - Color of the object when active, uses color if undefined */
+        /** @property {Color} - Color of the object when active, uses hoverColor if undefined */
         activeColor: any;
         /** @property {string} - Text for this ui object */
         text: any;
@@ -3575,14 +3604,14 @@ declare module "littlejsengine" {
      */
     export class UIVideo extends UIObject {
         /** Create a video player UI object
-         *  @param {Vector2} [pos]
-         *  @param {Vector2} [size]
+         *  @param {Vector2} pos
+         *  @param {Vector2} size
          *  @param {string} src - Video file path or URL
          *  @param {boolean} [autoplay=false] - Start playing immediately?
          *  @param {boolean} [loop=false] - Loop the video?
          *  @param {number} [volume=1] - Volume percent scaled by global volume (0-1)
          */
-        constructor(pos?: Vector2, size?: Vector2, src: string, autoplay?: boolean, loop?: boolean, volume?: number);
+        constructor(pos: Vector2, size: Vector2, src: string, autoplay?: boolean, loop?: boolean, volume?: number);
         /** @property {number} - The video volume */
         volume: number;
         /** @property {HTMLVideoElement} - The video player */
@@ -3636,6 +3665,7 @@ declare module "littlejsengine" {
      * - Contact begin and end callbacks
      * - Wraps b2Vec2 type to/from Vector2
      * - Raycasting and querying
+     * - Box2dTileLayer for grid based collision
      * - Every type of joint
      * - Debug physics drawing
      * @namespace Box2D
@@ -3668,8 +3698,11 @@ declare module "littlejsengine" {
         /** Create the global UI system object
          *  @param {Object} instance */
         constructor(instance: any);
+        /** @property {Object} - The Box2d instance */
         instance: any;
+        /** @property {Object} - The Box2d world */
         world: any;
+        /** @property {Array<Box2dObject>} - List of all Box2d objects */
         objects: any[];
         /** @property {number} - Velocity iterations per update*/
         velocityIterations: number;
@@ -3719,13 +3752,14 @@ declare module "littlejsengine" {
          *  @param {Color} [color]
          *  @param {Color} [lineColor]
          *  @param {number} [lineWidth]
+         *  @param {boolean} [useWebGL=glEnable]
          *  @param {CanvasRenderingContext2D} [context] */
-        drawFixture(fixture: any, pos: Vector2, angle: number, color?: Color, lineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
+        drawFixture(fixture: any, pos: Vector2, angle: number, color?: Color, lineColor?: Color, lineWidth?: number, useWebgl: any, context?: CanvasRenderingContext2D): void;
         /** converts a box2d vec2 to a Vector2
          *  @param {Object} v */
         vec2From(v: any): Vector2;
         /** converts a box2d vec2 pointer to a Vector2
-         *  @param {Object} v */
+         *  @param {Object} vp */
         vec2FromPointer(vp: any): Vector2;
         /** converts a Vector2 to a box2 vec2
          *  @param {Vector2} v */
@@ -3755,16 +3789,21 @@ declare module "littlejsengine" {
          *  @param {number}   [bodyType]
          *  @param {number}   [renderOrder] */
         constructor(pos?: Vector2, size?: Vector2, tileInfo?: TileInfo, angle?: number, color?: Color, bodyType?: number, renderOrder?: number);
+        /** @property {Object} - The Box2d body */
         body: any;
+        /** @property {Color} - Line color used for default box2d drawing */
         lineColor: Color;
+        /** @property {Array<Object>} - List of all edges for default box2d drawing */
         edgeLists: any[];
+        /** @property {Array<Object>} - List of all edge loops for default box2d drawing */
         edgeLoops: any[];
         /** Draws all this object's fixtures
-         *  @param {Color}  [color]
-         *  @param {Color}  [lineColor]
-         *  @param {number} [lineWidth]
+         *  @param {Color}   [color]
+         *  @param {Color}   [lineColor]
+         *  @param {number}  [lineWidth]
+         *  @param {boolean} [useWebGL=glEnable]
          *  @param {CanvasRenderingContext2D} [context] */
-        drawFixtures(color?: Color, lineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
+        drawFixtures(color?: Color, lineColor?: Color, lineWidth?: number, useWebGL?: boolean, context?: CanvasRenderingContext2D): void;
         /** Called when a contact begins
          *  @param {Box2dObject} otherObject */
         beginContact(otherObject: Box2dObject): void;
@@ -3839,6 +3878,11 @@ declare module "littlejsengine" {
          *  @param {number}  [restitution]
          *  @param {boolean} [isSensor] */
         addEdgeLoop(points: Array<Vector2>, density?: number, friction?: number, restitution?: number, isSensor?: boolean): any[];
+        /** Destroy a fixture from the body
+         *  @param {Object} [fixture] */
+        destroyFixture(fixture?: any): void;
+        /** Destroy all fixture from the body */
+        destroyAllFixtures(): void;
         /** Gets the center of mass
          *  @return {Vector2} */
         getCenterOfMass(): Vector2;
@@ -4011,6 +4055,7 @@ declare module "littlejsengine" {
         /** Create a box2d joint, the base class is not intended to be used directly
          *  @param {Object} jointDef */
         constructor(jointDef: any);
+        /** @property {Object} - The Box2d joint */
         box2dJoint: any;
         /** Destroy this joint */
         destroy(): void;
@@ -4241,8 +4286,8 @@ declare module "littlejsengine" {
          *  @param {Box2dObject} objectB
          *  @param {Box2dJoint} joint1
          *  @param {Box2dJoint} joint2
-         *  @param {ratio} [ratio] */
-        constructor(objectA: Box2dObject, objectB: Box2dObject, joint1: Box2dJoint, joint2: Box2dJoint, ratio?: ratio);
+         *  @param {number} [ratio] */
+        constructor(objectA: Box2dObject, objectB: Box2dObject, joint1: Box2dJoint, joint2: Box2dJoint, ratio?: number);
         joint1: Box2dJoint;
         joint2: Box2dJoint;
         /** Get the first joint