littlejsengine 1.1.2 → 1.1.3

package/engine/engine.all.release.js

@@ -1,5 +1,7 @@
 /*
-    LittleJS - Release build include file
+    LittleJS - Release Build
+    MIT License - Copyright 2021 Frank Force
+    
     - This file is used for release builds in place of engineDebug.js
     - Debug functionality will be disabled to lower size and increase performance
 */
@@ -26,15 +28,16 @@ const debugCircle     = ()=> {}
 const debugPoint      = ()=> {}
 const debugLine       = ()=> {}
 const debugAABB       = ()=> {}
+const debugText       = ()=> {}
 const debugClear      = ()=> {}
 const debugSaveCanvas = ()=> {}
 /**
- *  LittleJS Utility Classes and Functions
- *  <br> - General purpose math library
- *  <br> - Vector2 - fast, simple, easy 2D vector class
- *  <br> - Color - holds a rgba color with some math functions
- *  <br> - Timer - tracks time automatically
- *  @namespace Utilities
+ * LittleJS Utility Classes and Functions
+ * <br> - General purpose math library
+ * <br> - Vector2 - fast, simple, easy 2D vector class
+ * <br> - Color - holds a rgba color with some math functions
+ * <br> - Timer - tracks time automatically
+ * @namespace Utilities
  */
 
 'use strict';
@@ -44,23 +47,12 @@ const debugSaveCanvas = ()=> {}
  *  @memberof Utilities */
 const PI = Math.PI;
 
-/** True if running a Chromium based browser
- *  @const
- *  @memberof Utilities */
-const isChrome = window['chrome'];
-
 /** Returns absoulte value of value passed in
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
 const abs = (a)=> a < 0 ? -a : a;
 
-/** Returns the sign of value passed in
- *  @param {Number} value
- *  @return {Number}
- *  @memberof Utilities */
-const sign = (a)=> a < 0 ? -1 : 1;
-
 /** Returns lowest of two values passed in
  *  @param {Number} valueA
  *  @param {Number} valueB
@@ -75,54 +67,54 @@ const min = (a, b)=> a < b ?  a : b;
  *  @memberof Utilities */
 const max = (a, b)=> a > b ?  a : b;
 
+/** Returns the sign of value passed in (also returns 1 if 0)
+ *  @param {Number} value
+ *  @return {Number}
+ *  @memberof Utilities */
+const sign = (a)=> a < 0 ? -1 : 1;
+
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {Number} dividend
- *  @param {Number} divisor
+ *  @param {Number} [divisor=1]
  *  @return {Number}
  *  @memberof Utilities */
-const mod = (a, b)=> ((a % b) + b) % b;
+const mod = (a, b=1)=> ((a % b) + b) % b;
 
 /** Clamps the value beween max and min
  *  @param {Number} value
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const clamp = (v, max=1, min=0)=> (ASSERT(max > min), v < min ? min : v > max ? max : v);
+const clamp = (v, min=0, max=1)=> v < min ? min : v > max ? max : v;
 
 /** Returns what percentage the value is between max and min
  *  @param {Number} value
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const percent = (v, max=1, min=0)=> max-min ? clamp((v-min) / (max-min)) : 0;
+const percent = (v, min=0, max=1)=> max-min ? clamp((v-min) / (max-min)) : 0;
 
 /** Linearly interpolates the percent value between max and min
  *  @param {Number} percent
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const lerp = (p, max=1, min=0)=> min + clamp(p) * (max-min);
+const lerp = (p, min=0, max=1)=> min + clamp(p) * (max-min);
 
-/** Formats seconds to 00:00 style for display purposes 
- *  @param {Number} t - time in seconds
- *  @return {String}
- *  @memberof Utilities */
-const formatTime = (t)=> (t/60|0)+':'+(t%60<10?'0':'')+(t%60|0);
-
-/** Returns the nearest power of two not less then the value
+/** Applies smoothstep function to the percentage value
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-const nearestPowerOfTwo = (v)=> 2**Math.ceil(Math.log2(v));
+const smoothStep = (p)=> p * p * (3 - 2 * p);
 
-/** Applies smoothstep function to the percentage value
+/** Returns the nearest power of two not less then the value
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-const smoothStep = (p)=> p * p * (3 - 2 * p);
+const nearestPowerOfTwo = (v)=> 2**Math.ceil(Math.log2(v));
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
  *  @param {Vector2} pointA - Center of box A
@@ -141,6 +133,12 @@ const isOverlapping = (pA, sA, pB, sB)=> abs(pA.x - pB.x)*2 < sA.x + sB.x & abs(
  *  @memberof Utilities */
 const wave = (frequency=1, amplitude=1, t=time)=> amplitude/2 * (1 - Math.cos(t*frequency*2*PI));
 
+/** Formats seconds to mm:ss style for display purposes 
+ *  @param {Number} t - time in seconds
+ *  @return {String}
+ *  @memberof Utilities */
+const formatTime = (t)=> (t/60|0)+':'+(t%60<10?'0':'')+(t%60|0);
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Random global functions
@@ -163,7 +161,7 @@ const randInt = (a=1, b=0)=> rand(a,b)|0;
 /** Randomly returns either -1 or 1
  *  @return {Number}
  *  @memberof Random */
-const randSign = ()=> (rand(2)|0)*2-1;
+const randSign = ()=> (rand(2)|0) * 2 - 1;
 
 /** Returns a random Vector2 within a circular shape
  *  @param {Number} [radius=1]
@@ -199,25 +197,46 @@ let randSeed = 1;
 const randSeeded = (a=1, b=0)=>
 {
     randSeed ^= randSeed << 13; randSeed ^= randSeed >>> 17; randSeed ^= randSeed << 5; // xorshift
-    return b + (a-b)*abs(randSeed % 1e9)/1e9;
+    return b + (a-b) * abs(randSeed % 1e9) / 1e9;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
- *  @param {Number} [x=0]
- *  @param {Number} [y=0]
- *  @return {Vector2}
- *  @memberof Utilities */
+/** 
+ * Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
+ * @param {Number} [x=0]
+ * @param {Number} [y=0]
+ * @return {Vector2}
+ * @example
+ * let a = vec2(0, 1); // vector with coordinates (0, 1)
+ * let b = vec2(a);    // copy a into b
+ * a = vec2(5);        // set a to (5, 5)
+ * b = vec2();         // set b to (0, 0)
+ * @memberof Utilities
+ */
 const vec2 = (x=0, y)=> x.x == undefined ? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y);
 
-/** 2D Vector object with vector math library */
+/** 
+ * 2D Vector object with vector math library
+ * <br> - Functions do not change this so they can be chained together
+ * @example
+ * let a = new Vector2(2, 3); // vector with coordinates (2, 3)
+ * let b = new Vector2;       // vector with coordinates (0, 0)
+ * let c = vec2(4, 2);        // use the vec2 function to make a Vector2
+ * let d = a.add(b).scale(5); // operators can be chained
+ */
 class Vector2
 {
     /** Create a 2D vector with the x and y passed in, can also be created with vec2()
-     *  @param {Number} [x=0] - x axis position
-     *  @param {Number} [y=0] - y axis position */
-    constructor(x=0, y=0) { this.x = x; this.y = y; }
+     *  @param {Number} [x=0] - X axis location
+     *  @param {Number} [y=0] - Y axis location */
+    constructor(x=0, y=0)
+    {
+        /** @property {Number} - X axis location */
+        this.x = x;
+        /** @property {Number} - Y axis location */
+        this.y = y;
+    }
 
     /** Returns a new vector that is a copy of this
      *  @return {Vector2} */
@@ -308,10 +327,6 @@ class Vector2
      * @return {Vector2} */
     invert() { return new Vector2(this.y, -this.x); }
 
-    /** Returns a copy of this vector with the axies flipped
-     * @return {Vector2} */
-    flip() { return new Vector2(this.y, this.x); }
-
     /** Returns a copy of this vector with each axis floored
      * @return {Vector2} */
     floor() { return new Vector2(Math.floor(this.x), Math.floor(this.y)); }
@@ -334,15 +349,31 @@ class Vector2
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Color object (red, green, blue, alpha) with some helpful functions */
+/** 
+ * Color object (red, green, blue, alpha) with some helpful functions
+ * @example
+ * let a = new Color;             // white
+ * let b = new Color(1, 0, 0);    // red
+ * let c = new Color(0, 0, 0, 0); // transparent black
+ */
 class Color
 {
     /** Create a color with the components passed in, white by default
-     *  @param {Number} [r=1] - red
-     *  @param {Number} [g=1] - green
-     *  @param {Number} [b=1] - blue
-     *  @param {Number} [a=1] - alpha */
-    constructor(r=1, g=1, b=1, a=1) { this.r=r; this.g=g; this.b=b; this.a=a; }
+     *  @param {Number} [red=1]
+     *  @param {Number} [green=1]
+     *  @param {Number} [blue=1]
+     *  @param {Number} [alpha=1] */
+    constructor(r=1, g=1, b=1, a=1)
+    {
+        /** @property {Number} - Red */
+        this.r = r;
+        /** @property {Number} - Green */
+        this.g = g;
+        /** @property {Number} - Blue */
+        this.b = b;
+        /** @property {Number} - Alpha */
+        this.a = a;
+    }
 
     /** Returns a new color that is a copy of this
      * @return {Color} */
@@ -439,7 +470,15 @@ class Color
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Timer object tracks how long has passed since it was set */
+/**
+ * Timer object tracks how long has passed since it was set
+ * @example
+ * let a = new Timer;    // creates a timer that is not set
+ * a.set(3);             // sets the timer to 3 seconds
+ *
+ * let b = new Timer(1); // creates a timer with 1 second left
+ * b.unset();            // unsets the timer
+ */
 class Timer
 {
     /** Create a timer object set time passed in
@@ -465,17 +504,17 @@ class Timer
      * @return {Boolean} */
     elapsed() { return time >  this.time; }
 
-    /** Get how long since elapsed, returns 0 if not set
+    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {Number} */
     get() { return this.isSet()? time - this.time : 0; }
 
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {Number} */
-    getPercent() { return this.isSet()? percent(this.time - time, 0, this.setTime) : 0; }
+    getPercent() { return this.isSet()? percent(this.time - time, this.setTime, 0) : 0; }
 }
 /**
- *  LittleJS Engine Settings
- *  @namespace Settings
+ * LittleJS Engine Settings
+ * @namespace Settings
  */
 
 'use strict';
@@ -483,35 +522,27 @@ class Timer
 ///////////////////////////////////////////////////////////////////////////////
 // Display settings
 
-/** The max width of the canvas, centered if window is larger
- *  @default
- *  @memberof Settings */
-const maxWidth = 1920;
-
-/** The max height of the canvas, centered if window is larger
- *  @default
- *  @memberof Settings */
-const maxHeight = 1200; // up to 1080p and 16:10
-
-/** Fixed witdh, if enabled cavnvas size never changes
+/** The max size of the canvas, centered if window is larger
+ *  @type {Vector2} 
  *  @default
  *  @memberof Settings */
-let fixedWidth = 0;
+let canvasMaxSize = vec2(1920, 1200);
 
-/** Fixed height, if enabled cavnvas size never changes
+/** Fixed size of the canvas, if enabled cavnvas size never changes
+ *  @type {Vector2} 
  *  @default
  *  @memberof Settings */
-let fixedHeight = 0;
+let canvasFixedSize = vec2();
 
-/** Fit to canvas to window by adding space on top or bottom if necessary
+/** Disables anti aliasing for pixel art if true
  *  @default
  *  @memberof Settings */
-let fixedFitToWindow = 1;
+let cavasPixelated = 1;
 
 /** Default font used for text rendering
  *  @default
  *  @memberof Settings */
-let defaultFont = 'arial';
+let fontDefault = 'arial';
 
 ///////////////////////////////////////////////////////////////////////////////
 // Tile sheet settings
@@ -520,17 +551,12 @@ let defaultFont = 'arial';
  *  @type {Vector2} 
  *  @default
  *  @memberof Settings */
-const defaultTileSize = vec2(16);
+let tileSizeDefault = vec2(16);
 
 /** Prevent tile bleeding from neighbors in pixels
  *  @default
  *  @memberof Settings */
-const tileBleedShrinkFix = .3;
-
-/** Use crisp pixels for pixel art if true
- *  @default
- *  @memberof Settings */
-let pixelated = 1;
+let tileFixBleedScale = .3;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Object settings
@@ -539,43 +565,48 @@ let pixelated = 1;
  *  @type {Vector2} 
  *  @default
  *  @memberof Settings */
-const defaultObjectSize = vec2(1);
+let objectDefaultSize = vec2(1);
 
 /** Default object mass for collison calcuations (how heavy objects are)
  *  @default
  *  @memberof Settings */
-const defaultObjectMass = 1;
+let objectDefaultMass = 1;
 
 /** How much to slow velocity by each frame (0-1)
  *  @default
  *  @memberof Settings */
-const defaultObjectDamping = .99;
+let objectDefaultDamping = .99;
 
 /** How much to slow angular velocity each frame (0-1)
  *  @default
  *  @memberof Settings */
-const defaultObjectAngleDamping = .99;
+let objectDefaultAngleDamping = .99;
 
 /** How much to bounce when a collision occurs (0-1)
  *  @default
  *  @memberof Settings */
-const defaultObjectElasticity = 0;
+let objectDefaultElasticity = 0;
 
 /** How much to slow when touching (0-1)
  *  @default
  *  @memberof Settings */
-const defaultObjectFriction = .8;
+let objectDefaultFriction = .8;
 
 /** Clamp max speed to avoid fast objects missing collisions
  *  @default
  *  @memberof Settings */
-const maxObjectSpeed = 1;
+let objectMaxSpeed = 1;
 
 /** How much gravity to apply to objects along the Y axis, negative is down
  *  @default
  *  @memberof Settings */
 let gravity = 0;
 
+/** Scales emit rate of particles, useful for low graphics mode (0 disables particle emitters)
+ *  @default
+ *  @memberof Settings */
+let particleEmitRateScale = 1;
+
 ///////////////////////////////////////////////////////////////////////////////
 // Camera settings
 
@@ -588,7 +619,7 @@ let cameraPos = vec2();
 /** Scale of camera in world space
  *  @default
  *  @memberof Settings */
-let cameraScale = max(defaultTileSize.x, defaultTileSize.y);
+let cameraScale = max(tileSizeDefault.x, tileSizeDefault.y);
 
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
@@ -596,7 +627,7 @@ let cameraScale = max(defaultTileSize.x, defaultTileSize.y);
 /** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
  *  @default
  *  @memberof Settings */
-const glEnable = 1;
+let glEnable = 1;
 
 /** Fixes slow rendering in some browsers by not compositing the WebGL canvas
  *  @default
@@ -609,45 +640,62 @@ let glOverlay = 1;
 /** Should gamepads be allowed
  *  @default
  *  @memberof Settings */
-const gamepadsEnable = 1;
+let gamepadsEnable = 1;
+
+/** If true, the dpad input is also routed to the left analog stick (for better accessability)
+ *  @default
+ *  @memberof Settings */
+let gamepadDirectionEmulateStick = 1;
+
+/** If true the WASD keys are also routed to the direction keys (for better accessability)
+ *  @default
+ *  @memberof Settings */
+let inputWASDEmulateDirection = 1;
+
+/** True if touch gamepad should appear on mobile devices
+ *  <br> - Supports left analog stick, 4 face buttons and start button (button 9)
+ *  <br> - Must be set by end of gameInit to be activated
+ *  @default
+ *  @memberof Settings */
+let touchGamepadEnable = 0;
 
-/** If true touch input is routed to mouse functions
+/** Size of virutal gamepad for touch devices in pixels
  *  @default
  *  @memberof Settings */
-const touchInputEnable = 1;
+let touchGamepadSize = 80;
 
-/** Allow players to use dpad as analog stick
+/** Transparency of touch gamepad overlay
  *  @default
  *  @memberof Settings */
-const copyGamepadDirectionToStick = 1;
+let touchGamepadAlpha = .3;
 
-/** allow players to use WASD as direction keys
+/** Allow vibration hardware if it exists
  *  @default
  *  @memberof Settings */
-const copyWASDToDpad = 1;
+let vibrateEnable = 1;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Audio settings
 
-/** All audio code can be disabled and removed from build
+/** Volume scale to apply to all sound, music and speech
  *  @default
  *  @memberof Settings */
-const soundEnable = 1;
+let soundVolume = .5;
 
-/** Volume scale to apply to all sound, music and speech
+/** All audio code can be disabled and removed from build
  *  @default
  *  @memberof Settings */
-let audioVolume = .5;
+let soundEnable = 1;
 
 /** Default range where sound no longer plays
  *  @default
  *  @memberof Settings */
-const defaultSoundRange = 30;
+let soundDefaultRange = 30;
 
 /** Default range percent to start tapering off sound (0-1)
  *  @default
  *  @memberof Settings */
-const defaultSoundTaper = .7;
+let soundDefaultTaper = .7;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Medals settings
@@ -655,27 +703,27 @@ const defaultSoundTaper = .7;
 /** How long to show medals for in seconds
  *  @default
  *  @memberof Settings */
-const medalDisplayTime = 5;
+let medalDisplayTime = 5;
 
 /** How quickly to slide on/off medals in seconds
  *  @default
  *  @memberof Settings */
-const medalDisplaySlideTime = .5;
+let medalDisplaySlideTime = .5;
 
 /** Width of medal display
  *  @default
  *  @memberof Settings */
-const medalDisplayWidth = 640;
+let medalDisplayWidth = 640;
 
 /** Height of medal display
  *  @default
  *  @memberof Settings */
-const medalDisplayHeight = 99;
+let medalDisplayHeight = 80;
 
 /** Size of icon in medal display
  *  @default
  *  @memberof Settings */
-const medalDisplayIconSize = 80;
+let medalDisplayIconSize = 50;
 /*
     LittleJS - The Tiny JavaScript Game Engine That Can!
     MIT License - Copyright 2021 Frank Force
@@ -700,21 +748,21 @@ const medalDisplayIconSize = 80;
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.1.2';
+const engineVersion = '1.1.3';
 
 /** Frames per second to update objects
  *  @default */
-const FPS = 60;
+const frameRate = 60;
 
 /** How many seconds each frame lasts, engine uses a fixed time step
  *  @default 1/60 */
-const timeDelta = 1/FPS;
+const timeDelta = 1/frameRate;
 
 /** Array containing all engine objects */
 let engineObjects = [];
 
-/** Array containing only objects that are set to collide with other objects (for optimization) */
-let engineCollideObjects = [];
+/** Array containing only objects that are set to collide with other objects this frame (for optimization) */
+let engineObjectsCollide = [];
 
 /** Current update frame, used to calculate time */
 let frame = 0;
@@ -729,36 +777,40 @@ let timeReal = 0;
 let paused = 0;
 
 // Engine internal variables not exposed to documentation
-let frameTimeLastMS = 0, frameTimeBufferMS = 0, debugFPS = 0, 
-    shrinkTilesX, shrinkTilesY, drawCount, tileImageSize, tileImageSizeInverse;
+let frameTimeLastMS = 0, frameTimeBufferMS = 0, tileImageSize, tileImageFixBleed;
+
+// Engine stat tracking, if showWatermark is true
+let averageFPS, drawCount;
+
+// css text used for elements created by engine
+const styleBody = 'margin:0;overflow:hidden;background:#000' +
+    ';touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none';
+const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
 
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Start up LittleJS engine with your callback functions
- *  @param {Function} gameInit       - Called once after the engine starts up, setup the game
- *  @param {Function} gameUpdate     - Called every frame at 60 frames per second, handle input and update the game state
- *  @param {Function} gameUpdatePost - Called after physics and objects are updated, setup camera and prepare for render
- *  @param {Function} gameRender     - Called before objects are rendered, draw any background effects that appear behind objects
- *  @param {Function} gameRenderPost - Called after objects are rendered, draw effects or hud that appear above all objects
- *  @param {String} tileImageSource  - Tile image to use, everything starts when the image is finished loading
+ *  @param {Function} gameInit        - Called once after the engine starts up, setup the game
+ *  @param {Function} gameUpdate      - Called every frame at 60 frames per second, handle input and update the game state
+ *  @param {Function} gameUpdatePost  - Called after physics and objects are updated, setup camera and prepare for render
+ *  @param {Function} gameRender      - Called before objects are rendered, draw any background effects that appear behind objects
+ *  @param {Function} gameRenderPost  - Called after objects are rendered, draw effects or hud that appear above all objects
+ *  @param {String} [tileImageSource] - Tile image to use, everything starts when the image is finished loading
  */
 function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, tileImageSource)
 {
-    // init engine when tiles load
-    tileImage.onload = ()=>
+    // init engine when tiles load or fail to load
+    tileImage.onerror = tileImage.onload = ()=>
     {
         // save tile image info
-        tileImageSizeInverse = vec2(1).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
+        tileImageFixBleed = vec2(tileFixBleedScale).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
         debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
-        shrinkTilesX = tileBleedShrinkFix/tileImageSize.x;
-        shrinkTilesY = tileBleedShrinkFix/tileImageSize.y;
 
         // setup html
+        document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
-        document.body.style = 'margin:0;overflow:hidden;background:#000';
-        mainCanvas.style = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)' +
-            (pixelated ? ';image-rendering:crisp-edges;image-rendering:pixelated' : ''); // pixelated rendering
         mainContext = mainCanvas.getContext('2d');
+        mainCanvas.style = styleCanvas;
 
         // init stuff and start engine
         debugInit();
@@ -766,10 +818,11 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
         // create overlay canvas for hud to appear above gl canvas
         document.body.appendChild(overlayCanvas = document.createElement('canvas'));
-        overlayCanvas.style = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
         overlayContext = overlayCanvas.getContext('2d');
-
+        overlayCanvas.style = styleCanvas;
+        
         gameInit();
+        touchGamepadCreate();
         engineUpdate();
     };
 
@@ -782,7 +835,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
-            debugFPS = lerp(.05, 1e3/(frameTimeDeltaMS||1), debugFPS);
+            averageFPS = lerp(.05, averageFPS || 0, 1e3/(frameTimeDeltaMS||1));
         if (debug)
             frameTimeDeltaMS *= keyIsDown(107) ? 5 : keyIsDown(109) ? .2 : 1; // +/- to speed/slow time
         timeReal += frameTimeDeltaMS / 1e3;
@@ -808,7 +861,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             }
             
             // update multiple frames if necessary in case of slow framerate
-            for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / FPS)
+            for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
             {
                 // update game and objects
                 inputUpdate();
@@ -825,45 +878,39 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             frameTimeBufferMS += deltaSmooth;
         }
 
-        if (fixedWidth)
+        if (canvasFixedSize.x)
         {
             // clear set fixed size
-            mainCanvas.width  = fixedWidth;
-            mainCanvas.height = fixedHeight;
+            mainCanvas.width  = canvasFixedSize.x;
+            mainCanvas.height = canvasFixedSize.y;
             
-            if (fixedFitToWindow)
+            // fit to window by adding space on top or bottom if necessary
+            const aspect = innerWidth / innerHeight;
+            const fixedAspect = mainCanvas.width / mainCanvas.height;
+            mainCanvas.style.width  = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
+            mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
+            if (glCanvas)
             {
-                // fit to window by adding space on top or bottom if necessary
-                const aspect = innerWidth / innerHeight;
-                const fixedAspect = fixedWidth / fixedHeight;
-                mainCanvas.style.width  = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-                mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
-                if (glCanvas)
-                {
-                    glCanvas.style.width  = mainCanvas.style.width;
-                    glCanvas.style.height = mainCanvas.style.height;
-                }
+                glCanvas.style.width  = mainCanvas.style.width;
+                glCanvas.style.height = mainCanvas.style.height;
             }
         }
         else
         {
             // clear and set size to same as window
-            mainCanvas.width  = min(innerWidth,  maxWidth);
-            mainCanvas.height = min(innerHeight, maxHeight);
+            mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
+            mainCanvas.height = min(innerHeight, canvasMaxSize.y);
         }
         
-        // save canvas size and clear overlay canvas
-        mainCanvasSize = vec2(overlayCanvas.width = mainCanvas.width, overlayCanvas.height = mainCanvas.height);
-        mainContext.imageSmoothingEnabled = !pixelated; // disable smoothing for pixel art
-
         // render sort then render while removing destroyed objects
-        glPreRender(mainCanvas.width, mainCanvas.height);
+        enginePreRender();
         gameRender();
         engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
         for (const o of engineObjects)
             o.destroyed || o.render();
         gameRenderPost();
         medalsRender();
+        touchGamepadRender();
         debugRender();
         glCopyToContext(mainContext);
 
@@ -875,7 +922,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             overlayContext.font = '1em monospace';
             overlayContext.fillStyle = '#000';
             const text = engineName + ' ' + 'v' + engineVersion + ' / ' 
-                + drawCount + ' / ' + engineObjects.length + ' / ' + debugFPS.toFixed(1);
+                + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
+                + ' ' + (glEnable ? 'GL' : '2D') ;
             overlayContext.fillText(text, mainCanvas.width-3, 3);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText(text, mainCanvas.width-2, 2);
@@ -887,12 +935,27 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
 }
 
+// called by engine to setup render system
+function enginePreRender()
+{
+    // save canvas size and clear canvases
+    mainCanvasSize = vec2(overlayCanvas.width = mainCanvas.width, overlayCanvas.height = mainCanvas.height);
+
+    // disable smoothing for pixel art
+    mainContext.imageSmoothingEnabled = !cavasPixelated;
+
+    // setup gl rendering if enabled
+    glPreRender(mainCanvas.width, mainCanvas.height, cameraPos.x, cameraPos.y, cameraScale);
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Calls update on each engine object (recursively if child), removes destroyed objects, and updated time */
 function engineObjectsUpdate()
 {
+    // get list of solid objects for physics optimzation
+    engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
+
     // recursive object update
     const updateObject = (o)=>
     {
@@ -908,42 +971,38 @@ function engineObjectsUpdate()
 
     // remove destroyed objects
     engineObjects = engineObjects.filter(o=>!o.destroyed);
-    engineCollideObjects = engineCollideObjects.filter(o=>!o.destroyed);
 
     // increment frame and update time
-    time = ++frame / FPS;
+    time = ++frame / frameRate;
 }
 
-/** Detroy and remove all objects that are not persistent or descendants of a persistent object */
+/** Destroy and remove all objects */
 function engineObjectsDestroy()
 {
     for (const o of engineObjects)
-        o.persistent || o.parent || o.destroy();
+        o.parent || o.destroy();
     engineObjects = engineObjects.filter(o=>!o.destroyed);
 }
 
 /** Triggers a callback for each object within a given area
- *  @param {Vector2} [pos] - Center of test area
- *  @param {Number} [size] - Radius of circle if float, rectangle size if Vector2
- *  @param {Function} [callbackFunction] - Calls this function on every object that passes the test
+ *  @param {Vector2} [pos]                 - Center of test area
+ *  @param {Number} [size]                 - Radius of circle if float, rectangle size if Vector2
+ *  @param {Function} [callbackFunction]   - Calls this function on every object that passes the test
  *  @param {Array} [objects=engineObjects] - List of objects to check */
 function engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)
 {
-    if (!pos)
+    if (!pos) // all objects
     {
-        // all objects
         for (const o of objects)
             callbackFunction(o);
     }
-    else if (size.x != undefined)
+    else if (size.x != undefined)  // bounding box test
     {
-        // aabb test
         for (const o of objects)
             isOverlapping(pos, size, o.pos, o.size) && callbackFunction(o);
     }
-    else
+    else  // circle test
     {
-        // circle test
         const sizeSquared = size*size;
         for (const o of objects)
             pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
@@ -956,51 +1015,83 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
 'use strict';
 
 /** 
- *  LittleJS Object Base Object Class
- *  <br> - Base object class used by the engine
- *  <br> - Automatically adds self to object list
- *  <br> - Will be updated and rendered each frame
- *  <br> - Renders as a sprite from a tilesheet by default
- *  <br> - Can have color and addtive color applied
- *  <br> - 2d Physics and collision system
- *  <br> - Sorted by renderOrder
- *  <br> - Objects can have children attached
- *  <br> - Parents are updated before children, and set child transform
- *  <br> - Call destroy() to get rid of objects
+ * LittleJS Object Base Object Class
+ * <br> - Base object class used by the engine
+ * <br> - Automatically adds self to object list
+ * <br> - Will be updated and rendered each frame
+ * <br> - Renders as a sprite from a tilesheet by default
+ * <br> - Can have color and addtive color applied
+ * <br> - 2d Physics and collision system
+ * <br> - Sorted by renderOrder
+ * <br> - Objects can have children attached
+ * <br> - Parents are updated before children, and set child transform
+ * <br> - Call destroy() to get rid of objects
+ * <br>
+ * <br>The physics system used by objects is simple and fast with some caveats...
+ * <br> - Collision uses the axis aligned size, the object's rotation angle is only for rendering
+ * <br> - Objects are guaranteed to not intersect tile collision from physics
+ * <br> - If an object starts or is moved inside tile collision, it will not collide with that tile
+ * <br> - Collision for objects can be set to be solid to block other objects
+ * <br> - Objects may get pushed into overlapping other solid objects, if so they will push away
+ * <br> - Solid objects are more performance intensive and should be used sparingly
+ * @example
+ * // create an engine object, normally you would first extend the class with your own
+ * const pos = vec2(2,3);
+ * const object = new EngineObject(pos); 
  */
 class EngineObject
 {
-    /**
-     * Create an engine object and adds it to the list of objects
-     * @param {Vector2} [position=new Vector2(0,0)] - World space position of the object
-     * @param {Vector2} [size=defaultObjectSize] - World space size of the object
-     * @param {Number}  [tileIndex=-1] - Tile to use to render object, untextured if -1
-     * @param {Vector2} [tileSize=defaultTileSize] - Size of tile in source pixels
-     * @param {Number}  [angle=0] - Angle to rotate the object
-     * @param {Color}   [color] - Color to apply to tile when rendered
+    /** Create an engine object and adds it to the list of objects
+     *  @param {Vector2} [position=new Vector2(0,0)] - World space position of the object
+     *  @param {Vector2} [size=objectDefaultSize]    - World space size of the object
+     *  @param {Number}  [tileIndex=-1]              - Tile to use to render object, untextured if -1
+     *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
+     *  @param {Number}  [angle=0]                   - Angle to rotate the object
+     *  @param {Color}   [color]                     - Color to apply to tile when rendered
+     *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
      */
-    constructor(pos=vec2(), size=defaultObjectSize, tileIndex=-1, tileSize=defaultTileSize, angle=0, color)
+    constructor(pos=vec2(), size=objectDefaultSize, tileIndex=-1, tileSize=tileSizeDefault, angle=0, color, renderOrder=0)
     {
         // set passed in params
         ASSERT(pos && pos.x != undefined && size.x != undefined); // ensure pos and size are vec2s
+
+        /** @property {Vector2} - World space position of the object */
         this.pos = pos.copy();
+        /** @property {Vector2} - World space width and height of the object */
         this.size = size;
+        /** @property {Vector2} - Size of object used for drawing, uses size if not set */
+        this.drawSize;
+        /** @property {Number}  - Tile to use to render object, untextured if -1 */
         this.tileIndex = tileIndex;
+        /** @property {Vector2} - Size of tile in source pixels */
         this.tileSize = tileSize;
+        /** @property {Number}  - Angle to rotate the object */
         this.angle = angle;
+        /** @property {Color}   - Color to apply when rendered */
         this.color = color;
+        /** @property {Color}   - Additive color to apply when rendered */
+        this.additiveColor;
+
+        // set object defaults
+        /** @property {Number} [mass=objectDefaultMass]                 - How heavy the object is */
+        this.mass         = objectDefaultMass;
+        /** @property {Number} [damping=objectDefaultDamping]           - How much to slow down velocity each frame (0-1) */
+        this.damping      = objectDefaultDamping;
+        /** @property {Number} [angleDamping=objectDefaultAngleDamping] - How much to slow down rotation each frame (0-1) */
+        this.angleDamping = objectDefaultAngleDamping;
+        /** @property {Number} [elasticity=objectDefaultElasticity]     - How bouncy the object is when colliding (0-1) */
+        this.elasticity   = objectDefaultElasticity;
+        /** @property {Number} [friction=objectDefaultFriction]         - How much friction to apply when sliding (0-1) */
+        this.friction     = objectDefaultFriction;
+        /** @property {Number} [gravityScale=1]                         - How much to scale gravity by for this object */
+        this.gravityScale = 1;
+        /** @property {Number} [renderOrder=0]                          - Objects are sorted by render order */
+        this.renderOrder = renderOrder;
 
-        // set physics defaults
-        this.mass         = defaultObjectMass;
-        this.damping      = defaultObjectDamping;
-        this.angleDamping = defaultObjectAngleDamping;
-        this.elasticity   = defaultObjectElasticity;
-        this.friction     = defaultObjectFriction;
-
-        // init other object stuff
+        // init other internal object stuff
         this.spawnTime = time;
-        this.velocity = vec2(this.collideSolidObjects = this.renderOrder = this.angleVelocity = 0);
-        this.collideTiles = this.gravityScale = 1;
+        this.velocity = vec2(this.collideSolidObjects = this.angleVelocity = 0);
+        this.collideTiles = 1;
         this.children = [];
 
         // add to list of objects
@@ -1020,8 +1111,8 @@ class EngineObject
         }
 
         // limit max speed to prevent missing collisions
-        this.velocity.x = clamp(this.velocity.x, maxObjectSpeed, -maxObjectSpeed);
-        this.velocity.y = clamp(this.velocity.y, maxObjectSpeed, -maxObjectSpeed);
+        this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
+        this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
 
         // apply physics
         const oldPos = this.pos.copy();
@@ -1050,14 +1141,14 @@ class EngineObject
         {
             // check collisions against solid objects
             const epsilon = 1e-3; // necessary to push slightly outside of the collision
-            for (const o of engineCollideObjects)
+            for (const o of engineObjectsCollide)
             {
                 // non solid objects don't collide with eachother
-                if (!this.isSolid & !o.isSolid || o.destroyed || o.parent)
+                if (!this.isSolid & !o.isSolid || o.destroyed || o.parent || o == this)
                     continue;
 
                 // check collision
-                if (!isOverlapping(this.pos, this.size, o.pos, o.size) || o == this)
+                if (!isOverlapping(this.pos, this.size, o.pos, o.size))
                     continue;
 
                 // pass collision to objects
@@ -1069,7 +1160,7 @@ class EngineObject
                     // if already was touching, try to push away
                     const deltaPos = oldPos.subtract(o.pos);
                     const length = deltaPos.length();
-                    const pushAwayAccel = .001; // push away if alread overlapping
+                    const pushAwayAccel = .001; // push away if already overlapping
                     const velocity = length < .01 ? randVector(pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
                     this.velocity = this.velocity.add(velocity);
                     if (o.mass) // push away if not fixed
@@ -1080,16 +1171,15 @@ class EngineObject
                 }
 
                 // check for collision
-                const sx = this.size.x + o.size.x;
-                const sy = this.size.y + o.size.y;
-                const smallStepUp = (oldPos.y - o.pos.y)*2 > sy + gravity; // prefer to push up if small delta
-                const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sy;
-                const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sx;
+                const sizeBoth = this.size.add(o.size);
+                const smallStepUp = (oldPos.y - o.pos.y)*2 > sizeBoth.y + gravity; // prefer to push up if small delta
+                const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
+                const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
                 
                 if (smallStepUp || isBlockedY || !isBlockedX) // resolve y collision
                 {
                     // push outside object collision
-                    this.pos.y = o.pos.y + (sy/2 + epsilon) * sign(oldPos.y - o.pos.y);
+                    this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
                     if (o.groundObject && wasMovingDown || !o.mass)
                     {
                         // set ground object if landed on something
@@ -1112,15 +1202,14 @@ class EngineObject
 
                         // lerp betwen elastic or inelastic based on elasticity
                         const elasticity = max(this.elasticity, o.elasticity);
-                        this.velocity.y = lerp(elasticity, elastic0, inelastic);
-                        o.velocity.y = lerp(elasticity, elastic1, inelastic);
+                        this.velocity.y = lerp(elasticity, inelastic, elastic0);
+                        o.velocity.y = lerp(elasticity, inelastic, elastic1);
                     }
-                    debugPhysics && smallStepUp && (abs(oldPos.x - o.pos.x)*2 > sx) && console.log('stepUp', oldPos.y - o.pos.y);
                 }
                 if (!smallStepUp && (isBlockedX || !isBlockedY)) // resolve x collision
                 {
                     // push outside collision
-                    this.pos.x = o.pos.x + (sx/2 + epsilon) * sign(oldPos.x - o.pos.x);
+                    this.pos.x = o.pos.x + (sizeBoth.x/2 + epsilon) * sign(oldPos.x - o.pos.x);
                     if (o.mass)
                     {
                         // inelastic collision
@@ -1134,13 +1223,12 @@ class EngineObject
 
                         // lerp betwen elastic or inelastic based on elasticity
                         const elasticity = max(this.elasticity, o.elasticity);
-                        this.velocity.x = lerp(elasticity, elastic0, inelastic);
-                        o.velocity.x = lerp(elasticity, elastic1, inelastic);
+                        this.velocity.x = lerp(elasticity, inelastic, elastic0);
+                        o.velocity.x = lerp(elasticity, inelastic, elastic1);
                     }
                     else // bounce if other object is fixed
                         this.velocity.x *= -this.elasticity;
                 }
-
                 debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
             }
         }
@@ -1149,8 +1237,6 @@ class EngineObject
             // check collision against tiles
             if (tileCollisionTest(this.pos, this.size, this))
             {
-                //debugPhysics && debugRect(this.pos, this.size, '#ff0');
-
                 // if already was stuck in collision, don't do anything
                 // this should not happen unless something starts in collision
                 if (!tileCollisionTest(oldPos, this.size, this))
@@ -1207,19 +1293,19 @@ class EngineObject
     
     /** Called to check if a tile collision should be resolved
      *  @param {Number}  tileData - the value of the tile at the position
-     *  @param {Vector2} pos - tile where the collision occured
-     *  @return {Boolean} true if the collision should be resolved */
+     *  @param {Vector2} pos      - tile where the collision occured
+     *  @return {Boolean}         - true if the collision should be resolved */
     collideWithTile(tileData, pos)        { return tileData > 0; }
     
     /** Called to check if a tile raycast hit
      *  @param {Number}  tileData - the value of the tile at the position
-     *  @param {Vector2} pos - tile where the raycast is
-     *  @return {Boolean} true if the raycast should hit */
+     *  @param {Vector2} pos      - tile where the raycast is
+     *  @return {Boolean}         - true if the raycast should hit */
     collideWithTileRaycast(tileData, pos) { return tileData > 0; }
 
     /** Called to check if a tile raycast hit
      *  @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
      */
     collideWithObject(o)              { return 1; }
 
@@ -1263,41 +1349,42 @@ class EngineObject
 
     /** Set how this object collides
      *  @param {boolean} [collideSolidObjects=0] - Does it collide with solid objects
-     *  @param {boolean} [isSolid=0] - Does it collide with and block other objects (expensive in large numbers)
-     *  @param {boolean} [collideTiles=1] - Does it collide with the tile collision */
+     *  @param {boolean} [isSolid=0]             - Does it collide with and block other objects (expensive in large numbers)
+     *  @param {boolean} [collideTiles=1]        - Does it collide with the tile collision */
     setCollision(collideSolidObjects=0, isSolid=0, collideTiles=1)
     {
         ASSERT(collideSolidObjects || !isSolid); // solid objects must be set to collide
 
-        // track collidable objects in separate list
-        if (collideSolidObjects && !this.collideSolidObjects)
-        {
-            ASSERT(!engineCollideObjects.includes(this));
-            engineCollideObjects.push(this);
-        }
-        else if (!collideSolidObjects && this.collideSolidObjects)
-        {
-            ASSERT(engineCollideObjects.includes(this))
-            engineCollideObjects.splice(engineCollideObjects.indexOf(this), 1);
-        }
-
         this.collideSolidObjects = collideSolidObjects;
         this.isSolid = isSolid;
         this.collideTiles = collideTiles;
     }
 }
 /** 
- *  LittleJS Drawing System
- *  <br> - Hybrid with both Canvas2D and WebGL available
- *  <br> - Super fast tile sheet rendering with WebGL
- *  <br> - Can apply rotation, mirror, color and additive color
- *  <br> - Many useful utility functions
- *  @namespace Draw
+ * LittleJS Drawing System
+ * <br> - Hybrid with both Canvas2D and WebGL available
+ * <br> - Super fast tile sheet rendering with WebGL
+ * <br> - Can apply rotation, mirror, color and additive color
+ * <br> - Many useful utility functions
+ * <br>
+ * <br>LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
+ * <br>There are 3 canvas/contexts available to draw to...
+ * <br> - mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
+ * <br> - glCanvas - Used by the accelerated WebGL batch rendering system.
+ * <br> - overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
+ * <br>
+ * <br>The WebGL rendering system is very fast with some caveats...
+ * <br> - The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
+ * <br> - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
+ * <br> - Group additive rendering together using renderOrder to mitigate this issue
+ * <br>
+ * <br>The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!
+ * @namespace Draw
  */
 
 'use strict';
 
-/** Main tilesheet to use for batch rendering system
+/** Tile sheet for batch rendering system
  *  @type {Image}
  *  @memberof Draw */
 const tileImage = new Image();
@@ -1322,7 +1409,7 @@ let overlayCanvas;
  *  @memberof Draw */
 let overlayContext;
 
-/** The size of the main canvas (and other secondary canvases: overlayCanvas and glCanvas) 
+/** The size of the main canvas (and other secondary canvases) 
  *  @type {Vector2}
  *  @memberof Draw */
 let mainCanvasSize = vec2();
@@ -1341,42 +1428,39 @@ const screenToWorld = (screenPos)=>
 const worldToScreen = (worldPos)=>
     worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
 
-/** Draw textured tile centered on pos
- *  @param {Vector2} pos - Center of the tile
- *  @param {Vector2} [size=new Vector2(1,1)] - Size of the tile
- *  @param {Number}  [tileIndex=-1] - Tile index to use, negative is untextured
- *  @param {Vector2} [tileSize=defaultTileSize] - Tile size in source pixels
- *  @param {Color}   [color=new Color(1,1,1)]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [mirror=0]
- *  @param {Color}   [additiveColor=new Color(0,0,0,0)]
+/** 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=new Vector2(1,1)]            - Size of the tile in world space, width and height
+ *  @param {Number}  [tileIndex=-1]                     - Tile index to use, negative is untextured
+ *  @param {Vector2} [tileSize=tileSizeDefault]         - Tile size in source pixels
+ *  @param {Color}   [color=new Color(1,1,1)]           - Color to modulate with
+ *  @param {Number}  [angle=0]                          - Angle to rotate by
+ *  @param {Boolean} [mirror=0]                         - If true image is flipped along the Y axis
+ *  @param {Color}   [additiveColor=new Color(0,0,0,0)] - Additive color to be applied
+ *  @param {Boolean} [useWebGL=glEnable]                - Use accelerated WebGL rendering
  *  @memberof Draw */
-function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, color=new Color, angle=0, mirror, 
-    additiveColor=new Color(0,0,0,0))
+function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle=0, mirror, 
+    additiveColor=new Color(0,0,0,0), useWebGL=glEnable)
 {
     showWatermark && ++drawCount;
-    if (glEnable)
+    if (glEnable && useWebGL)
     {
-        if (tileIndex < 0)
+        if (tileIndex < 0 || !tileImage.width)
         {
-            // if negative tile index, force untextured
+            // if negative tile index or image not found, force untextured
             glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
         }
         else
         {
             // calculate uvs and render
-            const cols = tileImage.width / tileSize.x |0;
-            const uvSizeX = tileSize.x * tileImageSizeInverse.x;
-            const uvSizeY = tileSize.y * tileImageSizeInverse.y;
+            const cols = tileImageSize.x / tileSize.x |0;
+            const uvSizeX = tileSize.x / tileImageSize.x;
+            const uvSizeY = tileSize.y / tileImageSize.y;
             const uvX = (tileIndex%cols)*uvSizeX, uvY = (tileIndex/cols|0)*uvSizeY;
-
-            // shrink uvs to prevent bleeding
-            const shrinkTilesX = tileBleedShrinkFix * tileImageSizeInverse.x;
-            const shrinkTilesY = tileBleedShrinkFix * tileImageSizeInverse.y;
             
             glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                uvX + shrinkTilesX, uvY + shrinkTilesY, 
-                uvX - shrinkTilesX + uvSizeX, uvY - shrinkTilesX + uvSizeY, 
+                uvX + tileImageFixBleed.x, uvY + tileImageFixBleed.y, 
+                uvX - tileImageFixBleed.x + uvSizeX, uvY - tileImageFixBleed.y + uvSizeY, 
                 color.rgbaInt(), additiveColor.rgbaInt()); 
         }
     }
@@ -1394,11 +1478,11 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, col
             else
             {
                 // calculate uvs and render
-                const cols = tileImage.width / tileSize.x |0;
-                const sX = (tileIndex%cols)*tileSize.x   + tileBleedShrinkFix;
-                const sY = (tileIndex/cols|0)*tileSize.y + tileBleedShrinkFix;
-                const sWidth  = tileSize.x - 2*tileBleedShrinkFix;
-                const sHeight = tileSize.y - 2*tileBleedShrinkFix;
+                const cols = tileImageSize.x / tileSize.x |0;
+                const sX = (tileIndex%cols)*tileSize.x   + tileFixBleedScale;
+                const sY = (tileIndex/cols|0)*tileSize.y + tileFixBleedScale;
+                const sWidth  = tileSize.x - 2*tileFixBleedScale;
+                const sHeight = tileSize.y - 2*tileFixBleedScale;
                 context.globalAlpha = color.a; // only alpha is supported
                 context.drawImage(tileImage, sX, sY, sWidth, sHeight, -.5, -.5, 1, 1);
             }
@@ -1406,41 +1490,44 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, col
     }
 }
 
-/** Draw colored untextured rect centered on pos
+/** Draw colored rect centered on pos
  *  @param {Vector2} pos
  *  @param {Vector2} [size=new Vector2(1,1)]
  *  @param {Color}   [color=new Color(1,1,1)]
  *  @param {Number}  [angle=0]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function drawRect(pos, size, color, angle)
+function drawRect(pos, size, color, angle, useWebGL)
 {
-    drawTile(pos, size, -1, defaultTileSize, color, angle);
+    drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
 }
 
 /** Draw textured tile centered on pos in screen space
- *  @param {Vector2} pos - Center of the tile
- *  @param {Vector2} [size=new Vector2(1,1)] - Size of the tile
- *  @param {Number}  [tileIndex=-1] - Tile index to use, negative is untextured
- *  @param {Vector2} [tileSize=defaultTileSize] - Tile size in source pixels
+ *  @param {Vector2} pos                        - Center of the tile
+ *  @param {Vector2} [size=new Vector2(1,1)]    - Size of the tile
+ *  @param {Number}  [tileIndex=-1]             - Tile index to use, negative is untextured
+ *  @param {Vector2} [tileSize=tileSizeDefault] - Tile size in source pixels
  *  @param {Color}   [color=new Color]
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [mirror=0]
  *  @param {Color}   [additiveColor=new Color(0,0,0,0)]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor)
+function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL)
 {
-    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor);
+    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL);
 }
 
-/** Draw colored untextured rectangle in screen space
+/** Draw colored rectangle in screen space
  *  @param {Vector2} pos
  *  @param {Vector2} [size=new Vector2(1,1)]
  *  @param {Color}   [color=new Color(1,1,1)]
  *  @param {Number}  [angle=0]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function drawRectScreenSpace(pos, size, color, angle)
+function drawRectScreenSpace(pos, size, color, angle, useWebGL)
 {
-    drawTileScreenSpace(pos, size, -1, defaultTileSize, color, angle);
+    drawTileSrceenSpace(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
 }
 
 /** Draw colored line between two points
@@ -1448,15 +1535,16 @@ function drawRectScreenSpace(pos, size, color, angle)
  *  @param {Vector2} posB
  *  @param {Number}  [thickness=.1]
  *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color)
+function drawLine(posA, posB, thickness=.1, color, useWebGL)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle());
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), 0, 0, useWebGL);
 }
 
-/** Draw directly to a 2d canvas context in world space (bipass webgl)
+/** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
  *  @param {Vector2}  size
  *  @param {Number}   angle
@@ -1472,7 +1560,7 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
     context.save();
     context.translate(pos.x+.5|0, pos.y-.5|0);
     context.rotate(angle);
-    context.scale(mirror?-size.x:size.x, size.y);
+    context.scale(mirror ? -size.x : size.x, size.y);
     drawFunction(context);
     context.restore();
 }
@@ -1486,7 +1574,7 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
  *  @param {Color}   [lineColor=new Color(0,0,0)]
  *  @param {String}  [textAlign='center']
  *  @memberof Draw */
-function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=defaultFont)
+function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
 {
     pos = worldToScreen(pos);
     overlayContext.font = size*cameraScale + 'px '+ font;
@@ -1502,12 +1590,13 @@ function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new
     overlayContext.fillText(text, pos.x, pos.y);
 }
 
-/** Enable additive or regular blend mode
+/** Enable normal or additive blend mode
  *  @param {Boolean} [additive=0]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function setBlendMode(additive)
+function setBlendMode(additive, useWebGL=glEnable)
 {
-    if (glEnable)
+    if (glEnable && useWebGL)
         glSetBlendMode(additive);
     else
         mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
@@ -1541,11 +1630,12 @@ function toggleFullscreen()
     }
 }
 /** 
- *  LittleJS Input System
- *  <br> - Tracks key down, pressed, and released
- *  <br> - Also tracks mouse buttons, position, and wheel
- *  <br> - Supports multiple gamepads
- *  @namespace Input
+ * LittleJS Input System
+ * <br> - Tracks key down, pressed, and released
+ * <br> - Also tracks mouse buttons, position, and wheel
+ * <br> - Supports multiple gamepads
+ * <br> - Virtual gamepad for touch devices with touchGamepadSize
+ * @namespace Input
  */
 
 'use strict';
@@ -1573,7 +1663,7 @@ const keyWasReleased = (key, device=0)=> inputData[device] && inputData[device][
 
 /** Clears all input
  *  @memberof Input */
-const clearInput = ()=> inputData[0] = [];
+const clearInput = ()=> inputData = [[]];
 
 /** Returns true if mouse button is down
  *  @param {Number} button
@@ -1609,7 +1699,7 @@ let mouseWheel = 0;
 
 /** Returns true if user is using gamepad (has more recently pressed a gamepad button)
  *  @memberof Input */
-let usingGamepad = 0;
+let isUsingGamepad = 0;
 
 /** Returns true if gamepad button is down
  *  @param {Number} button
@@ -1642,7 +1732,9 @@ const gamepadStick = (stick,  gamepad=0)=> stickData[gamepad] ? stickData[gamepa
 ///////////////////////////////////////////////////////////////////////////////
 // Input update called by engine
 
-const inputData = [[]];
+// store input as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
+// mouse and keyboard are stored together in device 0, gamepads are in devices > 0
+let inputData = [[]];
 
 function inputUpdate()
 {
@@ -1668,34 +1760,38 @@ function inputUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 // Keyboard event handlers
 
-onkeydown = e=>
+onkeydown = (e)=>
 {
     if (debug && e.target != document.body) return;
-    e.repeat || (inputData[usingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
+    e.repeat || (inputData[isUsingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
     debug || e.preventDefault();
 }
-onkeyup = e=>
+onkeyup = (e)=>
 {
     if (debug && e.target != document.body) return;
     inputData[0][remapKeyCode(e.keyCode)] = 4;
 }
-const remapKeyCode = c=> copyWASDToDpad ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
+const remapKeyCode = (c)=> inputWASDEmulateDirection ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Mouse event handlers
 
-onmousedown = e=> {inputData[usingGamepad = 0][e.button] = 3; onmousemove(e); e.button && e.preventDefault();}
-onmouseup   = e=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
-onmousemove = e=>
+onmousedown = (e)=> {inputData[isUsingGamepad = 0][e.button] = 3; onmousemove(e); e.button && e.preventDefault();}
+onmouseup   = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
+onmousemove = (e)=> mousePosScreen = mouseToScreen(e);
+onwheel = (e)=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
+oncontextmenu = (e)=> !1; // prevent right click menu
+
+// convert a mouse or touch event position to screen space
+const mouseToScreen = (mousePos)=>
 {
-    // convert mouse pos to canvas space
-    if (!mainCanvas) return;
+    if (!mainCanvas)
+        return vec2(); // fix bug that can occur if user clicks before page loads
+
     const rect = mainCanvas.getBoundingClientRect();
-    mousePosScreen.x = mainCanvasSize.x * percent(e.x, rect.right, rect.left);
-    mousePosScreen.y = mainCanvasSize.y * percent(e.y, rect.bottom, rect.top);
+    return mainCanvasSize.multiply(
+        vec2(percent(mousePos.x, rect.left, rect.right), percent(mousePos.y, rect.top, rect.bottom)));
 }
-onwheel = e=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
-oncontextmenu = e=> !1; // prevent right click menu
 
 ///////////////////////////////////////////////////////////////////////////////
 // Gamepad input
@@ -1703,6 +1799,21 @@ oncontextmenu = e=> !1; // prevent right click menu
 const stickData = [];
 function gamepadsUpdate()
 {
+    if (touchGamepadEnable && touchGamepadTimer.isSet())
+    {
+        // read virtual analog stick
+        const sticks = stickData[0] || (stickData[0] = []);
+        sticks[0] = vec2(touchGamepadStick.x, -touchGamepadStick.y); // flip vertical
+
+        // read virtual gamepad buttons
+        const data = inputData[1] || (inputData[1] = []);
+        for (let i=10; i--;)
+        {
+            const j = i == 3 ? 2 : i == 2 ? 3 : i; // fix button locations
+            data[j] = touchGamepadButtons[i] ? 1 + 2*!gamepadIsDown(j,0) : 4*gamepadIsDown(j,0);
+        }
+    }
+
     if (!gamepadsEnable || !navigator.getGamepads || !document.hasFocus() && !debug)
         return;
 
@@ -1720,8 +1831,8 @@ function gamepadsUpdate()
             // read clamp dead zone of analog sticks
             const deadZone = .3, deadZoneMax = .8;
             const applyDeadZone = (v)=> 
-                v >  deadZone ?  percent( v, deadZoneMax, deadZone) : 
-                v < -deadZone ? -percent(-v, deadZoneMax, deadZone) : 0;
+                v >  deadZone ?  percent( v, deadZone, deadZoneMax) : 
+                v < -deadZone ? -percent(-v, deadZone, deadZoneMax) : 0;
 
             // read analog sticks
             for (let j = 0; j < gamepad.axes.length-1; j+=2)
@@ -1732,10 +1843,11 @@ function gamepadsUpdate()
             {
                 const button = gamepad.buttons[j];
                 data[j] = button.pressed ? 1 + 2*!gamepadIsDown(j,i) : 4*gamepadIsDown(j,i);
-                usingGamepad |= !i && button.pressed;
+                isUsingGamepad |= !i && button.pressed;
+                touchGamepadEnable && touchGamepadTimer.unset(); // disable touch gamepad if using real gamepad
             }
-            
-            if (copyGamepadDirectionToStick)
+
+            if (gamepadDirectionEmulateStick)
             {
                 // copy dpad to left analog stick when pressed
                 const dpad = vec2(gamepadIsDown(15,i) - gamepadIsDown(14,i), gamepadIsDown(12,i) - gamepadIsDown(13,i));
@@ -1746,18 +1858,31 @@ function gamepadsUpdate()
     }
 }
 
+///////////////////////////////////////////////////////////////////////////////
+
+/** Pulse the vibration hardware if it exists
+ *  @param {Number} [pattern=100] - a single value in miliseconds or vibration interval array
+ *  @memberof Input */
+const vibrate = (pattern)=> vibrateEnable && Navigator.vibrate && Navigator.vibrate(pattern);
+
+/** Cancel any ongoing vibration
+ *  @memberof Input */
+const vibrateStop = ()=> vibrate(0);
+
 ///////////////////////////////////////////////////////////////////////////////
 // Touch input
 
 /** True if a touch device has been detected
  *  @const {boolean}
  *  @memberof Input */
-const isTouchDevice = touchInputEnable && window.ontouchstart !== undefined;
+const isTouchDevice = window.ontouchstart !== undefined;
+
+// try to enable touch mouse
 if (isTouchDevice)
 {
     // handle all touch events the same way
     let wasTouching, hadTouchInput;
-    ontouchstart = ontouchmove = ontouchend = e=>
+    ontouchstart = ontouchmove = ontouchend = (e)=>
     {
         e.button = 0; // all touches are left click
 
@@ -1782,31 +1907,158 @@ if (isTouchDevice)
         return !e.cancelable;
     }
 }
+
+///////////////////////////////////////////////////////////////////////////////
+// touch gamepad, virtual on screen gamepad emulator for touch devices
+
+// touch input internal variables
+let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2(), touchGamepadAnalog = 1;
+
+// create the touch gamepad, called automatically by the engine
+function touchGamepadCreate()
+{
+    if (!touchGamepadEnable || !isTouchDevice)
+        return;
+
+    ontouchstart = ontouchmove = ontouchend = (e)=> 
+    {
+        if (!touchGamepadEnable)
+            return;
+
+        // clear touch gamepad input
+        touchGamepadStick = vec2();
+        touchGamepadButtons = [];
+            
+        const touching = e.touches.length;
+        if (touching)
+        {
+            touchGamepadTimer.isSet() || zzfx(0) ; // fix mobile audio, force it to play a sound the first time
+
+            // set that gamepad is active
+            isUsingGamepad = 1;
+            touchGamepadTimer.set();
+
+            if (paused)
+            {
+                // touch anywhere to press start when paused
+                touchGamepadButtons[9] = 1;
+                return;
+            }
+        }
+
+        // get center of left and right sides
+        const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
+        const startCenter = mainCanvasSize.scale(.5);
+
+        // check each touch point
+        for (const touch of e.touches)
+        {
+            const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
+            if (touchPos.distance(stickCenter) < touchGamepadSize)
+            {
+                // virtual analog stick
+                if (touchGamepadAnalog)
+                    touchGamepadStick = touchPos.subtract(stickCenter).clampLength(touchGamepadSize/2).scale(2/touchGamepadSize);
+                else
+                {
+                    // 8 way dpad
+                    const angle = touchPos.subtract(stickCenter).angle();
+                    touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
+                }
+            }
+            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
+            {
+                // virtual face buttons
+                const button = touchPos.subtract(buttonCenter).direction();
+                touchGamepadButtons[button] = 1;
+            }
+            else if (touchPos.distance(startCenter) < touchGamepadSize)
+            {
+                // virtual start button in center
+                touchGamepadButtons[9] = 1;
+            }
+        }
+    }
+}
+
+// render the touch gamepad, called automatically by the engine
+function touchGamepadRender()
+{
+    if (!touchGamepadEnable || !touchGamepadTimer.isSet())
+        return;
+    
+    // fade off when not touching or paused
+    const alpha = percent(touchGamepadTimer.get(), 4, 3);
+    if (!alpha || paused)
+        return;
+
+    // setup the canvas
+    overlayContext.save();
+    overlayContext.globalAlpha = alpha*touchGamepadAlpha;
+    overlayContext.strokeStyle = '#fff';
+    overlayContext.lineWidth = 3;
+
+    // draw left analog stick
+    overlayContext.fillStyle = gamepadStick(0).length() > 0 ? '#fff' : '#000';
+    overlayContext.beginPath();
+    overlayContext.arc(touchGamepadSize, mainCanvasSize.y-touchGamepadSize, touchGamepadSize/2, 0,9);
+    overlayContext.fill();
+    overlayContext.stroke();
+
+    // draw right face buttons
+    const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    for (let i=4; i--;)
+    {
+        const pos = rightCenter.add((new Vector2).setAngle(i*PI/2, touchGamepadSize/2));
+        overlayContext.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
+        overlayContext.beginPath();
+        overlayContext.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);
+        overlayContext.fill();
+        overlayContext.stroke();
+    }
+
+    // set canvas back to normal
+    overlayContext.restore();
+}
 /** 
- *  LittleJS Audio System
- *  <br> - ZzFX Sound Effects and ZzFXM Music
- *  <br> - Caches sounds and music for fast playback
- *  <br> - Can attenuate and apply stereo panning to sounds
- *  <br> - Ability to play mp3, ogg, and wave files
- *  <br> - Speech synthesis wrapper functions
- *  @namespace Audio
+ * LittleJS Audio System
+ * <br> - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a>
+ * <br> - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a>
+ * <br> - Caches sounds and music for fast playback
+ * <br> - Can attenuate and apply stereo panning to sounds
+ * <br> - Ability to play mp3, ogg, and wave files
+ * <br> - Speech synthesis wrapper functions
  */
 
 'use strict';
 
-/** Sound Object - Stores a zzfx sound for later use and can be played positionally */
+/** 
+ * Sound Object - Stores a zzfx sound for later use and can be played positionally
+ * <br>
+ * <br><b><a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a></b>
+ * @example
+ * // create a sound
+ * const sound_example = new Sound([.5,.5]);
+ * 
+ * // play the sound
+ * sound_example.play();
+ */
 class Sound
 {
     /** Create a sound object and cache the zzfx samples for later use
      *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
-     *  @param {Number} [range=defaultSoundRange] - World space max range of sound, will not play if camera is farther away
-     *  @param {Number} [taper=defaultSoundTaper] - At what percentage of range should it start tapering off
+     *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
+     *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
      */
-    constructor(zzfxSound, range=defaultSoundRange, taper=defaultSoundTaper)
+    constructor(zzfxSound, range=soundDefaultRange, taper=soundDefaultTaper)
     {
         if (!soundEnable) return;
 
+        /** @property {Number} - World space max range of sound, will not play if camera is farther away */
         this.range = range;
+
+        /** @property {Number} - At what percentage of range should it start tapering off */
         this.taper = taper;
 
         // get randomness from sound parameters
@@ -1840,7 +2092,7 @@ class Sound
                     return; // out of range
 
                 // attenuate volume by distance
-                volume *= percent(lengthSquared**.5, range*this.taper, range);
+                volume *= percent(lengthSquared**.5, range, range*this.taper);
             }
 
             // get pan from screen space coords
@@ -1866,7 +2118,36 @@ class Sound
     }
 }
 
-/** Music Object - Stores a zzfx music track for later use */
+/**
+ * Music Object - Stores a zzfx music track for later use
+ * <br>
+ * <br><b><a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a></b>
+ * @example
+ * // create some music
+ * const music_example = new Music(
+ * [
+ *     [                         // instruments
+ *       [,0,400]                // simple note
+ *     ], 
+ *     [                         // patterns
+ *         [                     // pattern 1
+ *             [                 // channel 0
+ *                 0, -1,        // instrument 0, left speaker
+ *                 1, 0, 9, 1    // channel notes
+ *             ], 
+ *             [                 // channel 1
+ *                 0, 1,         // instrument 1, right speaker
+ *                 0, 12, 17, -1 // channel notes
+ *             ]
+ *         ],
+ *     ],
+ *     [0, 0, 0, 0], // sequence, play pattern 0 four times
+ *     90            // BPM
+ * ]);
+ * 
+ * // play the music
+ * music_example.play();
+ */
 class Music
 {
     /** Create a music object and cache the zzfx music samples for later use
@@ -1903,7 +2184,7 @@ function playAudioFile(url, volume=1, loop=1)
     if (!soundEnable) return;
 
     const audio = new Audio(url);
-    audio.volume = audioVolume * volume;
+    audio.volume = soundVolume * volume;
     audio.loop = loop;
     audio.play();
     return audio;
@@ -1928,7 +2209,7 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
     // build utterance and speak
     const utterance = new SpeechSynthesisUtterance(text);
     utterance.lang = language;
-    utterance.volume = 2*volume*audioVolume;
+    utterance.volume = 2*volume*soundVolume;
     utterance.rate = rate;
     utterance.pitch = pitch;
     speechSynthesis.speak(utterance);
@@ -1937,7 +2218,7 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
 
 /** Stop all queued speech
  *  @memberof Audio */
-const stopSpeech = ()=> speechSynthesis && speechSynthesis.cancel();
+const speakStop = ()=> speechSynthesis && speechSynthesis.cancel();
 
 /** Get frequency of a note on a musical scale
  *  @param {Number} semitoneOffset - How many semitones away from the root note
@@ -1968,6 +2249,13 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     if (!audioContext)
         audioContext = new (window.AudioContext||webkitAudioContext);
 
+    // fix stalled audio
+    audioContext.resume();
+
+    // prevent sounds from building up if they can't be played
+    if (audioContext.state != 'running')
+        return;
+
     // create buffer and source
     const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR), 
         source = audioContext.createBufferSource();
@@ -1978,11 +2266,18 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     source.playbackRate.value = rate;
     source.loop = loop;
 
-    // create pan and gain nodes
-    source
-        .connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, 1, -1)}))
-        .connect(new GainNode(audioContext, {'gain':audioVolume*volume}))
-        .connect(audioContext.destination);
+    // create and connect gain node (createGain is more widley spported then GainNode construtor)
+    const gainNode = audioContext.createGain();
+    gainNode.gain.value = soundVolume*volume;
+    gainNode.connect(audioContext.destination);
+
+    // connect source to gain
+    (
+        window.StereoPannerNode ? // create pan node if possible
+        source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)}))
+        : source
+    )
+    .connect(gainNode);
 
     // play and return sound
     source.start();
@@ -1993,6 +2288,8 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 // ZzFXMicro - Zuper Zmall Zound Zynth - v1.1.8 by Frank Force
 
 /** Generate and play a ZzFX sound
+ *  <br>
+ *  <br><b><a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a></b>
  *  @param {Array} zzfxSound - Array of ZzFX parameters, ex. [.5,.5]
  *  @return {Array} - Array of audio samples
  *  @memberof Audio */
@@ -2049,7 +2346,7 @@ function zzfxG
                     1 - tremolo + tremolo*Math.sin(PI2*i/repeatTime) // tremolo
                     : 1) *
                 sign(s)*(abs(s)**shapeCurve) *       // curve 0=square, 2=pointy
-                volume * audioVolume * (                  // envelope
+                volume * soundVolume * (                  // envelope
                 i < attack ? i/attack :                   // attack
                 i < attack + decay ?                      // decay
                 1-((i-attack)/decay)*(1-sustainVolume) :  // decay falloff
@@ -2195,27 +2492,31 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
   return [leftChannelBuffer, rightChannelBuffer];
 }
 /** 
- *  LittleJS Tile Layer System
- *  <br> - Caches arrays of tiles to offscreen canvas for fast rendering
- *  <br> - Unlimted numbers of layers, allocates canvases as needed
- *  <br> - Interfaces with EngineObject for collision
- *  <br> - Collision layer is separate from visible layers
- *  <br> - Tile layers can be drawn to using their context with canvas2d
- *  <br> - It is recommended to have a visible layer that matches the collision
- *  @namespace TileLayer
+ * LittleJS Tile Layer System
+ * <br> - Caches arrays of tiles to off screen canvas for fast rendering
+ * <br> - Unlimted numbers of layers, allocates canvases as needed
+ * <br> - Interfaces with EngineObject for collision
+ * <br> - Collision layer is separate from visible layers
+ * <br> - It is recommended to have a visible layer that matches the collision
+ * <br> - Tile layers can be drawn to using their context with canvas2d
+ * <br> - Drawn directly to the main canvas without using WebGL
+ * @namespace TileCollision
  */
 
 'use strict';
 
-///////////////////////////////////////////////////////////////////////////////
-// Tile Collision
+/** The tile collision layer array, use setTileCollisionData and getTileCollisionData to access
+ *  @memberof TileCollision */
+let tileCollision = [];
 
-// Internal variables not exposed to documentation
-let tileCollision = [], tileCollisionSize = vec2();
+/** Size of the tile collision layer
+ *  @type {Vector2} 
+ *  @memberof TileCollision */
+let tileCollisionSize = vec2();
 
 /** Clear and initialize tile collision
  *  @param {Vector2} size
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 function initTileCollision(size)
 {
     tileCollisionSize = size;
@@ -2227,14 +2528,14 @@ function initTileCollision(size)
 /** Set tile collision data
  *  @param {Vector2} pos
  *  @param {Number}  [data=0]
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 const setTileCollisionData = (pos, data=0)=>
     pos.arrayCheck(tileCollisionSize) && (tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
 
 /** Get tile collision data
  *  @param {Vector2} pos
  *  @return {Number}
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 const getTileCollisionData = (pos)=>
     pos.arrayCheck(tileCollisionSize) ? tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] : 0;
 
@@ -2243,13 +2544,13 @@ const getTileCollisionData = (pos)=>
  *  @param {Vector2}      [size=new Vector2(1,1)]
  *  @param {EngineObject} [object]
  *  @return {Boolean}
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 function tileCollisionTest(pos, size=vec2(), object)
 {
-    const minX = max(Math.floor(pos.x - size.x/2), 0);
-    const minY = max(Math.floor(pos.y - size.y/2), 0);
-    const maxX = min(pos.x + size.x/2, tileCollisionSize.x-1);
-    const maxY = min(pos.y + size.y/2, tileCollisionSize.y-1);
+    const minX = max(pos.x - size.x/2|0, 0);
+    const minY = max(pos.y - size.y/2|0, 0);
+    const maxX = min(pos.x + size.x/2, tileCollisionSize.x);
+    const maxY = min(pos.y + size.y/2, tileCollisionSize.y);
     for (let y = minY; y < maxY; ++y)
     for (let x = minX; x < maxX; ++x)
     {
@@ -2264,7 +2565,7 @@ function tileCollisionTest(pos, size=vec2(), object)
  *  @param {Vector2}      posEnd
  *  @param {EngineObject} [object]
  *  @return {Vector2}
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 function tileCollisionRaycast(posStart, posEnd, object)
 {
     // test if a ray collides with tiles from start to end
@@ -2298,23 +2599,32 @@ function tileCollisionRaycast(posStart, posEnd, object)
 ///////////////////////////////////////////////////////////////////////////////
 // Tile Layer Rendering System
 
-// Reuse canvas autmatically when destroyed
-const tileLayerCanvasCache = [];
-
-/** Tile layer data object stores info about how to render a tile */
+/**
+ * Tile layer data object stores info about how to render a tile
+ * @example
+ * // create tile layer data with tile index 0 and random orientation and color
+ * const tileIndex = 0;
+ * const direction = randInt(4)
+ * const mirror = randInt(2);
+ * const color = randColor();
+ * const data = new TileLayerData(tileIndex, direction, mirror, color);
+ */
 class TileLayerData
 {
-    /** Create a tile layer data object
-     *  @param {Number}  [tile] - The tile to use, untextured if undefined
-     *  @param {Number}  [direction=0] - Integer direction of tile, in 90 degree increments
-     *  @param {Boolean} [mirror=0] - If the tile should be mirrored along the x axis
-     *  @param {Color}   [color=new Color(1,1,1)] - Color of the tile
-     */
+    /** 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}  [direction=0]            - Integer direction of tile, in 90 degree increments
+     *  @param {Boolean} [mirror=0]               - If the tile should be mirrored along the x axis
+     *  @param {Color}   [color=new Color(1,1,1)] - Color of the tile */
     constructor(tile, direction=0, mirror=0, color=new Color)
     {
+        /** @property {Number}  - The tile to use, untextured if undefined */
         this.tile      = tile;
+        /** @property {Number}  - Integer direction of tile, in 90 degree increments */
         this.direction = direction;
+        /** @property {Boolean} - If the tile should be mirrored along the x axis */
         this.mirror    = mirror;
+        /** @property {Color}   - Color of the tile */
         this.color     = color;
     }
 
@@ -2322,44 +2632,49 @@ class TileLayerData
     clear() { this.tile = this.direction = this.mirror = 0; color = new Color; }
 }
 
-/** Tile layer object - cached rendering system for tile layers */
+/**
+ * Tile layer object - cached rendering system for tile layers
+ * <br> - Each Tile layer is rendered to an off screen canvas
+ * <br> - To allow dynamic modifications, layers are rendered using canvas 2d
+ * <br> - Some devices like mobile phones are limited to 4k texture resolution
+ * <br> - So with 16x16 tiles this limits layers to 256x256 on mobile devices
+ * @extends EngineObject
+ * @example
+ * // create tile collision and visible tile layer
+ * initTileCollision(vec2(200,100));
+ * const tileLayer = new TileLayer();
+ */
 class TileLayer extends EngineObject
 {
-    /** Create a tile layer data object
+    /** Create a tile layer object
      *  @param {Vector2} [position=new Vector2(0,0)] - World space position
-     *  @param {Vector2} [size=defaultObjectSize] - World space size
-     *  @param {Vector2} [scale=new Vector2(1,1)] - How much to scale this in world space
-     *  @param {Number}  [renderOrder=0] - Objects sorted by renderOrder before being rendered
+     *  @param {Vector2} [size=objectDefaultSize]    - World space size
+     *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tiles in source pixels
+     *  @param {Vector2} [scale=new Vector2(1,1)]    - How much to scale this layer when rendered
+     *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
      */
-    constructor(pos, size, scale=vec2(1), renderOrder=0)
+    constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
     {
-        super(pos, size);
+        super(pos, size, -1, tileSize, 0, undefined, renderOrder);
 
-        // create new canvas if necessary
-        this.canvas = tileLayerCanvasCache.length ? tileLayerCanvasCache.pop() : document.createElement('canvas');
+        /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
+        this.canvas = document.createElement('canvas');
+        /** @property {CanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
         this.context = this.canvas.getContext('2d');
+        /** @property {Vector2}                  - How much to scale this layer when rendered */
         this.scale = scale;
-        this.tileSize = defaultTileSize.copy();
-        this.renderOrder = renderOrder;
-        this.flushGLBeforeRender = 1;
+        /** @property {Boolean} [isOverlay=0]    - If true this layer will render to overlay canvas and appear above all objects */
+        this.isOverlay;
 
         // init tile data
         this.data = [];
         for (let j = this.size.area(); j--;)
             this.data.push(new TileLayerData());
     }
-
-    /** Destroy this tile layer */
-    destroy()
-    {
-        // add canvas back to the cache
-        tileLayerCanvasCache.push(this.canvas);
-        super.destroy();
-    }
     
     /** Set data at a given position in the array 
-     *  @param {Vector2}       position - Local position in array
-     *  @param {TileLayerData} data - Data to set
+     *  @param {Vector2}       position   - Local position in array
+     *  @param {TileLayerData} data       - Data to set
      *  @param {Boolean}       [redraw=0] - Force the tile to redraw if true */
     setData(layerPos, data, redraw)
     {
@@ -2384,50 +2699,48 @@ class TileLayer extends EngineObject
     {
         ASSERT(mainContext != this.context); // must call redrawEnd() after drawing tiles
 
-        // flush and copy gl canvas because tile canvas does not use gl
-        this.flushGLBeforeRender && glEnable && glCopyToContext(mainContext);
+        // flush and copy gl canvas because tile canvas does not use webgl
+        glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
         
-        // draw the entire cached level onto the main canvas
+        // draw the entire cached level onto the canvas
         const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
-        mainContext.drawImage
+        (this.isOverlay ? overlayContext : mainContext).drawImage
         (
             this.canvas, pos.x, pos.y,
             cameraScale*this.size.x*this.scale.x, cameraScale*this.size.y*this.scale.y
         );
     }
 
-    /** Draw all the tile data to an offscreen canvas using webgl if possible */
+    /** Draw all the tile data to an offscreen canvas 
+     *  - This may be slow in some browsers
+    */
     redraw()
     {
-        this.redrawStart();
+        this.redrawStart(1);
         this.drawAllTileData();
         this.redrawEnd();
     }
 
     /** Call to start the redraw process
-     *  @param {Boolean} [clear=1] - Should it clear the canvas before drawing */
-    redrawStart(clear = 1)
+     *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
+    redrawStart(clear = 0)
     {
-        // clear and set size
-        const width  = this.size.x * this.tileSize.x;
-        const height = this.size.y * this.tileSize.y;
         if (clear)
         {
-            this.canvas.width  = width;
-            this.canvas.height = height;
+            // clear and set size
+            this.canvas.width  = this.size.x * this.tileSize.x;
+            this.canvas.height = this.size.y * this.tileSize.y;
         }
 
         // save current render settings
-        this.savedRenderSettings = [mainCanvasSize, mainCanvas, mainContext, cameraScale, cameraPos];
+        this.savedRenderSettings = [mainCanvas, mainContext, cameraPos, cameraScale];
 
-        // set camera transform for renering
-        cameraScale = this.tileSize.x;
-        cameraPos = this.size.scale(.5);
+        // use normal rendering system to render the tiles
         mainCanvas = this.canvas;
         mainContext = this.context;
-        mainContext.imageSmoothingEnabled = !pixelated; // disable smoothing for pixel art
-        mainCanvasSize = vec2(width, height);
-        glPreRender(width, height);
+        cameraPos = this.size.scale(.5);
+        cameraScale = this.tileSize.x;
+        enginePreRender();
     }
 
     /** Call to end the redraw process */
@@ -2438,7 +2751,7 @@ class TileLayer extends EngineObject
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal
-        [mainCanvasSize, mainCanvas, mainContext, cameraScale, cameraPos] = this.savedRenderSettings;
+        [mainCanvas, mainContext, cameraPos, cameraScale] = this.savedRenderSettings;
     }
 
     /** Draw the tile at a given position
@@ -2466,13 +2779,13 @@ class TileLayer extends EngineObject
              this.drawTileData(vec2(x,y));
     }
 
-    /** Draw directly to the 2d canvas in world space (bipass webgl)
+    /** Draw directly to the 2D canvas in world space (bipass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
-     *  @param {Number}   angle
-     *  @param {Boolean}  mirror
+     *  @param {Number}   [angle=0]
+     *  @param {Boolean}  [mirror=0]
      *  @param {Function} drawFunction */
-    drawCanvas2D(pos, size, angle, mirror, drawFunction)
+    drawCanvas2D(pos, size, angle=0, mirror, drawFunction)
     {
         const context = this.context;
         context.save();
@@ -2480,7 +2793,7 @@ class TileLayer extends EngineObject
         size = size.multiply(this.tileSize);
         context.translate(pos.x, this.canvas.height - pos.y);
         context.rotate(angle);
-        context.scale(mirror?-size.x:size.x, size.y);
+        context.scale(mirror ? -size.x : size.x, size.y);
         drawFunction(context);
         context.restore();
     }
@@ -2489,11 +2802,11 @@ class TileLayer extends EngineObject
      *  @param {Vector2} pos
      *  @param {Vector2} [size=new Vector2(1,1)]
      *  @param {Number}  [tileIndex=-1]
-     *  @param {Vector2} [tileSize=defaultTileSize]
+     *  @param {Vector2} [tileSize=tileSizeDefault]
      *  @param {Color}   [color=new Color(1,1,1)]
      *  @param {Number}  [angle=0]
      *  @param {Boolean} [mirror=0] */
-    drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, color=new Color, angle=0, mirror)
+    drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle, mirror)
     {
         this.drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
@@ -2506,7 +2819,7 @@ class TileLayer extends EngineObject
             else
             {
                 const cols = tileImage.width/tileSize.x;
-                context.globalAlpha = color.a; // full color not supported in this mode
+                context.globalAlpha = color.a; // only alpha, no color, is supported in this mode
                 context.drawImage(tileImage, 
                     (tileIndex%cols)*tileSize.x, (tileIndex/cols|0)*tileSize.x, 
                     tileSize.x, tileSize.y, -.5, -.5, 1, 1);
@@ -2519,7 +2832,7 @@ class TileLayer extends EngineObject
      *  @param {Vector2} [size=new Vector2(1,1)]
      *  @param {Color}   [color=new Color(1,1,1)]
      *  @param {Number}  [angle=0] */
-    drawRect(pos, size, color, angle) { this.drawTile(pos, size, -1, 0, color, angle, 0); }
+    drawRect(pos, size, color, angle) { this.drawTile(pos, size, -1, 0, color, angle); }
 }
 /*
     LittleJS Particle System
@@ -2532,37 +2845,50 @@ class TileLayer extends EngineObject
 
 /**
  * Particle Emitter - Spawns particles with the given settings
+ * @extends EngineObject
+ * @example
+ * // create a particle emitter
+ * let pos = vec2(2,3);
+ * let particleEmiter = new ParticleEmitter
+ * (
+ *     pos, 1, 0, 500, PI,  // pos, emitSize, emitTime, emitRate, emiteCone
+ *     0, vec2(16),                            // tileIndex, tileSize
+ *     new Color, new Color(0,0,0),            // colorStartA, colorStartB
+ *     new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
+ *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
+ *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
+ *     .5, 1                // randomness, collide, additive, randomColorLinear, renderOrder
+ * );
  */
 class ParticleEmitter extends EngineObject
 {
-    /**
-     * Create a particle system with the given settings
-     * @param {Vector2} position          - World space position of the emitter
-     * @param {Number}  [emitSize=0]       - World space size of the emitter (float for circle diameter, vec2 for rect)
-     * @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
-     * @param {Number}  [emitRate=100]     - How many particles per second to spawn
-     * @param {Number}  [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
-     * @param {Number}  [tileIndex=-1]     - Index into tile sheet, if <0 no texture is applied
-     * @param {Number}  [tileSize=defaultTileSize]    - Tile size for particles
-     * @param {Color}   [colorStartA=new Color(1,1,1)] - Color at start of life 1, randomized between start colors
-     * @param {Color}   [colorStartB=new Color(1,1,1)] - Color at start of life 2, randomized between start colors
-     * @param {Color}   [colorEndA=new Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
-     * @param {Color}   [colorEndB=new Color(1,1,1,0)] - Color at end of life 2, randomized between end colors
-     * @param {Number}  [particleTime=.5]      - How long particles live
-     * @param {Number}  [sizeStart=.1]         - How big are particles at start
-     * @param {Number}  [sizeEnd=1]            - How big are particles at end
-     * @param {Number}  [speed=.1]             - How fast are particles when spawned
-     * @param {Number}  [angleSpeed=.05]       - How fast are particles rotating
-     * @param {Number}  [damping=1]            - How much to dampen particle speed
-     * @param {Number}  [angleDamping=1]       - How much to dampen particle angular speed
-     * @param {Number}  [gravityScale=0]       - How much does gravity effect particles
-     * @param {Number}  [particleConeAngle=PI] - Cone for start particle angle
-     * @param {Number}  [fadeRate=.1]          - How quick to fade in particles at start/end in percent of life
-     * @param {Number}  [randomness=.2]        - Apply extra randomness percent
-     * @param {Boolean} [collideTiles=0]      - Do particles collide against tiles
-     * @param {Boolean} [additive=0]          - Should particles use addtive blend
-     * @param {Boolean} [randomColorLinear=0] - Should color be randomized linearly or across each component
-     * @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
+    /** Create a particle system with the given settings
+     *  @param {Vector2} position           - World space position of the emitter
+     *  @param {Number}  [emitSize=0]       - World space size of the emitter (float for circle diameter, vec2 for rect)
+     *  @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
+     *  @param {Number}  [emitRate=100]     - 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}  [tileIndex=-1]     - Index into tile sheet, if <0 no texture is applied
+     *  @param {Number}  [tileSize=tileSizeDefault]     - Tile size for particles
+     *  @param {Color}   [colorStartA=new Color(1,1,1)] - Color at start of life 1, randomized between start colors
+     *  @param {Color}   [colorStartB=new Color(1,1,1)] - Color at start of life 2, randomized between start colors
+     *  @param {Color}   [colorEndA=new Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
+     *  @param {Color}   [colorEndB=new Color(1,1,1,0)] - Color at end of life 2, randomized between end colors
+     *  @param {Number}  [particleTime=.5]      - How long particles live
+     *  @param {Number}  [sizeStart=.1]         - How big are particles at start
+     *  @param {Number}  [sizeEnd=1]            - How big are particles at end
+     *  @param {Number}  [speed=.1]             - How fast are particles when spawned
+     *  @param {Number}  [angleSpeed=.05]       - How fast are particles rotating
+     *  @param {Number}  [damping=1]            - How much to dampen particle speed
+     *  @param {Number}  [angleDamping=1]       - How much to dampen particle angular speed
+     *  @param {Number}  [gravityScale=0]       - How much does gravity effect particles
+     *  @param {Number}  [particleConeAngle=PI] - Cone for start particle angle
+     *  @param {Number}  [fadeRate=.1]          - How quick to fade in particles at start/end in percent of life
+     *  @param {Number}  [randomness=.2]        - Apply extra randomness percent
+     *  @param {Boolean} [collideTiles=0]       - Do particles collide against tiles
+     *  @param {Boolean} [additive=0]           - Should particles use addtive blend
+     *  @param {Boolean} [randomColorLinear=1]  - Should color be randomized linearly or across each component
+     *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
      */
     constructor
     ( 
@@ -2572,7 +2898,7 @@ class ParticleEmitter extends EngineObject
         emitRate = 100,
         emitConeAngle = PI,
         tileIndex = -1,
-        tileSize = defaultTileSize,
+        tileSize = tileSizeDefault,
         colorStartA = new Color,
         colorStartB = new Color,
         colorEndA = new Color(1,1,1,0),
@@ -2594,37 +2920,61 @@ class ParticleEmitter extends EngineObject
         renderOrder = additive ? 1e9 : 0
     )
     {
-        super(pos, new Vector2, tileIndex, tileSize);
+        super(pos, new Vector2, tileIndex, tileSize, 0, undefined, renderOrder);
 
         // emitter settings
+        /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */
         this.emitSize = emitSize
+        /** @property {Number} - How long to stay alive (0 is forever) */
         this.emitTime = emitTime;
+        /** @property {Number} - How many particles per second to spawn, does not emit if 0 */
         this.emitRate = emitRate;
+        /** @property {Number} - Local angle to apply velocity to particles from emitter */
         this.emitConeAngle = emitConeAngle;
 
         // color settings
+        /** @property {Color} - Color at start of life 1, randomized between start colors */
         this.colorStartA = colorStartA;
+        /** @property {Color} - Color at start of life 2, randomized between start colors */
         this.colorStartB = colorStartB;
+        /** @property {Color} - Color at end of life 1, randomized between end colors */
         this.colorEndA   = colorEndA;
+        /** @property {Color} - Color at end of life 2, randomized between end colors */
         this.colorEndB   = colorEndB;
+        /** @property {Boolean} - Should color be randomized linearly or across each component */
         this.randomColorLinear = randomColorLinear;
 
         // particle settings
+        /** @property {Number} - How long particles live */
         this.particleTime      = particleTime;
+        /** @property {Number} -  How big are particles at start */
         this.sizeStart         = sizeStart;
+        /** @property {Number} - How big are particles at end */
         this.sizeEnd           = sizeEnd;
+        /** @property {Number} - How fast are particles when spawned */
         this.speed             = speed;
+        /** @property {Number} - How fast are particles rotating */
         this.angleSpeed        = angleSpeed;
+        /** @property {Number} - How much to dampen particle speed */
         this.damping           = damping;
+        /** @property {Number} - How much to dampen particle angular speed */
         this.angleDamping      = angleDamping;
+        /** @property {Number} - How much does gravity effect particles */
         this.gravityScale      = gravityScale;
+        /** @property {Number} - Cone for start particle angle */
         this.particleConeAngle = particleConeAngle;
+        /** @property {Number} - How quick to fade in particles at start/end in percent of life */
         this.fadeRate          = fadeRate;
+        /** @property {Number} - Apply extra randomness percent */
         this.randomness        = randomness;
+        /** @property {Number} - Do particles collide against tiles */
         this.collideTiles      = collideTiles;
+        /** @property {Number} - Should particles use addtive blend */
         this.additive          = additive;
-        this.renderOrder       = renderOrder;
-        this.trailScale        =  
+        /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
+        this.trailScale        = 0;
+
+        // internal variables
         this.emitTimeBuffer    = 0;
     }
     
@@ -2638,9 +2988,9 @@ class ParticleEmitter extends EngineObject
         if (!this.emitTime || this.getAliveTime() <= this.emitTime)
         {
             // emit particles
-            if (this.emitRate)
+            if (this.emitRate * particleEmitRateScale)
             {
-                const rate = 1/this.emitRate;
+                const rate = 1/this.emitRate/particleEmitRateScale;
                 for (this.emitTimeBuffer += timeDelta; this.emitTimeBuffer > 0; this.emitTimeBuffer -= rate)
                     this.emitParticle();
             }
@@ -2667,34 +3017,34 @@ class ParticleEmitter extends EngineObject
         const randomizeScale = (v)=> v + v*rand(randomness, -randomness);
 
         // randomize particle settings
-        const particleTime  = randomizeScale(this.particleTime);
-        const sizeStart     = randomizeScale(this.sizeStart);
-        const sizeEnd       = randomizeScale(this.sizeEnd);
-        const speed         = randomizeScale(this.speed);
-        const angleSpeed    = randomizeScale(this.angleSpeed) * randSign();
-        const coneAngle     = rand(this.emitConeAngle, -this.emitConeAngle);
-        const colorStart    = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
-        const colorEnd      = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
+        const particleTime = randomizeScale(this.particleTime);
+        const sizeStart    = randomizeScale(this.sizeStart);
+        const sizeEnd      = randomizeScale(this.sizeEnd);
+        const speed        = randomizeScale(this.speed);
+        const angleSpeed   = randomizeScale(this.angleSpeed) * randSign();
+        const coneAngle    = rand(this.emitConeAngle, -this.emitConeAngle);
+        const colorStart   = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
+        const colorEnd     = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
 
         // build particle settings
-        particle.colorStart      = colorStart;
-        particle.colorEndDelta   = colorEnd.subtract(colorStart);
-        particle.velocity        = (new Vector2).setAngle(this.angle + coneAngle, speed);
-        particle.angleVelocity   = angleSpeed;
-        particle.lifeTime        = particleTime;
-        particle.sizeStart       = sizeStart;
-        particle.sizeEndDelta    = sizeEnd - sizeStart;
-        particle.fadeRate        = this.fadeRate;
-        particle.damping         = this.damping;
-        particle.angleDamping    = this.angleDamping;
-        particle.elasticity      = this.elasticity;
-        particle.friction        = this.friction;
-        particle.gravityScale    = this.gravityScale;
-        particle.collideTiles    = this.collideTiles;
-        particle.additive        = this.additive;
-        particle.renderOrder     = this.renderOrder;
-        particle.trailScale      = this.trailScale;
-        particle.mirror          = rand()<.5;
+        particle.colorStart    = colorStart;
+        particle.colorEndDelta = colorEnd.subtract(colorStart);
+        particle.velocity      = (new Vector2).setAngle(this.angle + coneAngle, speed);
+        particle.angleVelocity = angleSpeed;
+        particle.lifeTime      = particleTime;
+        particle.sizeStart     = sizeStart;
+        particle.sizeEndDelta  = sizeEnd - sizeStart;
+        particle.fadeRate      = this.fadeRate;
+        particle.damping       = this.damping;
+        particle.angleDamping  = this.angleDamping;
+        particle.elasticity    = this.elasticity;
+        particle.friction      = this.friction;
+        particle.gravityScale  = this.gravityScale;
+        particle.collideTiles  = this.collideTiles;
+        particle.additive      = this.additive;
+        particle.renderOrder   = this.renderOrder;
+        particle.trailScale    = this.trailScale;
+        particle.mirror        = rand()<.5;
 
         // setup callbacks for particles
         particle.destroyCallback = this.particleDestroyCallback;
@@ -2711,15 +3061,16 @@ class ParticleEmitter extends EngineObject
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * Particle Object - Created automatically by Particle Emitters
+ * @extends EngineObject
  */
 class Particle extends EngineObject
 {
     /**
      * Create a particle with the given settings
      * @param {Vector2} position                   - World space position of the particle
-     * @param {Number}  [tileIndex=-1]              - Tile to use to render, untextured if -1
-     * @param {Vector2} [tileSize=defaultTileSize] - Size of tile in source pixels
-     * @param {Number}  [angle=0]                   - Angle to rotate the particle
+     * @param {Number}  [tileIndex=-1]             - Tile to use to render, untextured if -1
+     * @param {Vector2} [tileSize=tileSizeDefault] - Size of tile in source pixels
+     * @param {Number}  [angle=0]                  - Angle to rotate the particle
      */
     constructor(pos, tileIndex, tileSize, angle) { super(pos, new Vector2, tileIndex, tileSize, angle); }
 
@@ -2766,11 +3117,11 @@ class Particle extends EngineObject
     }
 }
 /** 
- *  LittleJS Medal System
- *  <br> - Tracks and displays medals
- *  <br> - Saves medals to local storage
- *  <br> - Newgrounds and OS13k integration
- *  @namespace Medals
+ * LittleJS Medal System
+ * <br> - Tracks and displays medals
+ * <br> - Saves medals to local storage
+ * <br> - Newgrounds and OS13k integration
+ * @namespace Medals
  */
 
 'use strict';
@@ -2789,32 +3140,42 @@ let medalsPreventUnlock;
 let newgrounds;
 
 // Engine internal variables not exposed to documentation
-let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimer;
+let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimeLast;
 
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Initialize medals with a save name used for storage
- *  <br> - Checks if medals are unlocked
  *  <br> - Call this after creating all medals
+ *  <br> - Checks if medals are unlocked
  *  @param {String} saveName
  *  @memberof Medals */
 function medalsInit(saveName)
 {
     // check if medals are unlocked
     medalsSaveName = saveName;
-    debugMedals || medals.forEach(medal=> medal.unlocked = localStorage[medal.storageKey()]);
+    debugMedals || medals.forEach(medal=> medal.unlocked = 1 || localStorage[medal.storageKey()]);
 }
 
-/** Medal Object - Tracks an unlockable medal */
+/** 
+ * Medal Object - Tracks an unlockable medal 
+ * @example
+ * // create a medal
+ * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
+ * 
+ * // initialize medals
+ * medalsInit('Example Game');
+ * 
+ * // unlock the medal
+ * medal_example.unlock();
+ */
 class Medal
 {
-    /**
-     * Create an 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
+    /** Create an 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
      */
     constructor(id, name, description='', icon='🏆', src)
     {
@@ -2825,13 +3186,9 @@ class Medal
         this.name = name;
         this.description = description;
         this.icon = icon;
-
+        this.image = new Image();
         if (src)
-        {
-            // load image
-            this.image = new Image();
             this.image.src = src;
-        }
     }
 
     /** Unlocks a medal if not already unlocked */
@@ -2841,7 +3198,7 @@ class Medal
             return;
 
         // save the medal
-        ASSERT(medalsSaveName); // game name must be set
+        ASSERT(medalsSaveName); // save name must be set
         localStorage[this.storageKey()] = this.unlocked = 1;
         medalsDisplayQueue.push(this);
 
@@ -2856,27 +3213,28 @@ class Medal
     render(hidePercent=0)
     {
         const context = overlayContext;
-        const x = overlayCanvas.width - medalDisplayWidth;
+        const width = min(medalDisplayWidth, mainCanvas.width);
+        const x = overlayCanvas.width - width;
         const y = -medalDisplayHeight*hidePercent;
 
         // draw containing rect and clip to that region
         context.save();
         context.beginPath();
         context.fillStyle = '#ddd'
-        context.fill(context.rect(x, y, medalDisplayWidth, medalDisplayHeight));
-        context.strokeStyle = context.fillStyle = '#000';
-        context.lineWidth = 2; 
+        context.fill(context.rect(x, y, width, medalDisplayHeight));
+        context.strokeStyle = '#000';
+        context.lineWidth = 3;
         context.stroke();
         context.clip();
 
+        // draw the icon and text
         this.renderIcon(x+15+medalDisplayIconSize/2, y+medalDisplayHeight/2);
-
-        // draw the text
         context.textAlign = 'left';
-        context.font = '3em '+ defaultFont;
-        context.fillText(this.name, x+medalDisplayIconSize+25, y+35);
-        context.font = '1.5em '+ defaultFont;
-        context.restore(context.fillText(this.description, x+medalDisplayIconSize+25, y+70));
+        context.font = '38px '+ fontDefault;
+        context.fillText(this.name, x+medalDisplayIconSize+30, y+28);
+        context.font = '24px '+ fontDefault;
+        context.fillText(this.description, x+medalDisplayIconSize+30, y+60);
+        context.restore();
     }
 
     /** Render the icon for a medal
@@ -2888,21 +3246,18 @@ class Medal
     {
         // draw the image or icon
         const context = overlayContext;
+        context.fillStyle = '#000';
         context.textAlign = 'center';
         context.textBaseline = 'middle';
-        context.font = size*.6 + 'px '+ defaultFont;
-        context.fillStyle = '#000';
-        if (this.image)
+        context.font = size*.7 + 'px '+ fontDefault;
+        if (this.image.src)
             context.drawImage(this.image, x-size/2, y-size/2, size, size);
         else
             context.fillText(this.icon, x, y); // show icon if there is no image
     }
  
     // Get local storage key used by the medal
-    storageKey()
-    {
-        return medalsSaveName + '_medal_' + this.id;
-    }
+    storageKey() { return medalsSaveName + '_' + this.id; }
 }
 
 // engine automatically renders medals
@@ -2913,11 +3268,11 @@ function medalsRender()
     
     // update first medal in queue
     const medal = medalsDisplayQueue[0];
-    const time = timeReal - medalsDisplayTimer;
-    if (!medalsDisplayTimer)
-        medalsDisplayTimer = timeReal;
+    const time = timeReal - medalsDisplayTimeLast;
+    if (!medalsDisplayTimeLast)
+        medalsDisplayTimeLast = timeReal;
     else if (time > medalDisplayTime)
-        medalsDisplayQueue.shift(medalsDisplayTimer = 0);
+        medalsDisplayQueue.shift(medalsDisplayTimeLast = 0);
     else
     {
         // slide on/off medals
@@ -2931,14 +3286,19 @@ function medalsRender()
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Newgrounds API wrapper object */
+/** 
+ * Newgrounds API wrapper object
+ * @example
+ * // create a newgrounds object, replace the app id and cipher with your own
+ * const app_id = '53123:1ZuSTQ9l';
+ * const cipher = 'enF0vGH@Mj/FRASKL23Q==';
+ * newgrounds = new Newgrounds(app_id, cipher);
+ */
 class Newgrounds
 {
-    /**
-     * Create a newgrounds object
-     * @param {Number} app_id - The newgrounds App ID
-     * @param {String} [cipher] - The encryption Key (AES-128/Base64)
-     */
+    /** Create a newgrounds object
+     *  @param {Number} app_id   - The newgrounds App ID
+     *  @param {String} [cipher] - The encryption Key (AES-128/Base64) */
     constructor(app_id, cipher)
     {
         ASSERT(!newgrounds && app_id);
@@ -2966,7 +3326,6 @@ class Newgrounds
             if (medal)
             {
                 // copy newgrounds medal data
-                medal.image =       new Image();
                 medal.image.src =   newgroundsMedal['icon'];
                 medal.name =        newgroundsMedal['name'];
                 medal.description = newgroundsMedal['description'];
@@ -2990,7 +3349,7 @@ class Newgrounds
     unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, 1); }
 
     /** Send message to post score
-     * @param {Number} id - The scoreboard id
+     * @param {Number} id    - The scoreboard id
      * @param {Number} value - The score value */
     postScore(id, value) { return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, 1); }
 
@@ -2998,21 +3357,21 @@ class Newgrounds
     logView() { return this.call('App.logView', {'host':this.host}, 1); }
 
     /** Get scores from a scoreboard
-     * @param {Number} id - The scoreboard id
-     * @param {String} [user=0] - A user's id or name
+     * @param {Number} id         - The scoreboard id
+     * @param {String} [user=0]   - A user's id or name
      * @param {Number} [social=0] - If true, only social scores will be loaded
-     * @param {Number} [skip=0] - Number of scores to skip before start
+     * @param {Number} [skip=0]   - Number of scores to skip before start
      * @param {Number} [limit=10] - Number of scores to include in the list
-     * @return {Object} - The response JSON object
+     * @return {Object}           - The response JSON object
      */
     getScores(id, user=0, social=0, skip=0, limit=10)
     { return this.call('ScoreBoard.getScores', {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit}); }
 
     /** Send a message to call a component of the Newgrounds API
-     * @param {String}  component - Name of the component
+     * @param {String}  component      - Name of the component
      * @param {Object}  [parameters=0] - Parameters to use for call
-     * @param {Boolean} [async=0] - If true, wait for response before continuing (will cause stall)
-     * @return {Object} - The response JSON object
+     * @param {Boolean} [async=0]      - If true, don't wait for response before continuing (avoid stall)
+     * @return {Object}                - The response JSON object
      */
     call(component, parameters=0, async=0)
     {
@@ -3056,14 +3415,14 @@ class Newgrounds
 
 const CryptoJS=()=>eval(Function("[M='GBMGXz^oVYPPKKbB`agTXU|LxPc_ZBcMrZvCr~wyGfWrwk@ATqlqeTp^N?p{we}jIpEnB_sEr`l?YDkDhWhprc|Er|XETG?pTl`e}dIc[_N~}fzRycIfpW{HTolvoPB_FMe_eH~BTMx]yyOhv?biWPCGc]kABencBhgERHGf{OL`Dj`c^sh@canhy[secghiyotcdOWgO{tJIE^JtdGQRNSCrwKYciZOa]Y@tcRATYKzv|sXpboHcbCBf`}SKeXPFM|RiJsSNaIb]QPc[D]Jy_O^XkOVTZep`ONmntLL`Qz~UupHBX_Ia~WX]yTRJIxG`ioZ{fefLJFhdyYoyLPvqgH?b`[TMnTwwfzDXhfM?rKs^aFr|nyBdPmVHTtAjXoYUloEziWDCw_suyYT~lSMksI~ZNCS[Bex~j]Vz?kx`gdYSEMCsHpjbyxQvw|XxX_^nQYue{sBzVWQKYndtYQMWRef{bOHSfQhiNdtR{o?cUAHQAABThwHPT}F{VvFmgN`E@FiFYS`UJmpQNM`X|tPKHlccT}z}k{sACHL?Rt@MkWplxO`ASgh?hBsuuP|xD~LSH~KBlRs]t|l|_tQAroDRqWS^SEr[sYdPB}TAROtW{mIkE|dWOuLgLmJrucGLpebrAFKWjikTUzS|j}M}szasKOmrjy[?hpwnEfX[jGpLt@^v_eNwSQHNwtOtDgWD{rk|UgASs@mziIXrsHN_|hZuxXlPJOsA^^?QY^yGoCBx{ekLuZzRqQZdsNSx@ezDAn{XNj@fRXIwrDX?{ZQHwTEfu@GhxDOykqts|n{jOeZ@c`dvTY?e^]ATvWpb?SVyg]GC?SlzteilZJAL]mlhLjYZazY__qcVFYvt@|bIQnSno@OXyt]OulzkWqH`rYFWrwGs`v|~XeTsIssLrbmHZCYHiJrX}eEzSssH}]l]IhPQhPoQ}rCXLyhFIT[clhzYOvyHqigxmjz`phKUU^TPf[GRAIhNqSOdayFP@FmKmuIzMOeoqdpxyCOwCthcLq?n`L`tLIBboNn~uXeFcPE{C~mC`h]jUUUQe^`UqvzCutYCgct|SBrAeiYQW?X~KzCz}guXbsUw?pLsg@hDArw?KeJD[BN?GD@wgFWCiHq@Ypp_QKFixEKWqRp]oJFuVIEvjDcTFu~Zz]a{IcXhWuIdMQjJ]lwmGQ|]g~c]Hl]pl`Pd^?loIcsoNir_kikBYyg?NarXZEGYspt_vLBIoj}LI[uBFvm}tbqvC|xyR~a{kob|HlctZslTGtPDhBKsNsoZPuH`U`Fqg{gKnGSHVLJ^O`zmNgMn~{rsQuoymw^JY?iUBvw_~mMr|GrPHTERS[MiNpY[Mm{ggHpzRaJaoFomtdaQ_?xuTRm}@KjU~RtPsAdxa|uHmy}n^i||FVL[eQAPrWfLm^ndczgF~Nk~aplQvTUpHvnTya]kOenZlLAQIm{lPl@CCTchvCF[fI{^zPkeYZTiamoEcKmBMfZhk_j_~Fjp|wPVZlkh_nHu]@tP|hS@^G^PdsQ~f[RqgTDqezxNFcaO}HZhb|MMiNSYSAnQWCDJukT~e|OTgc}sf[cnr?fyzTa|EwEtRG|I~|IO}O]S|rp]CQ}}DWhSjC_|z|oY|FYl@WkCOoPuWuqr{fJu?Brs^_EBI[@_OCKs}?]O`jnDiXBvaIWhhMAQDNb{U`bqVR}oqVAvR@AZHEBY@depD]OLh`kf^UsHhzKT}CS}HQKy}Q~AeMydXPQztWSSzDnghULQgMAmbWIZ|lWWeEXrE^EeNoZApooEmrXe{NAnoDf`m}UNlRdqQ@jOc~HLOMWs]IDqJHYoMziEedGBPOxOb?[X`KxkFRg@`mgFYnP{hSaxwZfBQqTm}_?RSEaQga]w[vxc]hMne}VfSlqUeMo_iqmd`ilnJXnhdj^EEFifvZyxYFRf^VaqBhLyrGlk~qowqzHOBlOwtx?i{m~`n^G?Yxzxux}b{LSlx]dS~thO^lYE}bzKmUEzwW^{rPGhbEov[Plv??xtyKJshbG`KuO?hjBdS@Ru}iGpvFXJRrvOlrKN?`I_n_tplk}kgwSXuKylXbRQ]]?a|{xiT[li?k]CJpwy^o@ebyGQrPfF`aszGKp]baIx~H?ElETtFh]dz[OjGl@C?]VDhr}OE@V]wLTc[WErXacM{We`F|utKKjgllAxvsVYBZ@HcuMgLboFHVZmi}eIXAIFhS@A@FGRbjeoJWZ_NKd^oEH`qgy`q[Tq{x?LRP|GfBFFJV|fgZs`MLbpPYUdIV^]mD@FG]pYAT^A^RNCcXVrPsgk{jTrAIQPs_`mD}rOqAZA[}RETFz]WkXFTz_m{N@{W@_fPKZLT`@aIqf|L^Mb|crNqZ{BVsijzpGPEKQQZGlApDn`ruH}cvF|iXcNqK}cxe_U~HRnKV}sCYb`D~oGvwG[Ca|UaybXea~DdD~LiIbGRxJ_VGheI{ika}KC[OZJLn^IBkPrQj_EuoFwZ}DpoBRcK]Q}?EmTv~i_Tul{bky?Iit~tgS|o}JL_VYcCQdjeJ_MfaA`FgCgc[Ii|CBHwq~nbJeYTK{e`CNstKfTKPzw{jdhp|qsZyP_FcugxCFNpKitlR~vUrx^NrSVsSTaEgnxZTmKc`R|lGJeX}ccKLsQZQhsFkeFd|ckHIVTlGMg`~uPwuHRJS_CPuN_ogXe{Ba}dO_UBhuNXby|h?JlgBIqMKx^_u{molgL[W_iavNQuOq?ap]PGB`clAicnl@k~pA?MWHEZ{HuTLsCpOxxrKlBh]FyMjLdFl|nMIvTHyGAlPogqfZ?PlvlFJvYnDQd}R@uAhtJmDfe|iJqdkYr}r@mEjjIetDl_I`TELfoR|qTBu@Tic[BaXjP?dCS~MUK[HPRI}OUOwAaf|_}HZzrwXvbnNgltjTwkBE~MztTQhtRSWoQHajMoVyBBA`kdgK~h`o[J`dm~pm]tk@i`[F~F]DBlJKklrkR]SNw@{aG~Vhl`KINsQkOy?WhcqUMTGDOM_]bUjVd|Yh_KUCCgIJ|LDIGZCPls{RzbVWVLEhHvWBzKq|^N?DyJB|__aCUjoEgsARki}j@DQXS`RNU|DJ^a~d{sh_Iu{ONcUtSrGWW@cvUjefHHi}eSSGrNtO?cTPBShLqzwMVjWQQCCFB^culBjZHEK_{dO~Q`YhJYFn]jq~XSnG@[lQr]eKrjXpG~L^h~tDgEma^AUFThlaR{xyuP@[^VFwXSeUbVetufa@dX]CLyAnDV@Bs[DnpeghJw^?UIana}r_CKGDySoRudklbgio}kIDpA@McDoPK?iYcG?_zOmnWfJp}a[JLR[stXMo?_^Ng[whQlrDbrawZeSZ~SJstIObdDSfAA{MV}?gNunLOnbMv_~KFQUAjIMj^GkoGxuYtYbGDImEYiwEMyTpMxN_LSnSMdl{bg@dtAnAMvhDTBR_FxoQgANniRqxd`pWv@rFJ|mWNWmh[GMJz_Nq`BIN@KsjMPASXORcdHjf~rJfgZYe_uulzqM_KdPlMsuvU^YJuLtofPhGonVOQxCMuXliNvJIaoC?hSxcxKVVxWlNs^ENDvCtSmO~WxI[itnjs^RDvI@KqG}YekaSbTaB]ki]XM@[ZnDAP~@|BzLRgOzmjmPkRE@_sobkT|SszXK[rZN?F]Z_u}Yue^[BZgLtR}FHzWyxWEX^wXC]MJmiVbQuBzkgRcKGUhOvUc_bga|Tx`KEM`JWEgTpFYVeXLCm|mctZR@uKTDeUONPozBeIkrY`cz]]~WPGMUf`MNUGHDbxZuO{gmsKYkAGRPqjc|_FtblEOwy}dnwCHo]PJhN~JoteaJ?dmYZeB^Xd?X^pOKDbOMF@Ugg^hETLdhwlA}PL@_ur|o{VZosP?ntJ_kG][g{Zq`Tu]dzQlSWiKfnxDnk}KOzp~tdFstMobmy[oPYjyOtUzMWdjcNSUAjRuqhLS@AwB^{BFnqjCmmlk?jpn}TksS{KcKkDboXiwK]qMVjm~V`LgWhjS^nLGwfhAYrjDSBL_{cRus~{?xar_xqPlArrYFd?pHKdMEZzzjJpfC?Hv}mAuIDkyBxFpxhstTx`IO{rp}XGuQ]VtbHerlRc_LFGWK[XluFcNGUtDYMZny[M^nVKVeMllQI[xtvwQnXFlWYqxZZFp_|]^oWX[{pOMpxXxvkbyJA[DrPzwD|LW|QcV{Nw~U^dgguSpG]ClmO@j_TENIGjPWwgdVbHganhM?ema|dBaqla|WBd`poj~klxaasKxGG^xbWquAl~_lKWxUkDFagMnE{zHug{b`A~IYcQYBF_E}wiA}K@yxWHrZ{[d~|ARsYsjeNWzkMs~IOqqp[yzDE|WFrivsidTcnbHFRoW@XpAV`lv_zj?B~tPCppRjgbbDTALeFaOf?VcjnKTQMLyp{NwdylHCqmo?oelhjWuXj~}{fpuX`fra?GNkDiChYgVSh{R[BgF~eQa^WVz}ATI_CpY?g_diae]|ijH`TyNIF}|D_xpmBq_JpKih{Ba|sWzhnAoyraiDvk`h{qbBfsylBGmRH}DRPdryEsSaKS~tIaeF[s]I~xxHVrcNe@Jjxa@jlhZueLQqHh_]twVMqG_EGuwyab{nxOF?`HCle}nBZzlTQjkLmoXbXhOtBglFoMz?eqre`HiE@vNwBulglmQjj]DB@pPkPUgA^sjOAUNdSu_`oAzar?n?eMnw{{hYmslYi[TnlJD'",...']charCodeAtUinyxpf',"for(;e<10359;c[e++]=p-=128,A=A?p-A&&A:p==34&&p)for(p=1;p<128;y=f.map((n,x)=>(U=r[n]*2+1,U=Math.log(U/(h-U)),t-=a[x]*U,U/500)),t=~-h/(1+Math.exp(t))|1,i=o%h<t,o=o%h+(i?t:h-t)*(o>>17)-!i*t,f.map((n,x)=>(U=r[n]+=(i*h/2-r[n]<<13)/((C[n]+=C[n]<5)+1/20)>>13,a[x]+=y[x]*(i-t/h))),p=p*2+i)for(f='010202103203210431053105410642065206541'.split(t=0).map((n,x)=>(U=0,[...n].map((n,x)=>(U=U*997+(c[e-n]|0)|0)),h*32-1&U*997+p+!!A*129)*12+x);o<h*32;o=o*64|M.charCodeAt(d++)&63);for(C=String.fromCharCode(...c);r=/[\0-#?@\\\\~]/.exec(C);)with(C.split(r))C=join(shift());return C")([],[],1<<17,[0,0,0,0,0,0,0,0,0,0,0,0],new Uint16Array(51e6).fill(1<<15),new Uint8Array(51e6),0,0,0,0));
 /** 
- *  LittleJS WebGL Interface
- *  <br> - All webgl used by the engine is wrapped up here
- *  <br> - Can be disabled with glEnable to revert to 2D canvas rendering
- *  <br> - Batches sprite rendering on GPU for incredibly fast performance
- *  <br> - Sprite transform math is done in the shader where possible
- *  <br> - For normal stuff you won't need to call any functions in this file
- *  <br> - For advanced stuff there are helper functions to create shaders, textures, etc
- *  @namespace WebGL
+ * LittleJS WebGL Interface
+ * <br> - All webgl used by the engine is wrapped up here
+ * <br> - For normal stuff you won't need to see or call anything in this file
+ * <br> - For advanced stuff there are helper functions to create shaders, textures, etc
+ * <br> - Can be disabled with glEnable to revert to 2D canvas rendering
+ * <br> - Batches sprite rendering on GPU for incredibly fast performance
+ * <br> - Sprite transform math is done in the shader where possible
+ * @namespace WebGL
  */
 
 'use strict';
@@ -3084,7 +3443,7 @@ let glContext;
 let glTileTexture;
 
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glPositionData, glColorData, glBatchCount, glDirty, glAdditive;
+let glActiveTexture, glShader, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -3095,19 +3454,16 @@ function glInit()
 
     // create the canvas and tile texture
     glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl',  {antialias:!pixelated});
+    glContext = glCanvas.getContext('webgl');
+    glCanvas.style = styleCanvas;
     glTileTexture = glCreateTexture(tileImage);
 
-    if (glOverlay)
-    {
-        // firefox is much faster without copying the gl buffer so we just overlay it with some tradeoffs
-        document.body.appendChild(glCanvas);
-        glCanvas.style = mainCanvas.style.cssText;
-    }
+    // some browsers are much faster without copying the gl buffer so we just overlay it instead
+    glOverlay && document.body.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
-        'precision lowp float;'+    // use lowp for better performance
+        'precision highp float;'+   // use highp for better accuracy, lowp for better perf
         'uniform mat4 m;'+          // transform matrix
         'attribute float a;'+       // angle
         'attribute vec2 p,s,t;'+    // position, size, uv
@@ -3119,7 +3475,7 @@ function glInit()
         'v=t;d=c;e=b;'+             // pass stuff to fragment shader
         '}'                         // end of shader
         ,
-        'precision lowp float;'+             // use lowp for better performance
+        'precision highp float;'+            // use highp for better accuracy, lowp for better perf
         'varying vec2 v;'+                   // uv
         'varying vec4 d,e;'+                 // color, additiveColor
         'uniform sampler2D j;'+              // texture
@@ -3135,6 +3491,7 @@ function glInit()
     glColorData = new Uint32Array(glVertexData);
 
     // setup the vertex data array
+    let offset = glBatchCount = 0;
     const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
     {
         const location = glContext.getAttribLocation(glShader, name);
@@ -3142,7 +3499,6 @@ function glInit()
         glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
         offset += size*typeSize;
     }
-    let offset = glDirty = glBatchCount = 0;
     initVertexAttribArray('a', gl_FLOAT, 4, 1);            // angle
     initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
     initVertexAttribArray('s', gl_FLOAT, 4, 2);            // size
@@ -3158,14 +3514,8 @@ function glSetBlendMode(additive)
 {
     if (!glEnable) return;
         
-    if (additive != glAdditive)
-        glFlush();
-
     // setup blending
     glAdditive = additive;
-    const destBlend = additive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
-    glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
-    glContext.enable(gl_BLEND);
 }
 
 /** Set the WebGl texture, not normally necessary unless multiple tile sheets are used
@@ -3175,7 +3525,8 @@ function glSetBlendMode(additive)
 function glSetTexture(texture=glTileTexture)
 {
     if (!glEnable) return;
-        
+    
+    // must flush cache with the old texture to set a new one
     if (texture != glActiveTexture)
         glFlush();
 
@@ -3240,36 +3591,35 @@ function glCreateBuffer(bufferType, size, usage)
     return buffer;
 }
 
-/** Create WebGL texture from an image
+/** Create WebGL texture from an image and set the texture settings
  *  @param {Image} image
  *  @return {WebGLTexture}
  *  @memberof WebGL */
 function glCreateTexture(image)
 {
-    if (!glEnable) return;
+    if (!glEnable || !image || !image.width) return;
 
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(gl_TEXTURE_2D, texture);
     glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
-
+        
     // use point filtering for pixelated rendering
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, pixelated ? gl_NEAREST : gl_LINEAR);
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, pixelated ? gl_NEAREST : gl_LINEAR);
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_S, gl_CLAMP_TO_EDGE);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_T, gl_CLAMP_TO_EDGE);
     return texture;
 }
 
 // called automatically by engine before render
-function glPreRender(width, height)
+function glPreRender(width, height, cameraX, cameraY, cameraScale)
 {
     if (!glEnable) return;
 
     // clear and set to same size as main canvas
-    glCanvas.width = width;
-    glCanvas.height = height;
-    glContext.viewport(0, 0, width, height);
+    glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height);
+    glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
@@ -3284,7 +3634,7 @@ function glPreRender(width, height)
             sx, 0, 0, 0,
             0, sy, 0, 0,
             1, 1, -1, 1,
-            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
+            -1-sx*cameraX, -1-sy*cameraY, 0, 0
         ])
     );
 }
@@ -3295,11 +3645,16 @@ function glFlush()
 {
     if (!glEnable || !glBatchCount) return;
 
+    const destBlend = glBatchAdditive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
+    glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
+    glContext.enable(gl_BLEND);
+
     // draw all the sprites in the batch and reset the buffer
     glContext.bufferSubData(gl_ARRAY_BUFFER, 0, 
         glPositionData.subarray(0, glBatchCount * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT));
     glContext.drawArrays(gl_TRIANGLES, 0, glBatchCount * gl_VERTICES_PER_QUAD);
     glBatchCount = 0;
+    glBatchAdditive = glAdditive;
 }
 
 /** Draw any sprites still in the buffer, copy to main canvas and clear
@@ -3308,29 +3663,38 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context, forceDraw)
 {
-    if (!glEnable || !glDirty)  return;
+    if (!glEnable || !glBatchCount) return;
     
     glFlush();
+    
+    // do not draw in overlay mode because the canvas is visible
     if (!glOverlay || forceDraw)
-    {
-        // do not draw/clear in overlay mode because the canvas is visible
-        context.drawImage(glCanvas, 0, glAdditive = glDirty = 0);
-        glContext.clear(gl_COLOR_BUFFER_BIT);
-    }
+        context.drawImage(glCanvas, 0, 0);
 }
 
-// Draw a sprite with the given parameters, used internally by draw functions
-function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgba=0xffffffff, rgbaAdditive=0x00000000)
+/** Add a sprite to the gl draw list, used by all gl draw functions
+ *  @param x
+ *  @param y
+ *  @param sizeX
+ *  @param sizeY
+ *  @param angle
+ *  @param uv0X
+ *  @param uv0Y
+ *  @param uv1X
+ *  @param uv1Y
+ *  @param [rgba=0xffffffff]
+ *  @param [rgbaAdditive=0]
+ *  @memberof WebGL */
+function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffffff, rgbaAdditive=0)
 {
     if (!glEnable) return;
-    
-    // flush if there is no room for more verts
-    if (glBatchCount == gl_MAX_BATCH)
+
+    // flush if there is no room for more verts or if different blend mode
+    if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
         glFlush();
         
     // setup 2 triangles to form a quad
     let offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT;
-    glDirty = 1;
 
     // vertex 0
     glPositionData[offset++] = angle;