littlejsengine 1.15.8 → 1.15.9

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.15.8';
+const engineVersion = '1.15.9';
 
 /** Frames per second to update
  *  @type {number}
@@ -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],.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 - Release Mode
@@ -2039,6 +2061,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}
@@ -2335,6 +2371,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 */
@@ -4423,6 +4469,16 @@ function gamepadConnected(gamepad=gamepadPrimary)
     return !!inputData[gamepad+1];
 }
 
+/** Returns how many control sticks the passed in gamepad has
+ *  @param {number} [gamepad]
+ *  @return {number}
+ *  @memberof Input */
+function gamepadStickCount(gamepad=gamepadPrimary)
+{
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return gamepadStickData[gamepad]?.length ?? 0;
+}
+
 /** True if a touch device has been detected
  *  @memberof Input */
 const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
@@ -4763,9 +4819,11 @@ function inputUpdate()
                 dpad.set(x, -y);
                 sticks[0] = dpad.clampLength(); // clamp to circle
             }
-            const rightTouchStick = touchGamepadSticks[1] ?? vec2();
             if (touchGamepadButtonCount === 1)
+            {
+                const rightTouchStick = touchGamepadSticks[1] ?? vec2();
                 sticks[1] = applyDeadZones(rightTouchStick);
+            }
 
             // read virtual gamepad buttons
             const data = inputData[1] ?? (inputData[1] = []);
@@ -5857,8 +5915,7 @@ class CanvasLayer extends EngineObject
     /** Destroy this canvas layer */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         this.textureInfo.destroyWebGLTexture();
         super.destroy();
@@ -6410,9 +6467,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;
 
@@ -6496,8 +6553,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);
         }
     }
 
@@ -6507,8 +6566,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)
@@ -8303,8 +8362,6 @@ class UISystemPlugin
         // navigation properties
         /** @property {UIObject} - Object currently selected by navigation (gamepad or keyboard) */
         this.navigationObject = undefined;
-        /** @property {number} - Gamepad index to use for UI navigation */
-        this.navigationGamepadIndex = 0;
         /** @property {Timer} - Cooldown timer for navigation inputs */
         this.navigationTimer = new Timer(undefined, true);
         /** @property {number} - Time between navigation inputs in seconds */
@@ -8712,9 +8769,8 @@ class UISystemPlugin
         const both = uiSystem.navigationDirection === 2;
         if (isUsingGamepad)
         {
-            const gamepad = this.navigationGamepadIndex;
-            const stick = gamepadStick(0, gamepad);
-            const dpad = gamepadDpad(gamepad);
+            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);
@@ -8740,9 +8796,8 @@ class UISystemPlugin
         const vertical = uiSystem.navigationDirection === 1;
         if (isUsingGamepad)
         {
-            const gamepad = this.navigationGamepadIndex;
-            const stick = gamepadStick(0, gamepad);
-            const dpad = gamepadDpad(gamepad);
+            const stick = gamepadStick(0, gamepadPrimary);
+            const dpad = gamepadDpad(gamepadPrimary);
             return !vertical ? (stick.y || dpad.y) : (stick.x || dpad.x);
         }
         const back = !vertical ? 'ArrowUp' : 'ArrowLeft';
@@ -8754,8 +8809,7 @@ class UISystemPlugin
      *  @return {boolean} */
     getNavigationWasPressed()
     {
-        const gamepad = this.navigationGamepadIndex;
-        return isUsingGamepad ? gamepadWasPressed(0, gamepad) : 
+        return isUsingGamepad ? gamepadWasPressed(0, gamepadPrimary) : 
             keyWasPressed('Space') || keyWasPressed('Enter');
     }
         

package/examples/box2d/game.js

@@ -104,7 +104,7 @@ function gameUpdate()
     }
 
     // controls
-    if (LJS.mouseIsDown(1) || LJS.mouseIsDown('KeyZ'))
+    if (LJS.mouseIsDown(1) || LJS.keyIsDown('KeyZ'))
     {
         const isSet = repeatSpawnTimer.isSet();
         if (!isSet || repeatSpawnTimer.elapsed())

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.15.8></script>
+<script src=../../dist/littlejs.js?1.15.9></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.15.8></script>
+<script src=game.js?1.15.9></script>

package/examples/platformer/game.js

@@ -24,6 +24,13 @@ export function addToDeaths() { ++deaths; }
 // enable touch gamepad on touch devices
 LJS.setTouchGamepadEnable(true);
 
+// limit canvas aspect ratios to support most modern HD devices
+LJS.setCanvasMinAspect(.4);
+LJS.setCanvasMaxAspect(2.5);
+
+// limit size to to 4k HD
+LJS.setCanvasMaxSize(vec2(3840, 2160));
+
 ///////////////////////////////////////////////////////////////////////////////
 function loadLevel()
 {

package/examples/shorts/base.html

@@ -1,10 +1,9 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.15.8></script>
+<script src=../../dist/littlejs.js?1.15.9></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source
 <script src=../../src/engine.js></script>
-<script src=../../src/engineSplash.js></script>
 <script src=../../src/engineDebug.js></script>
 <script src=../../src/engineUtilities.js></script>
 <script src=../../src/engineSettings.js></script>

package/examples/shorts/uiSystem.js

@@ -13,7 +13,7 @@ function gameInit()
     canvasClearColor = hsl(0,0,.8);
 
     // example text
-    uiMenu.addChild(new UIText(vec2(-80,-120), vec2(500, 80),
+    uiMenu.addChild(new UIText(vec2(-80,-120), vec2(400, 80),
         'LittleJS UI\nSystem Demo'));
 
     // example image