littlejsengine 1.6.0 → 1.6.6

package/build/littlejs.release.js

@@ -1,15 +1,15 @@
-/*
-    LittleJS - Release Build
-    MIT License - Copyright 2021 Frank Force
-    
-    - This file is used for release builds in place of engineDebug.js
-    - Debug functionality will be disabled to lower size and increase performance
-*/
+/** 
+ * LittleJS - Release Build
+ * MIT License - Copyright 2021 Frank Force
+ * - This file is used for release builds in place of engineDebug.js
+ * - Debug functionality is disabled to reduce size and increase performance
+ */
 
 'use strict';
 
 let showWatermark = 0;
 let godMode = 0;
+let debugKeyCode = 0;
 const debug = 0;
 const debugOverlay = 0;
 const debugPhysics = 0;
@@ -19,24 +19,24 @@ const debugGamepads = 0;
 const debugMedals = 0;
 
 // debug commands are automatically removed from the final build
-const ASSERT          = ()=> {}
-const debugInit       = ()=> {}
-const debugUpdate     = ()=> {}
-const debugRender     = ()=> {}
-const debugRect       = ()=> {}
-const debugCircle     = ()=> {}
-const debugPoint      = ()=> {}
-const debugLine       = ()=> {}
-const debugAABB       = ()=> {}
-const debugText       = ()=> {}
-const debugClear      = ()=> {}
-const debugSaveCanvas = ()=> {}
+function ASSERT          (){}
+function debugInit       (){}
+function debugUpdate     (){}
+function debugRender     (){}
+function debugRect       (){}
+function debugCircle     (){}
+function debugPoint      (){}
+function debugLine       (){}
+function debugAABB       (){}
+function debugText       (){}
+function debugClear      (){}
+function debugSaveCanvas (){}
 /**
  * LittleJS Utility Classes and Functions
- * <br> - General purpose math library
- * <br> - Vector2 - fast, simple, easy 2D vector class
- * <br> - Color - holds a rgba color with some math functions
- * <br> - Timer - tracks time automatically
+ * - General purpose math library
+ * - Vector2 - fast, simple, easy 2D vector class
+ * - Color - holds a rgba color with some math functions
+ * - Timer - tracks time automatically
  * @namespace Utilities
  */
 
@@ -52,34 +52,34 @@ const PI = Math.PI;
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-const abs = (a)=> a < 0 ? -a : a;
+function abs(a) { return a < 0 ? -a : a; }
 
 /** 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;
+function min(a, b) { return 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;
+function max(a, b) { return a > b ?  a : b; }
 
 /** Returns the sign of value passed in (also returns 1 if 0)
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-const sign = (a)=> a < 0 ? -1 : 1;
+function sign(a) { return a < 0 ? -1 : 1; }
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {Number} dividend
  *  @param {Number} [divisor=1]
  *  @return {Number}
  *  @memberof Utilities */
-const mod = (a, b=1)=> ((a % b) + b) % b;
+function mod(a, b=1) { return ((a % b) + b) % b; }
 
 /** Clamps the value beween max and min
  *  @param {Number} value
@@ -87,7 +87,8 @@ const mod = (a, b=1)=> ((a % b) + b) % b;
  *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const clamp = (v, min=0, max=1)=> v < min ? min : v > max ? max : v;
+function clamp(v, min=0, max=1)
+{ return v < min ? min : v > max ? max : v; }
 
 /** Returns what percentage the value is between max and min
  *  @param {Number} value
@@ -95,7 +96,8 @@ const clamp = (v, min=0, max=1)=> v < min ? min : v > max ? max : v;
  *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const percent = (v, min=0, max=1)=> max-min ? clamp((v-min) / (max-min)) : 0;
+function percent(v, min=0, max=1)
+{ return max-min ? clamp((v-min) / (max-min)) : 0; }
 
 /** Linearly interpolates the percent value between max and min
  *  @param {Number} percent
@@ -103,19 +105,19 @@ const percent = (v, min=0, max=1)=> max-min ? clamp((v-min) / (max-min)) : 0;
  *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const lerp = (p, min=0, max=1)=> min + clamp(p) * (max-min);
+function lerp(p, min=0, max=1){ return min + clamp(p) * (max-min); }
 
 /** Applies smoothstep function to the percentage value
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-const smoothStep = (p)=> p * p * (3 - 2 * p);
+function smoothStep(p) { return p * p * (3 - 2 * p); }
 
 /** 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));
+function nearestPowerOfTwo(v) { return 2**Math.ceil(Math.log2(v)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
  *  @param {Vector2} pointA  - Center of box A
@@ -124,7 +126,8 @@ const nearestPowerOfTwo = (v)=> 2**Math.ceil(Math.log2(v));
  *  @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;
+function isOverlapping(pA, sA, pB, sB)
+{ return 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
@@ -132,13 +135,14 @@ const isOverlapping = (pA, sA, pB, sB)=> abs(pA.x - pB.x)*2 < sA.x + sB.x && abs
  *  @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));
+function wave(frequency=1, amplitude=1, t=time)
+{ return amplitude/2 * (1 - Math.cos(t*frequency*2*PI)); }
 
 /** Formats seconds to mm:ss style for display purposes 
  *  @param {Number} t - time in seconds
  *  @return {String}
  *  @memberof Utilities */
-const formatTime = (t)=> (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0);
+function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -150,32 +154,33 @@ const formatTime = (t)=> (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0);
  *  @param {Number} [valueB=0]
  *  @return {Number}
  *  @memberof Random */
-const rand = (a=1, b=0)=> b + (a-b)*Math.random();
+function rand(a=1, b=0) { return 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;
+function randInt(a=1, b=0) { return rand(a,b)|0; }
 
 /** Randomly returns either -1 or 1
  *  @return {Number}
  *  @memberof Random */
-const randSign = ()=> randInt(2) * 2 - 1;
+function randSign() { return randInt(2) * 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;
+function randInCircle(radius=1, minRadius=0)
+{ return radius > 0 ? randVector(radius * rand(minRadius / radius, 1)**.5) : new Vector2; }
 
 /** 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);
+function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length); }
 
 /** Returns a random color between the two passed in colors, combine components if linear
  *  @param {Color}   [colorA=Color()]
@@ -183,8 +188,8 @@ const randVector = (length=1)=> new Vector2().setAngle(rand(2*PI), length);
  *  @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));
+function randColor(cA = new Color, cB = new Color(0,0,0,1), linear)
+{ return 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)); }
 
 /** Seed used by the randSeeded function
  *  @type {Number}
@@ -195,16 +200,19 @@ let randSeed = 1;
 /** Set seed used by the randSeeded function, should not be 0
  *  @param {Number} seed
  *  @memberof Random */
-const setRandSeed = (seed)=> randSeed = seed;
+function setRandSeed(seed) { randSeed = seed; }
 
 /** 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)=>
+function randSeeded(a=1, b=0)
 {
-    randSeed ^= randSeed << 13; randSeed ^= randSeed >>> 17; randSeed ^= randSeed << 5; // xorshift
+    // xorshift algorithm
+    randSeed ^= randSeed << 13; 
+    randSeed ^= randSeed >>> 17; 
+    randSeed ^= randSeed << 5;
     return b + (a-b) * abs(randSeed % 1e9) / 1e9;
 }
 
@@ -222,7 +230,8 @@ const randSeeded = (a=1, b=0)=>
  * 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);
+function vec2(x=0, y)
+{ return x.x == undefined ? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y); }
 
 /** 
  * Check if object is a valid Vector2
@@ -230,11 +239,11 @@ const vec2 = (x=0, y)=> x.x == undefined ? new Vector2(x, y == undefined? x : y)
  * @return {Boolean}
  * @memberof Utilities
  */
-const isVector2 = (v)=> !isNaN(v.x) && !isNaN(v.y);
+function isVector2(v) { return !isNaN(v.x) && !isNaN(v.y); }
 
 /** 
  * 2D Vector object with vector math library
- * <br> - Functions do not change this so they can be chained together
+ * - Functions do not change this so they can be chained together
  * @example
  * let a = new Vector2(2, 3); // vector with coordinates (2, 3)
  * let b = new Vector2;       // vector with coordinates (0, 0)
@@ -381,7 +390,7 @@ class Vector2
  * @return {Color}
  * @memberof Utilities
  */
-const colorRGBA = (r, g, b, a)=> new Color(r, g, b, a);
+function rgb(r, g, b, a) { return new Color(r, g, b, a); }
 
 /** 
  * Create a color object with HSLA values
@@ -392,7 +401,7 @@ const colorRGBA = (r, g, b, a)=> new Color(r, g, b, a);
  * @return {Color}
  * @memberof Utilities
  */
-const colorHSLA = (h, s, l, a)=> new Color().setHSLA(h, s, l, a);
+function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
 
 /** 
  * Color object (red, green, blue, alpha) with some helpful functions
@@ -400,8 +409,8 @@ const colorHSLA = (h, s, l, a)=> new Color().setHSLA(h, s, l, a);
  * let a = new Color;              // white
  * let b = new Color(1, 0, 0);     // red
  * let c = new Color(0, 0, 0, 0);  // transparent black
- * let d = colorRGBA(0, 0, 1);     // blue using rgb color
- * let e = colorHSLA(.3, 1, .5);   // green using hsl color
+ * let d = RGB(0, 0, 1);           // blue using rgb color
+ * let e = HSL(.3, 1, .5);         // green using hsl color
  */
 class Color
 {
@@ -651,11 +660,11 @@ let canvasMaxSize = vec2(1920, 1200);
  *  @memberof Settings */
 let canvasFixedSize = vec2();
 
-/** Disables anti aliasing for pixel art if true
+/** Disables filtering for crisper pixel art if true
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let cavasPixelated = 1;
+let canvasPixelated = 1;
 
 /** Default font used for text rendering
  *  @type {String}
@@ -772,8 +781,8 @@ let gamepadDirectionEmulateStick = 1;
 let inputWASDEmulateDirection = 1;
 
 /** True if touch gamepad should appear on mobile devices
- *  <br> - Supports left analog stick, 4 face buttons and start button (button 9)
- *  <br> - Must be set by end of gameInit to be activated
+ *  - Supports left analog stick, 4 face buttons and start button (button 9)
+ *  - Must be set by end of gameInit to be activated
  *  @type {Boolean}
  *  @default 0
  *  @memberof Settings */
@@ -862,27 +871,23 @@ let medalDisplayIconSize = 50;
  *  @default 0
  *  @memberof Settings */
 let medalsPreventUnlock;
-/*
-    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
-    - Post processing effects
-    - Call engineInit() to start it up!
-*/
-
-/**
- * LittleJS Engine Globals
+/** 
+ * 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
+ * - Post processing effects
+ * - Call engineInit() to start it up!
  * @namespace Engine
  */
 
@@ -898,7 +903,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.6.0';
+const engineVersion = '1.6.6';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -968,10 +973,11 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
 
         // setup html
-        const styleBody = 'margin:0;overflow:hidden;background:#000' + // fill the window
-            ';touch-action:none' + // prevent mobile pinch to resize
-            ';user-select:none' +  // prevent mobile hold to select
-            ';-webkit-user-select:none'; // compatibility for ios
+        const styleBody = 'margin:0;overflow:hidden;' + // fill the window
+            'background:#000;' +        // set background color
+            'touch-action:none;' +      // prevent mobile pinch to resize
+            'user-select:none;' +       // prevent mobile hold to select
+            '-webkit-user-select:none'; // compatibility for ios
         document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
         mainContext = mainCanvas.getContext('2d');
@@ -984,12 +990,13 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         document.body.appendChild(overlayCanvas = document.createElement('canvas'));
         overlayContext = overlayCanvas.getContext('2d');
 
-        // set canvas style to fill the window
-        const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
+        // set canvas style
+        const styleCanvas = 'position:absolute;' +
+            'top:50%;left:50%;transform:translate(-50%,-50%);' + // center the canvas
+            (canvasPixelated?'image-rendering:pixelated':'');     // set pixelated rendering
         (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
         
         gameInit();
-        touchGamepadCreate();
         engineUpdate();
     };
 
@@ -1119,7 +1126,7 @@ function enginePreRender()
     mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
 
     // disable smoothing for pixel art
-    mainContext.imageSmoothingEnabled = !cavasPixelated;
+    mainContext.imageSmoothingEnabled = !canvasPixelated;
 
     // setup gl rendering if enabled
     glEnable && glPreRender();
@@ -1133,7 +1140,7 @@ function engineObjectsUpdate()
     engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
 
     // recursive object update
-    const updateObject = (o)=>
+    function updateObject(o)
     {
         if (!o.destroyed)
         {
@@ -1186,32 +1193,32 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
             pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
     }
 }
-/*
-    LittleJS Object System
-*/
+/** 
+ * 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
- * <br>
- * <br>The physics system used by objects is simple and fast with some caveats...
- * <br> - Collision uses the axis aligned size, the object's rotation angle is only for rendering
- * <br> - Objects are guaranteed to not intersect tile collision from physics
- * <br> - If an object starts or is moved inside tile collision, it will not collide with that tile
- * <br> - Collision for objects can be set to be solid to block other objects
- * <br> - Objects may get pushed into overlapping other solid objects, if so they will push away
- * <br> - Solid objects are more performance intensive and should be used sparingly
+ * - 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
+ *
+ * The physics system used by objects is simple and fast with some caveats...
+ * - Collision uses the axis aligned size, the object's rotation angle is only for rendering
+ * - Objects are guaranteed to not intersect tile collision from physics
+ * - If an object starts or is moved inside tile collision, it will not collide with that tile
+ * - Collision for objects can be set to be solid to block other objects
+ * - Objects may get pushed into overlapping other solid objects, if so they will push away
+ * - Solid objects are more performance intensive and should be used sparingly
  * @example
  * // create an engine object, normally you would first extend the class with your own
  * const pos = vec2(2,3);
@@ -1300,6 +1307,7 @@ class EngineObject
         this.velocity.y += gravity * this.gravityScale;
         this.pos.x += this.velocity.x *= this.damping;
         this.pos.y += this.velocity.y *= this.damping;
+        this.angle += this.angleVelocity *= this.angleDamping;
 
         // physics sanity checks
         ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
@@ -1356,6 +1364,7 @@ class EngineObject
                 const smallStepUp = (oldPos.y - o.pos.y)*2 > sizeBoth.y + gravity; // prefer to push up if small delta
                 const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
                 const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
+                const elasticity = max(this.elasticity, o.elasticity);
                 
                 if (smallStepUp | isBlockedY | !isBlockedX) // resolve y collision
                 {
@@ -1368,7 +1377,7 @@ class EngineObject
                             this.groundObject = o;
 
                         // bounce if other object is fixed or grounded
-                        this.velocity.y *= -this.elasticity;
+                        this.velocity.y *= -elasticity;
                     }
                     else if (o.mass)
                     {
@@ -1382,7 +1391,6 @@ class EngineObject
                             + this.velocity.y * 2 * this.mass / (this.mass + o.mass);
 
                         // lerp betwen elastic or inelastic based on elasticity
-                        const elasticity = max(this.elasticity, o.elasticity);
                         this.velocity.y = lerp(elasticity, inelastic, elastic0);
                         o.velocity.y = lerp(elasticity, inelastic, elastic1);
                     }
@@ -1403,12 +1411,11 @@ class EngineObject
                             + this.velocity.x * 2 * this.mass / (this.mass + o.mass);
 
                         // lerp betwen elastic or inelastic based on elasticity
-                        const elasticity = max(this.elasticity, o.elasticity);
                         this.velocity.x = lerp(elasticity, inelastic, elastic0);
                         o.velocity.x = lerp(elasticity, inelastic, elastic1);
                     }
                     else // bounce if other object is fixed
-                        this.velocity.x *= -this.elasticity;
+                        this.velocity.x *= -elasticity;
                 }
                 debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
             }
@@ -1564,23 +1571,23 @@ class EngineObject
 }
 /** 
  * LittleJS Drawing System
- * <br> - Hybrid with both Canvas2D and WebGL available
- * <br> - Super fast tile sheet rendering with WebGL
- * <br> - Can apply rotation, mirror, color and additive color
- * <br> - Many useful utility functions
- * <br>
- * <br>LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
- * <br>There are 3 canvas/contexts available to draw to...
- * <br> - mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
- * <br> - glCanvas - Used by the accelerated WebGL batch rendering system.
- * <br> - overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
- * <br>
- * <br>The WebGL rendering system is very fast with some caveats...
- * <br> - The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
- * <br> - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
- * <br> - Group additive rendering together using renderOrder to mitigate this issue
- * <br>
- * <br>The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!
+ * - Hybrid with both Canvas2D and WebGL available
+ * - Super fast tile sheet rendering with WebGL
+ * - Can apply rotation, mirror, color and additive color
+ * - Many useful utility functions
+ * 
+ * LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
+ * There are 3 canvas/contexts available to draw to...
+ * mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
+ * glCanvas - Used by the accelerated WebGL batch rendering system.
+ * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
+ * 
+ * The WebGL rendering system is very fast with some caveats...
+ * - The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
+ * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
+ * - Group additive rendering together using renderOrder to mitigate this issue
+ * 
+ * The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!
  * @namespace Draw
  */
 
@@ -1624,7 +1631,7 @@ let tileImageSize, tileImageFixBleed, drawCount;
  *  @param {Vector2} screenPos
  *  @return {Vector2}
  *  @memberof Draw */
-const screenToWorld = (screenPos)=>
+function screenToWorld(screenPos)
 {
     ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
     return screenPos.add(vec2(.5)).subtract(mainCanvasSize.scale(.5)).multiply(vec2(1/cameraScale,-1/cameraScale)).add(cameraPos);
@@ -1635,7 +1642,7 @@ const screenToWorld = (screenPos)=>
  *  @param {Vector2} worldPos
  *  @return {Vector2}
  *  @memberof Draw */
-const worldToScreen = (worldPos)=>
+function worldToScreen(worldPos)
 {
     ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
     return worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
@@ -1790,6 +1797,23 @@ function setBlendMode(additive, useWebGL=glEnable)
         mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
+/** Draw text on overlay canvas in world space
+ *  Automatically splits new lines into rows
+ *  @param {String}  text
+ *  @param {Vector2} pos
+ *  @param {Number}  [size=1]
+ *  @param {Color}   [color=Color()]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=Color(0,0,0)]
+ *  @param {String}  [textAlign='center']
+ *  @param {String}  [font=fontDefault]
+ *  @param {CanvasRenderingContext2D} [context=overlayContext]
+ *  @memberof Draw */
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, context)
+{
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, context);
+}
+
 /** Draw text on overlay canvas in screen space
  *  Automatically splits new lines into rows
  *  @param {String}  text
@@ -1799,6 +1823,8 @@ function setBlendMode(additive, useWebGL=glEnable)
  *  @param {Number}  [lineWidth=0]
  *  @param {Color}   [lineColor=Color(0,0,0)]
  *  @param {String}  [textAlign='center']
+ *  @param {String}  [font=fontDefault]
+ *  @param {CanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
 function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext)
 {
@@ -1819,30 +1845,15 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     });
 }
 
-/** Draw text on overlay canvas in world space
- *  Automatically splits new lines into rows
- *  @param {String}  text
- *  @param {Vector2} pos
- *  @param {Number}  [size=1]
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [lineWidth=0]
- *  @param {Color}   [lineColor=Color(0,0,0)]
- *  @param {String}  [textAlign='center']
- *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font)
-{
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, mainContext);
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 
 let engineFontImage;
 
 /** 
  * Font Image Object - Draw text on a 2D canvas by using characters in an image
- * <br> - 96 characters (from space to tilde) are stored in an image
- * <br> - Uses a default 8x8 font if none is supplied
- * <br> - You can also use fonts from the main tile sheet
+ * - 96 characters (from space to tilde) are stored in an image
+ * - Uses a default 8x8 font if none is supplied
+ * - You can also use fonts from the main tile sheet
  * @example
  * // use built in font
  * const font = new ImageFont;
@@ -1882,7 +1893,7 @@ class FontImage
     {
         const context = this.context;
         context.save();
-        context.imageSmoothingEnabled = !cavasPixelated;
+        context.imageSmoothingEnabled = !canvasPixelated;
 
         const size = this.tileSize;
         const drawSize = size.add(this.paddingSize).scale(scale);
@@ -1928,7 +1939,7 @@ class FontImage
 /** Returns true if fullscreen mode is active
  *  @return {Boolean}
  *  @memberof Draw */
-const isFullscreen = ()=> document.fullscreenElement;
+function isFullscreen() { return document.fullscreenElement; }
 
 /** Toggle fullsceen mode
  *  @memberof Draw */
@@ -1945,10 +1956,10 @@ function toggleFullscreen()
 
 /** 
  * LittleJS Input System
- * <br> - Tracks key down, pressed, and released
- * <br> - Also tracks mouse buttons, position, and wheel
- * <br> - Supports multiple gamepads
- * <br> - Virtual gamepad for touch devices with touchGamepadSize
+ * - Tracks key down, pressed, and released
+ * - Also tracks mouse buttons, position, and wheel
+ * - Supports multiple gamepads
+ * - Virtual gamepad for touch devices with touchGamepadSize
  * @namespace Input
  */
 
@@ -1959,25 +1970,28 @@ function toggleFullscreen()
  *  @param {Number} [device=0]
  *  @return {Boolean}
  *  @memberof Input */
-const keyIsDown = (key, device=0)=> inputData[device] && inputData[device][key] & 1;
+function keyIsDown(key, device=0)
+{ return inputData[device] && inputData[device][key] & 1; }
 
 /** 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;
+function keyWasPressed(key, device=0)
+{ return 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;
+function keyWasReleased(key, device=0)
+{ return inputData[device] && inputData[device][key] & 4 ? 1 : 0; }
 
 /** Clears all input
  *  @memberof Input */
-const clearInput = ()=> inputData = [[]];
+function clearInput() { inputData = [[]]; }
 
 /** Returns true if mouse button is down
  *  @function
@@ -2030,28 +2044,32 @@ let preventDefaultInput = 0;
  *  @param {Number} [gamepad=0]
  *  @return {Boolean}
  *  @memberof Input */
-const gamepadIsDown = (button, gamepad=0)=> keyIsDown(button, gamepad+1);
+function gamepadIsDown(button, gamepad=0)
+{ return 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);
+function gamepadWasPressed(button, gamepad=0)
+{ return 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);
+function gamepadWasReleased(button, gamepad=0)
+{ return keyWasReleased(button, gamepad+1); }
 
 /** 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();
+function gamepadStick(stick,  gamepad=0)
+{ return stickData[gamepad] ? stickData[gamepad][stick] || vec2() : vec2(); }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Input update called by engine
@@ -2090,12 +2108,18 @@ onkeydown = (e)=>
     e.repeat || (inputData[isUsingGamepad = 0][remapKey(e.which)] = 3);
     preventDefaultInput && e.preventDefault();
 }
+
 onkeyup = (e)=>
 {
     if (debug && e.target != document.body) return;
     inputData[0][remapKey(e.which)] = 4;
 }
-const remapKey = (c)=> inputWASDEmulateDirection ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
+
+function remapKey(c)
+{ 
+    return inputWASDEmulateDirection ? 
+        c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c; 
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 // Mouse event handlers
@@ -2104,10 +2128,10 @@ onmousedown = (e)=> {inputData[isUsingGamepad = 0][e.button] = 3; onmousemove(e)
 onmouseup   = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
 onmousemove = (e)=> mousePosScreen = mouseToScreen(e);
 onwheel = (e)=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
-oncontextmenu = (e)=> !1; // prevent right click menu
+oncontextmenu = (e)=> false; // prevent right click menu
 
 // convert a mouse or touch event position to screen space
-const mouseToScreen = (mousePos)=>
+function mouseToScreen(mousePos)
 {
     if (!mainCanvas)
         return vec2(); // fix bug that can occur if user clicks before page loads
@@ -2153,8 +2177,7 @@ function gamepadsUpdate()
         if (gamepad)
         {
             // read clamp dead zone of analog sticks
-            const deadZone = .3, deadZoneMax = .8;
-            const applyDeadZone = (v)=> 
+            const deadZone = .3, deadZoneMax = .8, applyDeadZone = (v)=> 
                 v >  deadZone ?  percent( v, deadZone, deadZoneMax) : 
                 v < -deadZone ? -percent(-v, deadZone, deadZoneMax) : 0;
 
@@ -2187,11 +2210,12 @@ function gamepadsUpdate()
 /** Pulse the vibration hardware if it exists
  *  @param {Number} [pattern=100] - a single value in miliseconds or vibration interval array
  *  @memberof Input */
-const vibrate = (pattern)=> vibrateEnable && navigator && navigator.vibrate && navigator.vibrate(pattern);
+function vibrate(pattern)
+{ vibrateEnable && navigator && navigator.vibrate && navigator.vibrate(pattern); }
 
 /** Cancel any ongoing vibration
  *  @memberof Input */
-const vibrateStop = ()=> vibrate(0);
+function vibrateStop() { vibrate(0); }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Touch input
@@ -2237,6 +2261,9 @@ if (isTouchDevice)
             return true;
         }
 
+        // try to create touch game pad
+        touchGamepadEnable && touchGamepadCreate();
+
         return ontouchstart(e);
     }
 }
@@ -2250,76 +2277,69 @@ let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
 // create the touch gamepad, called automatically by the engine
 function touchGamepadCreate()
 {
-    if (!touchGamepadEnable || !isTouchDevice)
-        return;
-
     // touch input internal variables
     touchGamepadButtons = [];
     touchGamepadStick = vec2();
 
-    // setup touch input
-    ontouchstart = (e)=>
+    let touchHandler = ontouchstart;
+    ontouchstart = ontouchmove = ontouchend = (e)=> 
     {
-        // fix mobile audio, force it to play a sound on first touch
-        zzfx(0);
-
-        ontouchstart = ontouchmove = ontouchend = (e)=> 
+        // clear touch gamepad input
+        touchGamepadStick = vec2();
+        touchGamepadButtons = [];
+            
+        const touching = e.touches.length;
+        if (touching)
         {
-            // clear touch gamepad input
-            touchGamepadStick = vec2();
-            touchGamepadButtons = [];
-                
-            const touching = e.touches.length;
-            if (touching)
+            touchGamepadTimer.set();
+            if (paused)
             {
-                // set that gamepad is active
-                isUsingGamepad = 1;
-                touchGamepadTimer.set();
-
-                if (paused)
-                {
-                    // touch anywhere to press start when paused
-                    touchGamepadButtons[9] = 1;
-                    return;
-                }
+                // touch anywhere to press start when paused
+                touchGamepadButtons[9] = 1;
+                return;
             }
+        }
 
-            // get center of left and right sides
-            const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-            const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
-            const startCenter = mainCanvasSize.scale(.5);
+        // get center of left and right sides
+        const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
+        const startCenter = mainCanvasSize.scale(.5);
 
-            // check each touch point
-            for (const touch of e.touches)
+        // check each touch point
+        for (const touch of e.touches)
+        {
+            const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
+            if (touchPos.distance(stickCenter) < touchGamepadSize)
             {
-                const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
-                if (touchPos.distance(stickCenter) < touchGamepadSize)
+                // virtual analog stick
+                if (touchGamepadAnalog)
+                    touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
+                else
                 {
-                    // virtual analog stick
-                    if (touchGamepadAnalog)
-                        touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
-                    else
-                    {
-                        // 8 way dpad
-                        const angle = touchPos.subtract(stickCenter).angle();
-                        touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
-                    }
-                }
-                else if (touchPos.distance(buttonCenter) < touchGamepadSize)
-                {
-                    // virtual face buttons
-                    const button = touchPos.subtract(buttonCenter).direction();
-                    touchGamepadButtons[button] = 1;
-                }
-                else if (touchPos.distance(startCenter) < touchGamepadSize)
-                {
-                    // virtual start button in center
-                    touchGamepadButtons[9] = 1;
+                    // 8 way dpad
+                    const angle = touchPos.subtract(stickCenter).angle();
+                    touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
                 }
             }
+            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
+            {
+                // virtual face buttons
+                const button = touchPos.subtract(buttonCenter).direction();
+                touchGamepadButtons[button] = 1;
+            }
+            else if (touchPos.distance(startCenter) < touchGamepadSize)
+            {
+                // virtual start button in center
+                touchGamepadButtons[9] = 1;
+            }
         }
 
-        return ontouchstart(e);
+        // call default touch handler and set to using gamepad
+        touchHandler(e);
+        isUsingGamepad = 1;
+        
+        // must return true so the document will get focus
+        return true;
     }
 }
 
@@ -2345,7 +2365,7 @@ function touchGamepadRender()
     overlayContext.beginPath();
 
     const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-    if (touchGamepadAnalog)
+    if (touchGamepadAnalog) // draw circle shaped gamepad
     {
         overlayContext.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
         overlayContext.fill();
@@ -2380,20 +2400,21 @@ function touchGamepadRender()
 }
 /** 
  * LittleJS Audio System
- * <br> - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a>
- * <br> - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a>
- * <br> - Caches sounds and music for fast playback
- * <br> - Can attenuate and apply stereo panning to sounds
- * <br> - Ability to play mp3, ogg, and wave files
- * <br> - Speech synthesis wrapper functions
+ * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - Sound Effect Generator
+ * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - Music System
+ * - Caches sounds and music for fast playback
+ * - Can attenuate and apply stereo panning to sounds
+ * - Ability to play mp3, ogg, and wave files
+ * - Speech synthesis wrapper functions
+ * @namespace Audio
  */
 
 'use strict';
 
 /** 
  * Sound Object - Stores a zzfx sound for later use and can be played positionally
- * <br>
- * <br><b><a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a></b>
+ * 
+ * <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
  * @example
  * // create a sound
  * const sound_example = new Sound([.5,.5]);
@@ -2477,8 +2498,8 @@ class Sound
 
 /**
  * Music Object - Stores a zzfx music track for later use
- * <br>
- * <br><b><a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a></b>
+ * 
+ * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
  * @example
  * // create some music
  * const music_example = new Music(
@@ -2588,14 +2609,15 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
 
 /** Stop all queued speech
  *  @memberof Audio */
-const speakStop = ()=> speechSynthesis && speechSynthesis.cancel();
+function speakStop() {speechSynthesis && speechSynthesis.cancel();}
 
 /** Get frequency of a note on a musical scale
  *  @param {Number} semitoneOffset - How many semitones away from the root note
  *  @param {Number} [rootNoteFrequency=220] - Frequency at semitone offset 0
  *  @return {Number} - The frequency of the note
  *  @memberof Audio */
-const getNoteFrequency = (semitoneOffset, rootFrequency=220)=> rootFrequency * 2**(semitoneOffset/12); 
+function getNoteFrequency(semitoneOffset, rootFrequency=220)
+{ return rootFrequency * 2**(semitoneOffset/12); }
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -2650,15 +2672,15 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// ZzFXMicro - Zuper Zmall Zound Zynth - v1.1.8 by Frank Force
+// ZzFXMicro - Zuper Zmall Zound Zynth - v1.2.0 by Frank Force
 
 /** Generate and play a ZzFX sound
- *  <br>
- *  <br><b><a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a></b>
+ *  
+ *  <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
  *  @param {Array} zzfxSound - Array of ZzFX parameters, ex. [.5,.5]
- *  @return {Array} - Array of audio samples
+ *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-const zzfx = (...zzfxSound) => playSamples([zzfxG(...zzfxSound)]);
+function zzfx(...zzfxSound) { return playSamples([zzfxG(...zzfxSound)]); }
 
 /** Sample rate used for all ZzFX sounds
  *  @default 44100
@@ -2666,7 +2688,29 @@ const zzfx = (...zzfxSound) => playSamples([zzfxG(...zzfxSound)]);
 const zzfxR = 44100; 
 
 /** Generate samples for a ZzFX sound
- *  @memberof Audio */
+ *  @param {Number}  [volume=1] - Volume scale (percent)
+ *  @param {Number}  [randomness=.05] - How much to randomize frequency (percent Hz)
+ *  @param {Number}  [frequency=220] - Frequency of sound (Hz)
+ *  @param {Number}  [attack=0] - Attack time, how fast sound starts (seconds)
+ *  @param {Number}  [sustain=0] - Sustain time, how long sound holds (seconds)
+ *  @param {Number}  [release=.1] - Release time, how fast sound fades out (seconds)
+ *  @param {Number}  [shape=0] - Shape of the sound wave
+ *  @param {Number}  [shapeCurve=1] - Squarenes of wave (0=square, 1=normal, 2=pointy)
+ *  @param {Number}  [slide=0] - How much to slide frequency (kHz/s)
+ *  @param {Number}  [deltaSlide=0] - How much to change slide (kHz/s/s)
+ *  @param {Number}  [pitchJump=0] - Frequency of pitch jump (Hz)
+ *  @param {Number}  [pitchJumpTime=0] - Time of pitch jump (seconds)
+ *  @param {Number}  [repeatTime=0] - Resets some parameters periodically (seconds)
+ *  @param {Number}  [noise=0] - How much random noise to add (percent)
+ *  @param {Number}  [modulation=0] - Frequency of modulation wave, negative flips phase (Hz)
+ *  @param {Number}  [bitCrush=0] - Resamples at a lower frequency in (samples*100)
+ *  @param {Number}  [delay=0] - Overlap sound with itself for reverb and flanger effects (seconds)
+ *  @param {Number}  [sustainVolume=1] - Volume level for sustain (percent)
+ *  @param {Number}  [decay=0] - Decay time, how long to reach sustain after attack (seconds)
+ *  @param {Number}  [tremolo=0] - Trembling effect, rate controlled by repeat time (precent)
+ *  @return {Array} - Array of audio samples
+ *  @memberof Audio
+ */
 function zzfxG
 (
     // parameters
@@ -2676,11 +2720,11 @@ function zzfxG
     bitCrush = 0, delay = 0, sustainVolume = 1, decay = 0, tremolo = 0
 )
 {
-    // init parameters
+    // locals
     let PI2 = PI*2, startSlide = slide *= 500 * PI2 / zzfxR / zzfxR, b=[],
         startFrequency = frequency *= (1 + randomness*rand(-1,1)) * PI2 / zzfxR,
-        t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length;
-        
+        t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length
+
     // scale by sample rate
     attack = attack * zzfxR + 9; // minimum attack to prevent pop
     decay *= zzfxR;
@@ -2730,18 +2774,18 @@ function zzfxG
             Math.cos(modulation*tm++);                    // modulation
         t += f - f*noise*(1 - (Math.sin(i)+1)*1e9%2);     // noise
 
-        if (j && ++j > pitchJumpTime)       // pitch jump
+        if (j && ++j > pitchJumpTime)    // pitch jump
         {
-            frequency += pitchJump;         // apply pitch jump
-            startFrequency += pitchJump;    // also apply to start
-            j = 0;                          // reset pitch jump time
+            frequency += pitchJump;      // apply pitch jump
+            startFrequency += pitchJump; // also apply to start
+            j = 0;                       // reset pitch jump time
         }
 
         if (repeatTime && !(++r % repeatTime)) // repeat
         {
-            frequency = startFrequency;     // reset frequency
-            slide = startSlide;             // reset slide
-            j = j || 1;                     // reset pitch jump time
+            frequency = startFrequency;  // reset frequency
+            slide = startSlide;          // reset slide
+            j ||= 1;                     // reset pitch jump time
         }
     }
     
@@ -2756,7 +2800,7 @@ function zzfxG
  *  @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
+ *  @return {Array} - Left and right channel sample data
  *  @memberof Audio */
 function zzfxM(instruments, patterns, sequence, BPM = 125) 
 {
@@ -2854,13 +2898,13 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
 }
 /** 
  * LittleJS Tile Layer System
- * <br> - Caches arrays of tiles to off screen canvas for fast rendering
- * <br> - Unlimted numbers of layers, allocates canvases as needed
- * <br> - Interfaces with EngineObject for collision
- * <br> - Collision layer is separate from visible layers
- * <br> - It is recommended to have a visible layer that matches the collision
- * <br> - Tile layers can be drawn to using their context with canvas2d
- * <br> - Drawn directly to the main canvas without using WebGL
+ * - Caches arrays of tiles to off screen canvas for fast rendering
+ * - Unlimted numbers of layers, allocates canvases as needed
+ * - Interfaces with EngineObject for collision
+ * - Collision layer is separate from visible layers
+ * - It is recommended to have a visible layer that matches the collision
+ * - Tile layers can be drawn to using their context with canvas2d
+ * - Drawn directly to the main canvas without using WebGL
  * @namespace TileCollision
  */
 
@@ -2891,15 +2935,19 @@ function initTileCollision(size)
  *  @param {Vector2} pos
  *  @param {Number}  [data=0]
  *  @memberof TileCollision */
-const setTileCollisionData = (pos, data=0)=>
+function 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;
+function getTileCollisionData(pos)
+{
+    return pos.arrayCheck(tileCollisionSize) ? tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] : 0;
+}
 
 /** Check if collision with another object should occur
  *  @param {Vector2}      pos
@@ -2993,10 +3041,10 @@ class TileLayerData
 
 /**
  * Tile layer object - cached rendering system for tile layers
- * <br> - Each Tile layer is rendered to an off screen canvas
- * <br> - To allow dynamic modifications, layers are rendered using canvas 2d
- * <br> - Some devices like mobile phones are limited to 4k texture resolution
- * <br> - So with 16x16 tiles this limits layers to 256x256 on mobile devices
+ * - Each Tile layer is rendered to an off screen canvas
+ * - To allow dynamic modifications, layers are rendered using canvas 2d
+ * - Some devices like mobile phones are limited to 4k texture resolution
+ * - So with 16x16 tiles this limits layers to 256x256 on mobile devices
  * @extends EngineObject
  * @example
  * // create tile collision and visible tile layer
@@ -3196,12 +3244,9 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
     drawRect(pos, size, color, angle) 
     { this.drawTile(pos, size, -1, 0, color, angle); }
 }
-/*
-    LittleJS Particle System
-    - Spawns particles with randomness from parameters
-    - Updates particle physics
-    - Fast particle rendering
-*/
+/** 
+ * LittleJS Particle System
+ */
 
 'use strict';
 
@@ -3507,9 +3552,9 @@ class Particle extends EngineObject
 }
 /** 
  * LittleJS Medal System
- * <br> - Tracks and displays medals
- * <br> - Saves medals to local storage
- * <br> - Newgrounds integration
+ * - Tracks and displays medals
+ * - Saves medals to local storage
+ * - Newgrounds integration
  * @namespace Medals
  */
 
@@ -3526,8 +3571,8 @@ let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimeLast;
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Initialize medals with a save name used for storage
- *  <br> - Call this after creating all medals
- *  <br> - Checks if medals are unlocked
+ *  - Call this after creating all medals
+ *  - Checks if medals are unlocked
  *  @param {String} saveName
  *  @memberof Medals */
 function medalsInit(saveName)
@@ -3797,20 +3842,43 @@ class Newgrounds
     CryptoJS()
     {
         ///////////////////////////////////////////////////////////////////////////////
-        // Crypto-JS - https://github.com/brix/crypto-js [The MIT License (MIT)]
-        // Copyright (c) 2009-2013 Jeff Mott  Copyright (c) 2013-2016 Evan Vosberg
-
+        // Crypto-JS - https://github.com/brix/crypto-js - MIT License
+        //
+        // [The MIT License (MIT)](http://opensource.org/licenses/MIT)
+        // 
+        // Copyright (c) 2009-2013 Jeff Mott  
+        // Copyright (c) 2013-2016 Evan Vosberg
+        // 
+        // Permission is hereby granted, free of charge, to any person obtaining a copy
+        // of this software and associated documentation files (the "Software"), to deal
+        // in the Software without restriction, including without limitation the rights
+        // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        // copies of the Software, and to permit persons to whom the Software is
+        // furnished to do so, subject to the following conditions:
+        // 
+        // The above copyright notice and this permission notice shall be included in
+        // all copies or substantial portions of the Software.
+        // 
+        // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+        // THE SOFTWARE.
         return 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));
+        // end of Crypto-JS
+        ///////////////////////////////////////////////////////////////////////////////
     }
 }
 /** 
  * LittleJS WebGL Interface
- * <br> - All webgl used by the engine is wrapped up here
- * <br> - For normal stuff you won't need to see or call anything in this file
- * <br> - For advanced stuff there are helper functions to create shaders, textures, etc
- * <br> - Can be disabled with glEnable to revert to 2D canvas rendering
- * <br> - Batches sprite rendering on GPU for incredibly fast performance
- * <br> - Sprite transform math is done in the shader where possible
+ * - All webgl used by the engine is wrapped up here
+ * - For normal stuff you won't need to see or call anything in this file
+ * - For advanced stuff there are helper functions to create shaders, textures, etc
+ * - 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
  * @namespace WebGL
  */
 
@@ -3885,7 +3953,7 @@ function glSetBlendMode(additive)
 }
 
 /** 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
+ *  - 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)
@@ -3946,7 +4014,7 @@ function glCreateTexture(image)
     image && image.width && glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
         
     // use point filtering for pixelated rendering
-    const filter = cavasPixelated ? gl_NEAREST : gl_LINEAR;
+    const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_S, gl_CLAMP_TO_EDGE);