littlejsengine 1.24.0 → 1.24.2

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)

package/src/engineEditor.js

@@ -453,7 +453,7 @@ function editorSetOpen(open)
         // the layer edited last, when it is still there, or the collision layer
         const layers = editorLayers();
         layers.includes(editorLayer) || (editorLayer = layers.find((layer)=> layer.live?.isSolid) ??
-            layers.filter((layer)=> !layer.isObjects).at(-1));
+            layers.filter((layer)=> !layer.isObjects).pop());
         layers.includes(editorObjectLayer) || (editorObjectLayer = editorLayer ? undefined :
             layers.find((layer)=> layer.isObjects)); // a level of objects alone
         editorCall('onOpen');
@@ -570,8 +570,8 @@ function editorMapRestore(map)
     if ((saved.width ?? map.width) === map.width && (saved.height ?? map.height) === map.height &&
         editorSameData(saved.layers, data) && editorSameData(saved.objects ?? [], objects))
         editorDiscardPending(record);
-    else if (!sameFile || !editorResizeMap(map, saved.width ?? map.width, saved.height ?? map.height) ||
-        !editorCopyData(data, saved.layers))
+    else if (!sameFile || !editorSavedFits(saved, data.length, saved.width ?? map.width, saved.height ?? map.height) ||
+        !editorResizeMap(map, saved.width ?? map.width, saved.height ?? map.height) || !editorCopyData(data, saved.layers))
     {
         record.pending = saved;
         console.warn(`LittleJS editor: ${record.fileName} changed since its autosaved edits, ` +
@@ -654,7 +654,7 @@ function editorLayerRecord(live)
 function editorTilesets(live)
 {
     const tileInfo = live.tileInfo, image = tileInfo?.textureInfo?.image;
-    if (!image) return [];
+    if (!image || tileInfo.tiles) return []; // a tile set is packed from many images, none of them a Tiled tileset
     const {x: tilewidth, y: tileheight} = tileInfo.size, padding = tileInfo.padding;
     const columns = tileInfo.columns || floor(image.width / (tilewidth + padding*2));
     const rows = floor(image.height / (tileheight + padding*2));
@@ -670,7 +670,17 @@ function editorJSONFetched(url, json)
 { json && typeof json === 'object' && editorFetchedURLs.set(json, String(url)); }
 
 // a map as Tiled JSON, everything it was loaded with kept, the tile data as the editor left it
-function editorMapJSON(record) { return JSON.stringify(record.map); }
+function editorMapJSON(record)
+{
+    // an object layer the editor made for a first object, every object of which was taken back, is left out
+    const map = record.map, made = map.layers.find((layer)=> editorMadeGroups.has(layer) && !layer.objects.length);
+    if (!made) return JSON.stringify(map);
+    return JSON.stringify({...map, layers: map.layers.filter((layer)=> layer !== made),
+        ...(map.nextlayerid === made.id + 1 && {nextlayerid: made.id})});
+}
+
+// the object layers the editor made in a map, for a map that had none
+const editorMadeGroups = new WeakSet;
 
 // the files picked to save maps to, kept across reloads in IndexedDB by page and map, which is where a browser
 // lets a page keep them; each resolves to undefined when the store can not be used
@@ -870,6 +880,11 @@ function editorCopyData(data, saved)
     return true;
 }
 
+// are an autosave's tiles a layer for each of the map's, each of its own size, so the map is resized only for tiles
+// that fit it
+const editorSavedFits = (saved, count, width, height)=> isArray(saved.layers) && saved.layers.length === count &&
+    saved.layers.every((layer)=> isArray(layer) && layer.length === width * height);
+
 // remember a map's tile data and objects, or forget them when they are back to the file
 function editorAutosave(record)
 {
@@ -877,7 +892,7 @@ function editorAutosave(record)
     const saves = editorSaves(), map = record.map, data = editorTileLayerData(map.layers);
     const objects = editorObjectGroups(map.layers).map((group)=> group.objects ?? []);
     const original = record.originalObjects ?? [], kept = objects.slice();
-    while (kept.length > original.length && !kept.at(-1).length)
+    while (kept.length > original.length && !kept[kept.length - 1].length)
         kept.pop(); // an Objects layer the editor made, empty again, is not an edit
     const size = record.originalSize, sameSize = map.width === size.width && map.height === size.height;
     // the map as it was loaded has nothing to keep; one a Save wrote is kept until a reload shows the file has it
@@ -898,7 +913,7 @@ function editorPaintData(record, data, objects, width=record.map.width, height=r
     {
         if (!editorHas('onRestart')) return;
         const before = editorMapSnapshot(record);
-        editorSetMapSnapshot(record, {width, height, layers: data, objects});
+        editorSetMapSnapshot(record, {width, height, layers: data, objects}, keepUnknown);
         editorMapChanged(record, before);
         return;
     }
@@ -1015,13 +1030,15 @@ function editorMapSnapshot(record)
     return editorObjectsCopy({width: map.width, height: map.height, layers: editorTileLayerData(map.layers), objects});
 }
 
-// give a map a size, tiles and objects, the game's Restart hook makes its layers again
-function editorSetMapSnapshot(record, snapshot)
+// give a map a size, tiles and objects, the game's Restart hook makes its layers again; keepUnknown leaves an object
+// layer past the snapshot's as it is, as applying an autosave from before the file had it does
+function editorSetMapSnapshot(record, snapshot, keepUnknown=false)
 {
     const map = record.map;
     editorResizeMap(map, snapshot.width, snapshot.height);
     editorCopyData(editorTileLayerData(map.layers), snapshot.layers);
     editorRestoreObjects(map, snapshot);
+    if (!keepUnknown)
     for (const group of editorObjectGroups(map.layers).slice(snapshot.objects.length))
         group.objects = []; // an Objects layer the editor made since
     editorClearSelections();
@@ -1216,13 +1233,15 @@ function editorObjectLayers(record)
     return record.objectLayers;
 }
 
-// a new Tiled object layer named Objects, on top of a map
+// a new Tiled object layer named Objects, on top of a map, with an id past every layer's, in groups too
 function editorNewObjectGroup(map)
 {
-    const id = map.nextlayerid ?? map.layers.length + 1, group = {draworder: 'topdown', id, name: 'Objects',
+    const ids = (layers)=> (layers || []).flatMap((layer)=> [(layer.id | 0) + 1, ...ids(layer.layers)]);
+    const id = max(map.nextlayerid ?? 1, ...ids(map.layers)), group = {draworder: 'topdown', id, name: 'Objects',
         objects: [], opacity: 1, type: 'objectgroup', visible: true, x: 0, y: 0};
     map.nextlayerid = id + 1;
     map.layers.push(group);
+    editorMadeGroups.add(group);
     return group;
 }
 
@@ -1246,12 +1265,13 @@ function editorObjectPos(record, object)
     return vec2(object.x / tilewidth, height - object.y / tileheight);
 }
 
-// set an object's position in the map from a world position
+// set an object's position in the map from a world position, to a millionth of a pixel, so a place turned into
+// cells and back is written as it was and not a hair off
 function editorObjectSetPos(record, object, pos)
 {
     const {height=0, tilewidth=1, tileheight=1} = record.map;
-    object.x = pos.x * tilewidth;
-    object.y = (height - pos.y) * tileheight;
+    object.x = round(pos.x * tilewidth * 1e6) / 1e6;
+    object.y = round((height - pos.y) * tileheight * 1e6) / 1e6;
 }
 
 // called by objectLayersLoad for each object it read, the editor keeps what the game made by the object's id
@@ -1299,8 +1319,8 @@ function editorSetObjects(layer, list)
             if ('pos' in made && (old.x !== object.x || old.y !== object.y))
                 made.pos = editorObjectPos(record, object);
             const was = objectLayersProperties(type, old), now = objectLayersProperties(type, object);
-            for (const name in now)
-                editorSameData(was[name], now[name]) || (made[name] = now[name]);
+            for (const name in now) // a method's name is left out, as objectLayersMake leaves it
+                editorSameData(was[name], now[name]) || typeof made[name] === 'function' || (made[name] = now[name]);
         }
     }
 }
@@ -1314,7 +1334,7 @@ function editorChangeObjects(layer, change)
     change(after);
     if (editorSameData(before, after)) return false;
     editorSetObjects(layer, after);
-    const last = editorStroke?.at(-1);
+    const last = editorStroke?.[editorStroke.length - 1];
     if (last?.objectLayer === layer)
         last.after = after;
     else
@@ -1328,15 +1348,21 @@ function editorObjectSetProperty(object, name, value, defaultValue)
 {
     if (Number.isInteger(defaultValue) && isNumber(value))
         value = round(value); // an integer stays one, as Tiled keeps an int
-    const properties = (object.properties ?? []).filter((property)=> property.name !== name);
+    const list = object.properties ?? [], at = list.findIndex((property)=> property.name === name), old = list[at];
+    const properties = list.filter((property)=> property.name !== name);
     const text = (v)=> isColor(v) ? v.toString() : isVector2(v) ? v.x + ',' + v.y : JSON.stringify(v);
     if (text(value) !== text(defaultValue))
     {
         const hex = isColor(value) && value.toString();
-        properties.push(hex ? {name, type: 'color', value: '#' + hex.slice(7, 9) + hex.slice(1, 7)} :
+        const property = hex ? {name, type: 'color', value: '#' + hex.slice(7, 9) + hex.slice(1, 7)} :
             isVector2(value) ? {name, type: 'string', value: text(value)} :
             {name, type: typeof value === 'boolean' ? 'bool' : typeof value === 'string' ? 'string' :
-            Number.isInteger(defaultValue) ? 'int' : 'float', value});
+            Number.isInteger(defaultValue) ? 'int' : 'float', value};
+
+        // one the map had keeps its place and its kind where the value fits it, a file stays a file, an object an object
+        if (old?.type === 'file' && property.type === 'string' || old?.type === 'object' && property.type === 'int')
+            property.type = old.type;
+        at < 0 ? properties.push(property) : properties.splice(at, 0, property);
     }
     if (properties.length)
         object.properties = properties;
@@ -1422,14 +1448,15 @@ function editorObjectsIn(layer, a, b)
 function editorPickObject(object)
 { editorObjectBrush = [{type: object.type || object.class, properties: editorObjectsCopy(object.properties ?? []), offset: vec2()}]; }
 
-// a new Tiled point object for a brush's object, at a world position, with the map's next id
-function editorNewObject(record, {type, properties}, pos)
+// a new Tiled object for a brush's object, at a world position, with the map's next id: a copy of the object it was
+// copied from, its name, size, turn and the rest kept, or a point object of the brush's type and properties
+function editorNewObject(record, {type, properties, object}, pos)
 {
-    const object = {id: editorNextObjectId(record.map), name: '', type, point: true, rotation: 0, visible: true,
-        width: 0, height: 0, x: 0, y: 0};
-    properties.length && (object.properties = editorObjectsCopy(properties));
-    editorObjectSetPos(record, object, pos);
-    return object;
+    const made = object ? editorObjectsCopy(object) : {id: 0, name: '', type, point: true, rotation: 0, visible: true,
+        width: 0, height: 0, x: 0, y: 0, ...(properties.length && {properties: editorObjectsCopy(properties)})};
+    made.id = editorNextObjectId(record.map);
+    editorObjectSetPos(record, made, pos);
+    return made;
 }
 
 // place an object brush's objects at a position plus each one's offset, as one undo
@@ -1460,8 +1487,8 @@ function editorDeleteObjects()
     return true;
 }
 
-// the selected objects into the brush, their offsets from the lowest corner of their positions, and the selection
-// cleared so the next click places them
+// the selected objects into the brush, each a copy with its offset from the lowest corner of their positions, and
+// the selection cleared so the next click places them
 function editorCopyObjects()
 {
     const objects = editorSelectedObjects();
@@ -1469,7 +1496,7 @@ function editorCopyObjects()
     const positions = objects.map((object)=> editorObjectPos(editorObjectLayer.record, object));
     const low = vec2(min(...positions.map((p)=> p.x)), min(...positions.map((p)=> p.y)));
     editorObjectBrush = editorObjectClipboard = objects.map((object, i)=> ({type: object.type || object.class,
-        properties: editorObjectsCopy(object.properties ?? []), offset: positions[i].subtract(low)}));
+        offset: positions[i].subtract(low), object: editorObjectsCopy(object)}));
     editorObjectSelection.clear();
     return true;
 }
@@ -1605,12 +1632,8 @@ function editorCellClamped(live, worldPos)
 function editorArea(a, b)
 { return {min: vec2(min(a.x, b.x), min(a.y, b.y)), max: vec2(max(a.x, b.x), max(a.y, b.y))}; }
 
-// the tile info a layer draws a tile with, as TileLayer.drawTileData picks it
-function editorTileInfo(live, tile)
-{
-    const t = live.tileInfo;
-    return t && (t.columns ? t.frame(tile) : t.index(tile));
-}
+// the tile info a layer draws a tile with, as TileLayer.drawTileData picks it, undefined past the end of its sheet
+function editorTileInfo(live, tile) { return tileLayerTileInfo(live.tileInfo, tile); }
 
 ///////////////////////////////////////////////////////////////////////////////
 // stamps
@@ -1841,8 +1864,8 @@ function editorClear()
     editorStrokeEnd();
 }
 
-// the objects of a map's object layers inside a tile area, each {group, type, properties, offset}: the index of its
-// object layer, and its offset from the area's bottom left corner, as a stamp keeps them
+// the objects of a map's object layers inside a tile area, each {group, type, offset, object}: the index of its
+// object layer, its offset from the area's bottom left corner, and a copy of it, as a stamp keeps them
 function editorAreaObjects(layer, area)
 {
     const corner = layer.live.pos.add(area.min), far = layer.live.pos.add(area.max).add(vec2(1));
@@ -1850,8 +1873,8 @@ function editorAreaObjects(layer, area)
     {
         const ids = new Set(editorObjectsIn(objectLayer, corner, far));
         return (objectLayer.group?.objects ?? []).filter((object)=> ids.has(object.id)).map((object)=>
-            ({group, type: object.type || object.class, properties: editorObjectsCopy(object.properties ?? []),
-            offset: editorObjectPos(layer.record, object).subtract(corner)}));
+            ({group, type: object.type || object.class, offset: editorObjectPos(layer.record, object).subtract(corner),
+            object: editorObjectsCopy(object)}));
     });
 }
 
@@ -1939,12 +1962,13 @@ function editorSelectionDragTo(cell)
             from.arrayCheck(target.live.size) && editorPaint(target, from, 0);
         }
         editorPaintStamp(layer, editorSelection.min, stamp);
+        // whole cells added to the places as written, as an object drag does, so they come back to the digit
+        const {tilewidth=1, tileheight=1} = layer.record.map;
         for (const {objectLayer, ids} of drag.objects)
             editorChangeObjects(objectLayer, (list)=>
             {
                 for (const object of list)
-                    ids.has(object.id) && editorObjectSetPos(layer.record, object,
-                        editorObjectPos(layer.record, object).add(delta));
+                    ids.has(object.id) && (object.x += delta.x * tilewidth, object.y -= delta.y * tileheight);
             });
     });
     editorStroke && editorRedraw(editorStroke);
@@ -2174,16 +2198,30 @@ function editorPaletteTiles(layer)
     const live = layer?.live, image = live?.tileInfo?.textureInfo?.image, list = levelEditor.paletteTiles;
     if (list && live)
     {
-        if (layer.palette?.list !== list)
-            layer.palette = {list, tiles: list.map((tile)=> ({tile, tileInfo: editorTileInfo(live, tile)}))};
+        if (layer.palette?.list !== list || layer.palette.count !== live.tileInfo?.tiles?.length)
+            layer.palette = {list, count: live.tileInfo?.tiles?.length, // a tile set fills in as it loads
+                tiles: list.map((tile)=> ({tile, tileInfo: editorTileInfo(live, tile)}))
+                .filter((t)=> t.tileInfo || !live.tileInfo)}; // a tile set, or a sheet, has only so many
+        return layer.palette.tiles;
+    }
+    // a tile set lists its tiles, each a tile the palette offers
+    const set = live?.tileInfo?.tiles;
+    if (set)
+    {
+        if (layer.palette?.set !== set || layer.palette.tiles.length !== set.length)
+            layer.palette = {set, tiles: set.map((tileInfo, tile)=> ({tile, tileInfo}))};
         return layer.palette.tiles;
     }
     if (!image) return [];
     if (layer.palette?.image === image) return layer.palette.tiles;
 
-    const tiles = [];
+    // a sheet read by its columns, a tileset with a margin or a spacing, is read with frame(), which asserts the
+    // frame is inside the image, so a row past the image's end is found before its frame is made
+    const tiles = [], base = live.tileInfo, columns = base.columns;
     for (let i = 0; i < 4096; ++i)
     {
+        if (columns && base.pos.y + (i / columns | 0) * (base.size.y + base.padding*2) + base.size.y > image.height)
+            break;
         const t = editorTileInfo(live, i);
         if (t.pos.x + t.size.x > image.width || t.pos.y + t.size.y > image.height) break;
         tiles.push({tile: i, tileInfo: t});
@@ -2199,7 +2237,7 @@ function editorPaletteTiles(layer)
                 size.y).data.buffer);
             return pixels.every((p)=> p === pixels[0]);
         };
-        while (tiles.length > 1 && blank(tiles.at(-1)))
+        while (tiles.length > 1 && blank(tiles[tiles.length - 1]))
             tiles.pop();
     }
     catch {}
@@ -2241,7 +2279,7 @@ function editorPaletteDrawObjects(canvas)
 function editorPaletteDraw(canvas, layer)
 {
     const tiles = editorPaletteTiles(layer), cell = editorPaletteCell, columns = editorPaletteColumns;
-    const image = layer?.live.tileInfo?.textureInfo?.image, slots = tiles.length + 1;
+    const slots = tiles.length + 1;
     canvas.style.display = tiles.length ? '' : 'none';
     canvas.width = columns * cell;
     canvas.height = ceil(slots / columns) * cell;
@@ -2256,10 +2294,13 @@ function editorPaletteDraw(canvas, layer)
     context.moveTo(8, 8), context.lineTo(cell - 8, cell - 8);
     context.moveTo(cell - 8, 8), context.lineTo(8, cell - 8);
     context.stroke();
-    tiles.forEach(({tileInfo: {pos, size}}, i)=>
+    tiles.forEach(({tileInfo}, i)=>
     {
-        const slot = i + 1, x = slot % columns * cell, y = (slot / columns | 0) * cell;
-        context.drawImage(image, pos.x, pos.y, size.x, size.y, x + 2, y + 2, cell - 4, cell - 4);
+        if (!tileInfo) return; // headless, a layer with no sheet
+        const {pos, size, textureInfo} = tileInfo;
+        // each from its own sheet, a tile set's may be on several
+        const slot = i + 1, x = slot % columns * cell, y = (slot / columns | 0) * cell, image = textureInfo?.image;
+        image && context.drawImage(image, pos.x, pos.y, size.x, size.y, x + 2, y + 2, cell - 4, cell - 4);
     });
 
     // the brush's slot outlined, when it is one tile the palette shows or Erase
@@ -2552,7 +2593,7 @@ function editorPropertiesUpdate(box)
             input.type = 'number';
             input.step = Number.isInteger(defaultValue) ? '1' : 'any';
             input.value = String(value);
-            input.onchange = ()=> { const v = parseFloat(input.value); isNumber(v) && set(v); };
+            input.onchange = ()=> { const v = parseFloat(input.value); isFinite(v) && set(v); }; // 1e999 is not one
         }
         else if (typeof defaultValue === 'string')
         {
@@ -2574,7 +2615,7 @@ function editorPropertiesUpdate(box)
                 {
                     // both checked before a vector is made of them, an emptied or half typed field shows its value again
                     const px = parseFloat(input.value), py = parseFloat(y.value);
-                    if (isNumber(px) && isNumber(py))
+                    if (isFinite(px) && isFinite(py))
                         set(vec2(px, py));
                     else
                         input.value = String(value.x), y.value = String(value.y);
@@ -2847,8 +2888,9 @@ function editorRender()
     for (let y = y0; y < y1; ++y)
     {
         const t = editorGidToTile(source.data[x + (height - 1 - y) * width]);
-        if (t && live.getData(vec2(x, y)).tile === undefined)
-            drawTile(live.pos.add(vec2(x + .5, y + .5)), vec2(1), editorTileInfo(live, t.tile), ghost,
+        const tileInfo = t && editorTileInfo(live, t.tile);
+        if (tileInfo && live.getData(vec2(x, y)).tile === undefined)
+            drawTile(live.pos.add(vec2(x + .5, y + .5)), vec2(1), tileInfo, ghost,
                 t.direction * PI/2, t.mirror, undefined, glEnable, false);
     }
 
@@ -2887,8 +2929,9 @@ function editorRender()
         {
             const gid = grid[x + y * w], t = editorGidToTile(gid);
             const center = live.pos.add(editorHover).add(vec2(x + .5, y + .5));
-            if (t)
-                drawTile(center, vec2(1), editorTileInfo(live, t.tile), hsl(0, 0, 1, .7), t.direction * PI/2, t.mirror, undefined, glEnable, false);
+            const tileInfo = t && editorTileInfo(live, t.tile);
+            if (tileInfo)
+                drawTile(center, vec2(1), tileInfo, hsl(0, 0, 1, .7), t.direction * PI/2, t.mirror, undefined, glEnable, false);
             else if (gid === 0)
                 drawRect(center, vec2(1), hsl(0, 1, .5, .3), undefined, undefined, false);
         }

package/src/engineExport.js

@@ -113,6 +113,7 @@ export
     touchGamepadVibration,
     vibrateEnable,
     soundEnable,
+    soundIgnoreSilentSwitch,
     soundVolume,
     soundDefaultRange,
     soundDefaultTaper,
@@ -175,6 +176,7 @@ export
     setTouchGamepadVibration,
     setVibrateEnable,
     setSoundEnable,
+    setSoundIgnoreSilentSwitch,
     setSoundVolume,
     setSoundDefaultRange,
     setSoundDefaultTaper,

package/src/engineInput.js

@@ -586,6 +586,9 @@ function inputInit()
         if (soundEnable && !headlessMode && audioContext && !audioIsRunning())
             audioContext.resume();
 
+        // a press in the bars around a letterboxed canvas is not one on its edge; a drag out of it still moves
+        if (!inCanvas(e.x, e.y))
+            return;
         inputData[0][e.button] = 3;
 
         const mousePosScreenLast = mousePosScreen;
@@ -739,8 +742,8 @@ function inputInit()
                     }
                     else if (inputWasTouching && touch.identifier === inputTouchIdentifier)
                         mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
-                    else if (pressTouch)
-                        inputData[0][button] = 3;
+                    else if (pressTouch && inCanvas(pressTouch.clientX, pressTouch.clientY))
+                        inputData[0][button] = 3; // a tap in the bars around the canvas is not a press
                     // the finger left after a pinch moves the mouse from where it is, with no jump and no press
                     inputTouchIdentifier = pinching ? undefined : touch.identifier;
                 }
@@ -771,6 +774,13 @@ function inputInit()
 
     }
 
+    // is a point of the window on the canvas
+    function inCanvas(x, y)
+    {
+        const rect = mainCanvas.getBoundingClientRect();
+        return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+    }
+
     // convert a mouse or touch event position to screen space
     function mouseEventToScreen(mousePos)
     {
@@ -941,7 +951,7 @@ function inputUpdate()
             const centered = gamepadAxisCentered[i] ?? (gamepadAxisCentered[i] = []);
             const readAxis = (j)=>
             {
-                const v = gamepad.axes[j];
+                const v = isFinite(gamepad.axes[j]) ? gamepad.axes[j] : 0; // a broken axis reads as centered
                 if (isStandard && j < 4)
                     return v; // spec guarantees axes 0-3 are the two sticks
                 if (!gamepadAxisFilterEnable)
@@ -973,6 +983,10 @@ function inputUpdate()
                 if (button.pressed && (!button.value || button.value > .9))
                     hadInput = true;
             }
+
+            // a different gamepad in the same slot with fewer buttons or sticks holds none of the last one's
+            data.length = buttonsLast.length = gamepad.buttons.length;
+            sticks.length = gamepad.axes.length >> 1;
             
             // set new primary gamepad if current is not connected
             if (hadInput)

package/src/engineMath.js

@@ -200,11 +200,15 @@ function smoothStep(percent)
  *  @memberof Math */
 function isPowerOfTwo(value) { return value > 0 && value % 1 === 0 && 2**round(log2(value)) === value; } // any size, not only 32 bits
 
-/** Returns the nearest power of two not less than the value
+/** Returns the nearest whole power of two not less than the value, 1 for a value of 1 or less
  *  @param {number} value
  *  @return {number}
  *  @memberof Math */
-function nearestPowerOfTwo(value) { return 2**ceil(log2(value)); }
+function nearestPowerOfTwo(value)
+{
+    const power = 2**ceil(log2(max(value, 1)));
+    return power < value ? power * 2 : power; // log2 of a value just above a power can round down to it
+}
 
 /** Returns true if two axis aligned bounding boxes are overlapping
  *  this can be used for simple collision detection between objects