littlejsengine 1.8.9 → 1.9.1

package/build/littlejs.esm.js

@@ -18,13 +18,13 @@
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
-const debug = 1;
+const debug = true;
 
 /** True if asserts are enaled
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
-const enableAsserts = 1;
+const enableAsserts = true;
 
 /** Size to render debug points by default
  *  @type {Number}
@@ -36,82 +36,87 @@ const debugPointSize = .5;
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
-let showWatermark = 1;
+let showWatermark = true;
 
 /** Key code used to toggle debug mode, Esc by default
+ *  @type {String}
+ *  @default
+ *  @memberof Debug */
+let debugKey = 'Escape';
+
+/** True if the debug overlay is active, always false in release builds
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
-let debugKey = 27;
+let debugOverlay = false;
 
 // Engine internal variables not exposed to documentation
-let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0,
-debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
+let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParticles = false, debugGamepads = false, debugMedals = false, debugTakeScreenshot, downloadLink;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Debug helper functions
 
 /** Asserts if the experssion is false, does not do anything in release builds
- *  @param {Boolean} assertion
- *  @param {Object}  output
+ *  @param {Boolean} assert
+ *  @param {Object} output
  *  @memberof Debug */
-function ASSERT(...assert) { enableAsserts && console.assert(...assert); }
+function ASSERT(assert, output) { enableAsserts && console.assert(assert, output); }
 
 /** Draw a debug rectangle in world space
  *  @param {Vector2} pos
  *  @param {Vector2} [size=Vector2()]
- *  @param {String}  [color='#fff']
- *  @param {Number}  [time=0]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [fill=false]
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Number}  [angle]
+ *  @param {Boolean} [fill]
  *  @memberof Debug */
 function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
 {
-    ASSERT(typeof color == 'string'); // pass in regular html strings as colors
+    ASSERT(typeof color == 'string', 'pass in css color strings'); 
     debugPrimitives.push({pos, size:vec2(size), color, time:new Timer(time), angle, fill});
 }
 
 /** Draw a debug circle in world space
  *  @param {Vector2} pos
- *  @param {Number}  [radius=0]
- *  @param {String}  [color='#fff']
- *  @param {Number}  [time=0]
- *  @param {Boolean} [fill=false]
+ *  @param {Number}  [radius]
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Boolean} [fill]
  *  @memberof Debug */
 function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
 {
-    ASSERT(typeof color == 'string'); // pass in regular html strings as colors
+    ASSERT(typeof color == 'string', 'pass in css color strings');
     debugPrimitives.push({pos, size:radius, color, time:new Timer(time), angle:0, fill});
 }
 
 /** Draw a debug point in world space
  *  @param {Vector2} pos
- *  @param {String}  [color='#fff']
- *  @param {Number}  [time=0]
- *  @param {Number}  [angle=0]
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Number}  [angle]
  *  @memberof Debug */
-function debugPoint(pos, color, time, angle) {debugRect(pos, 0, color, time, angle);}
+function debugPoint(pos, color, time, angle) {debugRect(pos, undefined, color, time, angle);}
 
 /** Draw a debug line in world space
  *  @param {Vector2} posA
  *  @param {Vector2} posB
- *  @param {String}  [color='#fff']
- *  @param {Number}  [thickness=.1]
- *  @param {Number}  [time=0]
+ *  @param {String}  [color]
+ *  @param {Number}  [thickness]
+ *  @param {Number}  [time]
  *  @memberof Debug */
 function debugLine(posA, posB, color, thickness=.1, time)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), 1);
+    debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
 }
 
 /** Draw a debug axis aligned bounding box in world space
- *  @param {Vector2} posA
- *  @param {Vector2} sizeA
- *  @param {Vector2} posB
- *  @param {Vector2} sizeB
- *  @param {String}  [color='#fff']
+ *  @param {Vector2} pA - position A
+ *  @param {Vector2} sA - size A
+ *  @param {Vector2} pB - position B
+ *  @param {Vector2} sB - size B
+ *  @param {String}  [color]
  *  @memberof Debug */
 function debugAABB(pA, sA, pB, sB, color)
 {
@@ -123,15 +128,15 @@ function debugAABB(pA, sA, pB, sB, color)
 /** Draw a debug axis aligned bounding box in world space
  *  @param {String}  text
  *  @param {Vector2} pos
- *  @param {Number}  [size=1]
- *  @param {String}  [color='#fff']
- *  @param {Number}  [time=0]
- *  @param {Number}  [angle=0]
- *  @param {String}  [font='monospace']
+ *  @param {Number}  [size]
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Number}  [angle]
+ *  @param {String}  [font]
  *  @memberof Debug */
 function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')
 {
-    ASSERT(typeof color == 'string'); // pass in regular html strings as colors
+    ASSERT(typeof color == 'string', 'pass in css color strings');
     debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
 }
 
@@ -142,7 +147,7 @@ function debugClear() { debugPrimitives = []; }
 /** Save a canvas to disk 
  *  @param {HTMLCanvasElement} canvas
  *  @param {String}            [filename]
- *  @param {String}            [type='image/png']
+ *  @param {String}            [type]
  *  @memberof Debug */
 function debugSaveCanvas(canvas, filename=engineName, type='image/png')
 { debugSaveDataURL(canvas.toDataURL(type), filename); }
@@ -150,7 +155,7 @@ function debugSaveCanvas(canvas, filename=engineName, type='image/png')
 /** Save a text file to disk 
  *  @param {String}     text
  *  @param {String}     [filename]
- *  @param {String}     [type='text/plain']
+ *  @param {String}     [type]
  *  @memberof Debug */
 function debugSaveText(text, filename=engineName, type='text/plain')
 { debugSaveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
@@ -185,22 +190,18 @@ function debugUpdate()
         debugOverlay = !debugOverlay;
     if (debugOverlay)
     {
-        if (keyWasPressed(48)) // 0
+        if (keyWasPressed('Digit0'))
             showWatermark = !showWatermark;
-        if (keyWasPressed(49)) // 1
-            debugPhysics = !debugPhysics, debugParticles = 0;
-        if (keyWasPressed(50)) // 2
-            debugParticles = !debugParticles, debugPhysics = 0;
-        if (keyWasPressed(51)) // 3
+        if (keyWasPressed('Digit1'))
+            debugPhysics = !debugPhysics, debugParticles = false;
+        if (keyWasPressed('Digit2'))
+            debugParticles = !debugParticles, debugPhysics = false;
+        if (keyWasPressed('Digit3'))
             debugGamepads = !debugGamepads;
-        if (keyWasPressed(52)) // 4
+        if (keyWasPressed('Digit4'))
             debugRaycast = !debugRaycast;
-        if (keyWasPressed(53)) // 5
+        if (keyWasPressed('Digit5'))
             debugTakeScreenshot = 1;
-        //if (keyWasPressed(54)) // 6
-        //if (keyWasPressed(55)) // 7
-        //if (keyWasPressed(56)) // 8
-        //if (keyWasPressed(57)) // 9
     }
 }
 
@@ -211,7 +212,7 @@ function debugRender()
     if (debugTakeScreenshot)
     {
         // composite canvas
-        glCopyToContext(mainContext, 1);
+        glCopyToContext(mainContext, true);
         mainContext.drawImage(overlayCanvas, 0, 0);
         overlayCanvas.width |= 0;
 
@@ -240,7 +241,7 @@ function debugRender()
                 {
                     const drawPos = centerPos.add(vec2(j*stickScale*2, i*stickScale*3));
                     const stickPos = drawPos.add(sticks[j].scale(stickScale));
-                    debugCircle(drawPos, stickScale, '#fff7',0,1);
+                    debugCircle(drawPos, stickScale, '#fff7',0,true);
                     debugLine(drawPos, stickPos, '#f00');
                     debugPoint(stickPos, '#f00');
                 }
@@ -248,8 +249,8 @@ function debugRender()
                 {
                     const drawPos = centerPos.add(vec2(j*buttonScale*2, i*stickScale*3-stickScale-buttonScale));
                     const pressed = gamepad.buttons[j].pressed;
-                    debugCircle(drawPos, buttonScale, pressed ? '#f00' : '#fff7', 0, 1);
-                    debugText(j, drawPos, .2);
+                    debugCircle(drawPos, buttonScale, pressed ? '#f00' : '#fff7', 0, true);
+                    debugText(''+j, drawPos, .2);
                 }
             }
         }
@@ -278,25 +279,25 @@ function debugRender()
 
             // show object info
             const size = vec2(max(o.size.x, .2), max(o.size.y, .2));
-            const color1 = new Color(!!o.collideTiles, !!o.collideSolidObjects, !!o.isSolid, o.parent?.2:.5);
+            const color1 = new Color(o.collideTiles?1:0, o.collideSolidObjects?1:0, o.isSolid?1:0, o.parent?.2:.5);
             const color2 = o.parent ? new Color(1,1,1,.5) : new Color(0,0,0,.8);
-            drawRect(o.pos, size, color1, o.angle, 0);
-            drawRect(o.pos, size.scale(.8), color2, o.angle, 0);
-            o.parent && drawLine(o.pos, o.parent.pos, .1, new Color(0,0,1,.5), 0);
+            drawRect(o.pos, size, color1, o.angle, false);
+            drawRect(o.pos, size.scale(.8), color2, o.angle, false);
+            o.parent && drawLine(o.pos, o.parent.pos, .1, new Color(0,0,1,.5), false);
         }
         
         if (bestObject)
         {
             const raycastHitPos = tileCollisionRaycast(bestObject.pos, mousePos);
             raycastHitPos && drawRect(raycastHitPos.floor().add(vec2(.5)), vec2(1), new Color(0,1,1,.3));
-            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), new Color(0,0,1,.5), 0, 0);
-            drawLine(mousePos, bestObject.pos, .1, raycastHitPos ? new Color(1,0,0,.5) : new Color(0,1,0,.5), 0);
+            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), new Color(0,0,1,.5), 0, false);
+            drawLine(mousePos, bestObject.pos, .1, raycastHitPos ? new Color(1,0,0,.5) : new Color(0,1,0,.5), false);
 
             const debugText = 'mouse pos = ' + mousePos + 
                 '\nmouse collision = ' + getTileCollisionData(mousePos) + 
                 '\n\n--- object info ---\n' +
                 bestObject.toString();
-            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, 0, 0, 'monospace');
+            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, undefined, 'center', 'monospace');
         }
 
         glCopyToContext(mainContext = saveContext);
@@ -385,7 +386,7 @@ function debugRender()
             let keysPressed = '';
             for(const i in inputData[0])
             {
-                if (i && keyIsDown(i, 0))
+                if (keyIsDown(i, 0))
                     keysPressed += i + ' ' ;
             }
             keysPressed && overlayContext.fillText('Keys Down: ' + keysPressed, x, y += h);
@@ -394,7 +395,7 @@ function debugRender()
             if (inputData[1])
             for(const i in inputData[1])
             {
-                if (i && keyIsDown(i, 1))
+                if (keyIsDown(i, 1))
                     buttonsPressed += i + ' ' ;
             }
             buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);
@@ -456,15 +457,15 @@ function sign(value) { return Math.sign(value); }
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {Number} dividend
- *  @param {Number} [divisor=1]
+ *  @param {Number} [divisor]
  *  @return {Number}
  *  @memberof Utilities */
 function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % divisor; }
 
 /** Clamps the value beween max and min
  *  @param {Number} value
- *  @param {Number} [min=0]
- *  @param {Number} [max=1]
+ *  @param {Number} [min]
+ *  @param {Number} [max]
  *  @return {Number}
  *  @memberof Utilities */
 function clamp(value, min=0, max=1) { return value < min ? min : value > max ? max : value; }
@@ -489,7 +490,7 @@ function lerp(percent, valueA, valueB) { return valueA + clamp(percent) * (value
 /** Returns signed wrapped distance between the two values passed in
  *  @param {Number} valueA
  *  @param {Number} valueB
- *  @param {Number} [wrapSize=1]
+ *  @param {Number} [wrapSize]
  *  @returns {Number}
  *  @memberof Utilities */
 function distanceWrap(valueA, valueB, wrapSize=1)
@@ -499,7 +500,7 @@ function distanceWrap(valueA, valueB, wrapSize=1)
  *  @param {Number} percent
  *  @param {Number} valueA
  *  @param {Number} valueB
- *  @param {Number} [wrapSize=1]
+ *  @param {Number} [wrapSize]
  *  @returns {Number}
  *  @memberof Utilities */
 function lerpWrap(percent, valueA, valueB, wrapSize=1)
@@ -510,7 +511,7 @@ function lerpWrap(percent, valueA, valueB, wrapSize=1)
  *  @param {Number} angleB
  *  @returns {Number}
  *  @memberof Utilities */
-function distanceAngle(angleA, angleB) { distanceWrap(angleA, angleB, 2*PI); }
+function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*PI); }
 
 /** Linearly interpolates between the angles passed in with wrappping
  *  @param {Number} percent
@@ -533,11 +534,11 @@ function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
 function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
- *  @param {Vector2} pointA  - Center of box A
- *  @param {Vector2} sizeA   - Size of box A
- *  @param {Vector2} pointB  - Center of box B
- *  @param {Vector2} sizeB   - Size of box B
- *  @return {Boolean}        - True if overlapping
+ *  @param {Vector2} pointA - Center of box A
+ *  @param {Vector2} sizeA  - Size of box A
+ *  @param {Vector2} pointB - Center of box B
+ *  @param {Vector2} sizeB  - Size of box B
+ *  @return {Boolean}       - True if overlapping
  *  @memberof Utilities */
 function isOverlapping(pointA, sizeA, pointB, sizeB)
 { 
@@ -546,10 +547,10 @@ function isOverlapping(pointA, sizeA, pointB, sizeB)
 }
 
 /** Returns an oscillating wave between 0 and amplitude with frequency of 1 Hz by default
- *  @param {Number} [frequency=1] - Frequency of the wave in Hz
- *  @param {Number} [amplitude=1] - Amplitude (max height) of the wave
- *  @param {Number} [t=time]      - Value to use for time of the wave
- *  @return {Number}              - Value waving between 0 and amplitude
+ *  @param {Number} [frequency] - Frequency of the wave in Hz
+ *  @param {Number} [amplitude] - Amplitude (max height) of the wave
+ *  @param {Number} [t=time]    - Value to use for time of the wave
+ *  @return {Number}            - Value waving between 0 and amplitude
  *  @memberof Utilities */
 function wave(frequency=1, amplitude=1, t=time)
 { return amplitude/2 * (1 - Math.cos(t*frequency*2*PI)); }
@@ -566,15 +567,15 @@ function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
  *  @namespace Random */
 
 /** Returns a random value between the two values passed in
- *  @param {Number} [valueA=1]
- *  @param {Number} [valueB=0]
+ *  @param {Number} [valueA]
+ *  @param {Number} [valueB]
  *  @return {Number}
  *  @memberof Random */
 function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valueB); }
 
 /** Returns a floored random value the two values passed in
  *  @param {Number} valueA
- *  @param {Number} [valueB=0]
+ *  @param {Number} [valueB]
  *  @return {Number}
  *  @memberof Random */
 function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
@@ -585,14 +586,14 @@ function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
 function randSign() { return randInt(2) * 2 - 1; }
 
 /** Returns a random Vector2 with the passed in length
- *  @param {Number} [length=1]
+ *  @param {Number} [length]
  *  @return {Vector2}
  *  @memberof Random */
 function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length); }
 
 /** Returns a random Vector2 within a circular shape
- *  @param {Number} [radius=1]
- *  @param {Number} [minRadius=0]
+ *  @param {Number} [radius]
+ *  @param {Number} [minRadius]
  *  @return {Vector2}
  *  @memberof Random */
 function randInCircle(radius=1, minRadius=0)
@@ -604,7 +605,7 @@ function randInCircle(radius=1, minRadius=0)
  *  @param {Boolean} [linear]
  *  @return {Color}
  *  @memberof Random */
-function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear)
+function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear=false)
 {
     return linear ? colorA.lerp(colorB, rand()) : 
         new Color(rand(colorA.r,colorB.r), rand(colorA.g,colorB.g), rand(colorA.b,colorB.b), rand(colorA.a,colorB.a));
@@ -633,8 +634,8 @@ class RandomGenerator
     }
 
     /** Returns a seeded random value between the two values passed in
-    *  @param {Number} [valueA=1]
-    *  @param {Number} [valueB=0]
+    *  @param {Number} [valueA]
+    *  @param {Number} [valueB]
     *  @return {Number} */
     float(valueA=1, valueB=0)
     {
@@ -647,7 +648,7 @@ class RandomGenerator
 
     /** Returns a floored seeded random value the two values passed in
     *  @param {Number} valueA
-    *  @param {Number} [valueB=0]
+    *  @param {Number} [valueB]
     *  @return {Number} */
     int(valueA, valueB=0) { return Math.floor(this.float(valueA, valueB)); }
 
@@ -660,8 +661,8 @@ class RandomGenerator
 
 /** 
  * Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
- * @param {(Number|Vector2)} [x=0]
- * @param {Number} [y=0]
+ * @param {(Number|Vector2)} [x]
+ * @param {Number} [y]
  * @return {Vector2}
  * @example
  * let a = vec2(0, 1); // vector with coordinates (0, 1)
@@ -671,15 +672,15 @@ class RandomGenerator
  * @memberof Utilities
  */
 function vec2(x=0, y)
-{ return x.x == undefined ? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y); }
+{ return typeof x === 'number'? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y); }
 
 /** 
  * Check if object is a valid Vector2
- * @param {Vector2} v
+ * @param {any} v
  * @return {Boolean}
  * @memberof Utilities
  */
-function isVector2(v) { return !isNaN(v.x) && !isNaN(v.y); }
+function isVector2(v) { return typeof v === 'object' && typeof v.x === 'number' && typeof v.y === 'number'; }
 
 /** 
  * 2D Vector object with vector math library
@@ -693,8 +694,8 @@ function isVector2(v) { return !isNaN(v.x) && !isNaN(v.y); }
 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 location
-     *  @param {Number} [y=0] - Y axis location */
+     *  @param {Number} [x] - X axis location
+     *  @param {Number} [y] - Y axis location */
     constructor(x=0, y=0)
     {
         /** @property {Number} - X axis location */
@@ -751,12 +752,12 @@ class Vector2
     distanceSquared(v) { return (this.x - v.x)**2 + (this.y - v.y)**2; }
 
     /** Returns a new vector in same direction as this one with the length passed in
-     * @param {Number} [length=1]
+     * @param {Number} [length]
      * @return {Vector2} */
     normalize(length=1) { const l = this.length(); return l ? this.scale(length/l) : new Vector2(0, length); }
 
     /** Returns a new vector clamped to length passed in
-     * @param {Number} [length=1]
+     * @param {Number} [length]
      * @return {Vector2} */
     clampLength(length=1) { const l = this.length(); return l > length ? this.scale(length/l) : this; }
 
@@ -775,8 +776,8 @@ class Vector2
     angle() { return Math.atan2(this.x, this.y); }
 
     /** Sets this vector with angle and length passed in
-     * @param {Number} [angle=0]
-     * @param {Number} [length=1]
+     * @param {Number} [angle]
+     * @param {Number} [length]
      * @return {Vector2} */
     setAngle(angle=0, length=1) 
     { this.x = length*Math.sin(angle); this.y = length*Math.cos(angle); return this; }
@@ -861,10 +862,10 @@ function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
 class Color
 {
     /** Create a color with the rgba 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*/
+     *  @param {Number} [r] - red
+     *  @param {Number} [g] - green
+     *  @param {Number} [b] - blue
+     *  @param {Number} [a] - alpha*/
     constructor(r=1, g=1, b=1, a=1)
     {
         /** @property {Number} - Red */
@@ -919,10 +920,10 @@ class Color
     lerp(c, percent) { return this.add(c.subtract(this).scale(clamp(percent))); }
 
     /** Sets this color given a hue, saturation, lightness, and alpha
-     * @param {Number} [h=0] - hue
-     * @param {Number} [s=0] - saturation
-     * @param {Number} [l=1] - lightness
-     * @param {Number} [a=1] - alpha
+     * @param {Number} [h] - hue
+     * @param {Number} [s] - saturation
+     * @param {Number} [l] - lightness
+     * @param {Number} [a] - alpha
      * @return {Color} */
     setHSLA(h=0, s=0, l=1, a=1)
     {
@@ -968,8 +969,8 @@ class Color
     }
 
     /** Returns a new color that has each component randomly adjusted
-     * @param {Number} [amount=.05]
-     * @param {Number} [alphaAmount=0]
+     * @param {Number} [amount]
+     * @param {Number} [alphaAmount]
      * @return {Color} */
     mutate(amount=.05, alphaAmount=0) 
     {
@@ -983,9 +984,9 @@ class Color
     }
 
     /** Returns this color expressed as a hex color code
-     * @param {Boolean} [useAlpha=1] - if alpha should be included in result
+     * @param {Boolean} [useAlpha] - if alpha should be included in result
      * @return {String} */
-    toString(useAlpha = 1)      
+    toString(useAlpha = true)      
     { 
         const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
         return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
@@ -1034,7 +1035,7 @@ class Timer
     constructor(timeLeft) { this.time = timeLeft == undefined ? undefined : time + timeLeft; this.setTime = timeLeft; }
 
     /** Set the timer with seconds passed in
-     *  @param {Number} [timeLeft=0] - How much time left before the timer is elapsed in seconds */
+     *  @param {Number} [timeLeft] - How much time left before the timer is elapsed in seconds */
     set(timeLeft=0) { this.time = time + timeLeft; this.setTime = timeLeft; }
 
     /** Unset the timer */
@@ -1111,7 +1112,7 @@ let canvasFixedSize = vec2();
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let canvasPixelated = 1;
+let canvasPixelated = true;
 
 /** Default font used for text rendering
  *  @type {String}
@@ -1123,7 +1124,7 @@ let fontDefault = 'arial';
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let showSplashScreen = 0;
+let showSplashScreen = false;
 
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
@@ -1132,13 +1133,13 @@ let showSplashScreen = 0;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let glEnable = 1;
+let glEnable = true;
 
 /** Fixes slow rendering in some browsers by not compositing the WebGL canvas
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let glOverlay = 1;
+let glOverlay = true;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Tile sheet settings
@@ -1162,7 +1163,7 @@ let tileFixBleedScale = .3;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let enablePhysicsSolver = 1;
+let enablePhysicsSolver = true;
 
 /** Default object mass for collison calcuations (how heavy objects are)
  *  @type {Number}
@@ -1184,7 +1185,7 @@ let objectDefaultAngleDamping = 1;
 
 /** How much to bounce when a collision occurs (0-1)
  *  @type {Number}
- *  @default 0
+ *  @default
  *  @memberof Settings */
 let objectDefaultElasticity = 0;
 
@@ -1202,7 +1203,7 @@ let objectMaxSpeed = 1;
 
 /** How much gravity to apply to objects along the Y axis, negative is down
  *  @type {Number}
- *  @default 0
+ *  @default
  *  @memberof Settings */
 let gravity = 0;
 
@@ -1219,33 +1220,33 @@ let particleEmitRateScale = 1;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let gamepadsEnable = 1;
+let gamepadsEnable = true;
 
 /** If true, the dpad input is also routed to the left analog stick (for better accessability)
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let gamepadDirectionEmulateStick = 1;
+let gamepadDirectionEmulateStick = true;
 
 /** If true the WASD keys are also routed to the direction keys (for better accessability)
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let inputWASDEmulateDirection = 1;
+let inputWASDEmulateDirection = true;
 
 /** True if touch gamepad should appear on mobile devices
  *  - Supports left analog stick, 4 face buttons and start button (button 9)
  *  - Must be set by end of gameInit to be activated
  *  @type {Boolean}
- *  @default 0
+ *  @default
  *  @memberof Settings */
-let touchGamepadEnable = 0;
+let touchGamepadEnable = false;
 
 /** True if touch gamepad should be analog stick or false to use if 8 way dpad
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let touchGamepadAnalog = 1;
+let touchGamepadAnalog = true;
 
 /** Size of virutal gamepad for touch devices in pixels
  *  @type {Number}
@@ -1263,7 +1264,7 @@ let touchGamepadAlpha = .3;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let vibrateEnable = 1;
+let vibrateEnable = true;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Audio settings
@@ -1272,7 +1273,7 @@ let vibrateEnable = 1;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let soundEnable = 1;
+let soundEnable = true;
 
 /** Volume scale to apply to all sound, music and speech
  *  @type {Number}
@@ -1321,9 +1322,9 @@ let medalDisplayIconSize = 50;
 
 /** Set to stop medals from being unlockable (like if cheats are enabled)
  *  @type {Boolean}
- *  @default 0
+ *  @default
  *  @memberof Settings */
-let medalsPreventUnlock;
+let medalsPreventUnlock = false;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Setters for global variables
@@ -1394,12 +1395,12 @@ function setEnablePhysicsSolver(enable) { enablePhysicsSolver = enable; }
 function setObjectDefaultMass(mass) { objectDefaultMass = mass; }
 
 /** Set how much to slow velocity by each frame
- *  @param {Number} damping
+ *  @param {Number} damp
  *  @memberof Settings */
 function setObjectDefaultDamping(damp) { objectDefaultDamping = damp; }
 
 /** Set how much to slow angular velocity each frame
- *  @param {Number} damping
+ *  @param {Number} damp
  *  @memberof Settings */
 function setObjectDefaultAngleDamping(damp) { objectDefaultAngleDamping = damp; }
 
@@ -1419,9 +1420,9 @@ function setObjectDefaultFriction(friction) { objectDefaultFriction = friction;
 function setObjectMaxSpeed(speed) { objectMaxSpeed = speed; }
 
 /** Set how much gravity to apply to objects along the Y axis
- *  @param {Number} gravity
+ *  @param {Number} newGravity
  *  @memberof Settings */
-function setGravity(g) { gravity = g; }
+function setGravity(newGravity) { gravity = newGravity; }
 
 /** Set to scales emit rate of particles
  *  @param {Number} scale
@@ -1519,7 +1520,7 @@ function setMedalsPreventUnlock(preventUnlock) { medalsPreventUnlock = preventUn
 function setShowWatermark(show) { showWatermark = show; }
 
 /** Set key code used to toggle debug mode, Esc by default
- *  @param {Number} key
+ *  @param {String} key
  *  @memberof Debug */
 function setDebugKey(key) { debugKey = key; }
 /** 
@@ -1556,27 +1557,25 @@ function setDebugKey(key) { debugKey = key; }
 class EngineObject
 {
     /** Create an engine object and adds it to the list of objects
-     *  @param {Vector2} [pos=Vector2()]            - World space position of the object
-     *  @param {Vector2} [size=Vector2(1,1)]        - World space size of the object
-     *  @param {TileInfo} [tileInfo]                - Tile info to render object (undefined is untextured)
-     *  @param {Number}  [angle=0]                  - Angle the object is rotated by
-     *  @param {Color}   [color=Color()]            - Color to apply to tile when rendered
-     *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
+     *  @param {Vector2}  [pos=(0,0)]       - World space position of the object
+     *  @param {Vector2}  [size=(1,1)]      - World space size of the object
+     *  @param {TileInfo} [tileInfo]        - Tile info to render object (undefined is untextured)
+     *  @param {Number}   [angle]           - Angle the object is rotated by
+     *  @param {Color}    [color=(1,1,1,1)] - Color to apply to tile when rendered
+     *  @param {Number}   [renderOrder]     - Objects sorted by renderOrder before being rendered
      */
     constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color, renderOrder=0)
     {
         // set passed in params
-        ASSERT(isVector2(pos) && isVector2(size)); // ensure pos and size are vec2s
-        ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
-        ASSERT(!(renderOrder instanceof Color)); // prevent old style calls
-        // to fix old calls, replace with tile(tileIndex, tileSize)
+        ASSERT(isVector2(pos) && isVector2(size), 'ensure pos and size are vec2s');
+        ASSERT(typeof tileInfo !== 'number' || !tileInfo, 'old style tile setup');
 
         /** @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;
+        this.drawSize = undefined;
         /** @property {TileInfo} - Tile info to render object (undefined is untextured) */
         this.tileInfo = tileInfo;
         /** @property {Number}  - Angle to rotate the object */
@@ -1584,9 +1583,11 @@ class EngineObject
         /** @property {Color}   - Color to apply when rendered */
         this.color = color;
         /** @property {Color}   - Additive color to apply when rendered */
-        this.additiveColor;
+        this.additiveColor = undefined;
+        /** @property {Boolean} - Should it flip along y axis when rendered */
+        this.mirror = false;
 
-        // set object defaults
+        // physical properties
         /** @property {Number} [mass=objectDefaultMass]                 - How heavy the object is, static if 0 */
         this.mass         = objectDefaultMass;
         /** @property {Number} [damping=objectDefaultDamping]           - How much to slow down velocity each frame (0-1) */
@@ -1597,19 +1598,34 @@ class EngineObject
         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 */
+        /** @property {Number}  - How much to scale gravity by for this object */
         this.gravityScale = 1;
-        /** @property {Number} [renderOrder=0]                          - Objects are sorted by render order */
+        /** @property {Number}  - Objects are sorted by render order */
         this.renderOrder = renderOrder;
-        /** @property {Vector2} [velocity=Vector2()]                    - Velocity of the object */
+        /** @property {Vector2} - Velocity of the object */
         this.velocity = vec2();
-        /** @property {Number} [angleVelocity=0]                        - Angular velocity of the object */
+        /** @property {Number}  - Angular velocity of the object */
         this.angleVelocity = 0;
-
-        // init other internal object stuff
+        /** @property {Number}  - Track when object was created  */
         this.spawnTime = time;
+        /** @property {Array}   - List of children of this object */
         this.children = [];
+
+        // parent child system
+        /** @property {EngineObject} - Parent of object if in local space  */
+        this.parent = undefined;
+        /** @property {Vector2}      - Local position if child */
+        this.localPos = vec2();
+        /** @property {Number}       - Local angle if child  */
+        this.localAngle = 0;
+
+        // collision flags
+        /** @property {Boolean} - Object collides with the tile collision */
         this.collideTiles = false;
+        /** @property {Boolean} - Object collides with solid objects */
+        this.collideSolidObjects = false;
+        /** @property {Boolean} - Object collides with and blocks other objects */
+        this.isSolid = false;
 
         // add to list of objects
         engineObjects.push(this);
@@ -1826,7 +1842,7 @@ class EngineObject
      *  @param {EngineObject} object - the object to test against
      *  @return {Boolean}            - true if the collision should be resolved
      */
-    collideWithObject(object)         { return 1; }
+    collideWithObject(object)         { return true; }
 
     /** How long since the object was created
      *  @return {Number} */
@@ -1846,8 +1862,8 @@ class EngineObject
 
     /** Attaches a child to this with a given local transform
      *  @param {EngineObject} child
-     *  @param {Vector2}      [localPos=Vector2()]
-     *  @param {Number}       [localAngle=0] */
+     *  @param {Vector2}      [localPos=(0,0)]
+     *  @param {Number}       [localAngle] */
     addChild(child, localPos=vec2(), localAngle=0)
     {
         ASSERT(!child.parent && !this.children.includes(child));
@@ -1867,12 +1883,12 @@ class EngineObject
     }
 
     /** Set how this object collides
-     *  @param {Boolean} [collideSolidObjects=1] - Does it collide with solid objects
-     *  @param {Boolean} [isSolid=1]             - 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=1, isSolid=1, collideTiles=1)
+     *  @param {Boolean} [collideSolidObjects] - Does it collide with solid objects
+     *  @param {Boolean} [isSolid]             - Does it collide with and block other objects (expensive in large numbers)
+     *  @param {Boolean} [collideTiles]        - Does it collide with the tile collision */
+    setCollision(collideSolidObjects=true, isSolid=true, collideTiles=true)
     {
-        ASSERT(collideSolidObjects || !isSolid); // solid objects must be set to collide
+        ASSERT(collideSolidObjects || !isSolid, 'solid objects must be set to collide');
 
         this.collideSolidObjects = collideSolidObjects;
         this.isSolid = isSolid;
@@ -1963,9 +1979,9 @@ let drawCount;
  * Create a tile info object
  * - This can take vecs or floats for easier use and conversion
  * - If an index is passed in, the tile size and index will determine the position
- * @param {(Number|Vector2)} [pos=Vector2()]         - Top left corner of tile in pixels or index
- * @param {(Number|Vector2)} [size=tileSizeDefault]  - Size of tile in pixels
- * @param {Number} [textureIndex=0]                  - Texture index to use
+ * @param {(Number|Vector2)} [pos=(0,0)]            - Top left corner of tile in pixels or index
+ * @param {(Number|Vector2)} [size=tileSizeDefault] - Size of tile in pixels
+ * @param {Number} [textureIndex]                   - Texture index to use
  * @return {TileInfo}
  * @example
  * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -1977,14 +1993,14 @@ let drawCount;
 function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
 {
     // if size is a number, make it a vector
-    if (size.x == undefined)
+    if (typeof size === 'number')
     {
         ASSERT(size > 0);
         size = vec2(size);
     }
 
     // if pos is a number, use it as a tile index
-    if (pos.x == undefined)
+    if (typeof pos === 'number')
     {
         const textureInfo = textureInfos[textureIndex];
         if (textureInfo)
@@ -2006,9 +2022,9 @@ function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
 class TileInfo
 {
     /** Create a tile info object
-     *  @param {Vector2} [pos=Vector2()]        - Top left corner of tile in pixels
+     *  @param {Vector2} [pos=(0,0)]            - Top left corner of tile in pixels
      *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
-     *  @param {Number}  [textureIndex=0]       - Texture index to use
+     *  @param {Number}  [textureIndex]         - Texture index to use
      */
     constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0)
     {
@@ -2037,10 +2053,13 @@ class TileInfo
 /** Texture Info - Stores info about each texture */
 class TextureInfo
 {
-    // create a TextureInfo, called automatically by the engine
+    /**
+     * Create a TextureInfo, called automatically by the engine
+     * @param {HTMLImageElement} image
+     */
     constructor(image)
     {
-        /** @property {CanvasImageSource} - image source */
+        /** @property {HTMLImageElement} - image source */
         this.image = image;
         /** @property {Vector2} - size of the image */
         this.size = vec2(image.width, image.height);
@@ -2080,26 +2099,24 @@ function worldToScreen(worldPos)
 }
 
 /** 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=Vector2(1,1)]            - Size of the tile in world space
- *  @param {TileInfo}[tileInfo]                     - Tile info to use, untextured if undefined
- *  @param {Vector2} [tileSize=tileSizeDefault]     - Tile size in source pixels
- *  @param {Color}   [color=Color()]                - 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=Color(0,0,0,0)] - Additive color to be applied
- *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
- *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
- *  @param {CanvasRenderingContext2D} [context]     - Canvas 2D context to draw to
+ *  @param {Vector2} pos                        - Center of the tile in world space
+ *  @param {Vector2} [size=(1,1)]               - Size of the tile in world space
+ *  @param {TileInfo}[tileInfo]                 - Tile info to use, untextured if undefined
+ *  @param {Color}   [color=(1,1,1,1)]          - Color to modulate with
+ *  @param {Number}  [angle]                    - Angle to rotate by
+ *  @param {Boolean} [mirror]                   - If true image is flipped along the Y axis
+ *  @param {Color}   [additiveColor=(0,0,0,0)]  - Additive color to be applied
+ *  @param {Boolean} [useWebGL=glEnable]        - Use accelerated WebGL rendering
+ *  @param {Boolean} [screenSpace=false]        - If true the pos and size are in screen space
+ *  @param {CanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
 {
-    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
-    ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
-    // to fix old calls, replace with tile(tileIndex, tileSize)
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode'); 
+    ASSERT(typeof tileInfo !== 'number' || !tileInfo, 
+        'this is an old style calls, to fix replace it with tile(tileIndex, tileSize)');
 
-    showWatermark && ++drawCount;
     const textureInfo = tileInfo && tileInfo.getTextureInfo();
     if (useWebGL)
     {
@@ -2133,6 +2150,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     else
     {
         // normal canvas 2D rendering method (slower)
+        showWatermark && ++drawCount;
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             if (textureInfo)
@@ -2158,51 +2176,40 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
 
 /** Draw colored rect centered on pos
  *  @param {Vector2} pos
- *  @param {Vector2} [size=Vector2(1,1)]
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [angle=0]
+ *  @param {Vector2} [size=(1,1)]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [angle]
  *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace=0]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
 { 
-    drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace, context); 
+    drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context); 
 }
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
- *  @param {Color}   [color=Color()]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace=0]
- *  @param {CanvasRenderingContext2D} [context]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Boolean} [screenSpace=false]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace, context)
+function drawPoly(points, color=new Color, screenSpace, context=mainContext)
 {
-    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
-
-    if (useWebGL)
-        glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
-    else
-    {
-        // draw using canvas
-        if (!context)
-            context = mainContext;
-        context.fillStyle = color;
-        context.beginPath();
-        for (const point of screenSpace ? points : points.map(worldToScreen))
-            context.lineTo(point.x, point.y);
-        context.fill();
-    }
+    context.fillStyle = color.toString();
+    context.beginPath();
+    for (const point of screenSpace ? points : points.map(worldToScreen))
+        context.lineTo(point.x, point.y);
+    context.fill();
 }
 
 /** Draw colored line between two points
  *  @param {Vector2} posA
  *  @param {Vector2} posB
- *  @param {Number}  [thickness=.1]
- *  @param {Color}   [color=Color()]
+ *  @param {Number}  [thickness]
+ *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace=0]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
@@ -2218,7 +2225,7 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, contex
  *  @param {Number}   angle
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
- *  @param {Boolean} [screenSpace=0]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
 function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
@@ -2238,13 +2245,13 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
 }
 
 /** Enable normal or additive blend mode
- *  @param {Boolean} [additive=0]
+ *  @param {Boolean} [additive]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
 function setBlendMode(additive, useWebGL=glEnable, context)
 {
-    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
     if (useWebGL)
         glAdditive = additive;
     else
@@ -2259,11 +2266,11 @@ function setBlendMode(additive, useWebGL=glEnable, context)
  *  Automatically splits new lines into rows
  *  @param {String}  text
  *  @param {Vector2} pos
- *  @param {Number}  [size=1]
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [lineWidth=0]
- *  @param {Color}   [lineColor=Color(0,0,0)]
- *  @param {String}  [textAlign='center']
+ *  @param {Number}  [size]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [lineWidth]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
@@ -2276,19 +2283,19 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  Automatically splits new lines into rows
  *  @param {String}  text
  *  @param {Vector2} pos
- *  @param {Number}  [size=1]
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [lineWidth=0]
- *  @param {Color}   [lineColor=Color(0,0,0)]
- *  @param {String}  [textAlign='center']
+ *  @param {Number}  [size]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [lineWidth]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {CanvasTextAlign}  [textAlign]
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
 function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext)
 {
-    context.fillStyle = color;
+    context.fillStyle = color.toString();
     context.lineWidth = lineWidth;
-    context.strokeStyle = lineColor;
+    context.strokeStyle = lineColor.toString();
     context.textAlign = textAlign;
     context.font = size + 'px '+ font;
     context.textBaseline = 'middle';
@@ -2322,9 +2329,9 @@ let engineFontImage;
 class FontImage
 {
     /** Create an image font
-     *  @param {HTMLImageElement} [image] - Image for the font, if undefined default font is used
-     *  @param {Vector2} [tileSize=vec2(8)] - Size of the font source tiles
-     *  @param {Vector2} [paddingSize=vec2(0,1)] - How much extra space to add between characters
+     *  @param {HTMLImageElement} [image]    - Image for the font, if undefined default font is used
+     *  @param {Vector2} [tileSize=(8,8)]    - Size of the font source tiles
+     *  @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
      *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)
@@ -2353,7 +2360,7 @@ class FontImage
     /** Draw text in screen space using the image font
      *  @param {String}  text
      *  @param {Vector2} pos
-     *  @param {Number}  [scale=4]
+     *  @param {Number}  [scale]
      *  @param {Boolean} [center]
      */
     drawTextScreen(text, pos, scale=4, center)
@@ -2371,7 +2378,7 @@ class FontImage
             for(let j=line.length; j--;)
             {
                 // draw each character
-                let charCode = line[j].charCodeAt();
+                let charCode = line[j].charCodeAt(0);
                 if (charCode < 32 || charCode > 127)
                     charCode = 127; // unknown character
 
@@ -2395,7 +2402,7 @@ class FontImage
 /** Returns true if fullscreen mode is active
  *  @return {Boolean}
  *  @memberof Draw */
-function isFullscreen() { return document.fullscreenElement; }
+function isFullscreen() { return !!document.fullscreenElement; }
 
 /** Toggle fullsceen mode
  *  @memberof Draw */
@@ -2421,28 +2428,37 @@ function toggleFullscreen()
 
 
 /** Returns true if device key is down
- *  @param {Number} key
- *  @param {Number} [device=0]
+ *  @param {String|Number} key
+ *  @param {Number} [device]
  *  @return {Boolean}
  *  @memberof Input */
 function keyIsDown(key, device=0)
-{ return inputData[device] && inputData[device][key] & 1; }
+{ 
+    ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
+    return inputData[device] && !!(inputData[device][key] & 1); 
+}
 
 /** Returns true if device key was pressed this frame
- *  @param {Number} key
- *  @param {Number} [device=0]
+ *  @param {String|Number} key
+ *  @param {Number} [device]
  *  @return {Boolean}
  *  @memberof Input */
 function keyWasPressed(key, device=0)
-{ return inputData[device] && inputData[device][key] & 2 ? 1 : 0; }
+{ 
+    ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
+    return inputData[device] && !!(inputData[device][key] & 2); 
+}
 
 /** Returns true if device key was released this frame
- *  @param {Number} key
- *  @param {Number} [device=0]
+ *  @param {String|Number} key
+ *  @param {Number} [device]
  *  @return {Boolean}
  *  @memberof Input */
 function keyWasReleased(key, device=0)
-{ return inputData[device] && inputData[device][key] & 4 ? 1 : 0; }
+{ 
+    ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
+    return inputData[device] && !!(inputData[device][key] & 4);
+}
 
 /** Clears all input
  *  @memberof Input */
@@ -2487,16 +2503,16 @@ let mouseWheel = 0;
 /** Returns true if user is using gamepad (has more recently pressed a gamepad button)
  *  @type {Boolean}
  *  @memberof Input */
-let isUsingGamepad = 0;
+let isUsingGamepad = false;
 
 /** Prevents input continuing to the default browser handling (false by default)
  *  @type {Boolean}
  *  @memberof Input */
-let preventDefaultInput = 0;
+let preventDefaultInput = false;
 
 /** Returns true if gamepad button is down
  *  @param {Number} button
- *  @param {Number} [gamepad=0]
+ *  @param {Number} [gamepad]
  *  @return {Boolean}
  *  @memberof Input */
 function gamepadIsDown(button, gamepad=0)
@@ -2504,7 +2520,7 @@ function gamepadIsDown(button, gamepad=0)
 
 /** Returns true if gamepad button was pressed
  *  @param {Number} button
- *  @param {Number} [gamepad=0]
+ *  @param {Number} [gamepad]
  *  @return {Boolean}
  *  @memberof Input */
 function gamepadWasPressed(button, gamepad=0)
@@ -2512,7 +2528,7 @@ function gamepadWasPressed(button, gamepad=0)
 
 /** Returns true if gamepad button was released
  *  @param {Number} button
- *  @param {Number} [gamepad=0]
+ *  @param {Number} [gamepad]
  *  @return {Boolean}
  *  @memberof Input */
 function gamepadWasReleased(button, gamepad=0)
@@ -2520,7 +2536,7 @@ function gamepadWasReleased(button, gamepad=0)
 
 /** Returns gamepad stick value
  *  @param {Number} stick
- *  @param {Number} [gamepad=0]
+ *  @param {Number} [gamepad]
  *  @return {Vector2}
  *  @memberof Input */
 function gamepadStick(stick,  gamepad=0)
@@ -2563,9 +2579,10 @@ function inputUpdatePost()
         if (debug && e.target != document.body) return;
         if (!e.repeat)
         {
-            inputData[isUsingGamepad = 0][e.which] = 3;
+            isUsingGamepad = false;
+            inputData[0][e.code] = 3;
             if (inputWASDEmulateDirection)
-                inputData[0][remapKey(e.which)] = 3;
+                inputData[0][remapKey(e.code)] = 3;
         }
         preventDefaultInput && e.preventDefault();
     }
@@ -2573,26 +2590,29 @@ function inputUpdatePost()
     onkeyup = (e)=>
     {
         if (debug && e.target != document.body) return;
-        inputData[0][e.which] = 4;
+        inputData[0][e.code] = 4;
         if (inputWASDEmulateDirection)
-            inputData[0][remapKey(e.which)] = 4;
+            inputData[0][remapKey(e.code)] = 4;
     }
 
     // handle remapping wasd keys to directions
     function remapKey(c)
-    { 
+    {
         return inputWASDEmulateDirection ? 
-            c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c; 
+            c == 'KeyW' ? 'ArrowUp' : 
+            c == 'KeyS' ? 'ArrowDown' : 
+            c == 'KeyA' ? 'ArrowLeft' : 
+            c == 'KeyD' ? 'ArrowRight' : c : c;
     }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Mouse event handlers
 
-onmousedown = (e)=> {inputData[isUsingGamepad = 0][e.button] = 3; onmousemove(e); e.button && e.preventDefault();}
+onmousedown = (e)=> {isUsingGamepad = false; inputData[0][e.button] = 3; mousePosScreen = mouseToScreen(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));
+onwheel     = (e)=> mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
 oncontextmenu = (e)=> false; // prevent right click menu
 
 // convert a mouse or touch event position to screen space
@@ -2630,7 +2650,7 @@ function gamepadsUpdate()
             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);
+                data[j] = touchGamepadButtons[i] ? gamepadIsDown(j,0) ? 1 : 3 : gamepadIsDown(j,0) ? 4 : 0;
             }
         }
     }
@@ -2662,18 +2682,23 @@ function gamepadsUpdate()
             for (let j = gamepad.buttons.length; j--;)
             {
                 const button = gamepad.buttons[j];
-                data[j] = button.pressed ? 1 + 2*!gamepadIsDown(j,i) : 4*gamepadIsDown(j,i);
-                isUsingGamepad |= !i && button.pressed;
-                touchGamepadEnable && touchGamepadTimer.unset(); // disable touch gamepad if using real gamepad
+                const wasDown = gamepadIsDown(j,i);
+                data[j] = button.pressed ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
+                isUsingGamepad ||= !i && button.pressed;
             }
 
             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));
+                const dpad = vec2(
+                    (gamepadIsDown(15,i)&&1) - (gamepadIsDown(14,i)&&1), 
+                    (gamepadIsDown(12,i)&&1) - (gamepadIsDown(13,i)&&1));
                 if (dpad.lengthSquared())
                     sticks[0] = dpad.clampLength();
             }
+
+            // disable touch gamepad if using real gamepad
+            touchGamepadEnable && isUsingGamepad && touchGamepadTimer.unset(); 
         }
     }
 }
@@ -2681,9 +2706,9 @@ function gamepadsUpdate()
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Pulse the vibration hardware if it exists
- *  @param {Number} [pattern=100] - a single value in miliseconds or vibration interval array
+ *  @param {Number|Array} [pattern] - single value in ms or vibration interval array
  *  @memberof Input */
-function vibrate(pattern)
+function vibrate(pattern=100)
 { vibrateEnable && navigator && navigator.vibrate && navigator.vibrate(pattern); }
 
 /** Cancel any ongoing vibration
@@ -2701,29 +2726,28 @@ const isTouchDevice = window.ontouchstart !== undefined;
 if (isTouchDevice)
 {
     // override mouse events
-    let wasTouching, mouseDown = onmousedown, mouseUp = onmouseup;
+    let wasTouching;
     onmousedown = onmouseup = ()=> 0;
 
     // handle all touch events the same way
     ontouchstart = ontouchmove = ontouchend = (e)=>
     {
-        e.button = 0; // all touches are left click
-
         // fix stalled audio on mobile
         if (soundEnable)
             audioContext ? audioContext.resume() : zzfx(0);
 
         // check if touching and pass to mouse events
         const touching = e.touches.length;
+        const button = 0; // all touches are left mouse button
         if (touching)
         {
             // set event pos and pass it along
-            e.x = e.touches[0].clientX;
-            e.y = e.touches[0].clientY;
-            wasTouching ? onmousemove(e) : mouseDown(e);
+            const p = vec2(e.touches[0].clientX, e.touches[0].clientY);
+            mousePosScreen = mouseToScreen(p);
+            wasTouching ? isUsingGamepad = false : inputData[0][button] = 3;
         }
         else if (wasTouching)
-            mouseUp(e);
+            inputData[0][button] = inputData[0][button] & 2 | 4;
 
         // set was touching
         wasTouching = touching;
@@ -2804,8 +2828,8 @@ function createTouchGamepad()
         }
 
         // call default touch handler and set to using gamepad
-        touchHandler(e);
-        isUsingGamepad = 1;
+        touchHandler.bind(window)(e);
+        isUsingGamepad = true;
         
         // must return true so the document will get focus
         return true;
@@ -2819,7 +2843,7 @@ function touchGamepadRender()
         return;
     
     // fade off when not touching or paused
-    const alpha = percent(touchGamepadTimer, 4, 3);
+    const alpha = percent(touchGamepadTimer.get(), 4, 3);
     if (!alpha || paused)
         return;
 
@@ -2923,13 +2947,13 @@ class Sound
 
     /** Play the sound
      *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
-     *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
-     *  @param {Number}  [pitch=1] - How much to scale pitch by (also adjusted by this.randomness)
-     *  @param {Number}  [randomnessScale=1] - How much to scale randomness
-     *  @param {Boolean} [loop=0] - Should the sound loop
+     *  @param {Number}  [volume] - How much to scale volume by (in addition to range fade)
+     *  @param {Number}  [pitch] - How much to scale pitch by (also adjusted by this.randomness)
+     *  @param {Number}  [randomnessScale] - How much to scale randomness
+     *  @param {Boolean} [loop] - Should the sound loop
      *  @return {AudioBufferSourceNode} - The audio source node
      */
-    play(pos, volume=1, pitch=1, randomnessScale=1, loop=0)
+    play(pos, volume=1, pitch=1, randomnessScale=1, loop=false)
     {
         if (!soundEnable || !this.sampleChannels) return;
 
@@ -2962,8 +2986,13 @@ class Sound
     {
         if (this.source)
             this.source.stop();
-        this.source = 0;
+        this.source = undefined;
     }
+    
+    /** Get source of most recent instance of this sound that was played
+     *  @return {AudioBufferSourceNode}
+     */
+    getSource() { return this.source; }
 
     /** Play the sound as a note with a semitone offset
      *  @param {Number}  semitoneOffset - How many semitones to offset pitch
@@ -2979,12 +3008,7 @@ class Sound
      */
     getDuration() 
     { return this.sampleChannels && this.sampleChannels[0].length / this.sampleRate; }
-
-    /** Check if the last instance of this sound is playing
-     *  @return {Boolean} - True if the sound is playing
-     */
-    isPlaying() { return this.source && !this.source.ended; }
-
+    
     /** Check if sound is loading, for sounds fetched from a url
      *  @return {Boolean} - True if sound is loading and not ready to play
      */
@@ -3005,13 +3029,13 @@ class SoundWave extends Sound
 {
     /** Create a sound object and cache the wave file for later use
      *  @param {String} filename - Filename of audio file to load
-     *  @param {Number} [randomness=0] - How much to randomize frequency each time sound plays
+     *  @param {Number} [randomness] - How much to randomize frequency each time sound plays
      *  @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(filename, randomness=0, range, taper)
     {
-        super(0, range, taper);
+        super(undefined, range, taper);
         this.randomness = randomness;
 
         if (!soundEnable) return;
@@ -3065,11 +3089,11 @@ let soundDecoderContext; // audio context used only to decode audio files
 class Music extends Sound
 {
     /** Create a music object and cache the zzfx music samples for later use
-     *  @param {Array} zzfxMusic - Array of zzfx music parameters
+     *  @param {[Array, Array, Array, Number]} zzfxMusic - Array of zzfx music parameters
      */
     constructor(zzfxMusic)
     {
-        super();
+        super(undefined);
 
         if (!soundEnable) return;
         this.randomness = 0;
@@ -3082,17 +3106,17 @@ class Music extends Sound
      *  @param {Boolean} [loop=1] - True if the music should loop
      *  @return {AudioBufferSourceNode} - The audio source node
      */
-    playMusic(volume, loop = 1)
-    { return super.play(0, volume, 1, 1, loop); }
+    playMusic(volume, loop = false)
+    { return super.play(undefined, volume, 1, 1, loop); }
 }
 
 /** Play an mp3, ogg, or wav audio from a local file or url
  *  @param {String}  url - Location of sound file to play
- *  @param {Number}  [volume=1] - How much to scale volume by
- *  @param {Boolean} [loop=1] - True if the music should loop
+ *  @param {Number}  [volume] - How much to scale volume by
+ *  @param {Boolean} [loop] - True if the music should loop
  *  @return {HTMLAudioElement} - The audio element for this sound
  *  @memberof Audio */
-function playAudioFile(url, volume=1, loop=1)
+function playAudioFile(url, volume=1, loop=false)
 {
     if (!soundEnable) return;
 
@@ -3106,9 +3130,9 @@ function playAudioFile(url, volume=1, loop=1)
 /** Speak text with passed in settings
  *  @param {String} text - The text to speak
  *  @param {String} [language] - The language/accent to use (examples: en, it, ru, ja, zh)
- *  @param {Number} [volume=1] - How much to scale volume by
- *  @param {Number} [rate=1] - How quickly to speak
- *  @param {Number} [pitch=1] - How much to change the pitch by
+ *  @param {Number} [volume] - How much to scale volume by
+ *  @param {Number} [rate] - How quickly to speak
+ *  @param {Number} [pitch] - How much to change the pitch by
  *  @return {SpeechSynthesisUtterance} - The utterance that was spoken
  *  @memberof Audio */
 function speak(text, language='', volume=1, rate=1, pitch=1)
@@ -3135,7 +3159,7 @@ function speakStop() {speechSynthesis && speechSynthesis.cancel();}
 
 /** Get frequency of a note on a musical scale
  *  @param {Number} semitoneOffset - How many semitones away from the root note
- *  @param {Number} [rootNoteFrequency=220] - Frequency at semitone offset 0
+ *  @param {Number} [rootFrequency=220] - Frequency at semitone offset 0
  *  @return {Number} - The frequency of the note
  *  @memberof Audio */
 function getNoteFrequency(semitoneOffset, rootFrequency=220)
@@ -3149,14 +3173,14 @@ let audioContext;
 
 /** Play cached audio samples with given settings
  *  @param {Array}   sampleChannels - Array of arrays of samples to play (for stereo playback)
- *  @param {Number}  [volume=1] - How much to scale volume by
- *  @param {Number}  [rate=1] - The playback rate to use
- *  @param {Number}  [pan=0] - How much to apply stereo panning
- *  @param {Boolean} [loop=0] - True if the sound should loop when it reaches the end
+ *  @param {Number}  [volume] - How much to scale volume by
+ *  @param {Number}  [rate] - The playback rate to use
+ *  @param {Number}  [pan] - How much to apply stereo panning
+ *  @param {Boolean} [loop] - True if the sound should loop when it reaches the end
  *  @param {Number}  [sampleRate=44100] - Sample rate for the sound
  *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0, sampleRate=zzfxR) 
+function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=zzfxR) 
 {
     if (!soundEnable) return;
 
@@ -3196,7 +3220,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0, sampleRate
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// ZzFXMicro - Zuper Zmall Zound Zynth - v1.3.0 by Frank Force
+// ZzFXMicro - Zuper Zmall Zound Zynth - v1.3.1 by Frank Force
 
 /** Generate and play a ZzFX sound
  *  
@@ -3212,27 +3236,27 @@ function zzfx(...zzfxSound) { return playSamples([zzfxG(...zzfxSound)]); }
 const zzfxR = 44100; 
 
 /** Generate samples for a ZzFX sound
- *  @param {Number}  [volume=1] - Volume scale (percent)
- *  @param {Number}  [randomness=.05] - How much to randomize frequency (percent Hz)
- *  @param {Number}  [frequency=220] - Frequency of sound (Hz)
- *  @param {Number}  [attack=0] - Attack time, how fast sound starts (seconds)
- *  @param {Number}  [sustain=0] - Sustain time, how long sound holds (seconds)
- *  @param {Number}  [release=.1] - Release time, how fast sound fades out (seconds)
- *  @param {Number}  [shape=0] - Shape of the sound wave
- *  @param {Number}  [shapeCurve=1] - Squarenes of wave (0=square, 1=normal, 2=pointy)
- *  @param {Number}  [slide=0] - How much to slide frequency (kHz/s)
- *  @param {Number}  [deltaSlide=0] - How much to change slide (kHz/s/s)
- *  @param {Number}  [pitchJump=0] - Frequency of pitch jump (Hz)
- *  @param {Number}  [pitchJumpTime=0] - Time of pitch jump (seconds)
- *  @param {Number}  [repeatTime=0] - Resets some parameters periodically (seconds)
- *  @param {Number}  [noise=0] - How much random noise to add (percent)
- *  @param {Number}  [modulation=0] - Frequency of modulation wave, negative flips phase (Hz)
- *  @param {Number}  [bitCrush=0] - Resamples at a lower frequency in (samples*100)
- *  @param {Number}  [delay=0] - Overlap sound with itself for reverb and flanger effects (seconds)
- *  @param {Number}  [sustainVolume=1] - Volume level for sustain (percent)
- *  @param {Number}  [decay=0] - Decay time, how long to reach sustain after attack (seconds)
- *  @param {Number}  [tremolo=0] - Trembling effect, rate controlled by repeat time (precent)
- *  @param {Number}  [filter=0] - Filter cutoff frequency, positive for HPF, negative for LPF (Hz)
+ *  @param {Number}  [volume] - Volume scale (percent)
+ *  @param {Number}  [randomness] - How much to randomize frequency (percent Hz)
+ *  @param {Number}  [frequency] - Frequency of sound (Hz)
+ *  @param {Number}  [attack] - Attack time, how fast sound starts (seconds)
+ *  @param {Number}  [sustain] - Sustain time, how long sound holds (seconds)
+ *  @param {Number}  [release] - Release time, how fast sound fades out (seconds)
+ *  @param {Number}  [shape] - Shape of the sound wave
+ *  @param {Number}  [shapeCurve] - Squarenes of wave (0=square, 1=normal, 2=pointy)
+ *  @param {Number}  [slide] - How much to slide frequency (kHz/s)
+ *  @param {Number}  [deltaSlide] - How much to change slide (kHz/s/s)
+ *  @param {Number}  [pitchJump] - Frequency of pitch jump (Hz)
+ *  @param {Number}  [pitchJumpTime] - Time of pitch jump (seconds)
+ *  @param {Number}  [repeatTime] - Resets some parameters periodically (seconds)
+ *  @param {Number}  [noise] - How much random noise to add (percent)
+ *  @param {Number}  [modulation] - Frequency of modulation wave, negative flips phase (Hz)
+ *  @param {Number}  [bitCrush] - Resamples at a lower frequency in (samples*100)
+ *  @param {Number}  [delay] - Overlap sound with itself for reverb and flanger effects (seconds)
+ *  @param {Number}  [sustainVolume] - Volume level for sustain (percent)
+ *  @param {Number}  [decay] - Decay time, how long to reach sustain after attack (seconds)
+ *  @param {Number}  [tremolo] - Trembling effect, rate controlled by repeat time (precent)
+ *  @param {Number}  [filter] - Filter cutoff frequency, positive for HPF, negative for LPF (Hz)
  *  @return {Array} - Array of audio samples
  *  @memberof Audio
  */
@@ -3280,7 +3304,7 @@ function zzfxG
         if (!(++c%(bitCrush*100|0)))                   // bit crush
         {
             s = shape? shape>1? shape>2? shape>3?      // wave shape
-                Math.sin(t*t) :                        // 4 noise
+                Math.sin(t**3) :                       // 4 noise
                 clamp(Math.tan(t),1,-1):               // 3 tan
                 1-(2*t/PI2%2+2)%2:                     // 2 saw
                 1-4*abs(Math.round(t/PI2)-t/PI2):      // 1 triangle
@@ -3337,7 +3361,7 @@ function zzfxG
  *  @param {Array} instruments - Array of ZzFX sound paramaters
  *  @param {Array} patterns - Array of pattern data
  *  @param {Array} sequence - Array of pattern indexes
- *  @param {Number} [BPM=125] - Playback speed of the song in BPM
+ *  @param {Number} [BPM] - Playback speed of the song in BPM
  *  @return {Array} - Left and right channel sample data
  *  @memberof Audio */
 function zzfxM(instruments, patterns, sequence, BPM = 125) 
@@ -3376,10 +3400,10 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
       patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
 
       // check if there are more channels
-      hasMore ||= !!patterns[patternIndex][channelIndex];
+      hasMore |= patterns[patternIndex][channelIndex]&&1;
 
       // get next offset, use the length of first channel
-      nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - !notFirstBeat) * beatLength;
+      nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
       // for each beat in pattern, plus one extra if end of sequence
       isSequenceEnd = sequenceIndex == sequence.length - 1;
       for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
@@ -3395,7 +3419,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
         for (j = 0; j < beatLength && notFirstBeat;
 
             // fade off attenuation at end of beat if stopping note, prevents clicking
-            j++ > beatLength - 99 && stop ? attenuation += (attenuation < 1) / 99 : 0
+            j++ > beatLength - 99 && stop && attenuation < 1? attenuation += 1 / 99 : 0
         ) {
           // copy sample to stereo buffers with panning
           sample = (1 - attenuation) * sampleBuffer[sampleOffset++] / 2 || 0;
@@ -3471,7 +3495,7 @@ function initTileCollision(size)
 
 /** Set tile collision data
  *  @param {Vector2} pos
- *  @param {Number}  [data=0]
+ *  @param {Number}  [data]
  *  @memberof TileCollision */
 function setTileCollisionData(pos, data=0)
 {
@@ -3489,7 +3513,7 @@ function getTileCollisionData(pos)
 
 /** Check if collision with another object should occur
  *  @param {Vector2}      pos
- *  @param {Vector2}      [size=Vector2(1,1)]
+ *  @param {Vector2}      [size=(1,1)]
  *  @param {EngineObject} [object]
  *  @return {Boolean}
  *  @memberof TileCollision */
@@ -3504,7 +3528,7 @@ function tileCollisionTest(pos, size=vec2(), object)
     {
         const tileData = tileCollision[y*tileCollisionSize.x+x];
         if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
-            return 1;
+            return true;
     }
 }
 
@@ -3570,11 +3594,11 @@ function tileCollisionRaycast(posStart, posEnd, object)
 class TileLayerData
 {
     /** Create a tile layer data object, one for each tile in a TileLayer
-     *  @param {Number}  [tile]          - The tile to use, untextured if undefined
-     *  @param {Number}  [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=Color()] - Color of the tile */
-    constructor(tile, direction=0, mirror=0, color=new Color())
+     *  @param {Number}  [tile]      - The tile to use, untextured if undefined
+     *  @param {Number}  [direction] - Integer direction of tile, in 90 degree increments
+     *  @param {Boolean} [mirror]    - If the tile should be mirrored along the x axis
+     *  @param {Color}   [color]     - Color of the tile */
+    constructor(tile, direction=0, mirror=false, color=new Color())
     {
         /** @property {Number}  - The tile to use, untextured if undefined */
         this.tile      = tile;
@@ -3587,7 +3611,7 @@ class TileLayerData
     }
 
     /** Set this tile to clear, it will not be rendered */
-    clear() { this.tile = this.direction = this.mirror = 0; color = new Color; }
+    clear() { this.tile = this.direction = 0; this.mirror = false; this.color = new Color; }
 }
 
 /**
@@ -3604,25 +3628,25 @@ class TileLayerData
  */
 class TileLayer extends EngineObject
 {
-/** Create a tile layer object
-    *  @param {Vector2} [position=Vector2()]       - World space position
-    *  @param {Vector2} [size=tileCollisionSize]   - World space size
-    *  @param {TileInfo} [tileInfo]                - Tile info for layer
-    *  @param {Vector2} [scale=Vector2(1,1)]       - How much to scale this layer when rendered
-    *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
+    /** Create a tile layer object
+    *  @param {Vector2}  [position=(0,0)]     - World space position
+    *  @param {Vector2}  [size=tileCollisionSize] - World space size
+    *  @param {TileInfo} [tileInfo]    - Tile info for layer
+    *  @param {Vector2}  [scale=(1,1)] - How much to scale this layer when rendered
+    *  @param {Number}   [renderOrder] - Objects are sorted by renderOrder
     */
-constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderOrder=0)
+    constructor(position, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderOrder=0)
     {
-        super(pos, size, tileInfo, 0, undefined, renderOrder);
+        super(position, size, tileInfo, 0, undefined, renderOrder);
 
-        /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
+        /** @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 */
+        /** @property {Vector2} - How much to scale this layer when rendered */
         this.scale = scale;
-        /** @property {Boolean} [isOverlay=0]    - If true this layer will render to overlay canvas and appear above all objects */
-        this.isOverlay;
+        /** @property {Boolean} - If true this layer will render to overlay canvas and appear above all objects */
+        this.isOverlay = false;
 
         // init tile data
         this.data = [];
@@ -3631,10 +3655,10 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     }
     
     /** Set data at a given position in the array 
-     *  @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)
+     *  @param {Vector2}       layerPos - Local position in array
+     *  @param {TileLayerData} data     - Data to set
+     *  @param {Boolean}       [redraw] - Force the tile to redraw if true */
+    setData(layerPos, data, redraw=false)
     {
         if (layerPos.arrayCheck(this.size))
         {
@@ -3655,7 +3679,7 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     // Render the tile layer, called automatically by the engine
     render()
     {
-        ASSERT(mainContext != this.context); // must call redrawEnd() after drawing tiles
+        ASSERT(mainContext != this.context, 'must call redrawEnd() after drawing tiles');
 
         // flush and copy gl canvas because tile canvas does not use webgl
         glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
@@ -3670,33 +3694,38 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     }
 
     /** Draw all the tile data to an offscreen canvas 
-     *  - This may be slow in some browsers
-    */
+     *  - This may be slow in some browsers but only needs to be done once */
     redraw()
     {
-        this.redrawStart(1);
-        this.drawAllTileData();
+        this.redrawStart(true);
+        for (let x = this.size.x; x--;)
+        for (let y = this.size.y; y--;)
+            this.drawTileData(vec2(x,y), false);
         this.redrawEnd();
     }
 
     /** Call to start the redraw process
-     *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
-    redrawStart(clear = 0)
+     *  - This can be used to manually update small parts of the level
+     *  @param {Boolean} [clear] - Should it clear the canvas before drawing */
+    redrawStart(clear=false)
     {
         // save current render settings
+        /** @type {[HTMLCanvasElement, CanvasRenderingContext2D, Vector2, Vector2, number]} */
         this.savedRenderSettings = [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale];
 
-        // hack: use normal rendering system to render the tiles
+        // use webgl rendering system to render the tiles if enabled
+        // this works by temporally taking control of the rendering system
         mainCanvas = this.canvas;
         mainContext = this.context;
+        mainCanvasSize = this.size.multiply(this.tileInfo.size);
         cameraPos = this.size.scale(.5);
         cameraScale = this.tileInfo.size.x;
 
         if (clear)
         {
             // clear and set size
-            mainCanvas.width  = this.size.x * this.tileInfo.size.x;
-            mainCanvas.height = this.size.y * this.tileInfo.size.y;
+            mainCanvas.width  = mainCanvasSize.x;
+            mainCanvas.height = mainCanvasSize.y;
         }
 
         // begin a new render for the tile canvas
@@ -3706,40 +3735,41 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     /** Call to end the redraw process */
     redrawEnd()
     {
-        ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
-        glEnable && glCopyToContext(mainContext, 1);
+        ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
+        glEnable && glCopyToContext(mainContext, true);
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal
         [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
     }
 
-    /** Draw the tile at a given position
-     *  @param {Vector2} layerPos */
-    drawTileData(layerPos)
+    /** Draw the tile at a given position in the tile grid
+     *  This can be used to clear out tiles when they are destroyed
+     *  Tiles can also be redrawn if isinde a redrawStart/End block
+     *  @param {Vector2} layerPos 
+     *  @param {Boolean} [clear] - should the old tile be cleared out
+     */
+    drawTileData(layerPos, clear=true)
     {
-        // first clear out where the tile was
-        const pos = layerPos.floor().add(this.pos).add(vec2(.5));
-        this.drawCanvas2D(pos, vec2(1), 0, 0, (context)=>context.clearRect(-.5, -.5, 1, 1));
+        // clear out where the tile was, for full opaque tiles this can be skipped
+        const s = this.tileInfo.size;
+        if (clear)
+        {
+            const pos = layerPos.multiply(s);
+            this.context.clearRect(pos.x, this.canvas.height-pos.y, s.x, -s.y);
+        }
 
         // draw the tile if not undefined
         const d = this.getData(layerPos);
         if (d.tile != undefined)
         {
-            ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
-            const tileInfo = tile(d.tile, this.tileInfo.size, this.tileInfo.textureIndex);
+            const pos = this.pos.add(layerPos).add(vec2(.5));
+            ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
+            const tileInfo = tile(d.tile, s, this.tileInfo.textureIndex);
             drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
         }
     }
 
-    /** Draw all the tiles in this layer */
-    drawAllTileData()
-    {
-        for (let x = this.size.x; x--;)
-        for (let y = this.size.y; y--;)
-             this.drawTileData(vec2(x,y));
-    }
-
     /** Draw directly to the 2D canvas in world space (bipass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
@@ -3759,11 +3789,11 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
         context.restore();
     }
 
-    /** Draw a tile directly onto the layer canvas
+    /** Draw a tile directly onto the layer canvas in world space
      *  @param {Vector2}  pos
-     *  @param {Vector2}  [size=Vector2(1,1)]
+     *  @param {Vector2}  [size=(1,1)]
      *  @param {TileInfo} [tileInfo]
-     *  @param {Color}    [color=Color()]
+     *  @param {Color}    [color=(1,1,1,1)]
      *  @param {Number}   [angle=0]
      *  @param {Boolean}  [mirror=0] */
     drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
@@ -3788,13 +3818,13 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
         });
     }
 
-    /** Draw a rectangle directly onto the layer canvas
+    /** Draw a rectangle directly onto the layer canvas in world space
      *  @param {Vector2} pos
-     *  @param {Vector2} [size=Vector2(1,1)]
-     *  @param {Color}   [color=Color()]
+     *  @param {Vector2} [size=(1,1)]
+     *  @param {Color}   [color=(1,1,1,1)]
      *  @param {Number}  [angle=0] */
     drawRect(pos, size, color, angle) 
-    { this.drawTile(pos, size, -1, 0, color, angle); }
+    { this.drawTile(pos, size, undefined, color, angle); }
 }
 /** 
  * LittleJS Particle System
@@ -3823,36 +3853,36 @@ class ParticleEmitter extends EngineObject
 {
     /** Create a particle system with the given settings
      *  @param {Vector2} position - World space position of the emitter
-     *  @param {Number}  [angle=0] - Angle to emit the particles
-     *  @param {Number|Vector2}  [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} [angle] - Angle to emit the particles
+     *  @param {Number|Vector2}  [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
+     *  @param {Number} [emitTime] - How long to stay alive (0 is forever)
+     *  @param {Number} [emitRate] - How many particles per second to spawn, does not emit if 0
+     *  @param {Number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
      *  @param {TileInfo} [tileInfo] - Tile info to render particles (undefined is untextured)
-     *  @param {Color}   [colorStartA=Color()] - Color at start of life 1, randomized between start colors
-     *  @param {Color}   [colorStartB=Color()] - Color at start of life 2, randomized between start colors
-     *  @param {Color}   [colorEndA=Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
-     *  @param {Color}   [colorEndB=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)
-     *  @param {Boolean}  [localSpace=0]        - Should it be in local space of emitter (world space is default)
+     *  @param {Color} [colorStartA=(1,1,1,1)] - Color at start of life 1, randomized between start colors
+     *  @param {Color} [colorStartB=(1,1,1,1)] - Color at start of life 2, randomized between start colors
+     *  @param {Color} [colorEndA=(1,1,1,0)] - Color at end of life 1, randomized between end colors
+     *  @param {Color} [colorEndB=(1,1,1,0)] - Color at end of life 2, randomized between end colors
+     *  @param {Number} [particleTime]      - How long particles live
+     *  @param {Number} [sizeStart]         - How big are particles at start
+     *  @param {Number} [sizeEnd]           - How big are particles at end
+     *  @param {Number} [speed]             - How fast are particles when spawned
+     *  @param {Number} [angleSpeed]        - How fast are particles rotating
+     *  @param {Number} [damping]           - How much to dampen particle speed
+     *  @param {Number} [angleDamping]      - How much to dampen particle angular speed
+     *  @param {Number} [gravityScale]      - How much gravity effect particles
+     *  @param {Number} [particleConeAngle] - Cone for start particle angle
+     *  @param {Number} [fadeRate]          - How quick to fade particles at start/end in percent of life
+     *  @param {Number} [randomness]    - Apply extra randomness percent
+     *  @param {Boolean} [collideTiles] - Do particles collide against tiles
+     *  @param {Boolean} [additive]     - Should particles use addtive blend
+     *  @param {Boolean} [randomColorLinear] - Should color be randomized linearly or across each component
+     *  @param {Number} [renderOrder] - Render order for particles (additive is above other stuff by default)
+     *  @param {Boolean}  [localSpace] - Should it be in local space of emitter (world space is default)
      */
     constructor
     ( 
-        pos,
+        position,
         angle,
         emitSize = 0,
         emitTime = 0,
@@ -3874,14 +3904,14 @@ class ParticleEmitter extends EngineObject
         particleConeAngle = PI,
         fadeRate = .1,
         randomness = .2, 
-        collideTiles,
-        additive,
-        randomColorLinear = 1,
+        collideTiles = false,
+        additive = false,
+        randomColorLinear = true,
         renderOrder = additive ? 1e9 : 0,
-        localSpace
+        localSpace = false
     )
     {
-        super(pos, vec2(), tileInfo, angle, undefined, renderOrder);
+        super(position, vec2(), tileInfo, angle, undefined, renderOrder);
 
         // emitter settings
         /** @property {Number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
@@ -3930,14 +3960,17 @@ class ParticleEmitter extends EngineObject
         this.randomness        = randomness;
         /** @property {Boolean} - Do particles collide against tiles */
         this.collideTiles      = collideTiles;
-        /** @property {Number} - Should particles use addtive blend */
+        /** @property {Boolean} - Should particles use addtive blend */
         this.additive          = additive;
         /** @property {Boolean} - Should it be in local space of emitter */
-        this.localSpace          = localSpace;
-        /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
+        this.localSpace        = localSpace;
+        /** @property {Number} - If non zero the partile is drawn as a trail, stretched in the drection of velocity */
         this.trailScale        = 0;
-
-        // internal variables
+        /** @property {Function}   - Callback when particle is destroyed */
+        this.particleDestroyCallback = undefined;
+        /** @property {Function}   - Callback when particle is created */
+        this.particleCreateCallback = undefined;
+        /** @property {Number} - Track particle emit time */
         this.emitTimeBuffer    = 0;
     }
     
@@ -3969,18 +4002,16 @@ class ParticleEmitter extends EngineObject
     emitParticle()
     {
         // spawn a particle
-        let pos = this.emitSize.x != undefined ? // check if vec2 was used for size
-            vec2(rand(-.5,.5), rand(-.5,.5))
-                .multiply(this.emitSize).rotate(this.angle) // box emitter
-            : randInCircle(this.emitSize/2);                // circle emitter
+        let pos = typeof this.emitSize === 'number' ? // check if number was used
+            randInCircle(this.emitSize/2)              // circle emitter
+            : vec2(rand(-.5,.5), rand(-.5,.5))         // box emitter
+                .multiply(this.emitSize).rotate(this.angle)
         let angle = rand(this.particleConeAngle, -this.particleConeAngle);
         if (!this.localSpace)
         {
             pos = this.pos.add(pos);
             angle += this.angle;
         }
-            
-        const particle = new Particle(pos, this.tileInfo, this.tileSize, angle);
 
         // randomness scales each paremeter by a percentage
         const randomness = this.randomness;
@@ -3996,30 +4027,21 @@ class ParticleEmitter extends EngineObject
         const colorStart    = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
         const colorEnd      = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
         const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
-
-        // build particle settings
-        particle.colorStart    = colorStart;
-        particle.colorEndDelta = colorEnd.subtract(colorStart);
-        particle.velocity      = vec2().setAngle(velocityAngle, 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        = randInt(2);
-        particle.localSpaceEmitter = this.localSpace && this;
-
-        // setup callbacks for particles
-        particle.destroyCallback = this.particleDestroyCallback;
+        
+        // build particle
+        const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive,  this.trailScale, this.localSpace && this, this.particleDestroyCallback);
+        particle.velocity     = vec2().setAngle(velocityAngle, speed);
+        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.renderOrder  = this.renderOrder;
+        particle.mirror       = !!randInt(2);
+
+        // call particle create callaback
         this.particleCreateCallback && this.particleCreateCallback(particle);
 
         // return the newly created particle
@@ -4038,13 +4060,47 @@ class ParticleEmitter extends EngineObject
 class Particle extends EngineObject
 {
     /**
-     * Create a particle with the given settings
-     * @param {Vector2} position                   - World space position of the particle
-     * @param {TileInfo} [tileInfo]                - Tile info to render particles (undefined is untextured)
-     * @param {Number}  [angle=0]                  - Angle to rotate the particle
+     * Create a particle with the given shis.colorStart = undefined;ettings
+     * @param {Vector2}  position     - World space position of the particle
+     * @param {TileInfo} [tileInfo]   - Tile info to render particles
+     * @param {Number}   [angle]      - Angle to rotate the particle
+     * @param {Color}    [colorStart] - Color at start of life
+     * @param {Color}    [colorEnd]   - Color at end of life
+     * @param {Number}   [lifeTime]   - How long to live for
+     * @param {Number}   [sizeStart]  - Angle to rotate the particle
+     * @param {Number}   [sizeEnd]    - Angle to rotate the particle
+     * @param {Number}   [fadeRate]   - Angle to rotate the particle
+     * @param {Boolean}  [additive]   - Angle to rotate the particle
+     * @param {Number}   [trailScale] - If a trail, how long to make it
+     * @param {ParticleEmitter} [localSpaceEmitter] - Parent emitter if local space
+     * @param {Function}  [destroyCallback] - Called when particle dies
      */
-    constructor(pos, tileInfo, angle)
-    { super(pos, vec2(), tileInfo, angle); }
+    constructor(position, tileInfo, angle, colorStart, colorEnd, lifeTime, sizeStart, sizeEnd, fadeRate, additive, trailScale, localSpaceEmitter, destroyCallback
+    )
+    { 
+        super(position, vec2(), tileInfo, angle); 
+    
+        /** @property {Color} - Color at start of life */
+        this.colorStart = colorStart;
+        /** @property {Color} - Calculated change in color */
+        this.colorEndDelta = colorEnd.subtract(colorStart);
+        /** @property {Number} - How long to live for */
+        this.lifeTime = lifeTime;
+        /** @property {Number} - Size at start of life */
+        this.sizeStart = sizeStart;
+        /** @property {Number} - Calculated change in size */
+        this.sizeEndDelta = sizeEnd - sizeStart;
+        /** @property {Number} - How quick to fade in/out */
+        this.fadeRate = fadeRate;
+        /** @property {Boolean} - Is it additive */
+        this.additive = additive;
+        /** @property {Number} - If a trail, how long to make it */
+        this.trailScale = trailScale;
+        /** @property {ParticleEmitter} - Parent emitter if local space */
+        this.localSpaceEmitter = localSpaceEmitter;
+        /** @property {Function} - Called when particle dies */
+        this.destroyCallback = destroyCallback;
+    }
 
     /** Render the particle, automatically called each frame, sorted by renderOrder */
     render()
@@ -4062,7 +4118,7 @@ class Particle extends EngineObject
              (p < fadeRate ? p/fadeRate : p > 1-fadeRate ? (1-p)/fadeRate : 1)); // fade alpha
 
         // draw the particle
-        this.additive && setBlendMode(1);
+        this.additive && setBlendMode(true);
 
         let pos = this.pos, angle = this.angle;
         if (this.localSpaceEmitter)
@@ -4152,7 +4208,7 @@ class Medal
      *  @param {Number} id            - The unique identifier of the medal
      *  @param {String} name          - Name of the medal
      *  @param {String} [description] - Description of the medal
-     *  @param {String} [icon='🏆']  - Icon for the medal
+     *  @param {String} [icon]        - Icon for the medal
      *  @param {String} [src]         - Image location for the medal
      */
     constructor(id, name, description='', icon='🏆', src)
@@ -4175,14 +4231,14 @@ class Medal
             return;
 
         // save the medal
-        ASSERT(medalsSaveName); // save name must be set
+        ASSERT(medalsSaveName, 'save name must be set');
         localStorage[this.storageKey()] = this.unlocked = 1;
         medalsDisplayQueue.push(this);
         newgrounds && newgrounds.unlockMedal(this.id);
     }
 
     /** Render a medal
-     *  @param {Number} [hidePercent=0] - How much to slide the medal off screen
+     *  @param {Number} [hidePercent] - How much to slide the medal off screen
      */
     render(hidePercent=0)
     {
@@ -4194,25 +4250,25 @@ class Medal
         // draw containing rect and clip to that region
         context.save();
         context.beginPath();
-        context.fillStyle = new Color(.9,.9,.9);
-        context.strokeStyle = new Color(0,0,0);
+        context.fillStyle = rgb(.9,.9,.9).toString();
+        context.strokeStyle = rgb(0,0,0).toString();
         context.lineWidth = 3;
-        context.fill(context.rect(x, y, width, medalDisplaySize.y));
+        context.rect(x, y, width, medalDisplaySize.y);
+        context.fill();
         context.stroke();
         context.clip();
 
         // draw the icon and text
         this.renderIcon(vec2(x+15+medalDisplayIconSize/2, y+medalDisplaySize.y/2));
         const pos = vec2(x+medalDisplayIconSize+30, y+28);
-        drawTextScreen(this.name, pos, 38, new Color(0,0,0), 0, 0, 'left');
+        drawTextScreen(this.name, pos, 38, new Color(0,0,0), 0, undefined, 'left');
         pos.y += 32;
-        drawTextScreen(this.description, pos, 24, new Color(0,0,0), 0, 0, 'left');
+        drawTextScreen(this.description, pos, 24, new Color(0,0,0), 0, undefined, 'left');
         context.restore();
     }
 
     /** Render the icon for a medal
-     *  @param {Number} x - Screen space X position
-     *  @param {Number} y - Screen space Y position
+     *  @param {Vector2} pos - Screen space position
      *  @param {Number} [size=medalDisplayIconSize] - Screen space size
      */
     renderIcon(pos, size=medalDisplayIconSize)
@@ -4240,7 +4296,10 @@ function medalsRender()
     if (!medalsDisplayTimeLast)
         medalsDisplayTimeLast = timeReal;
     else if (time > medalDisplayTime)
-        medalsDisplayQueue.shift(medalsDisplayTimeLast = 0);
+    {
+        medalsDisplayTimeLast = 0;
+        medalsDisplayQueue.shift();
+    }
     else
     {
         // slide on/off medals
@@ -4280,8 +4339,8 @@ class Newgrounds
      *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher */
     constructor(app_id, cipher, cryptoJS)
     {
-        ASSERT(!newgrounds && app_id); // can only be one newgrounds object
-        ASSERT(!cipher || cryptoJS);   // must provide cryptojs if there is a cipher
+        ASSERT(!newgrounds && app_id>0, 'there can only be one newgrounds object');
+        ASSERT(!cipher || cryptoJS, 'must provide cryptojs if there is a cipher');
 
         this.app_id = app_id;
         this.cipher = cipher;
@@ -4324,39 +4383,39 @@ class Newgrounds
         debugMedals && console.log(this.scoreboards);
 
         const keepAliveMS = 5 * 60 * 1e3;
-        setInterval(()=>this.call('Gateway.ping', 0, 1), keepAliveMS);
+        setInterval(()=>this.call('Gateway.ping', 0, true), keepAliveMS);
     }
 
     /** Send message to unlock a medal by id
      * @param {Number} id - The medal id */
-    unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, 1); }
+    unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, true); }
 
     /** Send message to post score
      * @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); }
+    postScore(id, value) { return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, true); }
 
     /** Get scores from a scoreboard
-     * @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} [limit=10] - Number of scores to include in the list
-     * @return {Object}           - The response JSON object
+     * @param {Number} id       - The scoreboard id
+     * @param {String} [user]   - A user's id or name
+     * @param {Number} [social] - If true, only social scores will be loaded
+     * @param {Number} [skip]   - Number of scores to skip before start
+     * @param {Number} [limit]  - Number of scores to include in the list
+     * @return {Object}         - The response JSON object
      */
-    getScores(id, user=0, social=0, skip=0, limit=10)
+    getScores(id, user, social=0, skip=0, limit=10)
     { return this.call('ScoreBoard.getScores', {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit}); }
 
     /** Send message to log a view */
-    logView() { return this.call('App.logView', {'host':this.host}, 1); }
+    logView() { return this.call('App.logView', {'host':this.host}, true); }
 
     /** Send a message to call a component of the Newgrounds API
-     * @param {String}  component      - Name of the component
-     * @param {Object}  [parameters=0] - Parameters to use for call
-     * @param {Boolean} [async=0]      - If true, don't wait for response before continuing (avoid stall)
-     * @return {Object}                - The response JSON object
+     * @param {String}  component    - Name of the component
+     * @param {Object}  [parameters] - Parameters to use for call
+     * @param {Boolean} [async]      - If true, don't wait for response before continuing
+     * @return {Object}              - The response JSON object
      */
-    call(component, parameters=0, async=0)
+    call(component, parameters, async=false)
     {
         const call = {'component':component, 'parameters':parameters};
         if (this.cipher)
@@ -4391,7 +4450,7 @@ class Newgrounds
         return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
     }
 }
-/** 
+/**
  * LittleJS WebGL Interface
  * - All webgl used by the engine is wrapped up here
  * - For normal stuff you won't need to see or call anything in this file
@@ -4410,13 +4469,13 @@ class Newgrounds
  *  @memberof WebGL */
 let glCanvas;
 
-/** 2d context for glCanvas 
- *  @type {WebGLRenderingContext}
+/** 2d context for glCanvas
+ *  @type {WebGL2RenderingContext}
  *  @memberof WebGL */
 let glContext;
 
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glArrayBuffer, glVertexData, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
+let glShader, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glInstanceCount, glAdditive, glBatchAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -4432,73 +4491,89 @@ function glInit()
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
-        '#version 300 es\n' +         // specify GLSL ES version
-        'precision highp float;'+     // use highp for better accuracy
-        'uniform mat4 m;'+            // transform matrix
-        'in vec4 p,c,a;'+             // position, uv, color, additiveColor
-        'out vec4 v,d,e;'+            // return uv, color, additiveColor
-        'void main(){'+               // shader entry point
-        'gl_Position=m*vec4(p.xy,1,1);'+ // transform position
-        'v=p;d=c;e=a;'+               // pass stuff to fragment shader
-        '}'                           // end of shader
+        '#version 300 es\n' +     // specify GLSL ES version
+        'precision highp float;'+ // use highp for better accuracy
+        'uniform mat4 m;'+        // transform matrix
+        'in vec2 g;'+             // geometry
+        'in vec4 p,u,c,a;'+       // position/size, uvs, color, additiveColor
+        'in float r;'+            // rotation
+        'out vec2 v;'+            // return uv, color, additiveColor
+        'out vec4 d,e;'+          // return uv, color, additiveColor
+        'void main(){'+           // shader entry point
+        'vec2 s=(g-.5)*p.zw;'+    // get size offset
+        'gl_Position=m*vec4(p.xy+s*cos(r)-vec2(-s.y,s)*sin(r),1,1);'+ // transform position
+        'v=mix(u.xw,u.zy,g);'+    // pass uv to fragment shader
+        'd=c;e=a;'+               // pass colors to fragment shader
+        '}'                       // end of shader
         ,
-        '#version 300 es\n' +         // specify GLSL ES version
-        'precision highp float;'+     // use highp for better accuracy
-        'in vec4 v,d,e;'+             // position, uv, color, additiveColor
-        'uniform sampler2D s;'+       // texture
-        'out vec4 c;'+                // out color
-        'void main(){'+               // shader entry point
-        'c=texture(s,v.zw)*d+e;'+     // modulate texture by color plus additive
-        '}'                           // end of shader
+        '#version 300 es\n' +     // specify GLSL ES version
+        'precision highp float;'+ // use highp for better accuracy
+        'in vec2 v;'+             // uv
+        'in vec4 d,e;'+           // color, additiveColor
+        'uniform sampler2D s;'+   // texture
+        'out vec4 c;'+            // out color
+        'void main(){'+           // shader entry point
+        'c=texture(s,v)*d+e;'+    // modulate texture by color plus additive
+        '}'                       // end of shader
     );
 
     // init buffers
-    glVertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
-    glPositionData = new Float32Array(glVertexData);
-    glColorData = new Uint32Array(glVertexData);
+    const glInstanceData = new ArrayBuffer(gl_INSTANCE_BUFFER_SIZE);
+    glPositionData = new Float32Array(glInstanceData);
+    glColorData = new Uint32Array(glInstanceData);
     glArrayBuffer = glContext.createBuffer();
-    glBatchCount = 0;
+    glGeometryBuffer = glContext.createBuffer();
+
+    // create the geometry buffer, triangle strip square
+    const geometry = new Float32Array([glInstanceCount=0,0,1,0,0,1,1,1]);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, geometry, gl_STATIC_DRAW);
 }
 
 // Setup render each frame, called automatically by engine
 function glPreRender()
 {
     // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+    glContext.viewport(0, 0, glCanvas.width=mainCanvas.width, glCanvas.height=mainCanvas.height);
     glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
     glContext.useProgram(glShader);
     glContext.activeTexture(gl_TEXTURE0);
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
-    glAdditive = 0;
-    
+
     // set vertex attributes
-    let offset = 0;
-    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
+    let offset = glAdditive = glBatchAdditive = 0;
+    let initVertexAttribArray = (name, type, typeSize, size)=>
     {
         const location = glContext.getAttribLocation(glShader, name);
+        const stride = typeSize && gl_INSTANCE_BYTE_STRIDE; // only if not geometry
+        const divisor = typeSize && 1; // only if not geometry
+        const normalize = typeSize==1; // only if color
         glContext.enableVertexAttribArray(location);
-        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
+        glContext.vertexAttribPointer(location, size, type, normalize, stride, offset);
+        glContext.vertexAttribDivisor(location, divisor);
         offset += size*typeSize;
     }
-    initVertexAttribArray('p', gl_FLOAT, 4, 4);            // position & texture
-    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
-    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
+    initVertexAttribArray('g', gl_FLOAT, 0, 2); // geometry
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, gl_INSTANCE_BUFFER_SIZE, gl_DYNAMIC_DRAW);
+    initVertexAttribArray('p', gl_FLOAT, 4, 4); // position & size
+    initVertexAttribArray('u', gl_FLOAT, 4, 4); // texture coords
+    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4); // color
+    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4); // additiveColor
+    initVertexAttribArray('r', gl_FLOAT, 4, 1); // rotation
 
     // build the transform matrix
-    const sx = 2 * cameraScale / mainCanvas.width;
-    const sy = 2 * cameraScale / mainCanvas.height;
-    const cx = -1 - sx*cameraPos.x;
-    const cy = -1 - sy*cameraPos.y;
-    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
+    const s = vec2(2*cameraScale).divide(mainCanvasSize);
+    const p = vec2(-1).subtract(cameraPos.multiply(s));
+    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), false,
         new Float32Array([
-            sx,  0,  0,  0,
-             0, sy,  0,  0,
-             1,  1, -1,  1,
-            cx, cy,  0,  0
+            s.x, 0,   0,   0,
+            0,   s.y, 0,   0,
+            1,   1,   1,   1,
+            p.x, p.y, 0,   0
         ])
     );
 }
@@ -4519,7 +4594,7 @@ function glSetTexture(texture)
 
 /** Compile WebGL shader of the given type, will throw errors if in debug mode
  *  @param {String} source
- *  @param          type
+ *  @param {Number} type
  *  @return {WebGLShader}
  *  @memberof WebGL */
 function glCompileShader(source, type)
@@ -4536,8 +4611,8 @@ function glCompileShader(source, type)
 }
 
 /** Create WebGL program with given shaders
- *  @param {WebGLShader} vsSource
- *  @param {WebGLShader} fsSource
+ *  @param {String} vsSource
+ *  @param {String} fsSource
  *  @return {WebGLProgram}
  *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
@@ -4555,7 +4630,7 @@ function glCreateProgram(vsSource, fsSource)
 }
 
 /** Create WebGL texture from an image and init the texture settings
- *  @param {Image} image
+ *  @param {HTMLImageElement} image
  *  @return {WebGLTexture}
  *  @memberof WebGL */
 function glCreateTexture(image)
@@ -4565,7 +4640,7 @@ function glCreateTexture(image)
     glContext.bindTexture(gl_TEXTURE_2D, texture);
     if (image)
         glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
-        
+
     // use point filtering for pixelated rendering
     const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
@@ -4580,29 +4655,31 @@ function glCreateTexture(image)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glBatchCount) return;
+    if (!glInstanceCount) 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, glVertexData);
-    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, glBatchCount);
-    glBatchCount = 0;
+    glContext.bufferSubData(gl_ARRAY_BUFFER, 0, glPositionData);
+    glContext.drawArraysInstanced(gl_TRIANGLE_STRIP, 0, 4, glInstanceCount);
+    if (showWatermark)
+        drawCount += glInstanceCount;
+    glInstanceCount = 0;
     glBatchAdditive = glAdditive;
 }
 
 /** Draw any sprites still in the buffer, copy to main canvas and clear
  *  @param {CanvasRenderingContext2D} context
- *  @param {Boolean} [forceDraw=0]
+ *  @param {Boolean} [forceDraw]
  *  @memberof WebGL */
-function glCopyToContext(context, forceDraw)
+function glCopyToContext(context, forceDraw=false)
 {
-    if (!glBatchCount && !forceDraw) return;
-    
+    if (!glInstanceCount && !forceDraw) return;
+
     glFlush();
-    
+
     // do not draw in overlay mode because the canvas is visible
     if (!glOverlay || forceDraw)
         context.drawImage(glCanvas, 0, 0);
@@ -4623,61 +4700,25 @@ function glCopyToContext(context, forceDraw)
  *  @memberof WebGL */
 function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
 {
-    // flush if there is not enough room or if different blend mode
-    const vertCount = 6;
-    if (glBatchCount >= gl_MAX_BATCH-vertCount || glBatchAdditive != glAdditive)
-        glFlush();
-
-    // prepare to create the verts from size and angle
-    const c = Math.cos(angle)/2, s = Math.sin(angle)/2;
-    const cx = c*sizeX, cy = c*sizeY, sx = s*sizeX, sy = s*sizeY;
-    const positionData = 
-    [
-        x-cx+sy, y+cy+sx, uv0X, uv0Y,
-        x-cx-sy, y-cy+sx, uv0X, uv1Y,
-        x+cx+sy, y+cy-sx, uv1X, uv0Y,
-        x+cx-sy, y-cy-sx, uv1X, uv1Y,
-    ];
-
-    // setup 2 triangle strip quad
-    for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
-    {
-        const j = clamp(i-1, 0, 3)*4;  // degenerate tri at ends
-        glPositionData[offset++] = positionData[j+0];
-        glPositionData[offset++] = positionData[j+1];
-        glPositionData[offset++] = positionData[j+2];
-        glPositionData[offset++] = positionData[j+3];
-        glColorData[offset++] = rgba; 
-        glColorData[offset++] = rgbaAdditive;
-    }
-    glBatchCount += vertCount;
-}
+    ASSERT(typeof rgba == 'number' && typeof rgbaAdditive == 'number', 'invalid color');
 
-/** Add a convex polygon to the gl draw list
- *  @param {Array} points - Array of Vector2 points
- *  @param {Number} rgba - Color of the polygon
- *  @memberof WebGL */
-function glDrawPoints(points, rgba)
-{
     // flush if there is not enough room or if different blend mode
-    const vertCount = points.length + 2;
-    if (glBatchCount >= gl_MAX_BATCH-vertCount || glBatchAdditive != glAdditive)
+    if (glInstanceCount >= gl_MAX_INSTANCES-1 || glBatchAdditive != glAdditive)
         glFlush();
-  
-    // setup triangle strip from list of points
-    for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
-    {
-        const j = clamp(i-1, 0, vertCount-3);  // degenerate tri at ends
-        const h = j>>1;
-        const point = points[j%2? h : vertCount-3-h];
-        glPositionData[offset++] = point.x;
-        glPositionData[offset++] = point.y;
-        glPositionData[offset++] = 0; // uvx
-        glPositionData[offset++] = 0; // uvy
-        glColorData[offset++] = 0;    // nothing to tint
-        glColorData[offset++] = rgba; // apply rgba via additive
-    }
-    glBatchCount += vertCount;
+
+    let offset = glInstanceCount * gl_INDICIES_PER_INSTANCE;
+    glPositionData[offset++] = x;
+    glPositionData[offset++] = y;
+    glPositionData[offset++] = sizeX;
+    glPositionData[offset++] = sizeY;
+    glPositionData[offset++] = uv0X;
+    glPositionData[offset++] = uv0Y;
+    glPositionData[offset++] = uv1X;
+    glPositionData[offset++] = uv1Y;
+    glColorData[offset++] = rgba;
+    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = angle;
+    glInstanceCount++;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -4689,9 +4730,9 @@ let glPostShader, glPostArrayBuffer, glPostTexture, glPostIncludeOverlay;
  *  @param {String} shaderCode
  *  @param {Boolean} includeOverlay
  *  @memberof WebGL */
-function glInitPostProcess(shaderCode, includeOverlay)
+function glInitPostProcess(shaderCode, includeOverlay=false)
 {
-    ASSERT(!glPostShader); // can only have 1 post effects shader
+    ASSERT(!glPostShader, 'can only have 1 post effects shader');
 
     if (!shaderCode) // default shader pass through
         shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
@@ -4702,14 +4743,14 @@ function glInitPostProcess(shaderCode, includeOverlay)
         'precision highp float;'+        // use highp for better accuracy
         'in vec2 p;'+                    // position
         'void main(){'+                  // shader entry point
-        'gl_Position=vec4(p,1,1);'+      // set position
+        'gl_Position=vec4(p+p-1.,1,1);'+ // set position
         '}'                              // end of shader
         ,
         '#version 300 es\n' +            // specify GLSL ES version
         'precision highp float;'+        // use highp for better accuracy
         'uniform sampler2D iChannel0;'+  // input texture
         'uniform vec3 iResolution;'+     // size of output texture
-        'uniform float iTime;'+          // time passed
+        'uniform float iTime;'+          // time
         'out vec4 c;'+                   // out color
         '\n' + shaderCode + '\n'+        // insert custom shader code
         'void main(){'+                  // shader entry point
@@ -4720,11 +4761,13 @@ function glInitPostProcess(shaderCode, includeOverlay)
 
     // create buffer and texture
     glPostArrayBuffer = glContext.createBuffer();
-    glPostTexture = glCreateTexture();
+    glPostTexture = glCreateTexture(undefined);
     glPostIncludeOverlay = includeOverlay;
 
     // hide the original 2d canvas
     mainCanvas.style.visibility = 'hidden';
+    if (glPostIncludeOverlay)
+        overlayCanvas.style.visibility = 'hidden';
 }
 
 // Render the post processing shader, called automatically by the engine
@@ -4745,21 +4788,14 @@ function glRenderPostProcess()
         glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
     }
 
-    if (glPostIncludeOverlay)
-    {
-        // copy overlay canvas so it will be included in post processing
-        mainContext.drawImage(overlayCanvas, 0, 0);
-
-        // clear overlay canvas
-        overlayCanvas.width = mainCanvas.width;
-    }
+    // copy overlay canvas so it will be included in post processing
+    glPostIncludeOverlay && mainContext.drawImage(overlayCanvas, 0, 0);
 
     // setup shader program to draw one triangle
     glContext.useProgram(glPostShader);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
+    glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, 1);
     glContext.disable(gl_BLEND);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glPostArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, new Float32Array([-3,1,1,-3,1,1]), gl_STATIC_DRAW);
-    glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, true);
 
     // set textures, pass in the 2d canvas and gl canvas in separate texture channels
     glContext.activeTexture(gl_TEXTURE0);
@@ -4770,19 +4806,19 @@ function glRenderPostProcess()
     const vertexByteStride = 8;
     const pLocation = glContext.getAttribLocation(glPostShader, 'p');
     glContext.enableVertexAttribArray(pLocation);
-    glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, 0, vertexByteStride, 0);
+    glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, false, vertexByteStride, 0);
 
     // set uniforms and draw
     const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
     glContext.uniform1i(uniformLocation('iChannel0'), 0);
     glContext.uniform1f(uniformLocation('iTime'), time);
     glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
-    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 3);
+    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 4);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // store gl constants as integers so their name doesn't use space in minifed
-const 
+const
 gl_ONE = 1,
 gl_TRIANGLE_STRIP = 5,
 gl_SRC_ALPHA = 770,
@@ -4804,17 +4840,17 @@ gl_TEXTURE0 = 33984,
 gl_ARRAY_BUFFER = 34962,
 gl_STATIC_DRAW = 35044,
 gl_DYNAMIC_DRAW = 35048,
-gl_FRAGMENT_SHADER = 35632, 
+gl_FRAGMENT_SHADER = 35632,
 gl_VERTEX_SHADER = 35633,
 gl_COMPILE_STATUS = 35713,
 gl_LINK_STATUS = 35714,
 gl_UNPACK_FLIP_Y_WEBGL = 37440,
 
 // constants for batch rendering
-gl_INDICIES_PER_VERT = 6,
-gl_MAX_BATCH = 1e5,
-gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2, // vec2 * 2 + (char * 4) * 2
-gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTEX_BYTE_STRIDE;
+gl_INDICIES_PER_INSTANCE = 11,
+gl_MAX_INSTANCES = 1e4,
+gl_INSTANCE_BYTE_STRIDE = gl_INDICIES_PER_INSTANCE * 4, // 11 * 4
+gl_INSTANCE_BUFFER_SIZE = gl_MAX_INSTANCES * gl_INSTANCE_BYTE_STRIDE;
 /** 
  * LittleJS - The Tiny JavaScript Game Engine That Can!
  * MIT License - Copyright 2021 Frank Force
@@ -4847,7 +4883,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.8.9';
+const engineVersion = '1.9.1';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -4888,14 +4924,14 @@ let timeReal = 0;
 
 /** Is the game paused? Causes time and objects to not be updated
  *  @type {Boolean}
- *  @default 0
+ *  @default false
  *  @memberof Engine */
-let paused = 0;
+let paused = false;
 
 /** Set if game is paused
- *  @param {Boolean} paused
+ *  @param {Boolean} isPaused
  *  @memberof Engine */
-function setPaused(_paused) { paused = _paused; }
+function setPaused(isPaused) { paused = isPaused; }
 
 // Frame time tracking
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
@@ -4912,7 +4948,7 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
  *  @memberof Engine */
 function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
 {
-    ASSERT(Array.isArray(imageSources)); // pass in images as array
+    ASSERT(Array.isArray(imageSources), 'pass in images as array');
 
     // internal update loop for engine
     function engineUpdate(frameTimeMS=0)
@@ -4922,12 +4958,12 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
             averageFPS = lerp(.05, averageFPS, 1e3/(frameTimeDeltaMS||1));
-        const debugSpeedUp   = debug && keyIsDown(107); // +
-        const debugSpeedDown = debug && keyIsDown(109); // -
+        const debugSpeedUp   = debug && keyIsDown('Equal'); // +
+        const debugSpeedDown = debug && keyIsDown('Minus'); // -
         if (debug) // +/- to speed/slow time
             frameTimeDeltaMS *= debugSpeedUp ? 5 : debugSpeedDown ? .2 : 1;
         timeReal += frameTimeDeltaMS / 1e3;
-        frameTimeBufferMS += !paused * frameTimeDeltaMS;
+        frameTimeBufferMS += paused ? 0 : frameTimeDeltaMS;
         if (!debugSpeedUp)
             frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp incase of slow framerate
 
@@ -5037,7 +5073,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         'user-select:none;' +         // prevent mobile hold to select
         '-webkit-user-select:none;' + // compatibility for ios
         '-webkit-touch-callout:none'; // compatibility for ios
-    document.body.style = styleBody;
+    document.body.style.cssText = styleBody;
     document.body.appendChild(mainCanvas = document.createElement('canvas'));
     mainContext = mainCanvas.getContext('2d');
 
@@ -5050,10 +5086,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     overlayContext = overlayCanvas.getContext('2d');
 
     // set canvas style
-    const styleCanvas = 
-        'position:absolute;' +                             // position
+    const styleCanvas = 'position:absolute;' +             // position
         'top:50%;left:50%;transform:translate(-50%,-50%)'; // center
-    (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
+    (glCanvas||mainCanvas).style.cssText = mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
     
     // create promises for loading images
     const promises = imageSources.map((src, textureIndex)=>
@@ -5073,13 +5108,13 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     showSplashScreen && promises.push(new Promise(resolve => 
     {
         let t = 0;
-        console.log(`LittleJS Engine v${engineVersion}`);
+        console.log(`${engineName} Engine v${engineVersion}`);
         updateSplash();
         function updateSplash()
         {
             clearInput();
             drawEngineSplashScreen(t+=.01);
-            t>1 ? resolve() : setTimeout(updateSplash,16);
+            t>1 ? resolve() : setTimeout(updateSplash, 16);
         }
     }));
 
@@ -5140,7 +5175,7 @@ function engineObjectsDestroy()
 
 /** 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 {Number|Vector2} [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
  *  @memberof Engine */
@@ -5151,7 +5186,7 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
         for (const o of objects)
             callbackFunction(o);
     }
-    else if (size.x != undefined)  // bounding box test
+    else if (typeof size === 'object')  // bounding box test
     {
         for (const o of objects)
             isOverlapping(pos, size, o.pos, o.size) && callbackFunction(o);
@@ -5169,23 +5204,23 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
 
 function drawEngineSplashScreen(t)
 {
-    const x = mainContext;
-    const w = mainCanvas.width = innerWidth;
-    const h = mainCanvas.height = innerHeight;
+    const x = overlayContext;
+    const w = overlayCanvas.width = innerWidth;
+    const h = overlayCanvas.height = innerHeight;
+
     {
         // background
         const p3 = percent(t, 1, .8);
         const p4 = percent(t, 0, .5);
         const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.hypot(w,h)*.7);
-        g.addColorStop(0,hsl(0,0,lerp(p4,0,p3/2),p3));
-        g.addColorStop(1,hsl(0,0,0,p3));
+        g.addColorStop(0,hsl(0,0,lerp(p4,0,p3/2),p3).toString());
+        g.addColorStop(1,hsl(0,0,0,p3).toString());
         x.save();
         x.fillStyle = g;
         x.fillRect(0,0,w,h);
     }
 
     // draw LittleJS logo...
-
     const rect = (X, Y, W, H, C)=>
     {
         x.beginPath();
@@ -5210,7 +5245,7 @@ function drawEngineSplashScreen(t)
         C ? x.fill() : x.stroke();
     };
     const color = (c=0, l=0) =>
-        hsl([.98,.3,.57,.14][c%4]-10,.8,[0,.3,.5,.8,.9][l]);
+        hsl([.98,.3,.57,.14][c%4]-10,.8,[0,.3,.5,.8,.9][l]).toString();
     const alpha = wave(1,1,t);
     const p = percent(alpha, .1, .5);
 
@@ -5220,7 +5255,7 @@ function drawEngineSplashScreen(t)
     x.scale(size,size);
     x.translate(-40,-35);
     x.lineJoin = x.lineCap = 'round';
-    x.lineWidth = 1+p;
+    x.lineWidth = .1 + p*1.9;
 
     // drawing effect
     const p2 = percent(alpha,.1,1);
@@ -5245,7 +5280,7 @@ function drawEngineSplashScreen(t)
 
     // little stack
     rect(37,14,9,6,color(3,2));
-    rect(37,14,4,6,color(3,3));
+    rect(37,14,4.5,6,color(3,3));
     rect(37,14,9,6);
 
     // big stack
@@ -5289,7 +5324,8 @@ function drawEngineSplashScreen(t)
         x.lineTo(53+(1+i*2.9)*p,40);
         x.lineTo(53+(4+i*3.5)*p,54);
         x.fillStyle = color(0,i%2+2);
-        x.fill() || i%2 && x.stroke();
+        x.fill();
+        i%2 && x.stroke();
     }
 
     // wheels
@@ -5312,7 +5348,7 @@ function drawEngineSplashScreen(t)
     x.font = '900 16px arial';
     x.textAlign = 'center';
     x.textBaseline = 'top';
-    x.lineWidth = 1+p*3;
+    x.lineWidth = .1+p*3.9;
     let w2 = 0;
     for (let i=0; i<s.length; ++i)
         w2 += x.measureText(s[i]).width;
@@ -5353,6 +5389,7 @@ export {
 	
 	// Globals
 	debug,
+	debugOverlay,
 	showWatermark,
 
 	// Debug