littlejsengine 1.24.0 → 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}
@@ -625,7 +632,11 @@ function setGLEnable(enable)
 /** Set how many sided polygons to use when drawing circles and ellipses with WebGL
  *  @param {number} sides
  *  @memberof Settings */
-function setGLCircleSides(sides) { glCircleSides = sides; }
+function setGLCircleSides(sides)
+{
+    ASSERT(isNumber(sides) && sides >= 3, 'circles need at least 3 sides');
+    glCircleSides = sides;
+}
 
 /** Set default size of tiles in pixels
  *  @param {Vector2} size
@@ -815,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
@@ -141,9 +154,10 @@ const tileLayersTiledFlips = [[0,0], [3,1], [2,1], [3,0], [0,1], [1,0], [2,0], [
  *  @param {Object}   tileMapData - Level data from exported data
  *  @param {TileInfo} [tileInfo] - Default tile info (used for size and texture), tile() by default, none when no image is loaded
  *  @param {number}   [renderOrder] - Render order of the top layer
- *  @param {number}   [collisionLayer] - Layer to use for collision if any
+ *  @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,20 +174,26 @@ 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;
         const columns = tileset.columns || max(1, floor((width - margin*2 + spacing) / (size.x + spacing)));
-        tileInfo = new TileInfo(vec2(margin), size, tileInfo.textureInfo, spacing / 2, tileInfo.bleed, columns);
+        const origin = tileInfo.pos.subtract(vec2(tileInfo.padding)); // where the sheet starts, in an atlas too
+        tileInfo = new TileInfo(origin.add(vec2(margin)), size, tileInfo.textureInfo, spacing / 2, tileInfo.bleed, columns);
     }
 
     // flatten group layers in order, a group's color and visibility carry to the layers inside it
@@ -204,17 +224,30 @@ function tileLayersLoad(tileMapData, tileInfo=tileLayerDefaultTile(), renderOrde
     };
     addLayers(tileMapData.layers, WHITE, true);
 
-    // create tile layers and fill with data
+    // a layer named for collision is the first tile layer of that name, which stays the same when layers are added
+    if (typeof collisionLayer === 'string')
+    {
+        const name = collisionLayer;
+        collisionLayer = layers.findIndex((l)=> l.color && l.dataLayer.name === name);
+        collisionLayer < 0 && console.error('tileLayersLoad: no tile layer is named ' + name + ', none is solid');
+    }
+
+    // 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);
@@ -223,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];
@@ -259,36 +292,45 @@ const tileLayersLDtkTypes = {Int: 'int', Float: 'float', Bool: 'bool', String: '
 
 /**
  * Make a Tiled map of a level of an LDtk project, to load with tileLayersLoad and objectLayersLoad
- * - Each Tiles, AutoLayer and IntGrid layer is a tile layer, the bottom one first as in Tiled, so the last layer
- *   of the LDtk file is layer 0; where LDtk stacks tiles in a cell, an edge over a fill, each tile over another
- *   goes in a layer of its own just above, named with (2), (3) and so on, so a layer of the first tiles has one
- *   wherever the LDtk layer has any, which makes it the one for collision
- * - An IntGrid layer with no tiles is a hidden layer of its values, for collision: pass its index as collisionLayer
+ * - Each Tiles, AutoLayer and IntGrid layer is a tile layer, the bottom one first as in Tiled; where LDtk stacks
+ *   tiles in a cell, an edge over a fill, each tile over another goes in a layer of its own just above, named with
+ *   (2), (3) and so on, and a tile LDtk draws see-through goes in one of its own with that opacity, times the
+ *   layer's, named with it, like Ground .25
+ * - An IntGrid layer is a hidden layer of its values under its own name, for collision, whatever tiles its rules
+ *   make, which are layers over it named with tiles, like Collisions tiles; pass the name as collisionLayer, since
+ *   the stacked and see-through layers change the indices from level to level:
+ *   tileLayersLoad(map, tile(0, 16), 0, 'Collisions')
  * - An Entities layer is an object layer: an entity's name is its type for objectLayersAddType, it is placed at
  *   its middle, and its Int, Float, Bool, String, Color and FilePath fields are its properties (an enum is a string)
  * - The tileset is the first tile layer's, with its padding and spacing; give tileLayersLoad a tile info of its image
  * - The level is in the project file (not saved as separate level files), its layers of one grid size; a layer of
- *   another grid size or another tileset is left out, with a warning in debug builds
+ *   another grid size or another tileset is left out, with a warning in debug builds, and a project with no tileset
+ *   keeps its tiles for the tile info the game gives; a project of several worlds has its levels counted in order
+ * - Layer offsets are not read
  * - The level editor edits the map this returns, and saves it as a Tiled map
  * @param {Object} ldtk - The LDtk project, its JSON
  * @param {number|string} [level] - Which level, by its index or its identifier
  * @return {Object} - A Tiled map: width, height, tilewidth, tileheight, tilesets and layers
  * @example
  * const map = tileLayersFromLDtk(await fetchJSON('world.ldtk'), 'Level_0');
- * const layers = tileLayersLoad(map, tile(0, 16), 0, 1); // layer 1 is solid
+ * const layers = tileLayersLoad(map, tile(0, 16), 0, 'Collisions'); // its IntGrid layer is solid
  * objectLayersLoad(map);
  * @memberof TileLayers */
 function tileLayersFromLDtk(ldtk, level=0)
 {
-    const levels = ldtk?.levels || [];
+    const levels = ldtk?.levels?.length ? ldtk.levels : (ldtk?.worlds || []).flatMap((w)=> w.levels || []);
     const data = typeof level === 'string' ? levels.find((l)=> l.identifier === level) : levels[level];
-    ASSERT(data, 'LDtk level not found', level);
-    ASSERT(isArray(data.layerInstances), 'LDtk level has no layers: levels saved as separate files are not read');
+    if (!data)
+        throw new Error('tileLayersFromLDtk: no level ' + level);
+    if (!isArray(data.layerInstances))
+        throw new Error('tileLayersFromLDtk: level ' + data.identifier + ' has no layers, levels saved as separate files are not read');
     const instances = data.layerInstances;
     const tiled = (l)=> l.__type !== 'Entities';
     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};
 
@@ -306,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;
@@ -322,34 +364,64 @@ 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 usable = instance.__gridSize === grid && instance.__cWid === width && instance.__cHei === height &&
-            (!tiles.length || instance.__tilesetDefUid === tileset?.uid);
-        if (!usable)
+        if (instance.__gridSize !== grid || instance.__cWid !== width || instance.__cHei !== height)
+        {
+            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
+        const empty = ()=> new Array(width * height).fill(0), opacity = instance.__opacity ?? 1;
+        const values = instance.__type === 'IntGrid';
+        if (values)
+        {
+            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});
+        }
+        // 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))
         {
-            debug && console.warn(`tileLayersFromLDtk: layer ${name} has another grid or tileset, left out`);
+            console.warn(`tileLayersFromLDtk: the tiles of layer ${name} are on another tileset, left out`);
             continue;
         }
-        const empty = ()=> new Array(width * height).fill(0), stacks = [empty()];
-        if (tiles.length)
+
+        // a layer for each depth in a cell and each opacity, the first tiles drawn solid first
+        const tilesName = values ? name + ' tiles' : name;
+        const stacks = [{depth: 0, alpha: 1, data: empty()}], stack = (depth, alpha)=>
+        {
+            let s = stacks.find((s)=> s.depth === depth && s.alpha === alpha);
+            s || stacks.push(s = {depth, alpha, data: empty()});
+            return s.data;
+        };
         {
-            // a tile's place in pixels, its tile in the sheet, and its flips: bit 0 across, bit 1 down, which are
-            // Tiled's two top bits; LDtk lists them in the order it draws them, so the first in a cell is the
-            // bottom one and each after it goes a layer higher
+            // a tile's place in pixels, its tile in the sheet, its flips, bit 0 across and bit 1 down, which are
+            // Tiled's two top bits, and its opacity; LDtk lists them in the order it draws them, so the first in a
+            // cell is the bottom one and each after it goes a layer higher
             const depth = new Uint16Array(width * height);
             for (const t of tiles)
             {
                 const x = floor(t.px[0] / grid), y = floor(t.px[1] / grid), cell = x + y * width;
                 if (x >= 0 && x < width && y >= 0 && y < height)
-                    (stacks[depth[cell]++] ||= empty())[cell] =
+                    stack(depth[cell]++, round(clamp(t.a ?? 1) * 1e3) / 1e3)[cell] =
                         (t.t + 1 | (t.f & 1 ? 0x80000000 : 0) | (t.f & 2 ? 0x40000000 : 0)) >>> 0;
             }
         }
-        else
-            (instance.intGridCsv || []).forEach((value, k)=> k < stacks[0].length && (stacks[0][k] = value));
-        const visible = instance.__type === 'IntGrid' && !tiles.length ? false : instance.visible !== false;
-        stacks.forEach((data, k)=> map.layers.push({id: k ? map.nextlayerid++ : id, name: k ? `${name} (${k + 1})` : name,
-            type: 'tilelayer', width, height, data, opacity: instance.__opacity ?? 1, visible, x: 0, y: 0}));
+        const visible = instance.visible !== false;
+        stacks.sort((a, b)=> a.depth - b.depth || b.alpha - a.alpha);
+        for (const {depth, alpha, data} of stacks)
+        {
+            const layerName = tilesName + (depth ? ` (${depth + 1})` : '') + (alpha < 1 ? ' ' + String(alpha).replace(/^0/, '') : '');
+            map.layers.push({id: values || depth || alpha < 1 ? map.nextlayerid++ : id, name: layerName, type: 'tilelayer',
+                width, height, data, opacity: opacity * alpha, visible, x: 0, y: 0});
+        }
     }
     return map;
 }
@@ -456,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;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -642,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
@@ -821,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);
     }
 
@@ -1097,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)
     {