littlejsengine 1.9.4 → 1.9.6

package/src/engineParticles.js

@@ -233,20 +233,21 @@ class ParticleEmitter extends EngineObject
 class Particle extends EngineObject
 {
     /**
-     * Create a particle with the given shis.colorStart = undefined;ettings
-     * @param {Vector2}  position     - World space position of the particle
-     * @param {TileInfo} [tileInfo]   - Tile info to render particles
-     * @param {Number}   [angle]      - Angle to rotate the particle
-     * @param {Color}    [colorStart] - Color at start of life
-     * @param {Color}    [colorEnd]   - Color at end of life
-     * @param {Number}   [lifeTime]   - How long to live for
-     * @param {Number}   [sizeStart]  - Angle to rotate the particle
-     * @param {Number}   [sizeEnd]    - Angle to rotate the particle
-     * @param {Number}   [fadeRate]   - Angle to rotate the particle
-     * @param {Boolean}  [additive]   - Angle to rotate the particle
-     * @param {Number}   [trailScale] - If a trail, how long to make it
+     * Create a particle with the passed in settings
+     * Typically this is created automatically by a ParticleEmitter
+     * @param {Vector2}  position   - World space position of the particle
+     * @param {TileInfo} tileInfo   - Tile info to render particles
+     * @param {Number}   angle      - Angle to rotate the particle
+     * @param {Color}    colorStart - Color at start of life
+     * @param {Color}    colorEnd   - Color at end of life
+     * @param {Number}   lifeTime   - How long to live for
+     * @param {Number}   sizeStart  - Size at start of life
+     * @param {Number}   sizeEnd    - Size at end of life
+     * @param {Number}   fadeRate   - How quick to fade in/out
+     * @param {Boolean}  additive   - Does it use additive blend mode
+     * @param {Number}   trailScale - If a trail, how long to make it
      * @param {ParticleEmitter} [localSpaceEmitter] - Parent emitter if local space
-     * @param {Function}  [destroyCallback] - Called when particle dies
+     * @param {Function} [destroyCallback] - Callback when particle dies
      */
     constructor(position, tileInfo, angle, colorStart, colorEnd, lifeTime, sizeStart, sizeEnd, fadeRate, additive, trailScale, localSpaceEmitter, destroyCallback
     )

package/src/engineSettings.js

@@ -55,6 +55,12 @@ let fontDefault = 'arial';
  *  @memberof Settings */
 let showSplashScreen = false;
 
+/** Disables all rendering, audio, and input for servers
+ *  @type {Boolean}
+ *  @default
+ *  @memberof Settings */
+let headlessMode = false;
+
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
 
@@ -83,7 +89,7 @@ let tileSizeDefault = vec2(16);
  *  @type {Number}
  *  @default
  *  @memberof Settings */
-let tileFixBleedScale = .1;
+let tileFixBleedScale = .5;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Object settings
@@ -208,7 +214,7 @@ let soundEnable = true;
  *  @type {Number}
  *  @default
  *  @memberof Settings */
-let soundVolume = .5;
+let soundVolume = .3;
 
 /** Default range where sound no longer plays
  *  @type {Number}
@@ -293,6 +299,11 @@ function setFontDefault(font) { fontDefault = font; }
  *  @memberof Settings */
 function setShowSplashScreen(show) { showSplashScreen = show; }
 
+/** Set to disalbe rendering, audio, and input for servers
+ *  @param {Boolean} headless
+ *  @memberof Settings */
+function setHeadlessMode(headless) { headlessMode = headless; }
+
 /** Set if webgl rendering is enabled
  *  @param {Boolean} enable
  *  @memberof Settings */

package/src/engineTileLayer.js

@@ -72,7 +72,7 @@ function tileCollisionTest(pos, size=vec2(), object)
     }
 }
 
-/** Return the center of tile if any that is hit (does not return the exact intersection)
+/** Return the center of first tile hit (does not return the exact intersection)
  *  @param {Vector2}      posStart
  *  @param {Vector2}      posEnd
  *  @param {EngineObject} [object]
@@ -181,7 +181,7 @@ class TileLayer extends EngineObject
 
         /** @property {HTMLCanvasElement} - The canvas used by this tile layer */
         this.canvas = document.createElement('canvas');
-        /** @property {CanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
+        /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
         this.context = this.canvas.getContext('2d');
         /** @property {Vector2} - How much to scale this layer when rendered */
         this.scale = scale;
@@ -192,6 +192,17 @@ class TileLayer extends EngineObject
         this.data = [];
         for (let j = this.size.area(); j--;)
             this.data.push(new TileLayerData);
+
+        if (headlessMode)
+        {
+            // disable rendering
+            this.redraw       = () => {};
+            this.render       = () => {};
+            this.redrawStart  = () => {};
+            this.redrawEnd    = () => {};
+            this.drawTileData = () => {};
+            this.drawCanvas2D = () => {};
+        }
     }
     
     /** Set data at a given position in the array 
@@ -222,7 +233,7 @@ class TileLayer extends EngineObject
         ASSERT(mainContext != this.context, 'must call redrawEnd() after drawing tiles');
 
         // flush and copy gl canvas because tile canvas does not use webgl
-        glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
+        !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
         
         // draw the entire cached level onto the canvas
         const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
@@ -268,15 +279,18 @@ class TileLayer extends EngineObject
             mainCanvas.height = mainCanvasSize.y;
         }
 
-        // begin a new render for the tile canvas
-        enginePreRender();
+        // disable smoothing for pixel art
+        this.context.imageSmoothingEnabled = !canvasPixelated;
+
+        // setup gl rendering if enabled
+        glPreRender();
     }
 
     /** Call to end the redraw process */
     redrawEnd()
     {
         ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
-        glEnable && glCopyToContext(mainContext, true);
+        glCopyToContext(mainContext, true);
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal

package/src/engineUtilities.js

@@ -64,7 +64,7 @@ function clamp(value, min=0, max=1) { return value < min ? min : value > max ? m
  *  @return {Number}
  *  @memberof Utilities */
 function percent(value, valueA, valueB)
-{ return valueB-valueA ? clamp((value-valueA) / (valueB-valueA)) : 0; }
+{ return (valueB-=valueA) ? clamp((value-valueA)/valueB) : 0; }
 
 /** Linearly interpolates between values passed in using percent
  *  @param {Number} percent
@@ -121,16 +121,57 @@ function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
 function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
- *  @param {Vector2} pointA         - Center of box A
- *  @param {Vector2} sizeA          - Size of box A
- *  @param {Vector2} pointB         - Center of box B
- *  @param {Vector2} [sizeB=(0,0)]  - Size of box B, a point if undefined
- *  @return {Boolean}               - True if overlapping
+ *  @param {Vector2} posA          - Center of box A
+ *  @param {Vector2} sizeA         - Size of box A
+ *  @param {Vector2} posB          - Center of box B
+ *  @param {Vector2} [sizeB=(0,0)] - Size of box B, a point if undefined
+ *  @return {Boolean}              - True if overlapping
  *  @memberof Utilities */
-function isOverlapping(pointA, sizeA, pointB, sizeB=vec2())
+function isOverlapping(posA, sizeA, posB, sizeB=vec2())
 { 
-    return abs(pointA.x - pointB.x)*2 < sizeA.x + sizeB.x 
-        && abs(pointA.y - pointB.y)*2 < sizeA.y + sizeB.y;
+    return abs(posA.x - posB.x)*2 < sizeA.x + sizeB.x 
+        && abs(posA.y - posB.y)*2 < sizeA.y + sizeB.y;
+}
+
+/** Returns true if a line segment is intersecting an axis aligned box
+ *  @param {Vector2} start - Start of raycast
+ *  @param {Vector2} end   - End of raycast
+ *  @param {Vector2} pos   - Center of box
+ *  @param {Vector2} size  - Size of box
+ *  @return {Boolean}      - True if intersecting
+ *  @memberof Utilities */
+function isIntersecting(start, end, pos, size)
+{
+    // Liang-Barsky algorithm
+    const boxMin = pos.subtract(size.scale(.5));
+    const boxMax = boxMin.add(size);
+    const delta = end.subtract(start);
+    const a = start.subtract(boxMin);
+    const b = start.subtract(boxMax);
+    const p = [-delta.x, delta.x, -delta.y, delta.y];
+    const q = [a.x, -b.x, a.y, -b.y];
+    let tMin = 0, tMax = 1;
+    for (let i = 4; i--;)
+    {
+        if (p[i])
+        {
+            const t = q[i] / p[i];
+            if (p[i] < 0)
+            {
+                if (t > tMax) return false;
+                tMin = max(t, tMin);
+            }
+            else
+            {
+                if (t < tMin) return false;
+                tMax = min(t, tMax);
+            }
+        }
+        else if (q[i] < 0)
+            return false;
+    }
+
+    return true;
 }
 
 /** Returns an oscillating wave between 0 and amplitude with frequency of 1 Hz by default
@@ -230,7 +271,7 @@ class RandomGenerator
         this.seed ^= this.seed << 13; 
         this.seed ^= this.seed >>> 17; 
         this.seed ^= this.seed << 5;
-        return valueB + (valueA - valueB) * abs(this.seed % 1e9) / 1e9;
+        return valueB + (valueA - valueB) * abs(this.seed % 1e8) / 1e8;
     }
 
     /** Returns a floored seeded random value the two values passed in
@@ -241,7 +282,7 @@ class RandomGenerator
 
     /** Randomly returns either -1 or 1 deterministically
     *  @return {Number} */
-    sign() { return this.int(2) * 2 - 1; }
+    sign() { return this.float() > .5 ? 1 : -1; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -289,6 +330,7 @@ class Vector2
      *  @param {Number} [y] - Y axis location */
     constructor(x=0, y=0)
     {
+        ASSERT(typeof x === 'number' && typeof y === 'number');
         /** @property {Number} - X axis location */
         this.x = x;
         /** @property {Number} - Y axis location */
@@ -615,12 +657,14 @@ class Color
      * @return {Color} */
     setHSLA(h=0, s=0, l=1, a=1)
     {
+        h = mod(h,1);
+        s = clamp(s);
+        l = clamp(l);
         const q = l < .5 ? l*(1+s) : l+s-l*s, p = 2*l-q,
             f = (p, q, t)=>
-                (t = ((t%1)+1)%1) < 1/6 ? p+(q-p)*6*t :
-                t < 1/2 ? q :
-                t < 2/3 ? p+(q-p)*(2/3-t)*6 : p;
-                
+                (t = mod(t,1))*6 < 1 ? p+(q-p)*6*t :
+                t*2 < 1 ? q :
+                t*3 < 2 ? p+(q-p)*(4-t*6) : p;
         this.r = f(p, q, h + 1/3);
         this.g = f(p, q, h);
         this.b = f(p, q, h - 1/3);
@@ -671,13 +715,12 @@ class Color
         ).clamp();
     }
 
-    /** Returns this color expressed as a hex color code
+    /** Returns this color expressed as a rgb color code
      * @param {Boolean} [useAlpha] - if alpha should be included in result
      * @return {String} */
-    toString(useAlpha = true)      
-    { 
-        const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
-        return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
+    toString(useAlpha = true)
+    {
+        return `rgb(${this.r*255},${this.g*255},${this.b*255},${useAlpha ? this.a : 0})`;
     }
 
     /** Set this color from a hex code
@@ -735,11 +778,11 @@ class Timer
 
     /** Returns true if set and has not elapsed
      * @return {Boolean} */
-    active() { return time <= this.time; }
+    active() { return time < this.time; }
 
     /** Returns true if set and elapsed
      * @return {Boolean} */
-    elapsed() { return time > this.time; }
+    elapsed() { return time >= this.time; }
 
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {Number} */

package/src/engineWebGL.js

@@ -30,6 +30,8 @@ let glShader, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData,
 // Initalize WebGL, called automatically by the engine
 function glInit()
 {
+    if (!glEnable || headlessMode) return;
+
     // create the canvas and textures
     glCanvas = document.createElement('canvas');
     glContext = glCanvas.getContext('webgl2');
@@ -42,11 +44,11 @@ function glInit()
         '#version 300 es\n' +     // specify GLSL ES version
         'precision highp float;'+ // use highp for better accuracy
         'uniform mat4 m;'+        // transform matrix
-        'in vec2 g;'+             // geometry
-        'in vec4 p,u,c,a;'+       // position/size, uvs, color, additiveColor
-        'in float r;'+            // rotation
-        'out vec2 v;'+            // return uv, color, additiveColor
-        'out vec4 d,e;'+          // return uv, color, additiveColor
+        'in vec2 g;'+             // in: geometry
+        'in vec4 p,u,c,a;'+       // in: position/size, uvs, color, additiveColor
+        'in float r;'+            // in: rotation
+        'out vec2 v;'+            // out: uv
+        'out vec4 d,e;'+          // out: color, additiveColor
         'void main(){'+           // shader entry point
         'vec2 s=(g-.5)*p.zw;'+    // get size offset
         'gl_Position=m*vec4(p.xy+s*cos(r)-vec2(-s.y,s)*sin(r),1,1);'+ // transform position
@@ -56,10 +58,10 @@ function glInit()
         ,
         '#version 300 es\n' +     // specify GLSL ES version
         'precision highp float;'+ // use highp for better accuracy
-        'in vec2 v;'+             // uv
-        'in vec4 d,e;'+           // color, additiveColor
         'uniform sampler2D s;'+   // texture
-        'out vec4 c;'+            // out color
+        'in vec2 v;'+             // in: uv
+        'in vec4 d,e;'+           // in: color, additiveColor
+        'out vec4 c;'+            // out: color
         'void main(){'+           // shader entry point
         'c=texture(s,v)*d+e;'+    // modulate texture by color plus additive
         '}'                       // end of shader
@@ -81,9 +83,11 @@ function glInit()
 // Setup render each frame, called automatically by engine
 function glPreRender()
 {
+    if (!glEnable || headlessMode) return;
+
     // clear and set to same size as main canvas
     glContext.viewport(0, 0, glCanvas.width=mainCanvas.width, glCanvas.height=mainCanvas.height);
-    glContext.clear(gl_COLOR_BUFFER_BIT);
+    //glContext.clear(gl_COLOR_BUFFER_BIT); // auto cleared when size is set
 
     // set up the shader
     glContext.useProgram(glShader);
@@ -117,12 +121,12 @@ function glPreRender()
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
     const p = vec2(-1).subtract(cameraPos.multiply(s));
     glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), false,
-        new Float32Array([
+        [
             s.x, 0,   0,   0,
             0,   s.y, 0,   0,
             1,   1,   1,   1,
             p.x, p.y, 0,   0
-        ])
+        ]
     );
 }
 
@@ -133,7 +137,7 @@ function glPreRender()
 function glSetTexture(texture)
 {
     // must flush cache with the old texture to set a new one
-    if (texture == glActiveTexture)
+    if (headlessMode || texture == glActiveTexture)
         return;
 
     glFlush();
@@ -193,7 +197,6 @@ function glCreateTexture(image)
     const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
-
     return texture;
 }
 
@@ -217,12 +220,12 @@ function glFlush()
 }
 
 /** Draw any sprites still in the buffer, copy to main canvas and clear
- *  @param {CanvasRenderingContext2D} context
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
  *  @param {Boolean} [forceDraw]
  *  @memberof WebGL */
 function glCopyToContext(context, forceDraw=false)
 {
-    if (!glInstanceCount && !forceDraw) return;
+    if (!glEnable || !glInstanceCount && !forceDraw) return;
 
     glFlush();
 
@@ -279,7 +282,7 @@ let glPostShader, glPostTexture, glPostIncludeOverlay;
 function glInitPostProcess(shaderCode, includeOverlay=false)
 {
     ASSERT(!glPostShader, 'can only have 1 post effects shader');
-
+    if (headlessMode) return;
     if (!shaderCode) // default shader pass through
         shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
 
@@ -318,8 +321,7 @@ function glInitPostProcess(shaderCode, includeOverlay=false)
 // Render the post processing shader, called automatically by the engine
 function glRenderPostProcess()
 {
-    if (!glPostShader)
-        return;
+    if (!glPostShader || headlessMode) return;
     
     // prepare to render post process shader
     if (glEnable)