littlejsengine 1.15.8 → 1.16.1

package/src/engineSettings.js

@@ -48,6 +48,20 @@ let canvasClearColor = CLEAR_BLACK;
  *  @memberof Settings */
 let canvasMaxSize = vec2(1920, 1080);
 
+/** Minimum aspect ratio of the canvas (width/height), unused if 0
+ *  Can be used with canvasMaxAspect to limit aspect ratio
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let canvasMinAspect = 0;
+
+/** Maximum aspect ratio of the canvas (width/height), unused if 0
+ *  Can be used with canvasMinAspect to limit aspect ratio
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let canvasMaxAspect = 0;
+
 /** Fixed size of the canvas, if enabled canvas size never changes
  * - you may also need to set mainCanvasSize if using screen space coords in startup
  *  @type {Vector2}
@@ -60,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}
@@ -116,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
@@ -344,13 +356,22 @@ function setCanvasClearColor(color) { canvasClearColor = color.copy(); }
  *  @memberof Settings */
 function setCanvasMaxSize(size) { canvasMaxSize = size.copy(); }
 
+/** Set minimum aspect ratio of the canvas (width/height), unused if 0
+ *  @param {number} aspect
+ *  @memberof Settings */
+function setCanvasMinAspect(aspect) { canvasMinAspect = aspect; }
+
+/** Set maximum aspect ratio of the canvas (width/height), unused if 0
+ *  @param {number} aspect
+ *  @memberof Settings */
+function setCanvasMaxAspect(aspect) { canvasMaxAspect = aspect; }
+
 /** Set fixed size of the canvas
  *  @param {Vector2} size
  *  @memberof Settings */
 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)
@@ -362,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 */
@@ -417,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
@@ -573,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

@@ -211,8 +211,7 @@ class CanvasLayer extends EngineObject
     /** Destroy this canvas layer */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         this.textureInfo.destroyWebGLTexture();
         super.destroy();
@@ -444,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
@@ -454,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)
         {
@@ -463,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();
@@ -479,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;

package/src/engineSplash.js

@@ -1,173 +0,0 @@
-/**
- * LittleJS Engine Splash Screen
- * @namespace Settings
- */
-
-'use strict';
-
-///////////////////////////////////////////////////////////////////////////////
-// LittleJS splash screen and logo
-
-function drawEngineSplashScreen(t)
-{
-    const x = overlayContext;
-    const w = overlayCanvas.width = innerWidth;
-    const h = overlayCanvas.height = innerHeight;
-
-    {
-        // background
-        const p3 = percent(t, 1, .8);
-        const p4 = percent(t, 0, .5);
-        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
-        g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
-        g.addColorStop(1,hsl(0,0,0,p3).toString());
-        x.save();
-        x.fillStyle = g;
-        x.fillRect(0,0,w,h);
-    }
-
-    // draw LittleJS logo...
-    const rect = (X, Y, W, H, C)=>
-    {
-        x.beginPath();
-        x.rect(X,Y,W,C?H*p:H);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const line = (X, Y, Z, W)=>
-    {
-        x.beginPath();
-        x.lineTo(X,Y);
-        x.lineTo(Z,W);
-        x.stroke();
-    };
-    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
-    {
-        const D = (A+B)/2, E = p*(B-A)/2;
-        x.beginPath();
-        F && x.lineTo(X,Y);
-        x.arc(X,Y,R,D-E,D+E);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const color = (c=0, l=0) =>
-        hsl([.98,.3,.57,.14][c%4],.8,[0,.3,.5,.8,.9][l]).toString();
-    const alpha = wave(1,1,t);
-    const p = percent(alpha, .1, .5);
-
-    // setup
-    x.translate(w/2,h/2);
-    const size = min(6, min(w,h)/99); // fit to screen
-    x.scale(size,size);
-    x.translate(-40,-35);
-    x.lineJoin = x.lineCap = 'round';
-    x.lineWidth = .1 + p*1.9;
-
-    // drawing effect
-    const p2 = percent(alpha,.1,1);
-    x.setLineDash([99*p2,99]);
-
-    // cab top
-    rect(7,16,18,-8,color(2,2));
-    rect(7,8,18,4,color(2,3));
-    rect(25,8,8,8,color(2,1));
-    rect(25,8,-18,8);
-    rect(25,8,8,8);
-
-    // cab
-    rect(25,16,7,23,color());
-    rect(11,39,14,-23,color(1,1));
-    rect(11,16,14,18,color(1,2));
-    rect(11,16,14,8,color(1,3));
-    rect(25,16,-14,24);
-
-    // cab window
-    rect(15,29,6,-9,color(2,2));
-    circle(15,21,5,0,PI/2,color(2,4),1);
-    rect(21,21,-6,9);
-
-    // little stack
-    rect(37,14,9,6,color(3,2));
-    rect(37,14,4.5,6,color(3,3));
-    rect(37,14,9,6);
-
-    // big stack
-    rect(50,20,10,-8,color(0,1));
-    rect(50,20,6.5,-8,color(0,2));
-    rect(50,20,3.5,-8,color(0,3));
-    rect(50,20,10,-8);
-    circle(55,2,11.4,.5,PI-.5,color(3,3));
-    circle(55,2,11.4,.5,PI/2,color(3,2),1);
-    circle(55,2,11.4,.5,PI-.5);
-    rect(45,7,20,-7,color(0,2));
-    rect(45,-1,20,4,color(0,3));
-    rect(45,-1,20,8);
-
-    // engine
-    for (let i=5; i--;)
-    {
-        // stagger radius to fix slight seam
-        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
-        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
-        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
-    }
-
-    // engine outline
-    circle(36,30,10,PI/2,PI*3/2);
-    circle(48,30,10,PI/2,PI*3/2);
-    circle(60,30,10);
-    line(36,20,60,20);
-
-    // engine front light
-    circle(60,30,4,PI,3*PI,color(3,2));
-    circle(60,30,4,PI,2*PI,color(3,3));
-    circle(60,30,4,PI,3*PI);
-
-    // front brush
-    for (let i=6; i--;)
-    {
-        x.beginPath();
-        x.lineTo(53,54);
-        x.lineTo(53,40);
-        x.lineTo(53+(1+i*2.9)*p,40);
-        x.lineTo(53+(4+i*3.5)*p,54);
-        x.fillStyle = color(0,i%2+2);
-        x.fill();
-        i%2 && x.stroke();
-    }
-
-    // wheels
-    rect(6,40,5,5);
-    rect(6,40,5,5,color());
-    rect(15,54,38,-14,color());
-    for (let i=3; i--;)
-    for (let j=2; j--;)
-    {
-        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
-        x.stroke();
-        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
-        x.stroke();
-    }
-    line(6,40,68,40); // center
-    line(77,54,4,54); // bottom
-
-    // draw engine name
-    const s = engineName;
-    x.font = '900 16px arial';
-    x.textAlign = 'center';
-    x.textBaseline = 'top';
-    x.lineWidth = .1+p*3.9;
-    let w2 = 0;
-    for (let i=0; i<s.length; ++i)
-        w2 += x.measureText(s[i]).width;
-    for (let j=2; j--;)
-    for (let i=0, X=41-w2/2; i<s.length; ++i)
-    {
-        x.fillStyle = color(i,2);
-        const w = x.measureText(s[i]).width;
-        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
-        X += w;
-    }
-
-    x.restore();
-}