littlejsengine 1.21.0 → 1.23.0

package/src/engineDraw.js

@@ -259,8 +259,9 @@ class TextureInfo
      * @param {boolean} [useWebGL] - Should use WebGL if available?
      * @param {boolean|Array<number>} [wrap] - Should the texture wrap (REPEAT) or clamp (CLAMP_TO_EDGE)? Or the WebGL
      *   modes across and down, like [gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT], as a glTF sampler gives them
+     * @param {boolean} [pixelated] - Hard edged or smooth for this texture alone, undefined follows tilesPixelated
      */
-    constructor(image, useWebGL=true, wrap=false)
+    constructor(image, useWebGL=true, wrap=false, pixelated)
     {
         /** @property {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap} - image source */
         this.image = image;
@@ -275,6 +276,10 @@ class TextureInfo
          *  across and down
          *  @type {boolean|Array<number>} */
         this.wrap = wrap;
+        /** @property {boolean|undefined} - Hard edged or smooth for this texture alone, a soft glow in a pixel art
+         *  game or pixel art in a smooth one; undefined follows tilesPixelated
+         *  @type {boolean|undefined} */
+        this.pixelated = pixelated;
         useWebGL && this.createWebGLTexture();
     }
 
@@ -305,6 +310,17 @@ class TextureInfo
         this.wrap = wrap;
         glSetTextureWrap(this.glTexture, wrap);
     }
+
+    /** Make this texture hard edged or smooth on its own, whatever tilesPixelated says for the rest; it is made again
+     *  with the new filtering
+     *  @param {boolean} [pixelated] - undefined follows tilesPixelated again */
+    setPixelated(pixelated)
+    {
+        this.pixelated = pixelated;
+        if (!this.glTexture) return;
+        this.destroyWebGLTexture();
+        this.createWebGLTexture();
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -480,17 +496,29 @@ class SpriteAnimator
      *  @return {SpriteAnimation} */
     get clip() { return this.clips[this.name]; }
 
+    /** The clip showing now, once a clip that has ended has called its onEnd: the callback may switch clips, and a
+     *  read gives the clip it switched to, not the one that ended
+     *  @return {SpriteAnimation}
+     *  @ignore */
+    get settledClip()
+    {
+        // each clip's own isDone calls its onEnd once; a few switches in a row at most
+        for (let i = 4, clip; i-- && clip !== this.clip;)
+            (clip = this.clip).isDone;
+        return this.clip;
+    }
+
     /** The tile of the frame showing now
      *  @return {TileInfo} */
-    get tileInfo() { return this.clip.tileInfo; }
+    get tileInfo() { return this.settledClip.tileInfo; }
 
     /** The frame of the clip showing now
      *  @return {number} */
-    get frame() { return this.clip.frame; }
+    get frame() { return this.settledClip.frame; }
 
     /** True once the clip showing now is a play that has ended
      *  @return {boolean} */
-    get isDone() { return this.clip.isDone; }
+    get isDone() { return this.settledClip.isDone; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1848,6 +1876,33 @@ class ImageFont
     }
 }
 
+// how strong a light's glow is at a distance from its middle, 0 there to 1 at the edge: a bell, full in the middle
+// and nothing at the edge, fading faster the higher the falloff
+function engineGlowAlpha(r, falloff)
+{
+    const k = 3.5 * falloff, edge = Math.exp(-k);
+    return (Math.exp(-k * r * r) - edge) / (1 - edge);
+}
+
+// the soft round glow of the 2D and 3D lights, one texture for each falloff, rounded to a tenth so a changing falloff
+// makes only a few, each made once from a canvas; undefined headless or without a canvas
+const engineGlowTextures = new Map;
+function engineGlowTexture(falloff=1)
+{
+    ASSERT(isNumber(falloff) && falloff > 0, 'glowFalloff must be a number above 0');
+    const key = max(round(falloff * 10), 1) / 10;
+    let texture = engineGlowTextures.get(key);
+    if (texture || !glContext || typeof OffscreenCanvas == 'undefined') return texture;
+    const size = 64, context = createCanvasContext(size), steps = 16;
+    const gradient = context.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+    for (let i = 0; i <= steps; ++i)
+        gradient.addColorStop(i / steps, 'rgba(255,255,255,' + engineGlowAlpha(i / steps, key).toFixed(4) + ')');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, size, size);
+    engineGlowTextures.set(key, texture = new TextureInfo(context.canvas, true, false, false));
+    return texture;
+}
+
 // load engine font, called automatically on startup
 async function imageFontInit()
 {