littlejsengine 1.15.3 → 1.15.9

package/dist/littlejs.esm.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.15.3';
+const engineVersion = '1.15.9';
 
 /** Frames per second to update
  *  @type {number}
@@ -279,7 +279,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 o.destroyed || o.render();
             gameRenderPost();
             pluginList.forEach(plugin=>plugin.render?.());
-            touchGamepadRender();
+            inputRender();
             debugRender();
             glFlush();
             debugVideoCaptureUpdate();
@@ -308,23 +308,48 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
 
         if (canvasFixedSize.x)
         {
-            // clear canvas and set fixed size
-            mainCanvas.width  = canvasFixedSize.x;
-            mainCanvas.height = canvasFixedSize.y;
-
-            // fit to window by adding space on top or bottom if necessary
-            const aspect = innerWidth / innerHeight;
-            const fixedAspect = mainCanvas.width / mainCanvas.height;
-            (glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-            (glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
+            // set canvas fixed size
+            mainCanvasSize = canvasFixedSize.copy();
+
+            // fit to window using css width and height
+            const innerAspect = innerWidth / innerHeight;
+            const fixedAspect = canvasFixedSize.x / canvasFixedSize.y;
+            const w = innerAspect < fixedAspect ? '100%' : '';
+            const h = innerAspect < fixedAspect ? '' : '100%';
+            overlayCanvas.style.width  = mainCanvas.style.width  = w;
+            overlayCanvas.style.height = mainCanvas.style.height = h;
+            if (glCanvas)
+            {
+                glCanvas.style.width  = w;
+                glCanvas.style.height = h;
+            }
         }
         else
         {
-            // clear canvas and set size to same as window
-            mainCanvas.width = min(innerWidth, canvasMaxSize.x);
-            mainCanvas.height = min(innerHeight, canvasMaxSize.y);
+            // get main canvas size based on window size
+            mainCanvasSize.x = min(innerWidth,  canvasMaxSize.x);
+            mainCanvasSize.y = min(innerHeight, canvasMaxSize.y);
+            
+            // responsive aspect ratio with native resolution
+            const innerAspect = innerWidth / innerHeight;
+            if (canvasMaxAspect && innerAspect > canvasMaxAspect)
+            {
+                // full height
+                const w = mainCanvasSize.y * canvasMaxAspect | 0;
+                mainCanvasSize.x = min(w,  canvasMaxSize.x);
+            }
+            else if (innerAspect < canvasMinAspect)
+            {
+                // full width
+                const h = mainCanvasSize.x / canvasMinAspect | 0;
+                mainCanvasSize.y = min(h, canvasMaxSize.y);
+            }
         }
 
+        // clear main and overlay canvas and set size
+        overlayCanvas.width  = mainCanvas.width  = mainCanvasSize.x;
+        overlayCanvas.height = mainCanvas.height = mainCanvasSize.y;
+
         // apply the clear color to main canvas
         if (canvasClearColor.a > 0)
         {
@@ -333,13 +358,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             mainContext.fillStyle = BLACK.toString();
         }
 
-        // clear overlay canvas and set size
-        overlayCanvas.width  = mainCanvas.width;
-        overlayCanvas.height = mainCanvas.height;
-
-        // save canvas size
-        mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
-
         // set default line join and cap
         const lineJoin = 'round', lineCap = 'round';
         mainContext.lineJoin = overlayContext.lineJoin = lineJoin;
@@ -363,7 +381,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
         'touch-action:none;' +        // prevent mobile pinch to resize
-        '-webkit-touch-callout:none';// compatibility for ios
+        '-webkit-touch-callout:none'; // compatibility for ios
     rootElement.style.cssText = styleRoot;
     drawCanvas = mainCanvas = document.createElement('canvas');
     rootElement.appendChild(mainCanvas);
@@ -380,7 +398,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     rootElement.appendChild(overlayCanvas);
     overlayContext = overlayCanvas.getContext('2d');
 
-    // set canvases
+    // setup canvases
+    // transform way is still more reliable then flexbox or grid
     const styleCanvas = 'position:absolute;'+ // allow canvases to overlap
         'top:50%;left:50%;transform:translate(-50%,-50%)'; // center on screen
     mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
@@ -444,9 +463,176 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     // wait for all the promises to finish
     await Promise.all(promises);
     return startEngine();
+
+    ///////////////////////////////////////////////////////////////////////////
+    // LittleJS Splash Screen
+    function drawEngineSplashScreen(t)
+    {
+        const x = overlayContext;
+        const w = overlayCanvas.width = innerWidth;
+        const h = overlayCanvas.height = innerHeight;
+
+        {
+            // background
+            const p3 = percent(t, 1, .8);
+            const p4 = percent(t, 0, .5);
+            const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
+            g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
+            g.addColorStop(1,hsl(0,0,0,p3).toString());
+            x.save();
+            x.fillStyle = g;
+            x.fillRect(0,0,w,h);
+        }
+
+        // draw LittleJS logo...
+        const rect = (X, Y, W, H, C)=>
+        {
+            x.beginPath();
+            x.rect(X,Y,W,C?H*p:H);
+            x.fillStyle = C;
+            C ? x.fill() : x.stroke();
+        };
+        const line = (X, Y, Z, W)=>
+        {
+            x.beginPath();
+            x.lineTo(X,Y);
+            x.lineTo(Z,W);
+            x.stroke();
+        };
+        const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+        {
+            const D = (A+B)/2, E = p*(B-A)/2;
+            x.beginPath();
+            F && x.lineTo(X,Y);
+            x.arc(X,Y,R,D-E,D+E);
+            x.fillStyle = C;
+            C ? x.fill() : x.stroke();
+        };
+        const color = (c=0, l=0) =>
+            hsl([.98,.3,.57,.14][c%4],.8,[0,.3,.5,.8,.9][l]).toString();
+        const alpha = wave(1,1,t);
+        const p = percent(alpha, .1, .5);
+
+        // setup
+        x.translate(w/2,h/2);
+        const size = min(6, min(w,h)/99); // fit to screen
+        x.scale(size,size);
+        x.translate(-40,-35);
+        x.lineJoin = x.lineCap = 'round';
+        x.lineWidth = .1 + p*1.9;
+
+        // drawing effect
+        const p2 = percent(alpha,.1,1);
+        x.setLineDash([99*p2,99]);
+
+        // cab top
+        rect(7,16,18,-8,color(2,2));
+        rect(7,8,18,4,color(2,3));
+        rect(25,8,8,8,color(2,1));
+        rect(25,8,-18,8);
+        rect(25,8,8,8);
+
+        // cab
+        rect(25,16,7,23,color());
+        rect(11,39,14,-23,color(1,1));
+        rect(11,16,14,18,color(1,2));
+        rect(11,16,14,8,color(1,3));
+        rect(25,16,-14,24);
+
+        // cab window
+        rect(15,29,6,-9,color(2,2));
+        circle(15,21,5,0,PI/2,color(2,4),1);
+        rect(21,21,-6,9);
+
+        // little stack
+        rect(37,14,9,6,color(3,2));
+        rect(37,14,4.5,6,color(3,3));
+        rect(37,14,9,6);
+
+        // big stack
+        rect(50,20,10,-8,color(0,1));
+        rect(50,20,6.5,-8,color(0,2));
+        rect(50,20,3.5,-8,color(0,3));
+        rect(50,20,10,-8);
+        circle(55,2,11.4,.5,PI-.5,color(3,3));
+        circle(55,2,11.4,.5,PI/2,color(3,2),1);
+        circle(55,2,11.4,.5,PI-.5);
+        rect(45,7,20,-7,color(0,2));
+        rect(45,-1,20,4,color(0,3));
+        rect(45,-1,20,8);
+
+        // engine
+        for (let i=5; i--;)
+        {
+            // stagger radius to fix slight seam
+            circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
+            circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
+            circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
+        }
+
+        // engine outline
+        circle(36,30,10,PI/2,PI*3/2);
+        circle(48,30,10,PI/2,PI*3/2);
+        circle(60,30,10);
+        line(36,20,60,20);
+
+        // engine front light
+        circle(60,30,4,PI,3*PI,color(3,2));
+        circle(60,30,4,PI,2*PI,color(3,3));
+        circle(60,30,4,PI,3*PI);
+
+        // front brush
+        for (let i=6; i--;)
+        {
+            x.beginPath();
+            x.lineTo(53,54);
+            x.lineTo(53,40);
+            x.lineTo(53+(1+i*2.9)*p,40);
+            x.lineTo(53+(4+i*3.5)*p,54);
+            x.fillStyle = color(0,i%2+2);
+            x.fill();
+            i%2 && x.stroke();
+        }
+
+        // wheels
+        rect(6,40,5,5);
+        rect(6,40,5,5,color());
+        rect(15,54,38,-14,color());
+        for (let i=3; i--;)
+        for (let j=2; j--;)
+        {
+            circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
+            x.stroke();
+            circle(15*i+15,47,j?7:1,0,PI,color(i,2));
+            x.stroke();
+        }
+        line(6,40,68,40); // center
+        line(77,54,4,54); // bottom
+
+        // draw engine name
+        const s = engineName;
+        x.font = '900 16px arial';
+        x.textAlign = 'center';
+        x.textBaseline = 'top';
+        x.lineWidth = .1+p*3.9;
+        let w2 = 0;
+        for (let i=0; i<s.length; ++i)
+            w2 += x.measureText(s[i]).width;
+        for (let j=2; j--;)
+        for (let i=0, X=41-w2/2; i<s.length; ++i)
+        {
+            x.fillStyle = color(i,2);
+            const w = x.measureText(s[i]).width;
+            x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
+            X += w;
+        }
+        x.restore();
+    }
+    ///////////////////////////////////////////////////////////////////////////
 }
 
 /** Update each engine object, remove destroyed objects, and update time
+ * can be called manually if objects need to be updated outside of main loop
  *  @memberof Engine */
 function engineObjectsUpdate()
 {
@@ -498,18 +684,21 @@ function engineObjectsDestroy()
 function engineObjectsCollect(pos, size, objects=engineObjects)
 {
     const collectedObjects = [];
-    if (!pos) // all objects
+    if (!pos)
     {
+        // all objects
         for (const o of objects)
             collectedObjects.push(o);
     }
-    else if (size instanceof Vector2)  // bounding box test
+    else if (size instanceof Vector2)
     {
+        // bounding box test
         for (const o of objects)
             o.isOverlapping(pos, size) && collectedObjects.push(o);
     }
-    else  // circle test
+    else
     {
+        // circle test
         const sizeSquared = size*size;
         for (const o of objects)
             pos.distanceSquared(o.pos) < sizeSquared && collectedObjects.push(o);
@@ -552,173 +741,6 @@ function engineObjectsRaycast(start, end, objects=engineObjects)
 
     debugRaycast && debugLine(start, end, hitObjects.length ? '#f00' : '#00f', .02);
     return hitObjects;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// LittleJS splash screen and logo
-
-function drawEngineSplashScreen(t)
-{
-    const x = overlayContext;
-    const w = overlayCanvas.width = innerWidth;
-    const h = overlayCanvas.height = innerHeight;
-
-    {
-        // background
-        const p3 = percent(t, 1, .8);
-        const p4 = percent(t, 0, .5);
-        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
-        g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
-        g.addColorStop(1,hsl(0,0,0,p3).toString());
-        x.save();
-        x.fillStyle = g;
-        x.fillRect(0,0,w,h);
-    }
-
-    // draw LittleJS logo...
-    const rect = (X, Y, W, H, C)=>
-    {
-        x.beginPath();
-        x.rect(X,Y,W,C?H*p:H);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const line = (X, Y, Z, W)=>
-    {
-        x.beginPath();
-        x.lineTo(X,Y);
-        x.lineTo(Z,W);
-        x.stroke();
-    };
-    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
-    {
-        const D = (A+B)/2, E = p*(B-A)/2;
-        x.beginPath();
-        F && x.lineTo(X,Y);
-        x.arc(X,Y,R,D-E,D+E);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const color = (c=0, l=0) =>
-        hsl([.98,.3,.57,.14][c%4]-10,.8,[0,.3,.5,.8,.9][l]).toString();
-    const alpha = wave(1,1,t);
-    const p = percent(alpha, .1, .5);
-
-    // setup
-    x.translate(w/2,h/2);
-    const size = min(6, min(w,h)/99); // fit to screen
-    x.scale(size,size);
-    x.translate(-40,-35);
-    x.lineJoin = x.lineCap = 'round';
-    x.lineWidth = .1 + p*1.9;
-
-    // drawing effect
-    const p2 = percent(alpha,.1,1);
-    x.setLineDash([99*p2,99]);
-
-    // cab top
-    rect(7,16,18,-8,color(2,2));
-    rect(7,8,18,4,color(2,3));
-    rect(25,8,8,8,color(2,1));
-    rect(25,8,-18,8);
-    rect(25,8,8,8);
-
-    // cab
-    rect(25,16,7,23,color());
-    rect(11,39,14,-23,color(1,1));
-    rect(11,16,14,18,color(1,2));
-    rect(11,16,14,8,color(1,3));
-    rect(25,16,-14,24);
-
-    // cab window
-    rect(15,29,6,-9,color(2,2));
-    circle(15,21,5,0,PI/2,color(2,4),1);
-    rect(21,21,-6,9);
-
-    // little stack
-    rect(37,14,9,6,color(3,2));
-    rect(37,14,4.5,6,color(3,3));
-    rect(37,14,9,6);
-
-    // big stack
-    rect(50,20,10,-8,color(0,1));
-    rect(50,20,6.5,-8,color(0,2));
-    rect(50,20,3.5,-8,color(0,3));
-    rect(50,20,10,-8);
-    circle(55,2,11.4,.5,PI-.5,color(3,3));
-    circle(55,2,11.4,.5,PI/2,color(3,2),1);
-    circle(55,2,11.4,.5,PI-.5);
-    rect(45,7,20,-7,color(0,2));
-    rect(45,-1,20,4,color(0,3));
-    rect(45,-1,20,8);
-
-    // engine
-    for (let i=5; i--;)
-    {
-        // stagger radius to fix slight seam
-        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
-        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
-        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
-    }
-
-    // engine outline
-    circle(36,30,10,PI/2,PI*3/2);
-    circle(48,30,10,PI/2,PI*3/2);
-    circle(60,30,10);
-    line(36,20,60,20);
-
-    // engine front light
-    circle(60,30,4,PI,3*PI,color(3,2));
-    circle(60,30,4,PI,2*PI,color(3,3));
-    circle(60,30,4,PI,3*PI);
-
-    // front brush
-    for (let i=6; i--;)
-    {
-        x.beginPath();
-        x.lineTo(53,54);
-        x.lineTo(53,40);
-        x.lineTo(53+(1+i*2.9)*p,40);
-        x.lineTo(53+(4+i*3.5)*p,54);
-        x.fillStyle = color(0,i%2+2);
-        x.fill();
-        i%2 && x.stroke();
-    }
-
-    // wheels
-    rect(6,40,5,5);
-    rect(6,40,5,5,color());
-    rect(15,54,38,-14,color());
-    for (let i=3; i--;)
-    for (let j=2; j--;)
-    {
-        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
-        x.stroke();
-        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
-        x.stroke();
-    }
-    line(6,40,68,40); // center
-    line(77,54,4,54); // bottom
-
-    // draw engine name
-    const s = engineName;
-    x.font = '900 16px arial';
-    x.textAlign = 'center';
-    x.textBaseline = 'top';
-    x.lineWidth = .1+p*3.9;
-    let w2 = 0;
-    for (let i=0; i<s.length; ++i)
-        w2 += x.measureText(s[i]).width;
-    for (let j=2; j--;)
-    for (let i=0, X=41-w2/2; i<s.length; ++i)
-    {
-        x.fillStyle = color(i,2);
-        const w = x.measureText(s[i]).width;
-        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
-        X += w;
-    }
-
-    x.restore();
 }
 /**
  * LittleJS Debug System
@@ -914,7 +936,7 @@ function debugOverlap(posA, sizeA, posB, sizeB, color, time, screenSpace=false)
 }
 
 /** Draw a debug axis aligned bounding box in world space
- *  @param {string} text
+ *  @param {string|number} text
  *  @param {Vector2} pos
  *  @param {number} [size]
  *  @param {Color|string} [color]
@@ -1072,34 +1094,46 @@ function debugRender()
         debugTakeScreenshot = 0;
     }
 
-    if (debugGamepads && gamepadsEnable && navigator.getGamepads)
+    if (debugGamepads && gamepadsEnable)
     {
-        // gamepad debug display
-        const gamepads = navigator.getGamepads();
-        for (let i = gamepads.length; i--;)
+        // draw gamepads
+        const maxGamepads = 8;
+        let gamepadConnectedCount = 0;
+        for (let i = 0; i < maxGamepads; i++)
+            gamepadConnected(i) && gamepadConnectedCount++;
+
+        for (let i = 0; i < maxGamepads; i++)
         {
-            const gamepad = gamepads[i];
-            if (gamepad)
+            if (!gamepadConnected(i))
+                continue;
+
+            const stickScale = 1;
+            const buttonScale = .2;
+            const cornerPos = cameraPos.add(vec2(-stickScale*2, ((gamepadConnectedCount-1)/2-i)*stickScale*3));
+            debugText(i, cornerPos.add(vec2(-stickScale, stickScale)), 1);
+            if (i === gamepadPrimary)
+                debugText('Main', cornerPos.add(vec2(-stickScale*2, 0)),1, '#0f0');
+
+            // read analog sticks
+            const stickCount = gamepadStickData[i].length;
+            for (let j = 0; j < stickCount; j++)
             {
-                const stickScale = 1;
-                const buttonScale = .2;
-                const centerPos = cameraPos;
-                const sticks = gamepadStickData[i];
-                for (let j = sticks.length; j--;)
-                {
-                    const drawPos = centerPos.add(vec2(j*stickScale*2, i*stickScale*3));
-                    const stickPos = drawPos.add(sticks[j].scale(stickScale));
-                    debugCircle(drawPos, stickScale*2, '#fff7',0,true);
-                    debugLine(drawPos, stickPos, '#f00');
-                    debugPoint(stickPos, '#f00');
-                }
-                for (let j = gamepad.buttons.length; j--;)
-                {
-                    const drawPos = centerPos.add(vec2(j*buttonScale*2, i*stickScale*3-stickScale-buttonScale));
-                    const pressed = gamepad.buttons[j].pressed;
-                    debugCircle(drawPos, buttonScale*2, pressed ? '#f00' : '#fff7', 0, true);
-                    debugText(''+j, drawPos, .2);
-                }
+                const stick = gamepadStick(j, i);
+                const drawPos = cornerPos.add(vec2(j*stickScale*2, 0));
+                const stickPos = drawPos.add(stick.scale(stickScale));
+                debugCircle(drawPos, stickScale*2, '#fff7',0,true);
+                debugLine(drawPos, stickPos, '#f00');
+                debugText(j, drawPos, .3);
+                debugPoint(stickPos, '#f00');
+            }
+
+            const buttonCount = inputData[i+1].length;
+            for (let j = 0; j < buttonCount; j++)
+            {
+                const drawPos = cornerPos.add(vec2(j*buttonScale*2, -stickScale-buttonScale*2));
+                const pressed = gamepadIsDown(j, i);
+                debugCircle(drawPos, buttonScale*2, pressed ? '#f00' : '#fff7', 0, true);
+                debugText(j, drawPos, .3);
             }
         }
     }
@@ -1281,14 +1315,18 @@ function debugRender()
             mousePressed && overlayContext.fillText('Mouse: ' + mousePressed, x, y += h);
             keysPressed && overlayContext.fillText('Keys: ' + keysPressed, x, y += h);
 
-            let buttonsPressed = '';
-            if (inputData[1])
-            for (const i in inputData[1])
+            // show gamepad buttons
+            for (let i = 1; i < inputData.length; i++)
             {
-                if (keyIsDown(i, 1))
-                    buttonsPressed += i + ' ' ;
+                let buttonsPressed = '';
+                if (inputData[i])
+                for (const j in inputData[i])
+                {
+                    if (keyIsDown(j, i))
+                        buttonsPressed += j + ' ' ;
+                }
+                buttonsPressed && overlayContext.fillText(`Gamepad ${i-1}: ` + buttonsPressed, x, y += h);
             }
-            buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);
         }
         else
         {
@@ -2044,9 +2082,15 @@ class Vector2
     {
         this.x = x;
         this.y = y;
+        ASSERT_VECTOR2_VALID(this);
         return this;
     }
 
+    /** Sets this vector from another vector and returns self
+     *  @param {Vector2} v - other vector
+     *  @return {Vector2} */
+    setFrom(v) { return this.set(v.x, v.y); }
+
     /** Returns a new vector that is a copy of this
      *  @return {Vector2} */
     copy() { return new Vector2(this.x, this.y); }
@@ -2109,7 +2153,7 @@ class Vector2
     clampLength(length=1)
     {
         const l = this.length();
-        return l > length ? this.scale(length/l) : this;
+        return l > length ? this.scale(length/l) : this.copy();
     }
 
     /** Returns the dot product of this and the vector passed in
@@ -2196,6 +2240,10 @@ class Vector2
      * @return {number} */
     area() { return abs(this.x * this.y); }
 
+    /** Returns true if this vector is (0,0)
+     * @return {boolean} */
+    isZero() { return !this.x && !this.y; }
+
     /** Returns a new vector that is p percent between this and the vector passed in
      * @param {Vector2} v - other vector
      * @param {number}  percent
@@ -2306,9 +2354,15 @@ class Color
         this.g = g;
         this.b = b;
         this.a = a;
+        ASSERT_COLOR_VALID(this);
         return this;
     }
 
+    /** Sets this color from another color and returns self
+     * @param {Color} c - other color
+     * @return {Color} */
+    setFrom(c) { return this.set(c.r, c.g, c.b, c.a); }
+
     /** Returns a new color that is a copy of this
      * @return {Color} */
     copy() { return new Color(this.r, this.g, this.b, this.a); }
@@ -2684,6 +2738,20 @@ let canvasClearColor = CLEAR_BLACK;
  *  @memberof Settings */
 let canvasMaxSize = vec2(1920, 1080);
 
+/** Minimum aspect ratio of the canvas (width/height), unused if 0
+ *  Can be used with canvasMaxAspect to limit aspect ratio
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let canvasMinAspect = 0;
+
+/** Maximum aspect ratio of the canvas (width/height), unused if 0
+ *  Can be used with canvasMinAspect to limit aspect ratio
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let canvasMaxAspect = 0;
+
 /** Fixed size of the canvas, if enabled canvas size never changes
  * - you may also need to set mainCanvasSize if using screen space coords in startup
  *  @type {Vector2}
@@ -2860,17 +2928,17 @@ let touchGamepadEnable = false;
  *  @memberof Settings */
 let touchGamepadCenterButton = true;
 
-/** True if touch gamepad should be analog stick or false to use if 8 way dpad
- *  @type {boolean}
+/** Number of buttons on touch gamepad (0-4), if 1 also acts as right analog stick
+ *  @type {number}
  *  @default
  *  @memberof Settings */
-let touchGamepadAnalog = true;
+let touchGamepadButtonCount = 4;
 
-/** Number of buttons on touch gamepad
- *  @type {number}
+/** True if touch gamepad should be analog stick or false to use if 8 way dpad
+ *  @type {boolean}
  *  @default
  *  @memberof Settings */
-let touchGamepadButtonCount = 4;
+let touchGamepadAnalog = true;
 
 /** Size of virtual gamepad for touch devices in pixels
  *  @type {number}
@@ -2980,6 +3048,16 @@ function setCanvasClearColor(color) { canvasClearColor = color.copy(); }
  *  @memberof Settings */
 function setCanvasMaxSize(size) { canvasMaxSize = size.copy(); }
 
+/** Set minimum aspect ratio of the canvas (width/height), unused if 0
+ *  @param {number} aspect
+ *  @memberof Settings */
+function setCanvasMinAspect(aspect) { canvasMinAspect = aspect; }
+
+/** Set maximum aspect ratio of the canvas (width/height), unused if 0
+ *  @param {number} aspect
+ *  @memberof Settings */
+function setCanvasMaxAspect(aspect) { canvasMaxAspect = aspect; }
+
 /** Set fixed size of the canvas
  *  @param {Vector2} size
  *  @memberof Settings */
@@ -3136,6 +3214,11 @@ function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
  *  @memberof Settings */
 function setTouchGamepadCenterButton(enable) { touchGamepadCenterButton = enable; }
 
+/** Set number of buttons on touch gamepad (0-4), if 1 also acts as right analog stick
+ *  @param {number} count
+ *  @memberof Settings */
+function setTouchGamepadButtonCount(count) { touchGamepadButtonCount = count; }
+
 /** Set if touch gamepad should be analog stick or 8 way dpad
  *  @param {boolean} analog
  *  @memberof Settings */
@@ -3344,7 +3427,7 @@ class EngineObject
             child.updateTransforms();
     }
 
-    /** Update the object physics, called automatically by engine once each frame */
+    /** Update the object physics, called automatically by engine once each frame. Can be overridden to stop or change how physics works for an object. */
     updatePhysics()
     {
         // child objects do not have physics
@@ -3377,7 +3460,7 @@ class EngineObject
         if (!enablePhysicsSolver || !this.mass) // don't do collision for static objects
             return;
 
-        const wasMovingDown = this.velocity.y < 0;
+        const wasFalling = this.velocity.y < 0 && gravity.y < 0 || this.velocity.y > 0 && gravity.y > 0;
         if (this.groundObject)
         {
             // apply friction in local space of ground object
@@ -3433,10 +3516,10 @@ class EngineObject
                 {
                     // push outside object collision
                     this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
-                    if ((o.groundObject && wasMovingDown) || !o.mass)
+                    if ((o.groundObject && wasFalling) || !o.mass)
                     {
                         // set ground object if landed on something
-                        if (wasMovingDown)
+                        if (wasFalling)
                             this.groundObject = o;
 
                         // bounce if other object is fixed or grounded
@@ -3523,12 +3606,15 @@ class EngineObject
                         const restitution = max(this.restitution, hitLayer.restitution);
                         this.velocity.y *= -restitution;
 
-                        if (wasMovingDown)
+                        if (wasFalling)
                         {
-                            // adjust position to slightly above nearest tile boundary
+                            // adjust position to slightly away from nearest tile
                             // this prevents gap between object and ground
                             const epsilon = .0001;
-                            this.pos.y = (oldPos.y-this.size.y/2|0)+this.size.y/2+epsilon;
+                            const offset = this.size.y/2 + epsilon;
+                            this.pos.y = gravity.y < 0 ?
+                                floor(oldPos.y-this.size.y/2) + offset :
+                                ceil( oldPos.y+this.size.y/2) - offset;
 
                             // set ground object for tile collision
                             this.groundObject = hitLayer;
@@ -3697,21 +3783,20 @@ class EngineObject
      *  @return {string} */
     toString()
     {
-        if (debug)
-        {
-            let text = 'type = ' + this.constructor.name;
-            if (this.pos.x || this.pos.y)
-                text += '\npos = ' + this.pos;
-            if (this.velocity.x || this.velocity.y)
-                text += '\nvelocity = ' + this.velocity;
-            if (this.size.x || this.size.y)
-                text += '\nsize = ' + this.size;
-            if (this.angle)
-                text += '\nangle = ' + this.angle.toFixed(3);
-            if (this.color)
-                text += '\ncolor = ' + this.color;
-            return text;
-        }
+        if (!debug) return;
+        
+        let text = 'type = ' + this.constructor.name;
+        if (this.pos.x || this.pos.y)
+            text += '\npos = ' + this.pos;
+        if (this.velocity.x || this.velocity.y)
+            text += '\nvelocity = ' + this.velocity;
+        if (this.size.x || this.size.y)
+            text += '\nsize = ' + this.size;
+        if (this.angle)
+            text += '\nangle = ' + this.angle.toFixed(3);
+        if (this.color)
+            text += '\ncolor = ' + this.color;
+        return text;
     }
 
     /** Render debug info for this object  */
@@ -3880,7 +3965,7 @@ class TileInfo
         this.padding = padding;
         /** @property {TextureInfo} - The texture info for this tile */
         this.textureInfo = textureInfos[this.textureIndex];
-        /** @property {float} - Shrinks tile by this many pixels to prevent neighbors bleeding */
+        /** @property {number} - Shrinks tile by this many pixels to prevent neighbors bleeding */
         this.bleedScale = bleedScale;
     }
 
@@ -4367,7 +4452,7 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
 
 /** Draw text on main canvas in world space
  *  Automatically splits new lines into rows
- *  @param {string}  text
+ *  @param {string|number}  text
  *  @param {Vector2} pos
  *  @param {number}  [size]
  *  @param {Color}   [color=(1,1,1,1)]
@@ -4394,7 +4479,7 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
 
 /** Draw text on overlay canvas in world space
  *  Automatically splits new lines into rows
- *  @param {string}  text
+ *  @param {string|number}  text
  *  @param {Vector2} pos
  *  @param {number}  [size]
  *  @param {Color}   [color=(1,1,1,1)]
@@ -4413,7 +4498,7 @@ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textA
 
 /** Draw text on overlay canvas in screen space
  *  Automatically splits new lines into rows
- *  @param {string}  text
+ *  @param {string|number}  text
  *  @param {Vector2} pos
  *  @param {number}  [size]
  *  @param {Color}   [color=(1,1,1,1)]
@@ -4578,11 +4663,28 @@ function worldToScreenTransform(worldPos, worldSize, worldAngle=0)
     ];
 }
 
-/** Get the camera's visible area in world space
+/** Get the size of the camera window in world space
  *  @return {Vector2}
  *  @memberof Draw */
 function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
 
+/** Check if a point or circle is on screen
+ *  If size is a Vector2, uses the largest dimension as diameter
+ *  This can be used to cull offscreen objects from render or update
+ *  @param {Vector2} pos - world space position
+ *  @param {Vector2|number} size - world space size or diameter
+ *  @return {boolean}
+ *  @memberof Draw */
+function isOnScreen(pos, size=0)
+{
+    pos = worldToScreen(pos);
+    if (size instanceof Vector2)
+        size = max(size.x, size.y); // use largest dimension
+    size *= cameraScale/2;
+    return pos.x + size > 0 && pos.x - size < mainCanvasSize.x &&
+           pos.y + size > 0 && pos.y - size < mainCanvasSize.y;
+}
+
 /** Enable normal or additive blend mode
  *  @param {boolean} [additive]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -4746,7 +4848,7 @@ class FontImage
     }
 
     /** Draw text in world space using the image font
-     *  @param {string}  text
+     *  @param {string|number}  text
      *  @param {Vector2} pos
      *  @param {number}  [scale=.25]
      *  @param {boolean} [center]
@@ -4758,7 +4860,7 @@ class FontImage
     }
 
     /** Draw text on overlay canvas in world space using the image font
-     *  @param {string}  text
+     *  @param {string|number}  text
      *  @param {Vector2} pos
      *  @param {number}  [scale]
      *  @param {boolean} [center]
@@ -4767,7 +4869,7 @@ class FontImage
     { this.drawText(text, pos, scale, center, overlayContext); }
 
     /** Draw text on overlay canvas in screen space using the image font
-     *  @param {string}  text
+     *  @param {string|number}  text
      *  @param {Vector2} pos
      *  @param {number}  [scale]
      *  @param {boolean} [center]
@@ -4811,6 +4913,85 @@ class FontImage
  * @namespace Input
  */
 
+/** Mouse pos in world space
+ *  @type {Vector2}
+ *  @memberof Input */
+let mousePos = vec2();
+
+/** Mouse pos in screen space
+ *  @type {Vector2}
+ *  @memberof Input */
+let mousePosScreen = vec2();
+
+/** Mouse movement delta in world space
+ *  @type {Vector2}
+ *  @memberof Input */
+let mouseDelta = vec2();
+
+/** Mouse movement delta in screen space
+ *  @type {Vector2}
+ *  @memberof Input */
+let mouseDeltaScreen = vec2();
+
+/** Mouse wheel delta this frame
+ *  @type {number}
+ *  @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 */
+let isUsingGamepad = false;
+
+/** Prevents input continuing to the default browser handling (true by default)
+ *  @type {boolean}
+ *  @memberof Input */
+let inputPreventDefault = true;
+
+/** Primary gamepad index, automatically set to first gamepad with input
+ *  @type {number}
+ *  @memberof Input */
+let gamepadPrimary = 0;
+
+/** Prevents input continuing to the default browser handling
+ *  This is useful to disable for html menus so the browser can handle input normally
+ *  @param {boolean} preventDefault
+ *  @memberof Input */
+function setInputPreventDefault(preventDefault) { inputPreventDefault = preventDefault; }
+
+/** Clears an input key state
+ *  @param {string|number} key
+ *  @param {number} [device]
+ *  @param {boolean} [clearDown=true]
+ *  @param {boolean} [clearPressed=true]
+ *  @param {boolean} [clearReleased=true]
+ *  @memberof Input */
+function inputClearKey(key, device=0, clearDown=true, clearPressed=true, clearReleased=true)
+{
+    if (!inputData[device])
+        return;
+    inputData[device][key] &= ~((clearDown?1:0)|(clearPressed?2:0)|(clearReleased?4:0));
+}
+
+/** Clears all input
+ *  @memberof Input */
+function inputClear()
+{
+    inputData.length = 0;
+    inputData[0] = [];
+    touchGamepadButtons.length = 0;
+    touchGamepadSticks.length = 0;
+    gamepadStickData.length = 0;
+    gamepadDpadData.length = 0;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
 /** Returns true if device key is down
  *  @param {string|number} key
  *  @param {number} [device]
@@ -4818,9 +4999,9 @@ class FontImage
  *  @memberof Input */
 function keyIsDown(key, device=0)
 {
-    ASSERT(key !== undefined, 'key is undefined');
+    ASSERT(isString(key), 'key must be a number or string');
     ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
-    return inputData[device] && !!(inputData[device][key] & 1);
+    return !!(inputData[device]?.[key] & 1);
 }
 
 /** Returns true if device key was pressed this frame
@@ -4830,9 +5011,9 @@ function keyIsDown(key, device=0)
  *  @memberof Input */
 function keyWasPressed(key, device=0)
 {
-    ASSERT(key !== undefined, 'key is undefined');
+    ASSERT(isString(key), 'key must be a number or string');
     ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
-    return inputData[device] && !!(inputData[device][key] & 2);
+    return !!(inputData[device]?.[key] & 2);
 }
 
 /** Returns true if device key was released this frame
@@ -4842,173 +5023,193 @@ function keyWasPressed(key, device=0)
  *  @memberof Input */
 function keyWasReleased(key, device=0)
 {
-    ASSERT(key !== undefined, 'key is undefined');
+    ASSERT(isString(key), 'key must be a number or string');
     ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
-    return inputData[device] && !!(inputData[device][key] & 4);
+    return !!(inputData[device]?.[key] & 4);
 }
 
 /** Returns input vector from arrow keys or WASD if enabled
+ *  @param {string} [up]
+ *  @param {string} [down]
+ *  @param {string} [left]
+ *  @param {string} [right]
  *  @return {Vector2}
  *  @memberof Input */
 function keyDirection(up='ArrowUp', down='ArrowDown', left='ArrowLeft', right='ArrowRight')
 {
+    ASSERT(isString(up),    'up key must be a string');
+    ASSERT(isString(down),  'down key must be a string');
+    ASSERT(isString(left),  'left key must be a string');
+    ASSERT(isString(right), 'right key must be a string');
     const k = (key)=> keyIsDown(key) ? 1 : 0;
     return vec2(k(right) - k(left), k(up) - k(down));
 }
 
-/** Clears all input
- *  @memberof Input */
-function inputClear() { inputData = [[]]; touchGamepadButtons = []; }
-
-/** Clears an input key state
- *  @param {string|number} key
- *  @param {number} [device]
- *  @param {boolean} [clearDown=true]
- *  @param {boolean} [clearPressed=true]
- *  @param {boolean} [clearReleased=true]
- *  @memberof Input */
-function inputClearKey(key, device=0, clearDown=true, clearPressed=true, clearReleased=true)
-{
-    if (!inputData[device])
-        return;
-    inputData[device][key] &= ~((clearDown?1:0)|(clearPressed?2:0)|(clearReleased?4:0));
-}
-
 /** Returns true if mouse button is down
  *  @function
  *  @param {number} button
  *  @return {boolean}
  *  @memberof Input */
-function mouseIsDown(button) { return keyIsDown(button); }
+function mouseIsDown(button)
+{
+    ASSERT(isNumber(button), 'mouse button must be a number');
+    return keyIsDown(button);
+}
 
 /** Returns true if mouse button was pressed
  *  @function
  *  @param {number} button
  *  @return {boolean}
  *  @memberof Input */
-function mouseWasPressed(button) { return keyWasPressed(button); }
+function mouseWasPressed(button)
+{
+    ASSERT(isNumber(button), 'mouse button must be a number');
+    return keyWasPressed(button);
+}
 
 /** Returns true if mouse button was released
  *  @function
  *  @param {number} button
  *  @return {boolean}
  *  @memberof Input */
-function mouseWasReleased(button) { return keyWasReleased(button); }
-
-/** Mouse pos in world space
- *  @type {Vector2}
- *  @memberof Input */
-let mousePos = vec2();
-
-/** Mouse pos in screen space
- *  @type {Vector2}
- *  @memberof Input */
-let mousePosScreen = vec2();
-
-/** Mouse movement delta in world space
- *  @type {Vector2}
- *  @memberof Input */
-let mouseDelta = vec2();
-
-/** Mouse movement delta in screen space
- *  @type {Vector2}
- *  @memberof Input */
-let mouseDeltaScreen = vec2();
-
-/** Mouse wheel delta this frame
- *  @type {number}
- *  @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 */
-let isUsingGamepad = false;
-
-/** Prevents input continuing to the default browser handling (true by default)
- *  @type {boolean}
- *  @memberof Input */
-let inputPreventDefault = true;
-
-/** Prevents input continuing to the default browser handling
- *  This is useful to disable for html menus so the browser can handle input normally
- *  @param {boolean} preventDefault
- *  @memberof Input */
-function setInputPreventDefault(preventDefault) { inputPreventDefault = preventDefault; }
+function mouseWasReleased(button)
+{
+    ASSERT(isNumber(button), 'mouse button must be a number');
+    return keyWasReleased(button);
+}
 
 /** Returns true if gamepad button is down
  *  @param {number} button
  *  @param {number} [gamepad]
  *  @return {boolean}
  *  @memberof Input */
-function gamepadIsDown(button, gamepad=0)
-{ return keyIsDown(button, gamepad+1); }
+function gamepadIsDown(button, gamepad=gamepadPrimary)
+{
+    ASSERT(isNumber(button), 'button must be a number');
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return keyIsDown(button, gamepad+1);
+}
 
 /** Returns true if gamepad button was pressed
  *  @param {number} button
  *  @param {number} [gamepad]
  *  @return {boolean}
  *  @memberof Input */
-function gamepadWasPressed(button, gamepad=0)
-{ return keyWasPressed(button, gamepad+1); }
+function gamepadWasPressed(button, gamepad=gamepadPrimary)
+{
+    ASSERT(isNumber(button), 'button must be a number');
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return keyWasPressed(button, gamepad+1);
+}
 
 /** Returns true if gamepad button was released
  *  @param {number} button
  *  @param {number} [gamepad]
  *  @return {boolean}
  *  @memberof Input */
-function gamepadWasReleased(button, gamepad=0)
-{ return keyWasReleased(button, gamepad+1); }
+function gamepadWasReleased(button, gamepad=gamepadPrimary)
+{
+    ASSERT(isNumber(button), 'button must be a number');
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return keyWasReleased(button, gamepad+1);
+}
 
 /** Returns gamepad stick value
  *  @param {number} stick
  *  @param {number} [gamepad]
  *  @return {Vector2}
  *  @memberof Input */
-function gamepadStick(stick, gamepad=0)
-{ return gamepadStickData[gamepad] ? gamepadStickData[gamepad][stick] || vec2() : vec2(); }
-
-///////////////////////////////////////////////////////////////////////////////
-// Input system functions called automatically by engine
-
-// input is stored as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
-// mouse and keyboard are stored together in device 0, gamepads are in devices > 0
-let inputData = [[]];
-
-function inputUpdate()
+function gamepadStick(stick, gamepad=gamepadPrimary)
 {
-    if (headlessMode) return;
-
-    // clear input when lost focus (prevent stuck keys)
-    if (!(touchInputEnable && isTouchDevice) && !document.hasFocus())
-        inputClear();
+    ASSERT(isNumber(stick), 'stick must be a number');
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return gamepadStickData[gamepad]?.[stick] ?? vec2();
+}
 
-    // update mouse world space position and delta
-    mousePos = screenToWorld(mousePosScreen);
-    mouseDelta = screenToWorldDelta(mouseDeltaScreen);
+/** Returns gamepad dpad value
+ *  @param {number} [gamepad]
+ *  @return {Vector2}
+ *  @memberof Input */
+function gamepadDpad(gamepad=gamepadPrimary)
+{
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return gamepadDpadData[gamepad] ?? vec2();
+}
 
-    // update gamepads if enabled
-    gamepadsUpdate();
+/** Returns true if passed in gamepad is connected
+ *  @param {number} [gamepad]
+ *  @return {boolean}
+ *  @memberof Input */
+function gamepadConnected(gamepad=gamepadPrimary)
+{
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return !!inputData[gamepad+1];
 }
 
-function inputUpdatePost()
+/** Returns how many control sticks the passed in gamepad has
+ *  @param {number} [gamepad]
+ *  @return {number}
+ *  @memberof Input */
+function gamepadStickCount(gamepad=gamepadPrimary)
 {
-    if (headlessMode) return;
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return gamepadStickData[gamepad]?.length ?? 0;
+}
 
-    // clear input to prepare for next frame
-    for (const deviceInputData of inputData)
-    for (const i in deviceInputData)
-        deviceInputData[i] &= 1;
-    mouseWheel = 0;
-    mouseDelta = vec2();
-    mouseDeltaScreen = vec2();
+/** True if a touch device has been detected
+ *  @memberof Input */
+const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Pulse the vibration hardware if it exists
+ *  @param {number|Array} [pattern] - single value in ms or vibration interval array
+ *  @memberof Input */
+function vibrate(pattern=100)
+{
+    ASSERT(isNumber(pattern) || isArray(pattern), 'pattern must be a number or array');
+    vibrateEnable && !headlessMode && navigator && navigator.vibrate && navigator.vibrate(pattern);
 }
 
+/** Cancel any ongoing vibration
+ *  @memberof Input */
+function vibrateStop() { vibrate(0); }
+
+///////////////////////////////////////////////////////////////////////////////
+// Pointer Lock
+
+/** Request to lock the pointer, does not work on touch devices
+ *  @memberof Input */
+function pointerLockRequest()
+{ !isTouchDevice && mainCanvas.requestPointerLock?.(); }
+
+/** Request to unlock the pointer
+ *  @memberof Input */
+function pointerLockExit()
+{ document.exitPointerLock?.(); }
+
+/** Check if pointer is locked (true if locked)
+ *  @return {boolean}
+ *  @memberof Input */
+function pointerLockIsActive()
+{ return document.pointerLockElement === mainCanvas; }
+
+///////////////////////////////////////////////////////////////////////////////
+// Input variables used by engine
+
+// input uses bit field for each key: 1=isDown, 2=wasPressed, 4=wasReleased
+// mouse and keyboard stored in device 0, gamepads stored in devices > 0
+const inputData = [[]];
+
+// gamepad internal variables
+const gamepadStickData = [], gamepadDpadData = [], gamepadHadInput = [];
+
+// touch gamepad internal variables
+const touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadSticks = [];
+
+///////////////////////////////////////////////////////////////////////////////
+// Input system functions used by engine
+
 function inputInit()
 {
     if (headlessMode) return;
@@ -5037,6 +5238,18 @@ function inputInit()
             if (inputWASDEmulateDirection)
                 inputData[0][remapKey(e.code)] = 3;
         }
+
+        // prevent arrow key from moving the page
+        const preventDefaultKeys = 
+        [
+            'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', // scrolling
+            'Space',        // page down scroll
+            'Tab',          // focus navigation
+            'Backspace',    // browser back
+        ];
+        if (preventDefaultKeys.includes(e.code))
+        if (inputPreventDefault && document.hasFocus() && e.cancelable)
+            e.preventDefault();
     }
     function onKeyUp(e)
     {
@@ -5068,7 +5281,9 @@ function inputInit()
         const mousePosScreenLast = mousePosScreen;
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
         mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
-        inputPreventDefault && e.button && e.preventDefault();
+
+        if (inputPreventDefault && document.hasFocus() && e.cancelable)
+            e.preventDefault();
     }
     function onMouseUp(e)
     {
@@ -5092,344 +5307,388 @@ function inputInit()
     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
-}
 
-// convert a mouse or touch event position to screen space
-function mouseEventToScreen(mousePos)
-{
-    const rect = mainCanvas.getBoundingClientRect();
-    const px = percent(mousePos.x, rect.left, rect.right);
-    const py = percent(mousePos.y, rect.top, rect.bottom);
-    return vec2(px*mainCanvas.width, py*mainCanvas.height);
-}
+    // enable touch input mouse passthrough
+    function touchInputInit()
+    {
+        // add non passive touch event listeners
+        document.addEventListener('touchstart', (e) => handleTouch(e), { passive: false });
+        document.addEventListener('touchmove',  (e) => handleTouch(e), { passive: false });
+        document.addEventListener('touchend',   (e) => handleTouch(e), { passive: false });
 
-///////////////////////////////////////////////////////////////////////////////
-// Gamepad input
+        // handle all touch events the same way
+        let wasTouching;
+        function handleTouch(e)
+        {
+            if (!touchInputEnable)
+                return;
 
-// gamepad internal variables
-const gamepadStickData = [];
+            // route touch to gamepad
+            if (touchGamepadEnable)
+                handleTouchGamepad(e);
 
-// gamepads are updated by engine every frame automatically
-function gamepadsUpdate()
-{
-    const applyDeadZones = (v)=>
-    {
-        const min=.3, max=.8;
-        const deadZone = (v)=>
-            v > min ? percent(v, min, max) :
-            v < -min ? -percent(-v, min, max) : 0;
-        return vec2(deadZone(v.x), deadZone(-v.y)).clampLength();
-    }
+            // fix stalled audio requiring user interaction
+            if (soundEnable && !headlessMode && audioContext && !audioIsRunning())
+                audioContext.resume();
 
-    // update touch gamepad if enabled
-    if (touchGamepadEnable && isTouchDevice)
-    {
-        if (!touchGamepadTimer.isSet())
-            return;
+            // check if touching and pass to mouse events
+            const touching = e.touches.length;
+            const button = 0; // all touches are left mouse button
+            if (touching)
+            {
+                // set event pos and pass it along
+                const pos = vec2(e.touches[0].clientX, e.touches[0].clientY);
+                const mousePosScreenLast = mousePosScreen;
+                mousePosScreen = mouseEventToScreen(pos);
+                if (wasTouching)
+                {
+                    mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
+                    isUsingGamepad = touchGamepadEnable;
+                }
+                else
+                    inputData[0][button] = 3;
+            }
+            else if (wasTouching)
+                inputData[0][button] = inputData[0][button] & 2 | 4;
 
-        // read virtual analog stick
-        const sticks = gamepadStickData[0] || (gamepadStickData[0] = []);
-        sticks[0] = vec2();
-        if (touchGamepadAnalog)
-            sticks[0] = applyDeadZones(touchGamepadStick);
-        else if (touchGamepadStick.lengthSquared() > .3)
-        {
-            // convert to 8 way dpad
-            sticks[0].x = round(touchGamepadStick.x);
-            sticks[0].y = -round(touchGamepadStick.y);
-            sticks[0] = sticks[0].clampLength();
+            // set was touching
+            wasTouching = touching;
+
+            // prevent default handling like copy, magnifier lens, and scrolling
+            if (inputPreventDefault && document.hasFocus() && e.cancelable)
+                e.preventDefault();
+
+            // must return true so the document will get focus
+            return true;
         }
 
-        // read virtual gamepad buttons
-        const data = inputData[1] || (inputData[1] = []);
-        for (let i=10; i--;)
+        // special handling for virtual gamepad mode
+        function handleTouchGamepad(e)
         {
-            const wasDown = gamepadIsDown(i,0);
-            data[i] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
+            // clear touch gamepad input
+            touchGamepadSticks.length = 0;
+            touchGamepadSticks[0] = vec2();
+            touchGamepadSticks[1] = vec2();
+            touchGamepadButtons.length = 0;
+            isUsingGamepad = true;
+
+            const touching = e.touches.length;
+            if (touching)
+            {
+                touchGamepadTimer.set();
+                if (touchGamepadCenterButton && !wasTouching && paused)
+                {
+                    // touch anywhere to press start when paused
+                    touchGamepadButtons[9] = 1;
+                    return;
+                }
+            }
+
+            // don't process touch gamepad if paused
+            if (paused)
+                return;
+
+            // get center of left and right sides
+            const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+            const buttonCenter = touchGamepadButtonCenter();
+            const startCenter = mainCanvasSize.scale(.5);
+
+            // check each touch point
+            for (const touch of e.touches)
+            {
+                const touchPos = mouseEventToScreen(vec2(touch.clientX, touch.clientY));
+                if (stickCenter.distance(touchPos) < touchGamepadSize)
+                {
+                    // virtual analog stick
+                    const delta = touchPos.subtract(stickCenter);
+                    touchGamepadSticks[0] = delta.scale(2/touchGamepadSize).clampLength();
+                }
+                else if (buttonCenter.distance(touchPos) < touchGamepadSize)
+                {
+                    if (touchGamepadButtonCount === 1)
+                    {
+                        // virtual right analog stick
+                        const delta = touchPos.subtract(buttonCenter);
+                        touchGamepadSticks[1] = delta.scale(2/touchGamepadSize).clampLength();
+                    }
+                    // virtual face buttons
+                    let button = buttonCenter.subtract(touchPos).direction();
+                    button = mod(button+2, 4);
+                    if (touchGamepadButtonCount === 1)
+                        button = 0;
+                    else if (touchGamepadButtonCount === 2)
+                    {
+                        const delta = buttonCenter.subtract(touchPos);
+                        button = -delta.x < delta.y ? 1 : 0;
+                    }
+                    // fix button locations (swap 2 and 3 to match gamepad layout)
+                    button = button === 3 ? 2 : button === 2 ? 3 : button;
+                    if (button < touchGamepadButtonCount)
+                        touchGamepadButtons[button] = 1;
+                }
+                else if (touchGamepadCenterButton && 
+                    startCenter.distance(touchPos) < touchGamepadSize)
+                {
+                    // virtual start button in center
+                    touchGamepadButtons[9] = 1;
+                }
+            }
         }
+    }
 
-        // disable normal gamepads when touch gamepad is active
-        return;
+    // convert a mouse or touch event position to screen space
+    function mouseEventToScreen(mousePos)
+    {
+        const rect = mainCanvas.getBoundingClientRect();
+        const px = percent(mousePos.x, rect.left, rect.right);
+        const py = percent(mousePos.y, rect.top, rect.bottom);
+        return vec2(px*mainCanvas.width, py*mainCanvas.height);
     }
+}
 
-    // return if gamepads are disabled or not supported
-    if (!gamepadsEnable || !navigator || !navigator.getGamepads)
-        return;
+function inputUpdate()
+{
+    if (headlessMode) return;
 
-    // only poll gamepads when focused or in debug mode
-    if (!debug && !document.hasFocus())
-        return;
+    // clear input when lost focus (prevent stuck keys)
+    if (!(touchInputEnable && isTouchDevice) && !document.hasFocus())
+        inputClear();
 
-    // poll gamepads
-    const gamepads = navigator.getGamepads();
-    for (let i = gamepads.length; i--;)
+    // update mouse world space position and delta
+    mousePos = screenToWorld(mousePosScreen);
+    mouseDelta = screenToWorldDelta(mouseDeltaScreen);
+
+    // update gamepads if enabled
+    gamepadsUpdate();
+        
+    // gamepads are updated by engine every frame automatically
+    function gamepadsUpdate()
     {
-        // get or create gamepad data
-        const gamepad = gamepads[i];
-        const data = inputData[i+1] || (inputData[i+1] = []);
-        const sticks = gamepadStickData[i] || (gamepadStickData[i] = []);
+        const applyDeadZones = (v)=>
+        {
+            const min=.3, max=.8;
+            const deadZone = (v)=>
+                v > min ? percent(v, min, max) :
+                v < -min ? -percent(-v, min, max) : 0;
+            return vec2(deadZone(v.x), deadZone(-v.y)).clampLength();
+        }
+
+        // update touch gamepad if enabled
+        if (touchGamepadEnable && isTouchDevice)
+        {
+            if (!touchGamepadTimer.isSet())
+                return;
+
+            // read virtual analog stick
+            gamepadPrimary = 0; // touch gamepad uses index 0
+            const sticks = gamepadStickData[0] ?? (gamepadStickData[0] = []);
+            const dpad = gamepadDpadData[0] ?? (gamepadDpadData[0] = vec2());
+            sticks[0] = vec2();
+            dpad.set();
+            const leftTouchStick = touchGamepadSticks[0] ?? vec2();
+            if (touchGamepadAnalog)
+                sticks[0] = applyDeadZones(leftTouchStick);
+            else if (leftTouchStick.lengthSquared() > .3)
+            {
+                // convert to 8 way dpad
+                const x = clamp(round(leftTouchStick.x), -1, 1);
+                const y = clamp(round(leftTouchStick.y), -1, 1);
+                dpad.set(x, -y);
+                sticks[0] = dpad.clampLength(); // clamp to circle
+            }
+            if (touchGamepadButtonCount === 1)
+            {
+                const rightTouchStick = touchGamepadSticks[1] ?? vec2();
+                sticks[1] = applyDeadZones(rightTouchStick);
+            }
 
-        if (gamepad)
+            // read virtual gamepad buttons
+            const data = inputData[1] ?? (inputData[1] = []);
+            for (let i=10; i--;)
+            {
+                const wasDown = gamepadIsDown(i,0);
+                data[i] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
+            }
+
+            // disable normal gamepads when touch gamepad is active
+            return;
+        }
+
+        // return if gamepads are disabled or not supported
+        if (!gamepadsEnable || !navigator || !navigator.getGamepads)
+            return;
+
+        // only poll gamepads when focused or in debug mode
+        if (!debug && !document.hasFocus())
+            return;
+
+        // poll gamepads
+        const maxGamepads = 8;
+        const gamepads = navigator.getGamepads();
+        const gamepadCount = min(maxGamepads, gamepads.length)
+        for (let i=0; i<gamepadCount; ++i)
         {
+            // get or create gamepad data
+            const gamepad = gamepads[i];
+            if (!gamepad)
+            {
+                // clear gamepad data if not connected
+                inputData[i+1] = undefined;
+                gamepadStickData[i] = undefined;
+                gamepadDpadData[i] = undefined;
+                gamepadHadInput[i] = undefined;
+                continue;
+            }
+
+            const data = inputData[i+1] ?? (inputData[i+1] = []);
+            const sticks = gamepadStickData[i] ?? (gamepadStickData[i] = []);
+            const dpad = gamepadDpadData[i] ?? (gamepadDpadData[i] = vec2());
+
             // read analog sticks
             for (let j = 0; j < gamepad.axes.length-1; j+=2)
                 sticks[j>>1] = applyDeadZones(vec2(gamepad.axes[j],gamepad.axes[j+1]));
 
             // read buttons
+            let hadInput = false;
             for (let j = gamepad.buttons.length; j--;)
             {
                 const button = gamepad.buttons[j];
                 const wasDown = gamepadIsDown(j,i);
                 data[j] = button.pressed ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
-                if (!button.value || button.value > .9) // must be a full press
-                if (!i && button.pressed)
-                    isUsingGamepad = true;
+
+                // check for any input on this gamepad, analog must be full press
+                if (button.pressed)
+                if (!button.value || button.value > .9)
+                    hadInput = true;
+            }
+            
+            // set new primary gamepad if current is not connected
+            if (hadInput)
+            {
+                gamepadHadInput[i] = true;
+                if (!gamepadHadInput[gamepadPrimary])
+                    gamepadPrimary = i;
+                isUsingGamepad ||= (gamepadPrimary === i);
             }
 
-            if (gamepadDirectionEmulateStick)
+            if (gamepad.mapping === 'standard')
             {
-                // copy dpad to left analog stick when pressed
-                const dpad = vec2(
+                // get dpad buttons (standard mapping)
+                dpad.set(
                     (gamepadIsDown(15,i)&&1) - (gamepadIsDown(14,i)&&1),
                     (gamepadIsDown(12,i)&&1) - (gamepadIsDown(13,i)&&1));
-                if (dpad.lengthSquared())
-                    sticks[0] = dpad.clampLength();
+            }
+            else if (gamepad.axes && gamepad.axes.length >= 2)
+            {
+                // digital style dpad from axes
+                const x = clamp(round(gamepad.axes[0]), -1, 1);
+                const y = clamp(round(gamepad.axes[1]), -1, 1);
+                dpad.set(x, -y);
             }
 
-            // disable touch gamepad if using real gamepad
-            touchGamepadEnable && isUsingGamepad && touchGamepadTimer.unset();
+            // copy dpad to left analog stick when pressed
+            if (gamepadDirectionEmulateStick && !dpad.isZero())
+                sticks[0] = dpad.clampLength();
         }
+
+        // disable touch gamepad if using real gamepad
+        touchGamepadEnable && isUsingGamepad && touchGamepadTimer.unset();
     }
 }
 
-///////////////////////////////////////////////////////////////////////////////
-
-/** Pulse the vibration hardware if it exists
- *  @param {number|Array} [pattern] - single value in ms or vibration interval array
- *  @memberof Input */
-function vibrate(pattern=100)
-{ vibrateEnable && !headlessMode && navigator && navigator.vibrate && navigator.vibrate(pattern); }
-
-/** Cancel any ongoing vibration
- *  @memberof Input */
-function vibrateStop() { vibrate(0); }
-
-///////////////////////////////////////////////////////////////////////////////
-// Touch input & virtual on screen gamepad
-
-/** True if a touch device has been detected
- *  @memberof Input */
-const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
-
-// touch gamepad internal variables
-let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
-
-function touchGamepadButtonCenter()
+function inputUpdatePost()
 {
-    // draw right face buttons
-    const center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-    if (touchGamepadButtonCount <= 2)
-        center.x += touchGamepadSize/2;
-    return center;
+    if (headlessMode) return;
+
+    // clear input to prepare for next frame
+    for (const deviceInputData of inputData)
+    for (const i in deviceInputData)
+        deviceInputData[i] &= 1;
+    mouseWheel = 0;
+    mouseDelta = vec2();
+    mouseDeltaScreen = vec2();
 }
 
-// enable touch input mouse passthrough
-function touchInputInit()
+function inputRender()
 {
-    // add non passive touch event listeners
-    document.addEventListener('touchstart', (e) => handleTouch(e), { passive: false });
-    document.addEventListener('touchmove',  (e) => handleTouch(e), { passive: false });
-    document.addEventListener('touchend',   (e) => handleTouch(e), { passive: false });
+    touchGamepadRender();
 
-    // handle all touch events the same way
-    let wasTouching;
-    function handleTouch(e)
+    function touchGamepadRender()
     {
-        if (!touchInputEnable)
+        if (!touchInputEnable || !isTouchDevice || headlessMode) return;
+        if (!touchGamepadEnable || !touchGamepadTimer.isSet())
             return;
 
-        // route touch to gamepad
-        if (touchGamepadEnable)
-            handleTouchGamepad(e);
+        // fade off when not touching or paused
+        const alpha = percent(touchGamepadTimer.get(), 4, 3);
+        if (!alpha || paused)
+            return;
 
-        // fix stalled audio requiring user interaction
-        if (soundEnable && !headlessMode && audioContext && !audioIsRunning())
-            audioContext.resume();
+        // setup the canvas
+        const context = overlayContext;
+        context.save();
+        context.globalAlpha = alpha*touchGamepadAlpha;
+        context.strokeStyle = '#fff';
+        context.lineWidth = 3;
 
-        // check if touching and pass to mouse events
-        const touching = e.touches.length;
-        const button = 0; // all touches are left mouse button
-        if (touching)
+        // draw left analog stick
+        const leftTouchStick = touchGamepadSticks[0] ?? vec2();
+        context.fillStyle = leftTouchStick.lengthSquared() > 0 ? '#fff' : '#000';
+        context.beginPath();
+        const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+        if (touchGamepadAnalog)
         {
-            // set event pos and pass it along
-            const pos = vec2(e.touches[0].clientX, e.touches[0].clientY);
-            const mousePosScreenLast = mousePosScreen;
-            mousePosScreen = mouseEventToScreen(pos);
-            if (wasTouching)
-            {
-                mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
-                isUsingGamepad = touchGamepadEnable;
-            }
-            else
-                inputData[0][button] = 3;
+            // draw circle shaped gamepad
+            context.arc(stickCenter.x, stickCenter.y, touchGamepadSize/2, 0, 9);
         }
-        else if (wasTouching)
-            inputData[0][button] = inputData[0][button] & 2 | 4;
-
-        // set was touching
-        wasTouching = touching;
-
-        // prevent default handling like copy, magnifier lens, and scrolling
-        if (inputPreventDefault && document.hasFocus() && e.cancelable)
-            e.preventDefault();
-
-        // must return true so the document will get focus
-        return true;
-    }
-
-    // special handling for virtual gamepad mode
-    function handleTouchGamepad(e)
-    {
-        // clear touch gamepad input
-        touchGamepadStick = vec2();
-        touchGamepadButtons = [];
-        isUsingGamepad = true;
-
-        const touching = e.touches.length;
-        if (touching)
+        else
         {
-            touchGamepadTimer.set();
-            if (touchGamepadCenterButton && !wasTouching && paused)
+            // draw cross shaped gamepad
+            for (let i=10; --i;)
             {
-                // touch anywhere to press start when paused
-                touchGamepadButtons[9] = 1;
-                return;
+                const angle = i*PI/4;
+                context.arc(stickCenter.x, stickCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
+                i%2 && context.arc(stickCenter.x, stickCenter.y, touchGamepadSize*.33, angle, angle);
             }
         }
+        context.fill();
+        context.stroke();
 
-        // get center of left and right sides
-        const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-        const buttonCenter = touchGamepadButtonCenter();
-        const startCenter = mainCanvasSize.scale(.5);
-
-        // check each touch point
-        for (const touch of e.touches)
+        // draw right face buttons
         {
-            const touchPos = mouseEventToScreen(vec2(touch.clientX, touch.clientY));
-            if (stickCenter.distance(touchPos) < touchGamepadSize)
-            {
-                // virtual analog stick
-                touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
-            }
-            else if (buttonCenter.distance(touchPos) < touchGamepadSize)
+            const buttonCenter = touchGamepadButtonCenter();
+            const buttonSize = touchGamepadButtonCount > 1 ? 
+                touchGamepadSize/4 : touchGamepadSize/2;
+            for (let i=0; i<touchGamepadButtonCount; i++)
             {
-                // virtual face buttons
-                let button = buttonCenter.subtract(touchPos).direction();
-                button = mod(button+2, 4);
-                if (touchGamepadButtonCount === 1)
-                    button = 0;
-                else if (touchGamepadButtonCount === 2)
-                {
-                    const delta = buttonCenter.subtract(touchPos);
-                    button = -delta.x < delta.y ? 1 : 0;
-                }
+                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)
                 button = button === 3 ? 2 : button === 2 ? 3 : button;
-                if (button < touchGamepadButtonCount)
-                    touchGamepadButtons[button] = 1;
-            }
-            else if (touchGamepadCenterButton && !wasTouching && 
-                startCenter.distance(touchPos) < touchGamepadSize)
-            {
-                // virtual start button in center
-                touchGamepadButtons[9] = 1;
+                const pos = touchGamepadButtonCount < 2 ? buttonCenter :
+                    buttonCenter.add(vec2().setDirection(j, touchGamepadSize/2));
+                context.fillStyle = touchGamepadButtons[button] ? '#fff' : '#000';
+                context.beginPath();
+                context.arc(pos.x, pos.y, buttonSize, 0,9);
+                context.fill();
+                context.stroke();
             }
         }
-    }
-}
 
-// render the touch gamepad, called automatically by the engine
-function touchGamepadRender()
-{
-    if (!touchInputEnable || !isTouchDevice || headlessMode) return;
-    if (!touchGamepadEnable || !touchGamepadTimer.isSet())
-        return;
-
-    // fade off when not touching or paused
-    const alpha = percent(touchGamepadTimer.get(), 4, 3);
-    if (!alpha || paused)
-        return;
-
-    // setup the canvas
-    const context = overlayContext;
-    context.save();
-    context.globalAlpha = alpha*touchGamepadAlpha;
-    context.strokeStyle = '#fff';
-    context.lineWidth = 3;
-
-    // draw left analog stick
-    context.fillStyle = touchGamepadStick.lengthSquared() > 0 ? '#fff' : '#000';
-    context.beginPath();
-    const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-    if (touchGamepadAnalog) // draw circle shaped gamepad
-    {
-        context.arc(stickCenter.x, stickCenter.y, touchGamepadSize/2, 0, 9);
-        context.fill();
-        context.stroke();
-    }
-    else // draw cross shaped gamepad
-    {
-        for (let i=10; i--;)
-        {
-            const angle = i*PI/4;
-            context.arc(stickCenter.x, stickCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
-            i%2 && context.arc(stickCenter.x, stickCenter.y, touchGamepadSize*.33, angle, angle);
-            i===1 && context.fill();
-        }
-        context.stroke();
-    }
-
-    // draw right face buttons
-    const buttonCenter = touchGamepadButtonCenter();
-    const buttonSize = touchGamepadButtonCount > 1 ? touchGamepadSize/4 : touchGamepadSize/2;
-    for (let i=0; i<touchGamepadButtonCount; i++)
-    {
-        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)
-        button = button === 3 ? 2 : button === 2 ? 3 : button;
-        const pos = buttonCenter.add(vec2().setDirection(j, touchGamepadSize/2));
-        context.fillStyle = touchGamepadButtons[button] ? '#fff' : '#000';
-        context.beginPath();
-        context.arc(pos.x, pos.y, buttonSize, 0,9);
-        context.fill();
-        context.stroke();
+        // set canvas back to normal
+        context.restore();
     }
-
-    // set canvas back to normal
-    context.restore();
 }
 
-///////////////////////////////////////////////////////////////////////////////
-// Pointer Lock
-
-/** Request to lock the pointer, does not work on touch devices
- *  @memberof Input */
-function pointerLockRequest()
+// center position for right tocuh pad face buttons
+function touchGamepadButtonCenter()
 {
-    if (!isTouchDevice)
-        mainCanvas.requestPointerLock && mainCanvas.requestPointerLock();
-}
-
-/** Request to unlock the pointer
- *  @memberof Input */
-function pointerLockExit() { document.exitPointerLock && document.exitPointerLock(); }
-
-/** Check if pointer is locked (true if locked)
- *  @return {boolean}
- *  @memberof Input */
-function pointerLockIsActive() { return document.pointerLockElement === mainCanvas; }
+    const center = mainCanvasSize.subtract(vec2(touchGamepadSize));
+    if (touchGamepadButtonCount === 2)
+        center.x += touchGamepadSize/2;
+    return center;
+}
 /**
  * LittleJS Audio System
  * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
@@ -6169,7 +6428,7 @@ function tileCollisionTest(pos, size=vec2(), object, solidOnly=true)
     }
 }
 
-/** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
+/** Return the exact position of the boundary of first tile hit, undefined if nothing was hit.
  *  The point will be inside the colliding tile if it hits (may have a tiny shift)
  *  @param {Vector2}      posStart
  *  @param {Vector2}      posEnd
@@ -6333,8 +6592,7 @@ class CanvasLayer extends EngineObject
     /** Destroy this canvas layer */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         this.textureInfo.destroyWebGLTexture();
         super.destroy();
@@ -6743,7 +7001,7 @@ class TileCollisionLayer extends TileLayer
         return false;
     }
 
-    /** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
+    /** Return the exact position of the boundary of first tile hit, undefined if nothing was hit.
     *  The point will be inside the colliding tile if it hits (may have a tiny shift)
     *  @param {Vector2}      posStart
     *  @param {Vector2}      posEnd
@@ -6886,9 +7144,9 @@ class ParticleEmitter extends EngineObject
         /** @property {Color} - Color at start of life 2, randomized between start colors */
         this.colorStartB = colorStartB.copy();
         /** @property {Color} - Color at end of life 1, randomized between end colors */
-        this.colorEndA   = colorEndA.copy();
+        this.colorEndA = colorEndA.copy();
         /** @property {Color} - Color at end of life 2, randomized between end colors */
-        this.colorEndB   = colorEndB.copy();
+        this.colorEndB = colorEndB.copy();
         /** @property {boolean} - Should color be randomized linearly or across each component */
         this.randomColorLinear = randomColorLinear;
 
@@ -6972,8 +7230,10 @@ class ParticleEmitter extends EngineObject
         if (debugParticles)
         {
             // show emitter bounds
-            const emitSize = typeof this.emitSize === 'number' ? vec2(this.emitSize) : this.emitSize;
-            debugRect(this.pos, emitSize, '#0f0', 0, this.angle);
+            if (typeof this.emitSize === 'number')
+                debugCircle(this.pos, this.emitSize/2, '#0f0');
+            else
+                debugRect(this.pos, this.emitSize, '#0f0', 0, this.angle);
         }
     }
 
@@ -6983,8 +7243,8 @@ class ParticleEmitter extends EngineObject
     {
         // spawn a particle
         let pos = typeof this.emitSize === 'number' ? // check if number was used
-            randInCircle(this.emitSize/2)            // circle emitter
-            : vec2(rand(-.5,.5), rand(-.5,.5))       // box emitter
+            randInCircle(this.emitSize/2)             // circle emitter
+            : vec2(rand(-.5,.5), rand(-.5,.5))        // box emitter
                 .multiply(this.emitSize).rotate(this.angle)
         let angle = rand(this.particleConeAngle, -this.particleConeAngle);
         if (!this.localSpace)
@@ -8688,11 +8948,14 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
 /**
  * LittleJS User Interface Plugin
  * - call new UISystemPlugin() to setup the UI system
+ * - Gamepad and keyboard navigation support
  * - Nested Menus
  * - Text
  * - Buttons
  * - Checkboxes
  * - Images
+ * - Scrollbars
+ * - Video
  * @namespace UISystem
  */
 
@@ -8703,6 +8966,20 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
  *  @memberof UISystem */
 let uiSystem;
 
+/** Enable UI system debug drawing
+ *  0=off, 1=normal, 2=show invisible
+ *  @type {number}
+ *  @default
+ *  @memberof UISystem */
+let uiDebug = 0;
+
+/** Enable UI system debug drawing
+ *  0=off, 1=normal, 2=show invisible
+ *  @param {number|boolean} enable
+ *  @memberof UISystem */
+function uiSetDebug(debugMode)
+{ uiDebug = typeof debugMode === 'boolean' ? (debugMode ? 1 : 0) : debugMode; }
+
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * UI System Global Object
@@ -8741,7 +9018,7 @@ class UISystemPlugin
         /** @property {number} - Default rounded rect corner radius for UI elements */
         this.defaultCornerRadius = 0;
         /** @property {number} - Default scale to use for fitting text to object */
-        this.defaultTextScale = .8;
+        this.defaultTextFitScale = .8;
         /** @property {string} - Default font for UI elements */
         this.defaultFont = fontDefault;
         /** @property {Sound} - Default sound when interactive UI element is pressed */
@@ -8756,6 +9033,21 @@ class UISystemPlugin
         this.defaultShadowBlur = 5;
         /** @property {Vector2} - Offset of shadow blur */
         this.defaultShadowOffset = vec2(5);
+        /** @property {number} - If set ui coords will be renormalized to this canvas height */
+        this.nativeHeight = 0;
+
+        // navigation properties
+        /** @property {UIObject} - Object currently selected by navigation (gamepad or keyboard) */
+        this.navigationObject = undefined;
+        /** @property {Timer} - Cooldown timer for navigation inputs */
+        this.navigationTimer = new Timer(undefined, true);
+        /** @property {number} - Time between navigation inputs in seconds */
+        this.navigationDelay = .2;
+        /** @property {boolean} - should the navigation be horizontal, vertical, or both? */
+        this.navigationDirection = 1;
+        /** @property {boolean} - True if user last used navigation instead of mouse */
+        this.navigationMode = false;
+
         // system state
         /** @property {Array<UIObject>} - List of all UI elements */
         this.uiObjects = [];
@@ -8767,50 +9059,118 @@ class UISystemPlugin
         this.hoverObject = undefined;
         /** @property {UIObject} - Hover object at start of update */
         this.lastHoverObject = undefined;
-        /** @property {number} - If set ui coords will be renormalized to this canvas height */
-        this.nativeHeight = 0;
+        /** @property {UIObject} - Current confirm menu being shown */
+        this.confirmDialog = undefined;
 
         engineAddPlugin(uiUpdate, uiRender);
 
+        // set object position in parent space
+        function updateTransforms(o)
+        {
+            if (!o.parent) return;
+            o.pos.x = o.localPos.x + o.parent.pos.x;
+            o.pos.y = o.localPos.y + o.parent.pos.y;
+        }
+
         // setup recursive update and render
         // update in reverse order to detect mouse enter/leave
         function uiUpdate()
         {
-            function updateInvisibleObject(o)
+            if (uiSystem.activeObject && !uiSystem.activeObject.visible)
+                uiSystem.activeObject = undefined;
+
+            // reset hover object at start of update
+            uiSystem.lastHoverObject = uiSystem.hoverObject;
+            uiSystem.hoverObject = undefined;
+
+            if (mouseWasPressed(0))
             {
-                // update invisible objects
-                for (const c of o.children)
-                    updateInvisibleObject(c);
-                o.updateInvisible();
+                uiSystem.navigationMode = false;
+                uiSystem.navigationObject = undefined;
             }
-            function updateObject(o)
+
+            // navigation with gamepad/keyboard
+            const navigableObjects = uiSystem.getNavigableObjects();
+            if (!navigableObjects.length)
+                uiSystem.navigationObject = undefined;
+            else
             {
-                if (o.visible)
+                // unselect object if it is no longer navigable
+                if (!navigableObjects.includes(uiSystem.navigationObject))
+                    uiSystem.navigationObject = undefined;
+
+                if (!isTouchDevice)
+                if (uiSystem.navigationMode && !uiSystem.navigationObject)
                 {
-                    // set position in parent space
-                    if (o.parent)
-                        o.pos = o.localPos.add(o.parent.pos);
-                    // update in reverse order to detect mouse enter/leave
-                    for (let i=o.children.length; i--;)
-                        updateObject(o.children[i]);
-                    o.update();
+                    // select first auto focus object
+                    uiSystem.navigationObject = navigableObjects.find(o=>o.navigationAutoSelect);
                 }
-                else
-                    updateInvisibleObject(o);
+                
+                // navigate with dpad or left stick
+                if (!uiSystem.navigationTimer.active())
+                {
+                    // navigate through list with gamepad or keyboard
+                    const direction = sign(uiSystem.getNavigationDirection());
+                    if (direction)
+                    {
+                        let newNavigationObject;
+                        if (!uiSystem.navigationObject)
+                        {
+                            // use auto select object
+                            newNavigationObject = navigableObjects.find(o=>o.navigationAutoSelect);
+
+                            if (!newNavigationObject)
+                            {
+                                // try first or last object
+                                const newIndex = direction > 0 ? 0 : navigableObjects.length-1;
+                                newNavigationObject = navigableObjects[newIndex];
+                            }
+                        }
+                        else
+                        {
+                            const currentIndex = navigableObjects.indexOf(uiSystem.navigationObject);
+                            const newIndex = mod(currentIndex + direction, navigableObjects.length);
+                            newNavigationObject = navigableObjects[newIndex];
+                        }
+                        
+                        if (uiSystem.navigationObject !== newNavigationObject)
+                        {
+                            uiSystem.navigationMode = true;
+                            uiSystem.hoverObject = undefined;
+                            uiSystem.navigationObject = newNavigationObject;
+                            uiSystem.navigationTimer.set(uiSystem.navigationDelay);
+                            newNavigationObject.soundPress &&
+                                newNavigationObject.soundPress.play();
+                        }
+                    }
+                }
+
+                // activate the navigation object when pressed
+                if (uiSystem.navigationObject)
+                if (uiSystem.getNavigationWasPressed())
+                    uiSystem.navigationObject.navigatePressed();
             }
-            // reset hover object at start of update
-            uiSystem.lastHoverObject = uiSystem.hoverObject;
-            uiSystem.hoverObject = undefined;
 
             // update in reverse order so topmost objects get priority
             for (let i = uiSystem.uiObjects.length; i--;)
             {
                 const o = uiSystem.uiObjects[i];
-                o.parent || updateObject(o)
+                o.parent || updateObject(o);
             }
 
             // remove destroyed objects
             uiSystem.uiObjects = uiSystem.uiObjects.filter(o=>!o.destroyed);
+
+            function updateObject(o)
+            {
+                if (!o.visible) return;
+
+                // update in reverse order to detect mouse enter/leave
+                updateTransforms(o);
+                for (let i=o.children.length; i--;)
+                    updateObject(o.children[i]);
+                o.update();
+            }
         }
         function uiRender()
         {
@@ -8827,15 +9187,29 @@ class UISystemPlugin
 
             function renderObject(o)
             {
-                if (!o.visible)
-                    return;
-                if (o.parent)
-                    o.pos = o.localPos.add(o.parent.pos);
+                if (!o.visible) return;
+
+                // render object and children
+                updateTransforms(o);
                 o.render();
                 for (const c of o.children)
                     renderObject(c);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || renderObject(o));
+
+            if (uiDebug > 0)
+            {
+                // debug render all objects
+                function renderDebug(o, visible=true)
+                {
+                    visible &&= !!o.visible;
+                    updateTransforms(o);
+                    o.renderDebug(visible);
+                    for (const c of o.children)
+                        renderDebug(c, visible);
+                }
+                uiSystem.uiObjects.forEach(o=> o.parent || renderDebug(o));
+            }
             context.restore();
         }
     }
@@ -8888,8 +9262,8 @@ class UISystemPlugin
         else
             context.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
         context.fill();
-        context.shadowColor = '#0000'
-        if (lineWidth)
+        context.shadowColor = '#0000';
+        if (lineWidth && lineColor.a > 0)
         {
             context.strokeStyle = lineColor.toString();
             context.lineWidth = lineWidth;
@@ -8924,10 +9298,24 @@ class UISystemPlugin
     *  @param {TileInfo} tileInfo
     *  @param {Color}    [color=uiSystem.defaultColor]
     *  @param {number}   [angle]
-    *  @param {boolean}  [mirror] */
-    drawTile(pos, size, tileInfo, color=uiSystem.defaultColor, angle=0, mirror=false)
+    *  @param {boolean}  [mirror]
+    *  @param {Color}    [shadowColor]
+    *  @param {number}   [shadowBlur]
+    *  @param {Color}    [shadowOffset] */
+    drawTile(pos, size, tileInfo, color=uiSystem.defaultColor, angle=0, mirror=false, shadowColor=BLACK, shadowBlur=0, shadowOffset=vec2())
     {
-        drawTile(pos, size, tileInfo, color, angle, mirror, CLEAR_BLACK, false, true, uiSystem.uiContext);
+        const context = uiSystem.uiContext;
+        if (shadowBlur || shadowOffset.x || shadowOffset.y)
+        if (shadowColor.a > 0)
+        {
+            // setup shadow
+            context.shadowColor = shadowColor.toString();
+            context.shadowBlur = shadowBlur;
+            context.shadowOffsetX = shadowOffset.x;
+            context.shadowOffsetY = shadowOffset.y;
+        }
+        drawTile(pos, size, tileInfo, color, angle, mirror, CLEAR_BLACK, false, true, context);
+        context.shadowColor = '#0000';
     }
 
     /** Draw text to the UI context
@@ -8942,12 +9330,27 @@ class UISystemPlugin
     *  @param {string}  [fontStyle]
     *  @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)
+    *  @param {Color}   [shadowColor]
+    *  @param {number}  [shadowBlur]
+    *  @param {Color}   [shadowOffset] */
+    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, fontStyle='', applyMaxWidth=true, textShadow=undefined, shadowColor=BLACK, shadowBlur=0, shadowOffset=vec2())
     {
-        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);
+        const context = uiSystem.uiContext;
+        if (shadowColor.a > 0)
+        {
+            if (textShadow)
+                drawTextScreen(text, pos.add(textShadow), size.y, shadowColor, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, 0, context);
+            if (shadowBlur || shadowOffset.x || shadowOffset.y)
+            {
+                // setup shadow
+                context.shadowColor = shadowColor.toString();
+                context.shadowBlur = shadowBlur;
+                context.shadowOffsetX = shadowOffset.x;
+                context.shadowOffsetY = shadowOffset.y;
+            }
+        }
+        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, 0, context);
+        context.shadowColor = '#0000';
     }
 
     /**
@@ -8961,7 +9364,7 @@ class UISystemPlugin
     *  @param {DragAndDropCallback} [onDrop] - when a file is dropped
     *  @param {DragAndDropCallback} [onDragEnter] - when a file is dragged onto the window
     *  @param {DragAndDropCallback} [onDragLeave] - when a file is dragged off the window
-    *  @param {DragAndDropCallback} [onDragOver] - continously when dragging over */
+    *  @param {DragAndDropCallback} [onDragOver] - continuously when dragging over */
     setupDragAndDrop(onDrop, onDragEnter, onDragLeave, onDragOver)
     {
         function setCallback(callback, listenerType)
@@ -8977,8 +9380,7 @@ class UISystemPlugin
 
     /** Convert a screen space position to native UI position
      *  @param {Vector2} pos
-     *  @return {Vector2}
-     */
+     *  @return {Vector2} */
     screenToNative(pos)
     {
         if (!uiSystem.nativeHeight)
@@ -9001,6 +9403,157 @@ class UISystemPlugin
         for (const o of this.uiObjects)
             o.parent || o.destroy();
         this.uiObjects = this.uiObjects.filter(o=>!o.destroyed);
+        this.activeObject = undefined;
+        this.hoverObject = undefined;
+        this.lastHoverObject = undefined;
+    }
+
+    /** Get all navigable UI objects sorted by navigationIndex
+     *  @return {Array<UIObject>} */
+    getNavigableObjects()
+    {
+        function getNavigableRecursive(o)
+        {
+            if (!o.visible || o.disabled)
+                return; // skip children if parent is invisible or disabled
+
+            if (o.isInteractive() && o.navigationIndex !== undefined)
+                objects.push(o);
+            for (let i=o.children.length; i--;)
+                getNavigableRecursive(o.children[i]);
+        }
+
+        // get all the valid navigable objects recursively
+        let objects = [];
+        for (let i = uiSystem.uiObjects.length; i--;)
+        {
+            const o = uiSystem.uiObjects[i];
+            if (uiSystem.confirmDialog && o !== uiSystem.confirmDialog)
+                continue;
+            o.parent || getNavigableRecursive(o);
+        }
+
+        // sort by navigationIndex (lower numbers first)
+        objects.sort((a, b)=> a.navigationIndex - b.navigationIndex);
+        return objects;
+    }
+
+    /** Get navigation direction from gamepad or keyboard
+     *  @return {number} */
+    getNavigationDirection()
+    {
+        const vertical = uiSystem.navigationDirection === 1;
+        const both = uiSystem.navigationDirection === 2;
+        if (isUsingGamepad)
+        {
+            const stick = gamepadStick(0, gamepadPrimary);
+            const dpad = gamepadDpad(gamepadPrimary);
+            if (both)
+                return -(stick.y || dpad.y) || (stick.x || dpad.x);
+            return vertical ? -(stick.y || dpad.y) : (stick.x || dpad.x);
+        }
+        const up = 'ArrowUp', down = 'ArrowDown', left = 'ArrowLeft', right = 'ArrowRight';
+        if (both)
+        {
+            return keyIsDown(up) || keyIsDown(left) ? -1 : 
+                keyIsDown(down) || keyIsDown(right) ? 1 : 0;
+        }
+        const back = vertical ? up : left;
+        const forward = vertical ? down : right;
+        return keyIsDown(back) ? -1 : keyIsDown(forward) ? 1 : 0;
+    }
+
+    /** Get other axis navigation direction from gamepad or keyboard
+     *  @return {Vector2} */
+    getNavigationOtherDirection()
+    {
+        if (uiSystem.navigationDirection === 2)
+            return 0; // other direction disabled
+
+        const vertical = uiSystem.navigationDirection === 1;
+        if (isUsingGamepad)
+        {
+            const stick = gamepadStick(0, gamepadPrimary);
+            const dpad = gamepadDpad(gamepadPrimary);
+            return !vertical ? (stick.y || dpad.y) : (stick.x || dpad.x);
+        }
+        const back = !vertical ? 'ArrowUp' : 'ArrowLeft';
+        const forward = !vertical ? 'ArrowDown' : 'ArrowRight';
+        return keyIsDown(back) ? -1 : keyIsDown(forward) ? 1 : 0;
+    }
+
+    /** Get if navigation button was pressed from gamepad or keyboard
+     *  @return {boolean} */
+    getNavigationWasPressed()
+    {
+        return isUsingGamepad ? gamepadWasPressed(0, gamepadPrimary) : 
+            keyWasPressed('Space') || keyWasPressed('Enter');
+    }
+        
+    /** Show a confirmation dialog with Yes/No buttons
+     *  Centers the dialog on the screen with darkened background
+     *  @param {string} [text] - The message to display
+     *  @param {Function} [yesCallback] - Called when Yes is clicked
+     *  @param {Function} [noCallback] - Called when No is clicked
+     *  @param {Vector2} [size] - Size of the confirmation dialog
+     *  @param {string} [exitKey] - Key that can exit the menu
+     *  @return {UIObject} The confirmation menu object
+     */
+    showConfirmDialog(text='Are you sure?', yesCallback, noCallback, size=vec2(500,250), exitKey='Escape')
+    {
+        ASSERT(!uiSystem.confirmDialog);
+
+        const savedNavigationDirection = uiSystem.navigationDirection;
+
+        // allow both axies for navigation
+        uiSystem.navigationDirection = 2;
+
+        // confirm menu
+        const confirmMenu = new UIObject(vec2(), size);
+        uiSystem.confirmDialog = confirmMenu;
+        confirmMenu.onRender = ()=> 
+        {
+            confirmMenu.pos = uiSystem.screenToNative(mainCanvasSize.scale(.5));
+            const backgroundColor = hsl(0,0,0,.7);
+            uiSystem.drawRect(vec2(), vec2(1e9), backgroundColor);
+        }
+        confirmMenu.onUpdate = ()=>
+        {
+            if (keyWasPressed(exitKey))
+                closeMenu();
+        }
+        confirmMenu.isMouseOverlapping = ()=> true; // always hover
+        
+        // title text
+        const gap = 50;
+        const textTitle = new UIText(vec2(0,-50), vec2(size.x-gap,70), text);
+        confirmMenu.addChild(textTitle);
+        
+        // yes button
+        const buttonYes = new UIButton(vec2(-80,50), vec2(120,70), 'Yes');
+        buttonYes.textHeight = 40;
+        buttonYes.navigationIndex = 1;
+        buttonYes.hoverColor = hsl(0,1,.5);
+        buttonYes.onClick = ()=> { closeMenu(); yesCallback && yesCallback(); }; 
+        confirmMenu.addChild(buttonYes);
+        
+        // no button
+        const buttonNo = new UIButton(vec2(80,50), vec2(120,70), 'No');
+        buttonNo.textHeight = 40;
+        buttonNo.navigationIndex = 2;
+        buttonNo.navigationAutoSelect = true;
+        buttonNo.onClick = ()=> { closeMenu(); noCallback && noCallback(); };
+        confirmMenu.addChild(buttonNo);
+
+        // close menu and return to normal navigation
+        function closeMenu()
+        {
+            ASSERT(uiSystem.confirmDialog === confirmMenu);
+            confirmMenu.destroy();
+            uiSystem.confirmDialog = undefined;
+            uiSystem.navigationDirection = savedNavigationDirection;
+            inputClear();
+        }
     }
 }
 
@@ -9056,7 +9609,13 @@ class UIObject
         /** @property {number} - Override for text height */
         this.textHeight = undefined;
         /** @property {number} - Scale text to fit in the object */
-        this.textScale = uiSystem.defaultTextScale;
+        this.textFitScale = uiSystem.defaultTextFitScale;
+        /** @property {Vector2} - How much to offset the text shadow or undefined */
+        this.textShadow = undefined;
+        /** @property {number} - Color for text line drawing  */
+        this.textLineColor = uiSystem.defaultLineColor.copy();
+        /** @property {number} - Width for text line drawing */
+        this.textLineWidth = 0;
         /** @property {boolean} - Should this object be drawn */
         this.visible  = true;
         /** @property {Array<UIObject>} - A list of this object's children */
@@ -9082,16 +9641,17 @@ class UIObject
         /** @property {number} - Size of shadow blur */
         this.shadowBlur = uiSystem.defaultShadowBlur;
         /** @property {Vector2} - Offset of shadow blur */
-        this.shadowOffset = uiSystem.defaultShadowOffset.copy();
-        uiSystem.uiObjects.push(this);
+        this.shadowOffset = uiSystem.defaultShadowOffset?.copy();
+        /** @property {number} - Optional navigation order index, lower values are selected first */
+        this.navigationIndex = undefined;
+        /** @property {boolean} - Should this be auto selected by navigation? Must also have valid navigation index. */
+        this.navigationAutoSelect = false;
         
-        /** @property {Vector2} - How much to offset the text shadow or undefined */
-        this.textShadow = undefined;
+        uiSystem.uiObjects.push(this);
     }
 
     /** Add a child UIObject to this object
-     *  @param {UIObject} child
-     */
+     *  @param {UIObject} child */
     addChild(child)
     {
         ASSERT(!child.parent && !this.children.includes(child));
@@ -9100,8 +9660,7 @@ class UIObject
     }
 
     /** Remove a child UIObject from this object
-     *  @param {UIObject} child
-     */
+     *  @param {UIObject} child */
     removeChild(child)
     {
         ASSERT(child.parent === this && this.children.includes(child));
@@ -9109,7 +9668,6 @@ class UIObject
         child.parent = undefined;
     }
 
-
     /** Destroy this object, destroy its children, detach its parent, and mark it for removal */
     destroy()
     {
@@ -9125,9 +9683,9 @@ class UIObject
             child.destroy();
         }
     }
+
     /** Check if the mouse is overlapping a box in screen space
-     *  @return {boolean} - True if overlapping
-     */
+     *  @return {boolean} - True if overlapping */
     isMouseOverlapping()
     {
         if (!mouseInWindow) return false;
@@ -9144,11 +9702,16 @@ class UIObject
         // call the custom update callback
         this.onUpdate();
 
+        // unset active if disabled
+        if (this.disabled && this == uiSystem.activeObject)
+            uiSystem.activeObject = undefined;
+
         const wasHover = uiSystem.lastHoverObject === this;
         const isActive = this.isActiveObject();
         const mouseDown = mouseIsDown(0);
         const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
         if (this.canBeHover)
+        if (!uiSystem.navigationMode) // no mouse hover in navigation mode
         if (mousePress || isActive || (!mouseDown && !isTouchDevice))
         if (!uiSystem.hoverObject && this.isMouseOverlapping())
             uiSystem.hoverObject = this;
@@ -9162,8 +9725,7 @@ class UIObject
                     {
                         if (!this.dragActivate || (!wasHover || mouseWasPressed(0)))
                             this.onPress();
-                        if (this.soundPress)
-                            this.soundPress.play();
+                        this.soundPress && this.soundPress.play();
                         if (uiSystem.activeObject && !isActive)
                             uiSystem.activeObject.onRelease();
                         uiSystem.activeObject = this;
@@ -9172,10 +9734,10 @@ class UIObject
                 if (!mouseDown && this.isActiveObject() && this.interactive)
                 {
                     this.onClick();
-                    if (this.soundClick)
-                        this.soundClick.play();
+                    this.soundClick && this.soundClick.play();
                 }
             }
+
             // clear mouse was pressed state even when disabled
             mousePress && inputClearKey(0,0,0,1,0);
         }
@@ -9183,8 +9745,7 @@ class UIObject
         if (!mouseDown || (this.dragActivate && !this.isHoverObject()))
         {
             this.onRelease();
-            if (this.soundRelease)
-                this.soundRelease.play();
+            this.soundRelease && this.soundRelease.play();
             uiSystem.activeObject = undefined;
         }
 
@@ -9196,29 +9757,40 @@ class UIObject
     /** Render the object, called automatically by plugin once each frame */
     render()
     {
-        if (!this.size.x || !this.size.y) return;
+        // call the custom render callback
+        this.onRender();
 
-        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, this.gradientColor, this.shadowColor, this.shadowBlur, this.shadowOffset);
-    }
+        if (!this.size.x || !this.size.y) return;
 
-    /** Special update when object is not visible */
-    updateInvisible()
-    {
-        // reset input state when not visible
-        if (this.isActiveObject())
-            uiSystem.activeObject = undefined;
+        const isNavigationObject = this.isNavigationObject();
+        const lineColor = isNavigationObject ? this.color :
+            this.interactive && this.isActiveObject() && !this.disabled ?
+            this.color : this.lineColor;
+        const color = isNavigationObject ? this.hoverColor :
+            this.disabled ? this.disabledColor : 
+            this.interactive ? 
+                this.isHoverObject() ? this.hoverColor : 
+                this.isActiveObject() ? this.activeColor || this.color : 
+                this.color : this.color;
+        const lineWidth = this.lineWidth * (isNavigationObject ? 1.5 : 1);
+        
+        uiSystem.drawRect(this.pos, this.size, color, lineWidth, lineColor, this.cornerRadius, this.gradientColor, this.shadowColor, this.shadowBlur, this.shadowOffset);
     }
 
     /** Get the size for text with overrides and scale
-     *  @return {Vector2}
-     */
+     *  @return {Vector2} */
     getTextSize()
     {
         return vec2(
-            this.textWidth  || this.textScale * this.size.x, 
-            this.textHeight || this.textScale * this.size.y);
+            this.textWidth  || this.textFitScale * this.size.x, 
+            this.textHeight || this.textFitScale * this.size.y);
+    }
+
+    /** Called when the navigation button is pressed on this object */
+    navigatePressed()
+    {
+        this.onClick();
+        this.soundClick && this.soundClick.play();
     }
 
     /** @return {boolean} - Is the mouse hovering over this element */
@@ -9227,9 +9799,51 @@ class UIObject
     /** @return {boolean} - Is the mouse held onto this element */
     isActiveObject() { return uiSystem.activeObject === this; }
 
-    /** Called each frame when object updates */
+    /** @return {boolean} - Is the gamepad or keyboard navigation object */
+    isNavigationObject() { return uiSystem.navigationObject === this; }
+
+    /** @return {boolean} - Can it be interacted with */
+    isInteractive() { return this.interactive && this.visible && !this.disabled;}
+
+    /** Returns string containing info about this object for debugging
+     *  @return {string} */
+    toString()
+    {
+        if (!debug) return;
+        
+        let text = 'type = ' + this.constructor.name;
+        if (this.text)
+            text += '\ntext = ' + this.text;
+        if (this.pos.x || this.pos.y)
+            text += '\npos = ' + this.pos;
+        if (this.localPos.x || this.localPos.y)
+            text += '\localPos = ' + this.localPos;
+        if (this.size.x || this.size.y)
+            text += '\nsize = ' + this.size;
+        if (this.color)
+            text += '\ncolor = ' + this.color;
+        return text;
+    }
+
+    /** Called if uiDebug is enabled
+     *  @param {boolean} visible */
+    renderDebug(visible=true)
+    {
+        // apply color based on state
+        const color = 
+            !visible ? GREEN :
+            this.isHoverObject() ? YELLOW : 
+            this.disabled ? PURPLE :
+            this.interactive ? RED : BLUE;
+        uiSystem.drawRect(this.pos, this.size, CLEAR_BLACK, 4, color);
+    }
+
+    /** Called each frame before object updates */
     onUpdate() {}
 
+    /** Called each frame before object renders */
+    onRender() {}
+
     /** Called when the mouse enters the object */
     onEnter() {}
 
@@ -9277,16 +9891,25 @@ class UIText extends UIObject
         this.align = align;
         this.font = font;
 
-        // make text not outlined by default
-        this.lineWidth = 0;
         // text can not be a hover object by default
         this.canBeHover = false;
+        
+        // no background by default
+        this.color = CLEAR_BLACK;
+        this.shadowColor = CLEAR_BLACK;
+        this.gradientColor = undefined;
+        this.lineWidth = 0;
+
+        // use max fit scale by default
+        this.textFitScale = 1;
     }
     render()
     {
-        // only render the text
+        super.render();
+
+        // 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, true, this.textShadow);
+        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.textLineWidth, this.textLineColor, this.align, this.font, this.fontStyle, true, this.textShadow, this.shadowColor, this.shadowBlur, this.shadowOffset);
     }
 }
 
@@ -9322,10 +9945,13 @@ class UITile extends UIObject
         this.mirror = mirror;
         // set properties
         this.color = color.copy();
+
+        // no shadow by default
+        this.shadowColor = CLEAR_BLACK;
     }
     render()
     {
-        uiSystem.drawTile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror);
+        uiSystem.drawTile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror, this.shadowColor, this.shadowBlur, this.shadowOffset);
     }
 }
 
@@ -9350,6 +9976,9 @@ class UIButton extends UIObject
         ASSERT(isString(text), 'ui button must be a string');
         ASSERT(isColor(color), 'ui button color must be a color');
 
+        /** @property {Vector2} - Text offset for the button */
+        this.textOffset = vec2();
+
         // set properties
         this.text = text;
         this.color = color.copy();
@@ -9361,8 +9990,8 @@ 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, true, this.textShadow);
+        uiSystem.drawText(this.text, this.pos.add(this.textOffset), textSize, 
+            this.textColor, this.textLineWidth, this.textLineColor, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
 }
 
@@ -9416,7 +10045,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.textShadow);
+            this.textColor, this.textLineWidth, this.textLineColor, 'left', this.font, this.fontStyle, false, this.textShadow);
     }
 }
 
@@ -9458,7 +10087,11 @@ class UIScrollbar extends UIObject
     update()
     {
         super.update();
-        if (this.isActiveObject() && this.interactive)
+        if (!this.interactive)
+            return;
+
+        const oldValue = this.value;
+        if (this.isActiveObject())
         {
             // handle horizontal or vertical scrollbar
             const isHorizontal = this.size.x > this.size.y;
@@ -9470,14 +10103,19 @@ class UIScrollbar extends UIObject
             const handleWidth = barSize - handleSize;
             const p1 = centerPos - handleWidth/2;
             const p2 = centerPos + handleWidth/2;
-            const oldValue = this.value;
-
             const p = uiSystem.screenToNative(mousePosScreen);
             this.value = isHorizontal ? 
                 percent(p.x, p1, p2) :
                 percent(p.y, p2, p1);
-            this.value === oldValue || this.onChange();
         }
+        else if (this.isNavigationObject())
+        {
+            // gamepad/keyboard navigation adjustment
+            const direction = uiSystem.getNavigationOtherDirection();
+            if (!uiSystem.navigationTimer.active())
+                this.value = clamp(this.value + direction*.01);
+        }
+        this.value === oldValue || this.onChange();
     }
     render()
     {
@@ -9502,7 +10140,14 @@ class UIScrollbar extends UIObject
         // 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, true, this.textShadow);
+            this.textColor, this.textLineWidth, this.textLineColor, this.align, this.font, this.fontStyle, true, this.textShadow);
+    }
+    navigatePressed()
+    {
+        // toggle value between 0 and 1
+        this.value = this.value ? 0 : 1;
+        this.onRelease();
+        super.navigatePressed();
     }
 }
 
@@ -9536,7 +10181,7 @@ class UIVideo extends UIObject
         this.color = BLACK; // default to black background
         this.cornerRadius = 0; // default to no corner radius
 
-        /** @property {float} - The video volume */
+        /** @property {number} - The video volume */
         this.volume = volume;
 
         // create video element
@@ -9569,7 +10214,7 @@ class UIVideo extends UIObject
     
     /** Check if video is currently loading
      *  @return {boolean} */
-    isLoadng()
+    isLoading()
     { return this.video.readyState < this.video.HAVE_CURRENT_DATA; }
     
     /** Check if video is currently paused
@@ -9579,7 +10224,7 @@ class UIVideo extends UIObject
     /** Check if video is currently playing
      *  @return {boolean} */
     isPlaying()
-    { return !this.isPaused() && !this.hasEnded() && !this.isLoadng(); }
+    { return !this.isPaused() && !this.hasEnded() && !this.isLoading(); }
     
     /** Check if video has ended playing
      *  @return {boolean} */
@@ -9628,7 +10273,7 @@ class UIVideo extends UIObject
     {
         super.render();
 
-        if (this.isLoadng())
+        if (this.isLoading())
             return;
         const context = uiSystem.uiContext;
         const s = this.size;
@@ -11412,7 +12057,7 @@ class Box2dPlugin
      *  @param {Vector2} v */
     vec2dTo(v)
     {
-        ASSERT(v instanceof Vector2);
+        ASSERT(isVector2(v));
         return new box2d.instance.b2Vec2(v.x, v.y);
     }
 
@@ -11761,6 +12406,8 @@ export
 	canvasColorTiles,
 	canvasClearColor,
 	canvasMaxSize,
+	canvasMinAspect,
+	canvasMaxAspect,
 	canvasFixedSize,
 	canvasPixelated,
 	overlayCanvasPixelated,
@@ -11804,6 +12451,8 @@ export
 	setCanvasColorTiles,
 	setCanvasClearColor,
 	setCanvasMaxSize,
+	setCanvasMinAspect,
+	setCanvasMaxAspect,
 	setCanvasFixedSize,
 	setCanvasPixelated,
 	setOverlayCanvasPixelated,
@@ -11829,6 +12478,7 @@ export
 	setInputWASDEmulateDirection,
 	setTouchGamepadEnable,
 	setTouchGamepadCenterButton,
+	setTouchGamepadButtonCount,
 	setTouchGamepadAnalog,
 	setTouchGamepadSize,
 	setTouchGamepadAlpha,
@@ -12000,12 +12650,14 @@ export
 	mouseInWindow,
 	isUsingGamepad,
 	inputPreventDefault,
+	gamepadPrimary,
 	setInputPreventDefault,
 	gamepadIsDown,
 	gamepadWasPressed,
 	gamepadWasReleased,
 	gamepadStick,
-	gamepadsUpdate,
+	gamepadDpad,
+	gamepadConnected,
 	vibrate,
 	vibrateStop,
 	isTouchDevice,
@@ -12071,6 +12723,8 @@ export
 
     // UI System
     uiSystem,
+    uiDebug,
+    uiSetDebug,
     UISystemPlugin,
     UIObject,
     UIText,