littlejsengine 1.6.6 → 1.6.92

package/build/littlejs.release.js

@@ -8,7 +8,6 @@
 'use strict';
 
 let showWatermark = 0;
-let godMode = 0;
 let debugKeyCode = 0;
 const debug = 0;
 const debugOverlay = 0;
@@ -30,7 +29,7 @@ function debugLine       (){}
 function debugAABB       (){}
 function debugText       (){}
 function debugClear      (){}
-function debugSaveCanvas (){}
+function debugSaveCanvas (){}
 /**
  * LittleJS Utility Classes and Functions
  * - General purpose math library
@@ -52,34 +51,34 @@ const PI = Math.PI;
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-function abs(a) { return a < 0 ? -a : a; }
+function abs(value) { return Math.abs(value); }
 
 /** Returns lowest of two values passed in
  *  @param {Number} valueA
  *  @param {Number} valueB
  *  @return {Number}
  *  @memberof Utilities */
-function min(a, b) { return a < b ?  a : b; }
+function min(valueA, valueB) { return Math.min(valueA, valueB); }
 
 /** Returns highest of two values passed in
  *  @param {Number} valueA
  *  @param {Number} valueB
  *  @return {Number}
  *  @memberof Utilities */
-function max(a, b) { return a > b ?  a : b; }
+function max(valueA, valueB) { return Math.max(valueA, valueB); }
 
 /** Returns the sign of value passed in (also returns 1 if 0)
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-function sign(a) { return a < 0 ? -1 : 1; }
+function sign(value) { return Math.sign(value); }
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {Number} dividend
  *  @param {Number} [divisor=1]
  *  @return {Number}
  *  @memberof Utilities */
-function mod(a, b=1) { return ((a % b) + b) % b; }
+function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % divisor; }
 
 /** Clamps the value beween max and min
  *  @param {Number} value
@@ -87,8 +86,8 @@ function mod(a, b=1) { return ((a % b) + b) % b; }
  *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-function clamp(v, min=0, max=1)
-{ return v < min ? min : v > max ? max : v; }
+function clamp(value, min=0, max=1)
+{ return value < min ? min : value > max ? max : value; }
 
 /** Returns what percentage the value is between max and min
  *  @param {Number} value
@@ -96,8 +95,8 @@ function clamp(v, min=0, max=1)
  *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-function percent(v, min=0, max=1)
-{ return max-min ? clamp((v-min) / (max-min)) : 0; }
+function percent(value, min=0, max=1)
+{ return max-min ? clamp((value-min) / (max-min)) : 0; }
 
 /** Linearly interpolates the percent value between max and min
  *  @param {Number} percent
@@ -105,29 +104,32 @@ function percent(v, min=0, max=1)
  *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-function lerp(p, min=0, max=1){ return min + clamp(p) * (max-min); }
+function lerp(percent, min=0, max=1){ return min + clamp(percent) * (max-min); }
 
 /** Applies smoothstep function to the percentage value
- *  @param {Number} value
+ *  @param {Number} percent
  *  @return {Number}
  *  @memberof Utilities */
-function smoothStep(p) { return p * p * (3 - 2 * p); }
+function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
 
 /** Returns the nearest power of two not less then the value
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-function nearestPowerOfTwo(v) { return 2**Math.ceil(Math.log2(v)); }
+function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
  *  @param {Vector2} pointA  - Center of box A
  *  @param {Vector2} sizeA   - Size of box A
  *  @param {Vector2} pointB  - Center of box B
- *  @param {Vector2} [sizeB] - Size of box B
+ *  @param {Vector2} sizeB   - Size of box B
  *  @return {Boolean}        - True if overlapping
  *  @memberof Utilities */
-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; }
+function isOverlapping(pointA, sizeA, pointB, sizeB)
+{ 
+    return abs(pointA.x - pointB.x)*2 < sizeA.x + sizeB.x 
+        && abs(pointA.y - pointB.y)*2 < sizeA.y + sizeB.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
@@ -154,14 +156,14 @@ function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
  *  @param {Number} [valueB=0]
  *  @return {Number}
  *  @memberof Random */
-function rand(a=1, b=0) { return b + (a-b)*Math.random(); }
+function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valueB); }
 
 /** Returns a floored random value the two values passed in
  *  @param {Number} [valueA=1]
  *  @param {Number} [valueB=0]
  *  @return {Number}
  *  @memberof Random */
-function randInt(a=1, b=0) { return rand(a,b)|0; }
+function randInt(valueA=1, valueB=0) { return Math.floor(rand(valueA,valueB)); }
 
 /** Randomly returns either -1 or 1
  *  @return {Number}
@@ -188,8 +190,11 @@ function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length
  *  @param {Boolean} [linear]
  *  @return {Color}
  *  @memberof Random */
-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)); }
+function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear)
+{
+    return linear ? colorA.lerp(colorB, rand()) : 
+        new Color(rand(colorA.r,colorB.r), rand(colorA.g,colorB.g), rand(colorA.b,colorB.b), rand(colorA.a,colorB.a));
+}
 
 /** Seed used by the randSeeded function
  *  @type {Number}
@@ -207,13 +212,13 @@ function setRandSeed(seed) { randSeed = seed; }
  *  @param {Number} [valueB=0]
  *  @return {Number}
  *  @memberof Random */
-function randSeeded(a=1, b=0)
+function randSeeded(valueA=1, valueB=0)
 {
     // xorshift algorithm
     randSeed ^= randSeed << 13; 
     randSeed ^= randSeed >>> 17; 
     randSeed ^= randSeed << 5;
-    return b + (a-b) * abs(randSeed % 1e9) / 1e9;
+    return valueB + (valueA-valueB) * abs(randSeed % 1e9) / 1e9;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -235,7 +240,7 @@ function vec2(x=0, y)
 
 /** 
  * Check if object is a valid Vector2
- * @param {Vector2} vector
+ * @param {Vector2} v
  * @return {Boolean}
  * @memberof Utilities
  */
@@ -268,27 +273,27 @@ class Vector2
     copy() { return new Vector2(this.x, this.y); }
 
     /** Returns a copy of this vector plus the vector passed in
-     *  @param {Vector2} vector
+     *  @param {Vector2} v - other vector
      *  @return {Vector2} */
     add(v) { ASSERT(isVector2(v)); 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
+     *  @param {Vector2} v - other vector
      *  @return {Vector2} */
     subtract(v) { ASSERT(isVector2(v)); 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
+     *  @param {Vector2} v - other vector
      *  @return {Vector2} */
     multiply(v) { ASSERT(isVector2(v)); 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
+     *  @param {Vector2} v - other vector
      *  @return {Vector2} */
     divide(v) { ASSERT(isVector2(v)); 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
+     *  @param {Number} s - scale
      *  @return {Vector2} */
     scale(s) { ASSERT(!isVector2(s)); return new Vector2(this.x * s, this.y * s); }
 
@@ -301,12 +306,12 @@ class Vector2
     lengthSquared() { return this.x**2 + this.y**2; }
 
     /** Returns the distance from this vector to vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @return {Number} */
     distance(v) { return this.distanceSquared(v)**.5; }
 
     /** Returns the distance squared from this vector to vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @return {Number} */
     distanceSquared(v) { return (this.x - v.x)**2 + (this.y - v.y)**2; }
 
@@ -321,12 +326,12 @@ class Vector2
     clampLength(length=1) { const l = this.length(); return l > length ? this.scale(length/l) : this; }
 
     /** Returns the dot product of this and the vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @return {Number} */
     dot(v) { ASSERT(isVector2(v)); return this.x*v.x + this.y*v.y; }
 
     /** Returns the cross product of this and the vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @return {Number} */
     cross(v) { ASSERT(isVector2(v)); return this.x*v.y - this.y*v.x; }
 
@@ -338,12 +343,17 @@ class Vector2
      * @param {Number} [angle=0]
      * @param {Number} [length=1]
      * @return {Vector2} */
-    setAngle(a=0, length=1) { this.x = length*Math.sin(a); this.y = length*Math.cos(a); return this; }
+    setAngle(angle=0, length=1) 
+    { this.x = length*Math.sin(angle); this.y = length*Math.cos(angle); 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); }
+    rotate(angle)
+    { 
+        const c = Math.cos(angle), s = Math.sin(angle); 
+        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} */
@@ -362,10 +372,11 @@ class Vector2
     area() { return abs(this.x * this.y); }
 
     /** Returns a new vector that is p percent between this and the vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @param {Number}  percent
      * @return {Vector2} */
-    lerp(v, p) { ASSERT(isVector2(v)); return this.add(v.subtract(this).scale(clamp(p))); }
+    lerp(v, percent)
+    { ASSERT(isVector2(v)); return this.add(v.subtract(this).scale(clamp(percent))); }
 
     /** Returns true if this vector is within the bounds of an array size passed in
      * @param {Vector2} arraySize
@@ -383,10 +394,10 @@ class Vector2
 
 /** 
  * Create a color object with RGBA values
- * @param {Number} [r=1]
- * @param {Number} [g=1]
- * @param {Number} [b=1]
- * @param {Number} [a=1]
+ * @param {Number} [r=1] - red
+ * @param {Number} [g=1] - green
+ * @param {Number} [b=1] - blue
+ * @param {Number} [a=1] - alpha
  * @return {Color}
  * @memberof Utilities
  */
@@ -394,10 +405,10 @@ function rgb(r, g, b, a) { return new Color(r, g, b, a); }
 
 /** 
  * Create a color object with HSLA values
- * @param {Number} [h=0]
- * @param {Number} [s=0]
- * @param {Number} [l=1]
- * @param {Number} [a=1]
+ * @param {Number} [h=0] - hue
+ * @param {Number} [s=0] - saturation
+ * @param {Number} [l=1] - lightness
+ * @param {Number} [a=1] - alpha
  * @return {Color}
  * @memberof Utilities
  */
@@ -414,11 +425,11 @@ function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
  */
 class Color
 {
-    /** 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] */
+    /** Create a color with the rgba components passed in, white by default
+     *  @param {Number} [r=1] - red
+     *  @param {Number} [g=1] - green
+     *  @param {Number} [b=1] - blue
+     *  @param {Number} [a=1] - alpha*/
     constructor(r=1, g=1, b=1, a=1)
     {
         /** @property {Number} - Red */
@@ -436,22 +447,22 @@ class Color
     copy() { return new Color(this.r, this.g, this.b, this.a); }
 
     /** Returns a copy of this color plus the color passed in
-     * @param {Color} color
+     * @param {Color} c - other 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
+     * @param {Color} c - other 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
+     * @param {Color} c - other color
      * @return {Color} */
     multiply(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 divided by the color passed in
-     * @param {Color} color
+     * @param {Color} c - other color
      * @return {Color} */
     divide(c) { return new Color(this.r/c.r, this.g/c.g, this.b/c.b, this.a/c.a); }
 
@@ -459,23 +470,24 @@ class Color
      * @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); }
+    scale(scale, alphaScale=scale) 
+    { return new Color(this.r*scale, this.g*scale, this.b*scale, this.a*alphaScale); }
 
     /** 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 {Color}  c - other color
      * @param {Number} percent
      * @return {Color} */
-    lerp(c, p) { return this.add(c.subtract(this).scale(clamp(p))); }
+    lerp(c, percent) { return this.add(c.subtract(this).scale(clamp(percent))); }
 
     /** 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]
+     * @param {Number} [h=0] - hue
+     * @param {Number} [s=0] - saturation
+     * @param {Number} [l=1] - lightness
+     * @param {Number} [a=1] - alpha
      * @return {Color} */
     setHSLA(h=0, s=0, l=1, a=1)
     {
@@ -616,12 +628,12 @@ class Timer
     
     /** Returns this timer expressed as a string
      * @return {String} */
-    toString() { if (debug) { return this.unset() ? 'unset' : Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ); }}
+    toString() { if (debug) { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }}
     
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {Number} */
     valueOf()               { return this.get(); }
-}
+}
 /**
  * LittleJS Engine Settings
  * @namespace Settings
@@ -870,772 +882,456 @@ let medalDisplayIconSize = 50;
  *  @type {Boolean}
  *  @default 0
  *  @memberof Settings */
-let medalsPreventUnlock;
+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!
- * @namespace Engine
+ * LittleJS Object System
  */
 
 'use strict';
 
-/** Name of engine
- *  @type {String}
- *  @default
- *  @memberof Engine */
-const engineName = 'LittleJS';
-
-/** Version of engine
- *  @type {String}
- *  @default
- *  @memberof Engine */
-const engineVersion = '1.6.6';
-
-/** Frames per second to update objects
- *  @type {Number}
- *  @default
- *  @memberof Engine */
-const frameRate = 60;
+/** 
+ * LittleJS Object Base Object 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
+ *
+ * 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);
+ * const object = new EngineObject(pos); 
+ */
+class EngineObject
+{
+    /** Create an engine object and adds it to the list of objects
+     *  @param {Vector2} [position=Vector2()]        - World space position of the object
+     *  @param {Vector2} [size=Vector2(1,1)]         - World space size of the object
+     *  @param {Number}  [tileIndex=-1]              - Tile to use to render object (-1 is untextured)
+     *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
+     *  @param {Number}  [angle=0]                   - Angle the object is rotated by
+     *  @param {Color}   [color=Color()]             - Color to apply to tile when rendered
+     *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
+     */
+    constructor(pos=vec2(), size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, angle=0, color, renderOrder=0)
+    {
+        // set passed in params
+        ASSERT(isVector2(pos) && isVector2(size)); // ensure pos and size are vec2s
 
-/** How many seconds each frame lasts, engine uses a fixed time step
- *  @type {Number}
- *  @default 1/60
- *  @memberof Engine */
-const timeDelta = 1/frameRate;
+        /** @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 (-1 is untextured) */
+        this.tileIndex = tileIndex;
+        /** @property {Vector2} - Size of tile in source pixels */
+        this.tileSize = tileSize;
+        /** @property {Number}  - Angle to rotate the object */
+        this.angle = angle;
+        /** @property {Color}   - Color to apply when rendered */
+        this.color = color;
+        /** @property {Color}   - Additive color to apply when rendered */
+        this.additiveColor;
 
-/** Array containing all engine objects
- *  @type {Array}
- *  @memberof Engine */
-let engineObjects = [];
+        // set object defaults
+        /** @property {Number} [mass=objectDefaultMass]                 - How heavy the object is, static if 0 */
+        this.mass         = objectDefaultMass;
+        /** @property {Number} [damping=objectDefaultDamping]           - How much to slow down velocity each frame (0-1) */
+        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;
+        /** @property {Vector2} [velocity=Vector2()]                    - Velocity of the object */
+        this.velocity = vec2();
+        /** @property {Number} [angleVelocity=0]                        - Angular velocity of the object */
+        this.angleVelocity = 0;
 
-/** Array containing only objects that are set to collide with other objects this frame (for optimization)
- *  @type {Array}
- *  @memberof Engine */
-let engineObjectsCollide = [];
+        // init other internal object stuff
+        this.spawnTime = time;
+        this.children = [];
+        this.collideTiles = 1;
 
-/** Current update frame, used to calculate time
- *  @type {Number}
- *  @memberof Engine */
-let frame = 0;
+        // 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;
+        if (parent)
+        {
+            // copy parent pos/angle
+            this.pos = this.localPos.multiply(vec2(parent.getMirrorSign(),1)).rotate(-parent.angle).add(parent.pos);
+            this.angle = parent.getMirrorSign()*this.localAngle + parent.angle;
+            return;
+        }
 
-/** Current engine time since start in seconds, derived from frame
- *  @type {Number}
- *  @memberof Engine */
-let time = 0;
+        // limit max speed to prevent missing collisions
+        this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
+        this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
 
-/** Actual clock time since start in seconds (not affected by pause or frame rate clamping)
- *  @type {Number}
- *  @memberof Engine */
-let timeReal = 0;
+        // apply physics
+        const oldPos = this.pos.copy();
+        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;
 
-/** Is the game paused? Causes time and objects to not be updated
- *  @type {Boolean}
- *  @default 0
- *  @memberof Engine */
-let paused = 0;
+        // physics sanity checks
+        ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
+        ASSERT(this.damping >= 0 && this.damping <= 1);
 
-/** Set if game is paused
- *  @param {Boolean} paused
- *  @memberof Engine */
-function setPaused(_paused) { paused = _paused; }
+        if (!enablePhysicsSolver || !this.mass) // do not update collision for fixed objects
+            return;
 
-///////////////////////////////////////////////////////////////////////////////
+        const wasMovingDown = this.velocity.y < 0;
+        if (this.groundObject)
+        {
+            // apply friction in local space of ground object
+            const groundSpeed = this.groundObject.velocity ? this.groundObject.velocity.x : 0;
+            this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * this.friction;
+            this.groundObject = 0;
+            //debugOverlay && debugPhysics && debugPoint(this.pos.subtract(vec2(0,this.size.y/2)), '#0f0');
+        }
 
-/** 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
- *  @memberof Engine */
-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
-        tileImageFixBleed = vec2(tileFixBleedScale).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
-        debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
+        if (this.collideSolidObjects)
+        {
+            // check collisions against solid objects
+            const epsilon = .001; // necessary to push slightly outside of the collision
+            for (const o of engineObjectsCollide)
+            {
+                // non solid objects don't collide with eachother
+                if (!this.isSolid && !o.isSolid || o.destroyed || o.parent || o == this)
+                    continue;
 
-        // setup html
-        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');
+                // check collision
+                if (!isOverlapping(this.pos, this.size, o.pos, o.size))
+                    continue;
 
-        // init stuff and start engine
-        debugInit();
-        glEnable && glInit();
+                // notify objects of collision and check if should be resolved
+                const collide1 = this.collideWithObject(o);
+                const collide2 = o.collideWithObject(this);
+                if (!collide1 || !collide2)
+                    continue;
 
-        // create overlay canvas for hud to appear above gl canvas
-        document.body.appendChild(overlayCanvas = document.createElement('canvas'));
-        overlayContext = overlayCanvas.getContext('2d');
+                if (isOverlapping(oldPos, this.size, o.pos, o.size))
+                {
+                    // if already was touching, try to push away
+                    const deltaPos = oldPos.subtract(o.pos);
+                    const length = deltaPos.length();
+                    const pushAwayAccel = .001; // push away if already overlapping
+                    const velocity = length < .01 ? randVector(pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
+                    this.velocity = this.velocity.add(velocity);
+                    if (o.mass) // push away if not fixed
+                        o.velocity = o.velocity.subtract(velocity);
+                        
+                    debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f00');
+                    continue;
+                }
 
-        // 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();
-        engineUpdate();
-    };
+                // check for collision
+                const sizeBoth = this.size.add(o.size);
+                const smallStepUp = (oldPos.y - o.pos.y)*2 > sizeBoth.y + gravity; // prefer to push up if small delta
+                const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
+                const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
+                const elasticity = max(this.elasticity, o.elasticity);
+                
+                if (smallStepUp || isBlockedY || !isBlockedX) // resolve y collision
+                {
+                    // push outside object collision
+                    this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
+                    if (o.groundObject && wasMovingDown || !o.mass)
+                    {
+                        // set ground object if landed on something
+                        if (wasMovingDown)
+                            this.groundObject = o;
 
-    // frame time tracking
-    let frameTimeLastMS = 0, frameTimeBufferMS, averageFPS;
+                        // bounce if other object is fixed or grounded
+                        this.velocity.y *= -elasticity;
+                    }
+                    else if (o.mass)
+                    {
+                        // inelastic collision
+                        const inelastic = (this.mass * this.velocity.y + o.mass * o.velocity.y) / (this.mass + o.mass);
 
-    // main update loop
-    function engineUpdate(frameTimeMS=0)
-    {
-        // update time keeping
-        let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
-        frameTimeLastMS = frameTimeMS;
-        if (debug || showWatermark)
-            averageFPS = lerp(.05, averageFPS, 1e3/(frameTimeDeltaMS||1));
-        const debugSpeedUp   = debug && keyIsDown(107); // +
-        const debugSpeedDown = debug && keyIsDown(109); // -
-        if (debug) // +/- to speed/slow time
-            frameTimeDeltaMS *= debugSpeedUp ? 5 : debugSpeedDown ? .2 : 1;
-        timeReal += frameTimeDeltaMS / 1e3;
-        frameTimeBufferMS += !paused * frameTimeDeltaMS;
-        if (!debugSpeedUp)
-            frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp incase of slow framerate
+                        // elastic collision
+                        const elastic0 = this.velocity.y * (this.mass - o.mass) / (this.mass + o.mass)
+                            + o.velocity.y * 2 * o.mass / (this.mass + o.mass);
+                        const elastic1 = o.velocity.y * (o.mass - this.mass) / (this.mass + o.mass)
+                            + this.velocity.y * 2 * this.mass / (this.mass + o.mass);
 
-        if (canvasFixedSize.x)
-        {
-            // clear canvas and set fixed size
-            mainCanvas.width  = canvasFixedSize.x;
-            mainCanvas.height = canvasFixedSize.y;
-            
-            // fit to window by adding space on top or bottom if necessary
-            const aspect = innerWidth / innerHeight;
-            const fixedAspect = mainCanvas.width / mainCanvas.height;
-            (glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-            (glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
-        }
-        else
-        {
-             // clear canvas and set size to same as window
-             mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
-             mainCanvas.height = min(innerHeight, canvasMaxSize.y);
-        }
-        
-        // clear overlay canvas and set size
-        overlayCanvas.width  = mainCanvas.width;
-        overlayCanvas.height = mainCanvas.height;
+                        // lerp betwen elastic or inelastic based on elasticity
+                        this.velocity.y = lerp(elasticity, inelastic, elastic0);
+                        o.velocity.y = lerp(elasticity, inelastic, elastic1);
+                    }
+                }
+                if (!smallStepUp && isBlockedX) // resolve x collision
+                {
+                    // push outside collision
+                    this.pos.x = o.pos.x + (sizeBoth.x/2 + epsilon) * sign(oldPos.x - o.pos.x);
+                    if (o.mass)
+                    {
+                        // inelastic collision
+                        const inelastic = (this.mass * this.velocity.x + o.mass * o.velocity.x) / (this.mass + o.mass);
 
-        // save canvas size
-        mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+                        // elastic collision
+                        const elastic0 = this.velocity.x * (this.mass - o.mass) / (this.mass + o.mass)
+                            + o.velocity.x * 2 * o.mass / (this.mass + o.mass);
+                        const elastic1 = o.velocity.x * (o.mass - this.mass) / (this.mass + o.mass)
+                            + this.velocity.x * 2 * this.mass / (this.mass + o.mass);
 
-        if (paused)
-        {
-            // do post update even when paused
-            inputUpdate();
-            debugUpdate();
-            gameUpdatePost();
-            inputUpdatePost();
+                        // lerp betwen elastic or inelastic based on 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 *= -elasticity;
+                }
+                debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
+            }
         }
-        else
+        if (this.collideTiles)
         {
-            // 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 / frameRate)
+            // check collision against tiles
+            if (tileCollisionTest(this.pos, this.size, this))
             {
-                // update game and objects
-                inputUpdate();
-                gameUpdate();
-                engineObjectsUpdate();
+                // 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))
+                {
+                    // test which side we bounced off (or both if a corner)
+                    const isBlockedY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
+                    const isBlockedX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
+                    if (isBlockedY || !isBlockedX)
+                    {
+                        // set if landed on ground
+                        this.groundObject = wasMovingDown;
 
-                // do post update
-                debugUpdate();
-                gameUpdatePost();
-                inputUpdatePost();
-            }
+                        // bounce velocity
+                        this.velocity.y *= -this.elasticity;
 
-            // add the time smoothing back in
-            frameTimeBufferMS += deltaSmooth;
-        }
-        
-        // render sort then render while removing destroyed objects
-        enginePreRender();
-        gameRender();
-        engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
-        for (const o of engineObjects)
-            o.destroyed || o.render();
-        gameRenderPost();
-        glRenderPostProcess();
-        medalsRender();
-        touchGamepadRender();
-        debugRender();
-        glEnable && glCopyToContext(mainContext);
+                        // 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 > this.damping * this.velocity.y + gravity * this.gravityScale) 
+                            this.velocity.y = this.damping ? (o - gravity * this.gravityScale) / this.damping : 0;
 
-        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 + ' / ' + averageFPS.toFixed(1)
-                + (glEnable ? ' GL' : ' 2D') ;
-            overlayContext.fillText(text, mainCanvas.width-3, 3);
-            overlayContext.fillStyle = '#fff';
-            overlayContext.fillText(text, mainCanvas.width-2, 2);
-            drawCount = 0;
+                        // move to previous position
+                        this.pos.y = oldPos.y;
+                    }
+                    if (isBlockedX)
+                    {
+                        // move to previous position and bounce
+                        this.pos.x = oldPos.x;
+                        this.velocity.x *= -this.elasticity;
+                    }
+                }
+            }
         }
-
-        requestAnimationFrame(engineUpdate);
     }
+       
+    /** 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)
+            return;
+        
+        // disconnect from parent and destroy chidren
+        this.destroyed = 1;
+        this.parent && this.parent.removeChild(this);
+        for (const child of this.children)
+            child.destroy(child.parent = 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; }
 
-    // set tile image source to load the image and start the engine
-    tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
-}
-
-// Called automatically by engine to setup render system
-function enginePreRender()
-{
-    // save canvas size
-    mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+    /** Called to check if a object collision should be resolved
+     *  @param {EngineObject} object - the object to test against
+     *  @return {Boolean}            - true if the collision should be resolved
+     */
+    collideWithObject(object)         { return 1; }
 
-    // disable smoothing for pixel art
-    mainContext.imageSmoothingEnabled = !canvasPixelated;
+    /** How long since the object was created
+     *  @return {Number} */
+    getAliveTime()                    { return time - this.spawnTime; }
 
-    // setup gl rendering if enabled
-    glEnable && glPreRender();
-}
+    /** Apply acceleration to this object (adjust velocity, not affected by mass)
+     *  @param {Vector2} acceleration */
+    applyAcceleration(acceleration)   { if (this.mass) this.velocity = this.velocity.add(acceleration); }
 
-/** Update each engine object, remove destroyed objects, and update time
- *  @memberof Engine */
-function engineObjectsUpdate()
-{
-    // get list of solid objects for physics optimzation
-    engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
+    /** 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; }
 
-    // recursive object update
-    function updateObject(o)
-    {
-        if (!o.destroyed)
-        {
-            o.update();
-            for (const child of o.children)
-                updateObject(child);
-        }
+    /** Attaches a child to this with a given local transform
+     *  @param {EngineObject} child
+     *  @param {Vector2}      [localPos=Vector2()]
+     *  @param {Number}       [localAngle=0] */
+    addChild(child, localPos=vec2(), localAngle=0)
+    {
+        ASSERT(!child.parent && !this.children.includes(child));
+        this.children.push(child);
+        child.parent = this;
+        child.localPos = localPos.copy();
+        child.localAngle = localAngle;
     }
-    for (const o of engineObjects)
-        o.parent || updateObject(o);
-
-    // remove destroyed objects
-    engineObjects = engineObjects.filter(o=>!o.destroyed);
-
-    // increment frame and update time
-    time = ++frame / frameRate;
-}
-
-/** Destroy and remove all objects
- *  @memberof Engine */
-function engineObjectsDestroy()
-{
-    for (const o of engineObjects)
-        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
- *  @memberof Engine */
-function engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)
-{
-    if (!pos) // all objects
+    /** Removes a child from this one
+     *  @param {EngineObject} child */
+    removeChild(child)
     {
-        for (const o of objects)
-            callbackFunction(o);
+        ASSERT(child.parent == this && this.children.includes(child));
+        this.children.splice(this.children.indexOf(child), 1);
+        child.parent = 0;
     }
-    else if (size.x != undefined)  // bounding box test
+
+    /** Set how this object collides
+     *  @param {Boolean} [collideSolidObjects=1] - Does it collide with solid objects
+     *  @param {Boolean} [isSolid=1]             - Does it collide with and block other objects (expensive in large numbers)
+     *  @param {Boolean} [collideTiles=1]        - Does it collide with the tile collision */
+    setCollision(collideSolidObjects=1, isSolid=1, collideTiles=1)
     {
-        for (const o of objects)
-            isOverlapping(pos, size, o.pos, o.size) && callbackFunction(o);
+        ASSERT(collideSolidObjects || !isSolid); // solid objects must be set to collide
+
+        this.collideSolidObjects = collideSolidObjects;
+        this.isSolid = isSolid;
+        this.collideTiles = collideTiles;
     }
-    else  // circle test
+
+    /** Returns string containg info about this object for debugging
+     *  @return {String} */
+    toString()
     {
-        const sizeSquared = size*size;
-        for (const o of objects)
-            pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
+        if (debug)
+        {
+            let text = 'type = ' + this.constructor.name;
+            if (this.pos.x || this.pos.y)
+                text += '\npos = ' + this.pos;
+            if (this.velocity.x || this.velocity.y)
+                text += '\nvelocity = ' + this.velocity;
+            if (this.size.x || this.size.y)
+                text += '\nsize = ' + this.size;
+            if (this.angle)
+                text += '\nangle = ' + this.angle.toFixed(3);
+            if (this.color)
+                text += '\ncolor = ' + this.color;
+            return text;
+        }
     }
-}
+}
 /** 
- * LittleJS Object System
+ * LittleJS Drawing System
+ * - 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
  */
 
 'use strict';
 
-/** 
- * LittleJS Object Base Object 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
- *
- * 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);
- * const object = new EngineObject(pos); 
- */
-class EngineObject
-{
-    /** Create an engine object and adds it to the list of objects
-     *  @param {Vector2} [position=Vector2()]        - World space position of the object
-     *  @param {Vector2} [size=Vector2(1,1)]         - World space size of the object
-     *  @param {Number}  [tileIndex=-1]              - Tile to use to render object (-1 is untextured)
-     *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
-     *  @param {Number}  [angle=0]                   - Angle the object is rotated by
-     *  @param {Color}   [color=Color()]             - Color to apply to tile when rendered
-     *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
-     */
-    constructor(pos=vec2(), size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, angle=0, color, renderOrder=0)
-    {
-        // set passed in params
-        ASSERT(isVector2(pos) && isVector2(size)); // 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 (-1 is untextured) */
-        this.tileIndex = tileIndex;
-        /** @property {Vector2} - Size of tile in source pixels */
-        this.tileSize = tileSize;
-        /** @property {Number}  - Angle to rotate the object */
-        this.angle = angle;
-        /** @property {Color}   - Color to apply when rendered */
-        this.color = color;
-        /** @property {Color}   - Additive color to apply when rendered */
-        this.additiveColor;
+/** The primary 2D canvas visible to the user
+ *  @type {HTMLCanvasElement}
+ *  @memberof Draw */
+let mainCanvas;
 
-        // set object defaults
-        /** @property {Number} [mass=objectDefaultMass]                 - How heavy the object is, static if 0 */
-        this.mass         = objectDefaultMass;
-        /** @property {Number} [damping=objectDefaultDamping]           - How much to slow down velocity each frame (0-1) */
-        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;
-        /** @property {Vector2} [velocity=Vector2()]                    - Velocity of the object */
-        this.velocity = new Vector2();
-        /** @property {Number} [angleVelocity=0]                        - Angular velocity of the object */
-        this.angleVelocity = 0;
+/** 2d context for mainCanvas
+ *  @type {CanvasRenderingContext2D}
+ *  @memberof Draw */
+let mainContext;
 
-        // init other internal object stuff
-        this.spawnTime = time;
-        this.children = [];
-        this.collideTiles = 1;
+/** A canvas that appears on top of everything the same size as mainCanvas
+ *  @type {HTMLCanvasElement}
+ *  @memberof Draw */
+let overlayCanvas;
 
-        // 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;
-        if (parent)
-        {
-            // copy parent pos/angle
-            this.pos = this.localPos.multiply(vec2(parent.getMirrorSign(),1)).rotate(-parent.angle).add(parent.pos);
-            this.angle = parent.getMirrorSign()*this.localAngle + parent.angle;
-            return;
-        }
+/** 2d context for overlayCanvas
+ *  @type {CanvasRenderingContext2D}
+ *  @memberof Draw */
+let overlayContext;
 
-        // limit max speed to prevent missing collisions
-        this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
-        this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
+/** The size of the main canvas (and other secondary canvases) 
+ *  @type {Vector2}
+ *  @memberof Draw */
+let mainCanvasSize = vec2();
 
-        // apply physics
-        const oldPos = this.pos.copy();
-        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;
+/** Tile sheet for batch rendering system
+ *  @type {CanvasImageSource}
+ *  @memberof Draw */
+const tileImage = new Image;
 
-        // physics sanity checks
-        ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
-        ASSERT(this.damping >= 0 && this.damping <= 1);
+// Engine internal variables not exposed to documentation
+let tileImageSize, tileImageFixBleed, drawCount;
 
-        if (!enablePhysicsSolver || !this.mass) // do not update collision for fixed objects
-            return;
-
-        const wasMovingDown = this.velocity.y < 0;
-        if (this.groundObject)
-        {
-            // apply friction in local space of ground object
-            const groundSpeed = this.groundObject.velocity ? this.groundObject.velocity.x : 0;
-            this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * this.friction;
-            this.groundObject = 0;
-            //debugOverlay && debugPhysics && debugPoint(this.pos.subtract(vec2(0,this.size.y/2)), '#0f0');
-        }
-
-        if (this.collideSolidObjects)
-        {
-            // check collisions against solid objects
-            const epsilon = .001; // necessary to push slightly outside of the collision
-            for (const o of engineObjectsCollide)
-            {
-                // non solid objects don't collide with eachother
-                if (!this.isSolid & !o.isSolid || o.destroyed || o.parent || o == this)
-                    continue;
-
-                // check collision
-                if (!isOverlapping(this.pos, this.size, o.pos, o.size))
-                    continue;
-
-                // pass collision to objects
-                if (!this.collideWithObject(o) | !o.collideWithObject(this))
-                    continue;
-
-                if (isOverlapping(oldPos, this.size, o.pos, o.size))
-                {
-                    // if already was touching, try to push away
-                    const deltaPos = oldPos.subtract(o.pos);
-                    const length = deltaPos.length();
-                    const pushAwayAccel = .001; // push away if already overlapping
-                    const velocity = length < .01 ? randVector(pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
-                    this.velocity = this.velocity.add(velocity);
-                    if (o.mass) // push away if not fixed
-                        o.velocity = o.velocity.subtract(velocity);
-                        
-                    debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f00');
-                    continue;
-                }
-
-                // check for collision
-                const sizeBoth = this.size.add(o.size);
-                const smallStepUp = (oldPos.y - o.pos.y)*2 > sizeBoth.y + gravity; // prefer to push up if small delta
-                const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
-                const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
-                const elasticity = max(this.elasticity, o.elasticity);
-                
-                if (smallStepUp | isBlockedY | !isBlockedX) // resolve y collision
-                {
-                    // push outside object collision
-                    this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
-                    if (o.groundObject && wasMovingDown || !o.mass)
-                    {
-                        // set ground object if landed on something
-                        if (wasMovingDown)
-                            this.groundObject = o;
-
-                        // bounce if other object is fixed or grounded
-                        this.velocity.y *= -elasticity;
-                    }
-                    else if (o.mass)
-                    {
-                        // inelastic collision
-                        const inelastic = (this.mass * this.velocity.y + o.mass * o.velocity.y) / (this.mass + o.mass);
-
-                        // elastic collision
-                        const elastic0 = this.velocity.y * (this.mass - o.mass) / (this.mass + o.mass)
-                            + o.velocity.y * 2 * o.mass / (this.mass + o.mass);
-                        const elastic1 = o.velocity.y * (o.mass - this.mass) / (this.mass + o.mass)
-                            + this.velocity.y * 2 * this.mass / (this.mass + o.mass);
-
-                        // lerp betwen elastic or inelastic based on elasticity
-                        this.velocity.y = lerp(elasticity, inelastic, elastic0);
-                        o.velocity.y = lerp(elasticity, inelastic, elastic1);
-                    }
-                }
-                if (!smallStepUp & isBlockedX) // resolve x collision
-                {
-                    // push outside collision
-                    this.pos.x = o.pos.x + (sizeBoth.x/2 + epsilon) * sign(oldPos.x - o.pos.x);
-                    if (o.mass)
-                    {
-                        // inelastic collision
-                        const inelastic = (this.mass * this.velocity.x + o.mass * o.velocity.x) / (this.mass + o.mass);
-
-                        // elastic collision
-                        const elastic0 = this.velocity.x * (this.mass - o.mass) / (this.mass + o.mass)
-                            + o.velocity.x * 2 * o.mass / (this.mass + o.mass);
-                        const elastic1 = o.velocity.x * (o.mass - this.mass) / (this.mass + o.mass)
-                            + this.velocity.x * 2 * this.mass / (this.mass + o.mass);
-
-                        // lerp betwen elastic or inelastic based on 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 *= -elasticity;
-                }
-                debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
-            }
-        }
-        if (this.collideTiles)
-        {
-            // check collision against tiles
-            if (tileCollisionTest(this.pos, this.size, this))
-            {
-                // 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))
-                {
-                    // test which side we bounced off (or both if a corner)
-                    const isBlockedY = tileCollisionTest(new Vector2(oldPos.x, this.pos.y), this.size, this);
-                    const isBlockedX = tileCollisionTest(new Vector2(this.pos.x, oldPos.y), this.size, this);
-                    if (isBlockedY | !isBlockedX)
-                    {
-                        // set if landed on ground
-                        this.groundObject = wasMovingDown;
-
-                        // 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 > 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)
-                    {
-                        // move to previous position and bounce
-                        this.pos.x = oldPos.x;
-                        this.velocity.x *= -this.elasticity;
-                    }
-                }
-            }
-        }
-    }
-       
-    /** 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)
-            return;
-        
-        // disconnect from parent and destroy chidren
-        this.destroyed = 1;
-        this.parent && this.parent.removeChild(this);
-        for (const child of this.children)
-            child.destroy(child.parent = 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 object collision should be resolved
-     *  @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; }
-
-    /** 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=Vector2()]
-     *  @param {Number}       [localAngle=0] */
-    addChild(child, localPos=vec2(), localAngle=0)
-    {
-        ASSERT(!child.parent && !this.children.includes(child));
-        this.children.push(child);
-        child.parent = this;
-        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));
-        this.children.splice(this.children.indexOf(child), 1);
-        child.parent = 0;
-    }
-
-    /** Set how this object collides
-     *  @param {Boolean} [collideSolidObjects=1] - Does it collide with solid objects
-     *  @param {Boolean} [isSolid=1]             - Does it collide with and block other objects (expensive in large numbers)
-     *  @param {Boolean} [collideTiles=1]        - Does it collide with the tile collision */
-    setCollision(collideSolidObjects=1, isSolid=1, collideTiles=1)
-    {
-        ASSERT(collideSolidObjects || !isSolid); // solid objects must be set to collide
-
-        this.collideSolidObjects = collideSolidObjects;
-        this.isSolid = isSolid;
-        this.collideTiles = collideTiles;
-    }
-
-    /** Returns string containg info about this object for debugging
-     *  @return {String} */
-    toString()
-    {
-        if (debug)
-        {
-            let text = 'type = ' + this.constructor.name;
-            if (this.pos.x || this.pos.y)
-                text += '\npos = ' + this.pos;
-            if (this.velocity.x || this.velocity.y)
-                text += '\nvelocity = ' + this.velocity;
-            if (this.size.x || this.size.y)
-                text += '\nsize = ' + this.size;
-            if (this.angle)
-                text += '\nangle = ' + this.angle.toFixed(3);
-            if (this.color)
-                text += '\ncolor = ' + this.color;
-            return text;
-        }
-    }
-}
-/** 
- * LittleJS Drawing System
- * - 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
- */
-
-'use strict';
-
-/** 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();
-
-/** Tile sheet for batch rendering system
- *  @type {CanvasImageSource}
- *  @memberof Draw */
-const tileImage = new Image;
-
-// Engine internal variables not exposed to documentation
-let tileImageSize, tileImageFixBleed, drawCount;
-
-/** Convert from screen to world space coordinates
- *  - if calling outside of render, you may need to manually set mainCanvasSize
- *  @param {Vector2} screenPos
- *  @return {Vector2}
- *  @memberof Draw */
-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);
-}
+/** Convert from screen to world space coordinates
+ *  - if calling outside of render, you may need to manually set mainCanvasSize
+ *  @param {Vector2} screenPos
+ *  @return {Vector2}
+ *  @memberof Draw */
+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);
+}
 
 /** Convert from world to screen space coordinates
  *  - if calling outside of render, you may need to manually set mainCanvasSize
@@ -1645,7 +1341,11 @@ function screenToWorld(screenPos)
 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));
+    return worldPos
+        .subtract(cameraPos)
+        .multiply(vec2(cameraScale,-cameraScale))
+        .add(mainCanvasSize.scale(.5))
+        .subtract(vec2(.5));
 }
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
@@ -1659,8 +1359,8 @@ function worldToScreen(worldPos)
  *  @param {Color}   [additiveColor=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)
+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 && useWebGL)
@@ -1953,7 +1653,7 @@ function toggleFullscreen()
     else if (document.body.requestFullscreen)
             document.body.requestFullscreen();
 }
-
+
 /** 
  * LittleJS Input System
  * - Tracks key down, pressed, and released
@@ -2387,7 +2087,7 @@ function touchGamepadRender()
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)
     {
-        const pos = rightCenter.add((new Vector2).setAngle(i*PI/2, touchGamepadSize/2));
+        const pos = rightCenter.add(vec2().setAngle(i*PI/2, touchGamepadSize/2));
         overlayContext.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
         overlayContext.beginPath();
         overlayContext.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);
@@ -2397,7 +2097,7 @@ function touchGamepadRender()
 
     // set canvas back to normal
     overlayContext.restore();
-}
+}
 /** 
  * LittleJS Audio System
  * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - Sound Effect Generator
@@ -2838,7 +2538,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
       patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
 
       // check if there are more channels
-      hasMore |= !!patterns[patternIndex][channelIndex];
+      hasMore ||= !!patterns[patternIndex][channelIndex];
 
       // get next offset, use the length of first channel
       nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - !notFirstBeat) * beatLength;
@@ -2851,7 +2551,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
 
         // stop if end, different instrument or new note
         stop = i == patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
-            instrument != (patternChannel[0] || 0) | note | 0;
+            instrument != (patternChannel[0] || 0) || note;
 
         // fill buffer with samples for previous beat, most cpu intensive part
         for (j = 0; j < beatLength && notFirstBeat;
@@ -2895,7 +2595,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
   }
 
   return [leftChannelBuffer, rightChannelBuffer];
-}
+}
 /** 
  * LittleJS Tile Layer System
  * - Caches arrays of tiles to off screen canvas for fast rendering
@@ -2965,1303 +2665,1638 @@ function tileCollisionTest(pos, size=vec2(), object)
     for (let x = minX; x < maxX; ++x)
     {
         const tileData = tileCollision[y*tileCollisionSize.x+x];
-        if (tileData && (!object || object.collideWithTile(tileData, new Vector2(x, y))))
+        if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
             return 1;
     }
-}
-
-/** 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
-    // todo: a way to get the exact hit point, it must still register as inside the hit tile
-    const posDelta = (posEnd = posEnd.floor()).subtract(posStart = posStart.floor());
-    const dx = abs(posDelta.x),  dy = -abs(posDelta.y);
-    const sx = sign(posDelta.x), sy = sign(posDelta.y);
+}
+
+/** Return the center of tile if any that is hit (does not return the exact intersection)
+ *  @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
+    // todo: a way to get the exact hit point, it must still be inside the hit tile
+    const delta = posEnd.subtract(posStart);
+    const totalLength = delta.length();
+    const normalizedDelta = delta.normalize();
+    const unit = vec2(abs(1/normalizedDelta.x), abs(1/normalizedDelta.y));
+    const flooredPosStart = posStart.floor();
+
+    // setup iteration variables
+    let pos = flooredPosStart;
+    let xi = unit.x * (delta.x < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1);
+    let yi = unit.y * (delta.y < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1);
+
+    while (1)
+    {
+        // check for tile collision
+        const tileData = getTileCollisionData(pos);
+        if (tileData && (!object || object.collideWithTile(tileData, pos)))
+        {
+            debugRaycast && debugLine(posStart, posEnd, '#f00', .02);
+            debugRaycast && debugPoint(pos.add(vec2(.5)), '#ff0');
+            return pos.add(vec2(.5));
+        }
+
+        // check if past the end
+        if (xi > totalLength && yi > totalLength)
+            break;
+
+        // get coordinates of the next tile to check
+        if (xi > yi)
+            pos.y += sign(delta.y), yi += unit.y;
+        else
+            pos.x += sign(delta.x), xi += unit.x;
+    }
+
+    debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Tile Layer Rendering System
+
+/**
+ * Tile layer data object stores info about how to render a tile
+ * @example
+ * // create tile layer data with tile index 0 and random orientation and color
+ * const tileIndex = 0;
+ * const direction = randInt(4)
+ * const mirror = randInt(2);
+ * const color = randColor();
+ * const data = new TileLayerData(tileIndex, direction, mirror, color);
+ */
+class TileLayerData
+{
+    /** Create a tile layer data object, one for each tile in a TileLayer
+     *  @param {Number}  [tile]          - The tile to use, untextured if undefined
+     *  @param {Number}  [direction=0]   - Integer direction of tile, in 90 degree increments
+     *  @param {Boolean} [mirror=0]      - If the tile should be mirrored along the x axis
+     *  @param {Color}   [color=Color()] - Color of the tile */
+    constructor(tile, direction=0, mirror=0, color=new Color())
+    {
+        /** @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
+ * - 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
+ * initTileCollision(vec2(200,100));
+ * const tileLayer = new TileLayer();
+ */
+class TileLayer extends EngineObject
+{
+/** Create a tile layer object
+    *  @param {Vector2} [position=Vector2()]       - World space position
+    *  @param {Vector2} [size=tileCollisionSize]   - World space size
+    *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
+    *  @param {Vector2} [scale=Vector2(1,1)]       - How much to scale this layer when rendered
+    *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
+    */
+constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
+    {
+        super(pos, size, -1, tileSize, 0, undefined, renderOrder);
+
+        /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
+        this.canvas = document.createElement('canvas');
+        /** @property {CanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
+        this.context = this.canvas.getContext('2d');
+        /** @property {Vector2}                  - How much to scale this layer when rendered */
+        this.scale = scale;
+        /** @property {Boolean} [isOverlay=0]    - If true this layer will render to overlay canvas and appear above all objects */
+        this.isOverlay;
+
+        // init tile data
+        this.data = [];
+        for (let j = this.size.area(); j--;)
+            this.data.push(new TileLayerData);
+    }
+    
+    /** 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))
+        {
+            this.data[(layerPos.y|0)*this.size.x+layerPos.x|0] = data;
+            redraw && this.drawTileData(layerPos);
+        }
+    }
+    
+    /** 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]; }
+    
+    // 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 webgl
+        glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
+        
+        // draw the entire cached level onto the canvas
+        const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
+        (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 
+     *  - This may be slow in some browsers
+    */
+    redraw()
+    {
+        this.redrawStart(1);
+        this.drawAllTileData();
+        this.redrawEnd();
+    }
+
+    /** Call to start the redraw process
+     *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
+    redrawStart(clear = 0)
+    {
+        // save current render settings
+        this.savedRenderSettings = [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale];
+
+        // hack: use normal rendering system to render the tiles
+        mainCanvas = this.canvas;
+        mainContext = this.context;
+        cameraPos = this.size.scale(.5);
+        cameraScale = this.tileSize.x;
+
+        if (clear)
+        {
+            // clear and set size
+            mainCanvas.width  = this.size.x * this.tileSize.x;
+            mainCanvas.height = this.size.y * this.tileSize.y;
+        }
+
+        // begin a new render for the tile canvas
+        enginePreRender();
+    }
+
+    /** Call to end the redraw process */
+    redrawEnd()
+    {
+        ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
+        glEnable && glCopyToContext(mainContext, 1);
+        //debugSaveCanvas(this.canvas);
+
+        // set stuff back to normal
+        [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
+    }
+
+    /** Draw the tile at a given position
+     *  @param {Vector2} layerPos */
+    drawTileData(layerPos)
+    {
+        // first clear out where the tile was
+        const pos = layerPos.floor().add(this.pos).add(vec2(.5));
+        this.drawCanvas2D(pos, vec2(1), 0, 0, (context)=>context.clearRect(-.5, -.5, 1, 1));
+
+        // draw the tile if not undefined
+        const d = this.getData(layerPos);
+        if (d.tile != undefined)
+        {
+            ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
+            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--;)
+        for (let y = this.size.y; y--;)
+             this.drawTileData(vec2(x,y));
+    }
+
+    /** Draw directly to the 2D canvas in world space (bipass webgl)
+     *  @param {Vector2}  pos
+     *  @param {Vector2}  size
+     *  @param {Number}   [angle=0]
+     *  @param {Boolean}  [mirror=0]
+     *  @param {Function} drawFunction */
+    drawCanvas2D(pos, size, angle=0, mirror, drawFunction)
+    {
+        const context = this.context;
+        context.save();
+        pos = pos.subtract(this.pos).multiply(this.tileSize);
+        size = size.multiply(this.tileSize);
+        context.translate(pos.x, this.canvas.height - pos.y);
+        context.rotate(angle);
+        context.scale(mirror ? -size.x : size.x, size.y);
+        drawFunction(context);
+        context.restore();
+    }
 
-    for (let x = posStart.x, y = posStart.y, e = dx + dy;;)
+    /** Draw a tile directly onto the layer canvas
+     *  @param {Vector2} pos
+     *  @param {Vector2} [size=Vector2(1,1)]
+     *  @param {Number}  [tileIndex=-1]
+     *  @param {Vector2} [tileSize=tileSizeDefault]
+     *  @param {Color}   [color=Color()]
+     *  @param {Number}  [angle=0]
+     *  @param {Boolean} [mirror=0] */
+    drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle, mirror)
     {
-        const tileData = getTileCollisionData(vec2(x,y));
-        if (tileData && (object ? object.collideWithTileRaycast(tileData, new Vector2(x, y)) : tileData > 0))
+        this.drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
-            debugRaycast && debugLine(posStart, posEnd, '#f00',.02, 1);
-            debugRaycast && debugPoint(new Vector2(x+.5, y+.5), '#ff0', 1);
-            return new Vector2(x+.5, y+.5);
-        }
-
-        // update Bresenham line drawing algorithm
-        if (x == posEnd.x & y == posEnd.y) break;
-        const e2 = 2*e;
-        if (e2 >= dy) e += dy, x += sx;
-        if (e2 <= dx) e += dx, y += sy;
+            if (tileIndex < 0)
+            {
+                // untextured
+                context.fillStyle = color;
+                context.fillRect(-.5, -.5, 1, 1);
+            }
+            else
+            {
+                const cols = tileImage.width/tileSize.x;
+                context.globalAlpha = color.a; // only alpha, no color, is supported in this mode
+                context.drawImage(tileImage, 
+                    (tileIndex%cols)*tileSize.x, (tileIndex/cols|0)*tileSize.y, 
+                    tileSize.x, tileSize.y, -.5, -.5, 1, 1);
+            }
+        });
     }
-    debugRaycast && debugLine(posStart, posEnd, '#00f',.02, 1);
-}
 
-///////////////////////////////////////////////////////////////////////////////
-// Tile Layer Rendering System
-
-/**
- * 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);
+    /** Draw a rectangle directly onto the layer canvas
+     *  @param {Vector2} pos
+     *  @param {Vector2} [size=Vector2(1,1)]
+     *  @param {Color}   [color=Color()]
+     *  @param {Number}  [angle=0] */
+    drawRect(pos, size, color, angle) 
+    { this.drawTile(pos, size, -1, 0, color, angle); }
+}
+/** 
+ * LittleJS Particle System
  */
-class TileLayerData
-{
-    /** Create a tile layer data object, one for each tile in a TileLayer
-     *  @param {Number}  [tile]          - The tile to use, untextured if undefined
-     *  @param {Number}  [direction=0]   - Integer direction of tile, in 90 degree increments
-     *  @param {Boolean} [mirror=0]      - If the tile should be mirrored along the x axis
-     *  @param {Color}   [color=Color()] - Color of the tile */
-    constructor(tile, direction=0, mirror=0, color=new Color())
-    {
-        /** @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; }
-}
+'use strict';
 
 /**
- * Tile layer object - cached rendering system for tile layers
- * - 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
+ * Particle Emitter - Spawns particles with the given settings
  * @extends EngineObject
  * @example
- * // create tile collision and visible tile layer
- * initTileCollision(vec2(200,100));
- * const tileLayer = new TileLayer();
+ * // create a particle emitter
+ * let pos = vec2(2,3);
+ * let particleEmiter = new ParticleEmitter
+ * (
+ *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
+ *     0, vec2(16),                            // tileIndex, tileSize
+ *     new Color(1,1,1),   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 TileLayer extends EngineObject
+class ParticleEmitter extends EngineObject
 {
-/** Create a tile layer object
-    *  @param {Vector2} [position=Vector2()]       - World space position
-    *  @param {Vector2} [size=tileCollisionSize]   - World space size
-    *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
-    *  @param {Vector2} [scale=Vector2(1,1)]       - How much to scale this layer when rendered
-    *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
-    */
-constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
+    /** Create a particle system with the given settings
+     *  @param {Vector2} position           - World space position of the emitter
+     *  @param {Number}  [angle=0]          - Angle to emit the particles
+     *  @param {Number}  [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 {Vector2} [tileSize=tileSizeDefault] - Tile size for particles
+     *  @param {Color}   [colorStartA=Color()] - Color at start of life 1, randomized between start colors
+     *  @param {Color}   [colorStartB=Color()] - Color at start of life 2, randomized between start colors
+     *  @param {Color}   [colorEndA=Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
+     *  @param {Color}   [colorEndB=Color(1,1,1,0)] - Color at end of life 2, randomized between end colors
+     *  @param {Number}  [particleTime=.5]      - How long particles live
+     *  @param {Number}  [sizeStart=.1]         - How big are particles at start
+     *  @param {Number}  [sizeEnd=1]            - How big are particles at end
+     *  @param {Number}  [speed=.1]             - How fast are particles when spawned
+     *  @param {Number}  [angleSpeed=.05]       - How fast are particles rotating
+     *  @param {Number}  [damping=1]            - How much to dampen particle speed
+     *  @param {Number}  [angleDamping=1]       - How much to dampen particle angular speed
+     *  @param {Number}  [gravityScale=0]       - How much does gravity effect particles
+     *  @param {Number}  [particleConeAngle=PI] - Cone for start particle angle
+     *  @param {Number}  [fadeRate=.1]          - How quick to fade in particles at start/end in percent of life
+     *  @param {Number}  [randomness=.2]        - Apply extra randomness percent
+     *  @param {Boolean} [collideTiles=0]       - Do particles collide against tiles
+     *  @param {Boolean} [additive=0]           - Should particles use addtive blend
+     *  @param {Boolean} [randomColorLinear=1]  - Should color be randomized linearly or across each component
+     *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
+     *  @param {Boolean}  [localSpace=0]        - Should it be in local space of emitter (world space is default)
+     */
+    constructor
+    ( 
+        pos,
+        angle,
+        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,
+        localSpace
+    )
     {
-        super(pos, size, -1, tileSize, 0, undefined, renderOrder);
+        super(pos, vec2(), tileIndex, tileSize, angle, undefined, renderOrder);
 
-        /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
-        this.canvas = document.createElement('canvas');
-        /** @property {CanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
-        this.context = this.canvas.getContext('2d');
-        /** @property {Vector2}                  - How much to scale this layer when rendered */
-        this.scale = scale;
-        /** @property {Boolean} [isOverlay=0]    - If true this layer will render to overlay canvas and appear above all objects */
-        this.isOverlay;
+        // 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;
 
-        // init tile data
-        this.data = [];
-        for (let j = this.size.area(); j--;)
-            this.data.push(new TileLayerData);
-    }
-    
-    /** 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))
-        {
-            this.data[(layerPos.y|0)*this.size.x+layerPos.x|0] = data;
-            redraw && this.drawTileData(layerPos);
-        }
+        // 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;
+        /** @property {Boolean} - Should it be in local space of emitter */
+        this.localSpace          = localSpace;
+        /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
+        this.trailScale        = 0;
+
+        // internal variables
+        this.emitTimeBuffer    = 0;
     }
     
-    /** 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]; }
-    
-    // Tile layers are not updated
-    update() {}
-
-    // Render the tile layer, called automatically by the engine
-    render()
+    /** Update the emitter to spawn particles, called automatically by engine once each frame */
+    update()
     {
-        ASSERT(mainContext != this.context); // must call redrawEnd() after drawing tiles
+        // only do default update to apply parent transforms
+        this.parent && super.update();
 
-        // 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 canvas
-        const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
-        (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
-        );
-    }
+        // update emitter
+        if (!this.emitTime || this.getAliveTime() <= this.emitTime)
+        {
+            // emit particles
+            if (this.emitRate * particleEmitRateScale)
+            {
+                const rate = 1/this.emitRate/particleEmitRateScale;
+                for (this.emitTimeBuffer += timeDelta; this.emitTimeBuffer > 0; this.emitTimeBuffer -= rate)
+                    this.emitParticle();
+            }
+        }
+        else
+            this.destroy();
 
-    /** Draw all the tile data to an offscreen canvas 
-     *  - This may be slow in some browsers
-    */
-    redraw()
-    {
-        this.redrawStart(1);
-        this.drawAllTileData();
-        this.redrawEnd();
+        debugParticles && debugRect(this.pos, vec2(this.emitSize), '#0f0', 0, this.angle);
     }
 
-    /** Call to start the redraw process
-     *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
-    redrawStart(clear = 0)
+    /** Spawn one particle
+     *  @return {Particle} */
+    emitParticle()
     {
-        // save current render settings
-        this.savedRenderSettings = [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale];
-
-        // hack: use normal rendering system to render the tiles
-        mainCanvas = this.canvas;
-        mainContext = this.context;
-        cameraPos = this.size.scale(.5);
-        cameraScale = this.tileSize.x;
-
-        if (clear)
+        // spawn a particle
+        let pos = this.emitSize.x != undefined ? // check if vec2 was used for size
+            vec2(rand(-.5,.5), rand(-.5,.5))
+                .multiply(this.emitSize).rotate(this.angle) // box emitter
+            : randInCircle(this.emitSize/2);                // circle emitter
+        let angle = rand(this.particleConeAngle, -this.particleConeAngle);
+        if (!this.localSpace)
         {
-            // clear and set size
-            mainCanvas.width  = this.size.x * this.tileSize.x;
-            mainCanvas.height = this.size.y * this.tileSize.y;
+            pos = this.pos.add(pos);
+            angle += this.angle;
         }
+            
+        const particle = new Particle(pos, this.tileIndex, this.tileSize, angle);
 
-        // begin a new render for the tile canvas
-        enginePreRender();
-    }
+        // randomness scales each paremeter by a percentage
+        const randomness = this.randomness;
+        const randomizeScale = (v)=> v + v*rand(randomness, -randomness);
 
-    /** Call to end the redraw process */
-    redrawEnd()
-    {
-        ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
-        glEnable && glCopyToContext(mainContext, 1);
-        //debugSaveCanvas(this.canvas);
+        // randomize particle settings
+        const particleTime  = randomizeScale(this.particleTime);
+        const sizeStart     = randomizeScale(this.sizeStart);
+        const sizeEnd       = randomizeScale(this.sizeEnd);
+        const speed         = randomizeScale(this.speed);
+        const angleSpeed    = randomizeScale(this.angleSpeed) * randSign();
+        const coneAngle     = rand(this.emitConeAngle, -this.emitConeAngle);
+        const colorStart    = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
+        const colorEnd      = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
+        const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
 
-        // set stuff back to normal
-        [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
-    }
+        // build particle settings
+        particle.colorStart    = colorStart;
+        particle.colorEndDelta = colorEnd.subtract(colorStart);
+        particle.velocity      = vec2().setAngle(velocityAngle, speed);
+        particle.angleVelocity = angleSpeed;
+        particle.lifeTime      = particleTime;
+        particle.sizeStart     = sizeStart;
+        particle.sizeEndDelta  = sizeEnd - sizeStart;
+        particle.fadeRate      = this.fadeRate;
+        particle.damping       = this.damping;
+        particle.angleDamping  = this.angleDamping;
+        particle.elasticity    = this.elasticity;
+        particle.friction      = this.friction;
+        particle.gravityScale  = this.gravityScale;
+        particle.collideTiles  = this.collideTiles;
+        particle.additive      = this.additive;
+        particle.renderOrder   = this.renderOrder;
+        particle.trailScale    = this.trailScale;
+        particle.mirror        = randInt(2);
+        particle.localSpaceEmitter = this.localSpace && this;
 
-    /** Draw the tile at a given position
-     *  @param {Vector2} layerPos */
-    drawTileData(layerPos)
-    {
-        // first clear out where the tile was
-        const pos = layerPos.floor().add(this.pos).add(vec2(.5));
-        this.drawCanvas2D(pos, vec2(1), 0, 0, (context)=>context.clearRect(-.5, -.5, 1, 1));
+        // setup callbacks for particles
+        particle.destroyCallback = this.particleDestroyCallback;
+        this.particleCreateCallback && this.particleCreateCallback(particle);
 
-        // draw the tile if not undefined
-        const d = this.getData(layerPos);
-        if (d.tile != undefined)
-        {
-            ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
-            drawTile(pos, vec2(1), d.tile, this.tileSize, d.color, d.direction*PI/2, d.mirror);
-        }
+        // return the newly created particle
+        return particle;
     }
 
-    /** Draw all the tiles in this layer */
-    drawAllTileData()
-    {
-        for (let x = this.size.x; x--;)
-        for (let y = this.size.y; y--;)
-             this.drawTileData(vec2(x,y));
-    }
+    // Particle emitters are not rendered, only the particles are
+    render() {}
+}
 
-    /** Draw directly to the 2D canvas in world space (bipass webgl)
-     *  @param {Vector2}  pos
-     *  @param {Vector2}  size
-     *  @param {Number}   [angle=0]
-     *  @param {Boolean}  [mirror=0]
-     *  @param {Function} drawFunction */
-    drawCanvas2D(pos, size, angle=0, mirror, drawFunction)
-    {
-        const context = this.context;
-        context.save();
-        pos = pos.subtract(this.pos).multiply(this.tileSize);
-        size = size.multiply(this.tileSize);
-        context.translate(pos.x, this.canvas.height - pos.y);
-        context.rotate(angle);
-        context.scale(mirror ? -size.x : size.x, size.y);
-        drawFunction(context);
-        context.restore();
-    }
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * 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, vec2(), tileIndex, tileSize, angle); }
 
-    /** Draw a tile directly onto the layer canvas
-     *  @param {Vector2} pos
-     *  @param {Vector2} [size=Vector2(1,1)]
-     *  @param {Number}  [tileIndex=-1]
-     *  @param {Vector2} [tileSize=tileSizeDefault]
-     *  @param {Color}   [color=Color()]
-     *  @param {Number}  [angle=0]
-     *  @param {Boolean} [mirror=0] */
-    drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle, mirror)
+    /** Render the particle, automatically called each frame, sorted by renderOrder */
+    render()
     {
-        this.drawCanvas2D(pos, size, angle, mirror, (context)=>
+        // modulate size and color
+        const p = min((time - this.spawnTime) / this.lifeTime, 1);
+        const radius = this.sizeStart + p * this.sizeEndDelta;
+        const size = vec2(radius);
+        const fadeRate = this.fadeRate/2;
+        const color = new Color(
+            this.colorStart.r + p * this.colorEndDelta.r,
+            this.colorStart.g + p * this.colorEndDelta.g,
+            this.colorStart.b + p * this.colorEndDelta.b,
+            (this.colorStart.a + p * this.colorEndDelta.a) * 
+             (p < fadeRate ? p/fadeRate : p > 1-fadeRate ? (1-p)/fadeRate : 1)); // fade alpha
+
+        // draw the particle
+        this.additive && setBlendMode(1);
+
+        let pos = this.pos, angle = this.angle;
+        if (this.localSpaceEmitter)
         {
-            if (tileIndex < 0)
-            {
-                // untextured
-                context.fillStyle = color;
-                context.fillRect(-.5, -.5, 1, 1);
-            }
-            else
-            {
-                const cols = tileImage.width/tileSize.x;
-                context.globalAlpha = color.a; // only alpha, no color, is supported in this mode
-                context.drawImage(tileImage, 
-                    (tileIndex%cols)*tileSize.x, (tileIndex/cols|0)*tileSize.y, 
-                    tileSize.x, tileSize.y, -.5, -.5, 1, 1);
-            }
-        });
-    }
+            // in local space of emitter
+            pos = this.localSpaceEmitter.pos.add(pos.rotate(-this.localSpaceEmitter.angle)); 
+            angle += this.localSpaceEmitter.angle;
+        }
+        if (this.trailScale)
+        {
+            // trail style particles
+            let velocity = this.velocity;
+            if (this.localSpaceEmitter)
+                velocity = velocity.rotate(-this.localSpaceEmitter.angle);
+            const speed = velocity.length();
+            const direction = velocity.scale(1/speed);
+            const trailLength = speed * this.trailScale;
+            size.y = max(size.x, trailLength);
+            angle = direction.angle();
+            drawTile(pos.add(direction.multiply(vec2(0,-trailLength/2))), size, this.tileIndex, this.tileSize, color, angle, this.mirror);
+        }
+        else
+            drawTile(pos, size, this.tileIndex, this.tileSize, color, angle, this.mirror);
+        this.additive && setBlendMode();
+        debugParticles && debugRect(pos, size, '#f005', 0, angle);
 
-    /** Draw a rectangle directly onto the layer canvas
-     *  @param {Vector2} pos
-     *  @param {Vector2} [size=Vector2(1,1)]
-     *  @param {Color}   [color=Color()]
-     *  @param {Number}  [angle=0] */
-    drawRect(pos, size, color, angle) 
-    { this.drawTile(pos, size, -1, 0, color, angle); }
-}
+        if (p == 1)
+        {
+            // destroy particle when it's time runs out
+            this.color = color;
+            this.size = size;
+            this.destroyCallback && this.destroyCallback(this);
+            this.destroyed = 1;
+        }
+    }
+}
 /** 
- * LittleJS Particle System
+ * LittleJS Medal System
+ * - Tracks and displays medals
+ * - Saves medals to local storage
+ * - Newgrounds integration
+ * @namespace Medals
  */
 
 'use strict';
 
-/**
- * Particle Emitter - Spawns particles with the given settings
- * @extends EngineObject
+/** List of all medals
+ *  @type {Array}
+ *  @memberof Medals */
+const medals = [];
+
+// Engine internal variables not exposed to documentation
+let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimeLast;
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Initialize medals with a save name used for storage
+ *  - Call this after creating all medals
+ *  - Checks if medals are unlocked
+ *  @param {String} saveName
+ *  @memberof Medals */
+function medalsInit(saveName)
+{
+    // check if medals are unlocked
+    medalsSaveName = saveName;
+    debugMedals || medals.forEach(medal=> medal.unlocked = (localStorage[medal.storageKey()] | 0));
+}
+
+/** 
+ * Medal Object - Tracks an unlockable medal 
  * @example
- * // create a particle emitter
- * let pos = vec2(2,3);
- * let particleEmiter = new ParticleEmitter
- * (
- *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
- *     0, vec2(16),                            // tileIndex, tileSize
- *     new Color(1,1,1),   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
- * );
+ * // create a medal
+ * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
+ * 
+ * // initialize medals
+ * medalsInit('Example Game');
+ * 
+ * // unlock the medal
+ * medal_example.unlock();
  */
-class ParticleEmitter extends EngineObject
+class Medal
 {
-    /** Create a particle system with the given settings
-     *  @param {Vector2} position           - World space position of the emitter
-     *  @param {Number}  [angle=0]          - Angle to emit the particles
-     *  @param {Number}  [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 {Vector2} [tileSize=tileSizeDefault] - Tile size for particles
-     *  @param {Color}   [colorStartA=Color()] - Color at start of life 1, randomized between start colors
-     *  @param {Color}   [colorStartB=Color()] - Color at start of life 2, randomized between start colors
-     *  @param {Color}   [colorEndA=Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
-     *  @param {Color}   [colorEndB=Color(1,1,1,0)] - Color at end of life 2, randomized between end colors
-     *  @param {Number}  [particleTime=.5]      - How long particles live
-     *  @param {Number}  [sizeStart=.1]         - How big are particles at start
-     *  @param {Number}  [sizeEnd=1]            - How big are particles at end
-     *  @param {Number}  [speed=.1]             - How fast are particles when spawned
-     *  @param {Number}  [angleSpeed=.05]       - How fast are particles rotating
-     *  @param {Number}  [damping=1]            - How much to dampen particle speed
-     *  @param {Number}  [angleDamping=1]       - How much to dampen particle angular speed
-     *  @param {Number}  [gravityScale=0]       - How much does gravity effect particles
-     *  @param {Number}  [particleConeAngle=PI] - Cone for start particle angle
-     *  @param {Number}  [fadeRate=.1]          - How quick to fade in particles at start/end in percent of life
-     *  @param {Number}  [randomness=.2]        - Apply extra randomness percent
-     *  @param {Boolean} [collideTiles=0]       - Do particles collide against tiles
-     *  @param {Boolean} [additive=0]           - Should particles use addtive blend
-     *  @param {Boolean} [randomColorLinear=1]  - Should color be randomized linearly or across each component
-     *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
-     *  @param {Boolean}  [localSpace=0]        - Should it be in local space of emitter (world space is default)
+    /** 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
-    ( 
-        pos,
-        angle,
-        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,
-        localSpace
-    )
+    constructor(id, name, description='', icon='🏆', src)
     {
-        super(pos, new Vector2, tileIndex, tileSize, angle, undefined, renderOrder);
+        ASSERT(id >= 0 && !medals[id]);
 
-        // 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;
+        // save attributes and add to list of medals
+        medals[this.id = id] = this;
+        this.name = name;
+        this.description = description;
+        this.icon = icon;
+        if (src)
+            (this.image = new Image).src = src;
+    }
 
-        // 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;
+    /** Unlocks a medal if not already unlocked */
+    unlock()
+    {
+        if (medalsPreventUnlock || this.unlocked)
+            return;
 
-        // 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;
-        /** @property {Boolean} - Should it be in local space of emitter */
-        this.localSpace          = localSpace;
-        /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
-        this.trailScale        = 0;
+        // save the medal
+        ASSERT(medalsSaveName); // save name must be set
+        localStorage[this.storageKey()] = this.unlocked = 1;
+        medalsDisplayQueue.push(this);
+        newgrounds && newgrounds.unlockMedal(this.id);
+    }
+
+    /** Render a medal
+     *  @param {Number} [hidePercent=0] - How much to slide the medal off screen
+     */
+    render(hidePercent=0)
+    {
+        const context = overlayContext;
+        const width = min(medalDisplaySize.x, mainCanvas.width);
+        const x = overlayCanvas.width - width;
+        const y = -medalDisplaySize.y*hidePercent;
+
+        // draw containing rect and clip to that region
+        context.save();
+        context.beginPath();
+        context.fillStyle = new Color(.9,.9,.9);
+        context.strokeStyle = new Color(0,0,0);
+        context.lineWidth = 3;
+        context.fill(context.rect(x, y, width, medalDisplaySize.y));
+        context.stroke();
+        context.clip();
+
+        // draw the icon and text
+        this.renderIcon(vec2(x+15+medalDisplayIconSize/2, y+medalDisplaySize.y/2));
+        const pos = vec2(x+medalDisplayIconSize+30, y+28);
+        drawTextScreen(this.name, pos, 38, new Color(0,0,0), 0, 0, 'left');
+        pos.y += 32;
+        drawTextScreen(this.description, pos, 24, new Color(0,0,0), 0, 0, 'left');
+        context.restore();
+    }
+
+    /** 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(pos, size=medalDisplayIconSize)
+    {
+        // draw the image or icon
+        if (this.image)
+            overlayContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
+        else
+            drawTextScreen(this.icon, pos, size*.7, new Color(0,0,0));
+    }
+ 
+    // Get local storage key used by the medal
+    storageKey() { return medalsSaveName + '_' + this.id; }
+}
 
-        // internal variables
-        this.emitTimeBuffer    = 0;
-    }
+// engine automatically renders medals
+function medalsRender()
+{
+    if (!medalsDisplayQueue.length)
+        return;
     
-    /** Update the emitter to spawn particles, called automatically by engine once each frame */
-    update()
+    // update first medal in queue
+    const medal = medalsDisplayQueue[0];
+    const time = timeReal - medalsDisplayTimeLast;
+    if (!medalsDisplayTimeLast)
+        medalsDisplayTimeLast = timeReal;
+    else if (time > medalDisplayTime)
+        medalsDisplayQueue.shift(medalsDisplayTimeLast = 0);
+    else
     {
-        // only do default update to apply parent transforms
-        this.parent && super.update();
+        // slide on/off medals
+        const slideOffTime = medalDisplayTime - medalDisplaySlideTime;
+        const hidePercent = 
+            time < medalDisplaySlideTime ? 1 - time / medalDisplaySlideTime :
+            time > slideOffTime ? (time - slideOffTime) / medalDisplaySlideTime : 0;
+        medal.render(hidePercent);
+    }
+}
 
-        // update emitter
-        if (!this.emitTime | this.getAliveTime() <= this.emitTime)
+///////////////////////////////////////////////////////////////////////////////
+
+// global Newgrounds object
+let newgrounds;
+
+/** This can used to enable Newgrounds functionality
+ *  @param {Number} app_id   - The newgrounds App ID
+ *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+ *  @memberof Medals */
+function newgroundsInit(app_id, cipher) { newgrounds = new Newgrounds(app_id, cipher); }
+
+/** 
+ * 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
+        if (cipher)
+            this.cryptoJS = this.CryptoJS();
+
+        // get session id from url search params
+        const url = new URL(location.href);
+        this.session_id = url.searchParams.get('ngio_session_id');
+
+        if (!this.session_id)
+            return; // only use newgrounds when logged in
+
+        // get medals
+        const medalsResult = this.call('Medal.getList');
+        this.medals = medalsResult ? medalsResult.result.data['medals'] : [];
+        debugMedals && console.log(this.medals);
+        for (const newgroundsMedal of this.medals)
         {
-            // emit particles
-            if (this.emitRate * particleEmitRateScale)
+            const medal = medals[newgroundsMedal['id']];
+            if (medal)
             {
-                const rate = 1/this.emitRate/particleEmitRateScale;
-                for (this.emitTimeBuffer += timeDelta; this.emitTimeBuffer > 0; this.emitTimeBuffer -= rate)
-                    this.emitParticle();
+                // copy newgrounds medal data
+                medal.image =       new Image;
+                medal.image.src =   newgroundsMedal['icon'];
+                medal.name =        newgroundsMedal['name'];
+                medal.description = newgroundsMedal['description'];
+                medal.unlocked =    newgroundsMedal['unlocked'];
+                medal.difficulty =  newgroundsMedal['difficulty'];
+                medal.value =       newgroundsMedal['value'];
+
+                if (medal.value)
+                    medal.description = medal.description + ' (' + medal.value + ')';
             }
         }
-        else
-            this.destroy();
+    
+        // get scoreboards
+        const scoreboardResult = this.call('ScoreBoard.getBoards');
+        this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
+        debugMedals && console.log(this.scoreboards);
 
-        debugParticles && debugRect(this.pos, vec2(this.emitSize), '#0f0', 0, this.angle);
+        const keepAliveMS = 5 * 60 * 1e3;
+        setInterval(()=>this.call('Gateway.ping', 0, 1), keepAliveMS);
     }
 
-    /** Spawn one particle
-     *  @return {Particle} */
-    emitParticle()
+    /** 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); }
+
+    /** 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}); }
+
+    /** Send message to log a view */
+    logView() { return this.call('App.logView', {'host':this.host}, 1); }
+
+    /** Send a message to call a component of the Newgrounds API
+     * @param {String}  component      - Name of the component
+     * @param {Object}  [parameters=0] - Parameters to use for call
+     * @param {Boolean} [async=0]      - If true, don't wait for response before continuing (avoid stall)
+     * @return {Object}                - The response JSON object
+     */
+    call(component, parameters=0, async=0)
     {
-        // spawn a particle
-        let pos = this.emitSize.x != undefined ? // check if vec2 was used for size
-            (new Vector2(rand(-.5,.5), rand(-.5,.5)))
-                .multiply(this.emitSize).rotate(this.angle) // box emitter
-            : randInCircle(this.emitSize/2);                // circle emitter
-        let angle = rand(this.particleConeAngle, -this.particleConeAngle);
-        if (!this.localSpace)
+        const call = {'component':component, 'parameters':parameters};
+        if (this.cipher)
         {
-            pos = this.pos.add(pos);
-            angle += this.angle;
+            // 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;
         }
-            
-        const particle = new Particle(pos, this.tileIndex, this.tileSize, angle);
 
-        // randomness scales each paremeter by a percentage
-        const randomness = this.randomness;
-        const randomizeScale = (v)=> v + v*rand(randomness, -randomness);
+        // build the input object
+        const input = 
+        {
+            'app_id':     this.app_id,
+            'session_id': this.session_id,
+            'call':       call
+        };
 
-        // randomize particle settings
-        const particleTime  = randomizeScale(this.particleTime);
-        const sizeStart     = randomizeScale(this.sizeStart);
-        const sizeEnd       = randomizeScale(this.sizeEnd);
-        const speed         = randomizeScale(this.speed);
-        const angleSpeed    = randomizeScale(this.angleSpeed) * randSign();
-        const coneAngle     = rand(this.emitConeAngle, -this.emitConeAngle);
-        const colorStart    = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
-        const colorEnd      = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
-        const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
+        // build post data
+        const formData = new FormData();
+        formData.append('input', JSON.stringify(input));
+        
+        // send post data
+        const xmlHttp = new XMLHttpRequest();
+        const url = 'https://newgrounds.io/gateway_v3.php';
+        xmlHttp.open('POST', url, !debugMedals && async);
+        xmlHttp.send(formData);
+        debugMedals && console.log(xmlHttp.responseText);
+        return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
+    }
 
-        // build particle settings
-        particle.colorStart    = colorStart;
-        particle.colorEndDelta = colorEnd.subtract(colorStart);
-        particle.velocity      = (new Vector2).setAngle(velocityAngle, speed);
-        particle.angleVelocity = angleSpeed;
-        particle.lifeTime      = particleTime;
-        particle.sizeStart     = sizeStart;
-        particle.sizeEndDelta  = sizeEnd - sizeStart;
-        particle.fadeRate      = this.fadeRate;
-        particle.damping       = this.damping;
-        particle.angleDamping  = this.angleDamping;
-        particle.elasticity    = this.elasticity;
-        particle.friction      = this.friction;
-        particle.gravityScale  = this.gravityScale;
-        particle.collideTiles  = this.collideTiles;
-        particle.additive      = this.additive;
-        particle.renderOrder   = this.renderOrder;
-        particle.trailScale    = this.trailScale;
-        particle.mirror        = randInt(2);
-        particle.localSpaceEmitter = this.localSpace && this;
+    CryptoJS()
+    {
+        ///////////////////////////////////////////////////////////////////////////////
+        // 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
+ * - 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
+ */
+
+'use strict';
+
+/** The WebGL canvas which appears above the main canvas and below the overlay canvas
+ *  @type {HTMLCanvasElement}
+ *  @memberof WebGL */
+let glCanvas;
 
-        // setup callbacks for particles
-        particle.destroyCallback = this.particleDestroyCallback;
-        this.particleCreateCallback && this.particleCreateCallback(particle);
+/** 2d context for glCanvas 
+ *  @type {WebGLRenderingContext}
+ *  @memberof WebGL */
+let glContext;
 
-        // return the newly created particle
-        return particle;
-    }
+/** Main tile sheet texture automatically loaded by engine
+ *  @type {WebGLTexture}
+ *  @memberof WebGL */
+let glTileTexture;
 
-    // Particle emitters are not rendered, only the particles are
-    render() {}
-}
+// WebGL internal variables not exposed to documentation
+let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
-/**
- * Particle Object - Created automatically by Particle Emitters
- * @extends EngineObject
- */
-class Particle extends EngineObject
+
+// Init WebGL, called automatically by the engine
+function glInit()
 {
-    /**
-     * 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); }
+    // create the canvas and tile texture
+    glCanvas = document.createElement('canvas');
+    glContext = glCanvas.getContext('webgl', {antialias: false});
+    glTileTexture = glCreateTexture(tileImage);
 
-    /** Render the particle, automatically called each frame, sorted by renderOrder */
-    render()
-    {
-        // modulate size and color
-        const p = min((time - this.spawnTime) / this.lifeTime, 1);
-        const radius = this.sizeStart + p * this.sizeEndDelta;
-        const size = new Vector2(radius, radius);
-        const fadeRate = this.fadeRate/2;
-        const color = new Color(
-            this.colorStart.r + p * this.colorEndDelta.r,
-            this.colorStart.g + p * this.colorEndDelta.g,
-            this.colorStart.b + p * this.colorEndDelta.b,
-            (this.colorStart.a + p * this.colorEndDelta.a) * 
-             (p < fadeRate ? p/fadeRate : p > 1-fadeRate ? (1-p)/fadeRate : 1)); // fade alpha
+    // some browsers are much faster without copying the gl buffer so we just overlay it instead
+    glOverlay && document.body.appendChild(glCanvas);
 
-        // draw the particle
-        this.additive && setBlendMode(1);
+    // setup vertex and fragment shaders
+    glShader = glCreateProgram(
+        'precision highp float;'+     // use highp for better accuracy
+        'uniform mat4 m;'+            // transform matrix
+        'attribute vec2 p,t;'+        // position, uv
+        'attribute vec4 c,a;'+        // color, additiveColor
+        'varying vec4 v,d,e;'+        // return uv, color, additiveColor
+        'void main(){'+               // shader entry point
+        'gl_Position=m*vec4(p,1,1);'+ // transform position
+        'v=vec4(t,p);d=c;e=a;'+       // pass stuff to fragment shader
+        '}'                           // end of shader
+        ,
+        'precision highp float;'+              // use highp for better accuracy
+        'varying vec4 v,d,e;'+                 // uv, color, additiveColor
+        'uniform sampler2D s;'+                // texture
+        'void main(){'+                        // shader entry point
+        'gl_FragColor=texture2D(s,v.xy)*d+e;'+ // modulate texture by color plus additive
+        '}'                                    // end of shader
+    );
 
-        let pos = this.pos, angle = this.angle;
-        if (this.localSpaceEmitter)
-        {
-            // in local space of emitter
-            pos = this.localSpaceEmitter.pos.add(pos.rotate(-this.localSpaceEmitter.angle)); 
-            angle += this.localSpaceEmitter.angle;
-        }
-        if (this.trailScale)
-        {
-            // trail style particles
-            let velocity = this.velocity;
-            if (this.localSpaceEmitter)
-                velocity = velocity.rotate(-this.localSpaceEmitter.angle);
-            const speed = velocity.length();
-            const direction = velocity.scale(1/speed);
-            const trailLength = speed * this.trailScale;
-            size.y = max(size.x, trailLength);
-            angle = direction.angle();
-            drawTile(pos.add(direction.multiply(vec2(0,-trailLength/2))), size, this.tileIndex, this.tileSize, color, angle, this.mirror);
-        }
-        else
-            drawTile(pos, size, this.tileIndex, this.tileSize, color, angle, this.mirror);
-        this.additive && setBlendMode();
-        debugParticles && debugRect(pos, size, '#f005', 0, angle);
+    // init buffers
+    const vertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
+    glArrayBuffer = glContext.createBuffer();
+    glPositionData = new Float32Array(vertexData);
+    glColorData = new Uint32Array(vertexData);
+    glBatchCount = 0;
+}
 
-        if (p == 1)
-        {
-            // destroy particle when it's time runs out
-            this.color = color;
-            this.size = size;
-            this.destroyCallback && this.destroyCallback(this);
-            this.destroyed = 1;
-        }
-    }
+/** Set the WebGl blend mode, normally you should call setBlendMode instead
+ *  @param {Boolean} [additive=0]
+ *  @memberof WebGL */
+function glSetBlendMode(additive)
+{
+    // setup blending
+    glAdditive = additive;
 }
-/** 
- * LittleJS Medal System
- * - Tracks and displays medals
- * - Saves medals to local storage
- * - Newgrounds integration
- * @namespace Medals
- */
 
-'use strict';
+/** Set the WebGl texture, not normally necessary unless multiple tile sheets are used
+ *  - 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)
+{
+    // must flush cache with the old texture to set a new one
+    if (texture != glActiveTexture)
+        glFlush();
 
-/** List of all medals
- *  @type {Array}
- *  @memberof Medals */
-const medals = [];
+    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = texture);
+}
 
-// Engine internal variables not exposed to documentation
-let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimeLast;
+/** 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)
+{
+    // build the shader
+    const shader = glContext.createShader(type);
+    glContext.shaderSource(shader, source);
+    glContext.compileShader(shader);
 
-///////////////////////////////////////////////////////////////////////////////
+    // check for errors
+    if (debug && !glContext.getShaderParameter(shader, gl_COMPILE_STATUS))
+        throw glContext.getShaderInfoLog(shader);
+    return shader;
+}
 
-/** Initialize medals with a save name used for storage
- *  - Call this after creating all medals
- *  - Checks if medals are unlocked
- *  @param {String} saveName
- *  @memberof Medals */
-function medalsInit(saveName)
+/** Create WebGL program with given shaders
+ *  @param {WebGLShader} vsSource
+ *  @param {WebGLShader} fsSource
+ *  @return {WebGLProgram}
+ *  @memberof WebGL */
+function glCreateProgram(vsSource, fsSource)
 {
-    // check if medals are unlocked
-    medalsSaveName = saveName;
-    debugMedals || medals.forEach(medal=> medal.unlocked = (localStorage[medal.storageKey()] | 0));
+    // build the program
+    const program = glContext.createProgram();
+    glContext.attachShader(program, glCompileShader(vsSource, gl_VERTEX_SHADER));
+    glContext.attachShader(program, glCompileShader(fsSource, gl_FRAGMENT_SHADER));
+    glContext.linkProgram(program);
+
+    // check for errors
+    if (debug && !glContext.getProgramParameter(program, gl_LINK_STATUS))
+        throw glContext.getProgramInfoLog(program);
+    return program;
 }
 
-/** 
- * Medal Object - Tracks an unlockable medal 
- * @example
- * // create a medal
- * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
- * 
- * // initialize medals
- * medalsInit('Example Game');
- * 
- * // unlock the medal
- * medal_example.unlock();
- */
-class Medal
+/** Create WebGL texture from an image and set the texture settings
+ *  @param {Image} image
+ *  @return {WebGLTexture}
+ *  @memberof WebGL */
+function glCreateTexture(image)
 {
-    /** 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]);
+    // build the texture
+    const texture = glContext.createTexture();
+    glContext.bindTexture(gl_TEXTURE_2D, texture);
+    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 = 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);
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_T, gl_CLAMP_TO_EDGE);
+    return texture;
+}
 
-        // save attributes and add to list of medals
-        medals[this.id = id] = this;
-        this.name = name;
-        this.description = description;
-        this.icon = icon;
-        if (src)
-            (this.image = new Image).src = src;
-    }
+// called automatically by engine before render
+function glPreRender()
+{
+    // clear and set to same size as main canvas
+    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+    glContext.clear(gl_COLOR_BUFFER_BIT);
 
-    /** Unlocks a medal if not already unlocked */
-    unlock()
+    // set up the shader
+    glContext.useProgram(glShader);
+    glContext.activeTexture(gl_TEXTURE0);
+    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
+    glSetBlendMode();
+    
+    // set vertex attributes
+    let offset = 0;
+    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
     {
-        if (medalsPreventUnlock || this.unlocked)
-            return;
-
-        // save the medal
-        ASSERT(medalsSaveName); // save name must be set
-        localStorage[this.storageKey()] = this.unlocked = 1;
-        medalsDisplayQueue.push(this);
-        newgrounds && newgrounds.unlockMedal(this.id);
+        const location = glContext.getAttribLocation(glShader, name);
+        glContext.enableVertexAttribArray(location);
+        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
+        offset += size*typeSize;
     }
+    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
+    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
+    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
+    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 
-    /** Render a medal
-     *  @param {Number} [hidePercent=0] - How much to slide the medal off screen
-     */
-    render(hidePercent=0)
-    {
-        const context = overlayContext;
-        const width = min(medalDisplaySize.x, mainCanvas.width);
-        const x = overlayCanvas.width - width;
-        const y = -medalDisplaySize.y*hidePercent;
+    // build the transform matrix
+    const sx = 2 * cameraScale / mainCanvas.width;
+    const sy = 2 * cameraScale / mainCanvas.height;
+    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
+        new Float32Array([
+            sx, 0, 0, 0,
+            0, sy, 0, 0,
+            1, 1, -1, 1,
+            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
+        ])
+    );
+}
 
-        // draw containing rect and clip to that region
-        context.save();
-        context.beginPath();
-        context.fillStyle = new Color(.9,.9,.9);
-        context.strokeStyle = new Color(0,0,0);
-        context.lineWidth = 3;
-        context.fill(context.rect(x, y, width, medalDisplaySize.y));
-        context.stroke();
-        context.clip();
+/** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
+ *  @memberof WebGL */
+function glFlush()
+{
+    if (!glBatchCount) return;
 
-        // draw the icon and text
-        this.renderIcon(vec2(x+15+medalDisplayIconSize/2, y+medalDisplaySize.y/2));
-        const pos = vec2(x+medalDisplayIconSize+30, y+28);
-        drawTextScreen(this.name, pos, 38, new Color(0,0,0), 0, 0, 'left');
-        pos.y += 32;
-        drawTextScreen(this.description, pos, 24, new Color(0,0,0), 0, 0, 'left');
-        context.restore();
-    }
+    const destBlend = glBatchAdditive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
+    glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
+    glContext.enable(gl_BLEND);
 
-    /** 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(pos, size=medalDisplayIconSize)
-    {
-        // draw the image or icon
-        if (this.image)
-            overlayContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
-        else
-            drawTextScreen(this.icon, pos, size*.7, new Color(0,0,0));
-    }
- 
-    // Get local storage key used by the medal
-    storageKey() { return medalsSaveName + '_' + this.id; }
+    // 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;
 }
 
-// engine automatically renders medals
-function medalsRender()
+/** 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 (!medalsDisplayQueue.length)
-        return;
+    if (!glBatchCount && !forceDraw) return;
     
-    // update first medal in queue
-    const medal = medalsDisplayQueue[0];
-    const time = timeReal - medalsDisplayTimeLast;
-    if (!medalsDisplayTimeLast)
-        medalsDisplayTimeLast = timeReal;
-    else if (time > medalDisplayTime)
-        medalsDisplayQueue.shift(medalsDisplayTimeLast = 0);
-    else
+    glFlush();
+    
+    // do not draw in overlay mode because the canvas is visible
+    if (!glOverlay || forceDraw)
+        context.drawImage(glCanvas, 0, 0);
+}
+
+/** Add a sprite to the gl draw list, used by all gl draw functions
+ *  @param x
+ *  @param y
+ *  @param sizeX
+ *  @param sizeY
+ *  @param angle
+ *  @param uv0X
+ *  @param uv0Y
+ *  @param uv1X
+ *  @param uv1Y
+ *  @param rgba
+ *  @param [rgbaAdditive=0]
+ *  @memberof WebGL */
+function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
+{
+    // flush if there is no room for more verts or if different blend mode
+    if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
+        glFlush();
+
+    // prepare to create the verts from size and angle
+    const c = Math.cos(angle)/2, s = Math.sin(angle)/2;
+    const cx = c*sizeX, cy = c*sizeY, sx = s*sizeX, sy = s*sizeY;
+        
+    // setup 2 triangles to form a quad
+    for(let i=6, offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT; i--;)
     {
-        // slide on/off medals
-        const slideOffTime = medalDisplayTime - medalDisplaySlideTime;
-        const hidePercent = 
-            time < medalDisplaySlideTime ? 1 - time / medalDisplaySlideTime :
-            time > slideOffTime ? (time - slideOffTime) / medalDisplaySlideTime : 0;
-        medal.render(hidePercent);
+        const a = i-4&&i>1, b = i-5&&i-2&&i-1;
+        glPositionData[offset++] = x + (a?-cx:cx) + (b?sy:-sy);
+        glPositionData[offset++] = y + (b?cy:-cy) + (a?sx:-sx);
+        glPositionData[offset++] = a ? uv0X : uv1X; 
+        glPositionData[offset++] = b ? uv0Y : uv1Y;
+        glColorData[offset++] = rgba; 
+        glColorData[offset++] = rgbaAdditive;
     }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
+// post processing - can be enabled to pass other canvases through a final shader
 
-// global Newgrounds object
-let newgrounds;
-
-/** This can used to enable Newgrounds functionality
- *  @param {Number} app_id   - The newgrounds App ID
- *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
- *  @memberof Medals */
-function newgroundsInit(app_id, cipher) { newgrounds = new Newgrounds(app_id, cipher); }
+let glPostShader, glPostArrayBuffer, glPostTexture, glPostIncludeOverlay;
 
-/** 
- * 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
+/** Set up a post processing shader
+ *  @param {String} shaderCode
+ *  @param {Boolean} includeOverlay
+ *  @memberof WebGL */
+function glInitPostProcess(shaderCode, includeOverlay)
 {
-    /** 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);
+    ASSERT(!glPostShader); // can only have 1 post effects shader
 
-        this.app_id = app_id;
-        this.cipher = cipher;
-        this.host = location ? location.hostname : '';
-        
-        // create an instance of CryptoJS for encrypted calls
-        if (cipher)
-            this.cryptoJS = this.CryptoJS();
+    if (!shaderCode) // default shader
+        shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture2D(iChannel0,p/iResolution.xy);}';
 
-        // get session id from url search params
-        const url = new URL(location.href);
-        this.session_id = url.searchParams.get('ngio_session_id');
+    // create the shader
+    glPostShader = glCreateProgram(
+        'precision highp float;'+        // use highp for better accuracy
+        'attribute vec2 p;'+             // position
+        'void main(){'+                  // shader entry point
+        'gl_Position=vec4(p,1,1);'+      // set position
+        '}'                              // end of shader
+        ,
+        'precision highp float;'+        // use highp for better accuracy
+        'uniform sampler2D iChannel0;'+  // input texture
+        'uniform vec3 iResolution;'+     // size of output texture
+        'uniform float iTime;'+          // time passed
+        '\n' + shaderCode + '\n'+        // insert custom shader code
+        'void main(){'+                  // shader entry point
+        'mainImage(gl_FragColor,gl_FragCoord.xy);'+ // call post process function
+        'gl_FragColor.a=1.;'+            // always use full alpha
+        '}'                              // end of shader
+    );
 
-        if (!this.session_id)
-            return; // only use newgrounds when logged in
+    // create buffer and texture
+    glPostArrayBuffer = glContext.createBuffer();
+    glPostTexture = glCreateTexture();
+    glPostIncludeOverlay = includeOverlay;
 
-        // get medals
-        const medalsResult = this.call('Medal.getList');
-        this.medals = medalsResult ? medalsResult.result.data['medals'] : [];
-        debugMedals && console.log(this.medals);
-        for (const newgroundsMedal of this.medals)
-        {
-            const medal = medals[newgroundsMedal['id']];
-            if (medal)
-            {
-                // copy newgrounds medal data
-                medal.image =       new Image;
-                medal.image.src =   newgroundsMedal['icon'];
-                medal.name =        newgroundsMedal['name'];
-                medal.description = newgroundsMedal['description'];
-                medal.unlocked =    newgroundsMedal['unlocked'];
-                medal.difficulty =  newgroundsMedal['difficulty'];
-                medal.value =       newgroundsMedal['value'];
+    // hide the original 2d canvas
+    mainCanvas.style.visibility = 'hidden';
+}
 
-                if (medal.value)
-                    medal.description = medal.description + ' (' + medal.value + ')';
-            }
-        }
+// Render the post processing shader, called automatically by the engine
+function glRenderPostProcess()
+{
+    if (!glPostShader)
+        return;
     
-        // get scoreboards
-        const scoreboardResult = this.call('ScoreBoard.getBoards');
-        this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
-        debugMedals && console.log(this.scoreboards);
-
-        const keepAliveMS = 5 * 60 * 1e3;
-        setInterval(()=>this.call('Gateway.ping', 0, 1), keepAliveMS);
+    // prepare to render post process shader
+    if (glEnable)
+    {
+        glFlush(); // clear out the buffer
+        mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
     }
+    else // set viewport
+        glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
 
-    /** Send message to unlock a medal by id
-     * @param {Number} id - The medal id */
-    unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, 1); }
+    if (glPostIncludeOverlay)
+    {
+        // copy overlay canvas so it will be included in post processing
+        mainContext.drawImage(overlayCanvas, 0, 0);
 
-    /** 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); }
+        // clear overlay canvas
+        overlayCanvas.width = mainCanvas.width;
+    }
 
-    /** 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}); }
+    // setup shader program to draw one triangle
+    glContext.useProgram(glPostShader);
+    glContext.disable(gl_BLEND);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glPostArrayBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, new Float32Array([-3,1,1,-3,1,1]), gl_STATIC_DRAW);
+    glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, true);
 
-    /** Send message to log a view */
-    logView() { return this.call('App.logView', {'host':this.host}, 1); }
+    // set textures, pass in the 2d canvas and gl canvas in separate texture channels
+    glContext.activeTexture(gl_TEXTURE0);
+    glContext.bindTexture(gl_TEXTURE_2D, glPostTexture);
+    glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, mainCanvas);
 
-    /** Send a message to call a component of the Newgrounds API
-     * @param {String}  component      - Name of the component
-     * @param {Object}  [parameters=0] - Parameters to use for call
-     * @param {Boolean} [async=0]      - If true, don't wait for response before continuing (avoid stall)
-     * @return {Object}                - The response JSON object
-     */
-    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;
-        }
+    // set vertex position attribute
+    const vertexByteStride = 8;
+    const pLocation = glContext.getAttribLocation(glPostShader, 'p');
+    glContext.enableVertexAttribArray(pLocation);
+    glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, 0, vertexByteStride, 0);
 
-        // build the input object
-        const input = 
-        {
-            'app_id':     this.app_id,
-            'session_id': this.session_id,
-            'call':       call
-        };
+    // set uniforms and draw
+    const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
+    glContext.uniform1i(uniformLocation('iChannel0'), 0);
+    glContext.uniform1f(uniformLocation('iTime'), time);
+    glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
+    glContext.drawArrays(gl_TRIANGLES, 0, 3);
+}
 
-        // build post data
-        const formData = new FormData();
-        formData.append('input', JSON.stringify(input));
-        
-        // send post data
-        const xmlHttp = new XMLHttpRequest();
-        const url = 'https://newgrounds.io/gateway_v3.php';
-        xmlHttp.open('POST', url, !debugMedals && async);
-        xmlHttp.send(formData);
-        debugMedals && console.log(xmlHttp.responseText);
-        return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
-    }
+///////////////////////////////////////////////////////////////////////////////
+// store gl constants as integers so their name doesn't use space in minifed
+const 
+gl_ONE = 1,
+gl_TRIANGLES = 4,
+gl_SRC_ALPHA = 770,
+gl_ONE_MINUS_SRC_ALPHA = 771,
+gl_BLEND = 3042,
+gl_TEXTURE_2D = 3553,
+gl_UNSIGNED_BYTE = 5121,
+gl_BYTE = 5120,
+gl_FLOAT = 5126,
+gl_RGBA = 6408,
+gl_NEAREST = 9728,
+gl_LINEAR = 9729,
+gl_TEXTURE_MAG_FILTER = 10240,
+gl_TEXTURE_MIN_FILTER = 10241,
+gl_TEXTURE_WRAP_S = 10242,
+gl_TEXTURE_WRAP_T = 10243,
+gl_COLOR_BUFFER_BIT = 16384,
+gl_CLAMP_TO_EDGE = 33071,
+gl_TEXTURE0 = 33984,
+gl_TEXTURE1 = 33985,
+gl_ARRAY_BUFFER = 34962,
+gl_STATIC_DRAW = 35044,
+gl_DYNAMIC_DRAW = 35048,
+gl_FRAGMENT_SHADER = 35632, 
+gl_VERTEX_SHADER = 35633,
+gl_COMPILE_STATUS = 35713,
+gl_LINK_STATUS = 35714,
+gl_UNPACK_FLIP_Y_WEBGL = 37440,
 
-    CryptoJS()
-    {
-        ///////////////////////////////////////////////////////////////////////////////
-        // 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
-        ///////////////////////////////////////////////////////////////////////////////
-    }
-}
+// constants for batch rendering
+gl_VERTICES_PER_QUAD = 6,
+gl_INDICIES_PER_VERT = 6,
+gl_MAX_BATCH = 1<<16,
+gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2, // vec2 * 2 + (char * 4) * 2
+gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE;
 /** 
- * LittleJS WebGL Interface
- * - All webgl used by the engine is wrapped up here
- * - For normal stuff you won't need to see or call anything in this file
- * - 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
+ * 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
  */
 
 'use strict';
 
-/** The WebGL canvas which appears above the main canvas and below the overlay canvas
- *  @type {HTMLCanvasElement}
- *  @memberof WebGL */
-let glCanvas;
+/** Name of engine
+ *  @type {String}
+ *  @default
+ *  @memberof Engine */
+const engineName = 'LittleJS';
 
-/** 2d context for glCanvas 
- *  @type {WebGLRenderingContext}
- *  @memberof WebGL */
-let glContext;
+/** Version of engine
+ *  @type {String}
+ *  @default
+ *  @memberof Engine */
+const engineVersion = '1.6.92';
 
-/** Main tile sheet texture automatically loaded by engine
- *  @type {WebGLTexture}
- *  @memberof WebGL */
-let glTileTexture;
+/** Frames per second to update objects
+ *  @type {Number}
+ *  @default
+ *  @memberof Engine */
+const frameRate = 60;
 
-// WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
+/** How many seconds each frame lasts, engine uses a fixed time step
+ *  @type {Number}
+ *  @default 1/60
+ *  @memberof Engine */
+const timeDelta = 1/frameRate;
 
-///////////////////////////////////////////////////////////////////////////////
+/** Array containing all engine objects
+ *  @type {Array}
+ *  @memberof Engine */
+let engineObjects = [];
 
-// Init WebGL, called automatically by the engine
-function glInit()
-{
-    // create the canvas and tile texture
-    glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl', {antialias: false});
-    glTileTexture = glCreateTexture(tileImage);
+/** Array containing only objects that are set to collide with other objects this frame (for optimization)
+ *  @type {Array}
+ *  @memberof Engine */
+let engineObjectsCollide = [];
 
-    // some browsers are much faster without copying the gl buffer so we just overlay it instead
-    glOverlay && document.body.appendChild(glCanvas);
+/** Current update frame, used to calculate time
+ *  @type {Number}
+ *  @memberof Engine */
+let frame = 0;
 
-    // setup vertex and fragment shaders
-    glShader = glCreateProgram(
-        'precision highp float;'+     // use highp for better accuracy
-        'uniform mat4 m;'+            // transform matrix
-        'attribute vec2 p,t;'+        // position, uv
-        'attribute vec4 c,a;'+        // color, additiveColor
-        'varying vec4 v,d,e;'+        // return uv, color, additiveColor
-        'void main(){'+               // shader entry point
-        'gl_Position=m*vec4(p,1,1);'+ // transform position
-        'v=vec4(t,p);d=c;e=a;'+       // pass stuff to fragment shader
-        '}'                           // end of shader
-        ,
-        'precision highp float;'+              // use highp for better accuracy
-        'varying vec4 v,d,e;'+                 // uv, color, additiveColor
-        'uniform sampler2D s;'+                // texture
-        'void main(){'+                        // shader entry point
-        'gl_FragColor=texture2D(s,v.xy)*d+e;'+ // modulate texture by color plus additive
-        '}'                                    // end of shader
-    );
+/** Current engine time since start in seconds, derived from frame
+ *  @type {Number}
+ *  @memberof Engine */
+let time = 0;
 
-    // init buffers
-    const vertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
-    glArrayBuffer = glContext.createBuffer();
-    glPositionData = new Float32Array(vertexData);
-    glColorData = new Uint32Array(vertexData);
-    glBatchCount = 0;
-}
+/** Actual clock time since start in seconds (not affected by pause or frame rate clamping)
+ *  @type {Number}
+ *  @memberof Engine */
+let timeReal = 0;
 
-/** Set the WebGl blend mode, normally you should call setBlendMode instead
- *  @param {Boolean} [additive=0]
- *  @memberof WebGL */
-function glSetBlendMode(additive)
-{
-    // setup blending
-    glAdditive = additive;
-}
+/** Is the game paused? Causes time and objects to not be updated
+ *  @type {Boolean}
+ *  @default 0
+ *  @memberof Engine */
+let paused = 0;
 
-/** Set the WebGl texture, not normally necessary unless multiple tile sheets are used
- *  - 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)
-{
-    // must flush cache with the old texture to set a new one
-    if (texture != glActiveTexture)
-        glFlush();
+/** Set if game is paused
+ *  @param {Boolean} paused
+ *  @memberof Engine */
+function setPaused(_paused) { paused = _paused; }
 
-    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)
+/** 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
+ *  @memberof Engine */
+function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, tileImageSource)
 {
-    // build the shader
-    const shader = glContext.createShader(type);
-    glContext.shaderSource(shader, source);
-    glContext.compileShader(shader);
+    // init engine when tiles load or fail to load
+    tileImage.onerror = tileImage.onload = ()=>
+    {
+        // save tile image info
+        tileImageFixBleed = vec2(tileFixBleedScale).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
+        debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
 
-    // check for errors
-    if (debug && !glContext.getShaderParameter(shader, gl_COMPILE_STATUS))
-        throw glContext.getShaderInfoLog(shader);
-    return shader;
-}
+        // setup html
+        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');
 
-/** Create WebGL program with given shaders
- *  @param {WebGLShader} vsSource
- *  @param {WebGLShader} fsSource
- *  @return {WebGLProgram}
- *  @memberof WebGL */
-function glCreateProgram(vsSource, fsSource)
-{
-    // build the program
-    const program = glContext.createProgram();
-    glContext.attachShader(program, glCompileShader(vsSource, gl_VERTEX_SHADER));
-    glContext.attachShader(program, glCompileShader(fsSource, gl_FRAGMENT_SHADER));
-    glContext.linkProgram(program);
+        // init stuff and start engine
+        debugInit();
+        glEnable && glInit();
 
-    // check for errors
-    if (debug && !glContext.getProgramParameter(program, gl_LINK_STATUS))
-        throw glContext.getProgramInfoLog(program);
-    return program;
-}
+        // create overlay canvas for hud to appear above gl canvas
+        document.body.appendChild(overlayCanvas = document.createElement('canvas'));
+        overlayContext = overlayCanvas.getContext('2d');
 
-/** Create WebGL texture from an image and set the texture settings
- *  @param {Image} image
- *  @return {WebGLTexture}
- *  @memberof WebGL */
-function glCreateTexture(image)
-{
-    // build the texture
-    const texture = glContext.createTexture();
-    glContext.bindTexture(gl_TEXTURE_2D, texture);
-    image && image.width && glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
+        // 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;
         
-    // use point filtering for pixelated rendering
-    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);
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_T, gl_CLAMP_TO_EDGE);
-    return texture;
-}
+        gameInit();
+        engineUpdate();
+    };
 
-// called automatically by engine before render
-function glPreRender()
-{
-    // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
-    glContext.clear(gl_COLOR_BUFFER_BIT);
+    // frame time tracking
+    let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS;
 
-    // set up the shader
-    glContext.useProgram(glShader);
-    glContext.activeTexture(gl_TEXTURE0);
-    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
-    glSetBlendMode();
-    
-    // set vertex attributes
-    let offset = 0;
-    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
+    // main update loop
+    function engineUpdate(frameTimeMS=0)
     {
-        const location = glContext.getAttribLocation(glShader, name);
-        glContext.enableVertexAttribArray(location);
-        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
-        offset += size*typeSize;
+        // update time keeping
+        let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
+        frameTimeLastMS = frameTimeMS;
+        if (debug || showWatermark)
+            averageFPS = lerp(.05, averageFPS, 1e3/(frameTimeDeltaMS||1));
+        const debugSpeedUp   = debug && keyIsDown(107); // +
+        const debugSpeedDown = debug && keyIsDown(109); // -
+        if (debug) // +/- to speed/slow time
+            frameTimeDeltaMS *= debugSpeedUp ? 5 : debugSpeedDown ? .2 : 1;
+        timeReal += frameTimeDeltaMS / 1e3;
+        frameTimeBufferMS += !paused * frameTimeDeltaMS;
+        if (!debugSpeedUp)
+            frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp incase of slow framerate
+
+        if (canvasFixedSize.x)
+        {
+            // clear canvas and set fixed size
+            mainCanvas.width  = canvasFixedSize.x;
+            mainCanvas.height = canvasFixedSize.y;
+            
+            // fit to window by adding space on top or bottom if necessary
+            const aspect = innerWidth / innerHeight;
+            const fixedAspect = mainCanvas.width / mainCanvas.height;
+            (glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
+            (glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
+        }
+        else
+        {
+             // clear canvas and set size to same as window
+             mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
+             mainCanvas.height = min(innerHeight, canvasMaxSize.y);
+        }
+        
+        // clear overlay canvas and set size
+        overlayCanvas.width  = mainCanvas.width;
+        overlayCanvas.height = mainCanvas.height;
+
+        // save canvas size
+        mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+
+        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 / frameRate)
+            {
+                // update game and objects
+                inputUpdate();
+                gameUpdate();
+                engineObjectsUpdate();
+
+                // do post update
+                debugUpdate();
+                gameUpdatePost();
+                inputUpdatePost();
+            }
+
+            // add the time smoothing back in
+            frameTimeBufferMS += deltaSmooth;
+        }
+        
+        // render sort then render while removing destroyed objects
+        enginePreRender();
+        gameRender();
+        engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
+        for (const o of engineObjects)
+            o.destroyed || o.render();
+        gameRenderPost();
+        glRenderPostProcess();
+        medalsRender();
+        touchGamepadRender();
+        debugRender();
+        glEnable && 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 + ' / ' + averageFPS.toFixed(1)
+                + (glEnable ? ' GL' : ' 2D') ;
+            overlayContext.fillText(text, mainCanvas.width-3, 3);
+            overlayContext.fillStyle = '#fff';
+            overlayContext.fillText(text, mainCanvas.width-2, 2);
+            drawCount = 0;
+        }
+
+        requestAnimationFrame(engineUpdate);
     }
-    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
-    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
-    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
-    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 
-    // build the transform matrix
-    const sx = 2 * cameraScale / mainCanvas.width;
-    const sy = 2 * cameraScale / mainCanvas.height;
-    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
-        new Float32Array([
-            sx, 0, 0, 0,
-            0, sy, 0, 0,
-            1, 1, -1, 1,
-            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
-        ])
-    );
+    // set tile image source to load the image and start the engine
+    tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
 }
 
-/** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
- *  @memberof WebGL */
-function glFlush()
+// Called automatically by engine to setup render system
+function enginePreRender()
 {
-    if (!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);
+    // save canvas size
+    mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
 
-    // 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;
-}
+    // disable smoothing for pixel art
+    mainContext.imageSmoothingEnabled = !canvasPixelated;
 
-/** 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 (!glBatchCount && !forceDraw) return;
-    
-    glFlush();
-    
-    // do not draw in overlay mode because the canvas is visible
-    if (!glOverlay || forceDraw)
-        context.drawImage(glCanvas, 0, 0);
+    // setup gl rendering if enabled
+    glEnable && glPreRender();
 }
 
-/** Add a sprite to the gl draw list, used by all gl draw functions
- *  @param x
- *  @param y
- *  @param sizeX
- *  @param sizeY
- *  @param angle
- *  @param uv0X
- *  @param uv0Y
- *  @param uv1X
- *  @param uv1Y
- *  @param rgba
- *  @param [rgbaAdditive=0]
- *  @memberof WebGL */
-function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
+/** Update each engine object, remove destroyed objects, and update time
+ *  @memberof Engine */
+function engineObjectsUpdate()
 {
-    // flush if there is no room for more verts or if different blend mode
-    if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
-        glFlush();
+    // get list of solid objects for physics optimzation
+    engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
 
-    // prepare to create the verts from size and angle
-    const c = Math.cos(angle)/2, s = Math.sin(angle)/2;
-    const cx = c*sizeX, cy = c*sizeY, sx = s*sizeX, sy = s*sizeY;
-        
-    // setup 2 triangles to form a quad
-    for(let i=6, offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT; i--;)
+    // recursive object update
+    function updateObject(o)
     {
-        const a = i-4&&i>1, b = i-5&&i-2&&i-1;
-        glPositionData[offset++] = x + (a?-cx:cx) + (b?sy:-sy);
-        glPositionData[offset++] = y + (b?cy:-cy) + (a?sx:-sx);
-        glPositionData[offset++] = a ? uv0X : uv1X; 
-        glPositionData[offset++] = b ? uv0Y : uv1Y;
-        glColorData[offset++] = rgba; 
-        glColorData[offset++] = rgbaAdditive;
+        if (!o.destroyed)
+        {
+            o.update();
+            for (const child of o.children)
+                updateObject(child);
+        }
     }
-}
+    for (const o of engineObjects)
+        o.parent || updateObject(o);
 
-///////////////////////////////////////////////////////////////////////////////
-// post processing - can be enabled to pass other canvases through a final shader
+    // remove destroyed objects
+    engineObjects = engineObjects.filter(o=>!o.destroyed);
 
-let glPostShader, glPostArrayBuffer, glPostTexture, glPostIncludeOverlay;
+    // increment frame and update time
+    time = ++frame / frameRate;
+}
 
-/** Set up a post processing shader
- *  @param {String} shaderCode
- *  @param {Boolean} includeOverlay
- *  @memberof WebGL */
-function glInitPostProcess(shaderCode, includeOverlay)
+/** Destroy and remove all objects
+ *  @memberof Engine */
+function engineObjectsDestroy()
 {
-    ASSERT(!glPostShader); // can only have 1 post effects shader
-
-    if (!shaderCode) // default shader
-        shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture2D(iChannel0,p/iResolution.xy);}';
-
-    // create the shader
-    glPostShader = glCreateProgram(
-        'precision highp float;'+        // use highp for better accuracy
-        'attribute vec2 p;'+             // position
-        'void main(){'+                  // shader entry point
-        'gl_Position=vec4(p,1,1);'+      // set position
-        '}'                              // end of shader
-        ,
-        'precision highp float;'+        // use highp for better accuracy
-        'uniform sampler2D iChannel0;'+  // input texture
-        'uniform vec3 iResolution;'+     // size of output texture
-        'uniform float iTime;'+          // time passed
-        '\n' + shaderCode + '\n'+        // insert custom shader code
-        'void main(){'+                  // shader entry point
-        'mainImage(gl_FragColor,gl_FragCoord.xy);'+ // call post process function
-        'gl_FragColor.a=1.;'+            // always use full alpha
-        '}'                              // end of shader
-    );
-
-    // create buffer and texture
-    glPostArrayBuffer = glContext.createBuffer();
-    glPostTexture = glCreateTexture();
-    glPostIncludeOverlay = includeOverlay;
-
-    // hide the original 2d canvas
-    mainCanvas.style.visibility = 'hidden';
+    for (const o of engineObjects)
+        o.parent || o.destroy();
+    engineObjects = engineObjects.filter(o=>!o.destroyed);
 }
 
-// Render the post processing shader, called automatically by the engine
-function glRenderPostProcess()
+/** 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
+ *  @memberof Engine */
+function engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)
 {
-    if (!glPostShader)
-        return;
-    
-    // prepare to render post process shader
-    if (glEnable)
+    if (!pos) // all objects
     {
-        glFlush(); // clear out the buffer
-        mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
+        for (const o of objects)
+            callbackFunction(o);
     }
-    else // set viewport
-        glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
-
-    if (glPostIncludeOverlay)
+    else if (size.x != undefined)  // bounding box test
     {
-        // copy overlay canvas so it will be included in post processing
-        mainContext.drawImage(overlayCanvas, 0, 0);
-
-        // clear overlay canvas
-        overlayCanvas.width = mainCanvas.width;
+        for (const o of objects)
+            isOverlapping(pos, size, o.pos, o.size) && callbackFunction(o);
     }
-
-    // setup shader program to draw one triangle
-    glContext.useProgram(glPostShader);
-    glContext.disable(gl_BLEND);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glPostArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, new Float32Array([-3,1,1,-3,1,1]), gl_STATIC_DRAW);
-    glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, true);
-
-    // set textures, pass in the 2d canvas and gl canvas in separate texture channels
-    glContext.activeTexture(gl_TEXTURE0);
-    glContext.bindTexture(gl_TEXTURE_2D, glPostTexture);
-    glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, mainCanvas);
-
-    // set vertex position attribute
-    const vertexByteStride = 8;
-    const pLocation = glContext.getAttribLocation(glPostShader, 'p');
-    glContext.enableVertexAttribArray(pLocation);
-    glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, 0, vertexByteStride, 0);
-
-    // set uniforms and draw
-    const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
-    glContext.uniform1i(uniformLocation('iChannel0'), 0);
-    glContext.uniform1f(uniformLocation('iTime'), time);
-    glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
-    glContext.drawArrays(gl_TRIANGLES, 0, 3);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// store gl constants as integers so their name doesn't use space in minifed
-const 
-gl_ONE = 1,
-gl_TRIANGLES = 4,
-gl_SRC_ALPHA = 770,
-gl_ONE_MINUS_SRC_ALPHA = 771,
-gl_BLEND = 3042,
-gl_TEXTURE_2D = 3553,
-gl_UNSIGNED_BYTE = 5121,
-gl_BYTE = 5120,
-gl_FLOAT = 5126,
-gl_RGBA = 6408,
-gl_NEAREST = 9728,
-gl_LINEAR = 9729,
-gl_TEXTURE_MAG_FILTER = 10240,
-gl_TEXTURE_MIN_FILTER = 10241,
-gl_TEXTURE_WRAP_S = 10242,
-gl_TEXTURE_WRAP_T = 10243,
-gl_COLOR_BUFFER_BIT = 16384,
-gl_CLAMP_TO_EDGE = 33071,
-gl_TEXTURE0 = 33984,
-gl_TEXTURE1 = 33985,
-gl_ARRAY_BUFFER = 34962,
-gl_STATIC_DRAW = 35044,
-gl_DYNAMIC_DRAW = 35048,
-gl_FRAGMENT_SHADER = 35632, 
-gl_VERTEX_SHADER = 35633,
-gl_COMPILE_STATUS = 35713,
-gl_LINK_STATUS = 35714,
-gl_UNPACK_FLIP_Y_WEBGL = 37440,
-
-// constants for batch rendering
-gl_VERTICES_PER_QUAD = 6,
-gl_INDICIES_PER_VERT = 6,
-gl_MAX_BATCH = 1<<16,
-gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2, // vec2 * 2 + (char * 4) * 2
-gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE;
+    else  // circle test
+    {
+        const sizeSquared = size*size;
+        for (const o of objects)
+            pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
+    }
+}