littlejsengine 1.14.2 → 1.14.5

package/dist/littlejs.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.2';
+const engineVersion = '1.14.5';
 
 /** Frames per second to update
  *  @type {number}
@@ -249,8 +249,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 overlayContext.fillStyle = '#fff';
                 overlayContext.fillText(text, mainCanvas.width-2, 2);
             }
-            if (debug || showWatermark)
-                drawCount = 0;
+            drawCount = 0;
         }
         requestAnimationFrame(engineUpdate);
     }
@@ -284,6 +283,11 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
 
         // save canvas size
         mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+
+        // set default line join and cap
+        const lineJoin = 'round', lineCap = 'round';
+        mainContext.lineJoin = overlayContext.lineJoin = lineJoin;
+        mainContext.lineCap  = overlayContext.lineCap  = lineCap;
     }
 
     // wait for gameInit to load
@@ -745,15 +749,15 @@ function debugPoly(pos, points, color='#fff', time=0, angle=0, fill=false)
 
 /** Draw a debug circle in world space
  *  @param {Vector2} pos
- *  @param {number}  [radius]
+ *  @param {number}  [size] - diameter
  *  @param {string}  [color]
  *  @param {number}  [time]
  *  @param {boolean} [fill]
  *  @memberof Debug */
-function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
+function debugCircle(pos, size=0, color='#fff', time=0, fill=false)
 {
     ASSERT(typeof color === 'string', 'pass in css color strings');
-    debugPrimitives.push({pos, size:radius, color, time:new Timer(time), angle:0, fill});
+    debugPrimitives.push({pos, size, color, time:new Timer(time), angle:0, fill});
 }
 
 /** Draw a debug point in world space
@@ -772,13 +776,13 @@ function debugPoint(pos, color, time, angle)
  *  @param {Vector2} posA
  *  @param {Vector2} posB
  *  @param {string}  [color]
- *  @param {number}  [thickness]
+ *  @param {number}  [width]
  *  @param {number}  [time]
  *  @memberof Debug */
-function debugLine(posA, posB, color, thickness=.1, time)
+function debugLine(posA, posB, color, width=.1, time)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
-    const size = vec2(thickness, halfDelta.length()*2);
+    const size = vec2(width, halfDelta.length()*2);
     debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
 }
 
@@ -953,7 +957,7 @@ function debugRender()
                 {
                     const drawPos = centerPos.add(vec2(j*stickScale*2, i*stickScale*3));
                     const stickPos = drawPos.add(sticks[j].scale(stickScale));
-                    debugCircle(drawPos, stickScale, '#fff7',0,true);
+                    debugCircle(drawPos, stickScale*2, '#fff7',0,true);
                     debugLine(drawPos, stickPos, '#f00');
                     debugPoint(stickPos, '#f00');
                 }
@@ -961,7 +965,7 @@ function debugRender()
                 {
                     const drawPos = centerPos.add(vec2(j*buttonScale*2, i*stickScale*3-stickScale-buttonScale));
                     const pressed = gamepad.buttons[j].pressed;
-                    debugCircle(drawPos, buttonScale, pressed ? '#f00' : '#fff7', 0, true);
+                    debugCircle(drawPos, buttonScale*2, pressed ? '#f00' : '#fff7', 0, true);
                     debugText(''+j, drawPos, .2);
                 }
             }
@@ -1061,7 +1065,7 @@ function debugRender()
             {
                 // circle
                 overlayContext.beginPath();
-                overlayContext.arc(0, 0, p.size*cameraScale, 0, 9);
+                overlayContext.arc(0, 0, p.size*cameraScale/2, 0, 9);
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }
@@ -1619,10 +1623,10 @@ function vec2(x=0, y) { return new Vector2(x, y === undefined ? x : y); }
  * @param {any} v
  * @return {boolean}
  * @memberof Utilities */
-function isVector2(v) { return v instanceof Vector2; }
+function isVector2(v) { return v instanceof Vector2 && v.isValid(); }
 
 // vector2 asserts
-function ASSERT_VECTOR2_VALID(v) { ASSERT(isVector2(v) && v.isValid(), 'Vector2 is invalid.', v); }
+function ASSERT_VECTOR2_VALID(v) { ASSERT(isVector2(v), 'Vector2 is invalid.', v); }
 function ASSERT_NUMBER_VALID(n) { ASSERT(isNumber(n), 'Number is invalid.', n); }
 function ASSERT_VECTOR2_NORMAL(v)
 {
@@ -1880,10 +1884,10 @@ function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
  * @param {any} c
  * @return {boolean}
  * @memberof Utilities */
-function isColor(c) { return c instanceof Color; }
+function isColor(c) { return c instanceof Color && c.isValid(); }
 
 // color asserts
-function ASSERT_COLOR_VALID(c) { ASSERT(isColor(c) && c.isValid(), 'Color is invalid.', c); }
+function ASSERT_COLOR_VALID(c) { ASSERT(isColor(c), 'Color is invalid.', c); }
 
 /**
  * Color object (red, green, blue, alpha) with some helpful functions
@@ -2816,11 +2820,11 @@ class EngineObject
     constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color=new Color, renderOrder=0)
     {
         // check passed in params
-        ASSERT(isVector2(pos) && pos.isValid(), 'object pos should be a vec2');
-        ASSERT(isVector2(size) && size.isValid(), 'object size should be a vec2');
+        ASSERT(isVector2(pos), 'object pos should be a vec2');
+        ASSERT(isVector2(size), 'object size should be a vec2');
         ASSERT(!tileInfo || tileInfo instanceof TileInfo, 'object tileInfo should be a TileInfo or undefined');
         ASSERT(typeof angle === 'number' && isFinite(angle), 'object angle should be a number');
-        ASSERT(isColor(color) && color.isValid(), 'object color should be a valid rgba color');
+        ASSERT(isColor(color), 'object color should be a valid rgba color');
         ASSERT(typeof renderOrder === 'number', 'object renderOrder should be a number');
 
         /** @property {Vector2} - World space position of the object */
@@ -3314,7 +3318,9 @@ let mainCanvasSize = vec2();
  *  @memberof Draw */
 let textureInfos = [];
 
-// Keep track of how many draw calls there were each frame for debugging
+/** Keeps track of how many draw calls there were each frame for debugging
+ *  @type {number}
+ *  @memberof Draw */
 let drawCount;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -3469,8 +3475,8 @@ class TextureInfo
 function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     angle=0, mirror, additiveColor, useWebGL=glEnable, screenSpace, context)
 {
-    ASSERT(isVector2(pos) && pos.isValid(), 'drawTile pos should be a vec2');
-    ASSERT(isVector2(size) && size.isValid(), 'drawTile size should be a vec2');
+    ASSERT(isVector2(pos), 'drawTile pos should be a vec2');
+    ASSERT(isVector2(size), 'drawTile size should be a vec2');
     ASSERT(isColor(color) && (!additiveColor || isColor(additiveColor)), 'drawTile color is invalid');
     ASSERT(isNumber(angle), 'drawTile angle should be a number');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
@@ -3518,7 +3524,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     else
     {
         // normal canvas 2D rendering method (slower)
-        showWatermark && ++drawCount;
+        ++drawCount;
         size = new Vector2(size.x, -size.y); // fix upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
@@ -3554,10 +3560,124 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
     drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context);
 }
 
+/** Draw a rect centered on pos with a gradient from top to bottom
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=(1,1)]
+ *  @param {Color}   [colorTop=(1,1,1,1)]
+ *  @param {Color}   [colorBottom=(0,0,0,1)]
+ *  @param {number}  [angle]
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0, useWebGL=glEnable, screenSpace=false, context)
+{
+    ASSERT(isVector2(pos), 'drawRectGradient pos should be a vec2');
+    ASSERT(isVector2(size), 'drawRectGradient size should be a vec2');
+    ASSERT(isColor(colorTop) && isColor(colorBottom), 'drawRectGradient color is invalid');
+    ASSERT(isNumber(angle), 'drawRectGradient angle should be a number');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
+    {
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            size = size.scale(1/cameraScale);
+        }
+        // build 4 corner points for the rectangle
+        const points = [], colors = [];
+        const halfSizeX = size.x/2, halfSizeY = size.y/2;
+        const colorTopInt = colorTop.rgbaInt();
+        const colorBottomInt = colorBottom.rgbaInt();
+        const c = Math.cos(-angle), s = Math.sin(-angle);
+        for (let i=4; i--;)
+        {
+            const x = i & 1 ? halfSizeX : -halfSizeX;
+            const y = i & 2 ? halfSizeY : -halfSizeY;
+            const rx = x * c - y * s;
+            const ry = x * s + y * c;
+            const color = i & 2 ? colorTopInt : colorBottomInt;
+            points.push(vec2(pos.x + rx, pos.y + ry));
+            colors.push(color);
+        }
+        glDrawColoredPoints(points, colors);
+    }
+    else
+    {
+        // normal canvas 2D rendering method (slower)
+        ++drawCount;
+        size = new Vector2(size.x, -size.y); // fix upside down sprites
+        drawCanvas2D(pos, size, angle, false, (context)=>
+        {
+            // if no tile info, use untextured rect
+            const gradient = context.createLinearGradient(0, -.5, 0, .5);
+            gradient.addColorStop(0, colorTop.toString());
+            gradient.addColorStop(1, colorBottom.toString());
+            context.fillStyle = gradient;
+            context.fillRect(-.5, -.5, 1, 1);
+        }, screenSpace, context);
+    }
+}
+
+/** Draw connected lines between a series of points
+ *  @param {Array<Vector2>} points
+ *  @param {number}  [width]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {boolean} [wrap] - Should the last point connect to the first?
+ *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {number}  [angle] - Angle to rotate by
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace, context)
+{
+    ASSERT(Array.isArray(points), 'drawLineList points should be an array');
+    ASSERT(isNumber(width), 'drawLineList width should be a number');
+    ASSERT(isColor(color), 'drawLineList color is invalid');
+    ASSERT(isVector2(pos), 'drawLineList pos should be a vec2');
+    ASSERT(isNumber(angle), 'drawLineList angle should be a number');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
+    {
+        let scale = 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);
+    }
+    else
+    {
+        // normal canvas 2D rendering method (slower)
+        ++drawCount;
+        drawCanvas2D(pos, vec2(1), angle, false, (context)=>
+        {
+            context.strokeStyle = color.toString();
+            context.lineWidth = width;
+            context.beginPath();
+            for (let i=0; i<points.length; ++i)
+            {
+                const point = points[i];
+                if (i)
+                    context.lineTo(point.x, point.y);
+                else
+                    context.moveTo(point.x, point.y);
+            }
+            if (wrap)
+                context.closePath();
+            context.stroke();
+        }, screenSpace, context);
+    }
+}
+
 /** Draw colored line between two points
  *  @param {Vector2} posA
  *  @param {Vector2} posB
- *  @param {number}  [thickness]
+ *  @param {number}  [width]
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Vector2} [pos=(0,0)] - Offset to apply
  *  @param {number}  [angle] - Angle to rotate by
@@ -3565,10 +3685,10 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL, screenSpace, context)
+function drawLine(posA, posB, width=.1, color, pos=vec2(), angle=0, useWebGL, screenSpace, context)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
-    const size = vec2(thickness, halfDelta.length()*2);
+    const size = vec2(width, halfDelta.length()*2);
     pos = pos.add(posA.add(halfDelta));
     angle += halfDelta.angle();
     drawRect(pos, size, color, angle, useWebGL, screenSpace, context);
@@ -3588,12 +3708,16 @@ function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL
  *  @memberof Draw */
 function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, lineColor=BLACK, angle=0, useWebGL=glEnable, screenSpace=false, context)
 {
+    ASSERT(isVector2(size), 'drawRegularPoly size should be a vec2');
+    ASSERT(isNumber(sides), 'drawRegularPoly sides should be a number');
+
     // build regular polygon points
     const points = [];
+    const sizeX = size.x/2, sizeY = size.y/2;
     for (let i=sides; i--;)
     {
         const a = (i/sides)*PI*2;
-        points.push(vec2(Math.sin(a)*size.x, Math.cos(a)*size.y));
+        points.push(vec2(Math.sin(a)*sizeX, Math.cos(a)*sizeY));
     }
     drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebGL, screenSpace, context);
 }
@@ -3611,7 +3735,7 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
  *  @memberof Draw */
 function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace=false, context=undefined)
 {
-    ASSERT(isVector2(pos) && pos.isValid(), 'drawPoly pos should be a vec2');
+    ASSERT(isVector2(pos), 'drawPoly pos should be a vec2');
     ASSERT(Array.isArray(points), 'drawPoly points should be an array');
     ASSERT(isColor(color) && isColor(lineColor), 'drawPoly color is invalid');
     ASSERT(isNumber(lineWidth), 'drawPoly lineWidth should be a number');
@@ -3652,7 +3776,7 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
 
 /** Draw colored ellipse using passed in point
  *  @param {Vector2} pos
- *  @param {Vector2} [size=(1,1)]
+ *  @param {Vector2} [size=(1,1)] - Width and height diameter
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [angle]
  *  @param {number}  [lineWidth]
@@ -3663,8 +3787,8 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
  *  @memberof Draw */
 function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
 {
-    ASSERT(isVector2(pos) && pos.isValid(), 'drawEllipse pos should be a vec2');
-    ASSERT(isVector2(size) && size.isValid(), 'drawEllipse size should be a vec2');
+    ASSERT(isVector2(pos), 'drawEllipse pos should be a vec2');
+    ASSERT(isVector2(size), 'drawEllipse size should be a vec2');
     ASSERT(isColor(color) && isColor(lineColor), 'drawEllipse color is invalid');
     ASSERT(isNumber(angle), 'drawEllipse angle should be a number');
     ASSERT(isNumber(lineWidth), 'drawEllipse lineWidth should be a number');
@@ -3682,7 +3806,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
         {
             context.fillStyle = color.toString();
             context.beginPath();
-            context.ellipse(0, 0, size.x, size.y, 0, 0, 9);
+            context.ellipse(0, 0, size.x/2, size.y/2, 0, 0, 9);
             context.fill();
             if (lineWidth)
             {
@@ -3696,7 +3820,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
 
 /** Draw colored circle using passed in point
  *  @param {Vector2} pos
- *  @param {number}  [radius=1]
+ *  @param {number}  [size=1] - Diameter
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [lineWidth=0]
  *  @param {Color}   [lineColor=(0,0,0,1)]
@@ -3704,8 +3828,11 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawCircle(pos, radius=1, color=WHITE, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
-{ drawEllipse(pos, vec2(radius), color, 0, lineWidth, lineColor, useWebGL, screenSpace, context); }
+function drawCircle(pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
+{
+    ASSERT(isNumber(size), 'drawCircle size should be a number');
+    drawEllipse(pos, vec2(size), color, 0, lineWidth, lineColor, useWebGL, screenSpace, context);
+}
 
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
@@ -3791,7 +3918,6 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
     context.textAlign = textAlign;
     context.font = size + 'px '+ font;
     context.textBaseline = 'middle';
-    context.lineJoin = 'round';
 
     const lines = (text+'').split('\n');
     let posY = pos.y;
@@ -3991,7 +4117,7 @@ let engineFontImage;
  * const font = new FontImage;
  *
  * // draw text
- * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
+ * font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50));
  */
 class FontImage
 {
@@ -5314,7 +5440,6 @@ function zzfxG
  * - Caches arrays of tiles to off screen canvas for fast rendering
  * - Unlimited numbers of layers, allocates canvases as needed
  * - Tile layers can be drawn to using their context with canvas2d
- * - Drawn directly to the main canvas without using WebGL
  * - Tile layers can also have collision with EngineObjects
  * @namespace TileCollision
  */
@@ -6516,7 +6641,7 @@ let glAntialias = true;
 let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount;
 
 // WebGL internal constants
-const gl_ARRAY_BUFFER_SIZE = 4e5;
+const gl_ARRAY_BUFFER_SIZE = 5e5;
 const gl_INDICES_PER_INSTANCE = 11;
 const gl_INSTANCE_BYTE_STRIDE = gl_INDICES_PER_INSTANCE * 4;
 const gl_MAX_INSTANCES = gl_ARRAY_BUFFER_SIZE / gl_INSTANCE_BYTE_STRIDE | 0;
@@ -6610,9 +6735,9 @@ function glInit()
     glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
 }
 
-function glSetInstancedMode(force=false)
+function glSetInstancedMode()
 {
-    if (!glPolyMode && !force)
+    if (!glPolyMode)
         return;
     
     // setup instanced mode
@@ -6693,7 +6818,7 @@ function glPreRender()
         1,          1,        1, 0,
         p.x,        p.y,      0, 1];
 
-    // set the same matrix for both shaders
+    // set the same transform matrix for both shaders
     const initUniform = (program, uniform, value) =>
     {
         glContext.useProgram(program);
@@ -6711,9 +6836,12 @@ function glPreRender()
         glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
     }
 
-    // start in instanced rendering mode with additive blending off
-    glAdditive = glBatchAdditive = glPolyMode = false;
-    glSetInstancedMode(true);
+    // start with additive blending off
+    glAdditive = glBatchAdditive = false;
+
+    // force it to enter instanced mode
+    glPolyMode = true;
+    glSetInstancedMode();
 }
 
 /** Clear the canvas and setup the viewport
@@ -6723,7 +6851,9 @@ function glClearCanvas()
     if (!glContext) return;
 
     // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width=drawCanvas.width, glCanvas.height=drawCanvas.height);
+    glCanvas.width = drawCanvas.width;
+    glCanvas.height = drawCanvas.height;
+    glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
@@ -6858,15 +6988,17 @@ function glFlush()
         const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
         glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
         glContext.enable(glContext.BLEND);
-        glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData);
+        
+        const byteLength = glBatchCount * 
+            (glPolyMode ? gl_INDICES_PER_POLY_VERTEX : gl_INDICES_PER_INSTANCE);
+        glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData, 0, byteLength);
         
         // draw the batch
         if (glPolyMode)
             glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, glBatchCount);
         else
             glContext.drawArraysInstanced(glContext.TRIANGLE_STRIP, 0, 4, glBatchCount);
-        if (debug || showWatermark)
-            drawCount += glBatchCount;
+        drawCount += glBatchCount;
         glBatchCount = 0;
     }
     glBatchAdditive = glAdditive;
@@ -6930,7 +7062,7 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
 }
 
 /** Transform and add a polygon to the gl draw list
- *  @param {Array} points - Array of Vector2 points
+ *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {number} rgba - Color of the polygon as a 32-bit integer
  *  @param {number} x
  *  @param {number} y
@@ -6956,7 +7088,7 @@ function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
 }
 
 /** Transform and add a polygon to the gl draw list
- *  @param {Array} points - Array of Vector2 points
+ *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {number} rgba - Color of the polygon as a 32-bit integer
  *  @param {number} lineWidth - Width of the outline
  *  @param {number} x
@@ -6964,61 +7096,73 @@ function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
  *  @param {number} sx
  *  @param {number} sy
  *  @param {number} angle
+ *  @param {boolean} [wrap] - Should the outline connect the first and last points
  *  @memberof WebGL */
-function glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle)
+function glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle, wrap=true)
 {
-    const outlinePoints = glMakeOutline(points, lineWidth);
+    const outlinePoints = glMakeOutline(points, lineWidth, wrap);
     glDrawPointsTransform(outlinePoints, rgba, x, y, sx, sy, angle, false);
 }
 
-/** Add a polygon to the gl draw list
- *  @param {Array} points - Array of Vector2 points in triangle strip order
- *  @param {number} rgba - Color of the polygon as a 32-bit integer
+/** Add a list of points to the gl draw list
+ *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+ *  @param {number} rgba - Color as a 32-bit integer
  *  @memberof WebGL */
 function glDrawPoints(points, rgba)
 {
     if (!glEnable || points.length < 3)
         return; // needs at least 3 points to have area
     
-    // add 2 degenerate verts if batching with existing polys to separate them
-    const needsBridge = glPolyMode && glBatchCount > 0;
-    const bridgeVerts = needsBridge ? 2 : 0;
-    const vertCount = points.length + bridgeVerts;
-    
     // flush if there is not enough room or if different blend mode
-    if (!glPolyMode || glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
+    const vertCount = points.length + 2;
+    if (glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
         glFlush();
     glSetPolyMode();
   
+    // setup triangle strip with degenerate verts at start and end
     let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
-    
-    // add degenerate bridge if needed (repeat last vertex of previous poly, then first of new poly)
-    if (needsBridge)
-    {
-        // repeat last vertex from previous batch (it's at offset - 3)
-        const prevOffset = offset - 3;
-        glPositionData[offset++] = glPositionData[prevOffset];
-        glPositionData[offset++] = glPositionData[prevOffset + 1];
-        glColorData[offset++] = glColorData[prevOffset + 2];
-        
-        // repeat first vertex of new poly
-        glPositionData[offset++] = points[0].x;
-        glPositionData[offset++] = points[0].y;
+    for(let i = vertCount; i--;)
+    {
+        const j = clamp(i-1, 0, vertCount-3);
+        const point = points[j];
+        glPositionData[offset++] = point.x;
+        glPositionData[offset++] = point.y;
         glColorData[offset++] = rgba;
     }
+    glBatchCount += vertCount;
+}
+
+/** Add a list of colored points to the gl draw list
+ *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+ *  @param {Array<number>} pointColors - Array of 32-bit integer colors
+ *  @memberof WebGL */
+function glDrawColoredPoints(points, pointColors)
+{
+    if (!glEnable || points.length < 3)
+        return; // needs at least 3 points to have area
     
-    // write vertices - they're already in triangle strip order
-    for (const point of points)
+    // flush if there is not enough room or if different blend mode
+    const vertCount = points.length + 2;
+    if (glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
+        glFlush();
+    glSetPolyMode();
+  
+    // setup triangle strip with degenerate verts at start and end
+    let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
+    for(let i = vertCount; i--;)
     {
+        const j = clamp(i-1, 0, vertCount-3);
+        const point = points[j];
+        const color = pointColors[j];
         glPositionData[offset++] = point.x;
         glPositionData[offset++] = point.y;
-        glColorData[offset++] = rgba;
+        glColorData[offset++] = color;
     }
     glBatchCount += vertCount;
 }
 
 // WebGL internal function to convert polygon to outline triangle strip
-function glMakeOutline(points, width)
+function glMakeOutline(points, width, wrap=true)
 {
     if (points.length < 2)
         return [];
@@ -7027,12 +7171,13 @@ function glMakeOutline(points, width)
     const strip = [];
     const n = points.length;
     const e = 1e-6;
+    const miterLimit = width*100;
     for (let i = 0; i < n; i++)
     {
         // for each vertex, calculate normal based on adjacent edges
-        const prev = points[(i - 1 + n) % n];
+        const prev = points[wrap ? (i - 1 + n) % n : max(i - 1, 0)];
         const curr = points[i];
-        const next = points[(i + 1) % n];
+        const next = points[wrap ? (i + 1) % n : min(i + 1, n - 1)];
         
         // direction from previous to current
         const dx1 = curr.x - prev.x;
@@ -7071,8 +7216,8 @@ function glMakeOutline(points, width)
             const dot = nx1 * nx + ny1 * ny;
             if (dot > e)
             {
-                // scale normal by miter length
-                const miterLength = 1 / dot;
+                // scale normal by miter length, clamped to miterLimit
+                const miterLength = min(1 / dot, miterLimit);
                 nx *= miterLength;
                 ny *= miterLength;
             }
@@ -7084,7 +7229,7 @@ function glMakeOutline(points, width)
         strip.push(inner);
         strip.push(outer);
     }
-    if (strip.length > 1)
+    if (strip.length > 1 && wrap)
     {
         // close the loop
         strip.push(strip[0]);
@@ -7119,10 +7264,8 @@ function glPolyStrip(points)
     if (signedArea(points) < 0)
         points = points.reverse();
 
-    // tolerance constants
-    const e = 1e-10;
-
     // check if point is inside triangle
+    const e = 1e-9;
     const pointInTriangle = (p, a, b, c)=>
     {
         const c1 = cross(a, b, p);
@@ -9858,7 +10001,7 @@ class Box2dPlugin
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                drawCircle(pos, radius, color, lineWidth, lineColor);
+                drawCircle(pos, radius*2, color, lineWidth, lineColor);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
@@ -10009,14 +10152,14 @@ async function box2dInit()
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
-            drawCircle(center, radius, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, 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);
-            drawCircle(center, radius, color, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, color, debugLineWidth, color, false, false, overlayContext);
             drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
         };
         debugDraw.DrawTransform = function(transform)