littlejsengine 1.21.0 → 1.22.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();
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1848,6 +1864,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()
 {

package/src/engineEditor.js

@@ -432,12 +432,21 @@ function editorSetBaseline(record, written)
 // save a map as Tiled JSON: where the browser lets a page write files, Chrome and Edge, to a file picked once and
 // written again on each Save after, even after a reload once the browser gives permission, or picked again with
 // Save As; elsewhere as a download under the name of the file it came from; resolves to how it saved, undefined
-// when the picker was closed
+// when the picker was closed; saves of a map run one at a time in the order asked, so the file ends with the last
 async function editorSave(record, pickAgain=false)
 {
     if (!record) return;
     editorStrokeEnd();
-    const text = editorMapJSON(record), picker = /** @type {any} */ (globalThis).showSaveFilePicker;
+    const text = editorMapJSON(record); // the map as it is now, later edits wait for a later save
+    const saved = (async ()=> { await record.saving; return editorSaveText(record, text, pickAgain); })();
+    record.saving = saved.catch(()=> {});
+    return saved;
+}
+
+// write one save of a map, the one before it done
+async function editorSaveText(record, text, pickAgain)
+{
+    const picker = /** @type {any} */ (globalThis).showSaveFilePicker;
     if (picker)
     {
         try

package/src/engineExport.js

@@ -335,6 +335,8 @@ export
     glFlush,
     glCopyToContext,
     glSetAntialias,
+    glMaxTextureSize,
+    glClampTextureSize,
     glDraw,
     glDrawUntextured,
     glDrawPointsTransform,

package/src/engineParticles.js

@@ -165,6 +165,13 @@ class ParticleEmitter extends EngineObject
         this.localSpace        = localSpace;
         /** @property {number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
         this.trailScale        = 0;
+        /** @property {number} - Grows the whole effect as each particle is born: the spawn area, the particles' sizes,
+         *  speed and fall, so it looks the same only bigger; 1 is as made, and a particle keeps the scale it was born
+         *  with, so a change never moves the ones already out */
+        this.scale             = 1;
+        /** @property {number} - The effect's own fall, added to each particle's velocity y every frame, on top of the
+         *  world's gravity times gravityScale; an effect that sets its own looks the same in any game */
+        this.gravity           = 0;
         /** @property {ParticleCallback|undefined} - Callback when particle is created
          *  @type {ParticleCallback|undefined} */
         this.particleCreateCallback = undefined;
@@ -251,9 +258,9 @@ class ParticleEmitter extends EngineObject
         {
             // show emitter bounds
             if (this.emitCircle)
-                debugCircle(this.pos, this.emitSize.x, '#0f0', 0, false, false);
+                debugCircle(this.pos, this.emitSize.x * this.scale, '#0f0', 0, false, false);
             else
-                debugRect(this.pos, this.emitSize, '#0f0', 0, this.angle, false, false);
+                debugRect(this.pos, this.emitSize.scale(this.scale), '#0f0', 0, this.angle, false, false);
         }
     }
 
@@ -262,10 +269,11 @@ class ParticleEmitter extends EngineObject
     emitParticle()
     {
         // spawn a particle
+        const scale = this.scale; // grows the spawn area, the sizes and the speed of each particle born
         let pos = this.emitCircle ?            // check if circle emitter
-            randInCircle(this.emitSize.x/2)    // circle emitter
-            : vec2(rand(-.5,.5), rand(-.5,.5)) // box emitter
-                .multiply(this.emitSize);
+            randInCircle(this.emitSize.x/2 * scale) // circle emitter
+            : vec2(rand(-.5,.5) * this.emitSize.x * scale, // box emitter, one vector made
+                rand(-.5,.5) * this.emitSize.y * scale);
         let angle = rand(this.particleConeAngle, -this.particleConeAngle);
         if (!this.localSpace)
         {
@@ -282,9 +290,9 @@ class ParticleEmitter extends EngineObject
 
         // randomize particle settings
         const particleTime  = randomizeScale(this.particleTime);
-        const sizeStart     = randomizeScale(this.sizeStart);
-        const sizeEnd       = randomizeScale(this.sizeEnd);
-        const speed         = randomizeScale(this.speed);
+        const sizeStart     = randomizeScale(this.sizeStart) * scale;
+        const sizeEnd       = randomizeScale(this.sizeEnd) * scale;
+        const speed         = randomizeScale(this.speed) * scale;
         const angleSpeed    = randomizeScale(this.angleSpeed) * randSign();
         const coneAngle     = rand(this.emitConeAngle, -this.emitConeAngle);
         const colorStart    = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
@@ -318,9 +326,13 @@ class ParticleEmitter extends EngineObject
     render()
     {
         // render all particles, the blend switched once for them all, not around each one
+        // and the tile's draw worked out once for them all, fresh each frame so a tile changed in place draws changed
         this.additive && setAdditiveBlendMode();
+        particleTile = null; // none yet, undefined is the untextured tile
+        particleTileBatch = true;
         for (const particle of this.particles)
             particle.render();
+        particleTileBatch = false;
         this.additive && setAdditiveBlendMode(false);
     }
 
@@ -347,6 +359,39 @@ class ParticleEmitter extends EngineObject
 // scratch vectors reused by Particle.render and the tile collision to avoid per-frame allocations
 const particleDrawPos = new Vector2, particleDrawSize = new Vector2, particleCollidePos = new Vector2;
 
+// the WebGL draw of the tile particles draw with, what drawTile works out for each sprite: kept while an emitter
+// renders its particles, so each one only writes its own values into the batch
+let particleTile, particleTileBatch = false, particleTileTextured = false, particleTileEmpty = false;
+let particleTileU0 = 0, particleTileV0 = 0, particleTileU1 = 0, particleTileV1 = 0;
+function particleTileSet(tileInfo)
+{
+    particleTile = tileInfo;
+    const textureInfo = tileInfo?.textureInfo;
+    particleTileTextured = !!textureInfo;
+    particleTileEmpty = !!textureInfo && !(tileInfo.size.x && tileInfo.size.y); // like a sprite still loading
+    if (!textureInfo || particleTileEmpty) return;
+
+    ASSERT(!!textureInfo.glTexture, 'texture has no WebGL texture, draw it with useWebGL false');
+    glSetTexture(textureInfo.glTexture); // bound, and its mipmaps brought up to date, once for the emitter
+    const sizeInverse = textureInfo.sizeInverse, bleed = tileInfo.bleed;
+    const x = tileInfo.pos.x * sizeInverse.x;
+    const y = tileInfo.pos.y * sizeInverse.y;
+    const w = tileInfo.size.x * sizeInverse.x;
+    const h = tileInfo.size.y * sizeInverse.y;
+    if (bleed)
+    {
+        const bleedX = sizeInverse.x*bleed;
+        const bleedY = sizeInverse.y*bleed;
+        particleTileU0 = x + bleedX;     particleTileV0 = y + bleedY;
+        particleTileU1 = x - bleedX + w; particleTileV1 = y - bleedY + h;
+    }
+    else
+    {
+        particleTileU0 = x;     particleTileV0 = y;
+        particleTileU1 = x + w; particleTileV1 = y + h;
+    }
+}
+
 // tests if a particle collides with tiles at x, y, through its emitter's collide callback if it has one
 function particleCollideTest(particle, collideCallback, x, y)
 {
@@ -382,6 +427,8 @@ class Particle
     {
         /** @property {ParticleEmitter} - The emitter this particle came from */
         this.emitter = emitter;
+        /** @property {number} - The emitter's scale when it was made, which grows its fall */
+        this.scale = emitter.scale ?? 1; // a hand made emitter-like object may have none
         /** @property {Vector2} - Position, world space or local to the emitter when localSpace is set */
         this.pos = pos;
         /** @property {number} - Angle in radians */
@@ -444,7 +491,10 @@ class Particle
         // apply physics; only the tile collision needs where the particle was
         const solve = enablePhysicsSolver && collideLevel;
         const oldX = this.pos.x, oldY = this.pos.y;
-        let gravityX = gravity.x * gravityScale, gravityY = gravity.y * gravityScale;
+        // the world's gravity times gravityScale plus the emitter's own, grown by the particle's scale
+        const fall = this.scale;
+        let gravityX = gravity.x * gravityScale * fall;
+        let gravityY = (gravity.y * gravityScale + (emitter.gravity || 0)) * fall;
         if (emitter.localSpace && emitter.angle)
         {
             // world gravity turned into the emitter's space, the render turns it back
@@ -498,7 +548,9 @@ class Particle
                 }
                 if (isBlockedY || !isBlockedX)
                 {
-                    const wasFalling = this.velocity.y < 0 && gravity.y < 0 || this.velocity.y > 0 && gravity.y > 0;
+                    // down is the world's gravity, or the emitter's own fall in a world with none
+                    const down = gravity.y || emitter.gravity || 0;
+                    const wasFalling = this.velocity.y < 0 && down < 0 || this.velocity.y > 0 && down > 0;
                     if (wasFalling)
                         this.groundObject = hitLayer;
 
@@ -577,7 +629,24 @@ class Particle
                 angle = atan2(velocity.x, velocity.y);
             }
         }
-        drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror, undefined, glEnable, false);
+        if (glEnable && !headlessMode)
+        {
+            // straight into the batch, the tile's draw worked out once for the emitter's particles
+            const tileInfo = this.tileInfo;
+            if (!particleTileBatch || tileInfo !== particleTile)
+                particleTileSet(tileInfo);
+            if (!particleTileTextured)
+                glDrawUntextured(pos.x, pos.y, size.x, size.y, angle, this.color.rgbaInt());
+            else if (!particleTileEmpty)
+            {
+                const texture = tileInfo.textureInfo.glTexture;
+                glActiveTexture === texture || glSetTexture(texture); // bound again only if a draw between changed it
+                glDraw(pos.x, pos.y, this.mirror ? -size.x : size.x, size.y, angle,
+                    particleTileU0, particleTileV0, particleTileU1, particleTileV1, this.color.rgbaInt());
+            }
+        }
+        else
+            drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror, undefined, false, false);
         additive && setAdditiveBlendMode(false);
         debugParticles && debugRect(pos, size, '#f005', 0, angle, false, false);
     }

package/src/engineWebGL.js

@@ -26,6 +26,19 @@ let glCanvas;
  *  @memberof WebGL */
 let glContext;
 
+/** The largest texture this device makes, in pixels across, 0 until WebGL starts; at least 2048 with WebGL2
+ *  @type {number}
+ *  @memberof WebGL */
+let glMaxTextureSize = 0;
+
+/** A texture size this device can make: the size asked for, or the largest it supports when that is smaller
+ *  - The engine sizes the textures it makes itself through this, the shadow maps and the like, so a size a device
+ *    does not have falls back instead of failing
+ *  @param {number} size - Pixels across
+ *  @return {number}
+ *  @memberof WebGL */
+function glClampTextureSize(size) { return glMaxTextureSize ? min(size, glMaxTextureSize) : size; }
+
 /** Should WebGL be setup with anti-aliasing? must be set before calling engineInit
  *  @type {boolean}
  *  @memberof WebGL */
@@ -115,7 +128,7 @@ function glInit(rootElement)
     // startup webgl, and make the textures of any texture infos made before it
     initWebGL();
     for (const info of glTextureInfos)
-        info.glTexture ||= glCreateTexture(info.image, info.wrap);
+        info.glTexture ||= glCreateTexture(info.image, info.wrap, info.pixelated);
 
     // setup context lost and restore handlers
     glCanvas.addEventListener('webglcontextlost', (e)=>
@@ -155,7 +168,7 @@ function glInit(rootElement)
         glPremultipliedTextures = new WeakSet; // the tile layers draw into their new textures again below
         initWebGL();
         for (const info of glTextureInfos)
-            info.glTexture = glCreateTexture(info.image, info.wrap);
+            info.glTexture = glCreateTexture(info.image, info.wrap, info.pixelated);
         pluginList.forEach(plugin=>plugin.glContextRestored?.());
 
         // a tile layer drawn on the GPU only had its tiles in the lost texture, it draws them again
@@ -165,6 +178,8 @@ function glInit(rootElement)
 
     function initWebGL()
     {
+        glMaxTextureSize = glContext.getParameter(glContext.MAX_TEXTURE_SIZE) | 0;
+
         // setup instanced rendering shader program
         glShader = glCreateProgram(gl_VERTEX_SOURCE,
             '#version 300 es\n' +     // specify GLSL ES version
@@ -488,9 +503,10 @@ function glShaderProgram(shader)
  *  Restores the active texture when done
  *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap} [image]
  *  @param {boolean|Array<number>} [wrap] - true for REPEAT, false for CLAMP_TO_EDGE, or the WebGL modes across and down
+ *  @param {boolean} [pixelated] - Hard edged or smooth, undefined follows tilesPixelated
  *  @return {WebGLTexture}
  *  @memberof WebGL */
-function glCreateTexture(image, wrap=false)
+function glCreateTexture(image, wrap=false, pixelated=tilesPixelated)
 {
     if (!glContext) return;
 
@@ -499,10 +515,10 @@ function glCreateTexture(image, wrap=false)
     let mipMap = false;
     if (image?.width)
     {
-        glSetTextureData(texture, image);
+        glSetTextureData(texture, image, pixelated);
         glContext.bindTexture(glContext.TEXTURE_2D, texture);
         // WebGL2 makes mipmaps at any size, a texture that becomes a render target keeps them only at powers of two
-        mipMap = !tilesPixelated;
+        mipMap = !pixelated;
         if (mipMap && !(isPowerOfTwo(image.width) && isPowerOfTwo(image.height)))
             glMipmapsUntilTarget.add(texture);
     }
@@ -515,7 +531,7 @@ function glCreateTexture(image, wrap=false)
     }
 
     // set texture filtering
-    const magFilter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
+    const magFilter = pixelated ? glContext.NEAREST : glContext.LINEAR;
     const minFilter = mipMap ? glContext.LINEAR_MIPMAP_LINEAR : magFilter;
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, magFilter);
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, minFilter);
@@ -546,8 +562,9 @@ function glDeleteTexture(texture)
 /** Set WebGL texture data from an image, restores the active texture when done
  *  @param {WebGLTexture} texture
  *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap} image
+ *  @param {boolean} [pixelated] - Hard edged or smooth, undefined follows tilesPixelated
  *  @memberof WebGL */
-function glSetTextureData(texture, image)
+function glSetTextureData(texture, image, pixelated=tilesPixelated)
 {
     if (!glContext) return;
 
@@ -565,7 +582,7 @@ function glSetTextureData(texture, image)
     }
     // smooth filtering mixes a texel with its see through neighbors, right only for premultiplied color, or the
     // edges go dark; pixel art is sampled a texel at a time, and uploads straight color as it always has
-    const premultiply = !tilesPixelated;
+    const premultiply = !pixelated;
     glContext.pixelStorei(glContext.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultiply);
     glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
     glContext.pixelStorei(glContext.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
@@ -596,9 +613,9 @@ function glRegisterTextureInfo(textureInfo)
 
     // create or set the texture data
     if (textureInfo.glTexture)
-        glSetTextureData(textureInfo.glTexture, textureInfo.image);
+        glSetTextureData(textureInfo.glTexture, textureInfo.image, textureInfo.pixelated);
     else
-        textureInfo.glTexture = glCreateTexture(textureInfo.image, textureInfo.wrap);
+        textureInfo.glTexture = glCreateTexture(textureInfo.image, textureInfo.wrap, textureInfo.pixelated);
 }
 
 /** Internal: tells WebGL to destroy the glTexture and stop tracking it, TextureInfo calls it