littlejsengine 1.15.9 → 1.16.1

package/src/engineSettings.js

@@ -74,15 +74,7 @@ let canvasFixedSize = vec2();
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
-let canvasPixelated = true;
-
-/** Use nearest canvas scaling for more pixelated look
- *  - If enabled sets css image-rendering:pixelated
- *  - This defaults to false because text looks better with smoothing
- *  @type {boolean}
- *  @default
- *  @memberof Settings */
-let overlayCanvasPixelated = false;
+let canvasPixelated = false;
 
 /** Disables texture filtering for crisper pixel art
  *  @type {boolean}
@@ -130,13 +122,19 @@ let glCircleSides = 32;
  *  @type {Vector2}
  *  @default Vector2(16,16)
  *  @memberof Settings */
-let tileSizeDefault = vec2(16);
+let tileDefaultSize = vec2(16);
 
-/** How many pixels smaller to draw tiles to prevent bleeding from neighbors
+/** Default padding pixels around tiles
  *  @type {number}
  *  @default
  *  @memberof Settings */
-let tileFixBleedScale = 0;
+let tileDefaultPadding = 0;
+
+/** Default amount of pixels smaller to draw tiles to prevent neighbor bleeding
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let tileDefaultBleed = 0;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Object settings
@@ -374,7 +372,6 @@ function setCanvasMaxAspect(aspect) { canvasMaxAspect = aspect; }
 function setCanvasFixedSize(size) { canvasFixedSize = size.copy(); }
 
 /** Use nearest scaling algorithm for canvas for more pixelated look
- *  - If enabled sets css image-rendering:pixelated
  *  @param {boolean} pixelated
  *  @memberof Settings */
 function setCanvasPixelated(pixelated)
@@ -386,18 +383,6 @@ function setCanvasPixelated(pixelated)
         glCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
 }
 
-/** Use nearest scaling algorithm for canvas for more pixelated look
- *  - If enabled sets css image-rendering:pixelated
- *  - This defaults to false because text looks better with smoothing
- *  @param {boolean} pixelated
- *  @memberof Settings */
-function setOverlayCanvasPixelated(pixelated)
-{
-    overlayCanvasPixelated = pixelated;
-    if (overlayCanvas)
-        overlayCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
-}
-
 /** Disables texture filtering for crisper pixel art
  *  @param {boolean} pixelated
  *  @memberof Settings */
@@ -441,12 +426,17 @@ function setGLCircleSides(sides) { glCircleSides = sides; }
 /** Set default size of tiles in pixels
  *  @param {Vector2} size
  *  @memberof Settings */
-function setTileSizeDefault(size) { tileSizeDefault = size.copy(); }
+function setTileDefaultSize(size) { tileDefaultSize = size.copy(); }
 
-/** Set to prevent tile bleeding from neighbors in pixels
- *  @param {number} scale
+/** Default padding pixels around tiles
+ *  @param {number} padding
+ *  @memberof Settings */
+function setTileDefaultPadding(padding) { tileDefaultPadding = padding; }
+
+/** Default amount of pixels smaller to draw tiles to prevent neighbor bleeding
+ *  @param {number} bleed
  *  @memberof Settings */
-function setTileFixBleedScale(scale) { tileFixBleedScale = scale; }
+function setTileDefaultBleed(bleed) { tileDefaultBleed = bleed; }
 
 /** Set if collisions between objects are enabled
  *  @param {boolean} enable
@@ -597,7 +587,7 @@ function setMedalsPreventUnlock(preventUnlock) { medalsPreventUnlock = preventUn
 /** Set if watermark with FPS should be shown
  *  @param {boolean} show
  *  @memberof Debug */
-function setShowWatermark(show) { showWatermark = show; }
+function setDebugWatermark(show) { debugWatermark = show; }
 
 /** Set key code used to toggle debug mode, Esc by default
  *  @param {string} key

package/src/engineTileLayer.js

@@ -443,8 +443,8 @@ class TileLayer extends CanvasLayer
         if (!this.context) return;
 
         // save current render settings
-        /** @type {[HTMLCanvasElement|OffscreenCanvas, CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number]} */
-        this.savedRenderSettings = [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale];
+        /** @type {[HTMLCanvasElement|OffscreenCanvas, CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color]} */
+        this.savedRenderSettings = [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor];
 
         // set the draw canvas and context to this layer
         // use camera settings to match this layer's canvas
@@ -453,6 +453,7 @@ class TileLayer extends CanvasLayer
         cameraPos = this.size.scale(.5);
         const tileSize = this.tileInfo ? this.tileInfo.size : vec2(1);
         cameraScale = tileSize.x;
+        canvasClearColor = CLEAR_BLACK;
         mainCanvasSize = this.size.multiply(tileSize);
         if (clear)
         {
@@ -462,7 +463,7 @@ class TileLayer extends CanvasLayer
         }
 
         // disable smoothing for pixel art
-        this.context.imageSmoothingEnabled = !tilesPixelated;
+        drawContext.imageSmoothingEnabled = !tilesPixelated;
 
         // setup gl rendering if enabled
         glPreRender();
@@ -478,7 +479,7 @@ class TileLayer extends CanvasLayer
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal
-        [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
+        [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor] = this.savedRenderSettings;
     }
 
     /** Draw the tile at a given position in the tile grid

package/src/engineUtilities.js

@@ -126,11 +126,7 @@ function percent(value, valueA, valueB)
  *  @return {number}
  *  @memberof Utilities */
 function lerp(valueA, valueB, percent)
-{
-    if (valueA >= 0 && valueA <= 1 && ((valueB < 0 || valueB > 1) && (percent < 0 || percent > 1)))
-        console.warn('lerp() parameter order changed! use lerp(start, end, p)');
-    return valueA + clamp(percent) * (valueB-valueA);
-}
+{ return valueA + clamp(percent) * (valueB-valueA); }
 
 /** Gets percent between percentA and percentB and linearly interpolates between lerpA and lerpB
  *  A shortcut for lerp(lerpA, lerpB, percent(value, percentA, percentB))
@@ -161,11 +157,7 @@ function distanceWrap(valueA, valueB, wrapSize=1)
  *  @return {number}
  *  @memberof Utilities */
 function lerpWrap(valueA, valueB, percent, wrapSize=1)
-{
-    if (valueA >= 0 && valueA <= 1 && ((valueB < 0 || valueB > 1) && (percent < 0 || percent > 1)))
-        console.warn('lerpWrap() parameter order changed! use lerpWrap(start, end, p)');
-    return valueA + clamp(percent) * distanceWrap(valueB, valueA, wrapSize);
-}
+{ return valueA + clamp(percent) * distanceWrap(valueB, valueA, wrapSize); }
 
 /** Returns signed wrapped distance between the two angles passed in
  *  @param {number} angleA

package/src/engineWebGL.js

@@ -13,7 +13,7 @@
 
 'use strict';
 
-/** The WebGL canvas which appears above the main canvas and below the overlay canvas
+/** The WebGL canvas which appears below the main canvas
  *  @type {HTMLCanvasElement}
  *  @memberof WebGL */
 let glCanvas;
@@ -43,7 +43,7 @@ const gl_MAX_POLY_VERTEXES = gl_ARRAY_BUFFER_SIZE / gl_POLY_VERTEX_BYTE_STRIDE |
 ///////////////////////////////////////////////////////////////////////////////
 
 // Initialize WebGL, called automatically by the engine
-function glInit()
+function glInit(rootElement)
 {
     // keep set of texture infos so they can be restored if context is lost
     glTextureInfos = new Set;
@@ -67,8 +67,7 @@ function glInit()
         return;
     }
 
-    // attach the WebGL canvas
-    const rootElement = mainCanvas.parentElement;
+    // attach the WebGL canvas;
     rootElement.appendChild(glCanvas);
     
     // startup webgl
@@ -286,6 +285,9 @@ function glClearCanvas()
     glCanvas.width = drawCanvas.width;
     glCanvas.height = drawCanvas.height;
     glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
+    const color = canvasClearColor;
+    if (color.a > 0)
+        glContext.clearColor(color.r, color.g, color.b, color.a);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
@@ -515,7 +517,6 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
         glFlush();
     glSetInstancedMode();
 
-    glPolyMode = false;
     let offset = glBatchCount++ * gl_INDICES_PER_INSTANCE;
     glPositionData[offset++] = x;
     glPositionData[offset++] = y;