littlejsengine 1.11.17 → 1.12.6

package/src/engineTileLayer.js

@@ -2,75 +2,47 @@
  * LittleJS Tile Layer System
  * - Caches arrays of tiles to off screen canvas for fast rendering
  * - Unlimited numbers of layers, allocates canvases as needed
- * - Interfaces with EngineObject for collision
- * - Collision layer is separate from visible layers
- * - It is recommended to have a visible layer that matches the collision
  * - Tile layers can be drawn to using their context with canvas2d
  * - Drawn directly to the main canvas without using WebGL
+ * - Tile layers can also have collision with EngineObjects
  * @namespace TileCollision
  */
 
 'use strict';
 
-/** The tile collision layer grid, use setTileCollisionData and getTileCollisionData to access
- *  @type {Array<number>} 
- *  @memberof TileCollision */
-let tileCollision = [];
-
-/** Size of the tile collision layer 2d grid
- *  @type {Vector2} 
- *  @memberof TileCollision */
-let tileCollisionSize = vec2();
+///////////////////////////////////////////////////////////////////////////////
+// Tile Layer System
 
-/** Clear and initialize tile collision
- *  @param {Vector2} size - width and height of tile collision 2d grid
+/** Keep track of all tile layers with collision
+ *  @type {Array<TileCollisionLayer>} 
  *  @memberof TileCollision */
-function initTileCollision(size)
-{
-    tileCollisionSize = size;
-    tileCollision = [];
-    for (let i=tileCollision.length = tileCollisionSize.area(); i--;)
-        tileCollision[i] = 0;
-}
-
-/** Set tile collision data for a given cell in the grid
- *  @param {Vector2} pos
- *  @param {number}  [data]
- *  @memberof TileCollision */
-function setTileCollisionData(pos, data=0)
-{
-    pos.arrayCheck(tileCollisionSize) && (tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
-}
+let tileCollisionLayers = [];
 
 /** Get tile collision data for a given cell in the grid
- *  @param {Vector2} pos
- *  @return {number}
- *  @memberof TileCollision */
+*  @param {Vector2} pos
+*  @return {number}
+*  @memberof TileCollision */
 function getTileCollisionData(pos)
 {
-    return pos.arrayCheck(tileCollisionSize) ? tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] : 0;
+    // check all tile collision layers
+    for (const layer of tileCollisionLayers)
+        if (pos.arrayCheck(layer.size))
+            return layer.getCollisionData(pos);
+    return 0;
 }
 
-/** Check if collision with another object should occur
+/** Check if a tile layer collides with another object
  *  @param {Vector2}      pos
  *  @param {Vector2}      [size=(0,0)]
  *  @param {EngineObject} [object]
- *  @return {boolean}
+ *  @return {TileCollisionLayer}
  *  @memberof TileCollision */
 function tileCollisionTest(pos, size=vec2(), object)
 {
-    const minX = max(pos.x - size.x/2|0, 0);
-    const minY = max(pos.y - size.y/2|0, 0);
-    const maxX = min(pos.x + size.x/2, tileCollisionSize.x);
-    const maxY = min(pos.y + size.y/2, tileCollisionSize.y);
-    for (let y = minY; y < maxY; ++y)
-    for (let x = minX; x < maxX; ++x)
-    {
-        const tileData = tileCollision[y*tileCollisionSize.x+x];
-        if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
-            return true;
-    }
-    return false;
+    // check all tile collision layers
+    for (const layer of tileCollisionLayers)
+        if (layer.collisionTest(pos, size, object))
+            return layer;
 }
 
 /** Return the center of first tile hit, undefined if nothing was hit.
@@ -82,49 +54,17 @@ function tileCollisionTest(pos, size=vec2(), object)
  *  @memberof TileCollision */
 function tileCollisionRaycast(posStart, posEnd, object)
 {
-    // test if a ray collides with tiles from start to end
-    // todo: a way to get the exact hit point, it must still be inside the hit tile
-    const delta = posEnd.subtract(posStart);
-    const totalLength = delta.length();
-    const normalizedDelta = delta.normalize();
-    const unit = vec2(abs(1/normalizedDelta.x), abs(1/normalizedDelta.y));
-    const flooredPosStart = posStart.floor();
-
-    // setup iteration variables
-    let pos = flooredPosStart;
-    let xi = unit.x * (delta.x < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1);
-    let yi = unit.y * (delta.y < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1);
-
-    while (true)
+    // check all tile collision layers
+    for (const layer of tileCollisionLayers)
     {
-        // check for tile collision
-        const tileData = getTileCollisionData(pos);
-        if (tileData && (!object || object.collideWithTile(tileData, pos)))
-        {
-            debugRaycast && debugLine(posStart, posEnd, '#f00', .02);
-            debugRaycast && debugPoint(pos.add(vec2(.5)), '#ff0');
-            return pos.add(vec2(.5));
-        }
-
-        // check if past the end
-        if (xi > totalLength && yi > totalLength)
-            break;
-
-        // get coordinates of the next tile to check
-        if (xi > yi)
-            pos.y += sign(delta.y), yi += unit.y;
-        else
-            pos.x += sign(delta.x), xi += unit.x;
+        const hitPos = layer.collisionRaycast(posStart, posEnd, object)
+        if (hitPos)
+            return hitPos;
     }
-
-    debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
 }
 
-///////////////////////////////////////////////////////////////////////////////
-// Tile Layer Rendering System
-
 /**
- * Tile layer data object stores info about how to render a tile
+ * Tile layer data object stores info about how to draw a tile
  * @example
  * // create tile layer data with tile index 0 and random orientation and color
  * const tileIndex = 0;
@@ -156,28 +96,27 @@ class TileLayerData
     clear() { this.tile = this.direction = 0; this.mirror = false; this.color = new Color; }
 }
 
+///////////////////////////////////////////////////////////////////////////////
 /**
  * Tile Layer - cached rendering system for tile layers
  * - Each Tile layer is rendered to an off screen canvas
  * - To allow dynamic modifications, layers are rendered using canvas 2d
  * - Some devices like mobile phones are limited to 4k texture resolution
- * - So with 16x16 tiles this limits layers to 256x256 on mobile devices
+ * - For with 16x16 tiles this limits layers to 256x256 on mobile devices
  * @extends EngineObject
  * @example
- * // create tile collision and visible tile layer
- * initTileCollision(vec2(200,100));
- * const tileLayer = new TileLayer();
+ * const tileLayer = new TileLayer(vec2(), vec2(200,100));
  */
 class TileLayer extends EngineObject
 {
     /** Create a tile layer object
-    *  @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=(1,1)] - How much to scale this layer when rendered
-    *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
+    *  @param {Vector2}  [position=(0,0)] - World space position
+    *  @param {Vector2}  [size=(1,1)]     - World space size
+    *  @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)
+    constructor(position, size, tileInfo=tile(), scale=vec2(1), renderOrder=0)
     {
         super(position, size, tileInfo, 0, undefined, renderOrder);
 
@@ -189,6 +128,10 @@ class TileLayer extends EngineObject
         this.scale = scale;
         /** @property {boolean} - If true this layer will render to overlay canvas and appear above all objects */
         this.isOverlay = false;
+        // set no friction by default, applied friction is max of both objects
+        this.friction = 0;
+        // set no elasticity by default, applied elasticity is max of both objects
+        this.elasticity = 0;
 
         // init tile data
         this.data = [];
@@ -385,4 +328,144 @@ class TileLayer extends EngineObject
      *  @param {number}  [angle=0] */
     drawRect(pos, size, color, angle) 
     { this.drawTile(pos, size, undefined, color, angle); }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Tile Collision Layer - a tile layer with collision
+ * - adds collision data and functions to TileLayer
+ * - there can be multiple tile collision layers
+ * - tile collison layers should not overlap each other
+ * @extends TileLayer
+ */
+class TileCollisionLayer extends TileLayer
+{
+    /** Create a tile layer object
+    *  @param {Vector2}  [position=(0,0)] - World space position
+    *  @param {Vector2}  [size=(0,0)]     - World space size
+    *  @param {TileInfo} [tileInfo]       - Tile info for layer
+    *  @param {number}   [renderOrder]    - Objects are sorted by renderOrder
+    */
+    constructor(position, size, tileInfo=tile(), renderOrder=0)
+    {
+        const scale = vec2(1); // collision layers are not scaled
+        super(position, size.floor(), tileInfo, scale, renderOrder);
+
+        /** @property {Array<number>} - The tile collision grid */
+        this.collisionData = [];
+        this.initCollision(this.size);
+
+        // keep track of all collision layers
+        tileCollisionLayers.push(this);
+    }
+
+    /** Destroy this collision layer */
+    destroy()
+    { 
+        if (this.destroyed)
+            return;
+
+        // remove from collision layers array and destroy
+        const index = tileCollisionLayers.indexOf(this);
+        ASSERT(index >= 0, 'tile collision layer not found in array');
+        tileCollisionLayers.splice(index, 1);
+        super.destroy();
+    }
+
+    /** Clear and initialize tile collision to new size
+    *  @param {Vector2} size - width and height of tile collision 2d grid */
+    initCollision(size)
+    {
+        this.size = size.floor();
+        this.collisionData = [];
+        this.collisionData.length = size.area();
+        this.collisionData.fill(0);
+    }
+
+    /** Set tile collision data for a given cell in the grid
+    *  @param {Vector2} pos
+    *  @param {number}  [data] */
+    setCollisionData(pos, data=1)
+    {
+        const i = (pos.y|0)*this.size.x + pos.x|0;
+        pos.arrayCheck(this.size) && (this.collisionData[i] = data);
+    }
+
+    /** Get tile collision data for a given cell in the grid
+    *  @param {Vector2} pos
+    *  @return {number} */
+    getCollisionData(pos)
+    {
+        const i = (pos.y|0)*this.size.x + pos.x|0;
+        return pos.arrayCheck(this.size) ? this.collisionData[i] : 0;
+    }
+
+    /** Check if collision with another object should occur
+    *  @param {Vector2}      pos
+    *  @param {Vector2}      [size=(0,0)]
+    *  @param {EngineObject} [object]
+    *  @return {boolean} */
+    collisionTest(pos, size=vec2(), object)
+    {
+        const minX = max(pos.x - size.x/2|0, 0);
+        const minY = max(pos.y - size.y/2|0, 0);
+        const maxX = min(pos.x + size.x/2, this.size.x);
+        const maxY = min(pos.y + size.y/2, this.size.y);
+        for (let y = minY; y < maxY; ++y)
+        for (let x = minX; x < maxX; ++x)
+        {
+            // check if the object should collide with this tile
+            const tileData = this.collisionData[y*this.size.x+x];
+            if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
+                return true;
+        }
+        return false;
+    }
+
+    /** Return the center of first tile hit, undefined if nothing was hit.
+    *  This does not return the exact intersection, but the center of the tile hit.
+    *  @param {Vector2}      posStart
+    *  @param {Vector2}      posEnd
+    *  @param {EngineObject} [object]
+    *  @return {Vector2} */
+    collisionRaycast(posStart, posEnd, object)
+    {
+        // test if a ray collides with tiles from start to end
+        // todo: a way to get the exact hit point, it must still be inside the hit tile
+        const delta = posEnd.subtract(posStart);
+        const totalLength = delta.length();
+        const normalizedDelta = delta.normalize();
+        const unit = vec2(abs(1/normalizedDelta.x), abs(1/normalizedDelta.y));
+        const flooredPosStart = posStart.floor();
+
+        // setup iteration variables
+        let pos = flooredPosStart;
+        let xi = unit.x * (delta.x < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1);
+        let yi = unit.y * (delta.y < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1);
+
+        // use line drawing algorithm to test for collisions
+        while (true)
+        {
+            // check for tile collision
+            const tileData = this.getCollisionData(pos);
+            if (tileData && (!object || object.collideWithTile(tileData, pos)))
+            {
+                debugRaycast && debugLine(posStart, posEnd, '#f00', .02);
+                debugRaycast && debugPoint(pos.add(vec2(.5)), '#ff0');
+                return pos.add(vec2(.5));
+            }
+
+            // check if past the end
+            if (xi > totalLength && yi > totalLength)
+                break;
+
+            // get coordinates of next tile to check
+            if (xi > yi)
+                pos.y += sign(delta.y), yi += unit.y;
+            else
+                pos.x += sign(delta.x), xi += unit.x;
+        }
+
+        debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
+    }
 }

package/src/engineUtilities.js

@@ -189,6 +189,16 @@ function wave(frequency=1, amplitude=1, t=time)
  *  @memberof Utilities */
 function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
 
+/** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
+ *  @param {string} url - URL of JSON file
+ *  @return {Promise<object>}
+ *  @memberof Utilities */
+async function fetchJSON(url)
+{
+    const response = await fetch(url);
+    return response.json();
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Random global functions
@@ -284,6 +294,12 @@ class RandomGenerator
     /** Randomly returns either -1 or 1 deterministically
     *  @return {number} */
     sign() { return this.float() > .5 ? 1 : -1; }
+
+    /** Returns a seeded random value between the two values passed in with a random sign
+    *  @param {number} [valueA]
+    *  @param {number} [valueB]
+    *  @return {number} */
+    floatSign(valueA=1, valueB=0) { return this.float(valueA, valueB) * this.sign(); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/src/engineWebGL.js

@@ -210,7 +210,19 @@ function glCreateTexture(image)
     const texture = glContext.createTexture();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     if (image && image.width)
+    {
         glSetTextureData(texture, image);
+        
+        const isPowerOfTwo = (value)=> !(value & (value - 1));
+        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;
+        }
+    }
     else
     {
         // create a white texture
@@ -218,7 +230,7 @@ function glCreateTexture(image)
         glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
     }
     
-    // use point filtering for pixelated rendering
+    // 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);