littlejsengine 1.14.19 → 1.14.28

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.19';
+const engineVersion = '1.15.0';
 
 /** Frames per second to update
  *  @type {number}
@@ -164,7 +164,7 @@ function engineAddPlugin(update, render, glContextLost, glContextRestored)
 async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
     ASSERT(!mainContext, 'engine already initialized');
-    ASSERT(Array.isArray(imageSources), 'pass in images as array');
+    ASSERT(isArray(imageSources), 'pass in images as array');
 
     // allow passing in empty functions
     gameInit       ||= ()=>{};
@@ -456,21 +456,24 @@ function engineObjectsUpdate()
     // recursive object update
     function updateObject(o)
     {
-        if (!o.destroyed)
-        {
-            o.update();
-            for (const child of o.children)
-                updateObject(child);
-        }
+        if (o.destroyed)
+            return;
+
+        o.update();
+        for (const child of o.children)
+            updateObject(child);
     }
     for (const o of engineObjects)
     {
+        if (o.parent)
+            continue;
+
         // update top level objects
-        if (!o.parent)
-        {
-            updateObject(o);
-            o.updateTransforms();
-        }
+        o.update();
+        o.updatePhysics();
+        for (const child of o.children)
+            updateObject(child);
+        o.updateTransforms();
     }
 
     // remove destroyed objects
@@ -503,7 +506,7 @@ function engineObjectsCollect(pos, size, objects=engineObjects)
     else if (size instanceof Vector2)  // bounding box test
     {
         for (const o of objects)
-            isOverlapping(pos, size, o.pos, o.size) && collectedObjects.push(o);
+            o.isOverlapping(pos, size) && collectedObjects.push(o);
     }
     else  // circle test
     {
@@ -516,7 +519,7 @@ function engineObjectsCollect(pos, size, objects=engineObjects)
 
 /**
  * @callback ObjectCallbackFunction - Function that processes an object
- * @param {EngineObject} uiObjects
+ * @param {EngineObject} object
  *  @memberof Engine
  */
 
@@ -564,7 +567,7 @@ function drawEngineSplashScreen(t)
         // 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,Math.hypot(w,h)*.7);
+        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
         g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
         g.addColorStop(1,hsl(0,0,0,p3).toString());
         x.save();
@@ -755,7 +758,8 @@ function debugShowErrors(){}
 function debugVideoCaptureIsActive(){ return false; }
 function debugVideoCaptureStart (){}
 function debugVideoCaptureStop  (){}
-function debugVideoCaptureUpdate(){}
+function debugVideoCaptureUpdate(){}
+function debugProtectConstant(o){ return o; }
 /**
  * LittleJS Utility Classes and Functions
  * - General purpose math library
@@ -766,7 +770,7 @@ function debugVideoCaptureUpdate(){}
  * @namespace Utilities
  */
 
-/** A shortcut to get Math.PI
+/** The value of PI
  *  @type {number}
  *  @default Math.PI
  *  @memberof Utilities */
@@ -776,25 +780,80 @@ const PI = Math.PI;
  *  @param {number} value
  *  @return {number}
  *  @memberof Utilities */
-function abs(value) { return Math.abs(value); }
+const abs = Math.abs;
+
+/** Returns floored value of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const floor = Math.floor;
+
+/** Returns ceiled value of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const ceil = Math.ceil;
+
+/** Returns rounded value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const round = Math.round;
 
 /** Returns lowest value passed in
  *  @param {...number} values
  *  @return {number}
  *  @memberof Utilities */
-function min(...values) { return Math.min(...values); }
+const min = Math.min;
 
 /** Returns highest value passed in
  *  @param {...number} values
  *  @return {number}
  *  @memberof Utilities */
-function max(...values) { return Math.max(...values); }
+const max = Math.max;
 
 /** Returns the sign of value passed in
  *  @param {number} value
  *  @return {number}
  *  @memberof Utilities */
-function sign(value) { return Math.sign(value); }
+const sign = Math.sign;
+
+/** Returns hypotenuse of values passed in
+ *  @param {...number} values
+ *  @return {number}
+ *  @memberof Utilities */
+const hypot = Math.hypot;
+
+/** Returns log2 of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const log2 = Math.log2;
+
+/** Returns sin of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const sin = Math.sin;
+
+/** Returns cos of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const cos = Math.cos;
+
+/** Returns tan of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const tan = Math.tan;
+
+/** Returns atan2 of values passed in
+ *  @param {number} y
+ *  @param {number} x
+ *  @return {number}
+ *  @memberof Utilities */
+const atan2 = Math.atan2;
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {number} dividend
@@ -899,7 +958,7 @@ function isPowerOfTwo(value) { return !(value & (value - 1)); }
  *  @param {number} value
  *  @return {number}
  *  @memberof Utilities */
-function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
+function nearestPowerOfTwo(value) { return 2**ceil(log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping
  *  this can be used for simple collision detection between objects
@@ -967,7 +1026,7 @@ function isIntersecting(start, end, pos, size)
  *  @return {number}            - Value waving between 0 and amplitude
  *  @memberof Utilities */
 function wave(frequency=1, amplitude=1, t=time, offset=0)
-{ return amplitude/2 * (1 - Math.cos(offset + t*frequency*2*PI)); }
+{ return amplitude/2 * (1 - cos(offset + t*frequency*2*PI)); }
 
 /** Formats seconds to mm:ss style for display purposes
  *  @param {number} t - time in seconds
@@ -1006,6 +1065,103 @@ function isNumber(n) { return typeof n === 'number' && !isNaN(n); }
  * @memberof Utilities */
 function isString(s) { return s !== undefined && s !== null && typeof s.toString() === 'string'; }
 
+/**
+ * Check if object is an array
+ * @param {any} a
+ * @return {boolean}
+ * @memberof Utilities */
+function isArray(a) { return Array.isArray(a); }
+
+/**
+ * @callback LineTestFunction - Checks if a position is colliding
+ * @param {Vector2} pos
+ * @memberof Draw
+ */
+
+/**
+ * Casts a ray and returns position of the first collision found, or undefined if none are found
+ * @param {Vector2} posStart
+ * @param {Vector2} posEnd
+ * @param {LineTestFunction} testFunction - Check if colliding
+ * @param {Vector2} [normal] - Optional vector to store the normal
+ * @return {Vector2|undefined} - Position of the collision or undefined if none found
+ * @memberof Utilities */
+function lineTest(posStart, posEnd, testFunction, normal)
+{
+    ASSERT(isVector2(posStart), 'posStart must be a vec2');
+    ASSERT(isVector2(posEnd), 'posEnd must be a vec2');
+    ASSERT(typeof testFunction === 'function', 'testFunction must be a function');
+    ASSERT(!normal || isVector2(normal), 'normal must be a vec2');
+
+    // get ray direction and length
+    const dx = posEnd.x - posStart.x;
+    const dy = posEnd.y - posStart.y;
+    const totalLength = hypot(dx, dy);
+    if (!totalLength)
+        return;
+
+    // current integer cell we are in
+    const pos = posStart.floor();
+
+    // normalize ray direction
+    const dirX = dx / totalLength;
+    const dirY = dy / totalLength;
+
+    // step direction in grid
+    const stepX = sign(dirX);
+    const stepY = sign(dirY);
+
+    // distance along the ray to cross one full cell in X or Y
+    const tDeltaX = dirX ? abs(1 / dirX) : Infinity;
+    const tDeltaY = dirY ? abs(1 / dirY) : Infinity;
+
+    // distance along the ray from start to the first grid boundary
+    const nextGridX = stepX > 0 ? pos.x + 1 : pos.x;
+    const nextGridY = stepY > 0 ? pos.y + 1 : pos.y;
+    const tMaxX = dirX ? (nextGridX - posStart.x) / dirX : Infinity;
+    const tMaxY = dirY ? (nextGridY - posStart.y) / dirY : Infinity;
+
+    // use line drawing algorithm to test for collisions
+    let t = 0, tX = tMaxX, tY = tMaxY, wasX = tDeltaX < tDeltaY;
+    while (t < totalLength)
+    {
+        if (testFunction(pos))
+        {
+            // set hit point
+            const hitPos = vec2(posStart.x + dirX*t, posStart.y + dirY*t);
+
+            // move inside of tile if on positive edge
+            const e = 1e-9;
+            if (wasX)
+            {
+                if (stepX < 0)
+                    hitPos.x -= e;
+            }
+            if (stepY < 0)
+                hitPos.y -= e;
+
+            // set normal
+            if (normal)
+                wasX ? normal.set(-stepX,0) : normal.set(0,-stepY);
+            return hitPos;
+        }
+
+        // advance to the next grid boundary
+        if (wasX = tX < tY)
+        {
+            pos.x += stepX;
+            t = tX;
+            tX += tDeltaX;
+        }
+        else
+        {
+            pos.y += stepY;
+            t = tY;
+            tY += tDeltaY;
+        }
+    }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Random global functions
@@ -1024,7 +1180,7 @@ function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valu
  *  @param {number} [valueB]
  *  @return {number}
  *  @memberof Random */
-function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
+function randInt(valueA, valueB=0) { return floor(rand(valueA,valueB)); }
 
 /** Randomly returns true or false given the chance of true passed in
  *  @param {number} [chance]
@@ -1103,7 +1259,7 @@ class RandomGenerator
     *  @param {number} valueA
     *  @param {number} [valueB]
     *  @return {number} */
-    int(valueA, valueB=0) { return Math.floor(this.float(valueA, valueB)); }
+    int(valueA, valueB=0) { return floor(this.float(valueA, valueB)); }
 
     /** Randomly returns true or false given the chance of true passed in
     *  @param {number} [chance]
@@ -1130,6 +1286,39 @@ class RandomGenerator
     *  @return {Vector2} */
     vec2(valueA=1, valueB=0)
     { return vec2(this.float(valueA, valueB), this.float(valueA, valueB)); }
+
+    /** Returns a random color between the two passed in colors, combine components if linear
+    *  @param {Color}   [colorA=(1,1,1,1)]
+    *  @param {Color}   [colorB=(0,0,0,1)]
+    *  @param {boolean} [linear]
+    *  @return {Color} */
+    randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear=false)
+    {
+        return linear ? colorA.lerp(colorB, this.float()) :
+            new Color(
+                this.float(colorA.r,colorB.r), 
+                this.float(colorA.g,colorB.g), 
+                this.float(colorA.b,colorB.b), 
+                this.float(colorA.a,colorB.a));
+    }
+
+    /** Returns a new color that has each component randomly adjusted
+     * @param {Color} color
+     * @param {number} [amount]
+     * @param {number} [alphaAmount]
+     * @return {Color} */
+    mutateColor(color, amount=.05, alphaAmount=0)
+    {
+        ASSERT_NUMBER_VALID(amount);
+        ASSERT_NUMBER_VALID(alphaAmount);
+        return new Color
+        (
+            color.r + this.float(amount, -amount),
+            color.g + this.float(amount, -amount),
+            color.b + this.float(amount, -amount),
+            color.a + this.float(alphaAmount, -alphaAmount)
+        ).clamp();
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1281,7 +1470,7 @@ class Vector2
 
     /** Returns the clockwise angle of this vector, up is angle 0
      * @return {number} */
-    angle() { return Math.atan2(this.x, this.y); }
+    angle() { return atan2(this.x, this.y); }
 
     /** Sets this vector with clockwise angle and length passed in
      * @param {number} [angle]
@@ -1291,8 +1480,8 @@ class Vector2
     {
         ASSERT_NUMBER_VALID(angle);
         ASSERT_NUMBER_VALID(length);
-        this.x = length*Math.sin(angle);
-        this.y = length*Math.cos(angle);
+        this.x = length*sin(angle);
+        this.y = length*cos(angle);
         return this;
     }
 
@@ -1302,7 +1491,7 @@ class Vector2
     rotate(angle)
     {
         ASSERT_NUMBER_VALID(angle);
-        const c = Math.cos(-angle), s = Math.sin(-angle);
+        const c = cos(-angle), s = sin(-angle);
         return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
     }
 
@@ -1334,7 +1523,7 @@ class Vector2
 
     /** Returns a copy of this vector with each axis floored
      * @return {Vector2} */
-    floor() { return new Vector2(Math.floor(this.x), Math.floor(this.y)); }
+    floor() { return new Vector2(floor(this.x), floor(this.y)); }
 
     /** Returns new vec2 with modded values
     *  @param {number} [divisor]
@@ -1582,7 +1771,6 @@ class Color
      * @return {string} */
     toString(useAlpha = true)
     {
-        ASSERT(typeof useAlpha === 'boolean', 'Use alpha boolean is invalid.', useAlpha);
         if (debug && !this.isValid())
             return `#000`;
         const toHex = (c)=> ((c=clamp(c)*255|0)<16 ? '0' : '') + c.toString(16);
@@ -1642,67 +1830,67 @@ class Color
 /** Color - White #ffffff
  *  @type {Color}
  *  @memberof Utilities */
-const WHITE = protectEngineConstant(rgb());
+const WHITE = debugProtectConstant(rgb());
 
 /** Color - Clear White #757474ff with 0 alpha
  *  @type {Color}
  *  @memberof Utilities */
-const CLEAR_WHITE = protectEngineConstant(rgb(1,1,1,0));
+const CLEAR_WHITE = debugProtectConstant(rgb(1,1,1,0));
 
 /** Color - Black #000000
  *  @type {Color}
  *  @memberof Utilities */
-const BLACK = protectEngineConstant(rgb(0,0,0));
+const BLACK = debugProtectConstant(rgb(0,0,0));
 
 /** Color - Clear Black #000000 with 0 alpha
  *  @type {Color}
  *  @memberof Utilities */
-const CLEAR_BLACK = protectEngineConstant(rgb(0,0,0,0));
+const CLEAR_BLACK = debugProtectConstant(rgb(0,0,0,0));
 
 /** Color - Gray #808080
  *  @type {Color}
  *  @memberof Utilities */
-const GRAY = protectEngineConstant(rgb(.5,.5,.5));
+const GRAY = debugProtectConstant(rgb(.5,.5,.5));
 
 /** Color - Red #ff0000
  *  @type {Color}
  *  @memberof Utilities */
-const RED = protectEngineConstant(rgb(1,0,0));
+const RED = debugProtectConstant(rgb(1,0,0));
 
 /** Color - Orange #ff8000
  *  @type {Color}
  *  @memberof Utilities */
-const ORANGE = protectEngineConstant(rgb(1,.5,0));
+const ORANGE = debugProtectConstant(rgb(1,.5,0));
 
 /** Color - Yellow #ffff00
  *  @type {Color}
  *  @memberof Utilities */
-const YELLOW = protectEngineConstant(rgb(1,1,0));
+const YELLOW = debugProtectConstant(rgb(1,1,0));
 
 /** Color - Green #00ff00
  *  @type {Color}
  *  @memberof Utilities */
-const GREEN = protectEngineConstant(rgb(0,1,0));
+const GREEN = debugProtectConstant(rgb(0,1,0));
 
 /** Color - Cyan #00ffff
  *  @type {Color}
  *  @memberof Utilities */
-const CYAN = protectEngineConstant(rgb(0,1,1));
+const CYAN = debugProtectConstant(rgb(0,1,1));
 
 /** Color - Blue #0000ff
  *  @type {Color}
  *  @memberof Utilities */
-const BLUE = protectEngineConstant(rgb(0,0,1));
+const BLUE = debugProtectConstant(rgb(0,0,1));
 
 /** Color - Purple #8000ff
  *  @type {Color}
  *  @memberof Utilities */
-const PURPLE = protectEngineConstant(rgb(.5,0,1));
+const PURPLE = debugProtectConstant(rgb(.5,0,1));
 
 /** Color - Magenta #ff00ff
  *  @type {Color}
  *  @memberof Utilities */
-const MAGENTA = protectEngineConstant(rgb(1,0,1));
+const MAGENTA = debugProtectConstant(rgb(1,0,1));
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -1765,41 +1953,11 @@ class Timer
 
     /** Returns this timer expressed as a string
      * @return {string} */
-    toString() { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }
+    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(); }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Helper functions used by the engine
-
-// make color constants immutable with debug assertions
-function protectEngineConstant(obj)
-{
-    if (debug)
-    {
-        // get properties and store original values
-        const props = Object.keys(obj), values = {};
-        props.forEach(prop => values[prop] = obj[prop]);
-        
-        // replace with getters/setters that assert
-        props.forEach(prop =>
-        {
-            Object.defineProperty(obj, prop, {
-                get: () => values[prop],
-                set: (value) => 
-                {
-                    ASSERT(false, `Cannot modify engine constant. Attempted to set constant (${obj}) property '${prop}' to '${value}'.`);
-                },
-                enumerable: true
-            });
-        });
-    }
-    
-    // freeze the object to prevent adding new properties
-    return Object.freeze(obj);
 }
 /**
  * LittleJS Engine Settings
@@ -2017,6 +2175,14 @@ let touchInputEnable = true;
  *  @memberof Settings */
 let touchGamepadEnable = false;
 
+/** True if touch gamepad should have start button in the center
+ *  - When the game is paused, any touch will press the button
+ *  - This can function as a way to pause/unpause the game
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let touchGamepadCenterButton = true;
+
 /** True if touch gamepad should be analog stick or false to use if 8 way dpad
  *  @type {boolean}
  *  @default
@@ -2192,9 +2358,14 @@ function setHeadlessMode(headless) { headlessMode = headless; }
  *  @memberof Settings */
 function setGLEnable(enable)
 {
+    if (enable && !glCanBeEnabled)
+    {
+        console.warn('Can not enable WebGL if it was disabled on start.');
+        return;
+    }
     glEnable = enable;
     if (glCanvas) // hide glCanvas if WebGL is disabled
-        glCanvas.style.visibility = enable ? 'visible' : 'hidden';
+        glCanvas.style.display = enable ? '' : 'none';
 }
 
 /** Set how many sided polygons to use when drawing circles and ellipses with WebGL
@@ -2282,6 +2453,12 @@ function setTouchInputEnable(enable) { touchInputEnable = enable; }
  *  @memberof Settings */
 function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
 
+/** True if touch gamepad should have start button in the center
+ *  - This can function as a way to pause/unpause the game
+ *  @param {boolean} enable
+ *  @memberof Settings */
+function setTouchGamepadCenterButton(enable) { touchGamepadCenterButton = enable; }
+
 /** Set if touch gamepad should be analog stick or 8 way dpad
  *  @param {boolean} analog
  *  @memberof Settings */
@@ -2491,11 +2668,10 @@ class EngineObject
     }
 
     /** Update the object physics, called automatically by engine once each frame */
-    update()
+    updatePhysics()
     {
         // child objects do not have physics
-        if (this.parent)
-            return;
+        ASSERT(!this.parent);
 
         if (this.clampSpeed)
         {
@@ -2545,7 +2721,7 @@ class EngineObject
                     continue;
 
                 // check collision
-                if (!isOverlapping(this.pos, this.size, o.pos, o.size))
+                if (!this.isOverlappingObject(o))
                     continue;
 
                 // notify objects of collision and check if should be resolved
@@ -2643,6 +2819,27 @@ class EngineObject
                     // 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)
+                    {
+                        // try to move up a tiny bit
+                        const epsilon = 1e-3;
+                        const maxMoveUp = .1;
+                        const y = floor(oldPos.y-this.size.y/2+1) +
+                            this.size.y/2 + epsilon;
+                        const delta = y - this.pos.y;
+                        if (delta < maxMoveUp)
+                        if (!tileCollisionTest(vec2(this.pos.x, y), this.size, this))
+                        {   
+                            this.pos.y = y;
+                            debugPhysics && debugRect(this.pos, this.size, '#ff0');
+                            return;
+                        }
+
+                        // move to previous position and bounce
+                        this.pos.x = oldPos.x;
+                        this.velocity.x *= -this.restitution;
+                    }
                     if (blockedLayerY || !blockedLayerX)
                     {
                         // bounce velocity
@@ -2666,18 +2863,15 @@ class EngineObject
                             this.groundObject = undefined;
                         }
                     }
-                    if (blockedLayerX)
-                    {
-                        // move to previous position and bounce
-                        this.pos.x = oldPos.x;
-                        this.velocity.x *= -this.restitution;
-                    }
                     debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
             }
         }
     }
 
+    /** Update the object, called automatically by engine once each frame. Does nothing by default. */
+    update() {}
+
     /** Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder */
     render()
     {
@@ -2729,10 +2923,24 @@ class EngineObject
      */
     collideWithObject(object) { return true; }
 
+    /** Get this object's up vector
+     *  @param {number} [scale] - length of the vector
+     *  @return {Vector2} */
+    getUp(scale=1) { return vec2().setAngle(this.angle, scale); }
+
+    /** Get this object's right vector
+     *  @param {number} [scale] - length of the vector
+     *  @return {Vector2} */
+    getRight(scale=1) { return vec2().setAngle(this.angle+PI/2, scale); }
+
     /** How long since the object was created
      *  @return {number} */
     getAliveTime() { return time - this.spawnTime; }
 
+    /** Get the speed of this object
+     *  @return {number} */
+    getSpeed() { return this.velocity.length(); }
+
     /** Apply acceleration to this object (adjust velocity, not affected by mass)
      *  @param {Vector2} acceleration */
     applyAcceleration(acceleration)
@@ -2777,6 +2985,20 @@ class EngineObject
         child.parent = 0;
     }
 
+    /** Check if overlapping another engine object
+     *  Collisions are resoloved to prevent overlaps
+     *  @param {EngineObject} object
+     *  @return {boolean} */
+    isOverlappingObject(object)
+    { return this.isOverlapping(object.pos, object.size); }
+
+    /** Check if overlapping a point or aligned bounding box
+     *  @param {Vector2} pos          - Center of box
+     *  @param {Vector2} [size=(0,0)] - Size of box, uses a point if undefined
+     *  @return {boolean} */
+    isOverlapping(pos, size=vec2())
+    { return isOverlapping(this.pos, this.size, pos, size); }
+
     /** Set how this object collides
      *  @param {boolean} [collideSolidObjects] - Does it collide with solid objects?
      *  @param {boolean} [isSolid]             - Does it collide with and block other objects? (expensive in large numbers)
@@ -3080,6 +3302,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     const bleedScale = tileInfo ? tileInfo.bleedScale : 0;
     if (useWebGL)
     {
+        ASSERT(!!glContext, 'WebGL is not enabled!');
         if (screenSpace)
         {
             // convert to world space
@@ -3175,6 +3398,7 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
     if (useWebGL)
     {
+        ASSERT(!!glContext, 'WebGL is not enabled!');
         if (screenSpace)
         {
             // convert to world space
@@ -3186,7 +3410,7 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
         const halfSizeX = size.x/2, halfSizeY = size.y/2;
         const colorTopInt = colorTop.rgbaInt();
         const colorBottomInt = colorBottom.rgbaInt();
-        const c = Math.cos(-angle), s = Math.sin(-angle);
+        const c = cos(-angle), s = sin(-angle);
         for (let i=4; i--;)
         {
             const x = i & 1 ? halfSizeX : -halfSizeX;
@@ -3229,7 +3453,7 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
  *  @memberof Draw */
 function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace, context)
 {
-    ASSERT(Array.isArray(points), 'points must be an array');
+    ASSERT(isArray(points), 'points must be an array');
     ASSERT(isNumber(width), 'width must be a number');
     ASSERT(isColor(color), 'color is invalid');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -3237,6 +3461,7 @@ function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0,
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
     if (useWebGL)
     {
+        ASSERT(!!glContext, 'WebGL is not enabled!');
         let scale = 1;
         if (screenSpace)
         {
@@ -3286,6 +3511,8 @@ function drawLine(posA, posB, width=.1, color, pos=vec2(), angle=0, useWebGL, sc
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(width, halfDelta.length()*2);
     pos = pos.add(posA.add(halfDelta));
+    if (screenSpace)
+        halfDelta.y *= -1;  // flip angle Y if screen space
     angle += halfDelta.angle();
     drawRect(pos, size, color, angle, useWebGL, screenSpace, context);
 }
@@ -3313,7 +3540,7 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
     for (let i=sides; i--;)
     {
         const a = (i/sides)*PI*2;
-        points.push(vec2(Math.sin(a)*sizeX, Math.cos(a)*sizeY));
+        points.push(vec2(sin(a)*sizeX, cos(a)*sizeY));
     }
     drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebGL, screenSpace, context);
 }
@@ -3332,7 +3559,7 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
 function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace=false, context=undefined)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
-    ASSERT(Array.isArray(points), 'points must be an array');
+    ASSERT(isArray(points), 'points must be an array');
     ASSERT(isColor(color) && isColor(lineColor), 'color is invalid');
     ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
     ASSERT(isNumber(angle), 'angle must be a number');
@@ -3340,6 +3567,7 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
 
     if (useWebGL)
     {
+        ASSERT(!!glContext, 'WebGL is not enabled!');
         let scale = 1;
         if (screenSpace)
         {
@@ -3483,11 +3711,12 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
  *  @param {string}  [font=fontDefault]
  *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
+ *  @param {number}  [angle]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth, context=drawContext)
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth, angle=0, context=drawContext)
 {
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, fontStyle, maxWidth, context);
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
 }
 
 /** Draw text on overlay canvas in world space
@@ -3502,10 +3731,11 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  @param {string}  [font=fontDefault]
  *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
+ *  @param {number}  [angle]
  *  @memberof Draw */
-function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth)
+function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth, angle=0)
 {
-    drawText(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, overlayContext);
+    drawText(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, overlayContext);
 }
 
 /** Draw text on overlay canvas in screen space
@@ -3520,9 +3750,10 @@ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textA
  *  @param {string}  [font=fontDefault]
  *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
+ *  @param {number}  [angle]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, context=overlayContext)
+function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=overlayContext)
 {
     ASSERT(isString(text), 'text must be a string');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -3533,6 +3764,7 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
     ASSERT(['left','center','right'].includes(textAlign), 'align must be left, center, or right');
     ASSERT(isString(font), 'font must be a string');
     ASSERT(isString(fontStyle), 'fontStyle must be a string');
+    ASSERT(isNumber(angle), 'angle must be a number');
     
     context.fillStyle = color.toString();
     context.strokeStyle = lineColor.toString();
@@ -3542,14 +3774,18 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
     context.textBaseline = 'middle';
 
     const lines = (text+'').split('\n');
-    let posY = pos.y;
-    posY -= (lines.length-1) * size/2; // center text vertically
+    const posY = pos.y - (lines.length-1) * size/2; // center vertically
+    context.save();
+    context.translate(pos.x, posY);
+    context.rotate(-angle);
+    let yOffset = 0;
     lines.forEach(line=>
     {
-        lineWidth && context.strokeText(line, pos.x, posY, maxWidth);
-        context.fillText(line, pos.x, posY, maxWidth);
-        posY += size;
+        lineWidth && context.strokeText(line, 0, yOffset, maxWidth);
+        context.fillText(line, 0, yOffset, maxWidth);
+        yOffset += size;
     });
+    context.restore();
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -3561,18 +3797,18 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
  *  @memberof Draw */
 function screenToWorld(screenPos)
 {
-    let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
-    let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
+    let x = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
+    let y = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
     if (cameraAngle)
     {
         // apply camera rotation
-        const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
-        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
-        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
-        cameraPosRelativeX = rotatedX;
-        cameraPosRelativeY = rotatedY;
+        const c = cos(-cameraAngle), s = sin(-cameraAngle);
+        const rotatedX = x * c - y * s;
+        const rotatedY = x * s + y * c;
+        x = rotatedX;
+        y = rotatedY;
     }
-    return new Vector2(cameraPosRelativeX + cameraPos.x, cameraPosRelativeY + cameraPos.y);
+    return new Vector2(x + cameraPos.x, y + cameraPos.y);
 }
 
 /** Convert from world to screen space coordinates
@@ -3581,24 +3817,64 @@ function screenToWorld(screenPos)
  *  @memberof Draw */
 function worldToScreen(worldPos)
 {
-    let cameraPosRelativeX = worldPos.x - cameraPos.x;
-    let cameraPosRelativeY = worldPos.y - cameraPos.y;
+    let x = worldPos.x - cameraPos.x;
+    let y = worldPos.y - cameraPos.y;
     if (cameraAngle)
     {
         // apply inverse camera rotation
-        const cos = Math.cos(cameraAngle), sin = Math.sin(cameraAngle);
-        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
-        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
-        cameraPosRelativeX = rotatedX;
-        cameraPosRelativeY = rotatedY;
+        const c = cos(cameraAngle), s = sin(cameraAngle);
+        const rotatedX = x * c - y * s;
+        const rotatedY = x * s + y * c;
+        x = rotatedX;
+        y = rotatedY;
     }
     return new Vector2
     (
-        cameraPosRelativeX *  cameraScale + mainCanvasSize.x/2 - .5,
-        cameraPosRelativeY * -cameraScale + mainCanvasSize.y/2 - .5
+        x *  cameraScale + mainCanvasSize.x/2 - .5,
+        y * -cameraScale + mainCanvasSize.y/2 - .5
     );
 }
 
+/** Convert from screen to world space coordinates for a directional vector (no translation)
+ *  @param {Vector2} screenDelta
+ *  @return {Vector2}
+ *  @memberof Draw */
+function screenToWorldDelta(screenDelta)
+{
+    let x = screenDelta.x /  cameraScale;
+    let y = screenDelta.y / -cameraScale;
+    if (cameraAngle)
+    {
+        // apply camera rotation
+        const c = cos(-cameraAngle), s = sin(-cameraAngle);
+        const rotatedX = x * c - y * s;
+        const rotatedY = x * s + y * c;
+        x = rotatedX;
+        y = rotatedY;
+    }
+    return new Vector2(x, y);
+}
+
+/** Convert from screen to world space coordinates for a directional vector (no translation)
+ *  @param {Vector2} worldDelta
+ *  @return {Vector2}
+ *  @memberof Draw */
+function worldToScreenDelta(worldDelta)
+{
+    let x = worldDelta.x;
+    let y = worldDelta.y;
+    if (cameraAngle)
+    {
+        // apply inverse camera rotation
+        const c = cos(cameraAngle), s = sin(cameraAngle);
+        const rotatedX = x * c - y * s;
+        const rotatedY = x * s + y * c;
+        x = rotatedX;
+        y = rotatedY;
+    }
+    return new Vector2(x *  cameraScale, y * -cameraScale);
+}
+
 /** Get the camera's visible area in world space
  *  @return {Vector2}
  *  @memberof Draw */
@@ -3651,6 +3927,8 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
     const sx2 = bleedScale;
     const sy2 = bleedScale;
+    sWidth  = max(1,sWidth|0);
+    sHeight = max(1,sHeight|0);
     const sWidth2  = sWidth  - 2*bleedScale;
     const sHeight2 = sHeight - 2*bleedScale;
     if (!canvasColorTiles || (additiveColor ? isWhite(color.add(additiveColor)) && additiveColor.a <= 0 : isWhite(color)))
@@ -3665,7 +3943,7 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
         // copy to offscreen canvas
         workCanvas.width = sWidth;
         workCanvas.height = sHeight;
-        workContext.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight);
+        workContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
 
         // tint image using offscreen work context
         const imageData = workContext.getImageData(0, 0, sWidth, sHeight);
@@ -3939,6 +4217,11 @@ let mouseDeltaScreen = vec2();
  *  @memberof Input */
 let mouseWheel = 0;
 
+/** True if mouse was inside the document window, set to false when mouse leaves
+ *  @type {boolean}
+ *  @memberof Input */
+let mouseInWindow = true;
+
 /** Returns true if user is using gamepad (has more recently pressed a gamepad button)
  *  @type {boolean}
  *  @memberof Input */
@@ -4002,9 +4285,9 @@ function inputUpdate()
     if(!(touchInputEnable && isTouchDevice) && !document.hasFocus())
         inputClear();
 
-    // update mouse world space position
+    // update mouse world space position and delta
     mousePos = screenToWorld(mousePosScreen);
-    mouseDelta = mouseDeltaScreen.multiply(vec2(1,-1)).rotate(-cameraAngle);
+    mouseDelta = screenToWorldDelta(mouseDeltaScreen);
 
     // update gamepads if enabled
     gamepadsUpdate();
@@ -4033,10 +4316,10 @@ function inputInit()
     document.addEventListener('mousedown', onMouseDown);
     document.addEventListener('mouseup', onMouseUp);
     document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseleave', onMouseLeave);
     document.addEventListener('wheel', onMouseWheel);
     document.addEventListener('contextmenu', onContextMenu);
     document.addEventListener('blur', onBlur);
-    document.addEventListener('mouseleave', onMouseLeave);
 
     // init touch input
     if (isTouchDevice && touchInputEnable)
@@ -4058,14 +4341,14 @@ function inputInit()
         if (inputWASDEmulateDirection)
             inputData[0][remapKey(e.code)] = 4;
     }
-    function remapKey(c)
+    function remapKey(k)
     {
         // handle remapping wasd keys to directions
         return inputWASDEmulateDirection ?
-            c === 'KeyW' ? 'ArrowUp' :
-            c === 'KeyS' ? 'ArrowDown' :
-            c === 'KeyA' ? 'ArrowLeft' :
-            c === 'KeyD' ? 'ArrowRight' : c : c;
+            k === 'KeyW' ? 'ArrowUp' :
+            k === 'KeyS' ? 'ArrowDown' :
+            k === 'KeyA' ? 'ArrowLeft' :
+            k === 'KeyD' ? 'ArrowRight' : k : k;
     }
     function onMouseDown(e)
     {
@@ -4078,7 +4361,10 @@ function inputInit()
 
         isUsingGamepad = false;
         inputData[0][e.button] = 3;
+
+        const mousePosScreenLast = mousePosScreen;
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
+        mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
         inputPreventDefault && e.button && e.preventDefault();
     }
     function onMouseUp(e)
@@ -4089,18 +4375,20 @@ function inputInit()
     }
     function onMouseMove(e)
     {
+        mouseInWindow = true;
+        const mousePosScreenLast = mousePosScreen;
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
-        mouseDeltaScreen = mouseDeltaScreen.add(vec2(e.movementX, e.movementY));
+
+        // when pointer is locked use movementX/Y for delta
+        const movement = pointerLockIsActive() ?
+            vec2(e.movementX, e.movementY) :
+            mousePosScreen.subtract(mousePosScreenLast);
+        mouseDeltaScreen = mouseDeltaScreen.add(movement);
     }
+    function onMouseLeave() { mouseInWindow = false; } // mouse moved off window
     function onMouseWheel(e) { mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY); }
     function onContextMenu(e) { e.preventDefault(); } // prevent right click menu
     function onBlur() { inputClear(); } // reset input when focus is lost
-    function onMouseLeave()
-    {
-        // set mouse position and delta when leaving canvas
-        mousePosScreen = vec2(-1);
-        mouseDeltaScreen = vec2(0);
-    }
 }
 
 // convert a mouse or touch event position to screen space
@@ -4144,8 +4432,8 @@ function gamepadsUpdate()
         else if (touchGamepadStick.lengthSquared() > .3)
         {
             // convert to 8 way dpad
-            sticks[0].x = Math.round(touchGamepadStick.x);
-            sticks[0].y = -Math.round(touchGamepadStick.y);
+            sticks[0].x = round(touchGamepadStick.x);
+            sticks[0].y = -round(touchGamepadStick.y);
             sticks[0] = sticks[0].clampLength();
         }
 
@@ -4236,7 +4524,7 @@ let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick =
 function touchGamepadButtonCenter()
 {
     // draw right face buttons
-    let center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    const center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     if (touchGamepadButtonCount <= 2)
         center.x += touchGamepadSize/2;
     return center;
@@ -4246,14 +4534,13 @@ function touchGamepadButtonCenter()
 function touchInputInit()
 {
     // add non passive touch event listeners
-    let handleTouch = handleTouchDefault;
     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;
-    function handleTouchDefault(e)
+    function handleTouch(e)
     {
         if (!touchInputEnable)
             return;
@@ -4273,11 +4560,11 @@ function touchInputInit()
         {
             // set event pos and pass it along
             const pos = vec2(e.touches[0].clientX, e.touches[0].clientY);
-            const lastMousePosScreen = mousePosScreen;
+            const mousePosScreenLast = mousePosScreen;
             mousePosScreen = mouseEventToScreen(pos);
             if (wasTouching)
             {
-                mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(lastMousePosScreen));
+                mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
                 isUsingGamepad = touchGamepadEnable;
             }
             else
@@ -4309,7 +4596,7 @@ function touchInputInit()
         if (touching)
         {
             touchGamepadTimer.set();
-            if (paused && !wasTouching)
+            if (touchGamepadCenterButton && !wasTouching && paused)
             {
                 // touch anywhere to press start when paused
                 touchGamepadButtons[9] = 1;
@@ -4348,7 +4635,8 @@ function touchInputInit()
                 if (button < touchGamepadButtonCount)
                     touchGamepadButtons[button] = 1;
             }
-            else if (startCenter.distance(touchPos) < touchGamepadSize && !wasTouching)
+            else if (touchGamepadCenterButton && !wasTouching && 
+                startCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual start button in center
                 touchGamepadButtons[9] = 1;
@@ -4403,7 +4691,7 @@ function touchGamepadRender()
     const buttonSize = touchGamepadButtonCount > 1 ? touchGamepadSize/4 : touchGamepadSize/2;
     for (let i=0; i<touchGamepadButtonCount; i++)
     {
-        let j = mod(i-1, 4);
+        const j = mod(i-1, 4);
         let button = touchGamepadButtonCount > 2 ? 
             j : min(j, touchGamepadButtonCount-1);
         // fix button locations (swap 2 and 3 to match gamepad layout)
@@ -4505,6 +4793,10 @@ class Sound
     {
         if (!soundEnable || headlessMode) return;
 
+        ASSERT(!zzfxSound || isArray(zzfxSound), 'zzfxSound is invalid');
+        ASSERT(isNumber(range), 'range must be a number');
+        ASSERT(isNumber(taper), 'taper must be a number');
+
         /** @property {number} - World space max range of sound */
         this.range = range;
         /** @property {number} - At what percentage of range should it start tapering */
@@ -4543,6 +4835,12 @@ class Sound
      */
     play(pos, volume=1, pitch=1, randomnessScale=1, loop=false, paused=false)
     {
+        ASSERT(!pos || isVector2(pos), 'pos must be a vec2');
+        ASSERT(isNumber(volume), 'volume must be a number');
+        ASSERT(isNumber(pitch), 'pitch must be a number');
+        ASSERT(isNumber(randomnessScale), 'randomnessScale must be a number');
+
+
         if (!soundEnable || headlessMode) return;
         if (!this.sampleChannels) return;
 
@@ -4588,6 +4886,7 @@ class Sound
      */
     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);
     }
@@ -4596,7 +4895,7 @@ class Sound
      *  @return {number} - How long the sound is in seconds (undefined if loading)
      */
     getDuration()
-    { return this.sampleChannels && this.sampleChannels[0].length / this.sampleRate; }
+    { return this.sampleChannels && this.sampleRate ? 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
@@ -4638,6 +4937,7 @@ class SoundWave extends Sound
         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;
@@ -4854,7 +5154,7 @@ class SoundInstance
     /** Get the total duration of this sound
      *  @return {number} - Total duration in seconds
      */
-    getDuration() { return this.sound.getDuration() / this.rate; }
+    getDuration() { return this.rate ? this.sound.getDuration() / this.rate : 0; }
 
     /** Get source of this sound instance
      *  @return {AudioBufferSourceNode}
@@ -5044,10 +5344,10 @@ function zzfxG
 
         // biquad LP/HP filter
         quality = 2, w = PI2 * abs(filter) * 2 / sampleRate,
-        cos = Math.cos(w), alpha = Math.sin(w) / 2 / quality,
-        a0 = 1 + alpha, a1 = -2*cos / a0, a2 = (1 - alpha) / a0,
-        b0 = (1 + sign(filter) * cos) / 2 / a0,
-        b1 = -(sign(filter) + cos) / a0, b2 = b0,
+        cosw = cos(w), alpha = sin(w) / 2 / quality,
+        a0 = 1 + alpha, a1 = -2*cosw / a0, a2 = (1 - alpha) / a0,
+        b0 = (1 + sign(filter) * cosw) / 2 / a0,
+        b1 = -(sign(filter) + cosw) / a0, b2 = b0,
         x2 = 0, x1 = 0, y2 = 0, y1 = 0;
 
         // scale by sample rate
@@ -5070,15 +5370,15 @@ function zzfxG
         if (!(++crush%(bitCrush*100|0)))                   // bit crush
         {
             s = shape? shape>1? shape>2? shape>3? shape>4? // wave shape
-                (t/PI2%1 < shapeCurve/2? 1 : -1) :         // 5 square duty
-                Math.sin(t**3) :                           // 4 noise
-                Math.max(Math.min(Math.tan(t),1),-1):      // 3 tan
-                1-(2*t/PI2%2+2)%2:                         // 2 saw
-                1-4*abs(Math.round(t/PI2)-t/PI2):          // 1 triangle
-                Math.sin(t);                               // 0 sin
+                (t/PI2%1 < shapeCurve/2? 1 : -1) : // 5 square duty
+                sin(t**3) :                        // 4 noise
+                max(min(tan(t),1),-1):             // 3 tan
+                1-(2*t/PI2%2+2)%2:                 // 2 saw
+                1-4*abs(round(t/PI2)-t/PI2):       // 1 triangle
+                sin(t);                            // 0 sin
 
             s = (repeatTime ?
-                    1 - tremolo + tremolo*Math.sin(PI2*i/repeatTime) // tremolo
+                    1 - tremolo + tremolo*sin(PI2*i/repeatTime) // tremolo
                     : 1) *
                 (shape>4?s:sign(s)*abs(s)**shapeCurve) * // shape curve
                 (i < attack ? i/attack :                 // attack
@@ -5100,8 +5400,8 @@ function zzfxG
         }
 
         f = (frequency += slide += deltaSlide) *// frequency
-            Math.cos(modulation*modOffset++);   // modulation
-        t += f + f*noise*Math.sin(i**5);        // noise
+            cos(modulation*modOffset++);        // modulation
+        t += f + f*noise*sin(i**5);             // noise
 
         if (jump && ++jump > pitchJumpTime)     // pitch jump
         {
@@ -5167,23 +5467,23 @@ function tileCollisionTest(pos, size=vec2(), object, solidOnly=true)
     }
 }
 
-/** Return the center of first tile hit, undefined if nothing was hit.
- *  This does not return the exact intersection, but the center of the tile hit.
+/** Return the exact position of the boudnary 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
- *  @return {Vector2}
+ *  @return {Vector2|undefined} - position of the center of the tile hit or undefined if no hit
  *  @memberof TileLayers */
-function tileCollisionRaycast(posStart, posEnd, object, solidOnly=true)
+function tileCollisionRaycast(posStart, posEnd, object, normal, solidOnly=true)
 {
     for (const layer of tileCollisionLayers)
     {
         if (!solidOnly || layer.isSolid)
         {
-            const hitPos = layer.collisionRaycast(posStart, posEnd, object)
-            if (hitPos)
-                return hitPos;
+            const hitPos = layer.collisionRaycast(posStart, posEnd, object, normal)
+            if (hitPos) return hitPos;
         }
     }
 }
@@ -5321,6 +5621,8 @@ class CanvasLayer extends EngineObject
         /** @property {TextureInfo} - Texture info to use for this object rendering */
         const useWebGL = false; // do not use webgl by default
         this.textureInfo = new TextureInfo(this.canvas, useWebGL);
+        /** @property {boolean} - True if WebGL texture needs to be refreshed */
+        this.refreshWebGL = false;
 
         // disable physics by default
         this.mass = this.gravityScale = this.friction = this.restitution = 0;
@@ -5354,8 +5656,15 @@ class CanvasLayer extends EngineObject
     *  @memberof Draw */
     draw(pos, size, angle=0, color=WHITE, mirror=false, additiveColor, screenSpace=false, context)
     {
-        // draw the canvas layer as a single tile that uses the whole texture
         const useWebGL = glEnable && this.textureInfo.hasWebGL();
+        if (useWebGL && this.refreshWebGL)
+        {
+            // update the WebGL texture
+            this.textureInfo.createWebGLTexture();
+            this.refreshWebGL = false;
+        }
+
+        // draw the canvas layer as a single tile that uses the whole texture
         const tileInfo = new TileInfo().setFullImage(this.textureInfo);
         drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebGL, screenSpace, context);
     }
@@ -5425,9 +5734,18 @@ class CanvasLayer extends EngineObject
     { this.drawTile(pos, size, undefined, color, angle); }
 
     /** Create or update the WebGL texture for this layer
-     *  @param {boolean} [enable] - enable WebGL rendering and update the texture */
-    useWebGL(enable=true)
+     *  @param {boolean} [enable] - enable WebGL rendering and update the texture 
+     *  @param {boolean} [immediate] - shoulkd the texture be updated immediately
+     */
+    useWebGL(enable=true, immediate=false)
     {
+        if (!immediate && enable && this.textureInfo.hasWebGL())
+        {
+            // refresh the texture when needed
+            this.refreshWebGL = true;
+            return;
+        }
+
         if (enable)
             this.textureInfo.createWebGLTexture();
         else
@@ -5458,7 +5776,7 @@ class TileLayer extends CanvasLayer
     */
     constructor(position, size, tileInfo=tile(), renderOrder=0)
     {
-        const canvasSize = size.multiply(tileInfo.size);
+        const canvasSize = tileInfo ? size.multiply(tileInfo.size) : size;
         super(position, size, 0, renderOrder, canvasSize);
 
         // set tile info
@@ -5511,6 +5829,13 @@ class TileLayer extends CanvasLayer
     {
         ASSERT(drawContext !== this.context, 'must call redrawEnd() after drawing tiles!');
 
+        if (this.refreshWebGL)
+        {
+            // update the WebGL texture
+            this.textureInfo.createWebGLTexture();
+            this.refreshWebGL = false;
+        }
+
         // draw the tile layer as a single tile
         const tileInfo = new TileInfo().setFullImage(this.textureInfo);
         const size = this.drawSize || this.size;
@@ -5547,8 +5872,9 @@ class TileLayer extends CanvasLayer
         drawCanvas = this.canvas;
         drawContext = this.context;
         cameraPos = this.size.scale(.5);
-        cameraScale = this.tileInfo.size.x;
-        mainCanvasSize = this.size.multiply(this.tileInfo.size);
+        const tileSize = this.tileInfo ? this.tileInfo.size : vec2(1);
+        cameraScale = tileSize.x;
+        mainCanvasSize = this.size.multiply(tileSize);
         if (clear)
         {
             // clear and set size
@@ -5708,66 +6034,45 @@ 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, y)))
+            if (!object || object.collideWithTile(tileData, 
+                hitPos.set(x + this.pos.x, y + this.pos.y)))
                 return true;
         }
         return false;
     }
 
-    /** Return the center of first tile hit, undefined if nothing was hit.
-    *  This does not return the exact intersection, but the center of the tile hit.
+    /** Return the exact position of the boudnary 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]
-    *  @return {Vector2} */
-    collisionRaycast(posStart, posEnd, object)
+    *  @param {EngineObject} [object] - An object or undefined for generic test
+    *  @param {Vector2}      [normal] - Optional normal of the surface hit
+    *  @return {Vector2|undefined} */
+    collisionRaycast(posStart, posEnd, object, normal)
     {
         ASSERT(isVector2(posStart) && isVector2(posEnd), 'positions must be Vector2s');
         ASSERT(!object || object instanceof EngineObject, 'object must be an EngineObject');
-        
-        // transform to local layer space
-        const posStartX = posStart.x - this.pos.x;
-        const posStartY = posStart.y - this.pos.y;
-        const posEndX   = posEnd.x   - this.pos.x;
-        const posEndY   = posEnd.y   - this.pos.y;
-
-        // test if a ray collides with tiles from start to end
-        const deltaX = posEndX - posStartX;
-        const deltaY = posEndY - posStartY;
-        const totalLength = (deltaX**2 + deltaY**2)**.5;
-        const unitX = abs(totalLength/deltaX);
-        const unitY = abs(totalLength/deltaY);
-
-        // setup iteration variables
-        const pos = posStart.floor(), signDeltaX = sign(deltaX), signDeltaY = sign(deltaY);
-        let xi = unitX * (deltaX < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1) || 0;
-        let yi = unitY * (deltaY < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1) || 0;
-
-        // use line drawing algorithm to test for collisions
-        while (true)
+
+        const localPos = new Vector2;
+        const collisionTest = (pos)=>
         {
             // check for tile collision
-            const tileData = this.getCollisionData(pos);
-            if (tileData && (!object || object.collideWithTile(tileData, pos)))
-            {
-                pos.x += .5; pos.y += .5;
-                debugRaycast && debugLine(posStart, posEnd, '#f00', .02);
-                debugRaycast && debugPoint(pos, '#ff0');
-                return pos;
-            }
-
-            // check if past the end
-            if (xi >= totalLength && yi >= totalLength)
-                break;
-
-            // get coordinates of next tile to check
-            if (xi > yi)
-                pos.y += signDeltaY, yi += unitY;
-            else
-                pos.x += signDeltaX, xi += unitX;
+            localPos.set(pos.x - this.pos.x, pos.y - this.pos.y);
+            const tileData = this.getCollisionData(localPos);
+            return tileData && (!object || object.collideWithTile(tileData, pos));
         }
-
         debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
+        const hitPos = lineTest(posStart, posEnd, collisionTest, normal);
+        if (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;
+        }
     }
 }
 /**
@@ -5922,19 +6227,34 @@ class ParticleEmitter extends EngineObject
         this.particleCreateCallback = undefined;
         /** @property {number} - Track particle emit time */
         this.emitTimeBuffer    = 0;
+        /** @property {number} - Percentage of velocity to pass to particles (0-1) */
+        this.velocityInheritance = 0;
+
+        // track previous position and angle
+        this.previousAngle = this.angle;
+        this.previousPos = this.pos.copy();
     }
 
     /** Update the emitter to spawn particles, called automatically by engine once each frame */
     update()
     {
-        // only do default update to apply parent transforms
-        this.parent && super.update();
+        if (this.velocityInheritance)
+        {
+            // pass emitter velocity to particles
+            const p = this.velocityInheritance;
+            this.velocity.x = p * (this.pos.x - this.previousPos.x);
+            this.velocity.y = p * (this.pos.y - this.previousPos.y);
+            this.angleVelocity = p * (this.angle - this.previousAngle);
+            this.previousAngle = this.angle;
+            this.previousPos.x = this.pos.x;
+            this.previousPos.y = this.pos.y;
+        }
 
         // update emitter
         if (!this.emitTime || this.getAliveTime() <= this.emitTime)
         {
             // emit particles
-            if (this.emitRate * particleEmitRateScale)
+            if (this.emitRate && particleEmitRateScale)
             {
                 const rate = 1/this.emitRate/particleEmitRateScale;
                 for (this.emitTimeBuffer += timeDelta; this.emitTimeBuffer > 0; this.emitTimeBuffer -= rate)
@@ -5987,7 +6307,7 @@ class ParticleEmitter extends EngineObject
         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;
-        if (!this.localSpace)
+        if (!this.localSpace && this.velocityInheritance > 0)
         {
             // apply emitter velocity to particle
             particle.velocity.x += this.velocity.x;
@@ -6072,8 +6392,6 @@ class Particle extends EngineObject
     /** Update the object physics, called automatically by engine once each frame */
     update()
     {
-        super.update();
-
         if (this.collideTiles || this.collideSolidObjects)
         {
             // only apply max circular speed if particle can collide
@@ -6085,6 +6403,16 @@ class Particle extends EngineObject
                 this.velocity.y *= s;
             }
         }
+
+        if (this.lifeTime > 0 && time - this.spawnTime > this.lifeTime)
+        {
+            // 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.destroyCallback(this);
+            this.destroyed = 1;
+        }
     }
 
     /** Render the particle, automatically called each frame, sorted by renderOrder */
@@ -6093,7 +6421,7 @@ class Particle extends EngineObject
         // 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;
-        this.size.x = this.size.y = radius;
+        const size = vec2(radius);
         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;
@@ -6113,7 +6441,7 @@ class Particle extends EngineObject
         {
             // in local space of emitter
             const a = this.localSpaceEmitter.angle;
-            const c = Math.cos(a), s = Math.sin(a);
+            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;
@@ -6129,22 +6457,15 @@ class Particle extends EngineObject
             {
                 // stretch in direction of motion
                 const trailLength = speed * this.trailScale;
-                this.size.y = max(this.size.x, trailLength);
-                angle = Math.atan2(direction.x, direction.y);
-                drawTile(pos, this.size, this.tileInfo, this.color, angle, this.mirror);
+                size.y = max(size.x, trailLength);
+                angle = atan2(direction.x, direction.y);
+                drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror);
             }
         }
         else
-            drawTile(pos, this.size, this.tileInfo, this.color, angle, this.mirror);
+            drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror);
         this.additive && setBlendMode();
-        debugParticles && debugRect(pos, this.size, '#f005', 0, angle);
-
-        if (p1 === 1)
-        {
-            // destroy particle when its time runs out
-            this.destroyCallback && this.destroyCallback(this);
-            this.destroyed = 1;
-        }
+        debugParticles && debugRect(pos, size, '#f005', 0, angle);
     }
 }
 /**
@@ -6314,11 +6635,11 @@ class Medal
         const descriptionSize = height*.3;
         const pos = vec2(x + medalDisplayIconSize + 2*gap.x, y + gap.y*2 + nameSize/2);
         const textWidth = width - medalDisplayIconSize - 3*gap.x;
-        drawTextScreen(this.name, pos, nameSize, BLACK, 0, undefined, 'left', undefined, textWidth);
+        drawTextScreen(this.name, pos, nameSize, BLACK, 0, undefined, 'left', undefined, undefined, textWidth);
 
         // draw the description
         pos.y = y + height - gap.y*2 - descriptionSize/2;
-        drawTextScreen(this.description, pos, descriptionSize, BLACK, 0, undefined, 'left', undefined, textWidth);
+        drawTextScreen(this.description, pos, descriptionSize, BLACK, 0, undefined, 'left', undefined, undefined, textWidth);
         context.restore();
     }
 
@@ -6367,7 +6688,7 @@ let glContext;
 let glAntialias = true;
 
 // WebGL internal variables not exposed to documentation
-let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos;
+let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos, glCanBeEnabled = true;
 
 // WebGL internal constants
 const gl_ARRAY_BUFFER_SIZE = 5e5;
@@ -6386,7 +6707,11 @@ function glInit()
     // keep set of texture infos so they can be restored if context is lost
     glTextureInfos = new Set;
 
-    if (!glEnable || headlessMode) return;
+    if (!glEnable || headlessMode)
+    {
+        glCanBeEnabled = false;
+        return;
+    }
 
     // create the canvas and textures
     glCanvas = document.createElement('canvas');
@@ -6397,10 +6722,11 @@ function glInit()
         console.warn('WebGL2 not supported, falling back to 2D canvas rendering!');
         glCanvas = glContext = undefined;
         glEnable = false;
+        glCanBeEnabled = false;
         return;
     }
 
-    // create the WebGL canvas
+    // attach the WebGL canvas
     const rootElement = mainCanvas.parentElement;
     rootElement.appendChild(glCanvas);
     
@@ -6423,7 +6749,7 @@ function glInit()
     });
     glCanvas.addEventListener('webglcontextrestored', ()=>
     {
-        glEnable = true; // disable WebGL rendering
+        glEnable = true; // re-enable WebGL rendering
         glCanvas.style.display = ''; // show the gl canvas
         LOG('WebGL context restored, reinitializing...');
 
@@ -6575,8 +6901,8 @@ function glPreRender()
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
     const rotatedCam = cameraPos.rotate(-cameraAngle);
     const p = vec2(-1).subtract(rotatedCam.multiply(s));
-    const ca = Math.cos(cameraAngle);
-    const sa = Math.sin(cameraAngle);
+    const ca = cos(cameraAngle);
+    const sa = sin(cameraAngle);
     const transform = [
         s.x  * ca,  s.y * sa, 0, 0,
         -s.x * sa,  s.y * ca, 0, 0,
@@ -6881,8 +7207,8 @@ function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
         // transform the point
         const px = p.x*sx;
         const py = p.y*sy;
-        const sa = Math.sin(-angle);
-        const ca = Math.cos(-angle);
+        const sa = sin(-angle);
+        const ca = cos(-angle);
         pointsOut.push(vec2(x + ca*px - sa*py, y + sa*px + ca*py));
     }
     const drawPoints = tristrip ? glPolyStrip(pointsOut) : pointsOut;
@@ -7799,12 +8125,12 @@ class UISystemPlugin
     /** Draw a rectangle to the UI context
     *  @param {Vector2} pos
     *  @param {Vector2} size
-    *  @param {Color}   [color=uiSystem.defaultColor]
-    *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
-    *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
-    *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius]
-    *  @param {Color}   [gradientColor=uiSystem.defaultGradientColor] */
-    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius, gradientColor=uiSystem.defaultGradientColor)
+    *  @param {Color}   [color]
+    *  @param {number}  [lineWidth]
+    *  @param {Color}   [lineColor]
+    *  @param {number}  [cornerRadius]
+    *  @param {Color}   [gradientColor] */
+    drawRect(pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, cornerRadius=0, gradientColor)
     {
         ASSERT(isVector2(pos), 'pos must be a vec2');
         ASSERT(isVector2(size), 'size must be a vec2');
@@ -7883,10 +8209,14 @@ class UISystemPlugin
     *  @param {string}  [align]
     *  @param {string}  [font=uiSystem.defaultFont]
     *  @param {string}  [fontStyle]
-    *  @param {boolean} [applyMaxWidth=true] */
-    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, fontStyle='', applyMaxWidth=true)
+    *  @param {boolean} [applyMaxWidth=true]
+    *  @param {Vector2} [textShadow]
+     */
+    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, fontStyle='', applyMaxWidth=true, textShadow=undefined)
     {
-        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, uiSystem.uiContext);
+        if (textShadow)
+            drawTextScreen(text, pos.add(textShadow), size.y, BLACK, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, 0, uiSystem.uiContext);
+        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, 0, uiSystem.uiContext);
     }
 
     /**
@@ -7913,6 +8243,25 @@ class UISystemPlugin
         setCallback(onDragLeave, 'dragleave');
         setCallback(onDragOver,  'dragover');
     }
+
+    /** Convert a screen space position to native UI position
+     *  @param {Vector2} pos
+     *  @return {Vector2}
+     */
+    screenToNative(pos)
+    {
+        if (!uiSystem.nativeHeight)
+            return pos;
+    
+        const s = mainCanvasSize.y / uiSystem.nativeHeight;
+        const sInv = 1/s;
+        const p = pos.copy();
+        p.x += s*mainCanvasSize.x/2;
+        p.x *= sInv;
+        p.y *= sInv;
+        p.x -= sInv*mainCanvasSize.x/2;
+        return p;
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -7989,6 +8338,9 @@ class UIObject
         /** @property {boolean} - True if this can be a hover object */
         this.canBeHover = true;
         uiSystem.uiObjects.push(this);
+        
+        /** @property {Vector2} - How much to offset the text shadow or undefined */
+        this.textShadow = undefined;
     }
 
     /** Add a child UIObject to this object
@@ -8016,24 +8368,20 @@ class UIObject
      */
     isMouseOverlapping()
     {
+        if (!mouseInWindow) return false;
+
         const size = !isTouchDevice ? this.size :
                 this.size.add(vec2(this.extraTouchSize || 0));
-        if (!uiSystem.nativeHeight)
-            return isOverlapping(this.pos, size, mousePosScreen);
-
-        const s = mainCanvasSize.y / uiSystem.nativeHeight;
-        const sInv = 1/s;
-        let pos = mousePosScreen.copy();
-        pos.x += s*mainCanvasSize.x/2;
-        pos.x *= sInv;
-        pos.y *= sInv;
-        pos.x -= sInv*mainCanvasSize.x/2;
+        const pos = uiSystem.screenToNative(mousePosScreen);
         return isOverlapping(this.pos, size, pos);
     }
 
     /** Update the object, called automatically by plugin once each frame */
     update()
     {
+        // call the custom update callback
+        this.onUpdate();
+
         const wasHover = uiSystem.lastHoverObject === this;
         const isActive = this.isActiveObject();
         const mouseDown = mouseIsDown(0);
@@ -8090,7 +8438,7 @@ class UIObject
 
         const lineColor = this.interactive && this.isActiveObject() && !this.disabled ? this.color : this.lineColor;
         const color = this.disabled ? this.disabledColor : this.interactive ? this.isActiveObject() ? this.activeColor || this.color : this.isHoverObject() ? this.hoverColor : this.color : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius, this.gradientColor);
     }
 
     /** Special update when object is not visible */
@@ -8117,6 +8465,9 @@ class UIObject
     /** @return {boolean} - Is the mouse held onto this element */
     isActiveObject() { return uiSystem.activeObject === this; }
 
+    /** Called each frame when object updates */
+    onUpdate() {}
+
     /** Called when the mouse enters the object */
     onEnter() {}
 
@@ -8171,8 +8522,9 @@ class UIText extends UIObject
     }
     render()
     {
+        // only render the text
         const textSize = this.getTextSize();
-        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font, this.fontStyle);
+        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
 }
 
@@ -8248,7 +8600,7 @@ class UIButton extends UIObject
         // draw the text scaled to fit
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
-            this.textColor, 0, undefined, this.align, this.font, this.fontStyle);
+            this.textColor, 0, undefined, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
 }
 
@@ -8302,7 +8654,7 @@ class UICheckbox extends UIObject
         const textSize = this.getTextSize();
         const pos = this.pos.add(vec2(this.size.x,0));
         uiSystem.drawText(this.text, pos, textSize, 
-            this.textColor, 0, undefined, 'left', this.font, this.fontStyle, false);
+            this.textColor, 0, undefined, 'left', this.font, this.fontStyle, false, this.textShadow);
     }
 }
 
@@ -8357,9 +8709,11 @@ class UIScrollbar extends UIObject
             const p1 = centerPos - handleWidth/2;
             const p2 = centerPos + handleWidth/2;
             const oldValue = this.value;
+
+            const p = uiSystem.screenToNative(mousePosScreen);
             this.value = isHorizontal ? 
-                percent(mousePosScreen.x, p1, p2) :
-                percent(mousePosScreen.y, p2, p1);
+                percent(p.x, p1, p2) :
+                percent(p.y, p2, p1);
             this.value === oldValue || this.onChange();
         }
     }
@@ -8381,20 +8735,20 @@ class UIScrollbar extends UIObject
             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);
+        uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
 
         // draw the text scaled to fit on the scrollbar
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
-            this.textColor, 0, undefined, this.align, this.font, this.fontStyle);
+            this.textColor, 0, undefined, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
 }
 /**
  * LittleJS Box2D Physics Plugin
  * - Box2dObject extends EngineObject with Box2D physics
- * - Call box2dInit() before engineInit() to enable
+ * - Call box2dInit() to enable
  * - You will also need to include box2d.wasm.js
- * - Uses a super fast web assembly port of Box2D
+ * - Uses a super fast web assembly port of Box2D v2.3.1
  * - More info: https://github.com/kripken/box2d.js
  * - Functions to create polygon, circle, and edge shapes
  * - Contact begin and end callbacks
@@ -8424,9 +8778,9 @@ function box2dSetDebug(enable) { box2dDebug = enable; }
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Box2D Object - extend with your own custom physics objects
- * - A LittleJS object with Box2D physics
- * - Each object has a Box2D body which can have multiple fixtures and joints
+ * - A LittleJS object with Box2D physics, dynamic by default
  * - Provides interface for Box2D body and fixture functions
+ * - Each object can have multiple fixtures and joints
  * @extends EngineObject
  * @memberof Box2D
  */
@@ -8440,7 +8794,7 @@ class Box2dObject extends EngineObject
      *  @param {Color}    [color]
      *  @param {number}   [bodyType]
      *  @param {number}   [renderOrder] */
-    constructor(pos, size, tileInfo, angle=0, color, bodyType=box2d.bodyTypeDynamic, renderOrder=0)
+    constructor(pos=vec2(), size=vec2(), tileInfo, angle=0, color, bodyType=box2d.bodyTypeDynamic, renderOrder=0)
     {
         super(pos, size, tileInfo, angle, color, renderOrder);
 
@@ -8452,24 +8806,27 @@ class Box2dObject extends EngineObject
         this.body = box2d.world.CreateBody(bodyDef);
         this.body.object = this;
         this.lineColor = BLACK;
+        box2d.objects.push(this);
+        
+        // edge lists and loops for drawing
+        this.edgeLists = [];
+        this.edgeLoops = [];
     }
 
     /** Destroy this object and its physics body */
     destroy()
     {
+        if (this.destroyed)
+            return;
+
         // destroy physics body, fixtures, and joints
-        this.body && box2d.world.DestroyBody(this.body);
-        this.body = 0;
+        ASSERT(this.body, 'Box2dObject has no body to destroy');
+        box2d.world.DestroyBody(this.body);
         super.destroy();
     }
 
-    /** Copy box2d update sim data */
-    update()
-    {
-        // use box2d physics update instead of normal engine update
-        this.pos = box2d.vec2From(this.body.GetPosition());
-        this.angle = -this.body.GetAngle();
-    }
+    /** Box2d objects updated with Box2d world step */
+    updatePhysics() {}
 
     /** Render the object, uses box2d drawing if no tile info exists */
     render()
@@ -8495,10 +8852,23 @@ class Box2dObject extends EngineObject
      *  @param {Color}  [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixtures(color=WHITE, lineColor, lineWidth=.1, context)
+    drawFixtures(color=WHITE, lineColor=BLACK, lineWidth=.1, context)
     {
-        this.getFixtureList().forEach(fixture=>
-            box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context));
+        // draw non-edge fixtures
+        this.getFixtureList().forEach((fixture)=>
+        {
+            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);
+            }
+        });
+
+        // draw edges using a single draw line for better connections
+        this.edgeLists.forEach(points=>
+            drawLineList(points, lineWidth, lineColor, false, this.pos, this.angle));
+        this.edgeLoops.forEach(points=>
+            drawLineList(points, lineWidth, lineColor, true, this.pos, this.angle));
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -8523,6 +8893,10 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addShape(shape, density=1, friction=.2, restitution=0, isSensor=false)
     {
+        ASSERT(isNumber(density), 'density must be a number');
+        ASSERT(isNumber(friction), 'friction must be a number');
+        ASSERT(isNumber(restitution), 'restitution must be a number');
+
         const fd = new box2d.instance.b2FixtureDef();
         fd.set_shape(shape);
         fd.set_density(density);
@@ -8542,6 +8916,11 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addBox(size=vec2(1), offset=vec2(), angle=0, density, friction, restitution, isSensor)
     {
+        ASSERT(isVector2(size), 'size must be a Vector2');
+        ASSERT(size.x > 0 && size.y > 0, 'size must be positive');
+        ASSERT(isVector2(offset), 'offset must be a Vector2');
+        ASSERT(isNumber(angle), 'angle must be a number');
+
         const shape = new box2d.instance.b2PolygonShape();
         shape.SetAsBox(size.x/2, size.y/2, box2d.vec2dTo(offset), angle);
         return this.addShape(shape, density, friction, restitution, isSensor);
@@ -8555,6 +8934,8 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addPoly(points, density, friction, restitution, isSensor)
     {
+        ASSERT(isArray(points), 'points must be an array');
+
         function box2dCreatePolygonShape(points)
         {
             function box2dCreatePointList(points)
@@ -8590,6 +8971,9 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addRegularPoly(diameter=1, sides=8, density, friction, restitution, isSensor)
     {
+        ASSERT(isNumber(diameter) && diameter>0, 'diameter must be a positive number');
+        ASSERT(isNumber(sides) && sides>2, 'sides must be a positive number greater than 2');
+
         const points = [];
         const radius = diameter/2;
         for (let i=sides; i--;)
@@ -8605,6 +8989,8 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addRandomPoly(diameter=1, density, friction, restitution, isSensor)
     {
+        ASSERT(isNumber(diameter) && diameter>0, 'diameter must be a positive number');
+
         const sides = randInt(3, 9);
         const points = [];
         const radius = diameter/2;
@@ -8622,6 +9008,9 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addCircle(diameter=1, offset=vec2(), density, friction, restitution, isSensor)
     {
+        ASSERT(isNumber(diameter) && diameter>0, 'diameter must be a positive number');
+        ASSERT(isVector2(offset), 'offset must be a Vector2');
+        
         const shape = new box2d.instance.b2CircleShape();
         shape.set_m_p(box2d.vec2dTo(offset));
         shape.set_m_radius(diameter/2);
@@ -8637,53 +9026,63 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addEdge(point1, point2, density, friction, restitution, isSensor)
     {
+        ASSERT(isVector2(point1), 'point1 must be a Vector2');
+        ASSERT(isVector2(point2), 'point2 must be a Vector2');
+
         const shape = new box2d.instance.b2EdgeShape();
         shape.Set(box2d.vec2dTo(point1), box2d.vec2dTo(point2));
         return this.addShape(shape, density, friction, restitution, isSensor);
     }
 
-    /** Add an edge loop to the body, an edge loop connects the end points
+    /** Add an edge list to the body
      *  @param {Array<Vector2>} points
      *  @param {number}  [density]
      *  @param {number}  [friction]
      *  @param {number}  [restitution]
      *  @param {boolean} [isSensor] */
-    addEdgeLoop(points, density, friction, restitution, isSensor)
+    addEdgeList(points, density, friction, restitution, isSensor)
     {
-        const fixtures = [];
-        const getPoint = i=> points[mod(i,points.length)];
-        for (let i=0; i<points.length; ++i)
+        ASSERT(isArray(points), 'points must be an array');
+        const fixtures = [], edgePoints = [];
+        for (let i=0; i<points.length-1; ++i)
         {
             const shape = new box2d.instance.b2EdgeShape();
-            shape.set_m_vertex0(box2d.vec2dTo(getPoint(i-1)));
-            shape.set_m_vertex1(box2d.vec2dTo(getPoint(i+0)));
-            shape.set_m_vertex2(box2d.vec2dTo(getPoint(i+1)));
-            shape.set_m_vertex3(box2d.vec2dTo(getPoint(i+2)));
+            points[i-1] && shape.set_m_vertex0(box2d.vec2dTo(points[i-1]));
+            points[i+0] && shape.set_m_vertex1(box2d.vec2dTo(points[i+0]));
+            points[i+1] && shape.set_m_vertex2(box2d.vec2dTo(points[i+1]));
+            points[i+2] && shape.set_m_vertex3(box2d.vec2dTo(points[i+2]));
             const f = this.addShape(shape, density, friction, restitution, isSensor);
             fixtures.push(f);
+            edgePoints.push(points[i].copy());
         }
+        edgePoints.push(points[points.length-1].copy());
+        this.edgeLists.push(edgePoints);
         return fixtures;
     }
 
-    /** Add an edge list to the body
+    /** Add an edge loop to the body, an edge loop connects the end points
      *  @param {Array<Vector2>} points
      *  @param {number}  [density]
      *  @param {number}  [friction]
      *  @param {number}  [restitution]
      *  @param {boolean} [isSensor] */
-    addEdgeList(points, density, friction, restitution, isSensor)
+    addEdgeLoop(points, density, friction, restitution, isSensor)
     {
-        const fixtures = [];
-        for (let i=0; i<points.length-1; ++i)
+        ASSERT(isArray(points), 'points must be an array');
+        const fixtures = [], edgePoints = [];
+        const getPoint = i=> points[mod(i,points.length)];
+        for (let i=0; i<points.length; ++i)
         {
             const shape = new box2d.instance.b2EdgeShape();
-            points[i-1] && shape.set_m_vertex0(box2d.vec2dTo(points[i-1]));
-            points[i+0] && shape.set_m_vertex1(box2d.vec2dTo(points[i+0]));
-            points[i+1] && shape.set_m_vertex2(box2d.vec2dTo(points[i+1]));
-            points[i+2] && shape.set_m_vertex3(box2d.vec2dTo(points[i+2]));
+            shape.set_m_vertex0(box2d.vec2dTo(getPoint(i-1)));
+            shape.set_m_vertex1(box2d.vec2dTo(getPoint(i+0)));
+            shape.set_m_vertex2(box2d.vec2dTo(getPoint(i+1)));
+            shape.set_m_vertex3(box2d.vec2dTo(getPoint(i+2)));
             const f = this.addShape(shape, density, friction, restitution, isSensor);
             fixtures.push(f);
+            i < points.length && edgePoints.push(points[i].copy());
         }
+        this.edgeLoops.push(edgePoints);
         return fixtures;
     }
 
@@ -8718,6 +9117,10 @@ class Box2dObject extends EngineObject
      *  @return {number} */
     getBodyType() { return this.body.GetType(); }
     
+    /** Get the speed of this object
+     *  @return {number} */
+    getSpeed() { return this.getLinearVelocity().length(); }
+
     ///////////////////////////////////////////////////////////////////////////////
     // physics set functions
 
@@ -8733,33 +9136,40 @@ class Box2dObject extends EngineObject
     
     /** Sets the position
      *  @param {Vector2} pos */
-    setPosition(pos) { this.setTransform(pos, this.body.GetAngle()); }
+    setPosition(pos)
+    { this.setTransform(pos, this.body.GetAngle()); }
 
     /** Sets the angle
      *  @param {number} angle */
-    setAngle(angle) { this.setTransform(box2d.vec2From(this.body.GetPosition()), -angle); }
+    setAngle(angle)
+    { this.setTransform(box2d.vec2From(this.body.GetPosition()), -angle); }
 
     /** Sets the linear velocity
      *  @param {Vector2} velocity */
-    setLinearVelocity(velocity) { this.body.SetLinearVelocity(box2d.vec2dTo(velocity)); }
+    setLinearVelocity(velocity)
+    { this.body.SetLinearVelocity(box2d.vec2dTo(velocity)); }
 
     /** Sets the angular velocity
      *  @param {number} angularVelocity */
-    setAngularVelocity(angularVelocity) { this.body.SetAngularVelocity(angularVelocity); }
+    setAngularVelocity(angularVelocity)
+    { this.body.SetAngularVelocity(angularVelocity); }
 
     /** Sets the linear damping
      *  @param {number} damping */
-    setLinearDamping(damping) { this.body.SetLinearDamping(damping); }
+    setLinearDamping(damping)
+    { this.body.SetLinearDamping(damping); }
 
     /** Sets the angular damping
      *  @param {number} damping */
-    setAngularDamping(damping) { this.body.SetAngularDamping(damping); }
+    setAngularDamping(damping)
+    { this.body.SetAngularDamping(damping); }
 
     /** Sets the gravity scale
      *  @param {number} [scale] */
-    setGravityScale(scale=1) { this.body.SetGravityScale(this.gravityScale = scale); }
+    setGravityScale(scale=1)
+    { this.body.SetGravityScale(this.gravityScale = scale); }
 
-    /** Should this body be treated like a bullet for continuous collision detection?
+    /** Should be like a bullet for continuous collision detection?
      *  @param {boolean} [isBullet] */
     setBullet(isBullet=true) { this.body.SetBullet(isBullet); }
 
@@ -8773,11 +9183,13 @@ class Box2dObject extends EngineObject
 
     /** Set whether the body is allowed to sleep
      *  @param {boolean} [isAllowed] */
-    setSleepingAllowed(isAllowed=true) { this.body.SetSleepingAllowed(isAllowed); }
+    setSleepingAllowed(isAllowed=true)
+    { this.body.SetSleepingAllowed(isAllowed); }
     
     /** Set whether the body can rotate
      *  @param {boolean} [isFixed] */
-    setFixedRotation(isFixed=true) { this.body.SetFixedRotation(isFixed); }
+    setFixedRotation(isFixed=true)
+    { this.body.SetFixedRotation(isFixed); }
 
     /** Set the center of mass of the body
      *  @param {Vector2} center */
@@ -8789,10 +9201,11 @@ class Box2dObject extends EngineObject
     
     /** Set the moment of inertia of the body
      *  @param {number} momentOfInertia */
-    setMomentOfInertia(momentOfInertia) { this.setMassData(undefined, undefined, momentOfInertia) }
+    setMomentOfInertia(momentOfInertia)
+    { this.setMassData(undefined, undefined, momentOfInertia) }
     
     /** Reset the mass, center of mass, and moment */
-    resetMassData()  { this.body.ResetMassData(); }
+    resetMassData() { this.body.ResetMassData(); }
     
     /** Set the mass data of the body
      *  @param {Vector2} [localCenter]
@@ -9434,6 +9847,50 @@ 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
@@ -9796,6 +10253,7 @@ class Box2dPlugin
         box2d = this;
         this.instance = instance;
         this.world = new box2d.instance.b2World();
+        this.objects = [];
 
         /** @property {number} - Velocity iterations per update*/
         this.velocityIterations = 8;
@@ -10038,9 +10496,10 @@ class Box2dPlugin
 
     /** converts a box2d vec2 pointer to a Vector2
      *  @param {Object} v */
-    vec2FromPointer(v)
+    vec2FromPointer(vp)
     {
-        return box2d.vec2From(box2d.instance.wrapPointer(v, box2d.instance.b2Vec2));
+        const v = box2d.instance.wrapPointer(vp, box2d.instance.b2Vec2);
+        return box2d.vec2From(v);
     }
 
     /** converts a Vector2 to a box2 vec2
@@ -10114,8 +10573,23 @@ async function box2dInit()
     // add the box2d plugin to the engine
     function box2dUpdate()
     {
-        if (!paused)
-            box2d.step();
+        if (paused)
+            return;
+
+        box2d.step();
+
+        // remove destroyed objects
+        box2d.objects = box2d.objects.filter(o=>!o.destroyed);
+        
+        // copy box2d physics results to engine objects
+        for (const o of box2d.objects)
+        {
+            if (o.body)
+            {
+                o.pos = box2d.vec2From(o.body.GetPosition());
+                o.angle = -o.body.GetAngle();
+            }
+        }
     }
     function box2dRender()
     {