littlejsengine 1.14.5 → 1.14.8

package/src/engineDraw.js

@@ -136,8 +136,9 @@ class TileInfo
      *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
      *  @param {number}  [textureIndex]         - Texture index to use
      *  @param {number}  [padding]              - How many pixels padding around tiles
+     *  @param {number}  [bleedScale]           - How many pixels smaller to draw tiles
      */
-    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
+    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0, bleedScale=tileFixBleedScale)
     {
         /** @property {Vector2} - Top left corner of tile in pixels */
         this.pos = pos.copy();
@@ -149,6 +150,8 @@ class TileInfo
         this.padding = padding;
         /** @property {TextureInfo} - The texture info for this tile */
         this.textureInfo = textureInfos[this.textureIndex];
+        /** @property {float} - Shrinks tile by this many pixels to prevent neighbors bleeding */
+        this.bleedScale = bleedScale;
     }
 
     /** Returns a copy of this tile offset by a vector
@@ -156,7 +159,7 @@ class TileInfo
     *  @return {TileInfo}
     */
     offset(offset)
-    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex); }
+    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex, this.padding, this.bleedScale); }
 
     /** Returns a copy of this tile offset by a number of animation frames
     *  @param {number} frame - Offset to apply in animation frames
@@ -179,6 +182,8 @@ class TileInfo
         this.pos = new Vector2;
         this.size = new Vector2(image.width, image.height);
         this.textureInfo = new TextureInfo(image, glTexture);
+        // do not use padding or bleed
+        this.bleedScale = this.padding = 0;
         return this;
     }
 }
@@ -236,6 +241,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
+    const bleedScale = tileInfo ? tileInfo.bleedScale : 0;
     if (useWebGL)
     {
         if (screenSpace)
@@ -253,10 +259,10 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
             const w = tileInfo.size.x * sizeInverse.x;
             const h = tileInfo.size.y * sizeInverse.y;
             glSetTexture(textureInfo.glTexture);
-            if (tileFixBleedScale)
+            if (bleedScale)
             {
-                const tileImageFixBleedX = sizeInverse.x*tileFixBleedScale;
-                const tileImageFixBleedY = sizeInverse.y*tileFixBleedScale;
+                const tileImageFixBleedX = sizeInverse.x*bleedScale;
+                const tileImageFixBleedY = sizeInverse.y*bleedScale;
                 glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
                     x + tileImageFixBleedX,     y + tileImageFixBleedY,
                     x - tileImageFixBleedX + w, y - tileImageFixBleedY + h,
@@ -287,7 +293,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
                 // calculate uvs and render
                 const x = tileInfo.pos.x,  y = tileInfo.pos.y;
                 const w = tileInfo.size.x, h = tileInfo.size.y;
-                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor);
+                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor, bleedScale);
             }
             else
             {
@@ -775,15 +781,16 @@ function combineCanvases()
     *  @param {number} dHeight
     *  @param {Color} color
     *  @param {Color} [additiveColor]
+    *  @param {number} [bleedScale] - How much to shrink the source, used to fix bleeding
  *  @memberof Draw */
-function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor)
+function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor, bleedScale=0)
 {
     function isWhite(c) { return c.r >= 1 && c.g >= 1 && c.b >= 1; }
     function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
-    const sx2 = tileFixBleedScale;
-    const sy2 = tileFixBleedScale;
-    const sWidth2  = sWidth  - 2*tileFixBleedScale;
-    const sHeight2 = sHeight - 2*tileFixBleedScale;
+    const sx2 = bleedScale;
+    const sy2 = bleedScale;
+    const sWidth2  = sWidth  - 2*bleedScale;
+    const sHeight2 = sHeight - 2*bleedScale;
     if (!canvasColorTiles || (additiveColor ? isWhite(color.add(additiveColor)) && additiveColor.a <= 0 : isWhite(color)))
     {
         // white texture with no additive alpha, no need to tint
@@ -899,7 +906,7 @@ class FontImage
      *  @param {Vector2} pos
      *  @param {number}  [scale=.25]
      *  @param {boolean} [center]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}[context=drawContext] 
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext] 
      */
     drawText(text, pos, scale=1, center, context=drawContext)
     {

package/src/engineExport.js

@@ -53,6 +53,7 @@ export
 	cameraAngle,
 	cameraScale,
 	canvasColorTiles,
+	canvasClearColor,
 	canvasMaxSize,
 	canvasFixedSize,
 	canvasPixelated,
@@ -94,6 +95,7 @@ export
 	setCameraAngle,
 	setCameraScale,
 	setCanvasColorTiles,
+	setCanvasClearColor,
 	setCanvasMaxSize,
 	setCanvasFixedSize,
 	setCanvasPixelated,
@@ -192,8 +194,6 @@ export
 	MAGENTA,
 
 	// Draw
-	textureInfos,
-	drawCount,
 	tile,
 	TileInfo,
 	TextureInfo,
@@ -204,6 +204,8 @@ export
 	overlayCanvas,
 	overlayContext,
 	mainCanvasSize,
+	textureInfos,
+	drawCount,
 	screenToWorld,
 	worldToScreen,
 	drawTile,

package/src/engineInput.js

@@ -216,6 +216,7 @@ function inputInit()
     document.addEventListener('wheel', onMouseWheel);
     document.addEventListener('contextmenu', onContextMenu);
     document.addEventListener('blur', onBlur);
+    document.addEventListener('mouseleave', onMouseLeave);
 
     // init touch input
     if (isTouchDevice && touchInputEnable)
@@ -274,6 +275,12 @@ function inputInit()
     function onMouseWheel(e) { mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY); }
     function onContextMenu(e) { e.preventDefault(); } // prevent right click menu
     function onBlur() { inputClear(); } // reset input when focus is lost
+    function onMouseLeave()
+    {
+        // set mouse position and delta when leaving canvas
+        mousePosScreen = vec2(Infinity);
+        mouseDeltaScreen = vec2(0);
+    }
 }
 
 // convert a mouse or touch event position to screen space

package/src/engineObject.js

@@ -52,7 +52,7 @@ class EngineObject
         /** @property {Vector2} - World space position of the object */
         this.pos = pos.copy();
         /** @property {Vector2} - World space width and height of the object */
-        this.size = size;
+        this.size = size.copy();
         /** @property {Vector2} - Size of object used for drawing, uses size if not set */
         this.drawSize = undefined;
         /** @property {TileInfo} - Tile info to render object (undefined is untextured) */
@@ -60,7 +60,7 @@ class EngineObject
         /** @property {number} - Angle to rotate the object */
         this.angle = angle;
         /** @property {Color} - Color to apply when rendered */
-        this.color = color;
+        this.color = color.copy();
         /** @property {Color} - Additive color to apply when rendered */
         this.additiveColor = undefined;
         /** @property {boolean} - Should it flip along y axis when rendered */
@@ -184,7 +184,7 @@ class EngineObject
             for (const o of engineObjectsCollide)
             {
                 // non solid objects don't collide with each other
-                if (!this.isSolid && !o.isSolid || o.destroyed || o.parent || o === this)
+                if ((!this.isSolid && !o.isSolid) || o.destroyed || o.parent || o === this)
                     continue;
 
                 // check collision
@@ -223,7 +223,7 @@ class EngineObject
                 {
                     // push outside object collision
                     this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
-                    if (o.groundObject && wasMovingDown || !o.mass)
+                    if ((o.groundObject && wasMovingDown) || !o.mass)
                     {
                         // set ground object if landed on something
                         if (wasMovingDown)

package/src/engineSettings.js

@@ -37,6 +37,11 @@ let cameraScale = 32;
  *  @memberof Settings */
 let canvasColorTiles = true;
 
+/** Color to clear the canvas to before render
+ *  @type {Color}
+ *  @memberof Draw */
+let canvasClearColor = CLEAR_BLACK;
+
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
  *  @default Vector2(1920,1080)
@@ -315,6 +320,11 @@ function setCameraScale(scale) { cameraScale = scale; }
  *  @memberof Settings */
 function setCanvasColorTiles(colorTiles) { canvasColorTiles = colorTiles; }
 
+/** Set color to clear the canvas to before render
+ *  @param {Color} color
+ *  @memberof Settings */
+function setCanvasClearColor(color) { canvasClearColor = color; }
+
 /** Set max size of the canvas
  *  @param {Vector2} size
  *  @memberof Settings */
@@ -380,7 +390,7 @@ function setGLEnable(enable)
         glCanvas.style.visibility = enable ? 'visible' : 'hidden';
 }
 
-/** Set how many sided polygons to use when drawing circles and elipses with WebGL
+/** Set how many sided polygons to use when drawing circles and ellipses with WebGL
  *  @param {number} sides
  *  @memberof Settings */
 function setGLCircleSides(sides) { glCircleSides = sides; }

package/src/engineTileLayer.js

@@ -156,7 +156,7 @@ class TileLayerData
         /** @property {boolean} - If the tile should be mirrored along the x axis */
         this.mirror    = mirror;
         /** @property {Color}   - Color of the tile */
-        this.color     = color;
+        this.color     = color.copy();
     }
 
     /** Set this tile to clear, it will not be rendered */
@@ -255,7 +255,7 @@ class CanvasLayer extends EngineObject
      *  @param {TileInfo} [tileInfo]
      *  @param {Color}    [color=(1,1,1,1)]
      *  @param {number}   [angle=0]
-     *  @param {boolean}  [mirror=0] */
+     *  @param {boolean}  [mirror=false] */
     drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
     {
         this.drawCanvas2D(pos, size, angle, mirror, (context)=>

package/src/engineUtilities.js

@@ -155,8 +155,11 @@ function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
  *  @memberof Utilities */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
 {
-    return abs(posA.x - posB.x)*2 < sizeA.x + sizeB.x
-        && abs(posA.y - posB.y)*2 < sizeA.y + sizeB.y;
+    const dx = (posA.x - posB.x)*2;
+    const dy = (posA.y - posB.y)*2;
+    const sx = sizeA.x + sizeB.x;
+    const sy = sizeA.y + sizeB.y;
+    return dx >= -sx && dx < sx && dy >= -sy && dy < sy;
 }
 
 /** Returns true if a line segment is intersecting an axis aligned box
@@ -985,6 +988,10 @@ class Timer
      * @return {number} */
     getPercent() { return this.isSet()? 1-percent(this.time - time, 0, this.setTime) : 0; }
 
+    /** Get the time this timer was set to, returns 0 if not set
+     * @return {number} */
+    getSetTime() { return this.isSet() ? this.setTime : 0; }
+
     /** Returns this timer expressed as a string
      * @return {string} */
     toString() { if (debug) { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }}

package/src/engineWebGL.js

@@ -260,7 +260,8 @@ function glSetTexture(texture, wrap=false)
         return;
 
     glFlush();
-    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture = texture);
+    glActiveTexture = texture;
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
 
     // set wrap mode
     const wrapMode = wrap ? glContext.REPEAT : glContext.CLAMP_TO_EDGE;
@@ -310,6 +311,7 @@ function glCreateProgram(vsSource, fsSource)
 }
 
 /** Create WebGL texture from an image and init the texture settings
+ *  Restores the active texture when done
  *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} [image]
  *  @return {WebGLTexture}
  *  @memberof WebGL */
@@ -319,30 +321,29 @@ function glCreateTexture(image)
 
     // build the texture
     const texture = glContext.createTexture();
-    glContext.bindTexture(glContext.TEXTURE_2D, texture);
+    let mipMap = false;
     if (image && image.width)
     {
         glSetTextureData(texture, image);
-        if (!tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height))
-        {
-            // use mipmap filtering
-            glContext.generateMipmap(glContext.TEXTURE_2D);
-            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, glContext.LINEAR_MIPMAP_LINEAR);
-            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, glContext.LINEAR);
-            return texture;
-        }
+        glContext.bindTexture(glContext.TEXTURE_2D, texture);
+        mipMap = !tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height);
     }
     else
     {
         // create a white texture
         const whitePixel = new Uint8Array([255, 255, 255, 255]);
+        glContext.bindTexture(glContext.TEXTURE_2D, texture);
         glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
     }
 
     // set texture filtering
-    const filter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
-    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, filter);
-    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, filter);
+    const magFilter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
+    const minFilter = mipMap ? glContext.LINEAR_MIPMAP_LINEAR : magFilter;
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, magFilter);
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, minFilter);
+    if (mipMap)
+        glContext.generateMipmap(glContext.TEXTURE_2D);
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
     return texture;
 }
 
@@ -355,7 +356,7 @@ function glDeleteTexture(texture)
     glContext.deleteTexture(texture);
 }
 
-/** Set WebGL texture data from an image
+/** Set WebGL texture data from an image, restores the active texture when done
  *  @param {WebGLTexture} texture
  *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} image
  *  @memberof WebGL */
@@ -367,6 +368,7 @@ function glSetTextureData(texture, image)
     ASSERT(!!image && image.width > 0, 'Invalid image data.');
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
 }
 
 /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
@@ -512,7 +514,7 @@ function glDrawPoints(points, rgba)
   
     // setup triangle strip with degenerate verts at start and end
     let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
-    for(let i = vertCount; i--;)
+    for (let i = vertCount; i--;)
     {
         const j = clamp(i-1, 0, vertCount-3);
         const point = points[j];
@@ -540,7 +542,7 @@ function glDrawColoredPoints(points, pointColors)
   
     // setup triangle strip with degenerate verts at start and end
     let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
-    for(let i = vertCount; i--;)
+    for (let i = vertCount; i--;)
     {
         const j = clamp(i-1, 0, vertCount-3);
         const point = points[j];
@@ -677,7 +679,7 @@ function glPolyStrip(points)
     while (indices.length > 3 && attempts++ < maxAttempts)
     {
         let foundEar = false;
-        for (let i = indices.length; --i;)
+        for (let i = 0; i < indices.length; i++)
         {
             const i0 = indices[(i + indices.length - 1) % indices.length];
             const i1 = indices[i];
@@ -714,7 +716,7 @@ function glPolyStrip(points)
         if (!foundEar)
         {
             let worstIndex = -1, worstValue = Infinity;
-            for (let i = indices.length; --i;)
+            for (let i = 0; i < indices.length; i++)
             {
                 const i0 = indices[(i + indices.length - 1) % indices.length];
                 const i1 = indices[i];