littlejsengine 1.24.1 → 1.24.2

package/plugins/render3dLevel.js

@@ -198,18 +198,21 @@ function level3DTerrainShape(terrain)
 {
     if (!terrain || typeof terrain !== 'object') return;
     const size = terrain.size, rows = terrain.heights, n = LEVEL3D_TERRAIN_SAMPLES;
-    if (!isArray(size) || size.length !== 2 || !size.every((v)=> isNumber(v) && v > 0)) return;
+    if (!isArray(size) || size.length !== 2 || !size.every((v)=> level3DFinite(v) && v > 0)) return;
     if (!isArray(rows) || rows.length < 2 || rows.length > n || !isArray(rows[0])) return;
     const columns = rows[0].length;
     if (columns < 2 || columns > n || !rows.every((row)=> isArray(row) && row.length === columns)) return;
-    const heights = rows.map((row)=> row.map((v)=> isNumber(v) ? clamp(v) : 0));
+    const heights = rows.map((row)=> row.map((v)=> level3DFinite(v) ? clamp(v) : 0));
     return {pos: level3DVector(terrain.pos, vec3()), size: vec2(size[0], size[1]),
-        height: isNumber(terrain.height) && terrain.height > 0 ? terrain.height : 1, heights};
+        height: level3DFinite(terrain.height) && terrain.height > 0 ? terrain.height : 1, heights};
 }
 
 // a hex color of a level as a Color, undefined when it is not one
 function level3DHexColor(hex)
-{ return /^#([0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex) ? new Color().setHex(hex) : undefined; }
+{ return typeof hex === 'string' && /^#([0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex) ? new Color().setHex(hex) : undefined; }
+
+// a number of a level that is a real one, not NaN or Infinity, which JSON writes as 1e999
+const level3DFinite = (v)=> typeof v === 'number' && isFinite(v);
 
 // the paint of a level's terrain block, for a terrain of so many samples: its colors as they are written and a
 // color for each sample, row after row, 0 for none and 1 the first of the colors; undefined when it has none or
@@ -248,7 +251,7 @@ function level3DTerrainSetColors(map, terrain, paint=level3DTerrainPaint(terrain
 let level3DVoxelPlain;
 function level3DVoxelPlainTiles()
 {
-    if (textureInfos[0]?.size.x || headlessMode || typeof OffscreenCanvas == 'undefined')
+    if (textureInfos[0]?.size.x || headlessMode || !canvasAvailable())
         return tile();
     if (!level3DVoxelPlain)
     {
@@ -289,12 +292,12 @@ function level3DSceneApply(scene)
 {
     const r = render3D;
     if (!r || !scene || typeof scene !== 'object') return;
-    const color = (value)=> /^#([0-9a-f]{6}|[0-9a-f]{8})$/i.test(value) ? new Color().setHex(value) : undefined;
+    const color = level3DHexColor;
     const sky = isArray(scene.sky) && scene.sky.length === 3 ? scene.sky.map(color) : [];
     if (sky.length && sky.every((c)=> c))
     {
         // as setSky does, without disposing a dome that is the game's own
-        const [top, horizon, bottom] = sky, ambient = isNumber(scene.ambient) ? scene.ambient : .5;
+        const [top, horizon, bottom] = sky, ambient = level3DFinite(scene.ambient) ? scene.ambient : .5;
         level3DSkies.has(r.sky) && r.sky.dispose();
         level3DSkies.add(r.sky = buildSky(top, horizon, bottom));
         r.fogColor = horizon.copy();
@@ -306,7 +309,7 @@ function level3DSceneApply(scene)
         r.sunDirection = sun;
     r.sunColor = color(scene.sunColor) || r.sunColor;
     const fog = scene.fog;
-    if (isArray(fog) && fog.length === 2 && fog.every((v)=> isNumber(v)))
+    if (isArray(fog) && fog.length === 2 && fog.every(level3DFinite))
         r.fogStart = fog[0], r.fogEnd = fog[1];
     r.fogColor = color(scene.fogColor) || r.fogColor;
     if (typeof scene.shadows === 'boolean')
@@ -333,7 +336,7 @@ const level3DSunHasFlare = ()=> engineObjects.some((o)=> o instanceof LensFlare3
 // a vec3 of an array of three numbers, as the file has them, or the fallback
 function level3DVector(value, fallback)
 {
-    return isArray(value) && value.length === 3 && value.every((v)=> isNumber(v)) ?
+    return isArray(value) && value.length === 3 && value.every(level3DFinite) ?
         vec3(value[0], value[1], value[2]) : fallback;
 }
 
@@ -349,12 +352,14 @@ function level3DProperties(type, object)
     {
         const d = type.defaults[key];
         if (isColor(d))
-            /^#([0-9a-f]{6}|[0-9a-f]{8})$/i.test(value) && (properties[key] = new Color().setHex(value));
+            level3DHexColor(value) && (properties[key] = level3DHexColor(value));
         else if (isVector3(d))
             properties[key] = level3DVector(value, properties[key]);
         else if (isVector2(d))
-            isArray(value) && value.length === 2 && value.every((v)=> isNumber(v)) &&
+            isArray(value) && value.length === 2 && value.every(level3DFinite) &&
                 (properties[key] = vec2(value[0], value[1]));
+        else if (typeof d === 'number')
+            level3DFinite(value) && (properties[key] = value);
         else if (d === undefined || typeof value === typeof d)
             properties[key] = value;
     }
@@ -439,6 +444,8 @@ const level3DPrefabs = new Map;
 // how many prefabs deep an instance being made is, a prefab that holds itself is stopped; and how many of those
 // are attached: a prefab inside an attached one is attached too, or its parts would be left behind in the world
 let level3DPrefabDepth = 0, level3DPrefabAttached = 0;
+// the prefabs being made, one inside the next, so one that holds itself is caught where it does, however many times
+const level3DPrefabMaking = [];
 
 /** Add a prefab: a small level, its objects placed about its own origin, to place many times under one name
  *  - It is a type from then on: a level's object of that type, the level editor's Place list and level3DSpawn make
@@ -580,11 +587,12 @@ class Prefab3D extends EngineObject3D
     {
         const prefab = level3DPrefabs.get(this.prefabName);
         if (!prefab) return;
-        if (level3DPrefabDepth >= 8)
+        if (level3DPrefabMaking.includes(this.prefabName) || level3DPrefabDepth >= 8)
         {
             debug && console.error(`level3DLoad: the prefab ${this.prefabName} holds itself, left out there`);
             return;
         }
+        level3DPrefabMaking.push(this.prefabName);
         ++level3DPrefabDepth;
         this.attached && ++level3DPrefabAttached;
         try
@@ -628,6 +636,7 @@ class Prefab3D extends EngineObject3D
         finally
         {
             --level3DPrefabDepth;
+            level3DPrefabMaking.pop();
             this.attached && --level3DPrefabAttached;
         }
     }

package/plugins/render3dVoxels.js

@@ -256,8 +256,8 @@ class VoxelMap extends EngineObject3D
 
                 // a double sided block shows the face from inside too, its corners the other way round
                 if (block.doubleSided)
-                    mesh.addStrip([points[1], points[0], points[3], points[2]], normal.scale(-1),
-                        [uvs[1], uvs[0], uvs[3], uvs[2]], [colors[1], colors[0], colors[3], colors[2]]);
+                    mesh.addStrip([points[0], points[2], points[1], points[3]], normal.scale(-1),
+                        [uvs[0], uvs[2], uvs[1], uvs[3]], [colors[0], colors[2], colors[1], colors[3]]);
             }
         }
         this.chunkMeshes[index]?.dispose();

package/plugins/textureSheet.js

@@ -7,6 +7,7 @@
  * - Animation frames keep layout and wrap across rows as needed
  * - WebGL textures upload once per batch of loads
  * - loadAtlas imports pre-packed atlases (TexturePacker and Aseprite json)
+ * - loadTiles packs separate tile images, or several tile sheets, into one tile set for tile layers and maps
  * @namespace TextureSheets
  */
 
@@ -32,6 +33,10 @@ let textureSheets = [];
 // pending loads pack through a queue so sheets fill in call order
 let textureSheetQueue = Promise.resolve();
 let textureSheetPendingCount = 0;
+// what each load handed back by what it was given, so the same image loaded again is packed once
+const textureSheetLoaded = new Map;
+// a load's key: what it was given, a vector by its numbers
+const textureSheetLoadKey = (...parts)=> parts.map((p)=> isVector2(p) ? p.x + ',' + p.y : String(p)).join('|');
 
 /**
  * Texture Sheet - A texture that images are packed into as they load
@@ -188,6 +193,7 @@ class TextureSheet
  *  - Pass frameSize for animations, then step through them with TileInfo.frame
  *  - Grid images keep their layout and frames wrap down to the next row
  *  - Pass sourcePadding if the source image has padding baked in around frames
+ *  - The same image loaded again with the same settings gives back what the first load did, packed once
  *  @param {string} src - Image source path
  *  @param {Vector2|number} [frameSize] - Size of each animation frame in pixels, or the whole image less its
  *  source padding if not passed
@@ -208,10 +214,14 @@ function loadSprite(src, frameSize, padding=textureSheetPadding, sourcePadding=0
 
     if (isNumber(frameSize))
         frameSize = vec2(/** @type {number} */ (frameSize));
+    const key = textureSheetLoadKey('sprite', src, frameSize, padding, sourcePadding);
+    if (!headlessMode && textureSheetLoaded.has(key))
+        return textureSheetLoaded.get(key);
 
     // start with an empty tile that gets filled in when the image loads
     const tileInfo = new TileInfo(vec2(), vec2(), undefined, padding, 0);
     if (headlessMode) return tileInfo;
+    textureSheetLoaded.set(key, tileInfo);
 
     // point at a sheet right away so drawing before it loads picks up empty pixels
     tileInfo.textureInfo = (textureSheets[0] || textureSheetCreate()).textureInfo;
@@ -254,6 +264,70 @@ function loadSprite(src, frameSize, padding=textureSheetPadding, sourcePadding=0
     return tileInfo;
 }
 
+/** Load tile images and pack them into texture sheets as one tile set, for tile layers and maps
+ *  - Each image is cut into tiles of tileSize, left to right then down, so an image of one tile is one tile and a
+ *    sheet is all of its tiles; the tiles are numbered from 0 in the order the images are given
+ *  - Returns a tile set at once, a TileInfo whose tiles fill in as the images load; wait for them with spritesReady
+ *  - Give it to tileLayersLoad, a TileLayer or a TileCollisionLayer as its tile info: tile n draws tiles[n],
+ *    wherever it was packed, and the level editor's palette offers each of them; frame and index do not read the
+ *    list, use set.tiles[n] for one tile; make the layers after spritesReady, a layer made before draws nothing
+ *  - An image that is not a whole number of tiles gives the whole tiles in it; a sheet with gaps between its tiles
+ *    is not read, cut it into its tiles first
+ *  - An image that fails to load, or that no sheet can hold, adds no tiles and says so in the console, so the tiles
+ *    of the images after it move up
+ *  - The same images loaded again with the same settings give back what the first load did, packed once
+ *  @param {Array<string>} sources - Image source paths
+ *  @param {Vector2|number} [tileSize] - Size of a tile in pixels
+ *  @param {number} [padding] - How many pixels padding around each tile on the sheet
+ *  @return {TileInfo}
+ *  @example
+ *  const tiles = loadTiles(['grass.png', 'dirt.png', 'water.png', 'props.png'], 16);
+ *  await spritesReady();
+ *  tileLayersLoad(map, tiles); // tile 0 is grass, 1 dirt, 2 water, then the tiles of props.png
+ *  @memberof TextureSheets */
+function loadTiles(sources, tileSize=tileDefaultSize, padding=textureSheetPadding)
+{
+    ASSERT(isArray(sources) && sources.every((src)=> isStringLike(src)), 'sources must be a list of image paths');
+    ASSERT(isVector2(tileSize) || isNumber(tileSize), 'tileSize must be a vec2 or number');
+    ASSERT(isNumber(padding), 'padding must be a number');
+    ASSERT(engineInitialized || headlessMode, 'call loadTiles after engineInit, e.g. in gameInit');
+    const size = isNumber(tileSize) ? vec2(/** @type {number} */ (tileSize)) : /** @type {Vector2} */ (tileSize).copy();
+    const key = textureSheetLoadKey('tiles', sources.join('\n'), size, padding);
+    if (!headlessMode && textureSheetLoaded.has(key))
+        return textureSheetLoaded.get(key);
+    const set = new TileInfo(vec2(), size, undefined, 0, 0);
+    set.tiles = [];
+    if (headlessMode) return set;
+    textureSheetLoaded.set(key, set);
+    set.textureInfo = (textureSheets[0] || textureSheetCreate()).textureInfo;
+
+    // every image decodes at once, and packs through the queue in the order given, so the tiles keep that order
+    for (const src of sources)
+    {
+        const image = new Image;
+        const imagePromise = new Promise((resolve)=>
+        {
+            image.onerror = image.onload = resolve;
+            image.crossOrigin = 'anonymous';
+            image.src = src;
+        });
+        textureSheetQueueJob('loadTiles ' + src, async ()=>
+        {
+            await imagePromise;
+            // the whole tiles of it, an edge past the last one left out
+            const columns = image.width / size.x | 0, rows = image.height / size.y | 0, count = columns * rows;
+            const added = count && textureSheetAdd(vec2(columns * size.x, rows * size.y), size, padding, 0);
+            if (!added)
+                return console.warn('loadTiles: ' + src + (count ? ' does not fit on a texture sheet' :
+                    ' failed to load, or is smaller than a tile') + ', its tiles are left out');
+            added.sheet.drawImage(image, added.tile, false); // upload once per batch
+            for (let k = 0; k < count; ++k)
+                set.tiles.push(added.tile.frame(k));
+        });
+    }
+    return set;
+}
+
 /** Load a pre-packed texture atlas and repack it onto texture sheets
  *  - Supports TexturePacker json (hash and array) and Aseprite json
  *  - Returns an empty object which is filled with TileInfos when loaded
@@ -261,6 +335,7 @@ function loadSprite(src, frameSize, padding=textureSheetPadding, sourcePadding=0
  *  - Aseprite frame tags become animations, so do names like run_0, run_1
  *  - Trimmed frames are restored to their full source size when packed
  *  - Rotated frames are rotated back upright when packed
+ *  - The same atlas loaded again by its paths, with the same padding, gives back what the first load did, packed once
  *  @param {string} imageSrc - Atlas image path
  *  @param {string|Object} jsonSrc - Atlas json path, or already parsed json data
  *  @param {number} [padding] - How many pixels padding around each frame
@@ -278,9 +353,15 @@ function loadAtlas(imageSrc, jsonSrc, padding=textureSheetPadding)
     ASSERT(isNumber(padding), 'padding must be a number');
     ASSERT(engineInitialized || headlessMode, 'call loadAtlas after engineInit, e.g. in gameInit');
 
+    // json passed in as data may be another atlas each time, only one loaded by its path is kept
+    const key = typeof jsonSrc === 'object' ? undefined : textureSheetLoadKey('atlas', imageSrc, jsonSrc, padding);
+    if (!headlessMode && textureSheetLoaded.has(key))
+        return textureSheetLoaded.get(key);
+
     /** @type {Object<string, TileInfo>} */
     const atlas = {};
     if (headlessMode) return atlas;
+    key && textureSheetLoaded.set(key, atlas);
 
     // start fetching the json and decoding the image right away, in parallel
     const jsonPromise = typeof jsonSrc === 'object' ? Promise.resolve(jsonSrc) :
@@ -401,12 +482,14 @@ function parseAtlas(data)
         const tagged = new Set;
         for (const tag of tags)
         {
-            groups.push({name: tag.name, frames: frames.slice(tag.from, tag.to + 1)});
-            for (let i = tag.from; i <= tag.to; ++i)
+            // a tag reaches only frames there are, whatever its numbers say
+            const from = max(0, floor(tag.from) || 0), to = min(frames.length - 1, floor(tag.to) || 0);
+            groups.push({name: tag.name, frames: frames.slice(from, to + 1)});
+            for (let i = from; i <= to; ++i)
                 tagged.add(i);
         }
         frames.forEach((f, i)=> tagged.has(i) || groups.push({name: f.name, frames: [f]}));
-        return groups;
+        return parseAtlasNamesCheck(groups);
     }
 
     // group frames that share a name stem with contiguous trailing numbers
@@ -435,6 +518,17 @@ function parseAtlas(data)
         else
             list.forEach(f=> groups.push({name: f.name, frames: [f]}));
     }
+    return parseAtlasNamesCheck(groups);
+}
+
+// an atlas's groups, with a warning for each name two of them have, as a sprite is looked up by name and the second
+// takes the first's place
+function parseAtlasNamesCheck(groups)
+{
+    const names = new Set;
+    for (const {name} of groups)
+        names.has(name) ? console.warn(`parseAtlas: two sprites are named ${name}, the second takes the first's place`) :
+            names.add(name);
     return groups;
 }
 

package/plugins/tweakables.js

@@ -379,7 +379,7 @@ function tweakNumber(parent, axis, get, set, options, save)
     const change = (input)=>
     {
         const v = parseFloat(input.value);
-        if (!isNumber(v)) return; // a box part way through typing
+        if (!isFinite(v)) return; // a box part way through typing, or 1e999
         set(v);
         save();
     };

package/plugins/tweenSystem.js

@@ -510,14 +510,14 @@ function tweenProperty(target, propertyPath, start, end, duration = 1, options =
 function tweenCarryOvershoot(tween)
 {
     const duration = tween.duration;
-    tween.life = duration ? min(tween.life, 0) % duration + duration : 1e-9;
+    tween.life = duration > 0 ? min(tween.life, 0) % duration + duration : 1e-9;
 }
 
 // How many iterations the update that finished one ran through: that one and every whole one after it
 function tweenPassed(tween)
 {
     const duration = tween.duration;
-    return duration ? 1 + floor(-min(tween.life, 0) / duration) : 1;
+    return duration > 0 ? 1 + floor(-min(tween.life, 0) / duration) : 1; // no time, or less, is one each update
 }
 
 // start the next iteration of a loop or pingPong, the time the last one ran over already spent, true

package/plugins/uiSystem.js

@@ -747,6 +747,8 @@ class UISystemPlugin
     showConfirmDialog(text='Are you sure?', yesCallback, noCallback, size=vec2(500,250), exitKey='Escape')
     {
         ASSERT(!uiSystem.confirmDialog, 'a confirm dialog is already open, check uiSystem.confirmDialog');
+        if (uiSystem.confirmDialog)
+            return uiSystem.confirmDialog; // in a release build, the one open, as a second would break navigation
 
         const savedNavigationDirection = uiSystem.navigationDirection;
         const savedNavigationObject = uiSystem.navigationObject;
@@ -1412,7 +1414,7 @@ class UITextInput extends UIObject
     onKeyDown(e)
     {
         // named keys by key, so numpad Enter works as Enter
-        const code = e.code, key = e.key;
+        const code = e.code, key = e.key || ''; // autofill sends a keydown with no key
         if (e.repeat && (key === 'Enter' || code === 'Space'))
             return; // a key held when editing began repeats, it should not type or stop editing
         this.text += ''; // a game may have set a number
@@ -1646,12 +1648,14 @@ class UISlider extends UIObject
     }
     update()
     {
+        // held when the frame began, so a release in the same frame as the last move still reads it
+        const wasActive = this.isActiveObject();
         super.update();
         if (!this.interactive)
             return;
 
         const oldValue = this.value;
-        if (this.isActiveObject())
+        if (wasActive || this.isActiveObject())
         {
             // handle horizontal or vertical slider
             const isHorizontal = this.size.x > this.size.y;

package/src/engine.js

@@ -32,7 +32,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.24.1';
+const engineVersion = '1.24.2';
 
 /** Frames per second to update
  *  @type {number}
@@ -165,6 +165,7 @@ let timeFixedStart = 0, frameFixedStart = 0;
 let windowWidthLast = 0, windowHeightLast = 0, windowPixelRatioLast = 0;
 let engineUpdateInternal; // assigned by engineInit so engineStep can drive it
 let engineFrameScheduled = false; // a frame of the loop is asked for and has not run yet
+let engineFrameErrors = 0; // errors a release build's loop went on past
 
 // the pairs of objects asked about a collision this update, so the other's own physics does not ask again: each
 // asker's others, with true for a pair both said to resolve, and false for one left overlapping, ignored or only
@@ -450,7 +451,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                     o.parent || o.updateTransforms();
 
                 // objects made and destroyed while paused, like a menu's effects, still leave the list
-                engineObjects = engineObjects.filter(o=>!o.destroyed);
+                engineObjects.some(o=>o.destroyed) && (engineObjects = engineObjects.filter(o=>!o.destroyed));
             }
             else
                 engineObjectsUpdate();
@@ -497,7 +498,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             // render the game and objects
             enginePreRender();
             gameRender();
-            engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
+            engineObjectsSort();
             for (const o of engineObjects)
             {
                 if (o.destroyed) continue;
@@ -600,7 +601,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     }
 
     // the splash first, the images load under it, then the loading screen for the rest
-    showSplashScreen && await promises.at(-1);
+    showSplashScreen && await promises[promises.length - 1];
     return startEngine(promises);
 
     // gameInit runs once the images are in, and the game loop starts once it and everything loaded while it ran are
@@ -723,7 +724,16 @@ function engineScheduleFrame()
     const next = (frameTimeMS)=>
     {
         engineFrameScheduled = false;
-        engineManualStep || engineUpdateInternal(frameTimeMS);
+        if (engineManualStep) return;
+        if (debug) return engineUpdateInternal(frameTimeMS); // a debug build stops at an error, where it shows it
+        try { engineUpdateInternal(frameTimeMS); }
+        catch (error)
+        {
+            // a release build goes on past an error in a frame, a frozen game is the worst a player can get; only the
+            // first is logged, one every frame would flood the console
+            engineFrameErrors++ || console.error(error);
+            engineScheduleFrame();
+        }
     };
     if (typeof requestAnimationFrame === 'function')
         requestAnimationFrame(next);
@@ -769,14 +779,18 @@ function engineObjectsUpdate()
     ++engineObjectsUpdateCount;
     engineObjectsCollidePairs.clear();
     // objects update in render order, which rendering keeps them in, so a headless run or a frame that rendered
-    // nothing updates them the same way; the sort is stable, and nearly free on a list that is already sorted
-    engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
+    // nothing updates them the same way
+    engineObjectsSort();
     // get list of solid objects for physics optimization, in update order, which 3D collision pairs by;
     // 2D checks the static ones last, so a contact with a moving object can not leave something back inside a static
     // solid it was already pushed out of
-    engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
-    engineObjectsCollideStaticLast = engineObjectsCollide.filter(o=>o.mass)
-        .concat(engineObjectsCollide.filter(o=>!o.mass));
+    const fixed = [];
+    engineObjectsCollide = [];
+    engineObjectsCollideStaticLast = [];
+    for (const o of engineObjects)
+        o.collideSolidObjects && (engineObjectsCollide.push(o), (o.mass ? engineObjectsCollideStaticLast : fixed).push(o));
+    for (const o of fixed)
+        engineObjectsCollideStaticLast.push(o);
 
     // update physics before object update
     for (const o of engineObjects)
@@ -826,7 +840,16 @@ function engineObjectsUpdate()
         updateTopObject(o);
 
     // remove destroyed objects
-    engineObjects = engineObjects.filter(o=>!o.destroyed);
+    engineObjects.some(o=>o.destroyed) && (engineObjects = engineObjects.filter(o=>!o.destroyed));
+}
+
+// sort the objects by render order, keeping the order of equals, only when one is out of order, as they are kept
+// sorted and most frames change none
+function engineObjectsSort()
+{
+    for (let i = engineObjects.length; --i > 0;)
+        if (engineObjects[i].renderOrder < engineObjects[i-1].renderOrder)
+            return void engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
 }
 
 /** Destroy and remove all objects

package/src/engineAudio.js

@@ -58,9 +58,19 @@ function audioInit()
 {
     if (!soundEnable || headlessMode) return;
 
+    audioSetSession();
     document.addEventListener('visibilitychange', audioVisibilityChange);
 }
 
+// on an iPhone the silent switch mutes the page's sound, unless soundIgnoreSilentSwitch has it play as media,
+// Safari 16.4 and up; elsewhere there is no audioSession and nothing changes
+function audioSetSession()
+{
+    const session = typeof navigator != 'undefined' && /** @type {any} */ (navigator).audioSession;
+    if (session)
+        session.type = soundIgnoreSilentSwitch ? 'playback' : 'auto';
+}
+
 // a hidden page stops the game, so its sound stops too, and the audio clock with it so every sound picks up
 // exactly where it was; only a suspend made here is undone, not one the browser holds until the first input
 let audioSuspendedWhenHidden = false;
@@ -203,13 +213,13 @@ function audioParamRamp(param, value, fadeTime=0)
  * @memberof Audio
  * @example
  * // load an audio asset file
- * const sound_example = new Sound('sound.mp3');
+ * const music = new Sound('sound.mp3');
  *
  * // create a zzfx sound
- * const sound_example = new Sound([.5,.5]);
+ * const blip = new Sound([.5,.5]);
  *
  * // play a sound
- * sound_example.play();
+ * blip.play();
  */
 class Sound
 {

package/src/engineDebug.js

@@ -269,7 +269,10 @@ function debugShowErrors()
     {
         // replace entire page with error message
         document.body.style.cssText = 'background-color:#111;margin:8px';
-        document.body.innerHTML = `<pre style=color:#f00;font-size:28px;white-space:pre-wrap>` + message;
+        const pre = document.createElement('pre'); // the message as text, a file name in it never markup
+        pre.style.cssText = 'color:#f00;font-size:28px;white-space:pre-wrap';
+        pre.textContent = String(message);
+        document.body.replaceChildren(pre);
     }
     
     const originalAssert = console.assert;

package/src/engineDraw.js

@@ -182,6 +182,10 @@ class TileInfo
         this.padding = padding;
         /** @property {TextureInfo} - The texture info for this tile */
         this.textureInfo = textureInfo;
+        /** @property {Array<TileInfo>|undefined} - A tile set's tiles, each wherever it was packed, as loadTiles makes
+         *  them: a tile layer given this tile info draws its tile n from tiles[n] and not from a grid on one sheet
+         *  @type {Array<TileInfo>|undefined} */
+        this.tiles = undefined;
         /** @property {number} - Shrinks tile by this many pixels to prevent neighbors bleeding */
         this.bleed = bleed;
         /** @property {number} - How many frames per row for frame(), 0 to keep frames on a single row */
@@ -868,13 +872,15 @@ function drawLineList(points, width=.1, color=WHITE, wrap=false, pos=vec2(), ang
     if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
-        let size = vec2(1);
+        let sx = 1, sy = 1;
         if (screenSpace)
         {
             if (glSkipScreenSpace) return;
-            [pos, size, angle] = screenToWorldTransform(pos, size, angle);
+            let size;
+            [pos, size, angle] = screenToWorldTransform(pos, vec2(1), angle);
+            sx = size.x, sy = size.y;
         }
-        glDrawOutlineTransform(points, color.rgbaInt(), width, pos.x, pos.y, size.x, size.y, angle, wrap);
+        glDrawOutlineTransform(points, color.rgbaInt(), width, pos.x, pos.y, sx, sy, angle, wrap);
     }
     else
     {
@@ -940,17 +946,22 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
     ASSERT(isVector2(size), 'size must be a vec2');
     ASSERT(isNumber(sides), 'sides must be a number');
 
-    // build regular polygon points
-    const points = [];
+    // build regular polygon points, into vectors kept for the next, as drawPoly is done with them when it returns
+    const points = drawRegularPolyPoints, pool = drawRegularPolyPool;
+    points.length = 0;
     const sizeX = size.x/2, sizeY = size.y/2;
     for (let i=sides; i-- > 0;) // a count that is not whole, or below zero, still ends
     {
-        const a = (i/sides)*PI*2;
-        points.push(vec2(sin(a)*sizeX, cos(a)*sizeY));
+        const a = (i/sides)*PI*2, point = pool[points.length] ||= vec2();
+        point.x = sin(a)*sizeX, point.y = cos(a)*sizeY;
+        points.push(point);
     }
     drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebGL, screenSpace, context);
 }
 
+// the points drawRegularPoly draws and the vectors it writes them into
+const drawRegularPolyPoints = [], drawRegularPolyPool = [];
+
 /** Draw colored polygon using passed in points
  *  - WebGL fills a polygon whose edges do not cross, concave or not; a self crossing one, like a star through its
  *    outer points, fills wrong there, so draw it as its simple outline or in parts
@@ -978,15 +989,17 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
     if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
-        let size = vec2(1);
+        let sx = 1, sy = 1;
         if (screenSpace)
         {
             if (glSkipScreenSpace) return;
-            [pos, size, angle] = screenToWorldTransform(pos, size, angle);
+            let size;
+            [pos, size, angle] = screenToWorldTransform(pos, vec2(1), angle);
+            sx = size.x, sy = size.y;
         }
-        glDrawPointsTransform(points, color.rgbaInt(), pos.x, pos.y, size.x, size.y, angle);
+        glDrawPointsTransform(points, color.rgbaInt(), pos.x, pos.y, sx, sy, angle);
         if (lineWidth > 0)
-            glDrawOutlineTransform(points, lineColor.rgbaInt(), lineWidth, pos.x, pos.y, size.x, size.y, angle);
+            glDrawOutlineTransform(points, lineColor.rgbaInt(), lineWidth, pos.x, pos.y, sx, sy, angle);
     }
     else
     {
@@ -1631,7 +1644,7 @@ function tintImageData(data, color, additiveColor)
     if (additiveColor && !isBlack(additiveColor))
     {
         // multiply + additive (slower), color.a is baked into the alpha channel here
-        const colorMultiply = [color.r, color.g, color.b, color.a];
+        const colorMultiply = [clamp(color.r), clamp(color.g), clamp(color.b), clamp(color.a)];
         const colorAdd = [additiveColor.r * 255, additiveColor.g * 255,
                           additiveColor.b * 255, additiveColor.a * 255];
         for (let i = 0; i < data.length; ++i)
@@ -1642,9 +1655,9 @@ function tintImageData(data, color, additiveColor)
     // RGB only, faster — alpha left intact for the caller
     for (let i = 0; i < data.length; i+=4)
     {
-        data[i  ] *= color.r;
-        data[i+1] *= color.g;
-        data[i+2] *= color.b;
+        data[i  ] *= clamp(color.r);
+        data[i+1] *= clamp(color.g);
+        data[i+2] *= clamp(color.b);
     }
     return false;
 }
@@ -1896,7 +1909,7 @@ 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;
+    if (texture || !glContext || !canvasAvailable()) 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)