littlejsengine 1.17.5 → 1.17.11

package/dist/littlejs.esm.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.17.5';
+const engineVersion = '1.17.11';
 
 /** Frames per second to update
  *  @type {number}
@@ -396,33 +396,11 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     workReadContext = workReadCanvas.getContext('2d', { willReadFrequently: true });
 
     // create promises for loading images
-    const promises = imageSources.map((src, textureIndex)=>
-        new Promise(resolve =>
-        {
-            ASSERT(isString(src), 'imageSources must be an array of strings');
-
-            const image = new Image;
-            image.onerror = image.onload = ()=>
-            {
-                const textureInfo = new TextureInfo(image);
-                textureInfos[textureIndex] = textureInfo;
-                resolve();
-            }
-            image.crossOrigin = 'anonymous';
-            image.src = src;
-        })
-    );
+    const promises = imageSources.map((src, i)=> loadTexture(i, src));
 
+    // no images to load
     if (!imageSources.length)
-    {
-        // no images to load
-        promises.push(new Promise(resolve =>
-        {
-            const textureInfo = new TextureInfo(new Image);
-            textureInfos[0] = textureInfo;
-            resolve();
-        }));
-    }
+        promises.push(loadTexture(0));
 
     // load engine font image
     promises.push(fontImageInit());
@@ -464,13 +442,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)
     {
@@ -480,7 +458,7 @@ function engineObjectsUpdate()
         o.update();
         o.updatePhysics();
         for (const child of o.children)
-            updateObject(child);
+            updateChildObject(child);
         o.updateTransforms();
     }
 
@@ -489,11 +467,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);
 }
 
@@ -568,165 +549,138 @@ 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+1,59,8*p,-1);
+        x.beginPath();
+
+        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;
+        }
 
-    // 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);
+        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,20,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*p,30,10,0,2*PI,1,0);
+    circle(59,30,4,0,7,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);
+    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
 
-    // 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);
-
-    // front brush
-    for (let i=6; i--;)
+    // wheels
+    for (let i=3;i--;) for (let j=2;j--;) circle(17+15*i,47,j?7:1,0,2*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();
 }
 /**
@@ -887,7 +841,7 @@ function debugPoint(pos, color, time, angle, screenSpace=false)
 function debugLine(posA, posB, color, width=.1, time, screenSpace=false)
 {
     ASSERT(isVector2(posA), 'posA must be a vec2');
-    ASSERT(isVector2(posB), 'posB must be sa vec2');
+    ASSERT(isVector2(posB), 'posB must be a vec2');
     ASSERT(isNumber(width), 'width must be a number');
 
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
@@ -1715,7 +1669,9 @@ function wave(frequency=1, amplitude=1, t=time, offset=0)
 function isNumber(n) { return typeof n === 'number' && !isNaN(n); }
 
 /**
- * Check if object is a valid string or can be converted to one
+ * Check if object can be converted to a string (has a toString method)
+ * - Returns true for strings, numbers, and most objects
+ * - Returns false for null and undefined
  * @param {any} s
  * @return {boolean}
  * @memberof Math */
@@ -1792,7 +1748,7 @@ function lineTest(posStart, posEnd, testFunction, normal)
                 if (stepX < 0)
                     hitPos.x -= e;
             }
-            if (stepY < 0)
+            else if (stepY < 0)
                 hitPos.y -= e;
 
             // set normal
@@ -2499,7 +2455,7 @@ class Color
  *  @memberof Math */
 const WHITE = debugProtectConstant(rgb());
 
-/** Color - Clear White #757474ff with 0 alpha
+/** Color - Clear White #ffffff00 with 0 alpha
  *  @type {Color}
  *  @memberof Math */
 const CLEAR_WHITE = debugProtectConstant(rgb(1,1,1,0));
@@ -2509,7 +2465,7 @@ const CLEAR_WHITE = debugProtectConstant(rgb(1,1,1,0));
  *  @memberof Math */
 const BLACK = debugProtectConstant(rgb(0,0,0));
 
-/** Color - Clear Black #000000 with 0 alpha
+/** Color - Clear Black #00000000 with 0 alpha
  *  @type {Color}
  *  @memberof Math */
 const CLEAR_BLACK = debugProtectConstant(rgb(0,0,0,0));
@@ -2565,6 +2521,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}
@@ -2651,86 +2691,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
@@ -3391,17 +3374,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;
@@ -3610,10 +3595,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;
@@ -3629,16 +3614,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
@@ -3654,10 +3635,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');
                 }
@@ -3675,19 +3658,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);
         }
     }
 
@@ -3786,7 +3769,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)
@@ -4038,7 +4021,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}
      */
@@ -4577,6 +4560,31 @@ function drawTextScreen(text, pos, size, color=WHITE, lineWidth=0, lineColor=BLA
 ///////////////////////////////////////////////////////////////////////////////
 // Drawing utilities
 
+/** Load a texture at a specific index
+ *  @param {number} textureIndex - Index to store the texture at
+ *  @param {string} [src] - Image source path
+ *  @return {Promise} Promise that resolves when texture is loaded
+ *  @memberof Draw */
+async function loadTexture(textureIndex, src)
+{
+    ASSERT(isNumber(textureIndex), 'textureIndex must be a number');
+    ASSERT(!textureInfos[textureIndex], 'textureIndex is already loaded!');
+    ASSERT(!src || isString(src), 'image src must be a string');
+    
+    const image = new Image;
+    if (src)
+    {
+        await new Promise(resolve =>
+        {
+            image.onerror = image.onload = resolve;
+            image.crossOrigin = 'anonymous';
+            image.src = src;
+        });
+    }
+    
+    textureInfos[textureIndex] = new TextureInfo(image);
+}
+
 /** Convert from screen to world space coordinates
  *  @param {Vector2} screenPos
  *  @return {Vector2}
@@ -4868,7 +4876,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)
     {
@@ -4957,23 +4965,20 @@ class FontImage
 }
 
 // load engine font, called automatically on startup
-function fontImageInit()
+async function fontImageInit()
 {
-    return new Promise(resolve =>
+    const image = new Image;
+    await new Promise(resolve =>
     {
-        // create the engine font
-        const image = new Image;
-        image.onerror = image.onload = ()=>
-        {
-            const tilePos=vec2(), tileSize=vec2(8), padding=1, bleed=0;
-            const textureInfo = new TextureInfo(image);
-            const tileInfo = new TileInfo(tilePos, tileSize, textureInfo, padding, bleed);
-            engineFontImage = new FontImage(tileInfo);
-            resolve();
-        }
+        image.onerror = image.onload = resolve;
         image.crossOrigin = 'anonymous';
         image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAAeAQMAAABnrVXaAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAjpJREFUOMu9kzFu2zAUhn+CAROgqrk+B2l0BWYxMjlXeYaAtFtbdA1sGgHqRQfI0CNkSG5AwYB0BQ8d5Bsomwah6CPVeGg6tEPzAxLwyI+P78cP4u9lNO9OoMKnLMOobG5020/yaj/MrRcCGh1gBbyiLTPJEYaIiom5KM9Jq7KgynMGtb6L4GL4MF2H4LQKCXTvDVw2I4MsgZT7QLExdiutH+D08VOP3INXRrWX1/mmpbkNgAPYRVANb4xpcegYvhiNbIXauQICEjBuYLfMakaakWQeXxiZ0VDtuJCKs3ztMV59QtsHJNcRxDzfdL21ty3PrfIcXTN+E+GFAv6T5nbT9jd50/WFxb5ksdAv49qS6ouymG66ji08UMT6moykYLAo+V0j23GN4m829ZySAD5K7QsBfQTvOG8eE+gTeGYRAmnNAubN3hf5Zv9tJWDHp/VTuaSm7SN4fyINQqaNO3RMVxvpSPXnOChnRNvFcGY0gnwiPswYwTKVPE0zVtX3mTEIOoFzaqLrGuJaV+Uqumb71fVk/VoOH3cdLNQP/FHi8hV0CQNoqBZsUPlLPMsdCJro9QAaQQ0woDy9BJm0eTxCFnO9srcYlhNVlfR2EyTrph1uUtbUtAJifwRgrKuYdXVHeb0YI3QpawohQHkloI3J5FuVwI5ORxC9k2Tuz9Ir1IjgeIPGMHYkAZe2RuYkmWFmt3gGbTPOmBUWVTmRmHtGrfpzG/yuQNOKa6gBB/WA9khitPgl6/GP+gl2Af6tCbvaygAAAABJRU5ErkJggg==';
     });
+    
+    const tilePos=vec2(), tileSize=vec2(8), padding=1, bleed=0;
+    const textureInfo = new TextureInfo(image);
+    const tileInfo = new TileInfo(tilePos, tileSize, textureInfo, padding, bleed);
+    engineFontImage = new FontImage(tileInfo);
 }
 /**
  * LittleJS Input System
@@ -5744,7 +5749,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));
@@ -5956,7 +5961,7 @@ class Sound
     
     /** Loads a sound from a URL and decodes it into sample data.
     *  @param {string} filename
-    *  @return {Promise<void>} */
+    *  @return {Promise} */
     async loadSound(filename)
     {
         const response = await fetch(filename);
@@ -6014,7 +6019,7 @@ class Sound
  * // Control the individual instance
  * instance.setVolume(.5);
  * instance.pause();
- * instance.unpause();
+ * instance.resume();
  * instance.stop();
  */
 class SoundInstance
@@ -6128,7 +6133,7 @@ class SoundInstance
         this.startTime = undefined;
     }
 
-    /** Unpauses this sound instance */
+    /** Resume this sound instance */
     resume()
     {
         if (!this.isPaused()) return;
@@ -6142,8 +6147,8 @@ class SoundInstance
      */
     isPlaying() { return !!this.source; }
 
-    /** Check if this instance is paused and was not stopped
-     *  @return {boolean} - True if paused
+    /** Check if this instance is paused or stopped (not currently playing)
+     *  @return {boolean} - True if not playing
      */
     isPaused() { return !this.isPlaying(); }
 
@@ -6445,50 +6450,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;
         }
     }
@@ -7052,18 +7069,22 @@ class TileCollisionLayer extends TileLayer
     /** 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 function 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);
@@ -7074,9 +7095,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;
@@ -7084,52 +7103,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 function 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);
@@ -7147,7 +7182,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)
@@ -7177,7 +7212,7 @@ class ParticleEmitter extends EngineObject
      */
     constructor
     (
-        position,
+        pos,
         angle,
         emitSize = 0,
         emitTime = 0,
@@ -7206,12 +7241,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 */
@@ -7262,26 +7298,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
@@ -7295,7 +7336,7 @@ class ParticleEmitter extends EngineObject
         }
 
         // update emitter
-        if (!this.emitTime || this.getAliveTime() <= this.emitTime)
+        if (this.isActive())
         {
             // emit particles
             if (this.emitRate && particleEmitRateScale)
@@ -7305,14 +7346,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);
         }
@@ -7323,14 +7371,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;
         }
 
@@ -7350,25 +7399,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;
-        }
-        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();
+            velocity.x += this.velocity.x;
+            velocity.y += this.velocity.y;
+            angleVelocity += this.angleVelocity;
+        }
+        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);
@@ -7377,140 +7418,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)
         {
-            // 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;
+            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))
+        {
+            // 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');
+                }
+            }
+        }
+    }
+
+    /** 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, sorted by renderOrder */
+    /** 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);
     }
 }
@@ -8790,7 +8936,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
@@ -9183,7 +9329,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;
@@ -9649,7 +9795,7 @@ class UISystemPlugin
 
         const savedNavigationDirection = uiSystem.navigationDirection;
 
-        // allow both axies for navigation
+        // allow both axes for navigation
         uiSystem.navigationDirection = 2;
 
         // confirm menu
@@ -9744,7 +9890,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;
@@ -10232,6 +10378,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;
@@ -10277,19 +10425,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 = clamp(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();
@@ -10311,7 +10470,7 @@ 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
  */
@@ -10352,12 +10511,11 @@ class UIVideo extends UIObject
     
     /** Play or resume the video
      *  @return {Promise} Promise that resolves when playback starts */
-    play()
+    async play()
     {
         // try to play the video, catch any errors (autoplay may be blocked)
-        const promise = this.video.play();
-        promise?.catch(()=>{});
-        return promise;
+        try { await this.video.play(); }
+        catch(e) {}
     }
     
     /** Pause the video */
@@ -11060,11 +11218,11 @@ class Box2dStaticObject extends Box2dObject
 
 ///////////////////////////////////////////////////////////////////////////////
 /** 
- * Box2D Kiematic Object - Box2d with a kinematic physics body
+ * Box2D Kinematic Object - Box2d with a kinematic physics body
  * @extends Box2dObject
  * @memberof Box2D
  */
-class Box2dKiematicObject extends Box2dObject 
+class Box2dKinematicObject extends Box2dObject 
 {
     /** Create a LittleJS object with Box2d physics
      *  @param {Vector2}  [pos]
@@ -11116,20 +11274,19 @@ class Box2dTileLayer extends Box2dStaticObject
         this.destroyAllFixtures();
 
         // create box2d object for this layer
-        const size = this.tileLayer.size;
         this.pos = this.tileLayer.pos.copy();
-        this.size = size.copy();
+        this.size = this.tileLayer.size.copy();
 
         // track which tiles have been processed
         const processed = [];
-        const getIndex = (x, y)=> x + y * size.x;
+        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 < size.x; ++x)
-        for (let y = 0; y < size.y; ++y)
+        for (let x = 0; x < this.size.x; ++x)
+        for (let y = 0; y < this.size.y; ++y)
         {
             if (!isSolidUnprocessed(x, y)) continue;
 
@@ -12785,6 +12942,8 @@ export
     saveCanvas,
     saveDataURL,
     shareURL,
+    readSaveData,
+    writeSaveData,
 
     // Random
     rand,
@@ -12994,7 +13153,8 @@ export
     Box2dPlugin,
     Box2dObject,
     Box2dStaticObject,
-    Box2dKiematicObject,
+    Box2dKinematicObject,
+    Box2dTileLayer,
     Box2dRaycastResult,
     Box2dJoint,
     Box2dTargetJoint,