littlejsengine 1.15.2 → 1.15.3

package/src/engineDebug.js

@@ -70,8 +70,9 @@ function LOG(...output) { console.log(...output); }
  *  @param {number} [time]
  *  @param {number} [angle]
  *  @param {boolean} [fill]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugRect(pos, size=vec2(), color=WHITE, time=0, angle=0, fill=false)
+function debugRect(pos, size=vec2(), color=WHITE, time=0, angle=0, fill=false, screenSpace=false)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isVector2(size), 'size must be a vec2');
@@ -86,7 +87,7 @@ function debugRect(pos, size=vec2(), color=WHITE, time=0, angle=0, fill=false)
     pos = pos.copy();
     size = size.copy();
     const timer = new Timer(time);
-    debugPrimitives.push({pos:pos.copy(), size:size.copy(), color, timer, angle, fill});
+    debugPrimitives.push({pos:pos.copy(), size:size.copy(), color, timer, angle, fill, screenSpace});
 }
 
 /** Draw a debug poly in world space
@@ -96,8 +97,9 @@ function debugRect(pos, size=vec2(), color=WHITE, time=0, angle=0, fill=false)
  *  @param {number} [time]
  *  @param {number} [angle]
  *  @param {boolean} [fill]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugPoly(pos, points, color=WHITE, time=0, angle=0, fill=false)
+function debugPoly(pos, points, color=WHITE, time=0, angle=0, fill=false, screenSpace=false)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isArray(points), 'points must be an array');
@@ -110,7 +112,7 @@ function debugPoly(pos, points, color=WHITE, time=0, angle=0, fill=false)
     pos = pos.copy();
     points = points.map(p=>p.copy());
     const timer = new Timer(time);
-    debugPrimitives.push({pos, points, color, timer, angle, fill});
+    debugPrimitives.push({pos, points, color, timer, angle, fill, screenSpace});
 }
 
 /** Draw a debug circle in world space
@@ -119,8 +121,9 @@ function debugPoly(pos, points, color=WHITE, time=0, angle=0, fill=false)
  *  @param {Color|string} [color]
  *  @param {number} [time]
  *  @param {boolean} [fill]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugCircle(pos, size=0, color=WHITE, time=0, fill=false)
+function debugCircle(pos, size=0, color=WHITE, time=0, fill=false, screenSpace=false)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isNumber(size), 'size must be a number');
@@ -131,7 +134,7 @@ function debugCircle(pos, size=0, color=WHITE, time=0, fill=false)
         color = color.toString();
     pos = pos.copy();
     const timer = new Timer(time);
-    debugPrimitives.push({pos, size, color, timer, angle:0, fill});
+    debugPrimitives.push({pos, size, color, timer, angle:0, fill, screenSpace});
 }
 
 /** Draw a debug point in world space
@@ -139,9 +142,10 @@ function debugCircle(pos, size=0, color=WHITE, time=0, fill=false)
  *  @param {Color|string} [color]
  *  @param {number} [time]
  *  @param {number} [angle]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugPoint(pos, color, time, angle)
-{ debugRect(pos, undefined, color, time, angle); }
+function debugPoint(pos, color, time, angle, screenSpace=false)
+{ debugRect(pos, undefined, color, time, angle, false, screenSpace); }
 
 /** Draw a debug line in world space
  *  @param {Vector2} posA
@@ -149,8 +153,9 @@ function debugPoint(pos, color, time, angle)
  *  @param {Color|string} [color]
  *  @param {number} [width]
  *  @param {number} [time]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugLine(posA, posB, color, width=.1, time)
+function debugLine(posA, posB, color, width=.1, time, screenSpace=false)
 {
     ASSERT(isVector2(posA), 'posA must be a vec2');
     ASSERT(isVector2(posB), 'posB must be sa vec2');
@@ -158,7 +163,7 @@ function debugLine(posA, posB, color, width=.1, time)
 
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(width, halfDelta.length()*2);
-    debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
+    debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true, screenSpace);
 }
 
 /** Draw a debug combined axis aligned bounding box in world space
@@ -167,8 +172,10 @@ function debugLine(posA, posB, color, width=.1, time)
  *  @param {Vector2} posB
  *  @param {Vector2} sizeB
  *  @param {Color|string} [color]
+ *  @param {number} [time]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugOverlap(posA, sizeA, posB, sizeB, color)
+function debugOverlap(posA, sizeA, posB, sizeB, color, time, screenSpace=false)
 {
     ASSERT(isVector2(posA), 'posA must be a vec2');
     ASSERT(isVector2(posB), 'posB must be a vec2');
@@ -183,7 +190,7 @@ function debugOverlap(posA, sizeA, posB, sizeB, color)
         max(posA.x + sizeA.x/2, posB.x + sizeB.x/2),
         max(posA.y + sizeA.y/2, posB.y + sizeB.y/2)
     );
-    debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color);
+    debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color, time, 0, false, screenSpace);
 }
 
 /** Draw a debug axis aligned bounding box in world space
@@ -194,8 +201,9 @@ function debugOverlap(posA, sizeA, posB, sizeB, color)
  *  @param {number} [time]
  *  @param {number} [angle]
  *  @param {string} [font]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugText(text, pos, size=1, color=WHITE, time=0, angle=0, font='monospace')
+function debugText(text, pos, size=1, color=WHITE, time=0, angle=0, font='monospace', screenSpace=false)
 {
     ASSERT(isString(text), 'text must be a string');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -209,7 +217,7 @@ function debugText(text, pos, size=1, color=WHITE, time=0, angle=0, font='monosp
         color = color.toString();
     pos = pos.copy();
     const timer = new Timer(time);
-    debugPrimitives.push({text, pos, size, color, timer, angle, font});
+    debugPrimitives.push({text, pos, size, color, timer, angle, font, screenSpace});
 }
 
 /** Clear all debug primitives in the list
@@ -419,21 +427,26 @@ function debugRender()
     {
         // draw debug primitives
         overlayContext.lineWidth = 2;
-        const pointSize = debugPointSize * cameraScale;
         debugPrimitives.forEach(p=>
         {
             overlayContext.save();
 
             // create canvas transform from world space to screen space
-            const pos = worldToScreen(p.pos);
+            // without scaling because we want consistent pixel sizes
+            let pos = p.pos, scale = 1, angle = p.angle;
+            if (!p.screenSpace)
+            {
+                pos = worldToScreen(p.pos);
+                scale = cameraScale;
+                angle -= cameraAngle;
+            }
             overlayContext.translate(pos.x|0, pos.y|0);
-            overlayContext.rotate(p.angle);
+            overlayContext.rotate(angle);
             overlayContext.scale(1, p.text ? 1 : -1);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
-
             if (p.text !== undefined)
             {
-                overlayContext.font = p.size*cameraScale + 'px '+ p.font;
+                overlayContext.font = p.size*scale + 'px '+ p.font;
                 overlayContext.textAlign = 'center';
                 overlayContext.textBaseline = 'middle';
                 overlayContext.fillText(p.text, 0, 0);
@@ -444,7 +457,7 @@ function debugRender()
                 overlayContext.beginPath();
                 for (const point of p.points)
                 {
-                    const p2 = point.scale(cameraScale).floor();
+                    const p2 = point.scale(scale).floor();
                     overlayContext.lineTo(p2.x, p2.y);
                 }
                 overlayContext.closePath();
@@ -454,13 +467,14 @@ function debugRender()
             else if (p.size === 0 || (p.size.x === 0 && p.size.y === 0))
             {
                 // point
+                const pointSize = debugPointSize * scale;
                 overlayContext.fillRect(-pointSize/2, -1, pointSize, 3);
                 overlayContext.fillRect(-1, -pointSize/2, 3, pointSize);
             }
             else if (p.size.x !== undefined)
             {
                 // rect
-                const s = p.size.scale(cameraScale).floor();
+                const s = p.size.scale(scale).floor();
                 const w = s.x, h = s.y;
                 p.fill && overlayContext.fillRect(-w/2|0, -h/2|0, w, h);
                 overlayContext.strokeRect(-w/2|0, -h/2|0, w, h);
@@ -469,7 +483,7 @@ function debugRender()
             {
                 // circle
                 overlayContext.beginPath();
-                overlayContext.arc(0, 0, p.size*cameraScale/2, 0, 9);
+                overlayContext.arc(0, 0, p.size*scale/2, 0, 9);
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }

package/src/engineDraw.js

@@ -250,15 +250,11 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
     const bleedScale = tileInfo ? tileInfo.bleedScale : 0;
-    if (useWebGL)
+    if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
         if (screenSpace)
-        {
-            // convert to world space
-            pos = screenToWorld(pos);
-            size = size.scale(1/cameraScale);
-        }
+            [pos, size, angle] = screenToWorldTransform(pos, size, angle);
         if (textureInfo)
         {
             // calculate uvs and render
@@ -346,7 +342,8 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
     ASSERT(isColor(colorTop) && isColor(colorBottom), 'color is invalid');
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
+
+    if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
         if (screenSpace)
@@ -354,6 +351,7 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
             // convert to world space
             pos = screenToWorld(pos);
             size = size.scale(1/cameraScale);
+            angle += cameraAngle;
         }
         // build 4 corner points for the rectangle
         const points = [], colors = [];
@@ -409,17 +407,14 @@ function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0,
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
+
+    if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
-        let scale = 1;
+        let size = vec2(1);
         if (screenSpace)
-        {
-            // convert to world space
-            pos = screenToWorld(pos);
-            scale = 1/cameraScale;
-        }
-        glDrawOutlineTransform(points, color.rgbaInt(), width, pos.x, pos.y, scale, scale, angle, wrap);
+            [pos, size, angle] = screenToWorldTransform(pos, size, angle);
+        glDrawOutlineTransform(points, color.rgbaInt(), width, pos.x, pos.y, size.x, size.y, angle, wrap);
     }
     else
     {
@@ -515,19 +510,15 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
-    if (useWebGL)
+    if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
-        let scale = 1;
+        let size = vec2(1);
         if (screenSpace)
-        {
-            // convert to world space
-            pos = screenToWorld(pos);
-            scale = 1/cameraScale;
-        }
-        glDrawPointsTransform(points, color.rgbaInt(), pos.x, pos.y, scale, scale, angle);
+            [pos, size, angle] = screenToWorldTransform(pos, size, angle);
+        glDrawPointsTransform(points, color.rgbaInt(), pos.x, pos.y, size.x, size.y, angle);
         if (lineWidth > 0)
-            glDrawOutlineTransform(points, lineColor.rgbaInt(), lineWidth, pos.x, pos.y, scale, scale, angle);
+            glDrawOutlineTransform(points, lineColor.rgbaInt(), lineWidth, pos.x, pos.y, size.x, size.y, angle);
     }
     else
     {
@@ -570,7 +561,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
     ASSERT(lineWidth >= 0 && lineWidth < size.x && lineWidth < size.y, 'invalid lineWidth');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
-    if (useWebGL)
+    if (useWebGL && glEnable)
     {
         // draw as a regular polygon
         const sides = glCircleSides;
@@ -633,14 +624,10 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
     ASSERT(typeof drawFunction === 'function', 'drawFunction must be a function');
 
     if (!screenSpace)
-    {
-        // transform from world space to screen space
-        pos = worldToScreen(pos);
-        size = size.scale(cameraScale);
-    }
+        [pos, size, angle] = worldToScreenTransform(pos, size, angle);
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
-    context.rotate(angle-cameraAngle);
+    context.rotate(angle);
     context.scale(mirror ? -size.x : size.x, -size.y);
     drawFunction(context);
     context.restore();
@@ -666,7 +653,14 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
  *  @memberof Draw */
 function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth, angle=0, context=drawContext)
 {
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
+    // convert to screen space
+    pos = worldToScreen(pos);
+    size *= cameraScale;
+    lineWidth *= cameraScale;
+    angle -= cameraAngle;
+    angle *= -1;
+
+    drawTextScreen(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
 }
 
 /** Draw text on overlay canvas in world space
@@ -825,6 +819,36 @@ function worldToScreenDelta(worldDelta)
     return new Vector2(x *  cameraScale, y * -cameraScale);
 }
 
+/** Convert screen space transform to world space
+ *  @param {Vector2} screenPos
+ *  @param {Vector2} screenSize  
+ *  @param {number} [screenAngle]
+ *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
+ *  @memberof Draw */
+function screenToWorldTransform(screenPos, screenSize, screenAngle=0)
+{
+    return [
+        screenToWorld(screenPos),
+        screenSize.scale(1/cameraScale),
+        screenAngle + cameraAngle
+    ];
+}
+
+/** Convert world space transform to screen space
+ *  @param {Vector2} worldPos
+ *  @param {Vector2} worldSize  
+ *  @param {number} [worldAngle]
+ *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
+ *  @memberof Draw */
+function worldToScreenTransform(worldPos, worldSize, worldAngle=0)
+{
+    return [
+        worldToScreen(worldPos),
+        worldSize.scale(cameraScale),
+        worldAngle - cameraAngle
+    ];
+}
+
 /** Get the camera's visible area in world space
  *  @return {Vector2}
  *  @memberof Draw */

package/src/engineInput.js

@@ -184,7 +184,7 @@ function inputUpdate()
     if (headlessMode) return;
 
     // clear input when lost focus (prevent stuck keys)
-    if(!(touchInputEnable && isTouchDevice) && !document.hasFocus())
+    if (!(touchInputEnable && isTouchDevice) && !document.hasFocus())
         inputClear();
 
     // update mouse world space position and delta

package/src/engineObject.js

@@ -448,7 +448,9 @@ class EngineObject
     {
         ASSERT(child.parent === this && this.children.includes(child));
         ASSERT(child instanceof EngineObject, 'child must be an EngineObject');
-        this.children.splice(this.children.indexOf(child), 1);
+        const index = this.children.indexOf(child);
+        ASSERT(index >= 0, 'child not found in children array');
+        index >= 0 && this.children.splice(index, 1);
         child.parent = 0;
     }
 

package/src/engineTileLayer.js

@@ -553,7 +553,7 @@ class TileCollisionLayer extends TileLayer
         // remove from collision layers array and destroy
         const index = tileCollisionLayers.indexOf(this);
         ASSERT(index >= 0, 'tile collision layer not found in array');
-        tileCollisionLayers.splice(index, 1);
+        index >= 0 && tileCollisionLayers.splice(index, 1);
         super.destroy();
     }