littlejsengine 1.17.1 → 1.17.10

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.17.1';
+const engineVersion = '1.17.10';
 
 /** Frames per second to update
  *  @type {number}
@@ -88,8 +88,9 @@ function getPaused() { return paused; }
  *  @memberof Engine */
 function setPaused(isPaused=true) { paused = isPaused; }
 
-// Frame time tracking
+// Engine internal variables
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
+let showEngineVersion = true;
 
 ///////////////////////////////////////////////////////////////////////////////
 // plugin hooks
@@ -153,16 +154,17 @@ function engineAddPlugin(update, render, glContextLost, glContextRestored)
  *  @example
  *  // Basic engine startup
  *  engineInit(
- *    () => { LOG('Game initialized!'); },  // gameInit
- *    () => { updateGameLogic(); },         // gameUpdate
- *    () => { updateUI(); },                // gameUpdatePost
- *    () => { drawBackground(); },          // gameRender
- *    () => { drawHUD(); },                 // gameRenderPost
+ *    ()=> { LOG('Game initialized!'); },  // gameInit
+ *    ()=> { updateGameLogic(); },         // gameUpdate
+ *    ()=> { updateUI(); },                // gameUpdatePost
+ *    ()=> { drawBackground(); },          // gameRender
+ *    ()=> { drawHUD(); },                 // gameRenderPost
  *    ['tiles.png', 'tilesLevel.png']       // images to load
  *  );
  *  @memberof Engine */
 async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
+    showEngineVersion && console.log(`${engineName} Engine v${engineVersion}`);
     ASSERT(!mainContext, 'engine already initialized');
     ASSERT(isArray(imageSources), 'pass in images as array');
 
@@ -431,7 +433,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         promises.push(new Promise(resolve =>
         {
             let t = 0;
-            console.log(`${engineName} Engine v${engineVersion}`);
             updateSplash();
             function updateSplash()
             {
@@ -463,13 +464,13 @@ function engineObjectsUpdate()
     engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
 
     // recursive object update
-    function updateObject(o)
+    function updateChildObject(o)
     {
         if (o.destroyed) return;
 
         o.update();
         for (const child of o.children)
-            updateObject(child);
+            updateChildObject(child);
     }
     for (const o of engineObjects)
     {
@@ -479,7 +480,7 @@ function engineObjectsUpdate()
         o.update();
         o.updatePhysics();
         for (const child of o.children)
-            updateObject(child);
+            updateChildObject(child);
         o.updateTransforms();
     }
 
@@ -488,11 +489,14 @@ function engineObjectsUpdate()
 }
 
 /** Destroy and remove all objects
+ *  - This can be used to clear out all objects when restarting a level
+ *  - Objects can override their destroy function to do cleanup or stick around
+ *  @param {boolean} [immediate] - should attached effects be allowed to die off?
  *  @memberof Engine */
-function engineObjectsDestroy()
+function engineObjectsDestroy(immediate=true)
 {
     for (const o of engineObjects)
-        o.parent || o.destroy();
+        o.parent || o.destroy(immediate);
     engineObjects = engineObjects.filter(o=>!o.destroyed);
 }
 
@@ -567,165 +571,140 @@ function engineObjectsRaycast(start, end, objects=engineObjects)
 ///////////////////////////////////////////////////////////////////////////////
 function drawEngineLogo(t)
 {
+    const blackAndWhite = 0;
+    const showName = 1;
+
     // LittleJS Logo and Splash Screen
     const x = mainContext;
     const w = mainCanvas.width = innerWidth;
     const h = mainCanvas.height = innerHeight;
-
     {
         // background
         const p3 = percent(t, 1, .8);
         const p4 = percent(t, 0, .5);
-        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
+        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.6);
         g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
         g.addColorStop(1,hsl(0,0,0,p3).toString());
         x.save();
         x.fillStyle = g;
         x.fillRect(0,0,w,h);
     }
-
-    // draw LittleJS logo...
-    const rect = (X, Y, W, H, C)=>
+    const gradient = (X1,Y1,X2,Y2,C,S=1)=>
+    {
+        if (C >= 0)
+        {
+            if (blackAndWhite)
+                x.fillStyle = '#fff';
+            else
+            {
+                const g = x.fillStyle = x.createLinearGradient(X1,Y1,X2,Y2);
+                g.addColorStop(0,color(C,2));
+                g.addColorStop(1,color(C,1));
+            }
+        }
+        else
+            x.fillStyle = '#000';
+        C >= -1 ? (x.fill(), S && x.stroke()) : x.stroke();
+    }
+    const circle = (X,Y,R,A=0,B=2*PI,C,S)=>
     {
         x.beginPath();
-        x.rect(X,Y,W,C?H*p:H);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const line = (X, Y, Z, W)=>
+        x.arc(X,Y,R,p*A,p*B);
+        gradient(X,Y-R,X,Y+R,C,S);
+    }
+    const rect = (X,Y,W,H,C)=>
     {
         x.beginPath();
-        x.lineTo(X,Y);
-        x.lineTo(Z,W);
-        x.stroke();
-    };
-    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+        x.rect(X,Y,W,H*p);
+        gradient(X,Y+H,X+W,Y,C);
+    }
+    const poly = (points,C,Y,H)=>
     {
-        const D = (A+B)/2, E = p*(B-A)/2;
         x.beginPath();
-        F && x.lineTo(X,Y);
-        x.arc(X,Y,R,D-E,D+E);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const color = (c=0, l=0) =>
-        hsl([.98,.3,.57,.14][c%4],.9,[0,.3,.5,.8,.9][l]).toString();
+        for (const p of points)
+            x.lineTo(p.x, p.y);
+        x.closePath();
+        gradient(0, Y, 0, Y+H,C);
+    }
+    const color = (c,l)=> l?`hsl(${[.95,.56,.13][c%3]*360} 99%${[0,50,75][l]}%`:'#000';
+
+    // center and fit tos screen
     const alpha = wave(1,1,t);
     const p = percent(alpha, .1, .5);
-
-    // setup
+    const size = min(6, min(w,h)/99);
     x.translate(w/2,h/2);
-    const size = min(6, min(w,h)/99); // fit to screen
     x.scale(size,size);
     x.translate(-40,-35);
+    p < 1 && x.setLineDash([99*p,99]);
     x.lineJoin = x.lineCap = 'round';
     x.lineWidth = .1 + p*1.9;
+    //x.strokeStyle='#fff7';
+
+    if (showName)
+    {
+        // engine name text
+        const Y = 54;
+        const s = 'LittleJS';
+        x.font = '900 15.5px arial';
+        x.lineWidth = .1+p*3.9;
+        x.textAlign = 'center';
+        x.textBaseline = 'top';
+        rect(11,Y+2,59,8*p,-1);
+        x.beginPath();
 
-    // drawing effect
-    const p2 = percent(alpha,.1,1);
-    x.setLineDash([99*p2,99]);
-
-    // cab top
-    rect(7,16,18,-8,color(2,2));
-    rect(7,8,18,4,color(2,3));
-    rect(25,8,8,8,color(2,1));
-    rect(25,8,-18,8);
-    rect(25,8,8,8);
-
-    // cab
-    rect(25,16,7,24,color());
-    rect(11,39,14,-23,color(1,1));
-    rect(11,16,14,18,color(1,2));
-    rect(11,16,14,8,color(1,3));
-    rect(25,16,-14,24);
-
-    // cab window
-    rect(15,29,6,-9,color(2,2));
-    circle(15,21,5,0,PI/2,color(2,4),1);
-    rect(21,21,-6,9);
-
-    // little stack
-    rect(37,14,9,6,color(3,2));
-    rect(37,14,4.5,6,color(3,3));
-    rect(37,14,9,6);
+        let w2 = 0;
+        for (let i=0;i<s.length;++i)
+            w2 += x.measureText(s[i]).width;
+        for (let j=2;j--;)
+        for (let i=0,X=40-w2/2;i<s.length;++i)
+        {
+            const w = x.measureText(s[i]).width, X2 = X+w/2;
+            gradient(X2,Y,X2+2,Y+13,i>5?1:0);
+            x[j?'strokeText':'fillText'](s[i],X2,Y+.5,17*p);
+            X += w;
+        }
+
+        x.lineWidth = .1 + p*1.9;
+        rect(3,Y,73,0); // bottom
+    }
+
+    rect(7,15,26,-7,0);   // cab top
+    rect(25,15,8,25,-1);  // cab front
+    rect(10,40,15,-25,1); // cab back
+    rect(14,21,7,9,2);    // cab window
+    rect(38,15,6,6,2);    // little stack
 
     // big stack
-    rect(50,20,10,-8,color(0,1));
-    rect(50,20,6.5,-8,color(0,2));
-    rect(50,20,3.5,-8,color(0,3));
-    rect(50,20,10,-8);
-    circle(55,2,11.4,.5,PI-.5,color(3,3));
-    circle(55,2,11.4,.5,PI/2,color(3,2),1);
-    circle(55,2,11.4,.5,PI-.5);
-    rect(45,7,20,-7,color(0,2));
-    rect(45,-1,20,4,color(0,3));
-    rect(45,-1,20,8);
+    rect(49,20,10,-6,0);
+    const stackPoints = [vec2(44,8),vec2(64,8),vec2(59,8+6*p),vec2(49,8+6*p)];
+    poly(stackPoints,2,8,6*p);
+    rect(44,8,20,-7,0);
 
     // engine
-    for (let i=5; i--;)
-    {
-        // stagger radius to fix slight seam
-        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
-        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
-        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
-    }
+    for (let i=5;i--;) circle(59-i*6,30,10,0,9,1,0);
+    circle(59,30,4,0,9,2); // light
 
     // engine outline
-    circle(36,30,10,PI/2,PI*3/2);
-    circle(48,30,10,PI/2,PI*3/2);
-    circle(60,30,10);
-    line(36,20,60,20);
-
-    // engine front light
-    circle(60,30,4,PI,3*PI,color(3,2));
-    circle(60,30,4,PI,2*PI,color(3,3));
-    circle(60,30,4,PI,3*PI);
+    rect(35,20,24,0);  // top
+    circle(59,30,10);  // front
+    circle(47,30,10,PI/2,PI*3/2); // middle
+    circle(35,30,10,PI/2,PI*3/2); // back
+    rect(7,40,13,7,-1);   // bottom back
+    rect(17,40,43,14,-1); // bottom center
 
-    // front brush
-    for (let i=6; i--;)
+    // wheels
+    for (let i=3;i--;)
+    for (let j=2;j--;)
+        circle(15*i+17,47,j?7:1,PI,3*PI,2);
+    
+    // cowcatcher
+    for (let i=2;i--;)
     {
-        x.beginPath();
-        x.lineTo(53,54);
-        x.lineTo(53,40);
-        x.lineTo(53+(1+i*2.9)*p,40);
-        x.lineTo(53+(4+i*3.5)*p,54);
-        x.fillStyle = color(0,i%2+2);
-        x.fill();
-        i%2 && x.stroke();
+        let w=6, s=7, o=53+w*p*i
+        const points = [vec2(o+s,54),vec2(o,40),vec2(o+w*p,40),vec2(o+s+w*p,54)];
+        poly(points,0,40,14);
     }
 
-    // wheels
-    rect(6,40,5,5);
-    rect(6,40,5,5,color());
-    rect(15,54,38,-14,color());
-    for (let i=3; i--;)
-    for (let j=2; j--;)
-    {
-        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
-        x.stroke();
-        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
-        x.stroke();
-    }
-    line(6,40,68,40); // center
-    line(77,54,4,54); // bottom
-
-    // draw engine name
-    const s = engineName;
-    x.font = '900 16px arial';
-    x.textAlign = 'center';
-    x.textBaseline = 'top';
-    x.lineWidth = .1+p*3.9;
-    let w2 = 0;
-    for (let i=0; i<s.length; ++i)
-        w2 += x.measureText(s[i]).width;
-    for (let j=2; j--;)
-    for (let i=0, X=41-w2/2; i<s.length; ++i)
-    {
-        x.fillStyle = color(i,2);
-        const w = x.measureText(s[i]).width;
-        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
-        X += w;
-    }
     x.restore();
 }
 /**
@@ -782,25 +761,25 @@ function debugProtectConstant(o){ return o; }
 const PI = Math.PI;
 
 /** Returns absolute value of value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const abs = Math.abs;
 
 /** Returns floored value of value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const floor = Math.floor;
 
 /** Returns ceiled value of value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const ceil = Math.ceil;
 
 /** Returns rounded value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const round = Math.round;
@@ -818,7 +797,7 @@ const min = Math.min;
 const max = Math.max;
 
 /** Returns the sign of value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const sign = Math.sign;
@@ -830,25 +809,25 @@ const sign = Math.sign;
 const hypot = Math.hypot;
 
 /** Returns log2 of value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const log2 = Math.log2;
 
 /** Returns sin of value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const sin = Math.sin;
 
 /** Returns cos of value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const cos = Math.cos;
 
 /** Returns tan of value passed in
- *  @param {number} value
+ *  @param {number} x
  *  @return {number}
  *  @memberof Math */
 const tan = Math.tan;
@@ -1883,6 +1862,90 @@ const MAGENTA = debugProtectConstant(rgb(1,0,1));
  * @namespace Utilities
  */
 
+/**
+ * Timer object tracks how long has passed since it was set
+ * @memberof Engine
+ * @example
+ * let a = new Timer;    // creates a timer that is not set
+ * a.set(3);             // sets the timer to 3 seconds
+ *
+ * let b = new Timer(1); // creates a timer with 1 second left
+ * b.unset();            // unset the timer
+ */
+class Timer
+{
+    /** Create a timer object set time passed in
+     *  @param {number} [timeLeft] - How much time left before the timer 
+     *  @param {boolean} [useRealTime] - Should the timer keep running even when the game is paused? (useful for UI) */
+    constructor(timeLeft, useRealTime=false)
+    {
+        ASSERT(timeLeft === undefined || isNumber(timeLeft), 'Constructed Timer is invalid.', timeLeft);
+        this.useRealTime = useRealTime;
+        const globalTime = this.getGlobalTime();
+        this.time = timeLeft === undefined ? undefined : globalTime + timeLeft;
+        this.setTime = timeLeft;
+    }
+
+    /** Set the timer with seconds passed in
+     *  @param {number} [timeLeft] - How much time left before the timer is elapsed in seconds */
+    set(timeLeft=0)
+    {
+        ASSERT(isNumber(timeLeft), 'Timer is invalid.', timeLeft);
+        const globalTime = this.getGlobalTime();
+        this.time = globalTime + timeLeft;
+        this.setTime = timeLeft;
+    }
+
+    /** Set if the timer should keep running even when the game is paused
+     *  @param {boolean} [useRealTime] */
+    setUseRealTime(useRealTime=true)
+    {
+        ASSERT(!this.isSet(), 'Cannot change global time setting while timer is set.');
+        this.useRealTime = useRealTime;
+    }
+
+    /** Unset the timer */
+    unset() { this.time = undefined; }
+
+    /** Returns true if set
+     * @return {boolean} */
+    isSet() { return this.time !== undefined; }
+
+    /** Returns true if set and has not elapsed
+     * @return {boolean} */
+    active() { return this.getGlobalTime() < this.time; }
+
+    /** Returns true if set and elapsed
+     * @return {boolean} */
+    elapsed() { return this.getGlobalTime() >= this.time; }
+
+    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
+     * @return {number} */
+    get() { return this.isSet()? this.getGlobalTime() - this.time : 0; }
+
+    /** Get percentage elapsed based on time it was set to, returns 0 if not set
+     * @return {number} */
+    getPercent() { return this.isSet()? 1-percent(this.time - this.getGlobalTime(), 0, this.setTime) : 0; }
+
+    /** Get the time this timer was set to, returns 0 if not set
+     * @return {number} */
+    getSetTime() { return this.isSet() ? this.setTime : 0; }
+
+    /** Get the current global time this timer is based on
+     * @return {number} */
+    getGlobalTime() { return this.useRealTime ? timeReal : time; }
+
+    /** Returns this timer expressed as a string
+     * @return {string} */
+    toString() { return this.isSet() ? 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(); }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
 /** Formats seconds to mm:ss style for display purposes
  *  @param {number} t - time in seconds
  *  @return {string}
@@ -1969,86 +2032,29 @@ function shareURL(title, url, callback)
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/**
- * Timer object tracks how long has passed since it was set
- * @memberof Engine
- * @example
- * let a = new Timer;    // creates a timer that is not set
- * a.set(3);             // sets the timer to 3 seconds
- *
- * let b = new Timer(1); // creates a timer with 1 second left
- * b.unset();            // unset the timer
- */
-class Timer
+/** Read save data from local storage
+ *  @param {string} saveName - unique name for the game/save
+ *  @param {Object} [defaultSaveData] - default values for save
+ *  @return {Object}
+ *  @memberof Utilities */
+function readSaveData(saveName, defaultSaveData)
 {
-    /** Create a timer object set time passed in
-     *  @param {number} [timeLeft] - How much time left before the timer 
-     *  @param {boolean} [useRealTime] - Should the timer keep running even when the game is paused? (useful for UI) */
-    constructor(timeLeft, useRealTime=false)
-    {
-        ASSERT(timeLeft === undefined || isNumber(timeLeft), 'Constructed Timer is invalid.', timeLeft);
-        this.useRealTime = useRealTime;
-        const globalTime = this.getGlobalTime();
-        this.time = timeLeft === undefined ? undefined : globalTime + timeLeft;
-        this.setTime = timeLeft;
-    }
-
-    /** Set the timer with seconds passed in
-     *  @param {number} [timeLeft] - How much time left before the timer is elapsed in seconds */
-    set(timeLeft=0)
-    {
-        ASSERT(isNumber(timeLeft), 'Timer is invalid.', timeLeft);
-        const globalTime = this.getGlobalTime();
-        this.time = globalTime + timeLeft;
-        this.setTime = timeLeft;
-    }
-
-    /** Set if the timer should keep running even when the game is paused
-     *  @param {boolean} [useRealTime] */
-    setUseRealTime(useRealTime=true)
-    {
-        ASSERT(!this.isSet(), 'Cannot change global time setting while timer is set.');
-        this.useRealTime = useRealTime;
-    }
-
-    /** Unset the timer */
-    unset() { this.time = undefined; }
-
-    /** Returns true if set
-     * @return {boolean} */
-    isSet() { return this.time !== undefined; }
-
-    /** Returns true if set and has not elapsed
-     * @return {boolean} */
-    active() { return this.getGlobalTime() < this.time; }
-
-    /** Returns true if set and elapsed
-     * @return {boolean} */
-    elapsed() { return this.getGlobalTime() >= this.time; }
-
-    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
-     * @return {number} */
-    get() { return this.isSet()? this.getGlobalTime() - this.time : 0; }
-
-    /** Get percentage elapsed based on time it was set to, returns 0 if not set
-     * @return {number} */
-    getPercent() { return this.isSet()? 1-percent(this.time - this.getGlobalTime(), 0, this.setTime) : 0; }
-
-    /** Get the time this timer was set to, returns 0 if not set
-     * @return {number} */
-    getSetTime() { return this.isSet() ? this.setTime : 0; }
-
-    /** Get the current global time this timer is based on
-     * @return {number} */
-    getGlobalTime() { return this.useRealTime ? timeReal : time; }
-
-    /** Returns this timer expressed as a string
-     * @return {string} */
-    toString() { return this.isSet() ? abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }
+    ASSERT(isString(saveName), 'loadData requires saveName string');
+    
+    // replace undefined values with defaults
+    const data = localStorage[saveName];
+    const loadedData = data ? JSON.parse(data) : {};
+    return { ...defaultSaveData, ...loadedData };
+}
 
-    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
-     * @return {number} */
-    valueOf() { return this.get(); }
+/** Write save data to local storage
+ *  @param {string} saveName - unique name for the game/save
+ *  @param {Object} saveData - object containing data to be saved
+ *  @memberof Utilities */
+function writeSaveData(saveName, saveData)
+{
+    ASSERT(isString(saveName), 'saveData requires saveName string');
+    localStorage[saveName] = JSON.stringify(saveData);
 }
 /**
  * LittleJS Engine Settings
@@ -2709,17 +2715,19 @@ class EngineObject
         this.additiveColor = undefined;
         /** @property {boolean} - Should it flip along y axis when rendered */
         this.mirror = false;
+        /** @property {boolean} - Has object been destroyed? */
+        this.destroyed = false;
 
         // physical properties
-        /** @property {number} [mass=objectDefaultMass] - How heavy the object is, static if 0 */
+        /** @property {number} - 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) */
+        /** @property {number} - 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) */
+        /** @property {number} - How much to slow down rotation each frame (0-1) */
         this.angleDamping = objectDefaultAngleDamping;
-        /** @property {number} [restitution=objectDefaultRestitution] - How bouncy the object is when colliding (0-1) */
+        /** @property {number} - How bouncy the object is when colliding (0-1) */
         this.restitution = objectDefaultRestitution;
-        /** @property {number} [friction=objectDefaultFriction] - How much friction to apply when sliding (0-1) */
+        /** @property {number} - How much friction to apply when sliding (0-1) */
         this.friction  = objectDefaultFriction;
         /** @property {number} - How much to scale gravity by for this object */
         this.gravityScale = 1;
@@ -2920,7 +2928,7 @@ class EngineObject
         if (this.collideTiles)
         {
             // check collision against tiles
-            const hitLayer = tileCollisionTest(this.pos, this.size, this)
+            const hitLayer = tileCollisionTest(this.pos, this.size, this);
             if (hitLayer)
             {
                 // if already was stuck in collision, don't do anything
@@ -2928,10 +2936,10 @@ class EngineObject
                 if (!tileCollisionTest(oldPos, this.size, this))
                 {
                     // test which side we bounced off (or both if a corner)
-                    const blockedLayerY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
-                    const blockedLayerX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
-
-                    if (blockedLayerX)
+                    const isBlockedX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
+                    const isBlockedY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
+                    const restitution = max(this.restitution, hitLayer.restitution);
+                    if (isBlockedX)
                     {
                         // try to move up a tiny bit
                         const epsilon = 1e-3;
@@ -2947,16 +2955,12 @@ class EngineObject
                             return;
                         }
 
-                        // move to previous position and bounce
+                        // move to previous X position and bounce
                         this.pos.x = oldPos.x;
-                        this.velocity.x *= -this.restitution;
+                        this.velocity.x *= -restitution;
                     }
-                    if (blockedLayerY || !blockedLayerX)
+                    if (isBlockedY || !isBlockedX)
                     {
-                        // bounce velocity
-                        const restitution = max(this.restitution, hitLayer.restitution);
-                        this.velocity.y *= -restitution;
-
                         if (wasFalling)
                         {
                             // adjust position to slightly away from nearest tile
@@ -2972,10 +2976,12 @@ class EngineObject
                         }
                         else
                         {
-                            // move to previous position
+                            // move to previous Y position
                             this.pos.y = oldPos.y;
                             this.groundObject = undefined;
                         }
+                        // bounce velocity
+                        this.velocity.y *= -restitution;
                     }
                     debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
@@ -2993,19 +2999,19 @@ class EngineObject
         drawTile(this.pos, this.drawSize || this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
     }
 
-    /** Destroy this object, destroy its children, detach its parent, and mark it for removal */
-    destroy()
+    /** Destroy this object, destroy its children, detach its parent, and mark it for removal
+     *  @param {boolean} [immediate] - should attached effects be allowed to die off? */
+    destroy(immediate=false)
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         // disconnect from parent and destroy children
-        this.destroyed = 1;
+        this.destroyed = true;
         this.parent?.removeChild(this);
         for (const child of this.children)
         {
             child.parent = undefined;
-            child.destroy();
+            child.destroy(immediate);
         }
     }
 
@@ -3104,7 +3110,7 @@ class EngineObject
     }
 
     /** Check if overlapping another engine object
-     *  Collisions are resoloved to prevent overlaps
+     *  Collisions are resolved to prevent overlaps
      *  @param {EngineObject} object
      *  @return {boolean} */
     isOverlappingObject(object)
@@ -3356,7 +3362,7 @@ class TileInfo
     }
 
     /**
-     * Returns a tile info for an index using this tile as refrence
+     * Returns a tile info for an index using this tile as reference
      * @param {Vector2|number} [index=0]
      * @return {TileInfo}
      */
@@ -3424,7 +3430,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=WHITE,
     ASSERT(!additiveColor || isColor(additiveColor), 'additiveColor must be a color');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
-    const textureInfo = tileInfo && tileInfo.textureInfo;
+    const textureInfo = tileInfo?.textureInfo;
     const bleed = tileInfo?.bleed ?? 0;
     if (useWebGL && glEnable)
     {
@@ -3730,9 +3736,12 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
     ASSERT(isColor(color) && isColor(lineColor), 'color is invalid');
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
-    ASSERT(lineWidth >= 0 && lineWidth < size.x && lineWidth < size.y, 'invalid lineWidth');
+    ASSERT(lineWidth >= 0, 'lineWidth must be a positive value or 0');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
+    // clamp line width to prevent artifacts
+    lineWidth = clamp(lineWidth, 0, Math.min(size.x, size.y));
+
     if (useWebGL && glEnable)
     {
         // draw as a regular polygon
@@ -4183,7 +4192,7 @@ let engineFontImage;
 class FontImage
 {
     /** Create an image font
-     *  @param {TileInfo} tileInfo - Tile info of first characeter in font
+     *  @param {TileInfo} tileInfo - Tile info of first character in font
      */
     constructor(tileInfo)
     {
@@ -4698,9 +4707,9 @@ function inputInit()
     function touchInputInit()
     {
         // add non passive touch event listeners
-        document.addEventListener('touchstart', (e) => handleTouch(e), { passive: false });
-        document.addEventListener('touchmove',  (e) => handleTouch(e), { passive: false });
-        document.addEventListener('touchend',   (e) => handleTouch(e), { passive: false });
+        document.addEventListener('touchstart', (e)=> handleTouch(e), { passive: false });
+        document.addEventListener('touchmove',  (e)=> handleTouch(e), { passive: false });
+        document.addEventListener('touchend',   (e)=> handleTouch(e), { passive: false });
 
         // handle all touch events the same way
         let wasTouching;
@@ -4906,7 +4915,7 @@ function inputUpdate()
         // poll gamepads
         const maxGamepads = 8;
         const gamepads = navigator.getGamepads();
-        const gamepadCount = min(maxGamepads, gamepads.length)
+        const gamepadCount = min(maxGamepads, gamepads.length);
         for (let i=0; i<gamepadCount; ++i)
         {
             // get or create gamepad data
@@ -5059,7 +5068,7 @@ function inputRender()
     }
 }
 
-// center position for right tocuh pad face buttons
+// center position for right touch pad face buttons
 function touchGamepadButtonCenter()
 {
     const center = mainCanvasSize.subtract(vec2(touchGamepadSize));
@@ -5111,29 +5120,46 @@ function audioInit()
 ///////////////////////////////////////////////////////////////////////////////
 
 /**
- * Sound Object - Stores a sound for later use and can be played positionally
+ * Sound Object - Stores a sound for later
+ * - this can be used to load and play wave, mp3, and ogg files
+ * - it can also create sounds using the ZzFX sound generator
+ * - can attenuate and apply stereo panning to sounds
+ * - sound instance control with pause/resume capability
  *
  * <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
  * @memberof Audio
  * @example
- * // create a sound
+ * // load an audio asset file
+ * const sound_example = new Sound('sound.mp3');
+ *
+ * // create a zzfx sound
  * const sound_example = new Sound([.5,.5]);
  *
- * // play the sound
+ * // play a sound
  * sound_example.play();
  */
 class Sound
 {
-    /** Create a sound object and cache the zzfx samples for later use
-     *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
+    /**
+     * @callback SoundLoadCallback - Function called when sound is loaded
+     * @param {Sound} sound
+     * @memberof Audio
+     */
+    
+    /** Create a sound object and cache the audio for later use
+     *  @param {string|Array} [asset] - Filename of audio file or zzfx array
+     *  @param {number} [randomness] - How much to randomize frequency each time sound plays, for zzfx sounds the zzfx default is used if undefined
      *  @param {number} [range=soundDefaultRange] - World space max range of sound
      *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
+     *  @param {SoundLoadCallback} [onloadCallback] - callback function to call when sound is loaded
      */
-    constructor(zzfxSound, range=soundDefaultRange, taper=soundDefaultTaper)
+    constructor(asset, randomness, range=soundDefaultRange, taper=soundDefaultTaper, onloadCallback)
     {
         if (!soundEnable || headlessMode) return;
 
-        ASSERT(!zzfxSound || isArray(zzfxSound), 'zzfxSound is invalid');
+        ASSERT(!asset || isArray(asset) || isString(asset), 'asset must be a file name or zzfx array');
+        ASSERT(randomness === undefined || isNumber(randomness), 'randomness must be a number');
+        ASSERT(randomness === undefined || randomness >= 0 && randomness <=1, 'randomness must be between 0 and 1');
         ASSERT(isNumber(range), 'range must be a number');
         ASSERT(isNumber(taper), 'taper must be a number');
 
@@ -5142,23 +5168,35 @@ class Sound
         /** @property {number} - At what percentage of range should it start tapering */
         this.taper = taper;
         /** @property {number} - How much to randomize frequency each time sound plays */
-        this.randomness = 0;
+        this.randomness = randomness ?? 0;
         /** @property {number} - Sample rate for this sound */
         this.sampleRate = audioDefaultSampleRate;
         /** @property {number} - Percentage of this sound currently loaded */
         this.loadedPercent = 0;
+        /** @property {SoundLoadCallback} - function to call when sound is loaded */
+        this.onloadCallback = onloadCallback;
 
-        // generate zzfx sound now for fast playback
-        if (zzfxSound)
+        if (Array.isArray(asset))
         {
+            // generate zzfx sound
+            const zzfxSound = asset;
+
             // remove randomness so it can be applied on playback
-            const randomnessIndex = 1, defaultRandomness = .05;
+            const defaultRandomness = randomness ?? .05;
+            const randomnessIndex = 1;
             this.randomness = zzfxSound[randomnessIndex] ?? defaultRandomness;
             zzfxSound[randomnessIndex] = 0;
 
             // generate the zzfx samples
             this.sampleChannels = [zzfxG(...zzfxSound)];
             this.loadedPercent = 1;
+            onloadCallback?.(this);
+        }
+        else if (typeof asset === 'string')
+        {
+            // load the audio file
+            const filename = asset;
+            this.loadSound(filename);
         }
     }
 
@@ -5210,7 +5248,7 @@ class Sound
      *  @param {number} [volume] - Volume to play the music at
      *  @param {boolean} [loop] - Should the music loop?
      *  @param {boolean} [paused] - Should the music start paused
-     *  @return {SoundInstance} - The audio source node
+     *  @return {SoundInstance} - The sound instance
      */
     playMusic(volume=1, loop=true, paused=false)
     { return this.play(undefined, volume, 1, 0, loop, paused); }
@@ -5220,70 +5258,27 @@ class Sound
      *  @param {number}  [semitoneOffset=0] - How many semitones to offset pitch
      *  @param {Vector2} [pos] - World space position to play the sound if any
      *  @param {number}  [volume=1] - How much to scale volume by
-     *  @return {SoundInstance} - The audio source node
+     *  @return {SoundInstance} - The sound instance
      */
     playNote(semitoneOffset=0, pos, volume)
-    {
-        ASSERT(isNumber(semitoneOffset), 'semitoneOffset must be a number');
-        const pitch = getNoteFrequency(semitoneOffset, 1);
-        return this.play(pos, volume, pitch, 0);
-    }
-
-    /** Get how long this sound is in seconds
-     *  @return {number} - How long the sound is in seconds (undefined if loading)
-     */
-    getDuration()
-    { return this.sampleChannels?.[0].length / this.sampleRate || 0; }
-
-    /** Check if sound is loaded, for sounds fetched from a url
-     *  @return {boolean} - True if sound is loaded and ready to play
-     */
-    isLoaded() { return this.loadedPercent === 1; }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-/**
- * Sound Wave Object - Loads and stores an audio file for later use
- * - this can be used to load and play wave, mp3, and ogg files
- * @extends Sound
- * @memberof Audio
- * @example
- * // load an audio asset file
- * const sound_example = new SoundWave('sound.mp3');
- *
- * // play the sound
- * sound_example.play();
- */
-class SoundWave extends Sound
-{
-    /**
-     * @callback SoundLoadCallback - Function called when sound is loaded
-     * @param {SoundWave} sound
-     * @memberof Audio
-     */
-    
-    /** Create a sound object and cache the wave file for later use
-     *  @param {string} filename - Filename of audio file to load
-     *  @param {number} [randomness] - How much to randomize frequency each time sound plays
-     *  @param {number} [range=soundDefaultRange] - World space max range of sound
-     *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
-     *  @param {SoundLoadCallback} [onloadCallback] - callback function to call when sound is loaded
-     */
-    constructor(filename, randomness=0, range, taper, onloadCallback)
-    {
-        super(undefined, range, taper);
-        if (!soundEnable || headlessMode) return;
-        ASSERT(!filename || isString(filename), 'filename must be a string');
-        ASSERT(isNumber(randomness), 'randomness must be a number');
-
-        /** @property {SoundLoadCallback} - callback function to call when sound is loaded */
-        this.onloadCallback = onloadCallback;
-        this.randomness = randomness;
-        filename && this.loadSound(filename);
+    {
+        ASSERT(isNumber(semitoneOffset), 'semitoneOffset must be a number');
+        const pitch = getNoteFrequency(semitoneOffset, 1);
+        return this.play(pos, volume, pitch, 0);
     }
 
-    /** Loads a sound from a URL and decodes it into sample data. Must be used with await!
+    /** Get how long this sound is in seconds
+     *  @return {number} - How long the sound is in seconds (undefined if loading)
+     */
+    getDuration()
+    { return this.sampleChannels?.[0]?.length / this.sampleRate || 0; }
+
+    /** Check if sound is loaded, for sounds fetched from a url
+     *  @return {boolean} - True if sound is loaded and ready to play
+     */
+    isLoaded() { return this.loadedPercent === 1; }
+    
+    /** Loads a sound from a URL and decodes it into sample data.
     *  @param {string} filename
     *  @return {Promise<void>} */
     async loadSound(filename)
@@ -5774,50 +5769,62 @@ const tileCollisionLayers = [];
 
 /** Get tile collision data for a given cell in the grid
 *  @param {Vector2} pos
+*  @param {boolean} [solidOnly] - Only check solid layers?
 *  @return {number}
 *  @memberof TileLayers */
-function tileCollisionGetData(pos)
+function tileCollisionGetData(pos, solidOnly=true)
 {
     // check all tile collision layers
     for (const layer of tileCollisionLayers)
+        if (!solidOnly || layer.isSolid)
         if (pos.arrayCheck(layer.size))
-            return layer.getCollisionData(pos);
+        {
+            const data = layer.getCollisionData(pos);
+            if (data) return data;
+        }
     return 0;
 }
 
 /** Check if a tile layer collides with another object
- *  @param {Vector2}      pos
- *  @param {Vector2}      [size=vec2()]
- *  @param {EngineObject} [object] - An object or undefined for generic test
- *  @param {boolean}      [solidOnly] - Only check solid layers if true
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=vec2()]
+ *  @param {EngineObject|TileCollisionCallback} [callbackObject] - Callback, engine object, or undefined
+ *  @param {boolean} [solidOnly] - Only check solid layers?
  *  @return {TileCollisionLayer}
  *  @memberof TileLayers */
-function tileCollisionTest(pos, size=vec2(), object, solidOnly=true)
+function tileCollisionTest(pos, size=vec2(), callbackObject, solidOnly=true)
 {
     for (const layer of tileCollisionLayers)
     {
         if (!solidOnly || layer.isSolid)
-        if (layer.collisionTest(pos, size, object))
+        if (layer.collisionTest(pos, size, callbackObject))
             return layer;
     }
 }
 
+/**
+ *  @callback TileCollisionCallback - Function to handle a tile collision test
+ *  @param {number} tileData - the value of the tile at the position
+ *  @param {Vector2} pos - world space position of tile where the collision occurred
+ *  @memberof TileLayers
+ */
+
 /** Return the exact position of the boundary of first tile hit, undefined if nothing was hit.
- *  The point will be inside the colliding tile if it hits (may have a tiny shift)
- *  @param {Vector2}      posStart
- *  @param {Vector2}      posEnd
- *  @param {EngineObject} [object] - An object or undefined for generic test
- *  @param {Vector2}      [normal] - Optional normal of the surface hit
- *  @param {boolean}      [solidOnly=true] - Only check solid layers if true
+ *  The point will be inside the colliding tile if it hits
+ *  @param {Vector2} posStart
+ *  @param {Vector2} posEnd
+ *  @param {EngineObject|TileCollisionCallback} [callbackObject] - Callback, engine object, or undefined
+ *  @param {Vector2} [normal] - Optional normal of the surface hit
+ *  @param {boolean} [solidOnly=true] - Only check solid layers?
  *  @return {Vector2|undefined} - position of the center of the tile hit or undefined if no hit
  *  @memberof TileLayers */
-function tileCollisionRaycast(posStart, posEnd, object, normal, solidOnly=true)
+function tileCollisionRaycast(posStart, posEnd, callbackObject, normal, solidOnly=true)
 {
     for (const layer of tileCollisionLayers)
     {
         if (!solidOnly || layer.isSolid)
         {
-            const hitPos = layer.collisionRaycast(posStart, posEnd, object, normal)
+            const hitPos = layer.collisionRaycast(posStart, posEnd, callbackObject, normal)
             if (hitPos) return hitPos;
         }
     }
@@ -5938,17 +5945,17 @@ class TileLayerData
 class CanvasLayer extends EngineObject
 {
     /** Create a canvas layer object
-     *  @param {Vector2}  [position] - World space position of the layer
+     *  @param {Vector2}  [pos] - World space position of the layer
      *  @param {Vector2}  [size] - World space size of the layer
      *  @param {number}   [angle] - Angle the layer is rotated by
      *  @param {number}   [renderOrder] - Objects sorted by renderOrder
      *  @param {Vector2}  [canvasSize] - Default size of canvas, can be changed later
      *  @param {boolean}  [useWebGL] - Should this layer use WebGL for rendering
     */
-    constructor(position, size, angle=0, renderOrder=0, canvasSize=vec2(512), useWebGL=glEnable)
+    constructor(pos, size, angle=0, renderOrder=0, canvasSize=vec2(512), useWebGL=true)
     {
         ASSERT(isVector2(canvasSize), 'canvasSize must be a Vector2');
-        super(position, size, undefined, angle, WHITE, renderOrder);
+        super(pos, size, undefined, angle, WHITE, renderOrder);
 
         /** @property {HTMLCanvasElement} - The canvas used by this layer */
         this.canvas = headlessMode ? undefined : new OffscreenCanvas(canvasSize.x, canvasSize.y);
@@ -6052,16 +6059,16 @@ class CanvasLayer extends EngineObject
 class TileLayer extends CanvasLayer
 {
     /** Create a tile layer object
-    *  @param {Vector2}  position - World space position
+    *  @param {Vector2}  pos - World space position
     *  @param {Vector2}  size - World space size
     *  @param {TileInfo} [tileInfo] - Default tile info for layer (used for size and texture)
     *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
+    *  @param {boolean}  [useWebGL] - Should this layer use WebGL for rendering
     */
-    constructor(position, size, tileInfo=tile(), renderOrder=0)
+    constructor(pos, size, tileInfo=tile(), renderOrder=0, useWebGL=true)
     {
         const canvasSize = tileInfo ? size.multiply(tileInfo.size) : size;
-        const useWebGL = true;
-        super(position, size, 0, renderOrder, canvasSize, useWebGL);
+        super(pos, size, 0, renderOrder, canvasSize, useWebGL);
         
         /** @property {TileInfo} - Default tile info for layer */
         this.tileInfo = undefined;
@@ -6073,15 +6080,15 @@ class TileLayer extends CanvasLayer
         if (headlessMode)
         {
             // disable rendering in headless mode
-            this.render         = () => {};
-            this.redraw         = () => {};
-            this.redrawStart    = () => {};
-            this.redrawEnd      = () => {};
-            this.drawTileData   = () => {};
-            this.redrawTileData = () => {};
-            this.drawLayerTile  = () => {};
-            this.drawLayerRect  = () => {};
-            this.clearLayerRect = () => {};
+            this.render         = ()=> {};
+            this.redraw         = ()=> {};
+            this.redrawStart    = ()=> {};
+            this.redrawEnd      = ()=> {};
+            this.drawTileData   = ()=> {};
+            this.redrawTileData = ()=> {};
+            this.drawLayerTile  = ()=> {};
+            this.drawLayerRect  = ()=> {};
+            this.clearLayerRect = ()=> {};
             return;
         }
         
@@ -6115,6 +6122,12 @@ class TileLayer extends CanvasLayer
         isRedraw ? this.drawTileData(layerPos) : this.redrawTileData(layerPos);
     }
 
+    /** Clear data at a given position in the array
+     *  @param {Vector2} layerPos - Local position in array
+     *  @param {boolean} [redraw] - Force the tile to redraw if true */
+    clearData(layerPos, redraw=false)
+    { this.setData(layerPos, new TileLayerData, redraw) }
+
     /** Get data at a given position in the array
      *  @param {Vector2} layerPos - Local position in array
      *  @return {TileLayerData} */
@@ -6156,7 +6169,7 @@ class TileLayer extends CanvasLayer
         for (let x = this.size.x; x--;)
         for (let y = this.size.y; y--;)
             this.drawTileData(vec2(x,y), false);
-        this.hasWebGL() && glFlush();
+        this.isUsingWebGL && glFlush();
         this.onRedraw();
         this.redrawEnd();
     }
@@ -6205,14 +6218,13 @@ class TileLayer extends CanvasLayer
         if (!this.context) return;
         ASSERT(drawContext === this.context);
 
-        if (glEnable && this.textureInfo.glTexture)
-            glSetRenderTarget();
-
         // set stuff back to normal
+        if (this.isUsingWebGL)
+            glSetRenderTarget();
         [drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor] = this.savedRenderSettings;
     }
 
-    /** Draw the tile at a given position in the tile grid
+    /** Draw the tile at a given position in the tile layer
      *  This can be used to clear out tiles when they are destroyed
      *  Tiles can also be redrawn if inside a redrawStart/End block
      *  @param {Vector2} layerPos
@@ -6236,7 +6248,7 @@ class TileLayer extends CanvasLayer
         this.drawLayerTile(drawPos, drawSize, tileInfo, d.color, d.direction*PI/2, d.mirror);
     }
 
-    /** Draw the tile at a given position in the tile grid
+    /** Draw the tile at a given position in the tile layer
      *  This can be used to clear tiles when they are destroyed
      *  For better performance use drawTileData inside a redrawStart/End block
      *  @param {Vector2} layerPos
@@ -6264,7 +6276,7 @@ class TileLayer extends CanvasLayer
     angle=0, mirror, additiveColor)
     {
         const drawPos = pos.add(size.scale(.5));
-        drawTile(drawPos, size, tileInfo, color, angle, mirror, additiveColor);
+        drawTile(drawPos, size, tileInfo, color, angle, mirror, additiveColor, this.isUsingWebGL);
     }
 
     /** Clear a rectangle in layer space
@@ -6304,14 +6316,15 @@ class TileLayer extends CanvasLayer
 class TileCollisionLayer extends TileLayer
 {
     /** Create a tile layer object
-    *  @param {Vector2}  position      - World space position
-    *  @param {Vector2}  size          - World space size
-    *  @param {TileInfo} [tileInfo]    - Tile info for layer
+    *  @param {Vector2}  pos - World space position
+    *  @param {Vector2}  size - World space size
+    *  @param {TileInfo} [tileInfo] - Tile info for layer
     *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
+    *  @param {boolean}  [useWebGL] - Should this layer use WebGL for rendering
     */
-    constructor(position, size, tileInfo=tile(), renderOrder=0)
+    constructor(pos, size, tileInfo=tile(), renderOrder=0, useWebGL=true)
     {
-        super(position, size.floor(), tileInfo, renderOrder);
+        super(pos, size.floor(), tileInfo, renderOrder, useWebGL);
 
         /** @property {Array<number>} - The tile collision grid */
         this.collisionData = [];
@@ -6347,41 +6360,50 @@ class TileCollisionLayer extends TileLayer
         this.collisionData.fill(0);
     }
 
-    /** Set tile collision data for a given cell in the grid
-    *  @param {Vector2} gridPos
+    /** Set tile collision data for a given cell in the layer
+    *  @param {Vector2} layerPos
     *  @param {number}  [data] */
-    setCollisionData(gridPos, data=1)
+    setCollisionData(layerPos, data=1)
     {
-        ASSERT(isVector2(gridPos), 'gridPos must be a Vector2');
-        const i = (gridPos.y|0)*this.size.x + gridPos.x|0;
-        gridPos.arrayCheck(this.size) && (this.collisionData[i] = data);
+        ASSERT(isVector2(layerPos), 'layerPos must be a Vector2');
+        const i = (layerPos.y|0)*this.size.x + layerPos.x|0;
+        layerPos.arrayCheck(this.size) && (this.collisionData[i] = data);
     }
 
-    /** Get tile collision data for a given cell in the grid
-    *  @param {Vector2} gridPos
+    /** Clear tile collision data for a given cell in the layer
+    *  @param {Vector2} layerPos */
+    clearCollisionData(layerPos)
+    { this.setCollisionData(layerPos, 0); }
+
+    /** Get tile collision data for a given cell in the layer
+    *  @param {Vector2} layerPos
     *  @return {number} */
-    getCollisionData(gridPos)
+    getCollisionData(layerPos)
     {
-        ASSERT(isVector2(gridPos), 'gridPos must be a Vector2');
-        const i = (gridPos.y|0)*this.size.x + gridPos.x|0;
-        return gridPos.arrayCheck(this.size) ? this.collisionData[i] : 0;
+        ASSERT(isVector2(layerPos), 'layerPos must be a Vector2');
+        const i = (layerPos.y|0)*this.size.x + layerPos.x|0;
+        return layerPos.arrayCheck(this.size) ? this.collisionData[i] : 0;
     }
 
     /** Check if collision with another object should occur
     *  @param {Vector2}      pos
     *  @param {Vector2}      [size=vec2()]
-    *  @param {EngineObject} [object]
+    *  @param {EngineObject|TileCollisionCallback} [callbackObject] - Callback, engine object, or undefined
     *  @return {boolean} */
-    collisionTest(pos, size=new Vector2, object)
+    collisionTest(pos, size=new Vector2, callbackObject)
     {
         ASSERT(isVector2(pos) && isVector2(size), 'pos and size must be Vector2s');
-        ASSERT(!object || object instanceof EngineObject, 'object must be an EngineObject');
-        
-        // transform to local layer space
-        const posX = pos.x - this.pos.x;
-        const posY = pos.y - this.pos.y;
+        ASSERT(!callbackObject || typeof callbackObject === 'function' || callbackObject instanceof EngineObject, 'callbackObject must be a funtion or EngineObject');
+
+        // make function to check for collision
+        const collisionTest = callbackObject ? typeof callbackObject === 'function' ?
+            (tileData, pos)=> callbackObject(tileData, pos) :
+            (tileData, pos)=> callbackObject.collideWithTile(tileData, pos) :
+            ()=> true;
 
         // check any tiles in the area for collision
+        const posX = pos.x - this.pos.x;
+        const posY = pos.y - this.pos.y;
         const minX = max(posX - size.x/2|0, 0);
         const minY = max(posY - size.y/2|0, 0);
         const maxX = min(posX + size.x/2, this.size.x);
@@ -6392,9 +6414,7 @@ class TileCollisionLayer extends TileLayer
         {
             // check if the object should collide with this tile
             const tileData = this.collisionData[y*this.size.x+x];
-            if (tileData)
-            if (!object || object.collideWithTile(tileData, 
-                hitPos.set(x + this.pos.x, y + this.pos.y)))
+            if (tileData && collisionTest(tileData, hitPos.set(x+this.pos.x, y+this.pos.y)))
                 return true;
         }
         return false;
@@ -6402,52 +6422,68 @@ class TileCollisionLayer extends TileLayer
 
     /** Return the exact position of the boundary of first tile hit, undefined if nothing was hit.
     *  The point will be inside the colliding tile if it hits (may have a tiny shift)
-    *  @param {Vector2}      posStart
-    *  @param {Vector2}      posEnd
-    *  @param {EngineObject} [object] - An object or undefined for generic test
-    *  @param {Vector2}      [normal] - Optional normal of the surface hit
+    *  @param {Vector2} posStart
+    *  @param {Vector2} posEnd
+    *  @param {EngineObject|TileCollisionCallback} [callbackObject] - Callback, engine object, or undefined
+    *  @param {Vector2} [normal] - Optional normal of the surface hit
     *  @return {Vector2|undefined} */
-    collisionRaycast(posStart, posEnd, object, normal)
+    collisionRaycast(posStart, posEnd, callbackObject, normal)
     {
         ASSERT(isVector2(posStart) && isVector2(posEnd), 'positions must be Vector2s');
-        ASSERT(!object || object instanceof EngineObject, 'object must be an EngineObject');
+        ASSERT(!callbackObject || typeof callbackObject === 'function' || callbackObject instanceof EngineObject, 'callbackObject must be a funtion or EngineObject');
 
-        const localPos = new Vector2;
-        const collisionTest = (pos)=>
+        // make function to check for collision
+        const collisionTest = callbackObject ? typeof callbackObject === 'function' ?
+            (tileData, pos)=> callbackObject(tileData, pos) :
+            (tileData, pos)=> callbackObject.collideWithTile(tileData, pos) :
+            (tileData)=> tileData > 0;
+        const testFunction = (pos)=>
         {
-            // check for tile collision
-            localPos.set(pos.x - this.pos.x, pos.y - this.pos.y);
-            const tileData = this.getCollisionData(localPos);
-            return tileData && (!object || object.collideWithTile(tileData, pos));
+            const tileData = this.getCollisionData(localPos.set(pos.x - this.pos.x, pos.y - this.pos.y));
+            return tileData && collisionTest(tileData, pos);
         }
-        debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
-        const hitPos = lineTest(posStart, posEnd, collisionTest, normal);
-        if (hitPos)
+
+        // use line test against tile collision
+        const localPos = new Vector2;
+        const hitPos = lineTest(posStart, posEnd, testFunction, normal);
+        if (debugRaycast && hitPos)
         {
             const tilePos = hitPos.floor().add(vec2(.5));
-            debugRaycast && debugRect(tilePos, vec2(1), '#f008');
-            debugRaycast && debugLine(posStart, hitPos, '#f00', .02);
-            debugRaycast && debugPoint(hitPos, '#0f0');
-            debugRaycast && normal && 
-                debugLine(hitPos, hitPos.add(normal), '#ff0', .02);
-            return hitPos;
+            debugRect(tilePos, vec2(1), '#f008');
+            debugLine(posStart, posEnd, '#00f', .02);
+            debugLine(posStart, hitPos, '#f00', .02);
+            debugPoint(hitPos, '#0f0');
+            normal && debugLine(hitPos, hitPos.add(normal), '#ff0', .02);
         }
+        return hitPos;
     }
 }
 /**
  * LittleJS Particle System
+ * - A simple but fast and flexible particle system
+ * - Lightweight Particles are created and managed by ParticleEmitters
+ * - The particle design tool can be used to help create emitters
+ * @namespace Particles
  */
 
 /**
- *  @callback ParticleCallbackFunction - Function that processes a particle
+ *  @callback ParticleCallback - Function that processes a particle
  *  @param {Particle} particle
- *  @memberof Engine
+ *  @memberof Particles
+ */
+
+/**
+ *  @callback ParticleCollideCallback - Collide callback for particles
+ *  @param {Particle} particle
+ *  @param {number} tileData
+ *  @param {Vector2} pos
+ *  @memberof Particles
  */
 
 /**
  * Particle Emitter - Spawns particles with the given settings
  * @extends EngineObject
- * @memberof Engine
+ * @memberof Particles
  * @example
  * // create a particle emitter
  * let pos = vec2(2,3);
@@ -6465,7 +6501,7 @@ class TileCollisionLayer extends TileLayer
 class ParticleEmitter extends EngineObject
 {
     /** Create a particle system with the given settings
-     *  @param {Vector2} position - World space position of the emitter
+     *  @param {Vector2} pos - World space position of the emitter
      *  @param {number} [angle] - Angle to emit the particles
      *  @param {number|Vector2}  [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
      *  @param {number} [emitTime] - How long to stay alive (0 is forever)
@@ -6495,7 +6531,7 @@ class ParticleEmitter extends EngineObject
      */
     constructor
     (
-        position,
+        pos,
         angle,
         emitSize = 0,
         emitTime = 0,
@@ -6524,12 +6560,13 @@ class ParticleEmitter extends EngineObject
         localSpace = false
     )
     {
-        super(position, vec2(), tileInfo, angle, undefined, renderOrder);
+        super(pos, vec2(), tileInfo, angle, undefined, renderOrder);
 
         // emitter settings
+        /** @property {boolean} - Should particles be emitted in a circle */
+        this.emitCircle = typeof emitSize === 'number';
         /** @property {number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
-        this.emitSize = emitSize instanceof Vector2 ? 
-            emitSize.copy() : emitSize;
+        this.emitSize = typeof emitSize === 'number' ? vec2(emitSize) : emitSize.copy();
         /** @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 */
@@ -6580,26 +6617,31 @@ class ParticleEmitter extends EngineObject
         this.localSpace        = localSpace;
         /** @property {number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
         this.trailScale        = 0;
-        /** @property {ParticleCallbackFunction} - Callback when particle is destroyed */
-        this.particleDestroyCallback = undefined;
-        /** @property {ParticleCallbackFunction} - Callback when particle is created */
+        /** @property {ParticleCallback} - Callback when particle is created */
         this.particleCreateCallback = undefined;
-        /** @property {number} - Track particle emit time */
-        this.emitTimeBuffer    = 0;
+        /** @property {ParticleCallback} - Callback when particle is destroyed */
+        this.particleDestroyCallback = undefined;
+        /** @property {ParticleCollideCallback} - Callback when particle collides */
+        this.particleCollideCallback = undefined;
         /** @property {number} - Percentage of velocity to pass to particles (0-1) */
         this.velocityInheritance = 0;
+        /** @property {number} - Track particle emit time */
+        this.emitTimeBuffer = 0;
+        /** @property {Array<Particle>} - Array of particles for this emitter */
+        this.particles = [];
 
         // track previous position and angle
         this.previousAngle = this.angle;
         this.previousPos = this.pos.copy();
     }
 
-    /** Emitters do not have physics */
-    updatePhysics() {}
-
     /** Update the emitter to spawn particles, called automatically by engine once each frame */
     update()
     {
+        // physics sanity checks
+        ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
+        ASSERT(this.damping >= 0 && this.damping <= 1);
+
         if (this.velocityInheritance)
         {
             // pass emitter velocity to particles
@@ -6613,7 +6655,7 @@ class ParticleEmitter extends EngineObject
         }
 
         // update emitter
-        if (!this.emitTime || this.getAliveTime() <= this.emitTime)
+        if (this.isActive())
         {
             // emit particles
             if (this.emitRate && particleEmitRateScale)
@@ -6623,14 +6665,21 @@ class ParticleEmitter extends EngineObject
                     this.emitParticle();
             }
         }
-        else
-            this.destroy();
+        else if (this.particles.length === 0)
+            this.destroy(true);
+            
+        // update and remove destroyed particles
+        this.particles = this.particles.filter((p)=>
+        {
+            p.update();
+            return !p.destroyed;
+        });
 
         if (debugParticles)
         {
             // show emitter bounds
-            if (typeof this.emitSize === 'number')
-                debugCircle(this.pos, this.emitSize/2, '#0f0');
+            if (this.emitCircle)
+                debugCircle(this.pos, this.emitSize.x/2, '#0f0');
             else
                 debugRect(this.pos, this.emitSize, '#0f0', 0, this.angle);
         }
@@ -6641,14 +6690,15 @@ class ParticleEmitter extends EngineObject
     emitParticle()
     {
         // spawn a particle
-        let pos = typeof this.emitSize === 'number' ? // check if number was used
-            randInCircle(this.emitSize/2)             // circle emitter
-            : vec2(rand(-.5,.5), rand(-.5,.5))        // box emitter
+        let pos = this.emitCircle ?            // check if circle emitter
+            randInCircle(this.emitSize.x/2)    // circle emitter
+            : vec2(rand(-.5,.5), rand(-.5,.5)) // box emitter
                 .multiply(this.emitSize).rotate(this.angle)
         let angle = rand(this.particleConeAngle, -this.particleConeAngle);
         if (!this.localSpace)
         {
-            pos = this.pos.add(pos);
+            pos.x += this.pos.x;
+            pos.y += this.pos.y;
             angle += this.angle;
         }
 
@@ -6668,25 +6718,17 @@ class ParticleEmitter extends EngineObject
         const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
 
         // build particle
-        const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive,  this.trailScale, this.localSpace && this, this.particleDestroyCallback);
-        particle.velocity      = vec2().setAngle(velocityAngle, speed);
-        particle.angleVelocity = angleSpeed;
+        const velocity = vec2(speed*sin(velocityAngle), speed*cos(velocityAngle));
+        let angleVelocity = angleSpeed;
         if (!this.localSpace && this.velocityInheritance > 0)
         {
             // apply emitter velocity to particle
-            particle.velocity.x += this.velocity.x;
-            particle.velocity.y += this.velocity.y;
-            particle.angleVelocity += this.angleVelocity;
+            velocity.x += this.velocity.x;
+            velocity.y += this.velocity.y;
+            angleVelocity += this.angleVelocity;
         }
-        particle.fadeRate      = this.fadeRate;
-        particle.damping       = this.damping;
-        particle.angleDamping  = this.angleDamping;
-        particle.restitution   = this.restitution;
-        particle.friction      = this.friction;
-        particle.gravityScale  = this.gravityScale;
-        particle.collideTiles  = this.collideTiles;
-        particle.renderOrder   = this.renderOrder;
-        particle.mirror        = randBool();
+        const particle = new Particle(this, pos, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, velocity, angleVelocity);
+        this.particles.push(particle);
 
         // call particle create callback
         this.particleCreateCallback?.(particle);
@@ -6695,140 +6737,245 @@ class ParticleEmitter extends EngineObject
         return particle;
     }
 
-    // Particle emitters are not rendered, only the particles are
-    render() {}
+    /** Particle emitters do not have physics */
+    updatePhysics() {}
+
+    /** Render all particles for this emitter */
+    render()
+    {
+        // render all particles
+        for (const particle of this.particles)
+            particle.render();
+    }
+
+    /** is emitter actively spawning */
+    isActive() { return !this.emitTime || this.getAliveTime() < this.emitTime; }
+
+    /** Destroy the particle emitter
+     *  @param {boolean} [immediate] - should particle emitters and other attached effects be allowed to die off */
+    destroy(immediate=false)
+    {
+        if (this.destroyed) return;
+
+        super.destroy(immediate);
+        if (!immediate && this.particles.length > 0)
+        {
+            // wait for particles to die off
+            this.destroyed = false;
+            this.emitTime = -1;
+        }
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * Particle Object - Created automatically by Particle Emitters
- * @extends EngineObject
- * @memberof Engine
+ * @memberof Particles
  */
-class Particle extends EngineObject
+class Particle 
 {
     /**
      * Create a particle with the passed in settings
      * Typically this is created automatically by a ParticleEmitter
-     * @param {Vector2}  position   - World space position of the particle
-     * @param {TileInfo} tileInfo   - Tile info to render particles
-     * @param {number}   angle      - Angle to rotate the particle
-     * @param {Color}    colorStart - Color at start of life
-     * @param {Color}    colorEnd   - Color at end of life
-     * @param {number}   lifeTime   - How long to live for
-     * @param {number}   sizeStart  - Size at start of life
-     * @param {number}   sizeEnd    - Size at end of life
-     * @param {number}   fadeRate   - How quick to fade in/out
-     * @param {boolean}  additive   - Does it use additive blend mode
-     * @param {number}   trailScale - If a trail, how long to make it
-     * @param {ParticleEmitter} [localSpaceEmitter] - Parent emitter if local space
-     * @param {ParticleCallbackFunction} [destroyCallback] - Callback when particle dies
+     * @param {ParticleEmitter} emitter - The emitter that created this particle
+     * @param {Vector2} pos             - World or local space position
+     * @param {number}  angle           - Angle of the particle
+     * @param {Color}   colorStart      - Color at start of life
+     * @param {Color}   colorEnd        - Color at end of life
+     * @param {number}  lifeTime        - How long to live for
+     * @param {number}  sizeStart       - Size at start of life
+     * @param {number}  sizeEnd         - Size at end of life
+     * @param {Vector2} [velocity]      - Velocity of the particle
+     * @param {number}  [angleVelocity] - Angular speed of the particle
      */
-    constructor(position, tileInfo, angle, colorStart, colorEnd, lifeTime, sizeStart, sizeEnd, fadeRate, additive, trailScale, localSpaceEmitter, destroyCallback
-    )
+    constructor(emitter, pos, angle, colorStart, colorEnd, lifeTime, sizeStart, sizeEnd, velocity = vec2(), angleVelocity = 0)
     {
-        super(position, vec2(), tileInfo, angle);
-
-        /** @property {Color} - Color at start of life */
+        /** @property {ParticleEmitter} */
+        this.emitter = emitter;
+        /** @property {Vector2} */
+        this.pos = pos;
+        /** @property {number} */
+        this.angle = angle;
+        /** @property {Vector2} */
+        this.size = vec2(sizeStart);
+        /** @property {Color} */
+        this.color = colorStart.copy();
+        /** @property {Color} */
         this.colorStart = colorStart;
-        /** @property {Color} - Color at end of life */
+        /** @property {Color} */
         this.colorEnd = colorEnd;
-        /** @property {number} - How long to live for */
+        /** @property {number} */
         this.lifeTime = lifeTime;
-        /** @property {number} - Size at start of life */
+        /** @property {number} */
         this.sizeStart = sizeStart;
-        /** @property {number} - Size at end of life */
+        /** @property {number} */
         this.sizeEnd = sizeEnd;
-        /** @property {number} - How quick to fade in/out */
-        this.fadeRate = fadeRate;
-        /** @property {boolean} - Is it additive */
-        this.additive = additive;
-        /** @property {number} - If a trail, how long to make it */
-        this.trailScale = trailScale;
-        /** @property {ParticleEmitter} - Parent emitter if local space */
-        this.localSpaceEmitter = localSpaceEmitter;
-        /** @property {ParticleCallbackFunction} - Called when particle dies */
-        this.destroyCallback = destroyCallback;
-        // particles do not clamp speed by default
-        this.clampSpeed = false;
-    }
-
-    /** Update the object physics, called automatically by engine once each frame */
+        /** @property {Vector2} */
+        this.velocity = velocity;
+        /** @property {number} */
+        this.angleVelocity = angleVelocity;
+        /** @property {number} */
+        this.spawnTime = time;
+        /** @property {boolean} */
+        this.mirror = randBool();
+        /** @property {EngineObject} */
+        this.groundObject = undefined;
+        /** @property {boolean} */
+        this.destroyed = false;
+        /** @property {TileInfo} */
+        this.tileInfo = emitter.tileInfo;
+    }
+
+    /** Update the particle */
     update()
     {
-        if (this.collideTiles || this.collideSolidObjects)
+        // emitter properties
+        const emitter = this.emitter;
+        const damping = emitter.damping;
+        const angleDamping = emitter.angleDamping;
+        const restitution = emitter.restitution;
+        const friction = emitter.friction;
+        const gravityScale = emitter.gravityScale;
+        const collideTiles = emitter.collideTiles;
+        const collideCallback = emitter.particleCollideCallback;
+
+        // destroy particle when its time runs out
+        if (this.lifeTime > 0 && time - this.spawnTime > this.lifeTime)
         {
-            // only apply max circular speed if particle can collide
-            const length2 = this.velocity.lengthSquared();
-            if (length2 > objectMaxSpeed*objectMaxSpeed)
-            {
-                const s = objectMaxSpeed / length2**.5;
-                this.velocity.x *= s;
-                this.velocity.y *= s;
-            }
+            this.destroy();
+            return;
         }
 
-        if (this.lifeTime > 0 && time - this.spawnTime > this.lifeTime)
+        // apply physics
+        const oldPos = this.pos.copy();
+        this.velocity.x *= damping;
+        this.velocity.y *= damping;
+        this.pos.x += this.velocity.x += gravity.x * gravityScale;
+        this.pos.y += this.velocity.y += gravity.y * gravityScale;
+        this.angle += this.angleVelocity *= angleDamping;
+
+        // don't do collision if solver disabled
+        if (!enablePhysicsSolver || !collideTiles) return;
+        
+        // apply max circular speed to prevent going through collision
+        const length2 = this.velocity.lengthSquared();
+        if (length2 > objectMaxSpeed*objectMaxSpeed)
+        {
+            const s = objectMaxSpeed / length2**.5;
+            this.velocity.x *= s;
+            this.velocity.y *= s;
+        }
+
+        // check collision against tiles
+        this.groundObject = undefined;
+        const testCollision = collideCallback ? (pos)=>
+        {
+            const data = tileCollisionGetData(pos);
+            return data && collideCallback(this, data, pos);
+        } : (pos)=> tileCollisionGetData(pos) > 0;
+
+        if (testCollision(this.pos))
         {
-            // destroy particle when its time runs out
-            const c = this.colorEnd;
-            this.color.set(c.r, c.g, c.b, c.a);
-            this.size.set(this.sizeEnd, this.sizeEnd);
-            this.destroyCallback?.(this);
-            this.destroyed = 1;
+            // if already was stuck in collision, don't do anything
+            const hitLayer = tileCollisionTest(this.pos);
+            if (!testCollision(oldPos))
+            {
+                if (!collideCallback || collideCallback?.(this, hitLayer))
+                {
+                    // test which side we bounced off (or both if a corner)
+                    const isBlockedX = testCollision(vec2(this.pos.x, oldPos.y));
+                    const isBlockedY = testCollision(vec2(oldPos.x, this.pos.y));
+                    const hitRestitution = max(restitution, hitLayer.restitution);
+                    const hitFriction = max(friction, hitLayer.friction);
+                    if (isBlockedX)
+                    {
+                        // move to previous X position and bounce
+                        this.pos.x = oldPos.x;
+                        this.velocity.x *= -hitRestitution;
+                        this.velocity.y *= hitFriction;
+                    }
+                    if (isBlockedY || !isBlockedX)
+                    {
+                        const wasFalling = this.velocity.y < 0 && gravity.y < 0 || this.velocity.y > 0 && gravity.y > 0;
+                        if (wasFalling)
+                            this.groundObject = hitLayer;
+
+                        // move to previous Y position and bounce
+                        this.pos.y = oldPos.y;
+                        this.velocity.y *= -hitRestitution;
+                        this.velocity.x *= hitFriction;
+                    }
+                    debugPhysics && debugRect(this.pos, this.size, '#f00');
+                }
+            }
         }
     }
 
-    /** Render the particle, automatically called each frame, sorted by renderOrder */
+    /** Destroy this particle */
+    destroy()
+    {
+        const destroyCallback = this.emitter.particleDestroyCallback;
+        const c = this.colorEnd;
+        this.color.set(c.r, c.g, c.b, c.a);
+        this.size.set(this.sizeEnd, this.sizeEnd);
+        this.destroyed = true;
+        destroyCallback?.(this);
+    }
+
+    /** Render the particle, automatically called each frame */
     render()
     {
+        // emitter properties
+        const emitter = this.emitter;
+        const localSpace = emitter.localSpace;
+        const additive = emitter.additive;
+        const trailScale = emitter.trailScale;
+        const fadeRate = emitter.fadeRate / 2;
+
         // lerp color and size
         const p1 = this.lifeTime > 0 ? min((time - this.spawnTime) / this.lifeTime, 1) : 1, p2 = 1-p1;
         const radius = p2 * this.sizeStart + p1 * this.sizeEnd;
         const size = vec2(radius);
+        const alphaFade = p1 < fadeRate ? p1/fadeRate : 
+            p1 > 1-fadeRate ? (1-p1)/fadeRate : 1;
         this.color.r = p2 * this.colorStart.r + p1 * this.colorEnd.r;
         this.color.g = p2 * this.colorStart.g + p1 * this.colorEnd.g;
         this.color.b = p2 * this.colorStart.b + p1 * this.colorEnd.b;
-        this.color.a = p2 * this.colorStart.a + p1 * this.colorEnd.a;
-            
-        // fade alpha
-        const fadeRate = this.fadeRate/2;
-        this.color.a *= p1 < fadeRate ? p1/fadeRate : 
-            p1 > 1-fadeRate ? (1-p1)/fadeRate : 1;
+        this.color.a = (p2 * this.colorStart.a + p1 * this.colorEnd.a) * alphaFade;
 
         // draw the particle
-        this.additive && setBlendMode(true);
+        additive && setBlendMode(true);
 
         // update the position and angle for drawing
-        let pos = this.pos, angle = this.angle;
-        if (this.localSpaceEmitter)
+        const pos = this.pos.copy();
+        let angle = this.angle;
+        if (localSpace)
         {
             // in local space of emitter
-            const a = this.localSpaceEmitter.angle;
+            const a = emitter.angle;
             const c = cos(a), s = sin(a);
-            pos = this.localSpaceEmitter.pos.add(
-                new Vector2(pos.x*c - pos.y*s, pos.x*s + pos.y*c));
-            angle += this.localSpaceEmitter.angle;
+            pos.set(emitter.pos.x + pos.x*c - pos.y*s, 
+                emitter.pos.y + pos.x*s + pos.y*c);
+            angle += a;
         }
-        if (this.trailScale)
+        if (trailScale)
         {
             // trail style particles
-            const direction = this.localSpaceEmitter ? 
-                this.velocity.rotate(-this.localSpaceEmitter.angle) :
-                this.velocity;
-            const speed = direction.length();
+            const velocity = localSpace ? 
+                this.velocity.rotate(-emitter.angle) : this.velocity;
+            const speed = velocity.length();
             if (speed)
             {
                 // stretch in direction of motion
-                const trailLength = speed * this.trailScale;
+                const trailLength = speed * trailScale;
                 size.y = max(size.x, trailLength);
-                angle = atan2(direction.x, direction.y);
+                angle = atan2(velocity.x, velocity.y);
                 drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror);
             }
         }
         else
             drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror);
-        this.additive && setBlendMode();
+        additive && setBlendMode();
         debugParticles && debugRect(pos, size, '#f005', 0, angle);
     }
 }
@@ -7282,7 +7429,7 @@ function glPreRender(clear=true)
         p.x,        p.y,      0, 1];
 
     // set the same transform matrix for both shaders
-    const initUniform = (program, uniform, value) =>
+    const initUniform = (program, uniform, value)=>
     {
         glContext.useProgram(program);
         const location = glContext.getUniformLocation(program, uniform);
@@ -7676,7 +7823,7 @@ function glSetRenderTarget(texture, clear=false)
         glContext.bindFramebuffer(glContext.FRAMEBUFFER, glFramebuffer);
         glContext.framebufferTexture2D(glContext.FRAMEBUFFER, 
             glContext.COLOR_ATTACHMENT0, glContext.TEXTURE_2D, texture, 0);
-       glPreRender(clear);
+        glPreRender(clear);
     }
     else
     {
@@ -8108,7 +8255,7 @@ class PostProcessPlugin
 {
     /** Create global post processing shader
     *  @param {string} shaderCode
-    *  @param {boolean} [includeMainCanvas] - combine mainCanvs onto glCanvas
+    *  @param {boolean} [includeMainCanvas] - combine mainCanvas onto glCanvas
     *  @param {boolean} [feedbackTexture] - use glCanvas from previous frame as the texture
     *  @example
     *  // create the post process plugin object
@@ -8295,7 +8442,7 @@ class ZzFXMusic extends Sound
     /** Play the music that loops by default
      *  @param {number}  [volume] - Volume to play the music at
      *  @param {boolean} [loop] - Should the music loop?
-     *  @return {AudioBufferSourceNode} - The audio source node
+     *  @return {SoundInstance} - The sound instance
      */
     playMusic(volume=1, loop=true)
     { return super.play(undefined, volume, 1, 0, loop); }
@@ -8342,7 +8489,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
     sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
 
     // for each pattern in sequence
-    sequence.forEach((patternIndex, sequenceIndex) => {
+    sequence.forEach((patternIndex, sequenceIndex)=> {
       // get pattern for current channel, use empty 1 note pattern if none found
       patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
 
@@ -8435,7 +8582,7 @@ let uiDebug = 0;
 
 /** Enable UI system debug drawing
  *  0=off, 1=normal, 2=show invisible
- *  @param {number|boolean} enable
+ *  @param {number|boolean} debugMode
  *  @memberof UISystem */
 function uiSetDebug(debugMode)
 { uiDebug = typeof debugMode === 'boolean' ? (debugMode ? 1 : 0) : debugMode; }
@@ -8501,7 +8648,7 @@ class UISystemPlugin
         // navigation properties
         /** @property {UIObject} - Object currently selected by navigation (gamepad or keyboard) */
         this.navigationObject = undefined;
-        /** @property {Timer} - Cooldown timer for navigation inputs */
+        /** @property {Timer} - Cool down timer for navigation inputs */
         this.navigationTimer = new Timer(undefined, true);
         /** @property {number} - Time between navigation inputs in seconds */
         this.navigationDelay = .2;
@@ -8967,7 +9114,7 @@ class UISystemPlugin
 
         const savedNavigationDirection = uiSystem.navigationDirection;
 
-        // allow both axies for navigation
+        // allow both axes for navigation
         uiSystem.navigationDirection = 2;
 
         // confirm menu
@@ -9062,7 +9209,7 @@ class UIObject
         this.lineWidth = uiSystem.defaultLineWidth;
         /** @property {number} - Corner radius for rounded rects */
         this.cornerRadius = uiSystem.defaultCornerRadius;
-        /** @property {string} - Font for this objecct */
+        /** @property {string} - Font for this object */
         this.font = uiSystem.defaultFont;
         /** @property {string} - Font style for this object or undefined */
         this.fontStyle = undefined;
@@ -9550,6 +9697,8 @@ class UIScrollbar extends UIObject
         this.value = value;
         /** @property {Color} - Color for the handle part of the scrollbar */
         this.handleColor = handleColor.copy();
+        /** @property {boolean} - Should it fill up like a progress bar? */
+        this.fillMode = false;
 
         // set properties
         this.text = text;
@@ -9595,19 +9744,30 @@ class UIScrollbar extends UIObject
 
         // handle horizontal or vertical scrollbar
         const isHorizontal = this.size.x > this.size.y;
-        const handleSize = isHorizontal ? this.size.y : this.size.x;
-        const barSize = isHorizontal ? this.size.x : this.size.y;
-        const centerPos = isHorizontal ? this.pos.x : this.pos.y;
-        
-        // draw the scrollbar handle
-        const handleWidth = barSize - handleSize;
-        const p1 = centerPos - handleWidth/2;
-        const p2 = centerPos + handleWidth/2;
-        const handlePos = isHorizontal ? 
-            vec2(lerp(p1, p2, this.value), this.pos.y) :
-            vec2(this.pos.x, lerp(p2, p1, this.value))
-        const handleColor = this.disabled ? this.disabledColor : this.handleColor;
-        uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        const barWidth = isHorizontal ? this.size.x : this.size.y;
+        const handleWidth = isHorizontal ? this.size.y : this.size.x;
+        if (this.fillMode)
+        {
+            // draw progress bar
+            const minWidth = min(handleWidth, this.cornerRadius * 2);
+            const progressWidth = lerp(minWidth, barWidth, this.value);
+            const p = (progressWidth - barWidth) * (isHorizontal ? .5 : -.5);
+            const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p));
+            const color = this.disabled ? this.disabledColor : this.handleColor;
+            const drawSize = isHorizontal ? 
+                vec2(progressWidth, this.size.y) : vec2(this.size.x, progressWidth);
+            uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        }
+        else
+        {
+            // draw the scrollbar handle
+            const value = isHorizontal ? this.value : 1 - this.value;
+            const p = (barWidth - handleWidth) * (value - .5);
+            const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p));
+            const color = this.disabled ? this.disabledColor : this.handleColor;
+            const drawSize = vec2(handleWidth);
+            uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        }
 
         // draw the text scaled to fit on the scrollbar
         const textSize = this.getTextSize();
@@ -9629,15 +9789,15 @@ class UIScrollbar extends UIObject
  * @extends UIObject
  * @example
  * // Create a video player UI object
- * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'cutscene.mp4', true);
+ * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'video.mp4', true);
  * video.play();
  * @memberof UISystem
  */
 class UIVideo extends UIObject
 {
     /** Create a video player UI object
-     *  @param {Vector2} [pos]
-     *  @param {Vector2} [size]
+     *  @param {Vector2} pos
+     *  @param {Vector2} size
      *  @param {string} src - Video file path or URL
      *  @param {boolean} [autoplay=false] - Start playing immediately?
      *  @param {boolean} [loop=false] - Loop the video?
@@ -9777,6 +9937,7 @@ class UIVideo extends UIObject
  * - Contact begin and end callbacks
  * - Wraps b2Vec2 type to/from Vector2
  * - Raycasting and querying
+ * - Box2dTileLayer for grid based collision
  * - Every type of joint
  * - Debug physics drawing
  * @namespace Box2D
@@ -9826,21 +9987,24 @@ class Box2dObject extends EngineObject
         bodyDef.set_type(bodyType);
         bodyDef.set_position(box2d.vec2dTo(pos));
         bodyDef.set_angle(-angle);
+        
+        /** @property {Object} - The Box2d body */
         this.body = box2d.world.CreateBody(bodyDef);
-        this.body.object = this;
+        /** @property {Color} - Line color used for default box2d drawing */
         this.lineColor = BLACK;
-        box2d.objects.push(this);
-        
-        // edge lists and loops for drawing
+        /** @property {Array<Object>} - List of all edges for default box2d drawing */
         this.edgeLists = [];
+        /** @property {Array<Object>} - List of all edge loops for default box2d drawing */
         this.edgeLoops = [];
+
+        this.body.object = this; // link body to this object
+        box2d.objects.push(this); // keep track of all box2d objects
     }
 
     /** Destroy this object and its physics body */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         // destroy physics body, fixtures, and joints
         ASSERT(this.body, 'Box2dObject has no body to destroy');
@@ -9871,11 +10035,12 @@ class Box2dObject extends EngineObject
     }
 
     /** Draws all this object's fixtures 
-     *  @param {Color}  [color]
-     *  @param {Color}  [lineColor]
-     *  @param {number} [lineWidth]
+     *  @param {Color}   [color]
+     *  @param {Color}   [lineColor]
+     *  @param {number}  [lineWidth]
+     *  @param {boolean} [useWebGL=glEnable]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixtures(color=WHITE, lineColor=BLACK, lineWidth=.1, context)
+    drawFixtures(color=WHITE, lineColor=BLACK, lineWidth=.1, useWebGL, context)
     {
         // draw non-edge fixtures
         this.getFixtureList().forEach((fixture)=>
@@ -9883,7 +10048,7 @@ class Box2dObject extends EngineObject
             const shape = box2d.castObjectType(fixture.GetShape());
             if (shape.GetType() !== box2d.instance.b2Shape.e_edge)
             {
-                box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context);
+                box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, useWebGL, context);
             }
         });
 
@@ -10109,6 +10274,14 @@ class Box2dObject extends EngineObject
         return fixtures;
     }
 
+    /** Destroy a fixture from the body
+     *  @param {Object} [fixture] */
+    destroyFixture(fixture) { this.body.DestroyFixture(fixture); }
+
+    /** Destroy all fixture from the body */
+    destroyAllFixtures()
+    { this.getFixtureList().forEach(fixture=>this.destroyFixture(fixture)); }
+
     ///////////////////////////////////////////////////////////////////////////////
     // physics get functions
 
@@ -10341,6 +10514,135 @@ class Box2dObject extends EngineObject
     }
 }
 
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * Box2D Static Object - Box2d with a static physics body
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dStaticObject extends Box2dObject 
+{
+    /** Create a LittleJS object with Box2d physics
+     *  @param {Vector2}  [pos]
+     *  @param {Vector2}  [size]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {number}   [angle]
+     *  @param {Color}    [color]
+     *  @param {number}   [renderOrder] */
+    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
+    {
+        const bodyType = box2d.bodyTypeStatic;
+        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * Box2D Kinematic Object - Box2d with a kinematic physics body
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dKinematicObject extends Box2dObject 
+{
+    /** Create a LittleJS object with Box2d physics
+     *  @param {Vector2}  [pos]
+     *  @param {Vector2}  [size]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {number}   [angle]
+     *  @param {Color}    [color]
+     *  @param {number}   [renderOrder] */
+    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
+    {
+        const bodyType = box2d.bodyTypeKinematic;
+        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Box2d Tile Layer
+ * - adds Box2d support to tile layers
+ * - creates static box2d fixtures for solid tiles
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dTileLayer extends Box2dStaticObject
+{
+    /** Create a Box2d tile layer object
+    *  @param {TileCollisionLayer} tileLayer - Tile layer for this object */
+    constructor(tileLayer)
+    {
+        ASSERT(tileLayer instanceof TileCollisionLayer, 'tileLayer must be a TileCollisionLayer');
+        super(tileLayer.pos, tileLayer.size);
+
+        /** @property {TileLayer} - The tile layer */
+        this.tileLayer = tileLayer;
+        this.addChild(tileLayer);
+    }
+
+    render()
+    {
+        // do not render fixtures, tile layer handles rendering
+    }
+    
+    /** Create box2d collision fixtures for solid tiles
+    *  @param {number} [friction]
+    *  @param {number} [restitution] */
+    buildCollision(friction=.2, restitution=0)
+    {
+        // destroy all fixtures and create new ones
+        this.destroyAllFixtures();
+
+        // create box2d object for this layer
+        this.pos = this.tileLayer.pos.copy();
+        this.size = this.tileLayer.size.copy();
+
+        // track which tiles have been processed
+        const processed = [];
+        const getIndex = (x, y)=> x + y * this.size.x;
+        const isSolidUnprocessed = (x, y)=>
+            !processed[getIndex(x, y)] &&
+            this.tileLayer.getCollisionData(vec2(x, y)) > 0;
+
+        // combine tiles into larger boxes
+        for (let x = 0; x < this.size.x; ++x)
+        for (let y = 0; y < this.size.y; ++y)
+        {
+            if (!isSolidUnprocessed(x, y)) continue;
+
+            // find max width by scanning right
+            let width = 1, height = 1, canExpand = true;
+            while (isSolidUnprocessed(x + width, y))
+                ++width;
+
+            // find max height by scanning up, ensuring all rows have the same width
+            while (canExpand)
+            {
+                for (let checkX = 0; checkX < width; ++checkX)
+                {
+                    if (!isSolidUnprocessed(x + checkX, y + height))
+                    {
+                        canExpand = false;
+                        break;
+                    }
+                }
+                if (canExpand)
+                    ++height;
+            }
+
+            // mark all tiles in this rectangle as processed
+            for (let rectX = width;  rectX--;)
+            for (let rectY = height; rectY--;)
+                processed[getIndex(x + rectX, y + rectY)] = true;
+
+            // create a single fixture for the entire rectangle
+            const shapeSize = vec2(width, height);
+            const offset = vec2(x + width/2, y + height/2);
+            this.addBox(shapeSize, offset, 0, 0, friction, restitution);
+        }
+    }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Box2D Raycast Result
@@ -10382,6 +10684,7 @@ class Box2dJoint
      *  @param {Object} jointDef */
     constructor(jointDef)
     {
+        /** @property {Object} - The Box2d joint */
         this.box2dJoint = box2d.castObjectType(box2d.world.CreateJoint(jointDef));
     }
 
@@ -10728,7 +11031,7 @@ class Box2dGearJoint extends Box2dJoint
      *  @param {Box2dObject} objectB
      *  @param {Box2dJoint} joint1
      *  @param {Box2dJoint} joint2
-     *  @param {ratio} [ratio] */
+     *  @param {number} [ratio] */
     constructor(objectA, objectB, joint1, joint2, ratio=1)
     {
         const jointDef = new box2d.instance.b2GearJointDef();
@@ -10870,50 +11173,6 @@ class Box2dPrismaticJoint extends Box2dJoint
     getMotorForce(time) { return this.box2dJoint.GetMotorForce(1/time); }
 }
 
-///////////////////////////////////////////////////////////////////////////////
-/** 
- * Box2D Static Object - Box2d with a static physics body
- * @extends Box2dObject
- * @memberof Box2D
- */
-class Box2dStaticObject extends Box2dObject 
-{
-    /** Create a LittleJS object with Box2d physics
-     *  @param {Vector2}  [pos]
-     *  @param {Vector2}  [size]
-     *  @param {TileInfo} [tileInfo]
-     *  @param {number}   [angle]
-     *  @param {Color}    [color]
-     *  @param {number}   [renderOrder] */
-    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
-    {
-        const bodyType = box2d.bodyTypeStatic;
-        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-/** 
- * Box2D Kiematic Object - Box2d with a kinematic physics body
- * @extends Box2dObject
- * @memberof Box2D
- */
-class Box2dKiematicObject extends Box2dObject 
-{
-    /** Create a LittleJS object with Box2d physics
-     *  @param {Vector2}  [pos]
-     *  @param {Vector2}  [size]
-     *  @param {TileInfo} [tileInfo]
-     *  @param {number}   [angle]
-     *  @param {Color}    [color]
-     *  @param {number}   [renderOrder] */
-    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
-    {
-        const bodyType = box2d.bodyTypeKinematic;
-        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
-    }
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Box2D Wheel Joint
@@ -11274,10 +11533,13 @@ class Box2dPlugin
     {
         ASSERT(!box2d, 'Box2D already initialized');
         box2d = this;
+
+        /** @property {Object} - The Box2d instance */
         this.instance = instance;
+        /** @property {Object} - The Box2d world */
         this.world = new box2d.instance.b2World();
+        /** @property {Array<Box2dObject>} - List of all Box2d objects */
         this.objects = [];
-
         /** @property {number} - Velocity iterations per update*/
         this.velocityIterations = 8;
         /** @property {number} - Position iterations per update*/
@@ -11476,8 +11738,9 @@ class Box2dPlugin
      *  @param {Color} [color]
      *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
+     *  @param {boolean} [useWebGL=glEnable]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context)
+    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, useWebgl, context)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -11487,20 +11750,20 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                drawPoly(points, color, lineWidth, lineColor, pos, angle);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebgl, false, context);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                drawCircle(pos, radius*2, color, lineWidth, lineColor);
+                drawCircle(pos, radius*2, color, lineWidth, lineColor, useWebgl, false, context);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
             {
                 const v1 = box2d.vec2From(shape.get_m_vertex1());
                 const v2 = box2d.vec2From(shape.get_m_vertex2());
-                drawLine(v1, v2, lineWidth, lineColor, pos, angle);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle, useWebgl, false, context);
                 break;
             }
         }
@@ -11518,7 +11781,7 @@ class Box2dPlugin
     }
 
     /** converts a box2d vec2 pointer to a Vector2
-     *  @param {Object} v */
+     *  @param {Object} vp */
     vec2FromPointer(vp)
     {
         const v = box2d.instance.wrapPointer(vp, box2d.instance.b2Vec2);
@@ -11630,7 +11893,7 @@ async function box2dInit()
         const box2dColorPointer = (c)=>
             box2dColor(box2d.instance.wrapPointer(c, box2d.instance.b2Color));
         const getDebugColor = (color)=>box2dColorPointer(color).scale(1,.8);
-        const getPointsList = (vertices, vertexCount) =>
+        const getPointsList = (vertices, vertexCount)=>
         {
             const points = [];
             for (let i=vertexCount; i--;)