littlejsengine 1.13.1 → 1.14.2

package/plugins/box2d.js

@@ -61,7 +61,7 @@ class Box2dObject extends EngineObject
         bodyDef.set_angle(-angle);
         this.body = box2d.world.CreateBody(bodyDef);
         this.body.object = this;
-        this.outlineColor = BLACK;
+        this.lineColor = BLACK;
     }
 
     /** Destroy this object and it's physics body */
@@ -88,27 +88,27 @@ class Box2dObject extends EngineObject
         if (this.tileInfo)
             super.render();
         else
-            this.drawFixtures(this.color, this.outlineColor, this.lineWidth, mainContext);
+            this.drawFixtures(this.color, this.lineColor, this.lineWidth);
     }
 
     /** Render debug info */
     renderDebugInfo()
     {
         const isAsleep = !this.getIsAwake();
-        const isStatic = this.getBodyType() == box2d.bodyTypeStatic;
+        const isStatic = this.getBodyType() === box2d.bodyTypeStatic;
         const color = rgb(isAsleep?1:0, isAsleep?1:0, isStatic?1:0, .5);
         this.drawFixtures(color);
     }
 
     /** Draws all this object's fixtures 
      *  @param {Color}  [color]
-     *  @param {Color}  [outlineColor]
+     *  @param {Color}  [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixtures(color=WHITE, outlineColor, lineWidth=.1, context)
+    drawFixtures(color=WHITE, lineColor, lineWidth=.1, context)
     {
         this.getFixtureList().forEach(fixture=>
-            box2d.drawFixture(fixture, this.pos, this.angle, color, outlineColor, lineWidth, context));
+            box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context));
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -1563,7 +1563,7 @@ class Box2dPlugin
         queryCallback.ReportFixture = function(fixturePointer)
         {
             const fixture = box2d.instance.wrapPointer(fixturePointer, box2d.instance.b2Fixture);
-            if (dynamicOnly && fixture.GetBody().GetType() != box2d.instance.b2_dynamicBody)
+            if (dynamicOnly && fixture.GetBody().GetType() !== box2d.instance.b2_dynamicBody)
                 return true; // continue getting results
             if (!fixture.TestPoint(box2d.vec2dTo(pos)))
                 return true; // continue getting results
@@ -1589,10 +1589,10 @@ class Box2dPlugin
      *  @param {Vector2} pos
      *  @param {number} angle
      *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
+     *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
+    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -1602,101 +1602,25 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                box2d.drawPoly(pos, angle, points, color, outlineColor, lineWidth, context);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                box2d.drawCircle(pos, radius, color, outlineColor, lineWidth, context);
+                drawCircle(pos, radius, color, lineWidth, lineColor);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
             {
                 const v1 = box2d.vec2From(shape.get_m_vertex1());
                 const v2 = box2d.vec2From(shape.get_m_vertex2());
-                box2d.drawLine(pos, angle, v1, v2, color, lineWidth, context);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle);
                 break;
             }
         }
     }
 
-    /** draws a circle
-     *  @param {Vector2} pos
-     *  @param {number} radius
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawCircle(pos, radius, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), 0, 0, context=>
-        {
-            context.beginPath();
-            context.arc(0, 0, radius, 0, 9);
-            box2d.drawFillStroke(color, outlineColor, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** draws a polygon
-     *  @param {Vector2} pos
-     *  @param {number} angle
-     *  @param {Array<Vector2>} points
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawPoly(pos, angle, points, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), angle, 0, context=>
-        {
-            context.beginPath();
-            points.forEach(p=>context.lineTo(p.x, p.y));
-            context.closePath();
-            box2d.drawFillStroke(color, outlineColor, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** draws a line
-     *  @param {Vector2} pos
-     *  @param {number} angle
-     *  @param {Vector2} posA
-     *  @param {Vector2} posB
-     *  @param {Color} [color]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawLine(pos, angle, posA, posB, color=WHITE, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), angle, 0, context=>
-        {
-            context.beginPath();
-            context.lineTo(posA.x, posA.y);
-            context.lineTo(posB.x, posB.y);
-            box2d.drawFillStroke(0, color, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** performs a fill or stroke as a helper to the other draw functions
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawFillStroke(color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        if (color)
-        {
-            context.fillStyle = color.toString();
-            context.fill();
-        }
-        if (outlineColor && lineWidth)
-        {
-            context.lineWidth = lineWidth;
-            context.lineJoin = context.lineCap = 'round';
-            context.strokeStyle = outlineColor.toString();
-            context.stroke();
-        }
-    }
-
     ///////////////////////////////////////////////////////////////////////////////
     // helper functions
 
@@ -1770,7 +1694,9 @@ class Box2dPlugin
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-/** Box2d Init - Call with await before starting LittleJS to init box2d
+/** Box2d Init - Call with await to init box2d
+ *  @example
+ *  await box2dInit();
  *  @return {Promise<Box2dPlugin>}
  *  @memberof Box2D */
 async function box2dInit()
@@ -1797,6 +1723,7 @@ async function box2dInit()
     function setupDebugDraw()
     {
         // setup debug draw
+        const debugLineWidth = .1;
         const debugDraw = new box2d.instance.JSDraw();
         const box2dColor = (c)=> new Color(c.get_r(), c.get_g(), c.get_b());
         const box2dColorPointer = (c)=>
@@ -1814,33 +1741,33 @@ async function box2dInit()
             color = getDebugColor(color);
             point1 = box2d.vec2FromPointer(point1);
             point2 = box2d.vec2FromPointer(point2);
-            box2d.drawLine(vec2(), 0, point1, point2, color, undefined, overlayContext);
+            drawLine(point1, point2, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawPolygon = function(vertices, vertexCount, color)
         {
             color = getDebugColor(color);
             const points = getPointsList(vertices, vertexCount);
-            box2d.drawPoly(vec2(), 0, points, undefined, color, undefined, overlayContext);
+            drawPoly(points, CLEAR_WHITE, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawSolidPolygon = function(vertices, vertexCount, color)
         {
             color = getDebugColor(color);
             const points = getPointsList(vertices, vertexCount);
-            box2d.drawPoly(vec2(), 0, points, color, color, undefined, overlayContext);
+            drawPoly(points, color, 0, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawCircle = function(center, radius, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
-            box2d.drawCircle(center, radius, undefined, color, undefined, overlayContext);
+            drawCircle(center, radius, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
         };
         debugDraw.DrawSolidCircle = function(center, radius, axis, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
             axis = box2d.vec2FromPointer(axis).scale(radius);
-            box2d.drawCircle(center, radius, color, color, undefined, overlayContext);
-            box2d.drawLine(center, 0, vec2(), axis, color, undefined, overlayContext);
+            drawCircle(center, radius, color, debugLineWidth, color, false, false, overlayContext);
+            drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
         };
         debugDraw.DrawTransform = function(transform)
         {
@@ -1849,8 +1776,8 @@ async function box2dInit()
             const angle = -transform.get_q().GetAngle();
             const p1 = vec2(1,0), c1 = rgb(.75,0,0,.8);
             const p2 = vec2(0,1), c2 = rgb(0,.75,0,.8);
-            box2d.drawLine(pos, angle, vec2(), p1, c1, undefined, overlayContext);
-            box2d.drawLine(pos, angle, vec2(), p2, c2, undefined, overlayContext);
+            drawLine(vec2(), p1, debugLineWidth, c1, pos, angle, false, false, overlayContext);
+            drawLine(vec2(), p2, debugLineWidth, c2, pos, angle, false, false, overlayContext);
         }
             
         debugDraw.AppendFlags(box2d.instance.b2Draw.e_shapeBit);

package/plugins/drawUtilities.js

@@ -16,14 +16,15 @@
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
  *  @param {number} [borderSize] - Width of the border sections
  *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @memberof DrawUtilities */
-function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
 }
 
 /** Draw a scalable nine-slice UI element in world space
- *  This function can apply color and additive color if webgl is enabled
+ *  This function can apply color and additive color if WebGL is enabled
  *  @param {Vector2} pos - World space position
  *  @param {Vector2} size - World space size
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
@@ -31,11 +32,12 @@ function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
  *  @param {number} [borderSize] - Width of the border sections
  *  @param {Color} [additiveColor] - Additive color
  *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
  *  @param {boolean} [screenSpace] - Use screen space coordinates
  *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
  *  @memberof DrawUtilities */
-function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.05, angle=0, useWebGL=glEnable, screenSpace, context)
 {
     // setup nine slice tiles
     const centerTile = startTile.offset(startTile.size);
@@ -43,26 +45,27 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
     const cornerSize = vec2(borderSize);
     const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
     const flip = screenSpace ? -1 : 1;
+    const rotateAngle = screenSpace ? -angle : angle;
 
     // center
-    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
-    for(let i=4; i--;)
+    drawTile(pos, centerSize, centerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    for (let i=4; i--;)
     {
         // sides
         const horizontal = i%2;
-        const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-1:1));
+        const sidePos = cornerOffset.multiply(vec2(horizontal?i===1?1:-1:0, horizontal?0:i?-1:1));
         const sideSize = vec2(horizontal ? borderSize : centerSize.x, horizontal ? centerSize.y : borderSize);
-        const sideTile = centerTile.offset(startTile.size.multiply(vec2(i==1?1:i==3?-1:0,i==0?-flip:i==2?flip:0)))
-        drawTile(pos.add(sidePos), sideSize, sideTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+        const sideTile = centerTile.offset(startTile.size.multiply(vec2(i===1?1:i===3?-1:0,i===0?-flip:i===2?flip:0)))
+        drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
-    for(let i=4; i--;)
+    for (let i=4; i--;)
     {
         // corners
         const flipX = i>1;
         const flipY = i && i<3;
         const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-1:1));
         const cornerTile = centerTile.offset(startTile.size.multiply(vec2(flipX?-1:1,flipY?flip:-flip)));
-        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(cornerPos.rotate(rotateAngle)), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
 }
 
@@ -73,14 +76,15 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
  *  @param {number} [borderSize] - Width of the border sections
  *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @memberof DrawUtilities */
-function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
 }
 
 /** Draw a scalable three-slice UI element in world space
- *  This function can apply color and additive color if webgl is enabled
+ *  This function can apply color and additive color if WebGL is enabled
  *  @param {Vector2} pos - World space position
  *  @param {Vector2} size - World space size
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
@@ -88,11 +92,12 @@ function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
  *  @param {number} [borderSize] - Width of the border sections
  *  @param {Color} [additiveColor] - Additive color
  *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
  *  @param {boolean} [screenSpace] - Use screen space coordinates
  *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
  *  @memberof DrawUtilities */
-function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.05, angle=0, useWebGL=glEnable, screenSpace, context)
 {
     // setup three slice tiles
     const cornerTile = startTile.frame(0);
@@ -102,25 +107,26 @@ function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor
     const cornerSize = vec2(borderSize);
     const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
     const flip = screenSpace ? -1 : 1;
+    const rotateAngle = screenSpace ? -angle : angle;
 
     // center
-    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
-    for(let i=4; i--;)
+    drawTile(pos, centerSize, centerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    for (let i=4; i--;)
     {
         // sides
-        const angle = i*PI/2;
+        const a = angle + i*PI/2;
         const horizontal = i%2;
-        const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-flip:flip));
+        const sidePos = cornerOffset.multiply(vec2(horizontal?i===1?1:-1:0, horizontal?0:i?-flip:flip));
         const sideSize = vec2(horizontal ? centerSize.y : centerSize.x, borderSize);
-        drawTile(pos.add(sidePos), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }
-    for(let i=4; i--;)
+    for (let i=4; i--;)
     {
         // corners
-        const angle = i*PI/2;
+        const a = angle + i*PI/2;
         const flipX = !i || i>2;
         const flipY = i>1;
         const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-flip:flip));
-        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(cornerPos.rotate(rotateAngle)), cornerSize, cornerTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }
 }

package/plugins/newgrounds.js

@@ -23,11 +23,11 @@ let newgrounds;
 class NewgroundsMedal extends Medal
 {
     /** Create a newgrounds medal object and adds it to the list of medals
-     *  @param {Number} id            - The unique identifier of the medal
-     *  @param {String} name          - Name of the medal
-     *  @param {String} [description] - Description of the medal
-     *  @param {String} [icon]        - Icon for the medal
-     *  @param {String} [src]         - Image location for the medal
+     *  @param {number} id            - The unique identifier of the medal
+     *  @param {string} name          - Name of the medal
+     *  @param {string} [description] - Description of the medal
+     *  @param {string} [icon]        - Icon for the medal
+     *  @param {string} [src]         - Image location for the medal
      */
     constructor(id, name, description, icon, src)
     { super(id, name, description, icon, src); }
@@ -119,7 +119,7 @@ class NewgroundsPlugin
      * @param {number} id       - The scoreboard id
      * @param {string} [user]   - A user's id or name
      * @param {number} [social] - If true, only social scores will be loaded
-     * @param {number} [skip]   - Number of scores to skip before start
+     * @param {number} [skip]   - Number of scores to skip over
      * @param {number} [limit]  - Number of scores to include in the list
      * @return {Object}         - The response JSON object
      */

package/plugins/pluginExport.js

@@ -53,4 +53,4 @@ export
     drawNineSliceScreen,
     drawThreeSlice,
     drawThreeSliceScreen,
-};
+}

package/plugins/postProcess.js

@@ -32,6 +32,13 @@ class PostProcessPlugin
         postProcess = this;
 
         if (headlessMode) return;
+
+        if (!glEnable)
+        {
+            console.warn('PostProcessPlugin: WebGL not enabled!');
+            return;
+        }
+
         if (!shaderCode) // default shader pass through
             shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';