littlejsengine 1.14.16 → 1.14.23

package/src/engineTileLayer.js

@@ -47,23 +47,22 @@ function tileCollisionTest(pos, size=vec2(), object, solidOnly=true)
     }
 }
 
-/** 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.
+/** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
  *  @param {Vector2}      posStart
  *  @param {Vector2}      posEnd
  *  @param {EngineObject} [object] - An object or undefined for generic test
+ *  @param {Vector2}      [normal] - Optional normal of the surface hit
  *  @param {boolean}      [solidOnly=true] - Only check solid layers if true
- *  @return {Vector2}
+ *  @return {Vector2|undefined} - position of the center of the tile hit or undefined if no hit
  *  @memberof TileLayers */
-function tileCollisionRaycast(posStart, posEnd, object, solidOnly=true)
+function tileCollisionRaycast(posStart, posEnd, object, normal, solidOnly=true)
 {
     for (const layer of tileCollisionLayers)
     {
         if (!solidOnly || layer.isSolid)
         {
-            const hitPos = layer.collisionRaycast(posStart, posEnd, object)
-            if (hitPos)
-                return hitPos;
+            const hitPos = layer.collisionRaycast(posStart, posEnd, object, normal)
+            if (hitPos) return hitPos;
         }
     }
 }
@@ -197,10 +196,15 @@ class CanvasLayer extends EngineObject
         /** @property {HTMLCanvasElement} - The canvas used by this layer */
         this.canvas = headlessMode ? undefined : new OffscreenCanvas(canvasSize.x, canvasSize.y);
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this layer */
-        this.context = headlessMode ? undefined : this.canvas.getContext('2d');
-        /** @property {WebGLTexture} - Texture if using WebGL for this layer, call useWebGL to enable */
-        this.glTexture = undefined;
-        this.gravityScale = 0; // disable gravity by default for canvas layers
+        this.context = this.canvas?.getContext('2d');
+        /** @property {TextureInfo} - Texture info to use for this object rendering */
+        const useWebGL = false; // do not use webgl by default
+        this.textureInfo = new TextureInfo(this.canvas, useWebGL);
+        /** @property {boolean} - True if WebGL texture needs to be refreshed */
+        this.refreshWebGL = false;
+
+        // disable physics by default
+        this.mass = this.gravityScale = this.friction = this.restitution = 0;
     }
 
     /** Destroy this canvas layer */
@@ -209,9 +213,7 @@ class CanvasLayer extends EngineObject
         if (this.destroyed)
             return;
 
-        // free up the WebGL texture
-        if (this.glTexture)
-            glDeleteTexture(this.glTexture);
+        this.textureInfo.destroyWebGLTexture();
         super.destroy();
     }
 
@@ -233,9 +235,16 @@ class CanvasLayer extends EngineObject
     *  @memberof Draw */
     draw(pos, size, angle=0, color=WHITE, mirror=false, additiveColor, screenSpace=false, context)
     {
+        const useWebGL = glEnable && this.textureInfo.hasWebGL();
+        if (useWebGL && this.refreshWebGL)
+        {
+            // update the WebGL texture
+            this.textureInfo.createWebGLTexture();
+            this.refreshWebGL = false;
+        }
+
         // draw the canvas layer as a single tile that uses the whole texture
-        const useWebGL = glEnable && this.glTexture !== undefined;
-        const tileInfo = new TileInfo().setFullImage(this.canvas, this.glTexture);
+        const tileInfo = new TileInfo().setFullImage(this.textureInfo);
         drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebGL, screenSpace, context);
     }
 
@@ -253,6 +262,8 @@ class CanvasLayer extends EngineObject
      *  @param {Canvas2DDrawCallback} drawFunction */
     drawCanvas2D(pos, size, angle, mirror, drawFunction)
     {
+        if (!this.context) return;
+
         const context = this.context;
         context.save();
         pos = pos.subtract(this.pos).multiply(this.tileInfo.size);
@@ -302,18 +313,22 @@ class CanvasLayer extends EngineObject
     { this.drawTile(pos, size, undefined, color, angle); }
 
     /** Create or update the WebGL texture for this layer
-     *  @param {boolean} [enable] - enable WebGL rendering and update the texture */
-    useWebGL(enable=true)
+     *  @param {boolean} [enable] - enable WebGL rendering and update the texture 
+     *  @param {boolean} [immediate] - shoulkd the texture be updated immediately
+     */
+    useWebGL(enable=true, immediate=false)
     {
-        if (glEnable && enable)
+        if (!immediate && enable && this.textureInfo.hasWebGL())
         {
-            if (this.glTexture)
-                glSetTextureData(this.glTexture, this.canvas);
-            else
-                this.glTexture = glCreateTexture(this.canvas);
+            // refresh the texture when needed
+            this.refreshWebGL = true;
+            return;
         }
+
+        if (enable)
+            this.textureInfo.createWebGLTexture();
         else
-            this.glTexture = undefined;
+            this.textureInfo.destroyWebGLTexture();
     }
 }
 
@@ -337,24 +352,14 @@ class TileLayer extends CanvasLayer
     *  @param {Vector2}  size          - World space size
     *  @param {TileInfo} [tileInfo]    - Default tile info for layer (used for size and texture)
     *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
-    *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering
     */
-    constructor(position, size, tileInfo=tile(), renderOrder=0, useWebGL=glEnable)
+    constructor(position, size, tileInfo=tile(), renderOrder=0)
     {
-        super(position, size, 0, renderOrder, size);
-        
+        const canvasSize = tileInfo ? size.multiply(tileInfo.size) : size;
+        super(position, size, 0, renderOrder, canvasSize);
+
+        // set tile info
         this.tileInfo = tileInfo;
-        const canvasSize = size.multiply(tileInfo.size);
-        /** @property {HTMLCanvasElement} - The canvas used by this tile layer */
-        this.canvas = new OffscreenCanvas(canvasSize.x, canvasSize.y);
-        /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
-        this.context = this.canvas.getContext('2d');
-        /** @property {WebGLTexture} - Texture if using WebGL for this layer */
-        this.glTexture = useWebGL ? glCreateTexture(this.canvas) : undefined;
-        // set no friction by default, applied friction is max of both objects
-        this.friction = 0;
-        // set no restitution by default, applied restitution is max of both objects
-        this.restitution = 0;
 
         // init tile data
         this.data = [];
@@ -403,11 +408,18 @@ class TileLayer extends CanvasLayer
     {
         ASSERT(drawContext !== this.context, 'must call redrawEnd() after drawing tiles!');
 
+        if (this.refreshWebGL)
+        {
+            // update the WebGL texture
+            this.textureInfo.createWebGLTexture();
+            this.refreshWebGL = false;
+        }
+
         // draw the tile layer as a single tile
-        const tileInfo = new TileInfo().setFullImage(this.canvas, this.glTexture);
+        const tileInfo = new TileInfo().setFullImage(this.textureInfo);
         const size = this.drawSize || this.size;
         const pos = this.pos.add(size.scale(.5));
-        const useWebGL = glEnable && this.glTexture !== undefined;
+        const useWebGL = glEnable && this.textureInfo.hasWebGL();
         drawTile(pos, size, tileInfo, WHITE, 0, false, CLEAR_BLACK, useWebGL);
     }
 
@@ -420,8 +432,7 @@ class TileLayer extends CanvasLayer
         for (let y = this.size.y; y--;)
             this.drawTileData(vec2(x,y), false);
         this.redrawEnd();
-        if (this.glTexture)
-            this.useWebGL(); // update WebGL texture
+        this.useWebGL();
     }
 
     /** Call to start the redraw process
@@ -429,6 +440,8 @@ class TileLayer extends CanvasLayer
      *  @param {boolean} [clear] - Should it clear the canvas before drawing */
     redrawStart(clear=false)
     {
+        if (!this.context) return;
+
         // save current render settings
         /** @type {[HTMLCanvasElement|OffscreenCanvas, CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number]} */
         this.savedRenderSettings = [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale];
@@ -438,8 +451,9 @@ class TileLayer extends CanvasLayer
         drawCanvas = this.canvas;
         drawContext = this.context;
         cameraPos = this.size.scale(.5);
-        cameraScale = this.tileInfo.size.x;
-        mainCanvasSize = this.size.multiply(this.tileInfo.size);
+        const tileSize = this.tileInfo ? this.tileInfo.size : vec2(1);
+        cameraScale = tileSize.x;
+        mainCanvasSize = this.size.multiply(tileSize);
         if (clear)
         {
             // clear and set size
@@ -457,6 +471,8 @@ class TileLayer extends CanvasLayer
     /** Call to end the redraw process */
     redrawEnd()
     {
+        if (!this.context) return;
+
         ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
         glCopyToContext(drawContext);
         //debugSaveCanvas(this.canvas);
@@ -473,6 +489,8 @@ class TileLayer extends CanvasLayer
      */
     drawTileData(layerPos, clear=true)
     {
+        if (!this.context) return;
+        
         // clear out where the tile was, for full opaque tiles this can be skipped
         const s = this.tileInfo.size;
         if (clear)
@@ -509,11 +527,10 @@ class TileCollisionLayer extends TileLayer
     *  @param {Vector2}  size          - World space size
     *  @param {TileInfo} [tileInfo]    - Tile info for layer
     *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
-    *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering
     */
-    constructor(position, size, tileInfo=tile(), renderOrder=0, useWebGL=glEnable)
+    constructor(position, size, tileInfo=tile(), renderOrder=0)
     {
-        super(position, size.floor(), tileInfo, renderOrder, useWebGL);
+        super(position, size.floor(), tileInfo, renderOrder);
 
         /** @property {Array<number>} - The tile collision grid */
         this.collisionData = [];
@@ -596,65 +613,43 @@ class TileCollisionLayer extends TileLayer
             // check if the object should collide with this tile
             const tileData = this.collisionData[y*this.size.x+x];
             if (tileData)
-            if (!object || object.collideWithTile(tileData, hitPos.set(x, y)))
+            if (!object || object.collideWithTile(tileData, 
+                hitPos.set(x + this.pos.x, y + this.pos.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.
+    /** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
     *  @param {Vector2}      posStart
     *  @param {Vector2}      posEnd
-    *  @param {EngineObject} [object]
-    *  @return {Vector2} */
-    collisionRaycast(posStart, posEnd, object)
+    *  @param {EngineObject} [object] - An object or undefined for generic test
+    *  @param {Vector2}      [normal] - Optional normal of the surface hit
+    *  @return {Vector2|undefined} */
+    collisionRaycast(posStart, posEnd, object, normal)
     {
         ASSERT(isVector2(posStart) && isVector2(posEnd), 'positions must be Vector2s');
         ASSERT(!object || object instanceof EngineObject, 'object must be an EngineObject');
-        
-        // transform to local layer space
-        const posStartX = posStart.x - this.pos.x;
-        const posStartY = posStart.y - this.pos.y;
-        const posEndX   = posEnd.x   - this.pos.x;
-        const posEndY   = posEnd.y   - this.pos.y;
-
-        // test if a ray collides with tiles from start to end
-        const deltaX = posEndX - posStartX;
-        const deltaY = posEndY - posStartY;
-        const totalLength = (deltaX**2 + deltaY**2)**.5;
-        const unitX = abs(totalLength/deltaX);
-        const unitY = abs(totalLength/deltaY);
-
-        // setup iteration variables
-        const pos = posStart.floor(), signDeltaX = sign(deltaX), signDeltaY = sign(deltaY);
-        let xi = unitX * (deltaX < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1) || 0;
-        let yi = unitY * (deltaY < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1) || 0;
-
-        // use line drawing algorithm to test for collisions
-        while (true)
+
+        const localPos = new Vector2;
+        const collisionTest = (pos)=>
         {
             // check for tile collision
-            const tileData = this.getCollisionData(pos);
-            if (tileData && (!object || object.collideWithTile(tileData, pos)))
-            {
-                pos.x += .5; pos.y += .5;
-                debugRaycast && debugLine(posStart, posEnd, '#f00', .02);
-                debugRaycast && debugPoint(pos, '#ff0');
-                return pos;
-            }
-
-            // check if past the end
-            if (xi >= totalLength && yi >= totalLength)
-                break;
-
-            // get coordinates of next tile to check
-            if (xi > yi)
-                pos.y += signDeltaY, yi += unitY;
-            else
-                pos.x += signDeltaX, xi += unitX;
+            localPos.set(pos.x - this.pos.x, pos.y - this.pos.y);
+            const tileData = this.getCollisionData(localPos);
+            return tileData && (!object || object.collideWithTile(tileData, pos));
         }
-
         debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
+        const hitPos = lineTest(posStart, posEnd, collisionTest, normal);
+        if (hitPos)
+        {
+            const tilePos = hitPos.floor().add(vec2(.5));
+            debugRaycast && debugRect(tilePos, vec2(1), '#f008');
+            debugRaycast && debugLine(posStart, hitPos, '#f00', .02);
+            debugRaycast && debugPoint(hitPos, '#0f0');
+            debugRaycast && normal && 
+                debugLine(hitPos, hitPos.add(normal), '#ff0', .02);
+            return hitPos;
+        }
     }
 }