littlejsengine 1.0.14 → 1.1.8

package/engine/engine.all.js

@@ -1,69 +1,137 @@
-/*
-    LittleJS - The Tiny JavaScript Game Engine That Can
-    MIT License - Copyright 2019 Frank Force
-*/
-/*
-    LittleJS Debug System
-    
-    Debug Features
-    - debug overlay with mouse pick
-    - debug primitive rendering
-    - save screenshots
-*/
+/** 
+ *  LittleJS Debug System
+ *  <br> - Debug overlay with mouse pick
+ *  <br> - Debug primitive rendering
+ *  <br> - Save screenshots to disk
+ *  @namespace Debug
+ */
 
 'use strict';
 
+/** True if debug is enabled
+ *  @default
+ *  @memberof Debug */
 const debug = 1;
+
+/** True if asserts are enaled
+ *  @default
+ *  @memberof Debug */
 const enableAsserts = 1;
+
+/** Size to render debug points by default
+ *  @default
+ *  @memberof Debug */
 const debugPointSize = .5;
 
+/** True if watermark with FPS should be down
+ *  @default
+ *  @memberof Debug */
 let showWatermark = 1;
+
+/** True if god mode is enabled, handle this however you want
+ *  @default
+ *  @memberof Debug */
 let godMode = 0;
-let debugPrimitives = [];
-let debugOverlay = 0;
-let debugPhysics = 0;
-let debugRaycast = 0;
-let debugParticles = 0;
-let debugGamepads = 0;
-let debugMedals = 0;
-let debugCanvas = -1;
-let debugTakeScreenshot;
-let downloadLink;
-
-// debug helper functions
+
+// Engine internal variables not exposed to documentation
+let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0, 
+debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
+
+///////////////////////////////////////////////////////////////////////////////
+// Debug helper functions
+
+/** Asserts if the experssion is false, does not do anything in release builds
+ *  @param {Boolean} assertion
+ *  @param {Object}  output
+ *  @memberof Debug */
 const ASSERT = enableAsserts ? (...assert)=> console.assert(...assert) : ()=>{};
-const debugRect = (pos, size=vec2(0), color='#fff', time=0, angle=0, fill=0)=> 
+
+/** Draw a debug rectangle in world space
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=new Vector2()]
+ *  @param {String}  [color='#fff']
+ *  @param {Number}  [time=0]
+ *  @param {Number}  [angle=0]
+ *  @param {Boolean} [fill=0]
+ *  @memberof Debug */
+const debugRect = (pos, size=vec2(), color='#fff', time=0, angle=0, fill=0)=> 
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     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=0]
+ *  @memberof Debug */
 const debugCircle = (pos, radius=0, color='#fff', time=0, fill=0)=>
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     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]
+ *  @memberof Debug */
 const debugPoint = (pos, color, time, angle)=> debugRect(pos, 0, 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]
+ *  @memberof Debug */
 const 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);
 }
-const debugAABB = (pA, pB, sA, sB, color)=>
+
+/** 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']
+ *  @memberof Debug */
+const debugAABB = (pA, sA, pB, sB, color)=>
 {
     const minPos = vec2(min(pA.x - sA.x/2, pB.x - sB.x/2), min(pA.y - sA.y/2, pB.y - sB.y/2));
     const maxPos = vec2(max(pA.x + sA.x/2, pB.x + sB.x/2), max(pA.y + sA.y/2, pB.y + sB.y/2));
     debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color);
 }
-const debugText = (text='', pos, size=1, color='#fff', time=0, angle=0, font='monospace')=> 
+
+/** 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']
+ *  @memberof Debug */
+const debugText = (text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')=> 
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
 }
 
+/** Clear all debug primitives in the list
+ *  @memberof Debug */
 const debugClear = ()=> debugPrimitives = [];
 
-// save a canvas to disk
+/** Save a canvas to disk 
+ *  @param {HTMLCanvasElement} canvas
+ *  @param {String}            [filename]
+ *  @memberof Debug */
 const debugSaveCanvas = (canvas, filename = engineName + '.png') =>
 {
     downloadLink.download = 'screenshot.png';
@@ -72,7 +140,7 @@ const debugSaveCanvas = (canvas, filename = engineName + '.png') =>
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// engine debug function (called automatically)
+// Engine debug function (called automatically)
 
 const debugInit = ()=>
 {
@@ -112,6 +180,11 @@ const debugRender = ()=>
 
     if (debugTakeScreenshot)
     {
+        // composite canvas
+        glCopyToContext(mainContext, 1);
+        mainContext.drawImage(overlayCanvas, 0, 0);
+        overlayCanvas.width |= 0;
+
         debugSaveCanvas(mainCanvas);
         debugTakeScreenshot = 0;
     }
@@ -189,8 +262,8 @@ const debugRender = ()=>
             const saveContext = mainContext;
             mainContext = overlayContext
             const raycastHitPos = tileCollisionRaycast(bestObject.pos, mousePos);
-            raycastHitPos && drawRect(raycastHitPos.int().add(vec2(.5)), vec2(1), new Color(0,1,1,.3));
-            drawRect(mousePos.int().add(vec2(.5)), vec2(1), new Color(0,0,1,.5));
+            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));
             drawLine(mousePos, bestObject.pos, .1, !raycastHitPos ? new Color(0,1,0,.5) : new Color(1,0,0,.5));
 
             let pos = mousePos.copy(), height = vec2(0,.5);
@@ -304,7 +377,7 @@ const debugRender = ()=>
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// particle system editor
+// particle system editor (work in progress)
 let debugParticleEditor = 0, debugParticleSystem, debugParticleSystemDiv, particleSystemCode;
 
 const debugToggleParticleEditor = ()=>
@@ -491,104 +564,422 @@ const debugParticleSettings =
     ['randomColorComponents'],
     ['renderOrder'],
 ];
-
-/*
-    LittleJS Utility Classes and Functions
-    - Vector2 - fast, simple, easy vector class
-    - Color - holds a rgba color with math functions
-    - Timer - tracks time automatically
-    - Small math lib
-*/
+/**
+ *  LittleJS Utility Classes and Functions
+ *  <br> - General purpose math library
+ *  <br> - Vector2 - fast, simple, easy 2D vector class
+ *  <br> - Color - holds a rgba color with some math functions
+ *  <br> - Timer - tracks time automatically
+ *  @namespace Utilities
+ */
 
 'use strict';
 
+/** A shortcut to get Math.PI
+ *  @const
+ *  @memberof Utilities */
+const PI = Math.PI;
+
+/** True if running a Chromium based browser
+ *  @const
+ *  @memberof Utilities */
+const isChrome = window['chrome'];
+
+/** Returns absoulte value of value passed in
+ *  @param {Number} value
+ *  @return {Number}
+ *  @memberof Utilities */
+const abs = (a)=> a < 0 ? -a : a;
+
+/** Returns the sign of value passed in
+ *  @param {Number} value
+ *  @return {Number}
+ *  @memberof Utilities */
+const sign = (a)=> a < 0 ? -1 : 1;
+
+/** Returns lowest of two values passed in
+ *  @param {Number} valueA
+ *  @param {Number} valueB
+ *  @return {Number}
+ *  @memberof Utilities */
+const min = (a, b)=> a < b ?  a : b;
+
+/** Returns highest of two values passed in
+ *  @param {Number} valueA
+ *  @param {Number} valueB
+ *  @return {Number}
+ *  @memberof Utilities */
+const max = (a, b)=> a > b ?  a : b;
+
+/** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
+ *  @param {Number} dividend
+ *  @param {Number} divisor
+ *  @return {Number}
+ *  @memberof Utilities */
+const mod = (a, b)=> ((a % b) + b) % b;
+
+/** Clamps the value beween max and min
+ *  @param {Number} value
+ *  @param {Number} [max=1]
+ *  @param {Number} [min=0]
+ *  @return {Number}
+ *  @memberof Utilities */
+const clamp = (v, max=1, min=0)=> (ASSERT(max > min), v < min ? min : v > max ? max : v);
+
+/** Returns what percentage the value is between max and min
+ *  @param {Number} value
+ *  @param {Number} [max=1]
+ *  @param {Number} [min=0]
+ *  @return {Number}
+ *  @memberof Utilities */
+const percent = (v, max=1, min=0)=> max-min ? clamp((v-min) / (max-min)) : 0;
+
+/** Linearly interpolates the percent value between max and min
+ *  @param {Number} percent
+ *  @param {Number} [max=1]
+ *  @param {Number} [min=0]
+ *  @return {Number}
+ *  @memberof Utilities */
+const lerp = (p, max=1, min=0)=> min + clamp(p) * (max-min);
+
+/** Formats seconds to mm:ss style for display purposes 
+ *  @param {Number} t - time in seconds
+ *  @return {String}
+ *  @memberof Utilities */
+const formatTime = (t)=> (t/60|0)+':'+(t%60<10?'0':'')+(t%60|0);
+
+/** Returns the nearest power of two not less then the value
+ *  @param {Number} value
+ *  @return {Number}
+ *  @memberof Utilities */
+const nearestPowerOfTwo = (v)=> 2**Math.ceil(Math.log2(v));
+
+/** Applies smoothstep function to the percentage value
+ *  @param {Number} value
+ *  @return {Number}
+ *  @memberof Utilities */
+const smoothStep = (p)=> p * p * (3 - 2 * p);
+
+/** 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
+ *  @memberof Utilities */
+const isOverlapping = (pA, sA, pB, sB)=> abs(pA.x - pB.x)*2 < sA.x + sB.x & abs(pA.y - pB.y)*2 < sA.y + sB.y;
+
+/** 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
+ *  @memberof Utilities */
+const wave = (frequency=1, amplitude=1, t=time)=> amplitude/2 * (1 - Math.cos(t*frequency*2*PI));
+
 ///////////////////////////////////////////////////////////////////////////////
-// helper functions
-
-const PI            = Math.PI;
-const isChrome      = window['chrome'];
-const abs           = (a)=>               a < 0 ? -a : a;
-const sign          = (a)=>               a < 0 ? -1 : 1;
-const min           = (a, b)=>            a < b ?  a : b;
-const max           = (a, b)=>            a > b ?  a : b;
-const mod           = (a, b)=>            ((a % b) + b) % b;
-const clamp         = (v, max=1, min=0)=> (ASSERT(max > min), v < min ? min : v > max ? max : v);
-const percent       = (v, max=1, min=0)=> max-min ? clamp((v-min) / (max-min)) : 0;
-const lerp          = (p, max=1, min=0)=> min + clamp(p) * (max-min);
-const formatTime    = (t)=>               (t/60|0)+':'+(t%60<10?'0':'')+(t%60|0);
-const isOverlapping = (pA, sA, pB, sB)=>  abs(pA.x - pB.x)*2 < sA.x + sB.x & abs(pA.y - pB.y)*2 < sA.y + sB.y;
-const nearestPowerOfTwo = (v)=>           2**Math.ceil(Math.log2(v));
-const wave          = (f=1,a=1,t=time)=>  a/2 * (1 - Math.cos(t*f*2*PI));
-const smoothStep    = (p)=>               p * p * (3 - 2 * p);
-
-// random functions
-const rand         = (a=1, b=0)=>              b + (a-b)*Math.random();
-const randInt      = (a=1, b=0)=>              rand(a,b)|0;
-const randSign     = ()=>                      (rand(2)|0)*2-1;
+
+/** Random global functions
+ *  @namespace Random */
+
+/** Returns a random value between the two values passed in
+ *  @param {Number} [valueA=1]
+ *  @param {Number} [valueB=0]
+ *  @return {Number}
+ *  @memberof Random */
+const rand = (a=1, b=0)=> b + (a-b)*Math.random();
+
+/** Returns a floored random value the two values passed in
+ *  @param {Number} [valueA=1]
+ *  @param {Number} [valueB=0]
+ *  @return {Number}
+ *  @memberof Random */
+const randInt = (a=1, b=0)=> rand(a,b)|0;
+
+/** Randomly returns either -1 or 1
+ *  @return {Number}
+ *  @memberof Random */
+const randSign = ()=> (rand(2)|0)*2-1;
+
+/** Returns a random Vector2 within a circular shape
+ *  @param {Number} [radius=1]
+ *  @param {Number} [minRadius=0]
+ *  @return {Vector2}
+ *  @memberof Random */
 const randInCircle = (radius=1, minRadius=0)=> radius > 0 ? randVector(radius * rand(minRadius / radius, 1)**.5) : new Vector2;
-const randVector   = (length=1)=>              new Vector2().setAngle(rand(2*PI), length);
-const randColor    = (cA = new Color, cB = new Color(0,0,0,1), linear)=>
-    linear ?  cA.lerp(cB, rand()) : new Color(rand(cA.r,cB.r),rand(cA.g,cB.g),rand(cA.b,cB.b),rand(cA.a,cB.a));
 
-// seeded random numbers using xorshift
-let randSeed     = 1;
+/** Returns a random Vector2 with the passed in length
+ *  @param {Number} [length=1]
+ *  @return {Vector2}
+ *  @memberof Random */
+const randVector = (length=1)=> new Vector2().setAngle(rand(2*PI), length);
+
+/** Returns a random color between the two passed in colors, combine components if linear
+ *  @param {Color}   [colorA=new Color(1,1,1,1)]
+ *  @param {Color}   [colorB=new Color(0,0,0,1)]
+ *  @param {Boolean} [linear]
+ *  @return {Color}
+ *  @memberof Random */
+const randColor = (cA = new Color, cB = new Color(0,0,0,1), linear)=>
+    linear ? cA.lerp(cB, rand()) : new Color(rand(cA.r,cB.r),rand(cA.g,cB.g),rand(cA.b,cB.b),rand(cA.a,cB.a));
+
+/** The seed used by the randSeeded function, should not be 0
+ *  @memberof Random */
+let randSeed = 1;
+
+/** Returns a seeded random value between the two values passed in using randSeed
+ *  @param {Number} [valueA=1]
+ *  @param {Number} [valueB=0]
+ *  @return {Number}
+ *  @memberof Random */
 const randSeeded = (a=1, b=0)=>
 {
-    randSeed ^= randSeed << 13; randSeed ^= randSeed >>> 17; randSeed ^= randSeed << 5;
+    randSeed ^= randSeed << 13; randSeed ^= randSeed >>> 17; randSeed ^= randSeed << 5; // xorshift
     return b + (a-b)*abs(randSeed % 1e9)/1e9;
 }
 
-// create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
-const vec2 = (x=0, y)=> x.x == undefined? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y);
-
 ///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
+ * @param {Number} [x=0]
+ * @param {Number} [y=0]
+ * @return {Vector2}
+ * @example
+ * let a = vec2(0, 1); // vector with coordinates (0, 1)
+ * let b = vec2(a);    // copy a into b
+ * a = vec2(5);        // set a to (5, 5)
+ * b = vec2();         // set b to (0, 0)
+ * @memberof Utilities
+ */
+const vec2 = (x=0, y)=> x.x == undefined ? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y);
+
+/** 
+ * 2D Vector object with vector math library
+ * @example
+ * let a = new Vector2(2, 3); // vector with coordinates (2, 3)
+ * let b = new Vector2;       // vector with coordinates (0, 0)
+ * let c = vec2(4, 2);        // use the vec2 function to make a Vector2
+ */
 class Vector2
 {
-    constructor(x=0, y=0) { this.x = x; this.y = y; }
-
-    // basic math operators, a vector or scaler can be passed in
-    copy()                { return new Vector2(this.x, this.y); }
-    scale(s)              { ASSERT(s.x==undefined); return new Vector2(this.x * s, this.y * s); }
-    add(v)                { ASSERT(v.x!=undefined); return new Vector2(this.x + v.x, this.y + v.y); }
-    subtract(v)           { ASSERT(v.x!=undefined); return new Vector2(this.x - v.x, this.y - v.y); }
-    multiply(v)           { ASSERT(v.x!=undefined); return new Vector2(this.x * v.x, this.y * v.y); }
-    divide(v)             { ASSERT(v.x!=undefined); return new Vector2(this.x / v.x, this.y / v.y); }
-
-    // vector math operators
-    length()              { return this.lengthSquared()**.5; }
-    lengthSquared()       { return this.x**2 + this.y**2; }
-    distance(p)           { return this.distanceSquared(p)**.5; }
-    distanceSquared(p)    { return (this.x - p.x)**2 + (this.y - p.y)**2; }
-    normalize(length=1)   { const l = this.length(); return l ? this.scale(length/l) : new Vector2(length); }
+    /** 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 */
+    constructor(x=0, y=0)
+    {
+        /** @property {Number} - X axis location */
+        this.x = x;
+        /** @property {Number} - Y axis location */
+        this.y = y;
+    }
+
+    /** Returns a new vector that is a copy of this
+     *  @return {Vector2} */
+    copy() { return new Vector2(this.x, this.y); }
+
+    /** Returns a copy of this vector plus the vector passed in
+     *  @param {Vector2} vector
+     *  @return {Vector2} */
+    add(v) { ASSERT(v.x!=undefined); return new Vector2(this.x + v.x, this.y + v.y); }
+
+    /** Returns a copy of this vector minus the vector passed in
+     *  @param {Vector2} vector
+     *  @return {Vector2} */
+    subtract(v) { ASSERT(v.x!=undefined); return new Vector2(this.x - v.x, this.y - v.y); }
+
+    /** Returns a copy of this vector times the vector passed in
+     *  @param {Vector2} vector
+     *  @return {Vector2} */
+    multiply(v) { ASSERT(v.x!=undefined); return new Vector2(this.x * v.x, this.y * v.y); }
+
+    /** Returns a copy of this vector divided by the vector passed in
+     *  @param {Vector2} vector
+     *  @return {Vector2} */
+    divide(v) { ASSERT(v.x!=undefined); return new Vector2(this.x / v.x, this.y / v.y); }
+
+    /** Returns a copy of this vector scaled by the vector passed in
+     *  @param {Number} scale
+     *  @return {Vector2} */
+    scale(s) { ASSERT(s.x==undefined); return new Vector2(this.x * s, this.y * s); }
+
+    /** Returns the length of this vector
+     * @return {Number} */
+    length() { return this.lengthSquared()**.5; }
+
+    /** Returns the length of this vector squared
+     * @return {Number} */
+    lengthSquared() { return this.x**2 + this.y**2; }
+
+    /** Returns the distance from this vector to vector passed in
+     * @param {Vector2} vector
+     * @return {Number} */
+    distance(v) { return this.distanceSquared(v)**.5; }
+
+    /** Returns the distance squared from this vector to vector passed in
+     * @param {Vector2} vector
+     * @return {Number} */
+    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]
+     * @return {Vector2} */
+    normalize(length=1) { const l = this.length(); return l ? this.scale(length/l) : new Vector2(length); }
+
+    /** Returns a new vector clamped to length passed in
+     * @param {Number} [length=1]
+     * @return {Vector2} */
     clampLength(length=1) { const l = this.length(); return l > length ? this.scale(length/l) : this; }
-    dot(v)                { ASSERT(v.x!=undefined); return this.x*v.x + this.y*v.y; }
-    cross(v)              { ASSERT(v.x!=undefined); return this.x*v.y - this.y*v.x; }
-    angle()               { return Math.atan2(this.x, this.y); }
-    setAngle(a, length=1) { this.x = length*Math.sin(a); this.y = length*Math.cos(a); return this; }
-    rotate(a)             { const c = Math.cos(a), s = Math.sin(a); return new Vector2(this.x*c-this.y*s, this.x*s+this.y*c); }
-    direction()           { return abs(this.x) > abs(this.y) ? this.x < 0 ? 3 : 1 : this.y < 0 ? 2 : 0; }
-    flip()                { return new Vector2(this.y, this.x); }
-    invert()              { return new Vector2(this.y, -this.x); }
-    round()               { return new Vector2(Math.round(this.x), Math.round(this.y)); }
-    floor()               { return new Vector2(Math.floor(this.x), Math.floor(this.y)); }
-    int()                 { return new Vector2(this.x|0, this.y|0); }
-    lerp(v, p)            { ASSERT(v.x!=undefined); return this.add(v.subtract(this).scale(clamp(p))); }
-    area()                { return this.x * this.y; }
+
+    /** Returns the dot product of this and the vector passed in
+     * @param {Vector2} vector
+     * @return {Number} */
+    dot(v) { ASSERT(v.x!=undefined); return this.x*v.x + this.y*v.y; }
+
+    /** Returns the cross product of this and the vector passed in
+     * @param {Vector2} vector
+     * @return {Number} */
+    cross(v) { ASSERT(v.x!=undefined); return this.x*v.y - this.y*v.x; }
+
+    /** Returns the angle of this vector, up is angle 0
+     * @return {Number} */
+    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] */
+    setAngle(a=0, length=1) { this.x = length*Math.sin(a); this.y = length*Math.cos(a); return this; }
+
+    /** Returns copy of this vector rotated by the angle passed in
+     * @param {Number} angle
+     * @return {Vector2} */
+    rotate(a) { const c = Math.cos(a), s = Math.sin(a); return new Vector2(this.x*c-this.y*s, this.x*s+this.y*c); }
+
+    /** Returns the integer direction of this vector, corrosponding to multiples of 90 degree rotation (0-3)
+     * @return {Number} */
+    direction() { return abs(this.x) > abs(this.y) ? this.x < 0 ? 3 : 1 : this.y < 0 ? 2 : 0; }
+
+    /** Returns a copy of this vector that has been inverted
+     * @return {Vector2} */
+    invert() { return new Vector2(this.y, -this.x); }
+
+    /** Returns a copy of this vector with the axies flipped
+     * @return {Vector2} */
+    flip() { return new Vector2(this.y, this.x); }
+
+    /** Returns a copy of this vector with each axis floored
+     * @return {Vector2} */
+    floor() { return new Vector2(Math.floor(this.x), Math.floor(this.y)); }
+
+    /** Returns the area this vector covers as a rectangle
+     * @return {Number} */
+    area() { return this.x * this.y; }
+
+    /** Returns a new vector that is p percent between this and the vector passed in
+     * @param {Vector2} vector
+     * @param {Number}  percent
+     * @return {Vector2} */
+    lerp(v, p) { ASSERT(v.x!=undefined); return this.add(v.subtract(this).scale(clamp(p))); }
+
+    /** Returns true if this vector is within the bounds of an array size passed in
+     * @param {Vector2} arraySize
+     * @return {Boolean} */
     arrayCheck(arraySize) { return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y; } 
 }
 
 ///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * Color object (red, green, blue, alpha) with some helpful functions
+ * @example
+ * let a = new Color;             // white
+ * let b = new Color(1, 0, 0);    // red
+ * let c = new Color(0, 0, 0, 0); // transparent black
+ */
 class Color
 {
-    constructor(r=1, g=1, b=1, a=1) { this.r=r; this.g=g; this.b=b; this.a=a; }
+    /** Create a color with the components passed in, white by default
+     *  @param {Number} [red=1]
+     *  @param {Number} [green=1]
+     *  @param {Number} [blue=1]
+     *  @param {Number} [alpha=1] */
+    constructor(r=1, g=1, b=1, a=1)
+    {
+        /** @property {Number} - Red */
+        this.r = r;
+        /** @property {Number} - Green */
+        this.g = g;
+        /** @property {Number} - Blue */
+        this.b = b;
+        /** @property {Number} - Alpha */
+        this.a = a;
+    }
+
+    /** Returns a new color that is a copy of this
+     * @return {Color} */
+    copy() { return new Color(this.r, this.g, this.b, this.a); }
 
-    copy(c)     { return new Color(this.r, this.g, this.b, this.a); }
-    add(c)      { return new Color(this.r+c.r, this.g+c.g, this.b+c.b, this.a+c.a); }
+    /** Returns a copy of this color plus the color passed in
+     * @param {Color} color
+     * @return {Color} */
+    add(c) { return new Color(this.r+c.r, this.g+c.g, this.b+c.b, this.a+c.a); }
+
+    /** Returns a copy of this color minus the color passed in
+     * @param {Color} color
+     * @return {Color} */
     subtract(c) { return new Color(this.r-c.r, this.g-c.g, this.b-c.b, this.a-c.a); }
+
+    /** Returns a copy of this color times the color passed in
+     * @param {Color} color
+     * @return {Color} */
     multiply(c) { return new Color(this.r*c.r, this.g*c.g, this.b*c.b, this.a*c.a); }
-    scale(s,a=s){ return new Color(this.r*s, this.g*s, this.b*s, this.a*a); }
-    clamp()     { return new Color(clamp(this.r), clamp(this.g), clamp(this.b), clamp(this.a)); }
-    lerp(c, p)  { return this.add(c.subtract(this).scale(clamp(p))); }
+
+    /** Returns a copy of this color divided by the color passed in
+     * @param {Color} color
+     * @return {Color} */
+    divide(c) { return new Color(this.r/c.r, this.g/c.g, this.b/c.b, this.a/c.a); }
+
+    /** Returns a copy of this color scaled by the value passed in, alpha can be scaled separately
+     * @param {Number} scale
+     * @param {Number} [alphaScale=scale]
+     * @return {Color} */
+    scale(s, a=s) { return new Color(this.r*s, this.g*s, this.b*s, this.a*a); }
+
+    /** Returns a copy of this color clamped to the valid range between 0 and 1
+     * @return {Color} */
+    clamp() { return new Color(clamp(this.r), clamp(this.g), clamp(this.b), clamp(this.a)); }
+
+    /** Returns a new color that is p percent between this and the color passed in
+     * @param {Color}  color
+     * @param {Number} percent
+     * @return {Color} */
+    lerp(c, p) { return this.add(c.subtract(this).scale(clamp(p))); }
+
+    /** Sets this color given a hue, saturation, lightness , and alpha
+     * @param {Number} [hue=0]
+     * @param {Number} [saturation=0]
+     * @param {Number} [lightness=1]
+     * @param {Number} [alpha=1]
+     * @return {Color} */
+    setHSLA(h=0, s=0, l=1, a=1)
+    {
+        const q = l < .5 ? l*(1+s) : l+s-l*s, p = 2*l-q,
+            f = (p, q, t)=>
+                (t = ((t%1)+1)%1) < 1/6 ? p+(q-p)*6*t :
+                t < 1/2 ? q :
+                t < 2/3 ? p+(q-p)*(2/3-t)*6 : p;
+                
+        this.r = f(p, q, h + 1/3);
+        this.g = f(p, q, h);
+        this.b = f(p, q, h - 1/3);
+        this.a = a;
+        return this;
+    }
+
+    /** Returns a new color that has each component randomly adjusted
+     * @param {Number} [amount=.05]
+     * @param {Number} [alphaAmount=0]
+     * @return {Color} */
     mutate(amount=.05, alphaAmount=0) 
     {
         return new Color
@@ -599,357 +990,341 @@ class Color
             this.a + rand(alphaAmount, -alphaAmount)
         ).clamp();
     }
+
+    /** Returns this color expressed as an rgba string
+     * @return {String} */
     rgba()      
     { 
         ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1 && this.a>=0 && this.a<=1);
         return `rgb(${this.r*255|0},${this.g*255|0},${this.b*255|0},${this.a})`; 
     }
+    
+    /** Returns this color expressed as 32 bit integer value
+     * @return {Number} */
     rgbaInt()  
     {
         ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1 && this.a>=0 && this.a<=1);
         return (this.r*255|0) + (this.g*255<<8) + (this.b*255<<16) + (this.a*255<<24); 
     }
-    setHSLA(h=0, s=0, l=1, a=1)
-    {
-        const q = l < .5 ? l*(1+s) : l+s-l*s, p = 2*l-q,
-            f = (p, q, t)=>
-                (t = ((t%1)+1)%1) < 1/6 ? p+(q-p)*6*t :
-                t < 1/2 ? q :
-                t < 2/3 ? p+(q-p)*(2/3-t)*6 : p;
-                
-        this.r = f(p, q, h + 1/3);
-        this.g = f(p, q, h);
-        this.b = f(p, q, h - 1/3);
-        this.a = a;
-        return this;
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Timer object tracks how long has passed since it was set
+ * @example
+ * let a = new Timer;    // creates a timer that is not set
+ * a.set(3);             // sets the timer to 3 seconds
+ *
+ * let b = new Timer(1); // creates a timer with 1 second left
+ * b.unset();            // unsets the timer
+ */
 class Timer
 {
-    constructor(timeLeft)   { this.time = timeLeft == undefined ? undefined : time + timeLeft; this.setTime = timeLeft; }
+    /** Create a timer object set time passed in
+     *  @param {Number} [timeLeft] - How much time left before the timer elapses in seconds */
+    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 */
     set(timeLeft=0) { this.time = time + timeLeft; this.setTime = timeLeft; }
-    unset()         { this.time = undefined; }
-    isSet()         { return this.time != undefined; }
-    active()        { return time <= this.time; }
-    elapsed()       { return time >  this.time; }
-    get()           { return this.isSet()? time - this.time : 0; }
-    getPercent()    { return this.isSet()? percent(this.time - time, 0, this.setTime) : 0; }
-}
-/*
-    LittleJS Engine Configuration
-*/
-
-///////////////////////////////////////////////////////////////////////////////
-// display settings
 
-const maxWidth = 1920, maxHeight = 1200; // up to 1080p and 16:10
-let defaultFont = 'arial';               // font used for text rendering
-let fixedWidth = 0, fixedHeight = 0;     // use native resolution
-let fixedFitToWindow = 1;                // stretch canvas to fit window
-//const fixedWidth = 1280, fixedHeight = 720;  // 720p
-//const fixedWidth = 1920, fixedHeight = 1080; // 1080p
-//const fixedWidth = 128,  fixedHeight = 128;  // PICO-8
-//const fixedWidth = 240,  fixedHeight = 136;  // TIC-80
+    /** Unset the timer */
+    unset() { this.time = undefined; }
 
-///////////////////////////////////////////////////////////////////////////////
-// tile sheet settings
-
-const defaultTileSize = vec2(16); // default size of tiles in pixels
-const tileBleedShrinkFix = .3;    // prevent tile bleeding from neighbors
-let pixelated = 1;                // use crisp pixels for pixel art
-
-///////////////////////////////////////////////////////////////////////////////
-// webgl config
+    /** Returns true if set
+     * @return {Boolean} */
+    isSet() { return this.time != undefined; }
 
-const glEnable = 1; // can run without gl (texured coloring will be disabled)
-let glOverlay = 0;  // fix slow rendering in some browsers by not compositing the WebGL canvas
+    /** Returns true if set and has not elapsed
+     * @return {Boolean} */
+    active() { return time <= this.time; }
 
-///////////////////////////////////////////////////////////////////////////////
-// object config
+    /** Returns true if set and elapsed
+     * @return {Boolean} */
+    elapsed() { return time >  this.time; }
 
-const defaultObjectSize = vec2(.999);  // size of objecs, tiny bit less then 1 to fit in holes
-const defaultObjectMass = 1;           // how heavy are objects for collison calcuations
-const defaultObjectDamping = .99;      // how much to slow velocity by each frame 0-1
-const defaultObjectAngleDamping = .99; // how much to slow angular velocity each frame 0-1
-const defaultObjectElasticity = 0;     // how much to bounce 0-1
-const defaultObjectFriction = .8;      // how much to slow when touching 0-1
-const maxObjectSpeed = 1;              // camp max speed to avoid fast objects missing collisions
+    /** Get how long since elapsed, returns 0 if not set
+     * @return {Number} */
+    get() { return this.isSet()? time - this.time : 0; }
 
-///////////////////////////////////////////////////////////////////////////////
-// input config
+    /** Get percentage elapsed based on time it was set to, returns 0 if not set
+     * @return {Number} */
+    getPercent() { return this.isSet()? percent(this.time - time, 0, this.setTime) : 0; }
+}
+/**
+ *  LittleJS Engine Settings
+ *  @namespace Settings
+ */
 
-const gamepadsEnable = 1;              // should gamepads be allowed
-const touchInputEnable = 1;            // touch input is routed to mouse
-const copyGamepadDirectionToStick = 1; // allow players to use dpad as analog stick
-const copyWASDToDpad = 1;              // allow players to use WASD as direction keys
+'use strict';
 
 ///////////////////////////////////////////////////////////////////////////////
-// audio config
-
-const soundEnable = 1;        // all audio can be disabled
-let audioVolume = .4;         // volume for sound, music and speech
-const defaultSoundRange = 30; // range where sound no longer plays
-const defaultSoundTaper = .7; // what range percent to start tapering off sound 0-1
+// Display settings
+
+/** The max size of the canvas, centered if window is larger
+ *  @type {Vector2} 
+ *  @default
+ *  @memberof Settings */
+const maxSize = vec2(1920, 1200);
+
+/** Fixed size of the canvas, if enabled cavnvas size never changes
+ *  @type {Vector2} 
+ *  @default
+ *  @memberof Settings */
+let fixedSize = vec2();
+
+/** Default font used for text rendering
+ *  @default
+ *  @memberof Settings */
+let fontDefault = 'arial';
+
+/** Use crisp pixels for pixel art if true
+ *  @default
+ *  @memberof Settings */
+let pixelated = 1;
 
 ///////////////////////////////////////////////////////////////////////////////
-// medals config
+// Tile sheet settings
 
-const medalDisplayTime = 5;       // how long to show medals
-const medalDisplaySlideTime = .5; // how quick to slide on/off medals
-const medalDisplayWidth = 640;    // width of medal display
-const medalDisplayHeight = 99;    // height of medal display
-const medalDisplayIconSize = 80;  // size of icon in medal display
-/*
-    LittleJS - The Tiny JavaScript Game Engine That Can
-    MIT License - Copyright 2019 Frank Force
+/** Default size of tiles in pixels
+ *  @type {Vector2} 
+ *  @default
+ *  @memberof Settings */
+const tileSizeDefault = vec2(16);
 
-    Engine Features
-    - Engine and debug system are separate from game code
-    - Object oriented with base class engine object
-    - Engine handles core update loop
-    - Base class object handles update, physics, collision, rendering, etc
-    - Engine helper classes and functions like Vector2, Color, and Timer
-    - Super fast rendering system for tile sheets
-    - Sound effects audio with zzfx and music with zzfxm
-    - Input processing system with gamepad and touchscreen support
-    - Tile layer rendering and collision system
-    - Particle effect system
-    - Automatically calls gameInit(), gameUpdate(), gameUpdatePost(), gameRender(), gameRenderPost()
-    - Debug tools and debug rendering system
-    - Call engineInit() to start it up!
-*/
+/** Prevent tile bleeding from neighbors in pixels
+ *  @default
+ *  @memberof Settings */
+const tileBleedShrinkFix = .3;
 
-'use strict';
+///////////////////////////////////////////////////////////////////////////////
+// Object settings
+
+/** Default size of objects
+ *  @type {Vector2} 
+ *  @default
+ *  @memberof Settings */
+const objectDefaultSize = vec2(1);
+
+/** Default object mass for collison calcuations (how heavy objects are)
+ *  @default
+ *  @memberof Settings */
+const objectDefaultMass = 1;
+
+/** How much to slow velocity by each frame (0-1)
+ *  @default
+ *  @memberof Settings */
+const objectDefaultDamping = .99;
+
+/** How much to slow angular velocity each frame (0-1)
+ *  @default
+ *  @memberof Settings */
+const objectDefaultAngleDamping = .99;
+
+/** How much to bounce when a collision occurs (0-1)
+ *  @default
+ *  @memberof Settings */
+const objectDefaultElasticity = 0;
+
+/** How much to slow when touching (0-1)
+ *  @default
+ *  @memberof Settings */
+const objectDefaultFriction = .8;
+
+/** Clamp max speed to avoid fast objects missing collisions
+ *  @default
+ *  @memberof Settings */
+const objectMaxSpeed = 1;
+
+/** How much gravity to apply to objects along the Y axis, negative is down
+ *  @default
+ *  @memberof Settings */
+let gravity = 0;
 
-const engineName = 'LittleJS';
-const engineVersion = '1.0.14';
-const FPS = 60, timeDelta = 1/FPS; // engine uses a fixed time step
-const tileImage = new Image(); // everything uses the same tile sheet
-
-// core engine variables
-let mainCanvas, mainContext, overlayCanvas, overlayContext, mainCanvasSize=vec2(), 
-    engineObjects=[], engineCollideObjects=[],
-    cameraPos=vec2(), cameraScale=max(defaultTileSize.x, defaultTileSize.y),
-    frame=0, time=0, realTime=0, paused=0, frameTimeLastMS=0, frameTimeBufferMS=0, debugFPS=0, gravity=0, 
-    tileImageSize, tileImageSizeInverse, shrinkTilesX, shrinkTilesY, drawCount;
-
-// call this function to start the engine
-function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, tileImageSource)
-{
-    // init engine when tiles load
-    tileImage.onload = ()=>
-    {
-        // save tile image info
-        tileImageSizeInverse = vec2(1).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
-        debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
-        shrinkTilesX = tileBleedShrinkFix/tileImageSize.x;
-        shrinkTilesY = tileBleedShrinkFix/tileImageSize.y;
+///////////////////////////////////////////////////////////////////////////////
+// Camera settings
 
-        // setup html
-        document.body.appendChild(mainCanvas = document.createElement('canvas'));
-        document.body.style = 'margin:0;overflow:hidden;background:#000';
-        mainCanvas.style = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)' +
-            (pixelated ? ';image-rendering:crisp-edges;image-rendering:pixelated' : ''); // pixelated rendering
-        mainContext = mainCanvas.getContext('2d');
+/** Position of camera in world space
+ *  @type {Vector2}
+ *  @default
+ *  @memberof Settings */
+let cameraPos = vec2();
 
-        // init stuff and start engine
-        debugInit();
-        glInit();
+/** Scale of camera in world space
+ *  @default
+ *  @memberof Settings */
+let cameraScale = max(tileSizeDefault.x, tileSizeDefault.y);
 
-        // create overlay canvas for hud to appear above gl canvas
-        document.body.appendChild(overlayCanvas = document.createElement('canvas'));
-        overlayCanvas.style = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
-        overlayContext = overlayCanvas.getContext('2d');
+///////////////////////////////////////////////////////////////////////////////
+// WebGL settings
 
-        gameInit();
-        engineUpdate();
-    };
+/** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
+ *  @default
+ *  @memberof Settings */
+const glEnable = 1;
 
-    // main update loop
-    const engineUpdate = (frameTimeMS=0)=>
-    {
-        requestAnimationFrame(engineUpdate);
+/** Fixes slow rendering in some browsers by not compositing the WebGL canvas
+ *  @default
+ *  @memberof Settings */
+let glOverlay = 1;
 
-        // update time keeping
-        let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
-        frameTimeLastMS = frameTimeMS;
-        if (debug || showWatermark)
-            debugFPS = lerp(.05, 1e3/(frameTimeDeltaMS||1), debugFPS);
-        if (debug)
-            frameTimeDeltaMS *= keyIsDown(107) ? 5 : keyIsDown(109) ? .2 : 1; // +/- to speed/slow time
-        realTime += frameTimeDeltaMS / 1e3;
-        frameTimeBufferMS = min(frameTimeBufferMS + !paused * frameTimeDeltaMS, 50); // clamp incase of slow framerate
+///////////////////////////////////////////////////////////////////////////////
+// Input settings
 
-        if (paused)
-        {
-            // do post update even when paused
-            inputUpdate();
-            debugUpdate();
-            gameUpdatePost();
-            inputUpdatePost();
-        }
-        else
-        {
-            // apply time delta smoothing, improves smoothness of framerate in some browsers
-            let deltaSmooth = 0;
-            if (frameTimeBufferMS < 0 && frameTimeBufferMS > -9)
-            {
-                // force an update each frame if time is close enough (not just a fast refresh rate)
-                deltaSmooth = frameTimeBufferMS;
-                frameTimeBufferMS = 0;
-            }
-            
-            // update multiple frames if necessary in case of slow framerate
-            for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / FPS)
-            {
-                // update game and objects
-                inputUpdate();
-                gameUpdate();
-                engineUpdateObjects();
+/** Should gamepads be allowed
+ *  @default
+ *  @memberof Settings */
+const gamepadsEnable = 1;
 
-                // do post update
-                debugUpdate();
-                gameUpdatePost();
-                inputUpdatePost();
-            }
+/** If true, the dpad input is also routed to the left analog stick (for better accessability)
+ *  @default
+ *  @memberof Settings */
+const gamepadDirectionEmulateStick = 1;
 
-            // add the time smoothing back in
-            frameTimeBufferMS += deltaSmooth;
-        }
+/** If true touch input is routed to mouse functions
+ *  @default
+ *  @memberof Settings */
+const inputTouchEnable = 1;
 
-        if (fixedWidth)
-        {
-            // clear set fixed size
-            mainCanvas.width  = fixedWidth;
-            mainCanvas.height = fixedHeight;
-            
-            if (fixedFitToWindow)
-            {
-                // fit to window by adding space on top or bottom if necessary
-                const aspect = innerWidth / innerHeight;
-                const fixedAspect = fixedWidth / fixedHeight;
-                mainCanvas.style.width  = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-                mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
-                if (glCanvas)
-                {
-                    glCanvas.style.width  = mainCanvas.style.width;
-                    glCanvas.style.height = mainCanvas.style.height;
-                }
-            }
-        }
-        else
-        {
-            // clear and set size to same as window
-            mainCanvas.width  = min(innerWidth,  maxWidth);
-            mainCanvas.height = min(innerHeight, maxHeight);
-        }
-        
-        // save canvas size and clear overlay canvas
-        mainCanvasSize = vec2(overlayCanvas.width = mainCanvas.width, overlayCanvas.height = mainCanvas.height);
-        mainContext.imageSmoothingEnabled = !pixelated; // disable smoothing for pixel art
+/** If true the WASD keys are also routed to the direction keys (for better accessability)
+ *  @default
+ *  @memberof Settings */
+const inputWASDEmulateDirection = 1;
 
-        // render sort then render while removing destroyed objects
-        glPreRender(mainCanvas.width, mainCanvas.height);
-        gameRender();
-        engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
-        for (const o of engineObjects)
-            o.destroyed || o.render();
-        gameRenderPost();
-        medalsRender();
-        debugRender();
-        glCopyToContext(mainContext);
+///////////////////////////////////////////////////////////////////////////////
+// Audio settings
 
-        if (showWatermark)
-        {
-            // update fps
-            overlayContext.textAlign = 'right';
-            overlayContext.textBaseline = 'top';
-            overlayContext.font = '1em monospace';
-            overlayContext.fillStyle = '#000';
-            const text = engineName + ' ' + 'v' + engineVersion + ' / ' 
-                + drawCount + ' / ' + engineObjects.length + ' / ' + debugFPS.toFixed(1);
-            overlayContext.fillText(text, mainCanvas.width-3, 3);
-            overlayContext.fillStyle = '#fff';
-            overlayContext.fillText(text, mainCanvas.width-2, 2);
-            drawCount = 0;
-        }
-    }
+/** Volume scale to apply to all sound, music and speech
+ *  @default
+ *  @memberof Settings */
+let soundVolume = .5;
 
-    // set tile image source to load the image and start the engine
-    tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
-}
+/** All audio code can be disabled and removed from build
+ *  @default
+ *  @memberof Settings */
+const soundEnable = 1;
 
-function engineUpdateObjects()
-{
-    // recursive object update
-    const updateObject = (o)=>
-    {
-        if (!o.destroyed)
-        {
-            o.update();
-            for (const child of o.children)
-                updateObject(child);
-        }
-    }
-    for (const o of engineObjects)
-        o.parent || updateObject(o);
+/** Default range where sound no longer plays
+ *  @default
+ *  @memberof Settings */
+const soundDefaultRange = 30;
 
-    // remove destroyed objects
-    engineObjects = engineObjects.filter(o=>!o.destroyed);
-    engineCollideObjects = engineCollideObjects.filter(o=>!o.destroyed);
+/** Default range percent to start tapering off sound (0-1)
+ *  @default
+ *  @memberof Settings */
+const soundDefaultTaper = .7;
 
-    // increment frame and update time
-    time = ++frame / FPS;
-}
+///////////////////////////////////////////////////////////////////////////////
+// Medals settings
+
+/** How long to show medals for in seconds
+ *  @default
+ *  @memberof Settings */
+const medalDisplayTime = 5;
+
+/** How quickly to slide on/off medals in seconds
+ *  @default
+ *  @memberof Settings */
+const medalDisplaySlideTime = .5;
+
+/** Width of medal display
+ *  @default
+ *  @memberof Settings */
+const medalDisplayWidth = 640;
+
+/** Height of medal display
+ *  @default
+ *  @memberof Settings */
+const medalDisplayHeight = 99;
+
+/** Size of icon in medal display
+ *  @default
+ *  @memberof Settings */
+const medalDisplayIconSize = 80;
 /*
-    LittleJS Object Base Class
-    - Base object class used by the engine
-    - Automatically adds self to object list
-    - Will be updated and rendered each frame
-    - Renders as a sprite from a tilesheet by default
-    - Can have color and addtive color applied
-    - 2d Physics and collision system
-    - Sorted by renderOrder
-    - Objects can have children attached
-    - Parents are updated before children, and set child transform
-    - Call destroy() to get rid of objects
+    LittleJS Object System
 */
 
 'use strict';
 
+/** 
+ * LittleJS Object Base Object Class
+ * <br> - Base object class used by the engine
+ * <br> - Automatically adds self to object list
+ * <br> - Will be updated and rendered each frame
+ * <br> - Renders as a sprite from a tilesheet by default
+ * <br> - Can have color and addtive color applied
+ * <br> - 2d Physics and collision system
+ * <br> - Sorted by renderOrder
+ * <br> - Objects can have children attached
+ * <br> - Parents are updated before children, and set child transform
+ * <br> - Call destroy() to get rid of objects
+ * @example
+ * // create an engine object, normally you would first extend the class with your own
+ * const pos = vec2(2,3);
+ * const object = new EngineObject(pos); 
+ */
 class EngineObject
 {
-    constructor(pos, size=defaultObjectSize, tileIndex=-1, tileSize=defaultTileSize, angle=0, color)
+    /** Create an engine object and adds it to the list of objects
+     *  @param {Vector2} [position=new Vector2(0,0)] - World space position of the object
+     *  @param {Vector2} [size=objectDefaultSize] - World space size of the object
+     *  @param {Number}  [tileIndex=-1] - Tile to use to render object, untextured if -1
+     *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tile in source pixels
+     *  @param {Number}  [angle=0] - Angle to rotate the object
+     *  @param {Color}   [color] - Color to apply to tile when rendered
+     *  @param {Number}  [renderOrder=0] - Objects sorted by renderOrder before being rendered
+     */
+    constructor(pos=vec2(), size=objectDefaultSize, tileIndex=-1, tileSize=tileSizeDefault, angle=0, color, renderOrder=0)
     {
         // set passed in params
         ASSERT(pos && pos.x != undefined && size.x != undefined); // ensure pos and size are vec2s
+
+        /** @property {Vector2} - World space position of the object */
         this.pos = pos.copy();
+        /** @property {Vector2} - World space width and height of the object */
         this.size = size;
+        /** @property {Vector2} - Size of object used for drawing, uses size if not set */
+        this.drawSize;
+        /** @property {Number}  - Tile to use to render object, untextured if -1 */
         this.tileIndex = tileIndex;
+        /** @property {Vector2} - Size of tile in source pixels */
         this.tileSize = tileSize;
+        /** @property {Number}  - Angle to rotate the object */
         this.angle = angle;
+        /** @property {Color}  - Color to apply when rendered */
         this.color = color;
-
-        // set physics defaults
-        this.mass         = defaultObjectMass;
-        this.damping      = defaultObjectDamping;
-        this.angleDamping = defaultObjectAngleDamping;
-        this.elasticity   = defaultObjectElasticity;
-        this.friction     = defaultObjectFriction;
-
-        // init other object stuff
+        /** @property {Color}  - Additive color to apply when rendered */
+        this.additiveColor;
+
+        // set object defaults
+        /** @property {Number} [mass=objectDefaultMass] - How heavy the object is */
+        this.mass         = objectDefaultMass;
+        /** @property {Number} [damping=objectDefaultDamping] - How much to slow down velocity each frame (0-1) */
+        this.damping      = objectDefaultDamping;
+        /** @property {Number} [angleDamping=objectDefaultAngleDamping] - How much to slow down rotation each frame (0-1) */
+        this.angleDamping = objectDefaultAngleDamping;
+        /** @property {Number} [elasticity=objectDefaultElasticity] - How bouncy the object is when colliding (0-1) */
+        this.elasticity   = objectDefaultElasticity;
+        /** @property {Number} [friction=objectDefaultFriction] - How much friction to apply when sliding (0-1) */
+        this.friction     = objectDefaultFriction;
+        /** @property {Number} [gravityScale=1] - How much to scale gravity by for this object */
+        this.gravityScale = 1;
+        /** @property {Number} [renderOrder=0] - Objects are sorted by render order */
+        this.renderOrder = renderOrder;
+
+        // init other internal object stuff
         this.spawnTime = time;
-        this.velocity = vec2(this.collideSolidObjects = this.renderOrder = this.angleVelocity = 0);
-        this.collideTiles = this.gravityScale = 1;
+        this.velocity = vec2(this.collideSolidObjects = this.angleVelocity = 0);
+        this.collideTiles = 1;
         this.children = [];
 
         // add to list of objects
         engineObjects.push(this);
     }
     
+    /** Update the object transform and physics, called automatically by engine once each frame */
     update()
     {
         const parent = this.parent;
@@ -962,8 +1337,8 @@ class EngineObject
         }
 
         // limit max speed to prevent missing collisions
-        this.velocity.x = clamp(this.velocity.x, maxObjectSpeed, -maxObjectSpeed);
-        this.velocity.y = clamp(this.velocity.y, maxObjectSpeed, -maxObjectSpeed);
+        this.velocity.x = clamp(this.velocity.x, objectMaxSpeed, -objectMaxSpeed);
+        this.velocity.y = clamp(this.velocity.y, objectMaxSpeed, -objectMaxSpeed);
 
         // apply physics
         const oldPos = this.pos.copy();
@@ -1017,7 +1392,7 @@ class EngineObject
                     if (o.mass) // push away if not fixed
                         o.velocity = o.velocity.subtract(velocity);
                         
-                    debugPhysics && debugAABB(this.pos, o.pos, this.size, o.size, '#f00');
+                    debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f00');
                     continue;
                 }
 
@@ -1083,7 +1458,7 @@ class EngineObject
                         this.velocity.x *= -this.elasticity;
                 }
 
-                debugPhysics && debugAABB(this.pos, o.pos, this.size, o.size, '#f0f');
+                debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
             }
         }
         if (this.collideTiles)
@@ -1091,8 +1466,6 @@ class EngineObject
             // check collision against tiles
             if (tileCollisionTest(this.pos, this.size, this))
             {
-                //debugPhysics && debugRect(this.pos, this.size, '#ff0');
-
                 // if already was stuck in collision, don't do anything
                 // this should not happen unless something starts in collision
                 if (!tileCollisionTest(oldPos, this.size, this))
@@ -1105,13 +1478,20 @@ class EngineObject
                         // set if landed on ground
                         this.groundObject = wasMovingDown;
 
-                        // push out of collision and bounce
-                        this.pos.y = oldPos.y;
+                        // bounce velocity
                         this.velocity.y *= -this.elasticity;
+
+                        // adjust next velocity to settle on ground
+                        const o = (oldPos.y - this.size.y/2|0) - (oldPos.y - this.size.y/2);
+                        if (o < 0 && o > -1 && o > this.damping * this.velocity.y + gravity * this.gravityScale) 
+                            this.velocity.y = this.damping ? (o - gravity * this.gravityScale) / this.damping : 0;
+
+                        // move to previous position
+                        this.pos.y = oldPos.y;
                     }
                     if (isBlockedX)
                     {
-                        // push out of collision and bounce
+                        // move to previous position and bounce
                         this.pos.x = oldPos.x;
                         this.velocity.x *= -this.elasticity;
                     }
@@ -1120,12 +1500,14 @@ class EngineObject
         }
     }
        
+    /** Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder */
     render()
     {
         // default object render
         drawTile(this.pos, this.drawSize || this.size, this.tileIndex, this.tileSize, this.color, this.angle, this.mirror, this.additiveColor);
     }
     
+    /** Destroy this object, destroy it's children, detach it's parent, and mark it for removal */
     destroy()             
     { 
         if (this.destroyed)
@@ -1137,15 +1519,45 @@ class EngineObject
         for (const child of this.children)
             child.destroy(child.parent = 0);
     }
-    collideWithTile(data, pos)        { return data > 0; }
-    collideWithTileRaycast(data, pos) { return data > 0; }
+    
+    /** Called to check if a tile collision should be resolved
+     *  @param {Number}  tileData - the value of the tile at the position
+     *  @param {Vector2} pos - tile where the collision occured
+     *  @return {Boolean} true if the collision should be resolved */
+    collideWithTile(tileData, pos)        { return tileData > 0; }
+    
+    /** Called to check if a tile raycast hit
+     *  @param {Number}  tileData - the value of the tile at the position
+     *  @param {Vector2} pos - tile where the raycast is
+     *  @return {Boolean} true if the raycast should hit */
+    collideWithTileRaycast(tileData, pos) { return tileData > 0; }
+
+    /** Called to check if a tile raycast hit
+     *  @param {EngineObject} object - the object to test against
+     *  @return {Boolean} true if the collision should be resolved
+     */
     collideWithObject(o)              { return 1; }
+
+    /** How long since the object was created
+     *  @return {Number} */
     getAliveTime()                    { return time - this.spawnTime; }
-    applyAcceleration(a)              { ASSERT(!this.isFixed()); this.velocity = this.velocity.add(a); }
-    applyForce(force)	              { this.applyAcceleration(force.scale(1/this.mass)); }
-    isFixed()                         { return !this.mass; }
-    getMirrorSign(s=1)                { return this.mirror ? -s : s; }
 
+    /** Apply acceleration to this object (adjust velocity, not affected by mass)
+     *  @param {Vector2} acceleration */
+    applyAcceleration(a)              { if (this.mass) this.velocity = this.velocity.add(a); }
+
+    /** Apply force to this object (adjust velocity, affected by mass)
+     *  @param {Vector2} force */
+    applyForce(force)	              { this.applyAcceleration(force.scale(1/this.mass)); }
+    
+    /** Get the direction of the mirror
+     *  @return {Number} -1 if this.mirror is true, or 1 if not mirrored */
+    getMirrorSign() { return this.mirror ? -1 : 1; }
+
+    /** Attaches a child to this with a given local transform
+     *  @param {EngineObject} child
+     *  @param {Vector2}      [localPos=new Vector2]
+     *  @param {Number}       [localAngle=0] */
     addChild(child, localPos=vec2(), localAngle=0)
     {
         ASSERT(!child.parent && !this.children.includes(child));
@@ -1154,6 +1566,9 @@ class EngineObject
         child.localPos = localPos.copy();
         child.localAngle = localAngle;
     }
+
+    /** Removes a child from this one
+     *  @param {EngineObject} child */
     removeChild(child)
     {
         ASSERT(child.parent == this && this.children.includes(child));
@@ -1161,7 +1576,11 @@ class EngineObject
         child.parent = 0;
     }
 
-    setCollision(collideSolidObjects, isSolid, collideTiles=1)
+    /** Set how this object collides
+     *  @param {boolean} [collideSolidObjects=0] - Does it collide with solid objects
+     *  @param {boolean} [isSolid=0] - Does it collide with and block other objects (expensive in large numbers)
+     *  @param {boolean} [collideTiles=1] - Does it collide with the tile collision */
+    setCollision(collideSolidObjects=0, isSolid=0, collideTiles=1)
     {
         ASSERT(collideSolidObjects || !isSolid); // solid objects must be set to collide
 
@@ -1182,62 +1601,81 @@ class EngineObject
         this.collideTiles = collideTiles;
     }
 }
-
-function destroyAllObjects()
-{
-    // remove all objects that are not persistent or are descendants of something persistent
-    for (const o of engineObjects)
-        o.persistent || o.parent || o.destroy();
-    engineObjects = engineObjects.filter(o=>!o.destroyed);
-}
-
-function forEachObject(pos, size, callbackFunction, objects=engineObjects)
-{
-    if (!pos)
-    {
-        // all objects
-        for (const o of objects)
-            callbackFunction(o);
-    }
-    else if (size.x != undefined)
-    {
-        // aabb test
-        for (const o of objects)
-            isOverlapping(pos, size, o.pos, o.size) && callbackFunction(o);
-    }
-    else
-    {
-        // circle test
-        const sizeSquared = size*size;
-        for (const o of objects)
-            pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
-    }
-}
-/*
-    LittleJS Drawing System
-
-    - Super fast tile sheet rendering
-    - Utility functions for webgl
-*/
+/** 
+ *  LittleJS Drawing System
+ *  <br> - Hybrid with both Canvas2D and WebGL available
+ *  <br> - Super fast tile sheet rendering with WebGL
+ *  <br> - Can apply rotation, mirror, color and additive color
+ *  <br> - Many useful utility functions
+ *  @namespace Draw
+ */
 
 'use strict';
 
-// convert between screen and world coordinates
+/** Tile sheet for batch rendering system
+ *  @type {Image}
+ *  @memberof Draw */
+const tileImage = new Image();
+
+/** The primary 2D canvas visible to the user
+ *  @type {HTMLCanvasElement}
+ *  @memberof Draw */
+let mainCanvas;
+
+/** 2d context for mainCanvas
+ *  @type {CanvasRenderingContext2D}
+ *  @memberof Draw */
+let mainContext;
+
+/** A canvas that appears on top of everything the same size as mainCanvas
+ *  @type {HTMLCanvasElement}
+ *  @memberof Draw */
+let overlayCanvas;
+
+/** 2d context for overlayCanvas
+ *  @type {CanvasRenderingContext2D}
+ *  @memberof Draw */
+let overlayContext;
+
+/** The size of the main canvas (and other secondary canvases) 
+ *  @type {Vector2}
+ *  @memberof Draw */
+let mainCanvasSize = vec2();
+
+/** Convert from screen to world space coordinates
+ *  @param {Vector2} screenPos
+ *  @return {Vector2}
+ *  @memberof Draw */
 const screenToWorld = (screenPos)=>
     screenPos.add(vec2(.5)).subtract(mainCanvasSize.scale(.5)).multiply(vec2(1/cameraScale,-1/cameraScale)).add(cameraPos);
+
+/** Convert from world to screen space coordinates
+ *  @param {Vector2} worldPos
+ *  @return {Vector2}
+ *  @memberof Draw */
 const worldToScreen = (worldPos)=>
     worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
 
-// draw textured tile centered on pos
-function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, color=new Color, angle=0, mirror, 
-    additiveColor=new Color(0,0,0,0))
+/** Draw textured tile centered in world space, with color applied if using WebGL
+ *  @param {Vector2} pos                                - Center of the tile in world space
+ *  @param {Vector2} [size=new Vector2(1,1)]            - Size of the tile in world space, width and height
+ *  @param {Number}  [tileIndex=-1]                     - Tile index to use, negative is untextured
+ *  @param {Vector2} [tileSize=tileSizeDefault]         - Tile size in source pixels
+ *  @param {Color}   [color=new Color(1,1,1)]           - Color to modulate with
+ *  @param {Number}  [angle=0]                          - Angle to rotate by
+ *  @param {Boolean} [mirror=0]                         - If true image is flipped along the Y axis
+ *  @param {Color}   [additiveColor=new Color(0,0,0,0)] - Additive color to be applied
+ *  @param {Boolean} [useWebGL=glEnable]                - Use accelerated WebGL rendering
+ *  @memberof Draw */
+function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle=0, mirror, 
+    additiveColor=new Color(0,0,0,0), useWebGL=glEnable)
 {
     showWatermark && ++drawCount;
-    if (glEnable)
+    if (glEnable && useWebGL)
     {
-        if (tileIndex < 0)
+        if (tileIndex < 0 || !tileImage.width)
         {
-            // if negative tile index, force untextured
+            // if negative tile index or image not found, force untextured
             glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
         }
         else
@@ -1284,33 +1722,68 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, col
     }
 }
 
-// draw a colored untextured rect centered on pos
-function drawRect(pos, size, color, angle)
+/** Draw colored rect centered on pos
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=new Vector2(1,1)]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [angle=0]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function drawRect(pos, size, color, angle, useWebGL)
 {
-    drawTile(pos, size, -1, defaultTileSize, color, angle);
+    drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
 }
 
-// draw textured tile centered on pos in screen space
-function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor)
+/** Draw textured tile centered on pos in screen space
+ *  @param {Vector2} pos                        - Center of the tile
+ *  @param {Vector2} [size=new Vector2(1,1)]    - Size of the tile
+ *  @param {Number}  [tileIndex=-1]             - Tile index to use, negative is untextured
+ *  @param {Vector2} [tileSize=tileSizeDefault] - Tile size in source pixels
+ *  @param {Color}   [color=new Color]
+ *  @param {Number}  [angle=0]
+ *  @param {Boolean} [mirror=0]
+ *  @param {Color}   [additiveColor=new Color(0,0,0,0)]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL)
 {
-    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor);
+    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL);
 }
 
-// draw a colored untextured rect in screen space
-function drawRectScreenSpace(pos, size, color, angle)
+/** Draw colored rectangle in screen space
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=new Vector2(1,1)]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [angle=0]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function drawRectScreenSpace(pos, size, color, angle, useWebGL)
 {
-    drawTileScreenSpace(pos, size, -1, defaultTileSize, color, angle);
+    drawTileSrceenSpace(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
 }
 
-// draw a colored line between two points
-function drawLine(posA, posB, thickness=.1, color)
+/** Draw colored line between two points
+ *  @param {Vector2} posA
+ *  @param {Vector2} posB
+ *  @param {Number}  [thickness=.1]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function drawLine(posA, posB, thickness=.1, color, useWebGL)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle());
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), 0, 0, useWebGL);
 }
 
-// draw directly to the 2d canvas in world space (bipass webgl)
+/** Draw directly to a 2d canvas context in world space
+ *  @param {Vector2}  pos
+ *  @param {Vector2}  size
+ *  @param {Number}   angle
+ *  @param {Boolean}  mirror
+ *  @param {Function} drawFunction
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
 function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext)
 {
     // create canvas transform from world space to screen space
@@ -1324,8 +1797,16 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
     context.restore();
 }
 
-// draw text on overlay canvas in world space
-function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=defaultFont)
+/** Draw text on overlay canvas in world space
+ *  @param {String}  text
+ *  @param {Vector2} pos
+ *  @param {Number}  [size=1]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=new Color(0,0,0)]
+ *  @param {String}  [textAlign='center']
+ *  @memberof Draw */
+function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
 {
     pos = worldToScreen(pos);
     overlayContext.font = size*cameraScale + 'px '+ font;
@@ -1341,16 +1822,28 @@ function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new
     overlayContext.fillText(text, pos.x, pos.y);
 }
 
-// enable additive or regular blend mode
-function setBlendMode(additive)
+/** Enable normal or additive blend mode
+ *  @param {Boolean} [additive=0]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function setBlendMode(additive, useWebGL=glEnable)
 {
-    glEnable ? glSetBlendMode(additive) : mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    if (glEnable && useWebGL)
+        glSetBlendMode(additive);
+    else
+        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// fullscreen mode
+// Fullscreen mode
 
+/** Returns true if fullscreen mode is active
+ *  @return {Boolean}
+ *  @memberof Draw */
 const isFullscreen =()=> document.fullscreenElement;
+
+/** Toggle fullsceen mode
+ *  @memberof Draw */
 function toggleFullscreen()
 {
     if (isFullscreen())
@@ -1368,39 +1861,107 @@ function toggleFullscreen()
             document.body.mozRequestFullScreen();
     }
 }
-/*
-    LittleJS Input System
-    - Tracks key down, pressed, and released
-    - Also tracks mouse buttons, position, and wheel
-    - Supports multiple gamepads
-*/
+/** 
+ *  LittleJS Input System
+ *  <br> - Tracks key down, pressed, and released
+ *  <br> - Also tracks mouse buttons, position, and wheel
+ *  <br> - Supports multiple gamepads
+ *  @namespace Input
+ */
 
 'use strict';
 
-// input for all devices including keyboard, mouse, and gamepad
-let hadInput         = 0;
-const keyIsDown      = (key, device=0)=> inputData[device] && inputData[device][key] & 1 ? 1 : 0;
-const keyWasPressed  = (key, device=0)=> inputData[device] && inputData[device][key] & 2 ? 1 : 0;
+/** Returns true if device key is down
+ *  @param {Number} key
+ *  @param {Number} [device=0]
+ *  @return {Boolean}
+ *  @memberof Input */
+const keyIsDown = (key, device=0)=> inputData[device] && inputData[device][key] & 1 ? 1 : 0;
+
+/** Returns true if device key was pressed this frame
+ *  @param {Number} key
+ *  @param {Number} [device=0]
+ *  @return {Boolean}
+ *  @memberof Input */
+const keyWasPressed = (key, device=0)=> inputData[device] && inputData[device][key] & 2 ? 1 : 0;
+
+/** Returns true if device key was released this frame
+ *  @param {Number} key
+ *  @param {Number} [device=0]
+ *  @return {Boolean}
+ *  @memberof Input */
 const keyWasReleased = (key, device=0)=> inputData[device] && inputData[device][key] & 4 ? 1 : 0;
-const clearInput     = ()=> inputData[0] = [];
 
-// mouse input
-const mouseIsDown      = keyIsDown;
-const mouseWasPressed  = keyWasPressed;
+/** Clears all input
+ *  @memberof Input */
+const clearInput = ()=> inputData[0] = [];
+
+/** Returns true if mouse button is down
+ *  @param {Number} button
+ *  @return {Boolean}
+ *  @memberof Input */
+const mouseIsDown = keyIsDown;
+
+/** Returns true if mouse button was pressed
+ *  @param {Number} button
+ *  @return {Boolean}
+ *  @memberof Input */
+const mouseWasPressed = keyWasPressed;
+
+/** Returns true if mouse button was released
+ *  @param {Number} button
+ *  @return {Boolean}
+ *  @memberof Input */
 const mouseWasReleased = keyWasReleased;
-let mousePos           = vec2();
-let mousePosScreen     = vec2();
-let mouseWheel         = 0;
-
-// gamepad input
-let usingGamepad = 0;
-const gamepadIsDown      = (button, gamepad=0)=> keyIsDown     (button, gamepad+1);
-const gamepadWasPressed  = (button, gamepad=0)=> keyWasPressed (button, gamepad+1);
+
+/** Mouse pos in world space
+ *  @type {Vector2}
+ *  @memberof Input */
+let mousePos = vec2();
+
+/** Mouse pos in screen space
+ *  @type {Vector2}
+ *  @memberof Input */
+let mousePosScreen = vec2();
+
+/** Mouse wheel delta this frame
+ *  @memberof Input */
+let mouseWheel = 0;
+
+/** Returns true if user is using gamepad (has more recently pressed a gamepad button)
+ *  @memberof Input */
+let isUsingGamepad = 0;
+
+/** Returns true if gamepad button is down
+ *  @param {Number} button
+ *  @param {Number} [gamepad=0]
+ *  @return {Boolean}
+ *  @memberof Input */
+const gamepadIsDown = (button, gamepad=0)=> keyIsDown(button, gamepad+1);
+
+/** Returns true if gamepad button was pressed
+ *  @param {Number} button
+ *  @param {Number} [gamepad=0]
+ *  @return {Boolean}
+ *  @memberof Input */
+const gamepadWasPressed = (button, gamepad=0)=> keyWasPressed(button, gamepad+1);
+
+/** Returns true if gamepad button was released
+ *  @param {Number} button
+ *  @param {Number} [gamepad=0]
+ *  @return {Boolean}
+ *  @memberof Input */
 const gamepadWasReleased = (button, gamepad=0)=> keyWasReleased(button, gamepad+1);
-const gamepadStick       = (stick,  gamepad=0)=> stickData[gamepad] ? stickData[gamepad][stick] || vec2() : vec2();
+
+/** Returns gamepad stick value
+ *  @param {Number} stick
+ *  @param {Number} [gamepad=0]
+ *  @return {Vector2}
+ *  @memberof Input */
+const gamepadStick = (stick,  gamepad=0)=> stickData[gamepad] ? stickData[gamepad][stick] || vec2() : vec2();
 
 ///////////////////////////////////////////////////////////////////////////////
-// input update called by engine
+// Input update called by engine
 
 const inputData = [[]];
 
@@ -1426,23 +1987,25 @@ function inputUpdatePost()
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// keyboard event handlers
+// Keyboard event handlers
+
 onkeydown = e=>
 {
     if (debug && e.target != document.body) return;
-    e.repeat || (inputData[usingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
-    hadInput = 1;
+    e.repeat || (inputData[isUsingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
+    debug || e.preventDefault();
 }
 onkeyup = e=>
 {
     if (debug && e.target != document.body) return;
     inputData[0][remapKeyCode(e.keyCode)] = 4;
 }
-const remapKeyCode = c=> copyWASDToDpad ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
+const remapKeyCode = c=> inputWASDEmulateDirection ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
 
 ///////////////////////////////////////////////////////////////////////////////
-// mouse event handlers
-onmousedown = e=> (inputData[usingGamepad = 0][e.button] = 3, hadInput = 1, onmousemove(e));
+// Mouse event handlers
+
+onmousedown = e=> {inputData[isUsingGamepad = 0][e.button] = 3; onmousemove(e); e.button && e.preventDefault();}
 onmouseup   = e=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
 onmousemove = e=>
 {
@@ -1456,7 +2019,7 @@ onwheel = e=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
 oncontextmenu = e=> !1; // prevent right click menu
 
 ///////////////////////////////////////////////////////////////////////////////
-// gamepad input
+// Gamepad input
 
 const stickData = [];
 function gamepadsUpdate()
@@ -1490,10 +2053,10 @@ function gamepadsUpdate()
             {
                 const button = gamepad.buttons[j];
                 data[j] = button.pressed ? 1 + 2*!gamepadIsDown(j,i) : 4*gamepadIsDown(j,i);
-                usingGamepad |= !i && button.pressed;
+                isUsingGamepad |= !i && button.pressed;
             }
             
-            if (copyGamepadDirectionToStick)
+            if (gamepadDirectionEmulateStick)
             {
                 // copy dpad to left analog stick when pressed
                 const dpad = vec2(gamepadIsDown(15,i) - gamepadIsDown(14,i), gamepadIsDown(12,i) - gamepadIsDown(13,i));
@@ -1505,12 +2068,16 @@ function gamepadsUpdate()
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// touch input
-const isTouchDevice = touchInputEnable && window.ontouchstart !== undefined;
+// Touch input
+
+/** True if a touch device has been detected
+ *  @const {boolean}
+ *  @memberof Input */
+const isTouchDevice = inputTouchEnable && window.ontouchstart !== undefined;
 if (isTouchDevice)
 {
     // handle all touch events the same way
-    let wasTouching;
+    let wasTouching, hadTouchInput;
     ontouchstart = ontouchmove = ontouchend = e=>
     {
         e.button = 0; // all touches are left click
@@ -1519,7 +2086,7 @@ if (isTouchDevice)
         const touching = e.touches.length;
         if (touching)
         {
-            hadInput || zzfx(0) ; // fix mobile audio, force it to play a sound the first time
+            hadTouchInput || zzfx(0, hadTouchInput=1) ; // fix mobile audio, force it to play a sound the first time
 
             // set event pos and pass it along
             e.x = e.touches[0].clientX;
@@ -1536,27 +2103,45 @@ if (isTouchDevice)
         return !e.cancelable;
     }
 }
-/*
-    LittleJS Audio System
-    - ZzFX Sound Effects and ZzFXM Music
-    - Caches sounds and music for fast playback
-    - Can attenuate and apply stereo panning to sounds
-    - Ability to play mp3, ogg, and wave files
-    - Speech Synthesis wrapper functions
-*/
+/** 
+ *  LittleJS Audio System
+ *  <br> - ZzFX Sound Effects and ZzFXM Music
+ *  <br> - Caches sounds and music for fast playback
+ *  <br> - Can attenuate and apply stereo panning to sounds
+ *  <br> - Ability to play mp3, ogg, and wave files
+ *  <br> - Speech synthesis wrapper functions
+ *  @namespace Audio
+ */
 
 'use strict';
 
+/** 
+ * Sound Object - Stores a zzfx sound for later use and can be played positionally
+ * @example
+ * // create a sound
+ * const sound_example = new Sound([.5,.5]);
+ * 
+ * // play the sound
+ * sound_example.play();
+ */
 class Sound
 {
-    constructor(zzfxSound, range=defaultSoundRange, taper=defaultSoundTaper)
+    /** Create a sound object and cache the zzfx samples for later use
+     *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
+     *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
+     *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
+     */
+    constructor(zzfxSound, range=soundDefaultRange, taper=soundDefaultTaper)
     {
         if (!soundEnable) return;
 
+        /** @property {Number} - World space max range of sound, will not play if camera is farther away */
         this.range = range;
+
+        /** @property {Number} - At what percentage of range should it start tapering off */
         this.taper = taper;
 
-        // get randomness from sound to apply when played
+        // get randomness from sound parameters
         this.randomness = zzfxSound[1] || 0;
         zzfxSound[1] = 0;
 
@@ -1564,7 +2149,14 @@ class Sound
         this.cachedSamples = zzfxG(...zzfxSound);
     }
 
-    play(pos, volumeScale=1, pitchScale=1)
+    /** 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
+     *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+     */
+    play(pos, volume=1, pitch=1, randomnessScale=1)
     {
         if (!soundEnable) return;
 
@@ -1580,7 +2172,7 @@ class Sound
                     return; // out of range
 
                 // attenuate volume by distance
-                volumeScale *= percent(lengthSquared**.5, range*this.taper, range);
+                volume *= percent(lengthSquared**.5, range*this.taper, range);
             }
 
             // get pan from screen space coords
@@ -1588,13 +2180,57 @@ class Sound
         }
 
         // play the sound
-        const playbackRate = pitchScale + pitchScale * this.randomness*rand(-1,1);
-        return playSamples([this.cachedSamples], volumeScale, playbackRate, pan);
+        const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
+        return playSamples([this.cachedSamples], volume, playbackRate, pan);
+    }
+
+    /** Play the sound as a note with a semitone offset
+     *  @param {Number}  semitoneOffset - How many semitones to offset pitch
+     *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
+     *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
+     *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+     */
+    playNote(semitoneOffset, pos, volume=1)
+    {
+        if (!soundEnable) return;
+
+        return this.play(pos, volume, 2**(semitoneOffset/12), 0);
     }
 }
 
+/**
+ * Music Object - Stores a zzfx music track for later use
+ * @example
+ * // create some music
+ * const music_example = new Music(
+ * [
+ *     [                         // instruments
+ *       [,0,400]                // simple note
+ *     ], 
+ *     [                         // patterns
+ *         [                     // pattern 1
+ *             [                 // channel 0
+ *                 0, -1,        // instrument 0, left speaker
+ *                 1, 0, 9, 1    // channel notes
+ *             ], 
+ *             [                 // channel 1
+ *                 0, 1,         // instrument 1, right speaker
+ *                 0, 12, 17, -1 // channel notes
+ *             ]
+ *         ],
+ *     ],
+ *     [0, 0, 0, 0], // sequence, play pattern 0 four times
+ *     90            // BPM
+ * ]);
+ * 
+ * // play the music
+ * music_example.play();
+ */
 class Music
 {
+    /** Create a music object and cache the zzfx music samples for later use
+     *  @param {Array} zzfxMusic - Array of zzfx music parameters
+     */
     constructor(zzfxMusic)
     {
         if (!soundEnable) return;
@@ -1602,29 +2238,44 @@ class Music
         this.cachedSamples = zzfxM(...zzfxMusic);
     }
 
-    play(volumeScale = 1, loop = 1)
+    /** Play the music
+     *  @param {Number}  [volume=1] - How much to scale volume by
+     *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
+     *  @return {AudioBufferSourceNode} - The audio node, can be used to stop sound later
+     */
+    play(volume = 1, loop = 1)
     {
         if (!soundEnable) return;
 
-        return playSamples(this.cachedSamples, volumeScale, 1, 0, loop);
+        return playSamples(this.cachedSamples, volume, 1, 0, loop);
     }
 }
 
-///////////////////////////////////////////////////////////////////////////////
-
-// play mp3 or wav audio from a local file or url
-function playAudioFile(url, volumeScale=1, loop=1)
+/** Play an mp3 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 when it reaches the end
+ *  @return {HTMLAudioElement} - The audio element for this sound
+ *  @memberof Audio */
+function playAudioFile(url, volume=1, loop=1)
 {
     if (!soundEnable) return;
 
     const audio = new Audio(url);
-    audio.volume = audioVolume * volumeScale;
+    audio.volume = soundVolume * volume;
     audio.loop = loop;
     audio.play();
     return audio;
 }
 
-// speak text with passed in settings
+/** 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
+ *  @return {SpeechSynthesisUtterance} - The utterance that was spoken
+ *  @memberof Audio */
 function speak(text, language='', volume=1, rate=1, pitch=1)
 {
     if (!soundEnable || !speechSynthesis) return;
@@ -1636,22 +2287,39 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
     // build utterance and speak
     const utterance = new SpeechSynthesisUtterance(text);
     utterance.lang = language;
-    utterance.volume = volume*audioVolume*3;
+    utterance.volume = 2*volume*soundVolume;
     utterance.rate = rate;
     utterance.pitch = pitch;
     speechSynthesis.speak(utterance);
     return utterance;
 }
 
-// stop all queued speech
+/** Stop all queued speech
+ *  @memberof Audio */
 const stopSpeech = ()=> 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
+ *  @return {Number} - The frequency of the note
+ *  @memberof Audio */
+const getNoteFrequency = (semitoneOffset, rootFrequency=220)=> rootFrequency * 2**(semitoneOffset/12); 
 
-let audioContext; // audio context used by the engine
+///////////////////////////////////////////////////////////////////////////////
 
-// play cached samples with given settings
-function playSamples(sampleChannels, volume=1, playbackRate=1, pan=0, loop=0) 
+/** Audio context used by the engine
+ *  @memberof Audio */
+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
+ *  @return {AudioBufferSourceNode} - The audio node of the sound played
+ *  @memberof Audio */
+function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0) 
 {
     if (!soundEnable) return;
 
@@ -1666,13 +2334,13 @@ function playSamples(sampleChannels, volume=1, playbackRate=1, pan=0, loop=0)
     // copy samples to buffer and setup source
     sampleChannels.forEach((c,i)=> buffer.getChannelData(i).set(c));
     source.buffer = buffer;
-    source.playbackRate.value = playbackRate;
+    source.playbackRate.value = rate;
     source.loop = loop;
 
     // create pan and gain nodes
     source
         .connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, 1, -1)}))
-        .connect(new GainNode(audioContext, {'gain':audioVolume*volume}))
+        .connect(new GainNode(audioContext, {'gain':soundVolume*volume}))
         .connect(audioContext.destination);
 
     // play and return sound
@@ -1683,10 +2351,20 @@ function playSamples(sampleChannels, volume=1, playbackRate=1, pan=0, loop=0)
 ///////////////////////////////////////////////////////////////////////////////
 // ZzFXMicro - Zuper Zmall Zound Zynth - v1.1.8 by Frank Force
 
-const zzfxR = 44100; // sample rate
-const zzfx = (...z) => playSamples([zzfxG(...z)]); // generate and play sound
+/** Generate and play a ZzFX sound
+ *  @param {Array} zzfxSound - Array of ZzFX parameters, ex. [.5,.5]
+ *  @return {Array} - Array of audio samples
+ *  @memberof Audio */
+const zzfx = (...zzfxSound) => playSamples([zzfxG(...zzfxSound)]);
 
-function zzfxG // generate samples
+/** Sample rate used for all ZzFX sounds
+ *  @default 44100
+ *  @memberof Audio */
+const zzfxR = 44100; 
+
+/** Generate samples for a ZzFX sound
+ *  @memberof Audio */
+function zzfxG
 (
     // parameters
     volume = 1, randomness = .05, frequency = 220, attack = 0, sustain = 0,
@@ -1730,7 +2408,7 @@ function zzfxG // generate samples
                     1 - tremolo + tremolo*Math.sin(PI2*i/repeatTime) // tremolo
                     : 1) *
                 sign(s)*(abs(s)**shapeCurve) *       // curve 0=square, 2=pointy
-                volume * audioVolume * (                  // envelope
+                volume * soundVolume * (                  // envelope
                 i < attack ? i/attack :                   // attack
                 i < attack + decay ?                      // decay
                 1-((i-attack)/decay)*(1-sustainVolume) :  // decay falloff
@@ -1771,6 +2449,13 @@ function zzfxG // generate samples
 ///////////////////////////////////////////////////////////////////////////////
 // ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
 
+/** Generate samples for a ZzFM song with given parameters
+ *  @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
+ *  @returns {Array} - Left and right channel sample data
+ *  @memberof Audio */
 function zzfxM(instruments, patterns, sequence, BPM = 125) 
 {
   let instrumentParameters;
@@ -1868,25 +2553,31 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
 
   return [leftChannelBuffer, rightChannelBuffer];
 }
-/*
-    LittleJS Tile Layer System
-    - Caches arrays of tiles to offscreen canvas for fast rendering
-    - Unlimted numbers of layers, allocates canvases as needed
-    - Interfaces with EngineObject for collision
-    - Collision layer is separate from visible layers
-    - Tile layers can be drawn to using their context with canvas2d
-    - It is recommended to have a visible layer that matches the collision
-*/
+/** 
+ *  LittleJS Tile Layer System
+ *  <br> - Caches arrays of tiles to offscreen canvas for fast rendering
+ *  <br> - Unlimted numbers of layers, allocates canvases as needed
+ *  <br> - Interfaces with EngineObject for collision
+ *  <br> - Collision layer is separate from visible layers
+ *  <br> - Tile layers can be drawn to using their context with canvas2d
+ *  <br> - It is recommended to have a visible layer that matches the collision
+ *  @namespace TileCollision
+ */
 
 'use strict';
 
-///////////////////////////////////////////////////////////////////////////////
-// Tile Collision
-
+/** The tile collision layer array, use setTileCollisionData and getTileCollisionData to access
+ *  @memberof TileCollision */
 let tileCollision = [];
+
+/** Size of the tile collision layer
+ *  @type {Vector2} 
+ *  @memberof TileCollision */
 let tileCollisionSize = vec2();
-const tileLayerCanvasCache = [];
 
+/** Clear and initialize tile collision
+ *  @param {Vector2} size
+ *  @memberof TileCollision */
 function initTileCollision(size)
 {
     tileCollisionSize = size;
@@ -1895,21 +2586,34 @@ function initTileCollision(size)
         tileCollision[i] = 0;
 }
 
-// set and get collision data
+/** Set tile collision data
+ *  @param {Vector2} pos
+ *  @param {Number}  [data=0]
+ *  @memberof TileCollision */
 const setTileCollisionData = (pos, data=0)=>
     pos.arrayCheck(tileCollisionSize) && (tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
+
+/** Get tile collision data
+ *  @param {Vector2} pos
+ *  @return {Number}
+ *  @memberof TileCollision */
 const getTileCollisionData = (pos)=>
     pos.arrayCheck(tileCollisionSize) ? tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] : 0;
 
-// check if there is collision in a given area
+/** Check if collision with another object should occur
+ *  @param {Vector2}      pos
+ *  @param {Vector2}      [size=new Vector2(1,1)]
+ *  @param {EngineObject} [object]
+ *  @return {Boolean}
+ *  @memberof TileCollision */
 function tileCollisionTest(pos, size=vec2(), object)
 {
     const minX = max(Math.floor(pos.x - size.x/2), 0);
     const minY = max(Math.floor(pos.y - size.y/2), 0);
-    const maxX = min(Math.floor(pos.x + size.x/2), tileCollisionSize.x-1);
-    const maxY = min(Math.floor(pos.y + size.y/2), tileCollisionSize.y-1);
-    for (let y = minY; y <= maxY; ++y)
-    for (let x = minX; x <= maxX; ++x)
+    const maxX = min(pos.x + size.x/2, tileCollisionSize.x-1);
+    const maxY = min(pos.y + size.y/2, tileCollisionSize.y-1);
+    for (let y = minY; y < maxY; ++y)
+    for (let x = minX; x < maxX; ++x)
     {
         const tileData = tileCollision[y*tileCollisionSize.x+x];
         if (tileData && (!object || object.collideWithTile(tileData, new Vector2(x, y))))
@@ -1917,13 +2621,18 @@ function tileCollisionTest(pos, size=vec2(), object)
     }
 }
 
-// return the center of tile if any that is hit (this does not return the exact hit point)
-// todo: a way to get the exact hit point, it must still register as inside the hit tile
+/** Return the center of tile if any that is hit (this does not return the exact hit point)
+ *  @param {Vector2}      posStart
+ *  @param {Vector2}      posEnd
+ *  @param {EngineObject} [object]
+ *  @return {Vector2}
+ *  @memberof TileCollision */
 function tileCollisionRaycast(posStart, posEnd, object)
 {
     // test if a ray collides with tiles from start to end
-    posStart = posStart.int();
-    posEnd = posEnd.int();
+    // todo: a way to get the exact hit point, it must still register as inside the hit tile
+    posStart = posStart.floor();
+    posEnd = posEnd.floor();
     const posDelta = posEnd.subtract(posStart);
     const dx = abs(posDelta.x),  dy = -abs(posDelta.y);
     const sx = sign(posDelta.x), sy = sign(posDelta.y);
@@ -1951,32 +2660,74 @@ function tileCollisionRaycast(posStart, posEnd, object)
 ///////////////////////////////////////////////////////////////////////////////
 // Tile Layer Rendering System
 
+// Reuse canvas autmatically when destroyed
+const tileLayerCanvasCache = [];
+
+/**
+ * Tile layer data object stores info about how to render a tile
+ * @example
+ * // create tile layer data with tile index 0 and random orientation and color
+ * const tileIndex = 0;
+ * const direction = randInt(4)
+ * const mirror = randInt(2);
+ * const color = randColor();
+ * const data = new TileLayerData(tileIndex, direction, mirror, color);
+ */
 class TileLayerData
 {
-    constructor(tile=-1, direction=0, mirror=0, color=new Color)
+    /** Create a tile layer data object, one for each tile in a TileLayer
+     *  @param {Number}  [tile] - The tile to use, untextured if undefined
+     *  @param {Number}  [direction=0] - Integer direction of tile, in 90 degree increments
+     *  @param {Boolean} [mirror=0] - If the tile should be mirrored along the x axis
+     *  @param {Color}   [color=new Color(1,1,1)] - Color of the tile */
+    constructor(tile, direction=0, mirror=0, color=new Color)
     {
+        /** @property {Number} - The tile to use, untextured if undefined */
         this.tile      = tile;
+        /** @property {Number} - Integer direction of tile, in 90 degree increments */
         this.direction = direction;
+        /** @property {Boolean} - If the tile should be mirrored along the x axis */
         this.mirror    = mirror;
+        /** @property {Color}   - Color of the tile */
         this.color     = color;
     }
+
+    /** Set this tile to clear, it will not be rendered */
     clear() { this.tile = this.direction = this.mirror = 0; color = new Color; }
 }
 
+/**
+ * Tile layer object - cached rendering system for tile layers
+ * <br> - Each Tile layer is rendered to an off screen canvas
+ * <br> - Tile layers are not rendered using WebGL to allow modifications at run time
+ * <br> - Tile layers are sorted
+ * @extends EngineObject
+ * @example
+ * // create tile collision and visible tile layer
+ * initTileCollision(vec2(200,100));
+ * const tileLayer = new TileLayer();
+ */
 class TileLayer extends EngineObject
 {
-    constructor(pos, size, scale=vec2(1), layer=0)
+    /** Create a tile layer object
+     *  @param {Vector2} [position=new Vector2(0,0)] - World space position
+     *  @param {Vector2} [size=objectDefaultSize]    - World space size
+     *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tiles in source pixels
+     *  @param {Vector2} [scale=new Vector2(1,1)]    - How much to scale this layer when rendered
+     *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
+     */
+    constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
     {
-        super(pos, size);
+        super(pos, size, -1, tileSize, 0, undefined, renderOrder);
 
-        // create new canvas if necessary
+        /** @property {HTMLCanvasElement} - The canvas used by this tile layer */
         this.canvas = tileLayerCanvasCache.length ? tileLayerCanvasCache.pop() : document.createElement('canvas');
+        /** @property {CanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
         this.context = this.canvas.getContext('2d');
+        /** @property {Vector2} - How much to scale this layer when rendered */
         this.scale = scale;
-        this.tileSize = defaultTileSize.copy();
-        this.layer = layer;
-        this.renderOrder = layer;
-        this.flushGLBeforeRender = 1;
+        /** @property {Boolean} [isOverlay=0] - If true this layer will render to overlay canvas and appear above all objects */
+        this.isOverlay;
 
         // init tile data
         this.data = [];
@@ -1984,6 +2735,7 @@ class TileLayer extends EngineObject
             this.data.push(new TileLayerData());
     }
 
+    /** Destroy this tile layer */
     destroy()
     {
         // add canvas back to the cache
@@ -1991,6 +2743,10 @@ class TileLayer extends EngineObject
         super.destroy();
     }
     
+    /** Set data at a given position in the array 
+     *  @param {Vector2}       position - Local position in array
+     *  @param {TileLayerData} data - Data to set
+     *  @param {Boolean}       [redraw=0] - Force the tile to redraw if true */
     setData(layerPos, data, redraw)
     {
         if (layerPos.arrayCheck(this.size))
@@ -2000,38 +2756,46 @@ class TileLayer extends EngineObject
         }
     }
     
+    /** Get data at a given position in the array 
+     *  @param {Vector2} layerPos - Local position in array
+     *  @return {TileLayerData} */
     getData(layerPos)
     { return layerPos.arrayCheck(this.size) && this.data[(layerPos.y|0)*this.size.x+layerPos.x|0]; }
     
-    update() {} // tile layers are not updated
+    // Tile layers are not updated
+    update() {}
+
+    // Render the tile layer, called automatically by the engine
     render()
     {
         ASSERT(mainContext != this.context); // must call redrawEnd() after drawing tiles
 
-        // flush and copy gl canvas because tile canvas does not use gl
-        this.flushGLBeforeRender && glEnable && glCopyToContext(mainContext);
+        // flush and copy gl canvas because tile canvas does not use webgl
+        glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
         
         // draw the entire cached level onto the main canvas
         const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
-        mainContext.drawImage
+        (this.isOverlay ? overlayContext : mainContext).drawImage
         (
             this.canvas, pos.x, pos.y,
             cameraScale*this.size.x*this.scale.x, cameraScale*this.size.y*this.scale.y
         );
     }
 
+    /** Draw all the tile data to an offscreen canvas using webgl if possible */
     redraw()
     {
-        // draw all the tile data to an offscreen canvas using webgl if possible
         this.redrawStart();
         this.drawAllTileData();
         this.redrawEnd();
     }
 
+    /** Call to start the redraw process
+     *  @param {Boolean} [clear=1] - Should it clear the canvas before drawing */
     redrawStart(clear = 1)
     {
         // clear and set size
-        const width = this.size.x * this.tileSize.x;
+        const width  = this.size.x * this.tileSize.x;
         const height = this.size.y * this.tileSize.y;
         if (clear)
         {
@@ -2052,6 +2816,7 @@ class TileLayer extends EngineObject
         glPreRender(width, height);
     }
 
+    /** Call to end the redraw process */
     redrawEnd()
     {
         ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
@@ -2062,18 +2827,24 @@ class TileLayer extends EngineObject
         [mainCanvasSize, mainCanvas, mainContext, cameraScale, cameraPos] = this.savedRenderSettings;
     }
 
+    /** Draw the tile at a given position
+     *  @param {Vector2} layerPos */
     drawTileData(layerPos)
     {
         // first clear out where the tile was
-        const pos = layerPos.int().add(this.pos).add(vec2(.5));
+        const pos = layerPos.floor().add(this.pos).add(vec2(.5));
         this.drawCanvas2D(pos, vec2(1), 0, 0, (context)=>context.clearRect(-.5, -.5, 1, 1));
 
-        // draw the tile
+        // draw the tile if not undefined
         const d = this.getData(layerPos);
-        ASSERT(d.tile < 0 || mainContext == this.context); // must call redrawStart() before drawing tiles
-        d.tile < 0 || drawTile(pos, vec2(1), d.tile || -1, this.tileSize, d.color, d.direction*PI/2, d.mirror);
+        if (d.tile != undefined)
+        {
+            ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
+            drawTile(pos, vec2(1), d.tile, this.tileSize, d.color, d.direction*PI/2, d.mirror);
+        }
     }
 
+    /** Draw all the tiles in this layer */
     drawAllTileData()
     {
         for (let x = this.size.x; x--;)
@@ -2081,7 +2852,12 @@ class TileLayer extends EngineObject
              this.drawTileData(vec2(x,y));
     }
 
-    // draw directly to the 2d canvas in world space (bipass webgl)
+    /** Draw directly to the 2d canvas in world space (bipass webgl)
+     *  @param {Vector2}  pos
+     *  @param {Vector2}  size
+     *  @param {Number}   angle
+     *  @param {Boolean}  mirror
+     *  @param {Function} drawFunction */
     drawCanvas2D(pos, size, angle, mirror, drawFunction)
     {
         const context = this.context;
@@ -2095,8 +2871,15 @@ class TileLayer extends EngineObject
         context.restore();
     }
 
-    // draw a tile directly onto the layer canvas
-    drawTile(pos, size=vec2(1), tileIndex=0, tileSize=defaultTileSize, color=new Color, angle=0, mirror)
+    /** Draw a tile directly onto the layer canvas
+     *  @param {Vector2} pos
+     *  @param {Vector2} [size=new Vector2(1,1)]
+     *  @param {Number}  [tileIndex=-1]
+     *  @param {Vector2} [tileSize=tileSizeDefault]
+     *  @param {Color}   [color=new Color(1,1,1)]
+     *  @param {Number}  [angle=0]
+     *  @param {Boolean} [mirror=0] */
+    drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle=0, mirror)
     {
         this.drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
@@ -2117,6 +2900,11 @@ class TileLayer extends EngineObject
         });
     }
 
+    /** Draw a rectangle directly onto the layer canvas
+     *  @param {Vector2} pos
+     *  @param {Vector2} [size=new Vector2(1,1)]
+     *  @param {Color}   [color=new Color(1,1,1)]
+     *  @param {Number}  [angle=0] */
     drawRect(pos, size, color, angle) { this.drawTile(pos, size, -1, 0, color, angle, 0); }
 }
 /*
@@ -2128,72 +2916,142 @@ class TileLayer extends EngineObject
 
 'use strict';
 
+/**
+ * Particle Emitter - Spawns particles with the given settings
+ * @extends EngineObject
+ * @example
+ * // create a particle emitter
+ * let pos = vec2(2,3);
+ * let particleEmiter = new ParticleEmitter
+ * (
+ *     pos, 1, 0, 500, PI,  // pos, emitSize, emitTime, emitRate, emiteCone
+ *     0, vec2(16),                            // tileIndex, tileSize
+ *     new Color, new Color(0,0,0),            // colorStartA, colorStartB
+ *     new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
+ *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
+ *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
+ *     .5, 1                // randomness, collide, additive, randomColorLinear, renderOrder
+ * );
+ */
 class ParticleEmitter extends EngineObject
 {
+    /** Create a particle system with the given settings
+     *  @param {Vector2} position           - World space position of the emitter
+     *  @param {Number}  [emitSize=0]       - World space size of the emitter (float for circle diameter, vec2 for rect)
+     *  @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
+     *  @param {Number}  [emitRate=100]     - How many particles per second to spawn, does not emit if 0
+     *  @param {Number}  [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
+     *  @param {Number}  [tileIndex=-1]     - Index into tile sheet, if <0 no texture is applied
+     *  @param {Number}  [tileSize=tileSizeDefault]     - Tile size for particles
+     *  @param {Color}   [colorStartA=new Color(1,1,1)] - Color at start of life 1, randomized between start colors
+     *  @param {Color}   [colorStartB=new Color(1,1,1)] - Color at start of life 2, randomized between start colors
+     *  @param {Color}   [colorEndA=new Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
+     *  @param {Color}   [colorEndB=new Color(1,1,1,0)] - Color at end of life 2, randomized between end colors
+     *  @param {Number}  [particleTime=.5]      - How long particles live
+     *  @param {Number}  [sizeStart=.1]         - How big are particles at start
+     *  @param {Number}  [sizeEnd=1]            - How big are particles at end
+     *  @param {Number}  [speed=.1]             - How fast are particles when spawned
+     *  @param {Number}  [angleSpeed=.05]       - How fast are particles rotating
+     *  @param {Number}  [damping=1]            - How much to dampen particle speed
+     *  @param {Number}  [angleDamping=1]       - How much to dampen particle angular speed
+     *  @param {Number}  [gravityScale=0]       - How much does gravity effect particles
+     *  @param {Number}  [particleConeAngle=PI] - Cone for start particle angle
+     *  @param {Number}  [fadeRate=.1]          - How quick to fade in particles at start/end in percent of life
+     *  @param {Number}  [randomness=.2]        - Apply extra randomness percent
+     *  @param {Boolean} [collideTiles=0]       - Do particles collide against tiles
+     *  @param {Boolean} [additive=0]           - Should particles use addtive blend
+     *  @param {Boolean} [randomColorLinear=0]  - Should color be randomized linearly or across each component
+     *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
+     */
     constructor
     ( 
-        pos,                            // world space position of emitter
-        emitSize = 0,                   // size of emitter (float for circle diameter, vec2 for rect)
-        emitTime = 0,                   // how long to stay alive (0 is forever)
-        emitRate = 100,                 // how many particles per second to spawn
-        emitConeAngle = PI,             // local angle to apply velocity to particles from emitter
-        tileIndex = -1,                 // index into tile sheet, if <0 no texture is applied
-        tileSize = defaultTileSize,     // tile size for particles
-        colorStartA = new Color,        // color at start of life
-        colorStartB = new Color,        // randomized between start colors
-        colorEndA = new Color(1,1,1,0), // color at end of life
-        colorEndB = new Color(1,1,1,0), // randomized between end colors
-        particleTime = .5,              // how long particles live
-        sizeStart = .1,                 // how big are particles at start
-        sizeEnd = 1,                    // how big are particles at end
-        speed = .1,                     // how fast are particles when spawned
-        angleSpeed = .05,               // how fast are particles rotating
-        damping = 1,                    // how much to dampen particle speed
-        angleDamping = 1,               // how much to dampen particle angular speed
-        gravityScale = 0,               // how much does gravity effect particles
-        particleConeAngle = PI,         // cone for start particle angle
-        fadeRate = .1,                  // how quick to fade in particles at start/end in percent of life
-        randomness = .2,                // apply extra randomness percent
-        collideTiles,                   // do particles collide against tiles
-        additive,                       // should particles use addtive blend
-        randomColorLinear = 1,          // should color be randomized linearly or across each component
-        renderOrder = additive ? 1e9 : 0// render order for particles (additive is above other stuff by default)
+        pos,
+        emitSize = 0,
+        emitTime = 0,
+        emitRate = 100,
+        emitConeAngle = PI,
+        tileIndex = -1,
+        tileSize = tileSizeDefault,
+        colorStartA = new Color,
+        colorStartB = new Color,
+        colorEndA = new Color(1,1,1,0),
+        colorEndB = new Color(1,1,1,0),
+        particleTime = .5,
+        sizeStart = .1,
+        sizeEnd = 1,
+        speed = .1,
+        angleSpeed = .05,
+        damping = 1,
+        angleDamping = 1,
+        gravityScale = 0,
+        particleConeAngle = PI,
+        fadeRate = .1,
+        randomness = .2, 
+        collideTiles,
+        additive,
+        randomColorLinear = 1,
+        renderOrder = additive ? 1e9 : 0
     )
     {
-        super(pos, new Vector2, tileIndex, tileSize);
+        super(pos, new Vector2, tileIndex, tileSize, 0, undefined, renderOrder);
 
         // emitter settings
+        /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */
         this.emitSize = emitSize
+        /** @property {Number} - How long to stay alive (0 is forever) */
         this.emitTime = emitTime;
+        /** @property {Number} - How many particles per second to spawn, does not emit if 0 */
         this.emitRate = emitRate;
+        /** @property {Number} - Local angle to apply velocity to particles from emitter */
         this.emitConeAngle = emitConeAngle;
 
         // color settings
+        /** @property {Color} - Color at start of life 1, randomized between start colors */
         this.colorStartA = colorStartA;
+        /** @property {Color} - Color at start of life 2, randomized between start colors */
         this.colorStartB = colorStartB;
+        /** @property {Color} - Color at end of life 1, randomized between end colors */
         this.colorEndA   = colorEndA;
+        /** @property {Color} - Color at end of life 2, randomized between end colors */
         this.colorEndB   = colorEndB;
+        /** @property {Boolean} - Should color be randomized linearly or across each component */
         this.randomColorLinear = randomColorLinear;
 
         // particle settings
+        /** @property {Number} - How long particles live */
         this.particleTime      = particleTime;
+        /** @property {Number} -  How big are particles at start */
         this.sizeStart         = sizeStart;
+        /** @property {Number} - How big are particles at end */
         this.sizeEnd           = sizeEnd;
+        /** @property {Number} - How fast are particles when spawned */
         this.speed             = speed;
+        /** @property {Number} - How fast are particles rotating */
         this.angleSpeed        = angleSpeed;
+        /** @property {Number} - How much to dampen particle speed */
         this.damping           = damping;
+        /** @property {Number} - How much to dampen particle angular speed */
         this.angleDamping      = angleDamping;
+        /** @property {Number} - How much does gravity effect particles */
         this.gravityScale      = gravityScale;
+        /** @property {Number} - Cone for start particle angle */
         this.particleConeAngle = particleConeAngle;
+        /** @property {Number} - How quick to fade in particles at start/end in percent of life */
         this.fadeRate          = fadeRate;
+        /** @property {Number} - Apply extra randomness percent */
         this.randomness        = randomness;
+        /** @property {Number} - Do particles collide against tiles */
         this.collideTiles      = collideTiles;
+        /** @property {Number} - Should particles use addtive blend */
         this.additive          = additive;
-        this.renderOrder       = renderOrder;
-        this.trailScale        =  
+        /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
+        this.trailScale        = 0;
+
+        // internal variables
         this.emitTimeBuffer    = 0;
     }
     
+    /** Update the emitter to spawn particles, called automatically by engine once each frame */
     update()
     {
         // only do default update to apply parent transforms
@@ -2216,6 +3074,8 @@ class ParticleEmitter extends EngineObject
         debugParticles && debugRect(this.pos, vec2(this.emitSize), '#0f0', 0, this.angle);
     }
 
+    /** Spawn one particle
+     *  @return {Particle} */
     emitParticle()
     {
         // spawn a particle
@@ -2267,16 +3127,27 @@ class ParticleEmitter extends EngineObject
         return particle;
     }
 
-    render() {} // emitters are not rendered
+    // Particle emitters are not rendered, only the particles are
+    render() {}
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// particle object
-
+/**
+ * Particle Object - Created automatically by Particle Emitters
+ * @extends EngineObject
+ */
 class Particle extends EngineObject
 {
+    /**
+     * Create a particle with the given settings
+     * @param {Vector2} position                   - World space position of the particle
+     * @param {Number}  [tileIndex=-1]             - Tile to use to render, untextured if -1
+     * @param {Vector2} [tileSize=tileSizeDefault] - Size of tile in source pixels
+     * @param {Number}  [angle=0]                  - Angle to rotate the particle
+     */
     constructor(pos, tileIndex, tileSize, angle) { super(pos, new Vector2, tileIndex, tileSize, angle); }
 
+    /** Render the particle, automatically called each frame, sorted by renderOrder */
     render()
     {
         // modulate size and color
@@ -2318,27 +3189,64 @@ class Particle extends EngineObject
         }
     }
 }
-/*
-    LittleJS Medal System
-    - Tracks and displays medals
-    - Saves medals to local storage
-    - Newgrounds and OS13k integration
-*/
+/** 
+ *  LittleJS Medal System
+ *  <br> - Tracks and displays medals
+ *  <br> - Saves medals to local storage
+ *  <br> - Newgrounds and OS13k integration
+ *  @namespace Medals
+ */
 
 'use strict';
 
-const medals = [], medalsDisplayQueue = [];
-let medalsGameName, medalsPreventUnlock, medalsDisplayTimer, newgrounds;
+/** List of all medals
+ *  @memberof Medals */
+const medals = [];
+
+/** Set to stop medals from being unlockable (like if cheats are enabled)
+ *  @memberof Medals */
+let medalsPreventUnlock;
+
+/** This can used to enable Newgrounds functionality
+ *  @type {Newgrounds}
+ *  @memberof Medals */
+let newgrounds;
+
+// Engine internal variables not exposed to documentation
+let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimer;
+
+///////////////////////////////////////////////////////////////////////////////
 
-function medalsInit(gameName)
+/** Initialize medals with a save name used for storage
+ *  <br> - Checks if medals are unlocked
+ *  <br> - Call this after creating all medals
+ *  @param {String} saveName
+ *  @memberof Medals */
+function medalsInit(saveName)
 {
     // check if medals are unlocked
-    medalsGameName = gameName;
+    medalsSaveName = saveName;
     debugMedals || medals.forEach(medal=> medal.unlocked = localStorage[medal.storageKey()]);
 }
 
+/** 
+ * Medal Object - Tracks an unlockable medal 
+ * @example
+ * // create a medal
+ * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
+ * 
+ * // unlock the medal
+ * medal_example.unlock();
+ */
 class Medal
 {
+    /** Create an medal object and adds it to the list of medals
+     *  @param {Number} id - The unique identifier of the medal
+     *  @param {String} name - Name of the medal
+     *  @param {String} [description] - Description of the medal
+     *  @param {String} [icon='🏆'] - Icon for the medal
+     *  @param {String} [src] - Image location for the medal
+     */
     constructor(id, name, description='', icon='🏆', src)
     {
         ASSERT(id >= 0 && !medals[id]);
@@ -2357,26 +3265,25 @@ class Medal
         }
     }
 
+    /** Unlocks a medal if not already unlocked */
     unlock()
     {
         if (medalsPreventUnlock || this.unlocked)
             return;
 
         // save the medal
-        ASSERT(medalsGameName); // game name must be set
+        ASSERT(medalsSaveName); // game name must be set
         localStorage[this.storageKey()] = this.unlocked = 1;
         medalsDisplayQueue.push(this);
 
         // save for newgrounds and OS13K
         newgrounds && newgrounds.unlockMedal(this.id);
-        localStorage['OS13kTrophy,' + this.icon + ',' + medalsGameName + ',' + this.name] = this.description;
-    }
- 
-    storageKey()
-    {
-        return medalsGameName + '_medal_' + this.id;
+        localStorage['OS13kTrophy,' + this.icon + ',' + medalsSaveName + ',' + this.name] = this.description;
     }
 
+    /** Render a medal
+     *  @param {Number} [hidePercent=0] - How much to slide the medal off screen
+     */
     render(hidePercent=0)
     {
         const context = overlayContext;
@@ -2397,25 +3304,36 @@ class Medal
 
         // draw the text
         context.textAlign = 'left';
-        context.font = '3em '+ defaultFont;
+        context.font = '3em '+ fontDefault;
         context.fillText(this.name, x+medalDisplayIconSize+25, y+35);
-        context.font = '1.5em '+ defaultFont;
+        context.font = '1.5em '+ fontDefault;
         context.restore(context.fillText(this.description, x+medalDisplayIconSize+25, y+70));
     }
 
+    /** Render the icon for a medal
+     *  @param {Number} x - Screen space X position
+     *  @param {Number} y - Screen space Y position
+     *  @param {Number} [size=medalDisplayIconSize] - Screen space size
+     */
     renderIcon(x, y, size=medalDisplayIconSize)
     {
         // draw the image or icon
         const context = overlayContext;
         context.textAlign = 'center';
         context.textBaseline = 'middle';
-        context.font = size*.6 + 'px '+ defaultFont;
+        context.font = size*.6 + 'px '+ fontDefault;
         context.fillStyle = '#000';
         if (this.image)
             context.drawImage(this.image, x-size/2, y-size/2, size, size);
         else
             context.fillText(this.icon, x, y); // show icon if there is no image
     }
+ 
+    // Get local storage key used by the medal
+    storageKey()
+    {
+        return medalsSaveName + '_medal_' + this.id;
+    }
 }
 
 // engine automatically renders medals
@@ -2426,9 +3344,9 @@ function medalsRender()
     
     // update first medal in queue
     const medal = medalsDisplayQueue[0];
-    const time = realTime - medalsDisplayTimer;
+    const time = timeReal - medalsDisplayTimer;
     if (!medalsDisplayTimer)
-        medalsDisplayTimer = realTime;
+        medalsDisplayTimer = timeReal;
     else if (time > medalDisplayTime)
         medalsDisplayQueue.shift(medalsDisplayTimer = 0);
     else
@@ -2443,15 +3361,26 @@ function medalsRender()
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// Newgrounds API wrapper
 
+/** 
+ * Newgrounds API wrapper object
+ * @example
+ * // create a newgrounds object, replace the app id and cipher with your own
+ * const app_id = '53123:1ZuSTQ9l';
+ * const cipher = 'enF0vGH@Mj/FRASKL23Q==';
+ * newgrounds = new Newgrounds(app_id, cipher);
+ */
 class Newgrounds
 {
+    /** Create a newgrounds object
+     *  @param {Number} app_id - The newgrounds App ID
+     *  @param {String} [cipher] - The encryption Key (AES-128/Base64) */
     constructor(app_id, cipher)
     {
         ASSERT(!newgrounds && app_id);
         this.app_id = app_id;
         this.cipher = cipher;
+        this.host = location ? location.hostname : '';
 
         // create an instance of CryptoJS for encrypted calls
         cipher && (this.cryptoJS = CryptoJS());
@@ -2473,11 +3402,16 @@ class Newgrounds
             if (medal)
             {
                 // copy newgrounds medal data
-                medal.name = newgroundsMedal['name'];
+                medal.image =       new Image();
+                medal.image.src =   newgroundsMedal['icon'];
+                medal.name =        newgroundsMedal['name'];
                 medal.description = newgroundsMedal['description'];
-                medal.unlocked = newgroundsMedal['unlocked'];
-                medal.image = new Image();
-                medal.image.src = newgroundsMedal['icon'];
+                medal.unlocked =    newgroundsMedal['unlocked'];
+                medal.difficulty =  newgroundsMedal['difficulty'];
+                medal.value =       newgroundsMedal['value'];
+
+                if (medal.value)
+                    medal.description = medal.description + ' (' + medal.value + ')';
             }
         }
     
@@ -2487,30 +3421,55 @@ class Newgrounds
         debugMedals && console.log(this.scoreboards);
     }
 
-    unlockMedal(id)
-    {
-        return this.call('Medal.unlock', {'id':id}, 1);
-    }
-
-    postScore(id, value)
-    {
-        return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, 1);
-    }
-
+    /** Send message to unlock a medal by id
+     * @param {Number} id - The medal id */
+    unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, 1); }
+
+    /** 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); }
+
+    /** Send message to log a view */
+    logView() { return this.call('App.logView', {'host':this.host}, 1); }
+
+    /** Get scores from a scoreboard
+     * @param {Number} id - The scoreboard id
+     * @param {String} [user=0] - A user's id or name
+     * @param {Number} [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
+     */
     getScores(id, user=0, social=0, skip=0, limit=10)
-    {
-        return this.call('ScoreBoard.getScores', 
-            {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit});
-    }
-    
+    { return this.call('ScoreBoard.getScores', {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit}); }
+
+    /** Send a message to call a component of the Newgrounds API
+     * @param {String}  component - Name of the component
+     * @param {Object}  [parameters=0] - Parameters to use for call
+     * @param {Boolean} [async=0] - If true, wait for response before continuing (will cause stall)
+     * @return {Object} - The response JSON object
+     */
     call(component, parameters=0, async=0)
     {
+        const call = {'component':component, 'parameters':parameters};
+        if (this.cipher)
+        {
+            // encrypt using AES-128 Base64 with cryptoJS
+            const cryptoJS = this.cryptoJS;
+            const aesKey = cryptoJS['enc']['Base64']['parse'](this.cipher);
+            const iv = cryptoJS['lib']['WordArray']['random'](16);
+            const encrypted = cryptoJS['AES']['encrypt'](JSON.stringify(call), aesKey, {'iv':iv});
+            call['secure'] = cryptoJS['enc']['Base64']['stringify'](iv.concat(encrypted['ciphertext']));
+            call['parameters'] = 0;
+        }
+
         // build the input object
         const input = 
         {
             'app_id':     this.app_id,
             'session_id': this.session_id,
-            'call':       this.encryptCall({'component':component, 'parameters':parameters})
+            'call':       call
         };
 
         // build post data
@@ -2525,21 +3484,6 @@ class Newgrounds
         debugMedals && console.log(xmlHttp.responseText);
         return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
     }
-    
-    encryptCall(call)
-    {
-        if (!this.cipher)
-            return call;
-        
-        // encrypt using AES-128 Base64 with cryptoJS
-        const cryptoJS = this.cryptoJS;
-        const aesKey = cryptoJS['enc']['Base64']['parse'](this.cipher);
-        const iv = cryptoJS['lib']['WordArray']['random'](16);
-        const encrypted = cryptoJS['AES']['encrypt'](JSON.stringify(call), aesKey, {'iv':iv});
-        call['secure'] = cryptoJS['enc']['Base64']['stringify'](iv.concat(encrypted['ciphertext']));
-        call['parameters'] = 0;
-        return call;
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -2547,21 +3491,40 @@ class Newgrounds
 // Copyright (c) 2009-2013 Jeff Mott  Copyright (c) 2013-2016 Evan Vosberg
 
 const CryptoJS=()=>eval(Function("[M='GBMGXz^oVYPPKKbB`agTXU|LxPc_ZBcMrZvCr~wyGfWrwk@ATqlqeTp^N?p{we}jIpEnB_sEr`l?YDkDhWhprc|Er|XETG?pTl`e}dIc[_N~}fzRycIfpW{HTolvoPB_FMe_eH~BTMx]yyOhv?biWPCGc]kABencBhgERHGf{OL`Dj`c^sh@canhy[secghiyotcdOWgO{tJIE^JtdGQRNSCrwKYciZOa]Y@tcRATYKzv|sXpboHcbCBf`}SKeXPFM|RiJsSNaIb]QPc[D]Jy_O^XkOVTZep`ONmntLL`Qz~UupHBX_Ia~WX]yTRJIxG`ioZ{fefLJFhdyYoyLPvqgH?b`[TMnTwwfzDXhfM?rKs^aFr|nyBdPmVHTtAjXoYUloEziWDCw_suyYT~lSMksI~ZNCS[Bex~j]Vz?kx`gdYSEMCsHpjbyxQvw|XxX_^nQYue{sBzVWQKYndtYQMWRef{bOHSfQhiNdtR{o?cUAHQAABThwHPT}F{VvFmgN`E@FiFYS`UJmpQNM`X|tPKHlccT}z}k{sACHL?Rt@MkWplxO`ASgh?hBsuuP|xD~LSH~KBlRs]t|l|_tQAroDRqWS^SEr[sYdPB}TAROtW{mIkE|dWOuLgLmJrucGLpebrAFKWjikTUzS|j}M}szasKOmrjy[?hpwnEfX[jGpLt@^v_eNwSQHNwtOtDgWD{rk|UgASs@mziIXrsHN_|hZuxXlPJOsA^^?QY^yGoCBx{ekLuZzRqQZdsNSx@ezDAn{XNj@fRXIwrDX?{ZQHwTEfu@GhxDOykqts|n{jOeZ@c`dvTY?e^]ATvWpb?SVyg]GC?SlzteilZJAL]mlhLjYZazY__qcVFYvt@|bIQnSno@OXyt]OulzkWqH`rYFWrwGs`v|~XeTsIssLrbmHZCYHiJrX}eEzSssH}]l]IhPQhPoQ}rCXLyhFIT[clhzYOvyHqigxmjz`phKUU^TPf[GRAIhNqSOdayFP@FmKmuIzMOeoqdpxyCOwCthcLq?n`L`tLIBboNn~uXeFcPE{C~mC`h]jUUUQe^`UqvzCutYCgct|SBrAeiYQW?X~KzCz}guXbsUw?pLsg@hDArw?KeJD[BN?GD@wgFWCiHq@Ypp_QKFixEKWqRp]oJFuVIEvjDcTFu~Zz]a{IcXhWuIdMQjJ]lwmGQ|]g~c]Hl]pl`Pd^?loIcsoNir_kikBYyg?NarXZEGYspt_vLBIoj}LI[uBFvm}tbqvC|xyR~a{kob|HlctZslTGtPDhBKsNsoZPuH`U`Fqg{gKnGSHVLJ^O`zmNgMn~{rsQuoymw^JY?iUBvw_~mMr|GrPHTERS[MiNpY[Mm{ggHpzRaJaoFomtdaQ_?xuTRm}@KjU~RtPsAdxa|uHmy}n^i||FVL[eQAPrWfLm^ndczgF~Nk~aplQvTUpHvnTya]kOenZlLAQIm{lPl@CCTchvCF[fI{^zPkeYZTiamoEcKmBMfZhk_j_~Fjp|wPVZlkh_nHu]@tP|hS@^G^PdsQ~f[RqgTDqezxNFcaO}HZhb|MMiNSYSAnQWCDJukT~e|OTgc}sf[cnr?fyzTa|EwEtRG|I~|IO}O]S|rp]CQ}}DWhSjC_|z|oY|FYl@WkCOoPuWuqr{fJu?Brs^_EBI[@_OCKs}?]O`jnDiXBvaIWhhMAQDNb{U`bqVR}oqVAvR@AZHEBY@depD]OLh`kf^UsHhzKT}CS}HQKy}Q~AeMydXPQztWSSzDnghULQgMAmbWIZ|lWWeEXrE^EeNoZApooEmrXe{NAnoDf`m}UNlRdqQ@jOc~HLOMWs]IDqJHYoMziEedGBPOxOb?[X`KxkFRg@`mgFYnP{hSaxwZfBQqTm}_?RSEaQga]w[vxc]hMne}VfSlqUeMo_iqmd`ilnJXnhdj^EEFifvZyxYFRf^VaqBhLyrGlk~qowqzHOBlOwtx?i{m~`n^G?Yxzxux}b{LSlx]dS~thO^lYE}bzKmUEzwW^{rPGhbEov[Plv??xtyKJshbG`KuO?hjBdS@Ru}iGpvFXJRrvOlrKN?`I_n_tplk}kgwSXuKylXbRQ]]?a|{xiT[li?k]CJpwy^o@ebyGQrPfF`aszGKp]baIx~H?ElETtFh]dz[OjGl@C?]VDhr}OE@V]wLTc[WErXacM{We`F|utKKjgllAxvsVYBZ@HcuMgLboFHVZmi}eIXAIFhS@A@FGRbjeoJWZ_NKd^oEH`qgy`q[Tq{x?LRP|GfBFFJV|fgZs`MLbpPYUdIV^]mD@FG]pYAT^A^RNCcXVrPsgk{jTrAIQPs_`mD}rOqAZA[}RETFz]WkXFTz_m{N@{W@_fPKZLT`@aIqf|L^Mb|crNqZ{BVsijzpGPEKQQZGlApDn`ruH}cvF|iXcNqK}cxe_U~HRnKV}sCYb`D~oGvwG[Ca|UaybXea~DdD~LiIbGRxJ_VGheI{ika}KC[OZJLn^IBkPrQj_EuoFwZ}DpoBRcK]Q}?EmTv~i_Tul{bky?Iit~tgS|o}JL_VYcCQdjeJ_MfaA`FgCgc[Ii|CBHwq~nbJeYTK{e`CNstKfTKPzw{jdhp|qsZyP_FcugxCFNpKitlR~vUrx^NrSVsSTaEgnxZTmKc`R|lGJeX}ccKLsQZQhsFkeFd|ckHIVTlGMg`~uPwuHRJS_CPuN_ogXe{Ba}dO_UBhuNXby|h?JlgBIqMKx^_u{molgL[W_iavNQuOq?ap]PGB`clAicnl@k~pA?MWHEZ{HuTLsCpOxxrKlBh]FyMjLdFl|nMIvTHyGAlPogqfZ?PlvlFJvYnDQd}R@uAhtJmDfe|iJqdkYr}r@mEjjIetDl_I`TELfoR|qTBu@Tic[BaXjP?dCS~MUK[HPRI}OUOwAaf|_}HZzrwXvbnNgltjTwkBE~MztTQhtRSWoQHajMoVyBBA`kdgK~h`o[J`dm~pm]tk@i`[F~F]DBlJKklrkR]SNw@{aG~Vhl`KINsQkOy?WhcqUMTGDOM_]bUjVd|Yh_KUCCgIJ|LDIGZCPls{RzbVWVLEhHvWBzKq|^N?DyJB|__aCUjoEgsARki}j@DQXS`RNU|DJ^a~d{sh_Iu{ONcUtSrGWW@cvUjefHHi}eSSGrNtO?cTPBShLqzwMVjWQQCCFB^culBjZHEK_{dO~Q`YhJYFn]jq~XSnG@[lQr]eKrjXpG~L^h~tDgEma^AUFThlaR{xyuP@[^VFwXSeUbVetufa@dX]CLyAnDV@Bs[DnpeghJw^?UIana}r_CKGDySoRudklbgio}kIDpA@McDoPK?iYcG?_zOmnWfJp}a[JLR[stXMo?_^Ng[whQlrDbrawZeSZ~SJstIObdDSfAA{MV}?gNunLOnbMv_~KFQUAjIMj^GkoGxuYtYbGDImEYiwEMyTpMxN_LSnSMdl{bg@dtAnAMvhDTBR_FxoQgANniRqxd`pWv@rFJ|mWNWmh[GMJz_Nq`BIN@KsjMPASXORcdHjf~rJfgZYe_uulzqM_KdPlMsuvU^YJuLtofPhGonVOQxCMuXliNvJIaoC?hSxcxKVVxWlNs^ENDvCtSmO~WxI[itnjs^RDvI@KqG}YekaSbTaB]ki]XM@[ZnDAP~@|BzLRgOzmjmPkRE@_sobkT|SszXK[rZN?F]Z_u}Yue^[BZgLtR}FHzWyxWEX^wXC]MJmiVbQuBzkgRcKGUhOvUc_bga|Tx`KEM`JWEgTpFYVeXLCm|mctZR@uKTDeUONPozBeIkrY`cz]]~WPGMUf`MNUGHDbxZuO{gmsKYkAGRPqjc|_FtblEOwy}dnwCHo]PJhN~JoteaJ?dmYZeB^Xd?X^pOKDbOMF@Ugg^hETLdhwlA}PL@_ur|o{VZosP?ntJ_kG][g{Zq`Tu]dzQlSWiKfnxDnk}KOzp~tdFstMobmy[oPYjyOtUzMWdjcNSUAjRuqhLS@AwB^{BFnqjCmmlk?jpn}TksS{KcKkDboXiwK]qMVjm~V`LgWhjS^nLGwfhAYrjDSBL_{cRus~{?xar_xqPlArrYFd?pHKdMEZzzjJpfC?Hv}mAuIDkyBxFpxhstTx`IO{rp}XGuQ]VtbHerlRc_LFGWK[XluFcNGUtDYMZny[M^nVKVeMllQI[xtvwQnXFlWYqxZZFp_|]^oWX[{pOMpxXxvkbyJA[DrPzwD|LW|QcV{Nw~U^dgguSpG]ClmO@j_TENIGjPWwgdVbHganhM?ema|dBaqla|WBd`poj~klxaasKxGG^xbWquAl~_lKWxUkDFagMnE{zHug{b`A~IYcQYBF_E}wiA}K@yxWHrZ{[d~|ARsYsjeNWzkMs~IOqqp[yzDE|WFrivsidTcnbHFRoW@XpAV`lv_zj?B~tPCppRjgbbDTALeFaOf?VcjnKTQMLyp{NwdylHCqmo?oelhjWuXj~}{fpuX`fra?GNkDiChYgVSh{R[BgF~eQa^WVz}ATI_CpY?g_diae]|ijH`TyNIF}|D_xpmBq_JpKih{Ba|sWzhnAoyraiDvk`h{qbBfsylBGmRH}DRPdryEsSaKS~tIaeF[s]I~xxHVrcNe@Jjxa@jlhZueLQqHh_]twVMqG_EGuwyab{nxOF?`HCle}nBZzlTQjkLmoXbXhOtBglFoMz?eqre`HiE@vNwBulglmQjj]DB@pPkPUgA^sjOAUNdSu_`oAzar?n?eMnw{{hYmslYi[TnlJD'",...']charCodeAtUinyxpf',"for(;e<10359;c[e++]=p-=128,A=A?p-A&&A:p==34&&p)for(p=1;p<128;y=f.map((n,x)=>(U=r[n]*2+1,U=Math.log(U/(h-U)),t-=a[x]*U,U/500)),t=~-h/(1+Math.exp(t))|1,i=o%h<t,o=o%h+(i?t:h-t)*(o>>17)-!i*t,f.map((n,x)=>(U=r[n]+=(i*h/2-r[n]<<13)/((C[n]+=C[n]<5)+1/20)>>13,a[x]+=y[x]*(i-t/h))),p=p*2+i)for(f='010202103203210431053105410642065206541'.split(t=0).map((n,x)=>(U=0,[...n].map((n,x)=>(U=U*997+(c[e-n]|0)|0)),h*32-1&U*997+p+!!A*129)*12+x);o<h*32;o=o*64|M.charCodeAt(d++)&63);for(C=String.fromCharCode(...c);r=/[\0-#?@\\\\~]/.exec(C);)with(C.split(r))C=join(shift());return C")([],[],1<<17,[0,0,0,0,0,0,0,0,0,0,0,0],new Uint16Array(51e6).fill(1<<15),new Uint8Array(51e6),0,0,0,0));
-/*
-    LittleJS WebGL Interface
-    - All webgl used by the engine is wrapped up here
-    - Can be disabled with glEnable to revert to 2D canvas rendering
-    - Batches sprite rendering on GPU for incredibly fast performance
-    - Sprite transform math is done in the shader where possible
-    - For normal stuff you won't need to call any functions in this file
-    - For advanced stuff there are helper functions to create shaders, textures, etc
-*/
+/** 
+ *  LittleJS WebGL Interface
+ *  <br> - All webgl used by the engine is wrapped up here
+ *  <br> - Can be disabled with glEnable to revert to 2D canvas rendering
+ *  <br> - Batches sprite rendering on GPU for incredibly fast performance
+ *  <br> - Sprite transform math is done in the shader where possible
+ *  <br> - For normal stuff you won't need to call any functions in this file
+ *  <br> - For advanced stuff there are helper functions to create shaders, textures, etc
+ *  @namespace WebGL
+ */
 
 'use strict';
 
-let glCanvas, glContext, glTileTexture, glActiveTexture, glShader, 
-    glPositionData, glColorData, glBatchCount, glDirty, glAdditive;
+/** The WebGL canvas which appears above the main canvas and below the overlay canvas
+ *  @type {HTMLCanvasElement}
+ *  @memberof WebGL */
+let glCanvas;
+
+/** 2d context for glCanvas 
+ *  @type {WebGLRenderingContext}
+ *  @memberof WebGL */
+let glContext;
+
+/** Main tile sheet texture automatically loaded by engine
+ *  @type {WebGLTexture}
+ *  @memberof WebGL */
+let glTileTexture;
+
+// WebGL internal variables not exposed to documentation
+let glActiveTexture, glShader, glPositionData, glColorData, glBatchCount, glBatchAdditive, glDirty, glAdditive;
 
+///////////////////////////////////////////////////////////////////////////////
+
+// Init WebGL, called automatically by the engine
 function glInit()
 {
     if (!glEnable) return;
@@ -2573,7 +3536,7 @@ function glInit()
 
     if (glOverlay)
     {
-        // firefox is much faster without copying the gl buffer so we just overlay it with some tradeoffs
+        // some browsers are much faster without copying the gl buffer so we just overlay it instead
         document.body.appendChild(glCanvas);
         glCanvas.style = mainCanvas.style.cssText;
     }
@@ -2624,20 +3587,21 @@ function glInit()
     initVertexAttribArray('b', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 }
 
+/** Set the WebGl blend mode, normally you should call setBlendMode instead
+ *  @param {Boolean} [additive=0]
+ *  @memberof WebGL */
 function glSetBlendMode(additive)
 {
     if (!glEnable) return;
         
-    if (additive != glAdditive)
-        glFlush();
-
     // setup blending
     glAdditive = additive;
-    const destBlend = additive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
-    glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
-    glContext.enable(gl_BLEND);
 }
 
+/** Set the WebGl texture, not normally necessary unless multiple tile sheets are used
+ *  <br> - This may also flush the gl buffer resulting in more draw calls and worse performance
+ *  @param {WebGLTexture} [texture=glTileTexture]
+ *  @memberof WebGL */
 function glSetTexture(texture=glTileTexture)
 {
     if (!glEnable) return;
@@ -2648,6 +3612,11 @@ function glSetTexture(texture=glTileTexture)
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = texture);
 }
 
+/** Compile WebGL shader of the given type, will throw errors if in debug mode
+ *  @param {String} source
+ *  @param          type
+ *  @return {WebGLShader}
+ *  @memberof WebGL */
 function glCompileShader(source, type)
 {
     if (!glEnable) return;
@@ -2663,6 +3632,11 @@ function glCompileShader(source, type)
     return shader;
 }
 
+/** Create WebGL program with given shaders
+ *  @param {WebGLShader} vsSource
+ *  @param {WebGLShader} fsSource
+ *  @return {WebGLProgram}
+ *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
 {
     if (!glEnable) return;
@@ -2679,6 +3653,12 @@ function glCreateProgram(vsSource, fsSource)
     return program;
 }
 
+/** Create WebGL buffer
+ *  @param bufferType
+ *  @param size
+ *  @param usage
+ *  @return {WebGLBuffer}
+ *  @memberof WebGL */
 function glCreateBuffer(bufferType, size, usage)
 {
     if (!glEnable) return;
@@ -2690,15 +3670,19 @@ function glCreateBuffer(bufferType, size, usage)
     return buffer;
 }
 
+/** Create WebGL texture from an image and set the texture settings
+ *  @param {Image} image
+ *  @return {WebGLTexture}
+ *  @memberof WebGL */
 function glCreateTexture(image)
 {
-    if (!glEnable) return;
+    if (!glEnable || !image || !image.width) return;
 
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(gl_TEXTURE_2D, texture);
     glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
-
+        
     // use point filtering for pixelated rendering
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, pixelated ? gl_NEAREST : gl_LINEAR);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, pixelated ? gl_NEAREST : gl_LINEAR);
@@ -2707,6 +3691,7 @@ function glCreateTexture(image)
     return texture;
 }
 
+// called automatically by engine before render
 function glPreRender(width, height)
 {
     if (!glEnable) return;
@@ -2734,24 +3719,33 @@ function glPreRender(width, height)
     );
 }
 
+/** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
+ *  @memberof WebGL */
 function glFlush()
 {
     if (!glEnable || !glBatchCount) return;
 
+    const destBlend = glBatchAdditive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
+    glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
+    glContext.enable(gl_BLEND);
+
     // draw all the sprites in the batch and reset the buffer
     glContext.bufferSubData(gl_ARRAY_BUFFER, 0, 
         glPositionData.subarray(0, glBatchCount * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT));
     glContext.drawArrays(gl_TRIANGLES, 0, glBatchCount * gl_VERTICES_PER_QUAD);
     glBatchCount = 0;
+    glBatchAdditive = glAdditive;
 }
 
+/** Draw any sprites still in the buffer, copy to main canvas and clear
+ *  @param {CanvasRenderingContext2D} context
+ *  @param {Boolean} [forceDraw=0]
+ *  @memberof WebGL */
 function glCopyToContext(context, forceDraw)
 {
     if (!glEnable || !glDirty)  return;
     
-    // draw any sprites still in the buffer, copy to main canvas and clear
     glFlush();
-
     if (!glOverlay || forceDraw)
     {
         // do not draw/clear in overlay mode because the canvas is visible
@@ -2760,12 +3754,25 @@ function glCopyToContext(context, forceDraw)
     }
 }
 
-function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgba=0xffffffff, rgbaAdditive=0x00000000)
+/** Add a sprite to the gl draw list, used by all gl draw functions
+ *  @param x
+ *  @param y
+ *  @param sizeX
+ *  @param sizeY
+ *  @param [angle=0]
+ *  @param [uv0X=0]
+ *  @param [uv0Y=0]
+ *  @param [uv1X=1]
+ *  @param [uv1Y=1]
+ *  @param [rgba=0xffffffff]
+ *  @param [rgbaAdditive=0]
+ *  @memberof WebGL */
+function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgba=0xffffffff, rgbaAdditive=0)
 {
     if (!glEnable) return;
-    
-    // flush if there is no room for more verts
-    if (glBatchCount == gl_MAX_BATCH)
+
+    // flush if there is no room for more verts or if different blend mode
+    if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
         glFlush();
         
     // setup 2 triangles to form a quad
@@ -2774,69 +3781,45 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
 
     // vertex 0
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX;
-    glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv0X;
-    glPositionData[offset++] = uv1Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = -sizeX; glPositionData[offset++] = -sizeY;
+    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
     
     // vertex 1
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;
-    glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv1X;
-    glPositionData[offset++] = uv0Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = sizeX;  glPositionData[offset++] = sizeY;
+    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
     
     // vertex 2
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX;
-    glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv0X;
-    glPositionData[offset++] = uv0Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = -sizeX; glPositionData[offset++] = sizeY;
+    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
     
     // vertex 0
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX;
-    glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv0X;
-    glPositionData[offset++] = uv1Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = -sizeX; glPositionData[offset++] = -sizeY;
+    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
 
     // vertex 3
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;
-    glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv1X;
-    glPositionData[offset++] = uv1Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = sizeX;  glPositionData[offset++] = -sizeY;
+    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
 
     // vertex 1
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;
-    glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv1X;
-    glPositionData[offset++] = uv0Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = sizeX;  glPositionData[offset++] = sizeY;
+    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -2871,3 +3854,273 @@ gl_VERTICES_PER_QUAD = 6,
 gl_INDICIES_PER_VERT = 9,
 gl_MAX_BATCH = 1<<16,
 gl_VERTEX_BYTE_STRIDE = 4 + (4 * 2) * 3 + (4) * 2; // float + vec2 * 3 + (char * 4) * 2
+/*
+    LittleJS - The Tiny JavaScript Game Engine That Can!
+    MIT License - Copyright 2021 Frank Force
+
+    Engine Features
+    - Object oriented system with base class engine object
+    - Base class object handles update, physics, collision, rendering, etc
+    - Engine helper classes and functions like Vector2, Color, and Timer
+    - Super fast rendering system for tile sheets
+    - Sound effects audio with zzfx and music with zzfxm
+    - Input processing system with gamepad and touchscreen support
+    - Tile layer rendering and collision system
+    - Particle effect system
+    - Medal system tracks and displays achievements
+    - Debug tools and debug rendering system
+    - Call engineInit() to start it up!
+*/
+
+'use strict';
+
+/** Name of engine */
+const engineName = 'LittleJS';
+
+/** Version of engine */
+const engineVersion = '1.1.8';
+
+/** Frames per second to update objects
+ *  @default */
+const FPS = 60;
+
+/** How many seconds each frame lasts, engine uses a fixed time step
+ *  @default 1/60 */
+const timeDelta = 1/FPS;
+
+/** Array containing all engine objects */
+let engineObjects = [];
+
+/** Array containing only objects that are set to collide with other objects (for optimization) */
+let engineCollideObjects = [];
+
+/** Current update frame, used to calculate time */
+let frame = 0;
+
+/** Current engine time since start in seconds, derived from frame */
+let time = 0;
+
+/** Actual clock time since start in seconds (not affected by pause or frame rate clamping) */
+let timeReal = 0;
+
+/** Is the game paused? Causes time and objects to not be updated. */
+let paused = 0;
+
+// Engine internal variables not exposed to documentation
+let frameTimeLastMS = 0, frameTimeBufferMS = 0, debugFPS = 0, 
+    shrinkTilesX, shrinkTilesY, drawCount, tileImageSize, tileImageSizeInverse;
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Start up LittleJS engine with your callback functions
+ *  @param {Function} gameInit        - Called once after the engine starts up, setup the game
+ *  @param {Function} gameUpdate      - Called every frame at 60 frames per second, handle input and update the game state
+ *  @param {Function} gameUpdatePost  - Called after physics and objects are updated, setup camera and prepare for render
+ *  @param {Function} gameRender      - Called before objects are rendered, draw any background effects that appear behind objects
+ *  @param {Function} gameRenderPost  - Called after objects are rendered, draw effects or hud that appear above all objects
+ *  @param {String} [tileImageSource] - Tile image to use, everything starts when the image is finished loading
+ */
+function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, tileImageSource)
+{
+    // init engine when tiles load or fail to load
+    tileImage.onerror = tileImage.onload = ()=>
+    {
+        // save tile image info
+        tileImageSizeInverse = vec2(1).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
+        debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
+        shrinkTilesX = tileBleedShrinkFix/tileImageSize.x;
+        shrinkTilesY = tileBleedShrinkFix/tileImageSize.y;
+
+        // setup html
+        document.body.appendChild(mainCanvas = document.createElement('canvas'));
+        document.body.style = 'margin:0;overflow:hidden;background:#000';
+        mainCanvas.style = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)' +
+            (pixelated ? ';image-rendering:crisp-edges;image-rendering:pixelated' : ''); // pixelated rendering
+        mainContext = mainCanvas.getContext('2d');
+
+        // init stuff and start engine
+        debugInit();
+        glInit();
+
+        // create overlay canvas for hud to appear above gl canvas
+        document.body.appendChild(overlayCanvas = document.createElement('canvas'));
+        overlayCanvas.style = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
+        overlayContext = overlayCanvas.getContext('2d');
+
+        gameInit();
+        engineUpdate();
+    };
+
+    // main update loop
+    const engineUpdate = (frameTimeMS=0)=>
+    {
+        requestAnimationFrame(engineUpdate);
+
+        // update time keeping
+        let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
+        frameTimeLastMS = frameTimeMS;
+        if (debug || showWatermark)
+            debugFPS = lerp(.05, 1e3/(frameTimeDeltaMS||1), debugFPS);
+        if (debug)
+            frameTimeDeltaMS *= keyIsDown(107) ? 5 : keyIsDown(109) ? .2 : 1; // +/- to speed/slow time
+        timeReal += frameTimeDeltaMS / 1e3;
+        frameTimeBufferMS = min(frameTimeBufferMS + !paused * frameTimeDeltaMS, 50); // clamp incase of slow framerate
+
+        if (paused)
+        {
+            // do post update even when paused
+            inputUpdate();
+            debugUpdate();
+            gameUpdatePost();
+            inputUpdatePost();
+        }
+        else
+        {
+            // apply time delta smoothing, improves smoothness of framerate in some browsers
+            let deltaSmooth = 0;
+            if (frameTimeBufferMS < 0 && frameTimeBufferMS > -9)
+            {
+                // force an update each frame if time is close enough (not just a fast refresh rate)
+                deltaSmooth = frameTimeBufferMS;
+                frameTimeBufferMS = 0;
+            }
+            
+            // update multiple frames if necessary in case of slow framerate
+            for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / FPS)
+            {
+                // update game and objects
+                inputUpdate();
+                gameUpdate();
+                engineObjectsUpdate();
+
+                // do post update
+                debugUpdate();
+                gameUpdatePost();
+                inputUpdatePost();
+            }
+
+            // add the time smoothing back in
+            frameTimeBufferMS += deltaSmooth;
+        }
+
+        if (fixedSize.x)
+        {
+            // clear set fixed size
+            mainCanvas.width  = fixedSize.x;
+            mainCanvas.height = fixedSize.y;
+            
+            // fit to window by adding space on top or bottom if necessary
+            const aspect = innerWidth / innerHeight;
+            const fixedAspect = mainCanvas.width / mainCanvas.height;
+            mainCanvas.style.width  = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
+            mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
+            if (glCanvas)
+            {
+                glCanvas.style.width  = mainCanvas.style.width;
+                glCanvas.style.height = mainCanvas.style.height;
+            }
+        }
+        else
+        {
+            // clear and set size to same as window
+            mainCanvas.width  = min(innerWidth,  maxSize.x);
+            mainCanvas.height = min(innerHeight, maxSize.y);
+        }
+        
+        // save canvas size and clear overlay canvas
+        mainCanvasSize = vec2(overlayCanvas.width = mainCanvas.width, overlayCanvas.height = mainCanvas.height);
+        mainContext.imageSmoothingEnabled = !pixelated; // disable smoothing for pixel art
+
+        // render sort then render while removing destroyed objects
+        glPreRender(mainCanvas.width, mainCanvas.height);
+        gameRender();
+        engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
+        for (const o of engineObjects)
+            o.destroyed || o.render();
+        gameRenderPost();
+        medalsRender();
+        debugRender();
+        glCopyToContext(mainContext);
+
+        if (showWatermark)
+        {
+            // update fps
+            overlayContext.textAlign = 'right';
+            overlayContext.textBaseline = 'top';
+            overlayContext.font = '1em monospace';
+            overlayContext.fillStyle = '#000';
+            const text = engineName + ' ' + 'v' + engineVersion + ' / ' 
+                + drawCount + ' / ' + engineObjects.length + ' / ' + debugFPS.toFixed(1);
+            overlayContext.fillText(text, mainCanvas.width-3, 3);
+            overlayContext.fillStyle = '#fff';
+            overlayContext.fillText(text, mainCanvas.width-2, 2);
+            drawCount = 0;
+        }
+    }
+
+    // set tile image source to load the image and start the engine
+    tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
+}
+
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Calls update on each engine object (recursively if child), removes destroyed objects, and updated time */
+function engineObjectsUpdate()
+{
+    // recursive object update
+    const updateObject = (o)=>
+    {
+        if (!o.destroyed)
+        {
+            o.update();
+            for (const child of o.children)
+                updateObject(child);
+        }
+    }
+    for (const o of engineObjects)
+        o.parent || updateObject(o);
+
+    // remove destroyed objects
+    engineObjects = engineObjects.filter(o=>!o.destroyed);
+    engineCollideObjects = engineCollideObjects.filter(o=>!o.destroyed);
+
+    // increment frame and update time
+    time = ++frame / FPS;
+}
+
+/** Detroy and remove all objects that are not persistent or descendants of a persistent object */
+function engineObjectsDestroy()
+{
+    for (const o of engineObjects)
+        o.persistent || o.parent || o.destroy();
+    engineObjects = engineObjects.filter(o=>!o.destroyed);
+}
+
+/** Triggers a callback for each object within a given area
+ *  @param {Vector2} [pos] - Center of test area
+ *  @param {Number} [size] - Radius of circle if float, rectangle size if Vector2
+ *  @param {Function} [callbackFunction] - Calls this function on every object that passes the test
+ *  @param {Array} [objects=engineObjects] - List of objects to check */
+function engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)
+{
+    if (!pos)
+    {
+        // all objects
+        for (const o of objects)
+            callbackFunction(o);
+    }
+    else if (size.x != undefined)
+    {
+        // aabb test
+        for (const o of objects)
+            isOverlapping(pos, size, o.pos, o.size) && callbackFunction(o);
+    }
+    else
+    {
+        // circle test
+        const sizeSquared = size*size;
+        for (const o of objects)
+            pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
+    }
+}