littlejsengine 1.17.15 → 1.18.1

package/plugins/box2d.js

@@ -119,7 +119,7 @@ class Box2dObject extends EngineObject
         // draw non-edge fixtures
         this.getFixtureList().forEach((fixture)=>
         {
-            const shape = box2d.castObjectType(fixture.GetShape());
+            const shape = box2d.castShapeObject(fixture.GetShape());
             if (shape.GetType() !== box2d.instance.b2Shape.e_edge)
             {
                 box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, useWebGL, context);
@@ -759,7 +759,7 @@ class Box2dJoint
     constructor(jointDef)
     {
         /** @property {Object} - The Box2d joint */
-        this.box2dJoint = box2d.castObjectType(box2d.world.CreateJoint(jointDef));
+        this.box2dJoint = box2d.castJointObject(box2d.world.CreateJoint(jointDef));
     }
 
     /** Destroy this joint */
@@ -1044,7 +1044,7 @@ class Box2dRevoluteJoint extends Box2dJoint
 
     /** Enable/disable the joint limit
      *  @param {boolean} [enable] */
-    enableLimit(enable=true) { return this.box2dJoint.enableLimit(enable); }
+    enableLimit(enable=true) { return this.box2dJoint.EnableLimit(enable); }
 
     /** Get the lower joint limit
      *  @return {number} */
@@ -1202,7 +1202,7 @@ class Box2dPrismaticJoint extends Box2dJoint
     
     /** Enable/disable the joint limit
      *  @param {boolean} [enable] */
-    enableLimit(enable=true) { return this.box2dJoint.enableLimit(enable); }
+    enableLimit(enable=true) { return this.box2dJoint.EnableLimit(enable); }
     
     /** Get the lower joint limit
      *  @return {number} */
@@ -1816,7 +1816,7 @@ class Box2dPlugin
      *  @param {CanvasRenderingContext2D} [context] */
     drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, useWebgl, context)
     {
-        const shape = box2d.castObjectType(fixture.GetShape());
+        const shape = box2d.castShapeObject(fixture.GetShape());
         switch (shape.GetType())
         {
             case box2d.instance.b2Shape.e_polygon:
@@ -1874,9 +1874,9 @@ class Box2dPlugin
      *  @param {Object} o */
     isNull(o) { return !box2d.instance.getPointer(o); }
 
-    /** casts a box2d object to its correct type
+    /** casts a box2d object to a shape type
      *  @param {Object} o */
-    castObjectType(o)
+    castShapeObject(o)
     {
         switch (o.GetType())
         {
@@ -1888,6 +1888,17 @@ class Box2dPlugin
                 return box2d.instance.castObject(o, box2d.instance.b2PolygonShape);
             case box2d.instance.b2Shape.e_chain:
                 return box2d.instance.castObject(o, box2d.instance.b2ChainShape);
+        }
+        
+        ASSERT(false, 'Unknown box2d object type');
+    }
+
+    /** casts a box2d object to a joint type
+     *  @param {Object} o */
+    castJointObject(o)
+    {
+        switch (o.GetType())
+        {
             case box2d.instance.e_revoluteJoint:
                 return box2d.instance.castObject(o, box2d.instance.b2RevoluteJoint);
             case box2d.instance.e_prismaticJoint:

package/plugins/pluginExport.js

@@ -27,7 +27,7 @@ export
     UITile,
     UIButton,
     UICheckbox,
-    UIScrollbar,
+    UISlider,
     UIVideo,
 
     // Box2D Physics

package/plugins/uiSystem.js

@@ -7,7 +7,7 @@
  * - Buttons
  * - Checkboxes
  * - Images
- * - Scrollbars
+ * - Sliders
  * - Video
  * @namespace UISystem
  */
@@ -1206,7 +1206,7 @@ class UICheckbox extends UIObject
         ASSERT(isString(text), 'ui checkbox must be a string');
         ASSERT(isColor(color), 'ui checkbox color must be a color');
 
-        /** @property {boolean} - Current percentage value of this scrollbar 0-1 */
+        /** @property {boolean} - Current percentage value of this slider 0-1 */
         this.checked = checked;
         // set properties
         this.text = text;
@@ -1241,13 +1241,13 @@ class UICheckbox extends UIObject
 
 ///////////////////////////////////////////////////////////////////////////////
 /** 
- * UIScrollbar - A UI object that acts as a scrollbar
+ * UISlider - A UI object that acts as a slider or scrollbar
  * @extends UIObject
  * @memberof UISystem
  */
-class UIScrollbar extends UIObject
+class UISlider extends UIObject
 {
-    /** Create a UIScrollbar object
+    /** Create a UISlider object
      *  @param {Vector2} [pos]
      *  @param {Vector2} [size]
      *  @param {number}  [value]
@@ -1259,14 +1259,14 @@ class UIScrollbar extends UIObject
     {
         super(pos, size);
 
-        ASSERT(isNumber(value), 'ui scrollbar value must be a number');
-        ASSERT(isString(text), 'ui scrollbar must be a string');
-        ASSERT(isColor(color), 'ui scrollbar color must be a color');
-        ASSERT(isColor(handleColor), 'ui scrollbar handleColor must be a color');
+        ASSERT(isNumber(value), 'ui slider value must be a number');
+        ASSERT(isString(text), 'ui slider must be a string');
+        ASSERT(isColor(color), 'ui slider color must be a color');
+        ASSERT(isColor(handleColor), 'ui slider handleColor must be a color');
 
-        /** @property {number} - Current percentage value of this scrollbar 0-1 */
+        /** @property {number} - Current percentage value of this slider 0-1 */
         this.value = value;
-        /** @property {Color} - Color for the handle part of the scrollbar */
+        /** @property {Color} - Color for the handle part of the slider */
         this.handleColor = handleColor.copy();
         /** @property {boolean} - Should it fill up like a progress bar? */
         this.fillMode = false;
@@ -1285,7 +1285,7 @@ class UIScrollbar extends UIObject
         const oldValue = this.value;
         if (this.isActiveObject())
         {
-            // handle horizontal or vertical scrollbar
+            // handle horizontal or vertical slider
             const isHorizontal = this.size.x > this.size.y;
             const handleSize = isHorizontal ? this.size.y : this.size.x;
             const barSize = isHorizontal ? this.size.x : this.size.y;
@@ -1313,7 +1313,7 @@ class UIScrollbar extends UIObject
     {
         super.render();
 
-        // handle horizontal or vertical scrollbar
+        // handle horizontal or vertical slider
         const isHorizontal = this.size.x > this.size.y;
         const barWidth = isHorizontal ? this.size.x : this.size.y;
         const handleWidth = isHorizontal ? this.size.y : this.size.x;
@@ -1331,7 +1331,7 @@ class UIScrollbar extends UIObject
         }
         else
         {
-            // draw the scrollbar handle
+            // draw the slider handle
             const value = clamp(isHorizontal ? this.value : 1 - this.value);
             const p = (barWidth - handleWidth) * (value - .5);
             const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p));
@@ -1340,7 +1340,7 @@ class UIScrollbar extends UIObject
             uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
         }
 
-        // draw the text scaled to fit on the scrollbar
+        // draw the text scaled to fit on the slider
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, this.textLineWidth, this.textLineColor, this.align, this.font, this.fontStyle, true, this.textShadow);

package/src/engine.js

@@ -32,7 +32,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.17.15';
+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()
@@ -276,8 +278,6 @@ function debugUpdate()
         debugOverlay = !debugOverlay;
     if (debugOverlay)
     {
-        if (keyWasPressed('Digit0'))
-            debugWatermark = !debugWatermark;
         if (keyWasPressed('Digit1'))
             debugPhysics = !debugPhysics, debugParticles = false;
         if (keyWasPressed('Digit2'))
@@ -565,7 +565,7 @@ function debugRenderPost()
         return;
     }
 
-    if (!debugWatermark) return;
+    if (!debugWatermark && !debugOverlay) return;
     
     // update fps display
     mainContext.textAlign = 'right';

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,
@@ -83,6 +84,7 @@ export
     touchGamepadAnalog,
     touchGamepadSize,
     touchGamepadAlpha,
+    touchGamepadDisplayTime,
     vibrateEnable,
     soundEnable,
     soundVolume,
@@ -104,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;
@@ -727,10 +738,10 @@ function inputRender()
     function touchGamepadRender()
     {
         if (!touchInputEnable || !isTouchDevice || headlessMode) return;
-        if (!touchGamepadEnable || !touchGamepadTimer.isSet()) return;
+        if (!touchGamepadEnable || !touchGamepadTimer.isSet() && touchGamepadDisplayTime) return;
 
         // fade off when not touching or paused
-        const alpha = percent(touchGamepadTimer.get(), 4, 3);
+        const alpha = touchGamepadDisplayTime ? percent(touchGamepadTimer.get(), touchGamepadDisplayTime+1, touchGamepadDisplayTime) : 1;
         if (!alpha || paused) return;
 
         // setup the canvas

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
@@ -260,6 +267,12 @@ let touchGamepadSize = 99;
  *  @memberof Settings */
 let touchGamepadAlpha = .3;
 
+/** How long to display the touch gamepad on screen in seconds, set to 0 to always display
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let touchGamepadDisplayTime = 3;
+
 /** Allow vibration hardware if it exists
  *  @type {boolean}
  *  @default
@@ -388,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 */
@@ -534,6 +553,11 @@ function setTouchGamepadSize(size) { touchGamepadSize = size; }
  *  @memberof Settings */
 function setTouchGamepadAlpha(alpha) { touchGamepadAlpha = alpha; }
 
+/** Set how long to display the touch gamepad on screen in seconds, set to 0 to always display
+ *  @param {number} time
+ *  @memberof Settings */
+function setTouchGamepadDisplayTime(time) { touchGamepadDisplayTime = time; }
+
 /** Set to allow vibration hardware if it exists
  *  @param {boolean} enable
  *  @memberof Settings */