littlejsengine 1.14.8 → 1.14.10

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.8';
+const engineVersion = '1.14.10';
 
 /** Frames per second to update
  *  @type {number}
@@ -1932,6 +1932,12 @@ let touchGamepadEnable = false;
  *  @memberof Settings */
 let touchGamepadAnalog = true;
 
+/** Number of buttons on touch gamepad
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let touchGamepadButtonCount = 4;
+
 /** Size of virtual gamepad for touch devices in pixels
  *  @type {number}
  *  @default
@@ -3962,7 +3968,7 @@ function inputInit()
     function onMouseLeave()
     {
         // set mouse position and delta when leaving canvas
-        mousePosScreen = vec2(Infinity);
+        mousePosScreen = vec2(-1);
         mouseDeltaScreen = vec2(0);
     }
 }
@@ -4017,10 +4023,12 @@ function gamepadsUpdate()
         const data = inputData[1] || (inputData[1] = []);
         for (let i=10; i--;)
         {
-            const j = i === 3 ? 2 : i === 2 ? 3 : i; // fix button locations
-            const wasDown = gamepadIsDown(j,0);
-            data[j] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
+            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
@@ -4095,6 +4103,15 @@ const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
 // touch gamepad internal variables
 let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
 
+function touchGamepadButtonCenter()
+{
+    // draw right face buttons
+    let center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    if (touchGamepadButtonCount <= 2)
+        center.x += touchGamepadSize/2;
+    return center;
+}
+
 // enable touch input mouse passthrough
 function touchInputInit()
 {
@@ -4142,8 +4159,8 @@ function touchInputInit()
         // set was touching
         wasTouching = touching;
 
-        // prevent default handling like copy and magnifier lens
-        if (inputPreventDefault && document.hasFocus()) // allow document to get focus
+        // 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
@@ -4172,25 +4189,36 @@ function touchInputInit()
 
         // get center of left and right sides
         const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, 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 (touchPos.distance(stickCenter) < touchGamepadSize)
+            if (stickCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual analog stick
                 touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
             }
-            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
+            else if (buttonCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual face buttons
-                const button = touchPos.subtract(buttonCenter).direction();
-                touchGamepadButtons[button] = 1;
+                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 (touchPos.distance(startCenter) < touchGamepadSize && !wasTouching)
+            else if (startCenter.distance(touchPos) < touchGamepadSize && !wasTouching)
             {
                 // virtual start button in center
                 touchGamepadButtons[9] = 1;
@@ -4221,11 +4249,10 @@ function touchGamepadRender()
     // draw left analog stick
     context.fillStyle = touchGamepadStick.lengthSquared() > 0 ? '#fff' : '#000';
     context.beginPath();
-
-    const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     if (touchGamepadAnalog) // draw circle shaped gamepad
     {
-        context.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
+        context.arc(stickCenter.x, stickCenter.y, touchGamepadSize/2, 0, 9);
         context.fill();
         context.stroke();
     }
@@ -4234,21 +4261,27 @@ function touchGamepadRender()
         for (let i=10; i--;)
         {
             const angle = i*PI/4;
-            context.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
-            i%2 && context.arc(leftCenter.x, leftCenter.y, touchGamepadSize*.33, angle, angle);
+            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 rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-    for (let i=4; i--;)
-    {
-        const pos = rightCenter.add(vec2().setDirection(i, touchGamepadSize/2));
-        context.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
+    const buttonCenter = touchGamepadButtonCenter();
+    const buttonSize = touchGamepadButtonCount > 1 ? touchGamepadSize/4 : touchGamepadSize/2;
+    for (let i=0; i<touchGamepadButtonCount; i++)
+    {
+        let 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, touchGamepadSize/4, 0,9);
+        context.arc(pos.x, pos.y, buttonSize, 0,9);
         context.fill();
         context.stroke();
     }
@@ -7604,7 +7637,7 @@ class UIObject
         const mouseDown = mouseIsDown(0);
         const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
         if (!uiSystem.hoverObject)
-        if (mousePress || !mouseDown || isActive)
+        if (mousePress || isActive || (!mouseDown && !isTouchDevice))
         {
             const size = this.size.add(vec2(isTouchDevice && this.extraTouchSize || 0));
             if (isOverlapping(this.pos, size, mousePosScreen))
@@ -7636,7 +7669,8 @@ class UIObject
                 }
             }
         }
-        if (isActive && (!mouseDown || !this.isHoverObject()))
+        if (isActive)
+        if (!mouseDown || (this.dragActivate && !this.isHoverObject()))
         {
             this.onRelease();
             if (this.soundRelease)

package/examples/platformer/gameEffects.js

@@ -36,7 +36,11 @@ export const persistentParticleDestroyCallback = (particle)=>
     // copy particle to tile layer on death
     LJS.ASSERT(!particle.tileInfo, 'quick draw to tile layer uses canvas 2d so must be untextured');
     if (particle.groundObject)
+    {
         GameLevel.foregroundTileLayer.drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
+        // update WebGL texture
+        GameLevel.foregroundTileLayer.useWebGL();
+    }
 }
 
 export function makeBlood(pos, amount) { makeDebris(pos, hsl(0,1,.5), amount, .1, 0); }
@@ -83,7 +87,7 @@ export function explosion(pos, radius=3)
     }
 
     // update WebGL texture
-    GameLevel.updateWebGL(GameLevel.foregroundTileLayer);
+    GameLevel.foregroundTileLayer.useWebGL();
 
     // kill/push objects
     LJS.engineObjectsCallback(pos, radius*3, (o)=> 
@@ -159,7 +163,7 @@ export function destroyTile(pos, makeSound = 1, cleanup = 1)
         for (let i=-1;i<=1;++i)
         for (let j=-1;j<=1;++j)
             GameLevel.decorateTile(pos.add(vec2(i,j)));
-        GameLevel.updateWebGL(layer);
+        layer.useWebGL();
     }
 
     return true;

package/examples/platformer/gameLevel.js

@@ -14,7 +14,6 @@ import * as GameEffects from './gameEffects.js';
 import * as Game from './game.js';
 const {vec2, hsl, tile} = LJS;
 
-export const useWebGLTileLayers = true;
 export const tileType_ladder    = -1;
 export const tileType_empty     = 0;
 export const tileType_solid     = 1;
@@ -138,7 +137,7 @@ function loadLevelData()
         for (pos.x=levelSize.x; pos.x--;)
         for (pos.y=levelSize.y; pos.y--;)
             decorateTile(pos, layer);
-        updateWebGL(tileLayers[layer]);
+        tileLayers[layer].useWebGL();
     }
 }
 
@@ -204,9 +203,4 @@ export function getCameraTarget()
     // camera is above player
     const offset = 100/LJS.cameraScale*LJS.percent(LJS.mainCanvasSize.y, 300, 600);
     return Game.player.pos.add(vec2(0, offset));
-}
-
-export function updateWebGL(layer)
-{
-    layer.useWebGL(useWebGLTileLayers);
 }

package/examples/shorts/blending.js

@@ -1,4 +1,4 @@
-// use smoother textures
+// use smooth blending
 setCanvasPixelated(false);
 setTilesPixelated(false);
 

package/examples/shorts/box2dCar.js

@@ -38,7 +38,8 @@ class CarObject extends Box2dObject
         
         // car controls - use mouse, arrow keys, or A/D to drive
         const maxSpeed = 40;
-        const input = keyDirection().x || mouseIsDown(0);
+        const input = mouseIsDown(0) ? 1 : 
+            mouseIsDown(2) ? -1 : keyDirection().x ;
         let s = this.wheels[0].motorJoint.getMotorSpeed();
         s = input ? clamp(s - input, -maxSpeed, maxSpeed) : 0;
         this.wheels[0].motorJoint.setMotorSpeed(s);

package/examples/shorts/particles.js

@@ -9,20 +9,20 @@ function gameInit()
         tile(0),                        // tileInfo
         rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
         rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
-        .7, 2, 0, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, -1, PI, .05,  // damp, angleDamp, gravity, particleCone, fade
-        .5, 0, 1, 0, 1e9     // randomness, collide, additive, colorLinear, renderOrder
+        .7, 2, 0, .2, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
+        .9, 1, -1, PI, .05, // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 1, 0         // randomness, collide, additive, colorLinear
     );
     
     // smoke
     new ParticleEmitter(
-        vec2(5,-2), 0,                    // pos, angle
-        3, 0, 100, PI,                    // emitSize, emitTime, emitRate, emitCone
-        tile(0),                          // tileInfo
-        hsl(0,0,0,.5), hsl(0,0,1,.5),     // colorStartA, colorStartB
+        vec2(-5,-2), 0,               // pos, angle
+        3, 0, 100, PI,                // emitSize, emitTime, emitRate, emitCone
+        tile(0),                      // tileInfo
+        hsl(0,0,0,.5), hsl(0,0,1,.5), // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,1,0), // colorEndA, colorEndB
-        1, 1, 5, .2, .01,    // time, sizeStart, sizeEnd, speed, angleSpeed
-        .85, 1, -1, PI, .3,  // damp, angleDamp, gravity, particleCone, fade
-        .5, 0, 0, 1, 1e8     // randomness, collide, additive, colorLinear, renderOrder
+        1, 1, 5, .2, .01,   // time, sizeStart, sizeEnd, speed, angleSpeed
+        .85, 1, -1, PI, .3, // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 0, 1         // randomness, collide, additive, colorLinear
     );
 }

package/examples/shorts/pongGame.js

@@ -1,4 +1,3 @@
-// globals objects
 let paddle, ball;
 
 class PhysicsObject extends EngineObject

package/examples/shorts/uiSystem.js

@@ -1,7 +1,3 @@
-// globals objects
-const sound_ui = new Sound([1,0]);
-let uiMenu;
-
 function gameInit()
 {
     // setup ui system plugin

package/package.json

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

package/plugins/uiSystem.js

@@ -284,7 +284,7 @@ class UIObject
         const mouseDown = mouseIsDown(0);
         const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
         if (!uiSystem.hoverObject)
-        if (mousePress || !mouseDown || isActive)
+        if (mousePress || isActive || (!mouseDown && !isTouchDevice))
         {
             const size = this.size.add(vec2(isTouchDevice && this.extraTouchSize || 0));
             if (isOverlapping(this.pos, size, mousePosScreen))
@@ -316,7 +316,8 @@ class UIObject
                 }
             }
         }
-        if (isActive && (!mouseDown || !this.isHoverObject()))
+        if (isActive)
+        if (!mouseDown || (this.dragActivate && !this.isHoverObject()))
         {
             this.onRelease();
             if (this.soundRelease)

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.8';
+const engineVersion = '1.14.10';
 
 /** Frames per second to update
  *  @type {number}

package/src/engineDebug.js

@@ -455,7 +455,8 @@ function debugRender()
         {
             overlayContext.fillText(`${engineName} v${engineVersion}`, x, y += h/2 );
             overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
-            overlayContext.fillText('FPS: ' + averageFPS.toFixed(1), x, y += h);
+            overlayContext.fillText('FPS: ' + averageFPS.toFixed(1) + (glEnable?' WebGL':' Canvas2D'), 
+                x, y += h);
             overlayContext.fillText('Objects: ' + engineObjects.length, x, y += h);
             overlayContext.fillText('Draw Count: ' + drawCount, x, y += h);
             overlayContext.fillText('---------', x, y += h);
@@ -474,12 +475,18 @@ function debugRender()
             overlayContext.fillText('6: Toggle Video Capture', x, y += h);
 
             let keysPressed = '';
+            let mousePressed = '';
             for (const i in inputData[0])
             {
-                if (keyIsDown(i, 0))
+                if (!keyIsDown(i, 0))
+                    continue;
+                if (parseInt(i) < 3)
+                    mousePressed += i + ' ' ;
+                else if (keyIsDown(i, 0))
                     keysPressed += i + ' ' ;
             }
-            keysPressed && overlayContext.fillText('Keys Down: ' + keysPressed, x, y += h);
+            mousePressed && overlayContext.fillText('Mouse: ' + mousePressed, x, y += h);
+            keysPressed && overlayContext.fillText('Keys: ' + keysPressed, x, y += h);
 
             let buttonsPressed = '';
             if (inputData[1])

package/src/engineInput.js

@@ -278,7 +278,7 @@ function inputInit()
     function onMouseLeave()
     {
         // set mouse position and delta when leaving canvas
-        mousePosScreen = vec2(Infinity);
+        mousePosScreen = vec2(-1);
         mouseDeltaScreen = vec2(0);
     }
 }
@@ -333,10 +333,12 @@ function gamepadsUpdate()
         const data = inputData[1] || (inputData[1] = []);
         for (let i=10; i--;)
         {
-            const j = i === 3 ? 2 : i === 2 ? 3 : i; // fix button locations
-            const wasDown = gamepadIsDown(j,0);
-            data[j] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
+            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
@@ -411,6 +413,15 @@ const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
 // touch gamepad internal variables
 let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
 
+function touchGamepadButtonCenter()
+{
+    // draw right face buttons
+    let center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    if (touchGamepadButtonCount <= 2)
+        center.x += touchGamepadSize/2;
+    return center;
+}
+
 // enable touch input mouse passthrough
 function touchInputInit()
 {
@@ -458,8 +469,8 @@ function touchInputInit()
         // set was touching
         wasTouching = touching;
 
-        // prevent default handling like copy and magnifier lens
-        if (inputPreventDefault && document.hasFocus()) // allow document to get focus
+        // 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
@@ -488,25 +499,36 @@ function touchInputInit()
 
         // get center of left and right sides
         const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, 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 (touchPos.distance(stickCenter) < touchGamepadSize)
+            if (stickCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual analog stick
                 touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
             }
-            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
+            else if (buttonCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual face buttons
-                const button = touchPos.subtract(buttonCenter).direction();
-                touchGamepadButtons[button] = 1;
+                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 (touchPos.distance(startCenter) < touchGamepadSize && !wasTouching)
+            else if (startCenter.distance(touchPos) < touchGamepadSize && !wasTouching)
             {
                 // virtual start button in center
                 touchGamepadButtons[9] = 1;
@@ -537,11 +559,10 @@ function touchGamepadRender()
     // draw left analog stick
     context.fillStyle = touchGamepadStick.lengthSquared() > 0 ? '#fff' : '#000';
     context.beginPath();
-
-    const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     if (touchGamepadAnalog) // draw circle shaped gamepad
     {
-        context.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
+        context.arc(stickCenter.x, stickCenter.y, touchGamepadSize/2, 0, 9);
         context.fill();
         context.stroke();
     }
@@ -550,21 +571,27 @@ function touchGamepadRender()
         for (let i=10; i--;)
         {
             const angle = i*PI/4;
-            context.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
-            i%2 && context.arc(leftCenter.x, leftCenter.y, touchGamepadSize*.33, angle, angle);
+            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 rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-    for (let i=4; i--;)
+    const buttonCenter = touchGamepadButtonCenter();
+    const buttonSize = touchGamepadButtonCount > 1 ? touchGamepadSize/4 : touchGamepadSize/2;
+    for (let i=0; i<touchGamepadButtonCount; i++)
     {
-        const pos = rightCenter.add(vec2().setDirection(i, touchGamepadSize/2));
-        context.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
+        let 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, touchGamepadSize/4, 0,9);
+        context.arc(pos.x, pos.y, buttonSize, 0,9);
         context.fill();
         context.stroke();
     }

package/src/engineSettings.js

@@ -222,6 +222,12 @@ let touchGamepadEnable = false;
  *  @memberof Settings */
 let touchGamepadAnalog = true;
 
+/** Number of buttons on touch gamepad
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let touchGamepadButtonCount = 4;
+
 /** Size of virtual gamepad for touch devices in pixels
  *  @type {number}
  *  @default