littlejsengine 1.9.0 → 1.9.2

package/src/engineTileLayer.js

@@ -53,7 +53,7 @@ function getTileCollisionData(pos)
 
 /** Check if collision with another object should occur
  *  @param {Vector2}      pos
- *  @param {Vector2}      [size=Vector2(1,1)]
+ *  @param {Vector2}      [size=(1,1)]
  *  @param {EngineObject} [object]
  *  @return {Boolean}
  *  @memberof TileCollision */
@@ -138,7 +138,7 @@ class TileLayerData
      *  @param {Number}  [direction] - Integer direction of tile, in 90 degree increments
      *  @param {Boolean} [mirror]    - If the tile should be mirrored along the x axis
      *  @param {Color}   [color]     - Color of the tile */
-    constructor(tile, direction=0, mirror=false, color=new Color())
+    constructor(tile, direction=0, mirror=false, color=new Color)
     {
         /** @property {Number}  - The tile to use, untextured if undefined */
         this.tile      = tile;
@@ -169,11 +169,11 @@ class TileLayerData
 class TileLayer extends EngineObject
 {
     /** Create a tile layer object
-    *  @param {Vector2}  [position=Vector2()]     - World space position
+    *  @param {Vector2}  [position=(0,0)]     - World space position
     *  @param {Vector2}  [size=tileCollisionSize] - World space size
-    *  @param {TileInfo} [tileInfo]               - Tile info for layer
-    *  @param {Vector2}  [scale=Vector2(1,1)]     - How much to scale this layer when rendered
-    *  @param {Number}   [renderOrder]            - Objects sorted by renderOrder before being rendered
+    *  @param {TileInfo} [tileInfo]    - Tile info for layer
+    *  @param {Vector2}  [scale=(1,1)] - How much to scale this layer when rendered
+    *  @param {Number}   [renderOrder] - Objects are sorted by renderOrder
     */
     constructor(position, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderOrder=0)
     {
@@ -234,16 +234,18 @@ class TileLayer extends EngineObject
     }
 
     /** Draw all the tile data to an offscreen canvas 
-     *  - This may be slow in some browsers
-    */
+     *  - This may be slow in some browsers but only needs to be done once */
     redraw()
     {
         this.redrawStart(true);
-        this.drawAllTileData();
+        for (let x = this.size.x; x--;)
+        for (let y = this.size.y; y--;)
+            this.drawTileData(vec2(x,y), false);
         this.redrawEnd();
     }
 
     /** Call to start the redraw process
+     *  - This can be used to manually update small parts of the level
      *  @param {Boolean} [clear] - Should it clear the canvas before drawing */
     redrawStart(clear=false)
     {
@@ -251,17 +253,19 @@ class TileLayer extends EngineObject
         /** @type {[HTMLCanvasElement, CanvasRenderingContext2D, Vector2, Vector2, number]} */
         this.savedRenderSettings = [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale];
 
-        // hack: use normal rendering system to render the tiles
+        // use webgl rendering system to render the tiles if enabled
+        // this works by temporally taking control of the rendering system
         mainCanvas = this.canvas;
         mainContext = this.context;
+        mainCanvasSize = this.size.multiply(this.tileInfo.size);
         cameraPos = this.size.scale(.5);
         cameraScale = this.tileInfo.size.x;
 
         if (clear)
         {
             // clear and set size
-            mainCanvas.width  = this.size.x * this.tileInfo.size.x;
-            mainCanvas.height = this.size.y * this.tileInfo.size.y;
+            mainCanvas.width  = mainCanvasSize.x;
+            mainCanvas.height = mainCanvasSize.y;
         }
 
         // begin a new render for the tile canvas
@@ -279,32 +283,33 @@ class TileLayer extends EngineObject
         [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
     }
 
-    /** Draw the tile at a given position
-     *  @param {Vector2} layerPos */
-    drawTileData(layerPos)
+    /** Draw the tile at a given position in the tile grid
+     *  This can be used to clear out tiles when they are destroyed
+     *  Tiles can also be redrawn if isinde a redrawStart/End block
+     *  @param {Vector2} layerPos 
+     *  @param {Boolean} [clear] - should the old tile be cleared out
+     */
+    drawTileData(layerPos, clear=true)
     {
-        // first clear out where the tile was
-        const pos = layerPos.floor().add(this.pos).add(vec2(.5));
-        this.drawCanvas2D(pos, vec2(1), 0, false, (context)=>context.clearRect(-.5, -.5, 1, 1));
+        // clear out where the tile was, for full opaque tiles this can be skipped
+        const s = this.tileInfo.size;
+        if (clear)
+        {
+            const pos = layerPos.multiply(s);
+            this.context.clearRect(pos.x, this.canvas.height-pos.y, s.x, -s.y);
+        }
 
         // draw the tile if not undefined
         const d = this.getData(layerPos);
         if (d.tile != undefined)
         {
+            const pos = this.pos.add(layerPos).add(vec2(.5));
             ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
-            const tileInfo = tile(d.tile, this.tileInfo.size, this.tileInfo.textureIndex);
+            const tileInfo = tile(d.tile, s, this.tileInfo.textureIndex);
             drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
         }
     }
 
-    /** Draw all the tiles in this layer */
-    drawAllTileData()
-    {
-        for (let x = this.size.x; x--;)
-        for (let y = this.size.y; y--;)
-             this.drawTileData(vec2(x,y));
-    }
-
     /** Draw directly to the 2D canvas in world space (bipass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
@@ -324,11 +329,11 @@ class TileLayer extends EngineObject
         context.restore();
     }
 
-    /** Draw a tile directly onto the layer canvas
+    /** Draw a tile directly onto the layer canvas in world space
      *  @param {Vector2}  pos
-     *  @param {Vector2}  [size=Vector2(1,1)]
+     *  @param {Vector2}  [size=(1,1)]
      *  @param {TileInfo} [tileInfo]
-     *  @param {Color}    [color=Color()]
+     *  @param {Color}    [color=(1,1,1,1)]
      *  @param {Number}   [angle=0]
      *  @param {Boolean}  [mirror=0] */
     drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
@@ -353,10 +358,10 @@ class TileLayer extends EngineObject
         });
     }
 
-    /** Draw a rectangle directly onto the layer canvas
+    /** Draw a rectangle directly onto the layer canvas in world space
      *  @param {Vector2} pos
-     *  @param {Vector2} [size=Vector2(1,1)]
-     *  @param {Color}   [color=Color()]
+     *  @param {Vector2} [size=(1,1)]
+     *  @param {Color}   [color=(1,1,1,1)]
      *  @param {Number}  [angle=0] */
     drawRect(pos, size, color, angle) 
     { this.drawTile(pos, size, undefined, color, angle); }

package/src/engineUtilities.js

@@ -121,13 +121,13 @@ 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   - Size of box B
- *  @return {Boolean}        - True if 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
  *  @memberof Utilities */
-function isOverlapping(pointA, sizeA, pointB, sizeB)
+function isOverlapping(pointA, sizeA, pointB, sizeB=vec2())
 { 
     return abs(pointA.x - pointB.x)*2 < sizeA.x + sizeB.x 
         && abs(pointA.y - pointB.y)*2 < sizeA.y + sizeB.y;
@@ -187,8 +187,8 @@ function randInCircle(radius=1, minRadius=0)
 { return radius > 0 ? randVector(radius * rand(minRadius / radius, 1)**.5) : new Vector2; }
 
 /** Returns a random color between the two passed in colors, combine components if linear
- *  @param {Color}   [colorA=Color()]
- *  @param {Color}   [colorB=Color(0,0,0,1)]
+ *  @param {Color}   [colorA=(1,1,1,1)]
+ *  @param {Color}   [colorB=(0,0,0,1)]
  *  @param {Boolean} [linear]
  *  @return {Color}
  *  @memberof Random */
@@ -259,7 +259,11 @@ class RandomGenerator
  * @memberof Utilities
  */
 function vec2(x=0, y)
-{ return typeof x === 'number'? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y); }
+{
+    return typeof x === 'number' ? 
+        new Vector2(x, y == undefined? x : y) : 
+        new Vector2(x.x, x.y);
+}
 
 /** 
  * Check if object is a valid Vector2
@@ -267,7 +271,7 @@ function vec2(x=0, y)
  * @return {Boolean}
  * @memberof Utilities
  */
-function isVector2(v) { return typeof v === 'object' && typeof v.x === 'number' && typeof v.y === 'number'; }
+function isVector2(v) { return v instanceof Vector2; }
 
 /** 
  * 2D Vector object with vector math library
@@ -298,27 +302,47 @@ class Vector2
     /** Returns a copy of this vector plus the vector passed in
      *  @param {Vector2} v - other vector
      *  @return {Vector2} */
-    add(v) { ASSERT(isVector2(v)); return new Vector2(this.x + v.x, this.y + v.y); }
+    add(v)
+    {
+        ASSERT(isVector2(v));
+        return new Vector2(this.x + v.x, this.y + v.y);
+    }
 
     /** Returns a copy of this vector minus the vector passed in
      *  @param {Vector2} v - other vector
      *  @return {Vector2} */
-    subtract(v) { ASSERT(isVector2(v)); return new Vector2(this.x - v.x, this.y - v.y); }
+    subtract(v)
+    {
+        ASSERT(isVector2(v));
+        return new Vector2(this.x - v.x, this.y - v.y);
+    }
 
     /** Returns a copy of this vector times the vector passed in
      *  @param {Vector2} v - other vector
      *  @return {Vector2} */
-    multiply(v) { ASSERT(isVector2(v)); return new Vector2(this.x * v.x, this.y * v.y); }
+    multiply(v)
+    {
+        ASSERT(isVector2(v));
+        return new Vector2(this.x * v.x, this.y * v.y);
+    }
 
     /** Returns a copy of this vector divided by the vector passed in
      *  @param {Vector2} v - other vector
      *  @return {Vector2} */
-    divide(v) { ASSERT(isVector2(v)); return new Vector2(this.x / v.x, this.y / v.y); }
+    divide(v)
+    {
+        ASSERT(isVector2(v));
+        return new Vector2(this.x / v.x, this.y / v.y);
+    }
 
     /** Returns a copy of this vector scaled by the vector passed in
      *  @param {Number} s - scale
      *  @return {Vector2} */
-    scale(s) { ASSERT(!isVector2(s)); return new Vector2(this.x * s, this.y * s); }
+    scale(s)
+    {
+        ASSERT(!isVector2(s));
+        return new Vector2(this.x * s, this.y * s);
+    }
 
     /** Returns the length of this vector
      * @return {Number} */
@@ -331,32 +355,56 @@ class Vector2
     /** Returns the distance from this vector to vector passed in
      * @param {Vector2} v - other vector
      * @return {Number} */
-    distance(v) { return this.distanceSquared(v)**.5; }
+    distance(v)
+    {
+        ASSERT(isVector2(v));
+        return this.distanceSquared(v)**.5;
+    }
 
     /** Returns the distance squared from this vector to vector passed in
      * @param {Vector2} v - other vector
      * @return {Number} */
-    distanceSquared(v) { return (this.x - v.x)**2 + (this.y - v.y)**2; }
+    distanceSquared(v)
+    {
+        ASSERT(isVector2(v));
+        return (this.x - v.x)**2 + (this.y - v.y)**2;
+    }
 
     /** Returns a new vector in same direction as this one with the length passed in
      * @param {Number} [length]
      * @return {Vector2} */
-    normalize(length=1) { const l = this.length(); return l ? this.scale(length/l) : new Vector2(0, length); }
+    normalize(length=1)
+    {
+        const l = this.length();
+        return l ? this.scale(length/l) : new Vector2(0, length);
+    }
 
     /** Returns a new vector clamped to length passed in
      * @param {Number} [length]
      * @return {Vector2} */
-    clampLength(length=1) { const l = this.length(); return l > length ? this.scale(length/l) : this; }
+    clampLength(length=1)
+    {
+        const l = this.length();
+        return l > length ? this.scale(length/l) : this;
+    }
 
     /** Returns the dot product of this and the vector passed in
      * @param {Vector2} v - other vector
      * @return {Number} */
-    dot(v) { ASSERT(isVector2(v)); return this.x*v.x + this.y*v.y; }
+    dot(v)
+    {
+        ASSERT(isVector2(v));
+        return this.x*v.x + this.y*v.y;
+    }
 
     /** Returns the cross product of this and the vector passed in
      * @param {Vector2} v - other vector
      * @return {Number} */
-    cross(v) { ASSERT(isVector2(v)); return this.x*v.y - this.y*v.x; }
+    cross(v)
+    {
+        ASSERT(isVector2(v));
+        return this.x*v.y - this.y*v.x;
+    }
 
     /** Returns the angle of this vector, up is angle 0
      * @return {Number} */
@@ -367,7 +415,11 @@ class Vector2
      * @param {Number} [length]
      * @return {Vector2} */
     setAngle(angle=0, length=1) 
-    { this.x = length*Math.sin(angle); this.y = length*Math.cos(angle); return this; }
+    {
+        this.x = length*Math.sin(angle);
+        this.y = length*Math.cos(angle);
+        return this;
+    }
 
     /** Returns copy of this vector rotated by the angle passed in
      * @param {Number} angle
@@ -378,9 +430,20 @@ class Vector2
         return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
     }
 
+    /** Set the integer direction of this vector, corrosponding to multiples of 90 degree rotation (0-3)
+     * @param {Number} [direction]
+     * @param {Number} [length] */
+    setDirection(direction, length=1)
+    {
+        ASSERT(direction==0 || direction==1 || direction==2 || direction==3);
+        return vec2(direction%2 ? direction-1 ? -length : length : 0, 
+            direction%2 ? 0 : direction ? -length : length);
+    }
+
     /** Returns the integer direction of this vector, corrosponding to multiples of 90 degree rotation (0-3)
      * @return {Number} */
-    direction() { return abs(this.x) > abs(this.y) ? this.x < 0 ? 3 : 1 : this.y < 0 ? 2 : 0; }
+    direction()
+    { return abs(this.x) > abs(this.y) ? this.x < 0 ? 3 : 1 : this.y < 0 ? 2 : 0; }
 
     /** Returns a copy of this vector that has been inverted
      * @return {Vector2} */
@@ -399,24 +462,34 @@ class Vector2
      * @param {Number}  percent
      * @return {Vector2} */
     lerp(v, percent)
-    { ASSERT(isVector2(v)); return this.add(v.subtract(this).scale(clamp(percent))); }
+    {
+        ASSERT(isVector2(v));
+        return this.add(v.subtract(this).scale(clamp(percent)));
+    }
 
     /** Returns true if this vector is within the bounds of an array size passed in
      * @param {Vector2} arraySize
      * @return {Boolean} */
-    arrayCheck(arraySize) { return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y; }
+    arrayCheck(arraySize)
+    {
+        ASSERT(isVector2(arraySize));
+        return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y;
+    }
 
     /** Returns this vector expressed as a string
      * @param {Number} digits - precision to display
      * @return {String} */
     toString(digits=3) 
-    { if (debug) { return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`; }}
+    {
+        if (debug)
+            return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`;
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
 /** 
- * Create a color object with RGBA values
+ * Create a color object with RGBA values, white by default
  * @param {Number} [r=1] - red
  * @param {Number} [g=1] - green
  * @param {Number} [b=1] - blue
@@ -427,7 +500,7 @@ class Vector2
 function rgb(r, g, b, a) { return new Color(r, g, b, a); }
 
 /** 
- * Create a color object with HSLA values
+ * Create a color object with HSLA values, white by default
  * @param {Number} [h=0] - hue
  * @param {Number} [s=0] - saturation
  * @param {Number} [l=1] - lightness
@@ -437,14 +510,22 @@ function rgb(r, g, b, a) { return new Color(r, g, b, a); }
  */
 function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
 
+/** 
+ * Check if object is a valid Color
+ * @param {any} c
+ * @return {Boolean}
+ * @memberof Utilities
+ */
+function isColor(c) { return c instanceof Color; }
+
 /** 
  * Color object (red, green, blue, alpha) with some helpful functions
  * @example
  * let a = new Color;              // white
  * let b = new Color(1, 0, 0);     // red
  * let c = new Color(0, 0, 0, 0);  // transparent black
- * let d = RGB(0, 0, 1);           // blue using rgb color
- * let e = HSL(.3, 1, .5);         // green using hsl color
+ * let d = rgb(0, 0, 1);           // blue using rgb color
+ * let e = hsl(.3, 1, .5);         // green using hsl color
  */
 class Color
 {
@@ -472,22 +553,38 @@ class Color
     /** Returns a copy of this color plus the color passed in
      * @param {Color} c - other color
      * @return {Color} */
-    add(c) { return new Color(this.r+c.r, this.g+c.g, this.b+c.b, this.a+c.a); }
+    add(c)
+    {
+        ASSERT(isColor(c));
+        return new Color(this.r+c.r, this.g+c.g, this.b+c.b, this.a+c.a);
+    }
 
     /** Returns a copy of this color minus the color passed in
      * @param {Color} c - other color
      * @return {Color} */
-    subtract(c) { return new Color(this.r-c.r, this.g-c.g, this.b-c.b, this.a-c.a); }
+    subtract(c)
+    {
+        ASSERT(isColor(c));
+        return new Color(this.r-c.r, this.g-c.g, this.b-c.b, this.a-c.a);
+    }
 
     /** Returns a copy of this color times the color passed in
      * @param {Color} c - other color
      * @return {Color} */
-    multiply(c) { return new Color(this.r*c.r, this.g*c.g, this.b*c.b, this.a*c.a); }
+    multiply(c)
+    {
+        ASSERT(isColor(c));
+        return new Color(this.r*c.r, this.g*c.g, this.b*c.b, this.a*c.a);
+    }
 
     /** Returns a copy of this color divided by the color passed in
      * @param {Color} c - other color
      * @return {Color} */
-    divide(c) { return new Color(this.r/c.r, this.g/c.g, this.b/c.b, this.a/c.a); }
+    divide(c)
+    {
+        ASSERT(isColor(c));
+        return new Color(this.r/c.r, this.g/c.g, this.b/c.b, this.a/c.a);
+    }
 
     /** Returns a copy of this color scaled by the value passed in, alpha can be scaled separately
      * @param {Number} scale
@@ -504,7 +601,11 @@ class Color
      * @param {Color}  c - other color
      * @param {Number} percent
      * @return {Color} */
-    lerp(c, percent) { return this.add(c.subtract(this).scale(clamp(percent))); }
+    lerp(c, percent)
+    {
+        ASSERT(isColor(c));
+        return this.add(c.subtract(this).scale(clamp(percent)));
+    }
 
     /** Sets this color given a hue, saturation, lightness, and alpha
      * @param {Number} [h] - hue

package/src/engineWebGL.js

@@ -248,8 +248,10 @@ function glCopyToContext(context, forceDraw=false)
  *  @memberof WebGL */
 function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
 {
+    ASSERT(typeof rgba == 'number' && typeof rgbaAdditive == 'number', 'invalid color');
+
     // flush if there is not enough room or if different blend mode
-    if (glInstanceCount >= gl_MAX_INSTANCES-1 || glBatchAdditive != glAdditive)
+    if (glInstanceCount >= gl_MAX_INSTANCES || glBatchAdditive != glAdditive)
         glFlush();
 
     let offset = glInstanceCount * gl_INDICIES_PER_INSTANCE;
@@ -276,7 +278,7 @@ let glPostShader, glPostArrayBuffer, glPostTexture, glPostIncludeOverlay;
  *  @param {String} shaderCode
  *  @param {Boolean} includeOverlay
  *  @memberof WebGL */
-function glInitPostProcess(shaderCode, includeOverlay)
+function glInitPostProcess(shaderCode, includeOverlay=false)
 {
     ASSERT(!glPostShader, 'can only have 1 post effects shader');
 
@@ -312,6 +314,8 @@ function glInitPostProcess(shaderCode, includeOverlay)
 
     // hide the original 2d canvas
     mainCanvas.style.visibility = 'hidden';
+    if (glPostIncludeOverlay)
+        overlayCanvas.style.visibility = 'hidden';
 }
 
 // Render the post processing shader, called automatically by the engine
@@ -332,14 +336,8 @@ function glRenderPostProcess()
         glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
     }
 
-    if (glPostIncludeOverlay)
-    {
-        // copy overlay canvas so it will be included in post processing
-        mainContext.drawImage(overlayCanvas, 0, 0);
-
-        // clear overlay canvas
-        overlayCanvas.width = mainCanvas.width;
-    }
+    // copy overlay canvas so it will be included in post processing
+    glPostIncludeOverlay && mainContext.drawImage(overlayCanvas, 0, 0);
 
     // setup shader program to draw one triangle
     glContext.useProgram(glPostShader);