littlejsengine 1.16.2 → 1.17.1

package/dist/littlejs.d.ts

@@ -212,7 +212,7 @@ declare module "littlejsengine" {
     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
@@ -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;
@@ -2394,10 +2405,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 +2492,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 +2530,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 +2544,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 +2578,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 +2617,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 +2636,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
@@ -2638,15 +2649,15 @@ declare module "littlejsengine" {
          *  @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(position?: 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 +2668,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,18 +2703,21 @@ 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}  position - 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
         */
         constructor(position: Vector2, size: Vector2, tileInfo?: TileInfo, renderOrder?: number);
+        /** @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 */
@@ -2727,15 +2729,45 @@ declare module "littlejsengine" {
          *  @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 grid
+         *  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;
         /** 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 +2775,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
      */
@@ -2763,7 +2794,7 @@ declare module "littlejsengine" {
         getCollisionData(gridPos: 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 +3117,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
@@ -3338,8 +3372,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 +3384,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;