littlejsengine 1.14.2 → 1.14.5

package/src/engineExport.js

@@ -193,11 +193,14 @@ export
 
 	// Draw
 	textureInfos,
+	drawCount,
 	tile,
 	TileInfo,
 	TextureInfo,
 	mainCanvas,
 	mainContext,
+	drawCanvas,
+	drawContext,
 	overlayCanvas,
 	overlayContext,
 	mainCanvasSize,
@@ -205,6 +208,8 @@ export
 	worldToScreen,
 	drawTile,
 	drawRect,
+	drawRectGradient,
+	drawLineList,
 	drawLine,
 	drawPoly,
 	drawEllipse,
@@ -239,6 +244,7 @@ export
 	glDrawPointsTransform,
 	glDrawOutlineTransform,
 	glDrawPoints,
+	glDrawColoredPoints,
 	glAntialias,
 	glShader,
 	glPolyShader,

package/src/engineObject.js

@@ -42,11 +42,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 */

package/src/engineTileLayer.js

@@ -3,7 +3,6 @@
  * - 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
  */

package/src/engineUtilities.js

@@ -377,10 +377,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)
 {
@@ -638,10 +638,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

package/src/engineWebGL.js

@@ -32,7 +32,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;
@@ -126,9 +126,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
@@ -209,7 +209,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);
@@ -227,9 +227,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
@@ -239,7 +242,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);
 }
 
@@ -374,15 +379,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;
@@ -446,7 +453,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
@@ -472,7 +479,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
@@ -480,61 +487,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)
+    for(let i = vertCount; i--;)
     {
-        // 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;
+        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 [];
@@ -543,12 +562,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;
@@ -587,8 +607,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;
             }
@@ -600,7 +620,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]);
@@ -635,10 +655,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);

package/copyToGithub.bat

@@ -1,28 +0,0 @@
-@echo off
-echo Copying LittleJS files to GitHub repository...
-
-REM Set the GitHub repository path (adjust this to your actual GitHub repo location)
-set GITHUB_PATH=C:\dev\GitHub\LittleJS
-
-REM Check if GitHub path exists
-if not exist "%GITHUB_PATH%" (
-    echo Error: GitHub repository path not found: %GITHUB_PATH%
-    echo Please update the GITHUB_PATH variable in this script
-    pause
-    exit /b 1
-)
-
-echo Copying folders and files...
-
-REM Copy folders (using /E for subdirectories, /I to create destination, /Y to overwrite)
-xcopy "dist" "%GITHUB_PATH%\dist\" /E /I /Y
-xcopy "examples" "%GITHUB_PATH%\examples\" /E /I /Y
-xcopy "plugins" "%GITHUB_PATH%\plugins\" /E /I /Y
-xcopy "src" "%GITHUB_PATH%\src\" /E /I /Y
-
-REM Copy individual files
-copy "jsconfig.json" "%GITHUB_PATH%\" /Y
-copy "package.json" "%GITHUB_PATH%\" /Y
-copy "reference.md" "%GITHUB_PATH%\" /Y
-
-echo Copy completed successfully!