littlejsengine 1.15.3 → 1.15.9

package/src/engine.js

@@ -30,7 +30,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}
@@ -276,7 +276,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 o.destroyed || o.render();
             gameRenderPost();
             pluginList.forEach(plugin=>plugin.render?.());
-            touchGamepadRender();
+            inputRender();
             debugRender();
             glFlush();
             debugVideoCaptureUpdate();
@@ -305,23 +305,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)
         {
@@ -330,13 +355,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;
@@ -360,7 +378,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);
@@ -377,7 +395,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;
@@ -441,9 +460,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()
 {
@@ -495,18 +681,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);
@@ -549,171 +738,4 @@ 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();
 }

package/src/engineDebug.js

@@ -194,7 +194,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]
@@ -352,34 +352,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);
             }
         }
     }
@@ -561,14 +573,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
         {

package/src/engineDraw.js

@@ -151,7 +151,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;
     }
 
@@ -638,7 +638,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)]
@@ -665,7 +665,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)]
@@ -684,7 +684,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)]
@@ -849,11 +849,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]
@@ -1017,7 +1034,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]
@@ -1029,7 +1046,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]
@@ -1038,7 +1055,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]