littlejsengine 1.24.1 → 1.24.2

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');
@@ -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
@@ -882,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
@@ -1223,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;
 }
 
@@ -1253,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
@@ -1306,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]);
         }
     }
 }
@@ -1321,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
@@ -1335,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;
@@ -1429,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
@@ -1467,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();
@@ -1476,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;
 }
@@ -1612,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
@@ -1848,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));
@@ -1857,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)}));
     });
 }
 
@@ -1946,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);
@@ -2181,8 +2198,18 @@ 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 [];
@@ -2210,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 {}
@@ -2252,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;
@@ -2267,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
@@ -2563,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')
         {
@@ -2585,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);
@@ -2858,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);
     }
 
@@ -2898,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