littlejsengine 1.24.1 → 1.24.2

package/src/engineParticles.js

@@ -43,7 +43,7 @@
  *     rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
  *     1, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
  *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate
- *     .5, 1                // randomness, collide
+ *     .5, true             // randomness, collide
  * );
  */
 class ParticleEmitter extends EngineObject

package/src/engineSettings.js

@@ -418,6 +418,13 @@ let vibrateEnable = true;
  *  @memberof Settings */
 let soundEnable = true;
 
+/** Play sound with an iPhone's silent switch on, as media does; off by default, so the switch mutes the game as it
+ *  does a ringtone, and the player's own music keeps playing beside it; Safari 16.4 and up, elsewhere it does nothing
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let soundIgnoreSilentSwitch = false;
+
 /** Volume scale to apply to all sound, music and speech
  *  Use setSoundVolume to also update the audio master gain immediately
  *  @type {number}
@@ -819,6 +826,15 @@ function setVibrateEnable(enable) { vibrateEnable = enable; }
  *  @memberof Settings */
 function setSoundEnable(enable) { soundEnable = enable; }
 
+/** Set if sound plays with an iPhone's silent switch on, as media does, which also pauses the player's own music
+ *  @param {boolean} ignore
+ *  @memberof Settings */
+function setSoundIgnoreSilentSwitch(ignore)
+{
+    soundIgnoreSilentSwitch = ignore;
+    audioSetSession();
+}
+
 /** Set volume scale to apply to all sound, music and speech
  *  @param {number} volume
  *  @memberof Settings */

package/src/engineTileLayer.js

@@ -124,6 +124,19 @@ function tileCollisionRaycast(posStart, posEnd, callbackObject, normal, solidOnl
 // Tiled's flip flags, horizontal, vertical and diagonal as bits 2, 1 and 0, as [direction, mirror]
 const tileLayersTiledFlips = [[0,0], [3,1], [2,1], [3,0], [0,1], [1,0], [2,0], [1,1]];
 
+// the tile info a layer's tile info gives a tile: a tile set's tile, a frame of a sheet read by its columns, or a
+// tile of its grid; undefined past the end of a tile set, or of a sheet read by its columns, as values kept only for
+// collision can be, which the level editor reads the same way
+function tileLayerTileInfo(t, tile)
+{
+    if (!t) return;
+    if (t.tiles) return t.tiles[tile];
+    if (!t.columns) return t.index(tile);
+    if (t.textureInfo && t.pos.y + (tile / t.columns | 0) * (t.size.y + t.padding*2) + t.size.y > t.textureInfo.size.y)
+        return;
+    return t.frame(tile);
+}
+
 /**
  * Load tile layers from exported data
  * - Tiled maps come in as they are, flipped and turned tiles included, from one tileset image (a second tileset's
@@ -143,7 +156,8 @@ const tileLayersTiledFlips = [[0,0], [3,1], [2,1], [3,0], [0,1], [1,0], [2,0], [
  *  @param {number}   [renderOrder] - Render order of the top layer
  *  @param {number|string} [collisionLayer] - Layer to use for collision if any, by its index or its name
  *  @param {boolean}  [draw] - Should the layer be drawn automatically
- *  @return {Array<TileCollisionLayer>}
+ *  @return {Array<TileCollisionLayer>} - It throws for a map that is not whole cells, or a layer whose tiles do not
+ *    fill it, before it makes any layer
  *  @memberof TileLayers */
 function tileLayersLoad(tileMapData, tileInfo=tileLayerDefaultTile(), renderOrder=0, collisionLayer, draw=true)
 {
@@ -160,15 +174,20 @@ function tileLayersLoad(tileMapData, tileInfo=tileLayerDefaultTile(), renderOrde
     // the editor, in debug builds, keeps the map as the source of its edits and brings back autosaved ones
     tileMapData = editorMapRestore(tileMapData);
 
-    // validate the tile map data
-    ASSERT(tileMapData.width && tileMapData.height);
-    ASSERT(tileMapData.layers && tileMapData.layers.length);
+    // validate the tile map data: a size that is not whole cells, or tiles that do not fill it, is said in any build,
+    // since the layers and their loops are made from that size
+    const {width: mapWidth, height: mapHeight} = tileMapData;
+    if (!(Number.isInteger(mapWidth) && Number.isInteger(mapHeight) && mapWidth > 0 && mapHeight > 0))
+        throw new Error(`tileLayersLoad: a map is a whole number of cells across and down, not ${mapWidth} by ${mapHeight}`);
+    if (!isArray(tileMapData.layers) || !tileMapData.layers.length)
+        throw new Error('tileLayersLoad: a map has a list of layers');
 
     // a sheet with a margin around its tiles or a spacing between them: the first tile is at the margin and each
     // cell is a tile and a spacing, which is a padding of half the spacing counted from there, by the tileset's
     // own count of columns, since the image's width does not say with a spacing that is not all around
+    // a tile set from loadTiles has each tile where it was packed, whatever the map says of its own image
     const tileset = tileMapData.tilesets?.[0];
-    if (tileInfo && tileset && (tileset.margin > 0 || tileset.spacing > 0))
+    if (tileInfo && !tileInfo.tiles && tileset && (tileset.margin > 0 || tileset.spacing > 0))
     {
         const margin = tileset.margin || 0, spacing = tileset.spacing || 0, size = tileInfo.size;
         const width = tileInfo.textureInfo?.size.x || 0;
@@ -210,20 +229,25 @@ function tileLayersLoad(tileMapData, tileInfo=tileLayerDefaultTile(), renderOrde
     {
         const name = collisionLayer;
         collisionLayer = layers.findIndex((l)=> l.color && l.dataLayer.name === name);
-        ASSERT(collisionLayer >= 0, 'no tile layer named ' + name);
+        collisionLayer < 0 && console.error('tileLayersLoad: no tile layer is named ' + name + ', none is solid');
     }
 
-    // create tile layers and fill with data
+    // create tile layers and fill with data, every layer's tiles checked first, so a bad one leaves none made
     const tileLayers = [];
     const levelSize = vec2(tileMapData.width, tileMapData.height);
     const layerCount = layers.length;
+    for (const [layerIndex, {dataLayer, color}] of layers.entries())
+    {
+        const tiles = dataLayer.data; // a list of gids, or a typed array of them
+        if (color && (!(isArray(tiles) || ArrayBuffer.isView(tiles)) || dataLayer.data.length !== levelSize.area()))
+            throw new Error(`tileLayersLoad: layer ${dataLayer.name ?? layerIndex} has ${dataLayer.data?.length} tiles for a map of ` +
+                `${levelSize.area()}; infinite maps and compressed layers are not read`);
+    }
     for (let layerIndex=layerCount; layerIndex--;)
     {
         const {dataLayer, color: layerColor, visible} = layers[layerIndex];
         if (!layerColor)
             continue;
-        ASSERT(dataLayer.data && dataLayer.data.length, 'tile layer has no data, infinite maps and compressed layers are not supported');
-        ASSERT(levelSize.area() === dataLayer.data.length);
 
         const layerRenderOrder = renderOrder - (layerCount - 1 - layerIndex);
         const tileLayer = new TileCollisionLayer(vec2(), levelSize, tileInfo, layerRenderOrder);
@@ -232,8 +256,8 @@ function tileLayersLoad(tileMapData, tileInfo=tileLayerDefaultTile(), renderOrde
         if (!visible)
             tileLayer.render = ()=> {}; // a hidden layer keeps its tiles and collision but is not drawn
 
-        for (let x=levelSize.x; x--;)
-        for (let y=levelSize.y; y--;)
+        for (let x=0; x<levelSize.x; ++x)
+        for (let y=0; y<levelSize.y; ++y)
         {
             const pos = vec2(x, levelSize.y-1-y);
             const data = dataLayer.data[x + y*levelSize.x];
@@ -305,6 +329,8 @@ function tileLayersFromLDtk(ldtk, level=0)
     const first = instances.find((l)=> tiled(l) && l.__tilesetDefUid != undefined) || instances.find(tiled) || instances[0];
     const grid = first?.__gridSize || 16;
     const width = first?.__cWid || ceil(data.pxWid / grid), height = first?.__cHei || ceil(data.pxHei / grid);
+    if (!(width > 0 && height > 0 && width * height <= 1 << 22))
+        throw new Error('tileLayersFromLDtk: level ' + data.identifier + ' is ' + width + ' by ' + height + ' cells');
     const map = {width, height, tilewidth: grid, tileheight: grid, orientation: 'orthogonal', renderorder: 'right-down',
         infinite: false, layers: [], nextlayerid: 1, nextobjectid: 1};
 
@@ -322,7 +348,7 @@ function tileLayersFromLDtk(ldtk, level=0)
         const instance = instances[i], name = instance.__identifier, id = map.nextlayerid++;
         if (!tiled(instance))
         {
-            const objects = (instance.entityInstances || []).map((entity)=>
+            const objects = (instance.entityInstances || []).filter((entity)=> isArray(entity.px)).map((entity)=>
             {
                 // an entity is placed by its pivot, an object here by its middle
                 const [pivotX=0, pivotY=0] = entity.__pivot || [], w = entity.width || 0, h = entity.height || 0;
@@ -338,12 +364,9 @@ function tileLayersFromLDtk(ldtk, level=0)
             map.layers.push({id, name, type: 'objectgroup', objects, opacity: 1, visible: true, x: 0, y: 0});
             continue;
         }
-        const tiles = [...(instance.autoLayerTiles || []), ...(instance.gridTiles || [])];
-        const ownTiles = !tiles.length || !tileset ||
-            instance.__tilesetDefUid === tileset.uid && tileset.tileGridSize === grid;
-        if (instance.__gridSize !== grid || instance.__cWid !== width || instance.__cHei !== height || !ownTiles)
+        if (instance.__gridSize !== grid || instance.__cWid !== width || instance.__cHei !== height)
         {
-            debug && console.warn(`tileLayersFromLDtk: layer ${name} has another grid or tileset, left out`);
+            console.warn(`tileLayersFromLDtk: layer ${name} has another grid, left out`);
             continue;
         }
         // an IntGrid layer's values, hidden, under its own name, for collision whatever its tiles do
@@ -354,7 +377,20 @@ function tileLayersFromLDtk(ldtk, level=0)
             const data = empty();
             (instance.intGridCsv || []).forEach((value, k)=> k < data.length && (data[k] = value));
             map.layers.push({id, name, type: 'tilelayer', width, height, data, opacity, visible: false, x: 0, y: 0});
-            if (!tiles.length) continue;
+        }
+        // its tiles, those with a place, from the first layer's tileset
+        const tiles = [...(instance.autoLayerTiles || []), ...(instance.gridTiles || [])].filter((t)=> isArray(t.px));
+        if (!tiles.length)
+        {
+            // a tile layer with none yet is an empty layer, to paint in the editor, and a level of one still loads
+            values || map.layers.push({id, name, type: 'tilelayer', width, height, data: empty(), opacity,
+                visible: instance.visible !== false, x: 0, y: 0});
+            continue;
+        }
+        if (tileset && (instance.__tilesetDefUid !== tileset.uid || tileset.tileGridSize !== grid))
+        {
+            console.warn(`tileLayersFromLDtk: the tiles of layer ${name} are on another tileset, left out`);
+            continue;
         }
 
         // a layer for each depth in a cell and each opacity, the first tiles drawn solid first
@@ -492,7 +528,15 @@ function objectLayersMake(tileMapData, object)
     const pos = vec2(object.x / tilewidth, height - object.y / tileheight);
     const {make} = type, result = make.prototype ? new make(pos) : make(pos);
     if (!result || typeof result !== 'object') return;
-    return Object.assign(result, objectLayersProperties(type, object));
+    for (const [key, value] of Object.entries(objectLayersProperties(type, object)))
+    {
+        // a property named as a method of the object, like update, would take the method's place, so it is left out
+        if (typeof result[key] === 'function' && typeof value !== 'function')
+            debug && console.warn(`objectLayersLoad: ${name} property ${key} has a method's name, left out`);
+        else
+            result[key] = value;
+    }
+    return result;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -678,6 +722,7 @@ class TileLayer extends CanvasLayer
             // set tile info
             this.tileInfo = tileInfo.frame(0);
             this.tileInfo.bleed = 0; // disable bleed for tile layers
+            this.tileInfo.tiles = tileInfo.tiles; // a tile set's list, filled in as its images load
         }
 
         // init tile data
@@ -857,8 +902,10 @@ class TileLayer extends CanvasLayer
         const d = this.getData(layerPos);
         if (!d || d.tile === undefined) return;
 
-        // a tileset packed by loadSprite keeps its own columns, counted from its first tile, not the sheet's grid
-        const t = this.tileInfo, tileInfo = t && (t.columns ? t.frame(d.tile) : t.index(d.tile));
+        // a tile set from loadTiles has each tile where it was packed, a tileset packed by loadSprite keeps its own
+        // columns, counted from its first tile, not the sheet's grid
+        const t = this.tileInfo, tileInfo = tileLayerTileInfo(t, d.tile);
+        if (t && !tileInfo) return; // past the end of the sheet or the tile set, or loading
         this.drawLayerTile(drawPos, cellPixels, tileInfo, d.color, d.direction*PI/2, d.mirror);
     }
 
@@ -1133,7 +1180,23 @@ class TileCollisionLayer extends TileLayer
             const tileData = this.getCollisionData(pos);
             return tileData && collisionTest(tileData, vec2(pos.x + offset.x, pos.y + offset.y));
         }
-        const hitPos = lineTest(posStart.subtract(offset), posEnd.subtract(offset), testFunction, normal);
+        // only the part of the line over the layer, and a cell around it, can meet a tile, so a ray toward a point
+        // far beyond is walked across the layer and no farther; the cell around keeps the step into the layer as it was
+        const a = posStart.subtract(offset), d = posEnd.subtract(posStart);
+        let t0 = 0, t1 = 1;
+        for (const [p, q, high] of [[a.x, d.x, this.size.x + 1], [a.y, d.y, this.size.y + 1]])
+        {
+            if (!q)
+            {
+                if (p < -1 || p > high) return;
+                continue;
+            }
+            const u = (-1 - p) / q, v = (high - p) / q;
+            t0 = max(t0, min(u, v)), t1 = min(t1, max(u, v));
+        }
+        if (t0 > t1) return;
+        const hitPos = lineTest(t0 ? a.add(d.scale(t0)) : a, t1 < 1 ? a.add(d.scale(t1)) : posEnd.subtract(offset),
+            testFunction, normal);
         if (hitPos)
             hitPos.x += offset.x, hitPos.y += offset.y;
         if (debugRaycast && hitPos)

package/src/engineUtilities.js

@@ -141,6 +141,7 @@ function saveText(text, filename='text', type='text/plain')
 
 /** Create an offscreen canvas to draw into, and return its 2D context
  *  - The canvas is context.canvas, which is what TextureInfo and the like take
+ *  - A browser with no OffscreenCanvas, Safari before 16.4, gets a canvas element that is not on the page
  *  @param {number} width - In pixels
  *  @param {number} [height] - In pixels, defaults to the width for a square
  *  @param {boolean} [willReadFrequently] - Keep it in software, faster when getImageData is called on it often
@@ -149,9 +150,16 @@ function saveText(text, filename='text', type='text/plain')
 function createCanvasContext(width, height=width, willReadFrequently=false)
 {
     ASSERT(isNumber(width) && isNumber(height), 'canvas width and height must be numbers', width, height);
-    return new OffscreenCanvas(width, height).getContext('2d', {willReadFrequently});
+    const canvas = typeof OffscreenCanvas != 'undefined' ? new OffscreenCanvas(width, height) :
+        Object.assign(document.createElement('canvas'), {width, height});
+    return /** @type {OffscreenCanvasRenderingContext2D} */ (canvas.getContext('2d', {willReadFrequently}));
 }
 
+// can a canvas be made to draw into: an OffscreenCanvas, or a canvas element where there is none, as in Safari before
+// 16.4; neither in a headless test
+function canvasAvailable()
+{ return typeof OffscreenCanvas != 'undefined' || typeof document != 'undefined' && !!document.createElement; }
+
 /** Save a canvas to disk
  *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
  *  @param {string} [filename]
@@ -159,7 +167,7 @@ function createCanvasContext(width, height=width, willReadFrequently=false)
  *  @memberof Utilities */
 function saveCanvas(canvas, filename='screenshot', type='image/png')
 {
-    if (canvas instanceof OffscreenCanvas)
+    if (typeof OffscreenCanvas != 'undefined' && canvas instanceof OffscreenCanvas)
     {
         // copy to temporary canvas and save
         const saveCanvas = document.createElement('canvas');
@@ -169,7 +177,7 @@ function saveCanvas(canvas, filename='screenshot', type='image/png')
         saveDataURL(saveCanvas.toDataURL(type), filename);
     }
     else
-        saveDataURL(canvas.toDataURL(type), filename);
+        saveDataURL(/** @type {HTMLCanvasElement} */ (canvas).toDataURL(type), filename);
 }
 
 /** Save a data url to disk
@@ -237,16 +245,19 @@ function readSaveData(saveName, defaultSaveData)
     return { .../** @type {object} */ (defaultSaveData), ...loadedData };
 }
 
-/** Write save data to local storage
+/** Write save data to local storage, an object as readSaveData gives it back
  *  @param {string} saveName - unique name for the game/save
  *  @param {object} saveData - object containing data to be saved
+ *  @return {boolean} - Whether it was written, false when storage is unavailable or full
  *  @memberof Utilities */
 function writeSaveData(saveName, saveData)
 {
     ASSERT(isStringLike(saveName), 'writeSaveData requires saveName string');
+    ASSERT(typeof saveData === 'object' && saveData !== null && !isArray(saveData),
+        'writeSaveData: save data must be an object, readSaveData reads it back into one');
     // tolerate localStorage being unavailable or quota exceeded
-    try { localStorage.setItem(saveName, JSON.stringify(saveData)); }
-    catch { LOG('writeSaveData: failed to write', saveName); }
+    try { localStorage.setItem(saveName, JSON.stringify(saveData)); return true; }
+    catch { LOG('writeSaveData: failed to write', saveName); return false; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -283,8 +294,9 @@ function noise2D(x, y)
 {
     const ix = floor(x), iy = floor(y);
     const fx = smoothStep(x - ix), fy = smoothStep(y - iy);
-    // large prime decorrelates neighboring rows
-    const h = (a, b) => noiseHash(a + b * 374761393);
+    // large prime decorrelates neighboring rows; multiplied as 32 bit integers, which is what the hash keeps of it,
+    // so the row stays exact however far out y is, where a plain product would lose its low bits
+    const h = (a, b) => noiseHash(a + Math.imul(b, 374761393));
     return lerp(
         lerp(h(ix,     iy    ), h(ix + 1, iy    ), fx),
         lerp(h(ix,     iy + 1), h(ix + 1, iy + 1), fx),

package/src/engineWebGL.js

@@ -576,9 +576,9 @@ function glSetTextureData(texture, image, pixelated=tilesPixelated)
     {
         // WebGL ignores the unpack flag below for a bitmap and uploads it as it was made, so it is drawn onto a
         // canvas first, which reads either kind of bitmap right and uploads as the flag says
-        const canvas = new OffscreenCanvas(image.width, image.height);
-        canvas.getContext('2d').drawImage(image, 0, 0);
-        image = canvas;
+        const context = createCanvasContext(image.width, image.height);
+        context.drawImage(image, 0, 0);
+        image = context.canvas;
     }
     // 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
@@ -961,6 +961,9 @@ function glClearRect(x, y, width, height)
 
 ///////////////////////////////////////////////////////////////////////////////
 
+// the strip glMakeOutline makes and the vectors it writes, kept for the next, as it is read into the batch first
+const glOutlineStrip = [], glOutlinePool = [];
+
 // WebGL internal function to convert polygon to outline triangle strip
 function glMakeOutline(points, width, wrap=true)
 {
@@ -968,7 +971,8 @@ function glMakeOutline(points, width, wrap=true)
         return [];
     
     const halfWidth = width / 2;
-    const strip = [];
+    const strip = glOutlineStrip, pool = glOutlinePool;
+    strip.length = 0;
     const n = points.length;
     const e = 1e-6;
     // miter ratio cap (dimensionless, matches SVG/Canvas2D convention)
@@ -1025,10 +1029,10 @@ function glMakeOutline(points, width, wrap=true)
         }
         
         // create inner and outer points along the normal
-        const inner = vec2(curr.x - nx * halfWidth, curr.y - ny * halfWidth);
-        const outer = vec2(curr.x + nx * halfWidth, curr.y + ny * halfWidth);
-        strip.push(inner);
-        strip.push(outer);
+        const inner = pool[strip.length] ||= vec2(), outer = pool[strip.length + 1] ||= vec2();
+        inner.x = curr.x - nx * halfWidth, inner.y = curr.y - ny * halfWidth;
+        outer.x = curr.x + nx * halfWidth, outer.y = curr.y + ny * halfWidth;
+        strip.push(inner, outer);
     }
     if (strip.length > 1 && wrap)
     {