littlejsengine 1.13.4 → 1.14.4

package/dist/littlejs.d.ts

@@ -79,7 +79,7 @@ declare module "littlejsengine" {
      *  // Basic engine startup
      *  engineInit(
      *    () => { console.log('Game initialized!'); },  // gameInit
-     *    () => { updatePlayer(); },                    // gameUpdate
+     *    () => { updateGameLogic(); },                 // gameUpdate
      *    () => { updateUI(); },                        // gameUpdatePost
      *    () => { drawBackground(); },                  // gameRender
      *    () => { drawHUD(); },                         // gameRenderPost
@@ -185,10 +185,10 @@ declare module "littlejsengine" {
      *  @param {Vector2} posA
      *  @param {Vector2} posB
      *  @param {string}  [color]
-     *  @param {number}  [thickness]
+     *  @param {number}  [width]
      *  @param {number}  [time]
      *  @memberof Debug */
-    export function debugLine(posA: Vector2, posB: Vector2, color?: string, thickness?: number, time?: number): void;
+    export function debugLine(posA: Vector2, posB: Vector2, color?: string, width?: number, time?: number): void;
     /** Draw a debug combined axis aligned bounding box in world space
      *  @param {Vector2} posA
      *  @param {Vector2} sizeA
@@ -263,7 +263,7 @@ declare module "littlejsengine" {
      *  @memberof Settings */
     export let cameraScale: number;
     /** Enable applying color to tiles when using canvas2d
-     *  - This is slower but should be the same as webgl rendering
+     *  - This is slower but should be the same as WebGL rendering
      *  @type {boolean}
      *  @default
      *  @memberof Settings */
@@ -302,13 +302,12 @@ declare module "littlejsengine" {
      *  @default
      *  @memberof Settings */
     export let fontDefault: string;
-    /** Enable to show the LittleJS splash screen be shown on startup
+    /** Enable to show the LittleJS splash screen on startup
      *  @type {boolean}
      *  @default
      *  @memberof Settings */
     export let showSplashScreen: boolean;
     /** Disables all rendering, audio, and input for servers
-     *  - Must be set before startup to take effect
      *  @type {boolean}
      *  @default
      *  @memberof Settings */
@@ -368,8 +367,7 @@ declare module "littlejsengine" {
      *  @default
      *  @memberof Settings */
     export let particleEmitRateScale: number;
-    /** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
-     *  - Must be set before startup to take effect
+    /** Enable WebGL accelerated rendering
      *  @type {boolean}
      *  @default
      *  @memberof Settings */
@@ -379,19 +377,18 @@ declare module "littlejsengine" {
      *  @default
      *  @memberof Settings */
     export let gamepadsEnable: boolean;
-    /** If true, the dpad input is also routed to the left analog stick (for better accessability)
+    /** If true, the dpad input is also routed to the left analog stick (for better accessibility)
      *  @type {boolean}
      *  @default
      *  @memberof Settings */
     export let gamepadDirectionEmulateStick: boolean;
-    /** If true the WASD keys are also routed to the direction keys (for better accessability)
+    /** If true the WASD keys are also routed to the direction keys (for better accessibility)
      *  @type {boolean}
      *  @default
      *  @memberof Settings */
     export let inputWASDEmulateDirection: boolean;
     /** True if touch gamepad should appear on mobile devices
      *  - Supports left analog stick, 4 face buttons and start button (button 9)
-     *  - Must be set before startup to take effect
      *  @type {boolean}
      *  @default
      *  @memberof Settings */
@@ -464,7 +461,7 @@ declare module "littlejsengine" {
      *  @memberof Settings */
     export function setCameraScale(scale: number): void;
     /** Set if tiles should be colorized when using canvas2d
-     *  This can be slower but results should look nearly identical to webgl rendering
+     *  This can be slower but results should look nearly identical to WebGL rendering
      *  It can be enabled/disabled at any time
      *  Optimized for performance, and will use faster method if color is white or untextured
      *  @param {boolean} colorTiles
@@ -497,7 +494,7 @@ declare module "littlejsengine" {
      *  @param {string} font
      *  @memberof Settings */
     export function setFontDefault(font: string): void;
-    /** Set if the LittleJS splash screen be shown on startup
+    /** Set if the LittleJS splash screen should be shown on startup
      *  @param {boolean} show
      *  @memberof Settings */
     export function setShowSplashScreen(show: boolean): void;
@@ -505,7 +502,7 @@ declare module "littlejsengine" {
      *  @param {boolean} headless
      *  @memberof Settings */
     export function setHeadlessMode(headless: boolean): void;
-    /** Set if webgl rendering is enabled
+    /** Set if WebGL rendering is enabled
      *  @param {boolean} enable
      *  @memberof Settings */
     export function setGLEnable(enable: boolean): void;
@@ -533,7 +530,7 @@ declare module "littlejsengine" {
      *  @param {number} damp
      *  @memberof Settings */
     export function setObjectDefaultAngleDamping(damp: number): void;
-    /** Set how much to bounce when a collision occur
+    /** Set how much to bounce when a collision occurs
      *  @param {number} restitution
      *  @memberof Settings */
     export function setObjectDefaultRestitution(restitution: number): void;
@@ -723,7 +720,7 @@ declare module "littlejsengine" {
      *  @return {number}
      *  @memberof Utilities */
     export function smoothStep(percent: number): number;
-    /** Returns the nearest power of two not less then the value
+    /** Returns the nearest power of two not less than the value
      *  @param {number} value
      *  @return {number}
      *  @memberof Utilities */
@@ -1124,8 +1121,7 @@ declare module "littlejsengine" {
      * let a = vec2(0, 1); // vector with coordinates (0, 1)
      * a = vec2(5);        // set a to (5, 5)
      * b = vec2();         // set b to (0, 0)
-     * @memberof Utilities
-     */
+     * @memberof Utilities */
     export function vec2(x?: number, y?: number): Vector2;
     /**
      * Create a color object with RGBA values, white by default
@@ -1144,29 +1140,25 @@ declare module "littlejsengine" {
      * @param {number} [l=1] - lightness
      * @param {number} [a=1] - alpha
      * @return {Color}
-     * @memberof Utilities
-     */
+     * @memberof Utilities */
     export function hsl(h?: number, s?: number, l?: number, a?: number): Color;
     /**
      * Check if object is a valid Color
      * @param {any} c
      * @return {boolean}
-     * @memberof Utilities
-     */
+     * @memberof Utilities */
     export function isColor(c: any): boolean;
     /**
      * Check if object is a valid Vector2
      * @param {any} v
      * @return {boolean}
-     * @memberof Utilities
-     */
+     * @memberof Utilities */
     export function isVector2(v: any): boolean;
     /**
      * Check if object is a valid number, not NaN or undefined, but it may be infinite
      * @param {any} n
      * @return {boolean}
-     * @memberof Utilities
-     */
+     * @memberof Utilities */
     export function isNumber(n: any): boolean;
     /** Color - White #ffffff
      *  @type {Color}
@@ -1224,6 +1216,10 @@ declare module "littlejsengine" {
      *  @type {Array<TextureInfo>}
      *  @memberof Draw */
     export let textureInfos: Array<TextureInfo>;
+    /** Keeps track of how many draw calls there were each frame for debugging
+     *  @type {number}
+     *  @memberof Draw */
+    export let drawCount: number;
     /**
      * Create a tile info object using a grid based system
      * - This can take vecs or floats for easier use and conversion
@@ -1238,8 +1234,7 @@ declare module "littlejsengine" {
      * tile(5, 8)                    // a tile at index 5 using a tile size of 8
      * 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
-     */
+     * @memberof Draw */
     export function tile(pos?: Vector2 | number, size?: Vector2 | number, textureIndex?: number, padding?: number): TileInfo;
     /**
      * Tile Info - Stores info about how to draw a tile
@@ -1275,7 +1270,7 @@ declare module "littlejsengine" {
         /**
          * Set this tile to use a full image
          * @param {HTMLImageElement|OffscreenCanvas} image
-         * @param {WebGLTexture} [glTexture] - webgl texture
+         * @param {WebGLTexture} [glTexture] - WebGL texture
          * @return {TileInfo}
          */
         setFullImage(image: HTMLImageElement | OffscreenCanvas, glTexture?: WebGLTexture): TileInfo;
@@ -1285,7 +1280,7 @@ declare module "littlejsengine" {
         /**
          * Create a TextureInfo, called automatically by the engine
          * @param {HTMLImageElement|OffscreenCanvas} image
-         * @param {WebGLTexture} [glTexture] - webgl texture
+         * @param {WebGLTexture} [glTexture] - WebGL texture
          */
         constructor(image: HTMLImageElement | OffscreenCanvas, glTexture?: WebGLTexture);
         /** @property {HTMLImageElement} - image source */
@@ -1294,7 +1289,7 @@ declare module "littlejsengine" {
         size: Vector2;
         /** @property {Vector2} - inverse of the size, cached for rendering */
         sizeInverse: Vector2;
-        /** @property {WebGLTexture} - webgl texture */
+        /** @property {WebGLTexture} - WebGL texture */
         glTexture: WebGLTexture;
         createWebGLTexture(): void;
     }
@@ -1327,6 +1322,14 @@ declare module "littlejsengine" {
      *  @type {CanvasRenderingContext2D}
      *  @memberof Draw */
     export let mainContext: CanvasRenderingContext2D;
+    /** The default canvas to use for drawing, usually mainCanvas
+     *  @type {HTMLCanvasElement|OffscreenCanvas}
+     *  @memberof Draw */
+    export let drawCanvas: HTMLCanvasElement | OffscreenCanvas;
+    /** The default 2d context to use for drawing, usually mainContext
+     *  @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
+     *  @memberof Draw */
+    export let drawContext: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
     /** A canvas that appears on top of everything the same size as mainCanvas
      *  @type {HTMLCanvasElement}
      *  @memberof Draw */
@@ -1350,15 +1353,15 @@ declare module "littlejsengine" {
      *  @memberof Draw */
     export function worldToScreen(worldPos: Vector2): Vector2;
     /** 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]                   - If true image is 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]        - If true the pos and size are in screen space
+     *  @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
+     *  @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
      *  @memberof Draw */
     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;
@@ -1372,10 +1375,33 @@ declare module "littlejsengine" {
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
     export function drawRect(pos: Vector2, size?: Vector2, color?: Color, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    /** 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 {number}  [angle]
+     *  @param {boolean} [useWebGL=glEnable]
+     *  @param {boolean} [screenSpace]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+     *  @memberof Draw */
+    export function drawRectGradient(pos: Vector2, size?: Vector2, colorTop?: Color, colorBottom?: Color, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    /** Draw connected lines between a series of points
+     *  @param {Array<Vector2>} points
+     *  @param {number}  [width]
+     *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {boolean} [wrap] - Should the last point connect to the first?
+     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {number}  [angle] - Angle to rotate by
+     *  @param {boolean} [useWebGL=glEnable]
+     *  @param {boolean} [screenSpace]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+     *  @memberof Draw */
+    export function drawLineList(points: Array<Vector2>, width?: number, color?: Color, wrap?: boolean, pos?: Vector2, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored line between two points
      *  @param {Vector2} posA
      *  @param {Vector2} posB
-     *  @param {number}  [thickness]
+     *  @param {number}  [width]
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {Vector2} [pos=(0,0)] - Offset to apply
      *  @param {number}  [angle] - Angle to rotate by
@@ -1383,7 +1409,7 @@ declare module "littlejsengine" {
      *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
-    export function drawLine(posA: Vector2, posB: Vector2, thickness?: number, color?: Color, pos?: Vector2, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    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)]
@@ -1391,41 +1417,41 @@ declare module "littlejsengine" {
      *  @param {Color}   [lineColor=(0,0,0,1)]
      *  @param {Vector2} [pos=(0,0)] - Offset to apply
      *  @param {number}  [angle] - Angle to rotate by
-     *  @param {boolean} [useWebGL] - Webgl not supported
+     *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
     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)]
+     *  @param {Vector2} [size=(1,1)] - Width and height diameter
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [angle]
      *  @param {number}  [lineWidth]
      *  @param {Color}   [lineColor=(0,0,0,1)]
-     *  @param {boolean} [useWebGL] - Webgl not supported
+     *  @param {boolean} [useWebGL=glEnable]
      *  @param {boolean} [screenSpace]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
     export function drawEllipse(pos: Vector2, size?: Vector2, color?: Color, angle?: number, lineWidth?: number, lineColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored circle using passed in point
      *  @param {Vector2} pos
-     *  @param {number}  [radius=1]
+     *  @param {number}  [size=1] - Diameter
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [lineWidth=0]
      *  @param {Color}   [lineColor=(0,0,0,1)]
-     *  @param {boolean} [useWebGL] - Webgl not supported
-     *  @param {boolean} [screenSpace=false]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+     *  @param {boolean} [useWebGL=glEnable]
+     *  @param {boolean} [screenSpace]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
-    export function drawCircle(pos: Vector2, radius?: number, color?: Color, lineWidth?: number, lineColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawCircle(pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw directly to a 2d canvas context in world space
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
      *  @param {number}   angle
      *  @param {boolean}  [mirror]
      *  @param {Function} [drawFunction]
-     *  @param {boolean} [screenSpace=false]
+     *  @param {boolean}  [screenSpace=false]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
     export function drawCanvas2D(pos: Vector2, size: Vector2, angle?: number, mirror?: boolean, drawFunction?: Function, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
@@ -1490,34 +1516,41 @@ declare module "littlejsengine" {
      * const font = new FontImage;
      *
      * // draw text
-     * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
+     * font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50));
      */
     export class FontImage {
         /** Create an image font
          *  @param {HTMLImageElement} [image]    - Image for the font, if undefined default font is used
          *  @param {Vector2} [tileSize=(8,8)]    - Size of the font source tiles
          *  @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
-         *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext] - context to draw to
          */
-        constructor(image?: HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D);
+        constructor(image?: HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2, context?: CanvasRenderingContext2D);
         image: any;
         tileSize: Vector2;
         paddingSize: Vector2;
-        context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
         /** Draw text in world space using the image font
          *  @param {string}  text
          *  @param {Vector2} pos
          *  @param {number}  [scale=.25]
          *  @param {boolean} [center]
+         *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}[context=drawContext]
+         */
+        drawText(text: string, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+        /** Draw text on overlay canvas in world space using the image font
+         *  @param {string}  text
+         *  @param {Vector2} pos
+         *  @param {number}  [scale]
+         *  @param {boolean} [center]
          */
-        drawText(text: string, pos: Vector2, scale?: number, center?: boolean): void;
-        /** Draw text in screen space using the image font
+        drawTextOverlay(text: string, pos: Vector2, scale?: number, center?: boolean): void;
+        /** Draw text on overlay canvas in screen space using the image font
          *  @param {string}  text
          *  @param {Vector2} pos
          *  @param {number}  [scale]
          *  @param {boolean} [center]
+         *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
          */
-        drawTextScreen(text: string, pos: Vector2, scale?: number, center?: boolean): void;
+        drawTextScreen(text: string, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     }
     /** Returns true if fullscreen mode is active
      *  @return {boolean}
@@ -1527,7 +1560,7 @@ declare module "littlejsengine" {
      *  @memberof Draw */
     export function toggleFullscreen(): void;
     /** Set the cursor style
-     *  @param {string}  cursorStyle - CSS cursor style (auto, none, crosshair, etc)
+     *  @param {string}  [cursorStyle] - CSS cursor style (auto, none, crosshair, etc)
      *  @memberof Draw */
     export function setCursor(cursorStyle?: string): void;
     /** Get the camera's visible area in world space
@@ -1536,8 +1569,8 @@ declare module "littlejsengine" {
     export function getCameraSize(): Vector2;
     /**
      * LittleJS WebGL Interface
-     * - All webgl used by the engine is wrapped up here
-     * - Will fall back to 2D canvas rendering if webgl is not supported
+     * - All WebGL used by the engine is wrapped up here
+     * - Will fall back to 2D canvas rendering if WebGL is not supported
      * - For normal stuff you won't need to see or call anything in this file
      * - For advanced stuff there are helper functions to create shaders, textures, etc
      * - Can be disabled with glEnable to revert to 2D canvas rendering
@@ -1550,23 +1583,28 @@ declare module "littlejsengine" {
      *  @type {HTMLCanvasElement}
      *  @memberof WebGL */
     export let glCanvas: HTMLCanvasElement;
-    /** 2d context for glCanvas
+    /** WebGL2 context for `glCanvas`
      *  @type {WebGL2RenderingContext}
      *  @memberof WebGL */
     export let glContext: WebGL2RenderingContext;
+    /** Clear the canvas and setup the viewport
+     *  @memberof WebGL */
+    export function glClearCanvas(): void;
+    /** Set the WebGL texture, called automatically if using multiple textures
+     *  - This may also flush the gl buffer resulting in more draw calls and worse performance
+     *  @param {WebGLTexture} texture
+     *  @param {boolean} [wrap] - Should the texture wrap or clamp
+     *  @memberof WebGL */
+    export function glSetTexture(texture: WebGLTexture, wrap?: boolean): void;
     /** Compile WebGL shader of the given type, will throw errors if in debug mode
-     *  @param {String} source
-     *  @param {Number} type
+     *  @param {string} source
+     *  @param {number} type
      *  @return {WebGLShader}
      *  @memberof WebGL */
     export function glCompileShader(source: string, type: number): WebGLShader;
-    /** Flush any sprites still in the buffer and copy to main canvas
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
-     *  @memberof WebGL */
-    export function glCopyToContext(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Create WebGL program with given shaders
-     *  @param {String} vsSource
-     *  @param {String} fsSource
+     *  @param {string} vsSource
+     *  @param {string} fsSource
      *  @return {WebGLProgram}
      *  @memberof WebGL */
     export function glCreateProgram(vsSource: string, fsSource: string): WebGLProgram;
@@ -1584,49 +1622,80 @@ declare module "littlejsengine" {
      *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} image
      *  @memberof WebGL */
     export function glSetTextureData(texture: WebGLTexture, image: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas): void;
-    /** Add a sprite to the gl draw list, used by all gl draw functions
-     *  @param {Number} x
-     *  @param {Number} y
-     *  @param {Number} sizeX
-     *  @param {Number} sizeY
-     *  @param {Number} [angle]
-     *  @param {Number} [uv0X]
-     *  @param {Number} [uv0Y]
-     *  @param {Number} [uv1X]
-     *  @param {Number} [uv1Y]
-     *  @param {Number} [rgba=-1] - white is -1
-     *  @param {Number} [rgbaAdditive=0] - black is 0
-     *  @memberof WebGL */
-    export function glDraw(x: number, y: number, sizeX: number, sizeY: number, angle?: number, uv0X?: number, uv0Y?: number, uv1X?: number, uv1Y?: number, rgba?: number, rgbaAdditive?: number): void;
     /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
      *  @memberof WebGL */
     export function glFlush(): void;
-    /** Set the WebGl texture, called automatically if using multiple textures
-     *  - This may also flush the gl buffer resulting in more draw calls and worse performance
-     *  @param {WebGLTexture} texture
-     *  @param {boolean} wrap - Should the texture wrap or clamp
+    /** Flush any sprites still in the buffer and copy to main canvas
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
      *  @memberof WebGL */
-    export function glSetTexture(texture: WebGLTexture, wrap?: boolean): void;
-    /** Set anti-aliasing for webgl canvas
+    export function glCopyToContext(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    /** Set anti-aliasing for WebGL canvas
+     *  Must be called before engineInit
      *  @param {boolean} [antialias]
      *  @memberof WebGL */
     export function glSetAntialias(antialias?: boolean): void;
-    /** Clear the canvas and setup the viewport
+    /** Add a sprite to the gl draw list, used by all gl draw functions
+     *  @param {number} x
+     *  @param {number} y
+     *  @param {number} sizeX
+     *  @param {number} sizeY
+     *  @param {number} [angle]
+     *  @param {number} [uv0X]
+     *  @param {number} [uv0Y]
+     *  @param {number} [uv1X]
+     *  @param {number} [uv1Y]
+     *  @param {number} [rgba=-1] - white is -1
+     *  @param {number} [rgbaAdditive=0] - black is 0
      *  @memberof WebGL */
-    export function glClearCanvas(): void;
-    /** Should webgl be setup with anti-aliasing? must be set before calling engineInit
+    export function glDraw(x: number, y: number, sizeX: number, sizeY: number, angle?: number, uv0X?: number, uv0Y?: number, uv1X?: number, uv1Y?: number, rgba?: number, rgbaAdditive?: number): void;
+    /** Transform and add a polygon to the gl draw list
+     *  @param {Array<Vector2>} points - Array of Vector2 points
+     *  @param {number} rgba - Color of the polygon as a 32-bit integer
+     *  @param {number} x
+     *  @param {number} y
+     *  @param {number} sx
+     *  @param {number} sy
+     *  @param {number} angle
+     *  @param {boolean} [tristrip] - should tristrip algorithm be used
+     *  @memberof WebGL */
+    export function glDrawPointsTransform(points: Array<Vector2>, rgba: number, x: number, y: number, sx: number, sy: number, angle: number, tristrip?: boolean): void;
+    /** Transform and add a polygon to the gl draw list
+     *  @param {Array<Vector2>} points - Array of Vector2 points
+     *  @param {number} rgba - Color of the polygon as a 32-bit integer
+     *  @param {number} lineWidth - Width of the outline
+     *  @param {number} x
+     *  @param {number} y
+     *  @param {number} sx
+     *  @param {number} sy
+     *  @param {number} angle
+     *  @param {boolean} [wrap] - Should the outline connect the first and last points
+     *  @memberof WebGL */
+    export function glDrawOutlineTransform(points: Array<Vector2>, rgba: number, lineWidth: number, x: number, y: number, sx: number, sy: number, angle: number, wrap?: boolean): void;
+    /** Add a list of points to the gl draw list
+     *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+     *  @param {number} rgba - Color as a 32-bit integer
+     *  @memberof WebGL */
+    export function glDrawPoints(points: Array<Vector2>, rgba: number): void;
+    /** Add a list of colored points to the gl draw list
+     *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+     *  @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}
      *  @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 glInstanceCount: any;
-    export let glAdditive: any;
-    export let glBatchAdditive: any;
+    export let glBatchCount: any;
     /**
      * LittleJS Input System
      * - Tracks keyboard down, pressed, and released
@@ -1765,6 +1834,28 @@ declare module "littlejsengine" {
      *  @return {boolean}
      *  @memberof Input */
     export function pointerLockIsActive(): boolean;
+    /**
+     * LittleJS Audio System
+     * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
+     * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - ZzFXM Music System
+     * - Caches sounds and music for fast playback
+     * - Can attenuate and apply stereo panning to sounds
+     * - Ability to play mp3, ogg, and wave files
+     * - Speech synthesis functions
+     * @namespace Audio
+     */
+    /** Audio context used by the engine
+     *  @type {AudioContext}
+     *  @memberof Audio */
+    export let audioContext: AudioContext;
+    /** Master gain node for all audio to pass through
+     *  @type {GainNode}
+     *  @memberof Audio */
+    export let audioMasterGain: GainNode;
+    /** Default sample rate used for sounds
+     *  @default 44100
+     *  @memberof Audio */
+    export const audioDefaultSampleRate: 44100;
     /**
      * Sound Object - Stores a sound for later use and can be played positionally
      *
@@ -1789,46 +1880,45 @@ declare module "littlejsengine" {
         taper: number;
         /** @property {number} - How much to randomize frequency each time sound plays */
         randomness: any;
-        sampleChannels: any[][];
+        /** @property {number} - Sample rate for this sound */
         sampleRate: number;
+        /** @property {number} - Percentage of this sound currently loaded */
+        loadedPercent: number;
+        sampleChannels: any[][];
         /** Play the sound
-         *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
-         *  @param {number}  [volume] - How much to scale volume by (in addition to range fade)
-         *  @param {number}  [pitch] - How much to scale pitch by (also adjusted by this.randomness)
-         *  @param {number}  [randomnessScale] - How much to scale randomness
-         *  @param {boolean} [loop] - Should the sound loop
-         *  @return {AudioBufferSourceNode} - The audio source node
-         */
-        play(pos?: Vector2, volume?: number, pitch?: number, randomnessScale?: number, loop?: boolean): AudioBufferSourceNode;
-        gainNode: GainNode;
-        source: AudioBufferSourceNode;
-        /** Set the sound volume of the most recently played instance of this sound
+         *  Sounds may not play until a user interaction occurs
+         *  @param {Vector2} [pos] - World space position to play the sound if any
          *  @param {number}  [volume] - How much to scale volume by
+         *  @param {number}  [pitch] - How much to scale pitch by
+         *  @param {number}  [randomnessScale] - How much to scale pitch randomness
+         *  @param {boolean} [loop] - Should the sound loop?
+         *  @param {boolean} [paused] - Should the sound start paused
+         *  @return {SoundInstance} - The audio source node
          */
-        setVolume(volume?: number): void;
-        /** Stop the last instance of this sound that was played
-         *  @param {number}  [fadeTime] - How long to fade out (seconds)
+        play(pos?: Vector2, volume?: number, pitch?: number, randomnessScale?: number, loop?: boolean, paused?: boolean): SoundInstance;
+        /** Play a music track that loops by default
+         *  @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
          */
-        stop(fadeTime?: number): void;
-        /** Get source of most recent instance of this sound that was played
-         *  @return {AudioBufferSourceNode}
-         */
-        getSource(): AudioBufferSourceNode;
-        /** Play the sound as a note with a semitone offset
+        playMusic(volume?: number, loop?: boolean, paused?: boolean): SoundInstance;
+        /** Play the sound as a musical note with a semitone offset
+         *  This can be used to play music with chromatic scales
          *  @param {number}  semitoneOffset - How many semitones to offset pitch
-         *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
-         *  @param {number}  [volume=1] - How much to scale volume by (in addition to range fade)
-         *  @return {AudioBufferSourceNode} - The audio source node
+         *  @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
          */
-        playNote(semitoneOffset: number, pos?: Vector2, volume?: number): AudioBufferSourceNode;
+        playNote(semitoneOffset: number, pos?: Vector2, volume?: number): SoundInstance;
         /** Get how long this sound is in seconds
          *  @return {number} - How long the sound is in seconds (undefined if loading)
          */
         getDuration(): number;
-        /** Check if sound is loading, for sounds fetched from a url
-         *  @return {boolean} - True if sound is loading and not ready to play
+        /** Check if sound is loaded, for sounds fetched from a url
+         *  @return {boolean} - True if sound is loaded and ready to play
          */
-        isLoading(): boolean;
+        isLoaded(): boolean;
     }
     /**
      * Sound Wave Object - Stores a wave sound for later use and can be played positionally
@@ -1856,13 +1946,82 @@ declare module "littlejsengine" {
         *  @return {Promise<void>} */
         loadSound(filename: string): Promise<void>;
     }
-    /** Play an mp3, ogg, or wav audio from a local file or url
-     *  @param {string}  filename - Location of sound file to play
-     *  @param {number}  [volume] - How much to scale volume by
-     *  @param {boolean} [loop] - True if the music should loop
-     *  @return {SoundWave} - The sound object for this file
-     *  @memberof Audio */
-    export function playAudioFile(filename: string, volume?: number, loop?: boolean): SoundWave;
+    /**
+     * Sound Instance - Wraps an AudioBufferSourceNode for individual sound control
+     * Represents a single playing instance of a sound with pause/resume capabilities
+     * @example
+     * // Play a sound and get an instance for control
+     * const jumpSound = new Sound([.5,.5,220]);
+     * const instance = jumpSound.play();
+     *
+     * // Control the individual instance
+     * instance.setVolume(.5);
+     * instance.pause();
+     * instance.unpause();
+     * instance.stop();
+     */
+    export class SoundInstance {
+        /** Create a sound instance
+         *  @param {Sound}    sound    - The sound object
+         *  @param {number}   [volume] - How much to scale volume by
+         *  @param {number}   [rate]   - The playback rate to use
+         *  @param {number}   [pan]    - How much to apply stereo panning
+         *  @param {boolean}  [loop]   - Should the sound loop?
+         *  @param {boolean}  [paused] - Should the sound start paused? */
+        constructor(sound: Sound, volume?: number, rate?: number, pan?: number, loop?: boolean, paused?: boolean);
+        /** @property {Sound} - The sound object */
+        sound: Sound;
+        /** @property {number} - How much to scale volume by */
+        volume: number;
+        /** @property {number} - The playback rate to use */
+        rate: number;
+        /** @property {number} - How much to apply stereo panning */
+        pan: number;
+        /** @property {boolean} - Should the sound loop */
+        loop: boolean;
+        /** @property {number} - Timestamp for audio context when paused */
+        pausedTime: number;
+        /** @property {number} - Timestamp for audio context when started */
+        startTime: number;
+        /** @property {GainNode} - Gain node for the sound */
+        gainNode: GainNode;
+        /** @property {AudioBufferSourceNode} - Source node of the audio */
+        source: AudioBufferSourceNode;
+        onendedCallback: (source: any) => void;
+        /** Start playing the sound instance from the offset time
+         *  @param {number} [offset] - Offset in seconds to start playback from
+         */
+        start(offset?: number): void;
+        /** Set the volume of this sound instance
+         *  @param {number} volume */
+        setVolume(volume: number): void;
+        /** Stop this sound instance and reset position to the start */
+        stop(fadeTime?: number): void;
+        /** Pause this sound instance */
+        pause(): void;
+        /** Unpauses this sound instance */
+        resume(): void;
+        /** Check if this instance is currently playing
+         *  @return {boolean} - True if playing
+         */
+        isPlaying(): boolean;
+        /** Check if this instance is paused and was not stopped
+         *  @return {boolean} - True if paused
+         */
+        isPaused(): boolean;
+        /** Get the current playback time in seconds
+         *  @return {number} - Current playback time
+         */
+        getCurrentTime(): number;
+        /** Get the total duration of this sound
+         *  @return {number} - Total duration in seconds
+         */
+        getDuration(): number;
+        /** Get source of this sound instance
+         *  @return {AudioBufferSourceNode}
+         */
+        getSource(): AudioBufferSourceNode;
+    }
     /** Speak text with passed in settings
      *  @param {string} text - The text to speak
      *  @param {string} [language] - The language/accent to use (examples: en, it, ru, ja, zh)
@@ -1889,9 +2048,11 @@ declare module "littlejsengine" {
      *  @param {boolean}  [loop] - True if the sound should loop when it reaches the end
      *  @param {number}   [sampleRate=44100] - Sample rate for the sound
      *  @param {GainNode} [gainNode] - Optional gain node for volume control while playing
+     *  @param {number}   [offset] - Offset in seconds to start playback from
+     *  @param {Function} [onended] - Callback for when the sound ends
      *  @return {AudioBufferSourceNode} - The audio node of the sound played
      *  @memberof Audio */
-    export function playSamples(sampleChannels: any[], volume?: number, rate?: number, pan?: number, loop?: boolean, sampleRate?: number, gainNode?: GainNode): AudioBufferSourceNode;
+    export function playSamples(sampleChannels: any[], volume?: number, rate?: number, pan?: number, loop?: boolean, sampleRate?: number, gainNode?: GainNode, offset?: number, onended?: Function): AudioBufferSourceNode;
     /** Generate and play a ZzFX sound
      *
      *  <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
@@ -1922,27 +2083,8 @@ declare module "littlejsengine" {
      *  @param {number}  [tremolo] - Trembling effect, rate controlled by repeat time (percent)
      *  @param {number}  [filter] - Filter cutoff frequency, positive for HPF, negative for LPF (Hz)
      *  @return {Array} - Array of audio samples
-     *  @memberof Audio
-     */
-    export function zzfxG(volume?: number, randomness?: number, frequency?: number, attack?: number, sustain?: number, release?: number, shape?: number, shapeCurve?: number, slide?: number, deltaSlide?: number, pitchJump?: number, pitchJumpTime?: number, repeatTime?: number, noise?: number, modulation?: number, bitCrush?: number, delay?: number, sustainVolume?: number, decay?: number, tremolo?: number, filter?: number): any[];
-    /** Sample rate used for all ZzFX sounds
-     *  @default 44100
      *  @memberof Audio */
-    export const zzfxR: 44100;
-    /**
-     * LittleJS Audio System
-     * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
-     * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - ZzFXM Music System
-     * - Caches sounds and music for fast playback
-     * - Can attenuate and apply stereo panning to sounds
-     * - Ability to play mp3, ogg, and wave files
-     * - Speech synthesis functions
-     * @namespace Audio
-     */
-    /** Audio context used by the engine
-     *  @type {AudioContext}
-     *  @memberof Audio */
-    export let audioContext: AudioContext;
+    export function zzfxG(volume?: number, randomness?: number, frequency?: number, attack?: number, sustain?: number, release?: number, shape?: number, shapeCurve?: number, slide?: number, deltaSlide?: number, pitchJump?: number, pitchJumpTime?: number, repeatTime?: number, noise?: number, modulation?: number, bitCrush?: number, delay?: number, sustainVolume?: number, decay?: number, tremolo?: number, filter?: number): any[];
     /**
      * LittleJS Object System
      */
@@ -2108,14 +2250,13 @@ declare module "littlejsengine" {
      * - Caches arrays of tiles to off screen canvas for fast rendering
      * - Unlimited numbers of layers, allocates canvases as needed
      * - Tile layers can be drawn to using their context with canvas2d
-     * - Drawn directly to the main canvas without using WebGL
      * - Tile layers can also have collision with EngineObjects
      * @namespace TileCollision
      */
     /** Keep track of all tile layers with collision
      *  @type {Array<TileCollisionLayer>}
      *  @memberof TileCollision */
-    export let tileCollisionLayers: Array<TileCollisionLayer>;
+    export const tileCollisionLayers: Array<TileCollisionLayer>;
     /** Get tile collision data for a given cell in the grid
     *  @param {Vector2} pos
     *  @return {number}
@@ -2179,7 +2320,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 useWebGL to enable
      * @extends EngineObject
      * @example
      * const canvasLayer = new CanvasLayer(vec2(), vec2(200,100));
@@ -2197,7 +2338,7 @@ declare module "littlejsengine" {
         canvas: OffscreenCanvas;
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this layer */
         context: OffscreenCanvasRenderingContext2D;
-        /** @property {WebGLTexture} - Texture if using webgl for this layer, call useWebGL to enable */
+        /** @property {WebGLTexture} - Texture if using WebGL for this layer, call useWebGL to enable */
         glTexture: WebGLTexture;
         /** Draw this canvas layer centered in world space, with color applied if using WebGL
         *  @param {Vector2} pos - Center in world space
@@ -2210,7 +2351,7 @@ declare module "littlejsengine" {
         *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
         *  @memberof Draw */
         draw(pos: Vector2, size?: Vector2, angle?: number, color?: Color, mirror?: boolean, additiveColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
-        /** Draw onto the layer canvas in world space (bypass webgl)
+        /** Draw onto the layer canvas in world space (bypass WebGL)
          *  @param {Vector2}  pos
          *  @param {Vector2}  size
          *  @param {number}   angle
@@ -2231,8 +2372,8 @@ declare module "littlejsengine" {
          *  @param {Color}   [color=(1,1,1,1)]
          *  @param {number}  [angle=0] */
         drawRect(pos: Vector2, size?: Vector2, color?: Color, angle?: number): void;
-        /** Create or update the webgl texture for this layer
-         *  @param {boolean} [enable] - enable webgl rendering and update the texture */
+        /** Create or update the WebGL texture for this layer
+         *  @param {boolean} [enable] - enable WebGL rendering and update the texture */
         useWebGL(enable?: boolean): void;
     }
     /**
@@ -2288,7 +2429,7 @@ 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 collison layers should not overlap each other
+     * - tile collision layers should not overlap each other
      * @extends TileLayer
      */
     export class TileCollisionLayer extends TileLayer {
@@ -2350,41 +2491,41 @@ declare module "littlejsengine" {
     export class ParticleEmitter extends EngineObject {
         /** Create a particle system with the given settings
          *  @param {Vector2} position - World space position of the emitter
-         *  @param {Number} [angle] - Angle to emit the particles
-         *  @param {Number|Vector2}  [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
-         *  @param {Number} [emitTime] - How long to stay alive (0 is forever)
-         *  @param {Number} [emitRate] - How many particles per second to spawn, does not emit if 0
-         *  @param {Number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
+         *  @param {number} [angle] - Angle to emit the particles
+         *  @param {number|Vector2}  [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
+         *  @param {number} [emitTime] - How long to stay alive (0 is forever)
+         *  @param {number} [emitRate] - How many particles per second to spawn, does not emit if 0
+         *  @param {number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
          *  @param {TileInfo} [tileInfo] - Tile info to render particles (undefined is untextured)
          *  @param {Color} [colorStartA=(1,1,1,1)] - Color at start of life 1, randomized between start colors
          *  @param {Color} [colorStartB=(1,1,1,1)] - Color at start of life 2, randomized between start colors
          *  @param {Color} [colorEndA=(1,1,1,0)] - Color at end of life 1, randomized between end colors
          *  @param {Color} [colorEndB=(1,1,1,0)] - Color at end of life 2, randomized between end colors
-         *  @param {Number} [particleTime]      - How long particles live
-         *  @param {Number} [sizeStart]         - How big are particles at start
-         *  @param {Number} [sizeEnd]           - How big are particles at end
-         *  @param {Number} [speed]             - How fast are particles when spawned
-         *  @param {Number} [angleSpeed]        - How fast are particles rotating
-         *  @param {Number} [damping]           - How much to dampen particle speed
-         *  @param {Number} [angleDamping]      - How much to dampen particle angular speed
-         *  @param {Number} [gravityScale]      - How much gravity effect particles
-         *  @param {Number} [particleConeAngle] - Cone for start particle angle
-         *  @param {Number} [fadeRate]          - How quick to fade particles at start/end in percent of life
-         *  @param {Number} [randomness]    - Apply extra randomness percent
+         *  @param {number} [particleTime]      - How long particles live
+         *  @param {number} [sizeStart]         - How big are particles at start
+         *  @param {number} [sizeEnd]           - How big are particles at end
+         *  @param {number} [speed]             - How fast are particles when spawned
+         *  @param {number} [angleSpeed]        - How fast are particles rotating
+         *  @param {number} [damping]           - How much to dampen particle speed
+         *  @param {number} [angleDamping]      - How much to dampen particle angular speed
+         *  @param {number} [gravityScale]      - How much gravity effect particles
+         *  @param {number} [particleConeAngle] - Cone for start particle angle
+         *  @param {number} [fadeRate]          - How quick to fade particles at start/end in percent of life
+         *  @param {number} [randomness]    - Apply extra randomness percent
          *  @param {boolean} [collideTiles] - Do particles collide against tiles
          *  @param {boolean} [additive]     - Should particles use additive blend
          *  @param {boolean} [randomColorLinear] - Should color be randomized linearly or across each component
-         *  @param {Number} [renderOrder] - Render order for particles (additive is above other stuff by default)
+         *  @param {number} [renderOrder] - Render order for particles (additive is above other stuff by default)
          *  @param {boolean}  [localSpace] - Should it be in local space of emitter (world space is default)
          */
         constructor(position: Vector2, angle?: number, emitSize?: number | Vector2, emitTime?: number, emitRate?: number, emitConeAngle?: number, tileInfo?: TileInfo, colorStartA?: Color, colorStartB?: Color, colorEndA?: Color, colorEndB?: Color, particleTime?: number, sizeStart?: number, sizeEnd?: number, speed?: number, angleSpeed?: number, damping?: number, angleDamping?: number, gravityScale?: number, particleConeAngle?: number, fadeRate?: number, randomness?: number, collideTiles?: boolean, additive?: boolean, randomColorLinear?: boolean, renderOrder?: number, localSpace?: boolean);
-        /** @property {Number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
+        /** @property {number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
         emitSize: number | Vector2;
-        /** @property {Number} - How long to stay alive (0 is forever) */
+        /** @property {number} - How long to stay alive (0 is forever) */
         emitTime: number;
-        /** @property {Number} - How many particles per second to spawn, does not emit if 0 */
+        /** @property {number} - How many particles per second to spawn, does not emit if 0 */
         emitRate: number;
-        /** @property {Number} - Local angle to apply velocity to particles from emitter */
+        /** @property {number} - Local angle to apply velocity to particles from emitter */
         emitConeAngle: number;
         /** @property {Color} - Color at start of life 1, randomized between start colors */
         colorStartA: Color;
@@ -2396,33 +2537,33 @@ declare module "littlejsengine" {
         colorEndB: Color;
         /** @property {boolean} - Should color be randomized linearly or across each component */
         randomColorLinear: boolean;
-        /** @property {Number} - How long particles live */
+        /** @property {number} - How long particles live */
         particleTime: number;
-        /** @property {Number} - How big are particles at start */
+        /** @property {number} - How big are particles at start */
         sizeStart: number;
-        /** @property {Number} - How big are particles at end */
+        /** @property {number} - How big are particles at end */
         sizeEnd: number;
-        /** @property {Number} - How fast are particles when spawned */
+        /** @property {number} - How fast are particles when spawned */
         speed: number;
-        /** @property {Number} - How fast are particles rotating */
+        /** @property {number} - How fast are particles rotating */
         angleSpeed: number;
-        /** @property {Number} - Cone for start particle angle */
+        /** @property {number} - Cone for start particle angle */
         particleConeAngle: number;
-        /** @property {Number} - How quick to fade in particles at start/end in percent of life */
+        /** @property {number} - How quick to fade in particles at start/end in percent of life */
         fadeRate: number;
-        /** @property {Number} - Apply extra randomness percent */
+        /** @property {number} - Apply extra randomness percent */
         randomness: number;
         /** @property {boolean} - Should particles use additive blend */
         additive: boolean;
         /** @property {boolean} - Should it be in local space of emitter */
         localSpace: boolean;
-        /** @property {Number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
+        /** @property {number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
         trailScale: number;
         /** @property {Function}   - Callback when particle is destroyed */
         particleDestroyCallback: any;
         /** @property {Function}   - Callback when particle is created */
         particleCreateCallback: any;
-        /** @property {Number} - Track particle emit time */
+        /** @property {number} - Track particle emit time */
         emitTimeBuffer: number;
         /** Spawn one particle
          *  @return {Particle} */
@@ -2438,15 +2579,15 @@ declare module "littlejsengine" {
          * Typically this is created automatically by a ParticleEmitter
          * @param {Vector2}  position   - World space position of the particle
          * @param {TileInfo} tileInfo   - Tile info to render particles
-         * @param {Number}   angle      - Angle to rotate the particle
+         * @param {number}   angle      - Angle to rotate the particle
          * @param {Color}    colorStart - Color at start of life
          * @param {Color}    colorEnd   - Color at end of life
-         * @param {Number}   lifeTime   - How long to live for
-         * @param {Number}   sizeStart  - Size at start of life
-         * @param {Number}   sizeEnd    - Size at end of life
-         * @param {Number}   fadeRate   - How quick to fade in/out
+         * @param {number}   lifeTime   - How long to live for
+         * @param {number}   sizeStart  - Size at start of life
+         * @param {number}   sizeEnd    - Size at end of life
+         * @param {number}   fadeRate   - How quick to fade in/out
          * @param {boolean}  additive   - Does it use additive blend mode
-         * @param {Number}   trailScale - If a trail, how long to make it
+         * @param {number}   trailScale - If a trail, how long to make it
          * @param {ParticleEmitter} [localSpaceEmitter] - Parent emitter if local space
          * @param {Function} [destroyCallback] - Callback when particle dies
          */
@@ -2455,17 +2596,17 @@ declare module "littlejsengine" {
         colorStart: Color;
         /** @property {Color} - Calculated change in color */
         colorEndDelta: Color;
-        /** @property {Number} - How long to live for */
+        /** @property {number} - How long to live for */
         lifeTime: number;
-        /** @property {Number} - Size at start of life */
+        /** @property {number} - Size at start of life */
         sizeStart: number;
-        /** @property {Number} - Calculated change in size */
+        /** @property {number} - Calculated change in size */
         sizeEndDelta: number;
-        /** @property {Number} - How quick to fade in/out */
+        /** @property {number} - How quick to fade in/out */
         fadeRate: number;
         /** @property {boolean} - Is it additive */
         additive: boolean;
-        /** @property {Number} - If a trail, how long to make it */
+        /** @property {number} - If a trail, how long to make it */
         trailScale: number;
         /** @property {ParticleEmitter} - Parent emitter if local space */
         localSpaceEmitter: ParticleEmitter;
@@ -2491,7 +2632,7 @@ declare module "littlejsengine" {
     /** Initialize medals with a save name used for storage
      *  - Call this after creating all medals
      *  - Checks if medals are unlocked
-     *  @param {String} saveName
+     *  @param {string} saveName
      *  @memberof Medals */
     export function medalsInit(saveName: string): void;
     /**
@@ -2508,20 +2649,20 @@ declare module "littlejsengine" {
      */
     export class Medal {
         /** Create a medal object and adds it to the list of medals
-         *  @param {Number} id            - The unique identifier of the medal
-         *  @param {String} name          - Name of the medal
-         *  @param {String} [description] - Description of the medal
-         *  @param {String} [icon]        - Icon for the medal
-         *  @param {String} [src]         - Image location for the medal
+         *  @param {number} id            - The unique identifier of the medal
+         *  @param {string} name          - Name of the medal
+         *  @param {string} [description] - Description of the medal
+         *  @param {string} [icon]        - Icon for the medal
+         *  @param {string} [src]         - Image location for the medal
          */
         constructor(id: number, name: string, description?: string, icon?: string, src?: string);
-        /** @property {Number} - The unique identifier of the medal */
+        /** @property {number} - The unique identifier of the medal */
         id: number;
-        /** @property {String} - Name of the medal */
+        /** @property {string} - Name of the medal */
         name: string;
-        /** @property {String} - Description of the medal */
+        /** @property {string} - Description of the medal */
         description: string;
-        /** @property {String} - Icon for the medal */
+        /** @property {string} - Icon for the medal */
         icon: string;
         /** @property {boolean} - Is the medal unlocked? */
         unlocked: boolean;
@@ -2529,12 +2670,12 @@ declare module "littlejsengine" {
         /** Unlocks a medal if not already unlocked */
         unlock(): void;
         /** Render a medal
-         *  @param {Number} [hidePercent] - How much to slide the medal off screen
+         *  @param {number} [hidePercent] - How much to slide the medal off screen
          */
         render(hidePercent?: number): void;
         /** Render the icon for a medal
          *  @param {Vector2} pos - Screen space position
-         *  @param {Number} size - Screen space size
+         *  @param {number} size - Screen space size
          */
         renderIcon(pos: Vector2, size: number): void;
         storageKey(): string;
@@ -2584,7 +2725,7 @@ declare module "littlejsengine" {
          * @param {number} id       - The scoreboard id
          * @param {string} [user]   - A user's id or name
          * @param {number} [social] - If true, only social scores will be loaded
-         * @param {number} [skip]   - Number of scores to skip before start
+         * @param {number} [skip]   - Number of scores to skip over
          * @param {number} [limit]  - Number of scores to include in the list
          * @return {Object}         - The response JSON object
          */
@@ -2672,9 +2813,9 @@ declare module "littlejsengine" {
          */
         constructor(zzfxMusic: [any[], any[], any[], number]);
         sampleChannels: any[];
-        /** Play the music
-         *  @param {number}  [volume=1] - How much to scale volume by
-         *  @param {boolean} [loop] - True if the music should loop
+        /** 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
          */
         playMusic(volume?: number, loop?: boolean): AudioBufferSourceNode;
@@ -2736,7 +2877,7 @@ declare module "littlejsengine" {
         *  @param {Color}   [color=uiSystem.defaultColor]
         *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
         *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
-        *  @param {number}  [lineWidth=uiSystem.defaultCornerRadius] */
+        *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius] */
         drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, cornerRadius?: number): void;
         /** Draw a line to the UI context
         *  @param {Vector2} posA
@@ -2778,27 +2919,35 @@ declare module "littlejsengine" {
         pos: Vector2;
         /** @property {Vector2} - Screen space size of the object */
         size: Vector2;
-        /** @property {Color} - color of the object */
+        /** @property {Color} - Color of the object */
         color: Color;
-        /** @property {Color} - color for text */
+        /** @property {string} - Text for this ui object */
+        text: any;
+        /** @property {Color} - Color when disabled */
+        disabledColor: Color;
+        /** @property {boolean} - Is this object disabled? */
+        disabled: boolean;
+        /** @property {Color} - Color for text */
         textColor: Color;
-        /** @property {Color} - color used when hovering over the object */
+        /** @property {Color} - Color used when hovering over the object */
         hoverColor: Color;
-        /** @property {Color} - color for line drawing */
+        /** @property {Color} - Color for line drawing */
         lineColor: Color;
-        /** @property {number} - width for line drawing */
+        /** @property {number} - Width for line drawing */
         lineWidth: number;
-        /** @property {string} - font for this objecct */
+        /** @property {number} - Corner radius for rounded rects */
+        cornerRadius: number;
+        /** @property {string} - Font for this objecct */
         font: string;
-        /** @property {number} - override for text height */
+        /** @property {number} - Override for text height */
         textHeight: any;
-        /** @property {boolean} - should this object be drawn */
+        /** @property {boolean} - Should this object be drawn */
         visible: boolean;
-        /** @property {Array<UIObject>} - a list of this object's children */
+        /** @property {Array<UIObject>} - A list of this object's children */
         children: any[];
-        /** @property {UIObject} - this object's parent, position is in parent space */
+        /** @property {UIObject} - This object's parent, position is in parent space */
         parent: any;
-        /** @property {number} - Extra size added when checking if element is touched */
+        /** @property {number} - Extra size added to make small buttons easier to touch on mobile devices */
         extraTouchSize: number;
         /** @property {Sound} - Sound when interactive element is pressed */
         soundPress: any;
@@ -2824,7 +2973,7 @@ declare module "littlejsengine" {
         update(): void;
         /** Render the object, called automatically by plugin once each frame */
         render(): void;
-        /** Special update for when object is invisible */
+        /** Special update when object is not visible */
         updateInvisible(): void;
         /** Called when the mouse enters the object */
         onEnter(): void;
@@ -2852,9 +3001,7 @@ declare module "littlejsengine" {
          *  @param {string}  [font=uiSystem.defaultFont]
          */
         constructor(pos?: Vector2, size?: Vector2, text?: string, align?: string, font?: string);
-        /** @property {string} */
         text: string;
-        /** @property {string} */
         align: string;
     }
     /**
@@ -2890,12 +3037,7 @@ declare module "littlejsengine" {
          *  @param {Color}   [color=uiSystem.defaultButtonColor]
          */
         constructor(pos?: Vector2, size?: Vector2, text?: string, color?: Color);
-        /** @property {string} */
         text: string;
-        /** @property {Color} */
-        disabledColor: Color;
-        /** @property {boolean} */
-        disabled: boolean;
     }
     /**
      * UICheckbox - A UI object that acts as a checkbox
@@ -2906,10 +3048,13 @@ declare module "littlejsengine" {
          *  @param {Vector2} [pos]
          *  @param {Vector2} [size]
          *  @param {boolean} [checked]
+         *  @param {string}  [text]
+         *  @param {Color}   [color=uiSystem.defaultButtonColor]
          */
-        constructor(pos?: Vector2, size?: Vector2, checked?: boolean);
-        /** @property {boolean} */
+        constructor(pos?: Vector2, size?: Vector2, checked?: boolean, text?: string, color?: Color);
+        /** @property {boolean} - Current percentage value of this scrollbar 0-1 */
         checked: boolean;
+        text: string;
     }
     /**
      * UIScrollbar - A UI object that acts as a scrollbar
@@ -2925,12 +3070,11 @@ declare module "littlejsengine" {
          *  @param {Color}   [handleColor=WHITE]
          */
         constructor(pos?: Vector2, size?: Vector2, value?: number, text?: string, color?: Color, handleColor?: Color);
-        /** @property {number} */
+        /** @property {number} - Current percentage value of this scrollbar 0-1 */
         value: number;
-        /** @property {string} */
-        text: string;
-        /** @property {Color} */
+        /** @property {Color} - Color for the handle part of the scrollbar */
         handleColor: Color;
+        text: string;
     }
     /**
      * LittleJS Box2D Physics Plugin
@@ -2960,7 +3104,9 @@ declare module "littlejsengine" {
      *  @param {boolean} enable
      *  @memberof Box2D */
     export function box2dSetDebug(enable: boolean): void;
-    /** Box2d Init - Call with await before starting LittleJS to init box2d
+    /** Box2d Init - Call with await to init box2d
+     *  @example
+     *  await box2dInit();
      *  @return {Promise<Box2dPlugin>}
      *  @memberof Box2D */
     export function box2dInit(): Promise<Box2dPlugin>;
@@ -3808,7 +3954,7 @@ declare module "littlejsengine" {
         getCorrectionFactor(): number;
     }
     /** Draw a scalable nine-slice UI element in world space
-     *  This function can apply color and additive color if webgl is enabled
+     *  This function can apply color and additive color if WebGL is enabled
      *  @param {Vector2} pos - World space position
      *  @param {Vector2} size - World space size
      *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
@@ -3839,7 +3985,7 @@ declare module "littlejsengine" {
      *  @memberof DrawUtilities */
     export function drawNineSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number, angle?: number): void;
     /** Draw a scalable three-slice UI element in world space
-     *  This function can apply color and additive color if webgl is enabled
+     *  This function can apply color and additive color if WebGL is enabled
      *  @param {Vector2} pos - World space position
      *  @param {Vector2} size - World space size
      *  @param {TileInfo} startTile - Starting tile for the three-slice pattern