littlejsengine 1.18.0 → 1.18.1

package/dist/littlejs.release.js

@@ -35,7 +35,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.18.0';
+const engineVersion = '1.18.1';
 
 /** Frames per second to update
  *  @type {number}
@@ -318,12 +318,17 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         }
         else
         {
+            // apply device pixel ratio for crisp rendering
+            const dpr = canvasPixelRatio ?? (devicePixelRatio || 1);
+            const viewWidth = innerWidth * dpr | 0;
+            const viewHeight = innerHeight * dpr | 0;
+            
             // get main canvas size based on window size
-            mainCanvasSize.x = min(innerWidth,  canvasMaxSize.x);
-            mainCanvasSize.y = min(innerHeight, canvasMaxSize.y);
+            mainCanvasSize.x = min(viewWidth,  canvasMaxSize.x);
+            mainCanvasSize.y = min(viewHeight, canvasMaxSize.y);
             
             // responsive aspect ratio with native resolution
-            const innerAspect = innerWidth / innerHeight;
+            const innerAspect = viewWidth / viewHeight;
             ASSERT(canvasMinAspect <= canvasMaxAspect);
             if (canvasMaxAspect && innerAspect > canvasMaxAspect)
             {
@@ -337,6 +342,17 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 const h = mainCanvasSize.x / canvasMinAspect | 0;
                 mainCanvasSize.y = min(h, canvasMaxSize.y);
             }
+
+            // set CSS display size so backing store renders at viewport size
+            const cssW = (mainCanvasSize.x / dpr | 0) + 'px';
+            const cssH = (mainCanvasSize.y / dpr | 0) + 'px';
+            mainCanvas.style.width  = cssW;
+            mainCanvas.style.height = cssH;
+            if (glCanvas)
+            {
+                glCanvas.style.width  = cssW;
+                glCanvas.style.height = cssH;
+            }
         }
 
         // clear main canvas and set size
@@ -556,8 +572,9 @@ function drawEngineLogo(t)
 
     // LittleJS Logo and Splash Screen
     const x = mainContext;
-    const w = mainCanvas.width = innerWidth;
-    const h = mainCanvas.height = innerHeight;
+    const dpr = canvasPixelRatio ?? (devicePixelRatio || 1);
+    const w = mainCanvas.width = innerWidth * dpr;
+    const h = mainCanvas.height = innerHeight * dpr;
     {
         // background
         const p3 = percent(t, 1, .8);
@@ -1054,7 +1071,7 @@ function lineTest(posStart, posEnd, testFunction, normal)
     // get ray direction and length
     const dx = posEnd.x - posStart.x;
     const dy = posEnd.y - posStart.y;
-    const totalLength = hypot(dx, dy);
+    const totalLength = (dx*dx + dy*dy)**.5;
     if (!totalLength) return;
 
     // current integer cell we are in
@@ -2158,6 +2175,13 @@ let canvasPixelated = false;
  *  @memberof Settings */
 let tilesPixelated = true;
 
+/** Scale factor applied to the canvas backing store for native-resolution rendering.
+ *  Pass 1 for no scaling, a number for an explicit ratio, or undefined to track devicePixelRatio each frame.
+ *  @type {number|undefined}
+ *  @default
+ *  @memberof Settings */
+let canvasPixelRatio = 1;
+
 /** Default font used for text rendering
  *  @type {string}
  *  @default
@@ -2470,6 +2494,12 @@ function setCanvasPixelated(pixelated)
  *  @memberof Settings */
 function setTilesPixelated(pixelated) { tilesPixelated = pixelated; }
 
+/** Set the canvas pixel ratio.
+ *  Pass a number for an explicit ratio, or call with no argument to track devicePixelRatio each frame.
+ *  @param {number} [pixelRatio]
+ *  @memberof Settings */
+function setCanvasPixelRatio(pixelRatio) { canvasPixelRatio = pixelRatio; }
+
 /** Set default font used for text rendering
  *  @param {string} font
  *  @memberof Settings */
@@ -2892,10 +2922,10 @@ class EngineObject
                     // if already was touching, try to push away
                     const deltaPos = oldPos.subtract(o.pos);
                     const length = deltaPos.length();
-                    const pushAwayAccel = .001; // push away if already overlapping
-                    const velocity = length < .01 ? randVec2(pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
+                    const pushAwayAccel = .001;
+                    const velocity = length < .001 ? vec2(0,1) : deltaPos.scale(pushAwayAccel/length);
                     this.velocity = this.velocity.add(velocity);
-                    if (o.mass) // push away if not fixed
+                    if (o.mass) // push away other object if not fixed
                         o.velocity = o.velocity.subtract(velocity);
 
                     debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');
@@ -3324,6 +3354,7 @@ function tile(index=new Vector2, size=tileDefaultSize, texture=0, padding=tileDe
     const textureInfo = typeof texture === 'number' ?
         textureInfos[texture] : texture;
     ASSERT(textureInfo instanceof TextureInfo, 'tile texture is not loaded');
+    ASSERT(textureInfo.size.x > 0, 'tile texture is not loaded');
 
     // get the position of the tile
     const sizePaddedX = size.x + padding*2;
@@ -4686,7 +4717,7 @@ function inputInit()
     document.addEventListener('mouseup', onMouseUp);
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseleave', onMouseLeave);
-    document.addEventListener('wheel', onMouseWheel);
+    document.addEventListener('wheel', onMouseWheel, { passive: false });
     document.addEventListener('contextmenu', onContextMenu);
     document.addEventListener('blur', onBlur);
 
@@ -4705,7 +4736,7 @@ function inputInit()
         }
 
         // try to prevent default browser handling of input
-        if (!inputPreventDefault || !document.hasFocus() || !e.cancelable) return;
+        if (!inputPreventDefault || !e.cancelable || !document.hasFocus()) return;
 
         // don't break browser shortcuts
         if (e.ctrlKey || e.metaKey || e.altKey) return;
@@ -4764,7 +4795,7 @@ function inputInit()
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
         mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
 
-        if (inputPreventDefault && document.hasFocus() && e.cancelable)
+        if (inputPreventDefault && e.cancelable && document.hasFocus())
             e.preventDefault();
     }
     function onMouseUp(e)
@@ -4786,7 +4817,12 @@ function inputInit()
         mouseDeltaScreen = mouseDeltaScreen.add(movement);
     }
     function onMouseLeave() { mouseInWindow = false; } // mouse moved off window
-    function onMouseWheel(e) { mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY); }
+    function onMouseWheel(e) 
+    { 
+        mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
+        if (inputPreventDefault && e.cancelable && document.hasFocus())
+            e.preventDefault(); // prevent page scrolling
+    }
     function onContextMenu(e) { e.preventDefault(); } // prevent right click menu
     function onBlur() { inputClear(); } // reset input when focus is lost
 
@@ -4836,7 +4872,7 @@ function inputInit()
             wasTouching = touching;
 
             // prevent default handling like copy, magnifier lens, and scrolling
-            if (inputPreventDefault && document.hasFocus() && e.cancelable)
+            if (inputPreventDefault && e.cancelable && document.hasFocus())
                 e.preventDefault();
 
             // must return true so the document will get focus
@@ -4994,7 +5030,13 @@ function inputUpdate()
         }
 
         // return if gamepads are disabled or not supported
-        if (!gamepadsEnable || !navigator || !navigator.getGamepads) return;
+        try {
+            // protect against getGamepads disallowed security error 
+            if (!gamepadsEnable || !navigator?.getGamepads)
+                return;
+        } catch(e) {
+            return;
+        }
 
         // only poll gamepads when focused or in debug mode
         if (!debug && !document.hasFocus()) return;

package/examples/box2d/game.js

@@ -24,7 +24,7 @@ LJS.setTilesPixelated(false);
 ///////////////////////////////////////////////////////////////////////////////
 // game variables
 
-const maxScenes = 11;
+const sceneCount = 12;
 const startScene = 0;
 export let spriteAtlas, groundObject, mouseJoint, repeatSpawnTimer = new LJS.Timer;
 const sound_click = new LJS.Sound([.2,.1,,,,.01,,,,,,,,,,,,,,,-500]);
@@ -125,7 +125,7 @@ function gameUpdate()
     {
         // change scene
         const upPressed = LJS.keyWasPressed('ArrowUp');
-        setScene(LJS.mod(Scenes.scene + (upPressed?1:-1), maxScenes));
+        setScene(LJS.mod(Scenes.scene + (upPressed?1:-1), sceneCount));
     }
 }
 

package/examples/box2d/gameObjects.js

@@ -446,6 +446,80 @@ export class ClothObject extends LJS.Box2dStaticObject
     }
 }
 
+///////////////////////////////////////////////////////////////////////////////
+
+// ragdoll with head, arms, and legs connected to torso by revolute joints
+export class RagdollObject extends LJS.Box2dObject
+{
+    constructor(pos, scale=1, color=LJS.randColor())
+    {
+        const headSize    = .8  * scale;
+        const torsoWidth  = 1.2 * scale;
+        const torsoHeight = 2   * scale;
+        const limbWidth   = .4  * scale;
+        const upperArmLen = 1   * scale;
+        const lowerArmLen = 1   * scale;
+        const upperLegLen = 1.1 * scale;
+        const lowerLegLen = 1.1 * scale;
+
+        // torso is the main body
+        super(pos, vec2(torsoWidth, torsoHeight), 0, 0, color);
+        this.addBox(vec2(torsoWidth, torsoHeight), vec2(), 0, density, friction, restitution);
+        this.limbs = [];
+
+        const addLimb = (offset, size, isCircle=false) =>
+        {
+            const o = new LJS.Box2dObject(pos.add(offset), size, 0, 0, color);
+            if (isCircle)
+                o.addCircle(size.x, vec2(), density, friction, restitution);
+            else
+                o.addBox(size, vec2(), 0, density, friction, restitution);
+            this.limbs.push(o);
+            return o;
+        };
+        const addJoint = (a, b, anchor, lower, upper) =>
+        {
+            const joint = new LJS.Box2dRevoluteJoint(a, b, anchor);
+            joint.enableLimit();
+            joint.setLimits(lower, upper);
+        };
+
+        // head
+        const head = addLimb(vec2(0, torsoHeight/2 + headSize/2 + .1*scale), vec2(headSize), true);
+        addJoint(this, head, pos.add(vec2(0, torsoHeight/2)), -.5, .5);
+
+        // arms
+        const shoulderY = torsoHeight/2 - .2*scale;
+        for (const side of [-1, 1])
+        {
+            const shoulder = pos.add(vec2(side*torsoWidth/2, shoulderY));
+            const upperArm = addLimb(vec2(side*(torsoWidth/2 + upperArmLen/2), shoulderY), vec2(upperArmLen, limbWidth));
+            addJoint(this, upperArm, shoulder, -2, 2);
+
+            const elbow = shoulder.add(vec2(side*upperArmLen, 0));
+            const lowerArm = addLimb(vec2(side*(torsoWidth/2 + upperArmLen + lowerArmLen/2), shoulderY), vec2(lowerArmLen, limbWidth));
+            addJoint(upperArm, lowerArm, elbow, -2.5, 2.5);
+        }
+
+        // legs
+        for (const side of [-1, 1])
+        {
+            const hip = pos.add(vec2(side*torsoWidth/4, -torsoHeight/2));
+            const upperLeg = addLimb(vec2(side*torsoWidth/4, -torsoHeight/2 - upperLegLen/2), vec2(limbWidth, upperLegLen));
+            addJoint(this, upperLeg, hip, -.5, 2.5);
+
+            const knee = hip.add(vec2(0, -upperLegLen));
+            const lowerLeg = addLimb(vec2(side*torsoWidth/4, -torsoHeight/2 - upperLegLen - lowerLegLen/2), vec2(limbWidth, lowerLegLen));
+            addJoint(upperLeg, lowerLeg, knee, -2.5, 2.5);
+        }
+    }
+    destroy()
+    {
+        this.limbs.forEach(o => o.destroy());
+        super.destroy();
+    }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Effects
 

package/examples/box2d/scenes.js

@@ -184,4 +184,11 @@ export function loadScene(_scene)
         for (let i=3;i--;)
             new GameObjects.SoftBodyObject(vec2(20, 3+i*7), vec2(6-i), vec2(9-i), LJS.randColor());
     }
+    if (scene == 11)
+    {
+        sceneName = 'Ragdolls';
+        new GameObjects.RagdollObject(vec2(20,5));
+        new GameObjects.RagdollObject(vec2(10,8), 2);
+        GameObjects.spawnPyramid(vec2(30,0), 6);
+    }
 }

package/examples/shorts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.18.0></script>
+<script src=../../dist/littlejs.js?1.18.1></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source

package/examples/starter/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.18.0></script>
+<script src=../../dist/littlejs.js?1.18.1></script>
 
 <!-- LittleJS Engine Source
 <script src=../../src/engine.js></script>
@@ -32,4 +32,4 @@
 -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.18.0></script>
+<script src=game.js?1.18.1></script>

package/examples/stress/index.html

@@ -69,7 +69,7 @@ function gameUpdate()
     
     // right click = drop test object
     if (LJS.mouseIsDown(2))
-        new TestObject(LJS.mousePos);
+        new TestObject(LJS.mousePos.add(LJS.randInCircle()));
 
     // mouse hold = add objects
     if (LJS.mouseIsDown(0))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/src/engine.js

@@ -32,7 +32,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.18.0';
+const engineVersion = '1.18.1';
 
 /** Frames per second to update
  *  @type {number}
@@ -315,12 +315,17 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         }
         else
         {
+            // apply device pixel ratio for crisp rendering
+            const dpr = canvasPixelRatio ?? (devicePixelRatio || 1);
+            const viewWidth = innerWidth * dpr | 0;
+            const viewHeight = innerHeight * dpr | 0;
+            
             // get main canvas size based on window size
-            mainCanvasSize.x = min(innerWidth,  canvasMaxSize.x);
-            mainCanvasSize.y = min(innerHeight, canvasMaxSize.y);
+            mainCanvasSize.x = min(viewWidth,  canvasMaxSize.x);
+            mainCanvasSize.y = min(viewHeight, canvasMaxSize.y);
             
             // responsive aspect ratio with native resolution
-            const innerAspect = innerWidth / innerHeight;
+            const innerAspect = viewWidth / viewHeight;
             ASSERT(canvasMinAspect <= canvasMaxAspect);
             if (canvasMaxAspect && innerAspect > canvasMaxAspect)
             {
@@ -334,6 +339,17 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 const h = mainCanvasSize.x / canvasMinAspect | 0;
                 mainCanvasSize.y = min(h, canvasMaxSize.y);
             }
+
+            // set CSS display size so backing store renders at viewport size
+            const cssW = (mainCanvasSize.x / dpr | 0) + 'px';
+            const cssH = (mainCanvasSize.y / dpr | 0) + 'px';
+            mainCanvas.style.width  = cssW;
+            mainCanvas.style.height = cssH;
+            if (glCanvas)
+            {
+                glCanvas.style.width  = cssW;
+                glCanvas.style.height = cssH;
+            }
         }
 
         // clear main canvas and set size
@@ -553,8 +569,9 @@ function drawEngineLogo(t)
 
     // LittleJS Logo and Splash Screen
     const x = mainContext;
-    const w = mainCanvas.width = innerWidth;
-    const h = mainCanvas.height = innerHeight;
+    const dpr = canvasPixelRatio ?? (devicePixelRatio || 1);
+    const w = mainCanvas.width = innerWidth * dpr;
+    const h = mainCanvas.height = innerHeight * dpr;
     {
         // background
         const p3 = percent(t, 1, .8);

package/src/engineBuild.mjs

@@ -61,7 +61,7 @@ const license = '// LittleJS Engine - MIT License - Copyright 2021 Frank Force\n
                 '// https://github.com/KilledByAPixel/LittleJS\n\n';
 
 console.log(asciiArt);
-console.log('🚂 Choo Choo... Building LittleJS Engine!');
+console.log('Choo Choo... Building LittleJS Engine!');
 const startTime = Date.now();
 
 try

package/src/engineDebug.js

@@ -266,6 +266,8 @@ function debugShowErrors()
 
 function debugInit()
 {
+    if (showEngineVersion)
+        console.warn("LittleJS DEBUG build loaded. Use the release build for production.");
 }
 
 function debugUpdate()

package/src/engineDraw.js

@@ -110,6 +110,7 @@ function tile(index=new Vector2, size=tileDefaultSize, texture=0, padding=tileDe
     const textureInfo = typeof texture === 'number' ?
         textureInfos[texture] : texture;
     ASSERT(textureInfo instanceof TextureInfo, 'tile texture is not loaded');
+    ASSERT(textureInfo.size.x > 0, 'tile texture is not loaded');
 
     // get the position of the tile
     const sizePaddedX = size.x + padding*2;

package/src/engineExport.js

@@ -59,6 +59,7 @@ export
     canvasFixedSize,
     canvasPixelated,
     tilesPixelated,
+    canvasPixelRatio,
     fontDefault,
     showSplashScreen,
     headlessMode,
@@ -105,6 +106,7 @@ export
     setCanvasFixedSize,
     setCanvasPixelated,
     setTilesPixelated,
+    setCanvasPixelRatio,
     setFontDefault,
     setShowSplashScreen,
     setHeadlessMode,

package/src/engineInput.js

@@ -321,7 +321,7 @@ function inputInit()
     document.addEventListener('mouseup', onMouseUp);
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseleave', onMouseLeave);
-    document.addEventListener('wheel', onMouseWheel);
+    document.addEventListener('wheel', onMouseWheel, { passive: false });
     document.addEventListener('contextmenu', onContextMenu);
     document.addEventListener('blur', onBlur);
 
@@ -340,7 +340,7 @@ function inputInit()
         }
 
         // try to prevent default browser handling of input
-        if (!inputPreventDefault || !document.hasFocus() || !e.cancelable) return;
+        if (!inputPreventDefault || !e.cancelable || !document.hasFocus()) return;
 
         // don't break browser shortcuts
         if (e.ctrlKey || e.metaKey || e.altKey) return;
@@ -399,7 +399,7 @@ function inputInit()
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
         mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
 
-        if (inputPreventDefault && document.hasFocus() && e.cancelable)
+        if (inputPreventDefault && e.cancelable && document.hasFocus())
             e.preventDefault();
     }
     function onMouseUp(e)
@@ -421,7 +421,12 @@ function inputInit()
         mouseDeltaScreen = mouseDeltaScreen.add(movement);
     }
     function onMouseLeave() { mouseInWindow = false; } // mouse moved off window
-    function onMouseWheel(e) { mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY); }
+    function onMouseWheel(e) 
+    { 
+        mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
+        if (inputPreventDefault && e.cancelable && document.hasFocus())
+            e.preventDefault(); // prevent page scrolling
+    }
     function onContextMenu(e) { e.preventDefault(); } // prevent right click menu
     function onBlur() { inputClear(); } // reset input when focus is lost
 
@@ -471,7 +476,7 @@ function inputInit()
             wasTouching = touching;
 
             // prevent default handling like copy, magnifier lens, and scrolling
-            if (inputPreventDefault && document.hasFocus() && e.cancelable)
+            if (inputPreventDefault && e.cancelable && document.hasFocus())
                 e.preventDefault();
 
             // must return true so the document will get focus
@@ -629,7 +634,13 @@ function inputUpdate()
         }
 
         // return if gamepads are disabled or not supported
-        if (!gamepadsEnable || !navigator || !navigator.getGamepads) return;
+        try {
+            // protect against getGamepads disallowed security error 
+            if (!gamepadsEnable || !navigator?.getGamepads)
+                return;
+        } catch(e) {
+            return;
+        }
 
         // only poll gamepads when focused or in debug mode
         if (!debug && !document.hasFocus()) return;

package/src/engineMath.js

@@ -327,7 +327,7 @@ function lineTest(posStart, posEnd, testFunction, normal)
     // get ray direction and length
     const dx = posEnd.x - posStart.x;
     const dy = posEnd.y - posStart.y;
-    const totalLength = hypot(dx, dy);
+    const totalLength = (dx*dx + dy*dy)**.5;
     if (!totalLength) return;
 
     // current integer cell we are in

package/src/engineObject.js

@@ -212,10 +212,10 @@ class EngineObject
                     // if already was touching, try to push away
                     const deltaPos = oldPos.subtract(o.pos);
                     const length = deltaPos.length();
-                    const pushAwayAccel = .001; // push away if already overlapping
-                    const velocity = length < .01 ? randVec2(pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
+                    const pushAwayAccel = .001;
+                    const velocity = length < .001 ? vec2(0,1) : deltaPos.scale(pushAwayAccel/length);
                     this.velocity = this.velocity.add(velocity);
-                    if (o.mass) // push away if not fixed
+                    if (o.mass) // push away other object if not fixed
                         o.velocity = o.velocity.subtract(velocity);
 
                     debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');

package/src/engineSettings.js

@@ -82,6 +82,13 @@ let canvasPixelated = false;
  *  @memberof Settings */
 let tilesPixelated = true;
 
+/** Scale factor applied to the canvas backing store for native-resolution rendering.
+ *  Pass 1 for no scaling, a number for an explicit ratio, or undefined to track devicePixelRatio each frame.
+ *  @type {number|undefined}
+ *  @default
+ *  @memberof Settings */
+let canvasPixelRatio = 1;
+
 /** Default font used for text rendering
  *  @type {string}
  *  @default
@@ -394,6 +401,12 @@ function setCanvasPixelated(pixelated)
  *  @memberof Settings */
 function setTilesPixelated(pixelated) { tilesPixelated = pixelated; }
 
+/** Set the canvas pixel ratio.
+ *  Pass a number for an explicit ratio, or call with no argument to track devicePixelRatio each frame.
+ *  @param {number} [pixelRatio]
+ *  @memberof Settings */
+function setCanvasPixelRatio(pixelRatio) { canvasPixelRatio = pixelRatio; }
+
 /** Set default font used for text rendering
  *  @param {string} font
  *  @memberof Settings */