littlejsengine 1.23.0 → 1.24.0

package/src/engineAudio.js

@@ -7,7 +7,7 @@
  * - 2D spatial audio based on camera position with distance-based falloff
  * - Sound instance management (pause, resume, stop)
  * - Speech synthesis for text-to-speech
- * - Music playback with ZzFXM support
+ * - Music playback from audio files, looping by default
  * - Web Audio API integration with master gain control
  * - Sounds and the master bus can route through effects, see the audio effects plugin
  * @namespace Audio
@@ -222,7 +222,13 @@ class Sound
      */
     constructor(asset, randomness, range, taper=soundDefaultTaper, onloadCallback)
     {
-        if (!soundEnable || headlessMode) return;
+        if (!soundEnable || headlessMode)
+        {
+            // no sound is made: it counts as loaded, so a game that waits for its sounds goes on
+            this.loadedPercent = 1;
+            onloadCallback?.(this);
+            return;
+        }
         const rangeIsDefault = range === undefined;
         if (rangeIsDefault)
             range = soundDefaultRange;
@@ -881,7 +887,7 @@ function playAudioBuffer(buffer, volume=1, rate=1, pan=0, loop=false, gainNode,
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// ZzFXMicro - Zuper Zmall Zound Zynth - v1.4.0 by Frank Force
+// ZzFX - Zuper Zmall Zound Zynth - v1.4.0 by Frank Force
 
 /** Generate and play a ZzFX sound
  *

package/src/engineBuild.mjs

@@ -6,7 +6,7 @@
  * - Produces TypeScript definition file (.d.ts)
  * - Includes plugin files in builds
  * - Validates code and checks for errors
- * - Outputs to dist/ folder
+ * - Outputs to dist/ folder, which is left as it was when a step fails
  */
 
 import fs from 'node:fs';
@@ -19,7 +19,9 @@ const __dirname = dirname(__filename);
 const ROOT_DIR = join(__dirname, '..');
 
 const ENGINE_NAME = 'littlejs';
-const BUILD_FOLDER = join(ROOT_DIR, 'dist');
+// built in a folder of its own and put in dist when all of it is there, so a step that fails leaves dist whole
+const OUTPUT_FOLDER = join(ROOT_DIR, 'dist');
+const BUILD_FOLDER = join(ROOT_DIR, 'dist.build');
 const SOURCE_FOLDER = join(ROOT_DIR, 'src');
 const PLUGIN_FOLDER = join(ROOT_DIR, 'plugins');
 const engineSourceFiles =
@@ -42,7 +44,6 @@ const enginePluginFiles =
     `${PLUGIN_FOLDER}/newgrounds.js`,
     `${PLUGIN_FOLDER}/postProcess.js`,
     `${PLUGIN_FOLDER}/lightSystem.js`,
-    `${PLUGIN_FOLDER}/zzfxm.js`,
     `${PLUGIN_FOLDER}/audioEffects.js`,
     `${PLUGIN_FOLDER}/uiSystem.js`,
     `${PLUGIN_FOLDER}/box2d.js`,
@@ -104,6 +105,19 @@ catch (e) { handleError(e, 'Failed to create build folder!'); }
 // Build all versions
 await buildAll();
 
+try
+{
+    // every step is done: dist is given what was built, and loses what is no longer built
+    fs.mkdirSync(OUTPUT_FOLDER, { recursive: true });
+    const built = fs.readdirSync(BUILD_FOLDER);
+    for (const file of built)
+        fs.copyFileSync(join(BUILD_FOLDER, file), join(OUTPUT_FOLDER, file));
+    for (const file of fs.readdirSync(OUTPUT_FOLDER))
+        built.includes(file) || fs.rmSync(join(OUTPUT_FOLDER, file), { recursive: true, force: true });
+    fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+}
+catch (e) { handleError(e, 'Failed to put the build in dist!'); }
+
 console.log(`Engine built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds! ✨`);
 
 ///////////////////////////////////////////////////////////////////////////////

package/src/engineDraw.js

@@ -943,7 +943,7 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
     // build regular polygon points
     const points = [];
     const sizeX = size.x/2, sizeY = size.y/2;
-    for (let i=sides; i--;)
+    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));
@@ -1054,7 +1054,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
         if (!ring)
         {
             const points = [];
-            for (let i=sides; i--;)
+            for (let i=sides; i-- > 0;)
             {
                 const a = (i/sides)*PI*2;
                 points.push(vec2(sin(a), cos(a)));
@@ -1154,7 +1154,7 @@ function drawEllipseGradient(pos, size=vec2(1), colorInner=WHITE, colorOuter=CLE
         const startA = (offset%sides)/sides*PI*2;
         const points = [rim(startA)];
         const colors = [outerInt];
-        for (let i=sides; i--;)
+        for (let i=sides; i-- > 0;)
         {
             const a = ((i+offset)%sides)/sides*PI*2;
             points.push(pos);
@@ -1577,7 +1577,8 @@ function isOnScreen(pos, size=0)
 function setAdditiveBlendMode(additive=true)
 {
     glAdditive = additive;
-    drawContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    if (drawContext) // none headless
+        drawContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
 /** Set the Shader that 2D draws use from now on, none for the engine's own
@@ -1700,9 +1701,12 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     }
     else
     {
-        // copy to offscreen canvas
-        workReadCanvas.width = sWidth;
-        workReadCanvas.height = sHeight;
+        // copy to offscreen canvas, sized again only when the size changes: setting a size remakes the canvas even
+        // to the same one, and a game's tinted tiles are mostly of one size
+        if (workReadCanvas.width !== sWidth || workReadCanvas.height !== sHeight)
+            workReadCanvas.width = sWidth, workReadCanvas.height = sHeight;
+        else
+            workReadContext.clearRect(0, 0, sWidth, sHeight);
         workReadContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
 
         // tint image using offscreen work context

package/src/engineEditor.js

@@ -181,10 +181,10 @@ class LevelEditor
     onPanel(element) {}
 
     /** Called by Save with the text of the file and its name; return true when the game kept it itself, and the
-     *  editor writes no file, to set or override
+     *  editor writes no file, to set or override; it may be async
      *  @param {string} text
      *  @param {string} fileName
-     *  @return {boolean|void} */
+     *  @return {boolean|void|Promise<boolean|void>} */
     onSave(text, fileName) { return false; }
 
     /** True while the editor is open, the game is paused under it
@@ -551,7 +551,7 @@ function editorMapRestore(map)
     if (!map.layers || data.some((layer)=> !Array.isArray(layer))) return map;
     const objects = editorObjectGroups(map.layers).map((group)=> group.objects ?? []);
     const url = editorFetchedURLs.get(map), hash = editorMapHash(data, objects, editorMapLayout(map));
-    const fileName = url?.split(/[?#]/)[0].split('/').pop() || 'level.json';
+    const fileName = editorFileName(url, 'level.json');
     const record = {map, url, fileName, key: editorMapKey(map, url, hash), hash,
         original: data.map((layer)=> [...layer]), originalObjects: editorObjectsCopy(objects),
         originalSize: {width: map.width, height: map.height}, layers: []};
@@ -582,6 +582,8 @@ function editorMapRestore(map)
         editorRestoreObjects(map, saved);
         console.warn(`LittleJS editor: brought back unsaved edits to ${record.fileName}, ` +
             'Save in the editor (Esc then 0) writes them to the file');
+        saved.stale && console.warn(`LittleJS editor: they are older than the last edits to ${record.fileName}, ` +
+            'which storage had no room for');
     }
     return map;
 }
@@ -783,6 +785,7 @@ async function editorSaveText(record, text, pickAgain)
             if (error?.name === 'AbortError') return; // the picker was closed, nothing saved
             record.fileHandle = undefined; // a file it could not write, a download instead, and not kept
             editorFileStore.set(editorFileKey(record), undefined);
+            console.warn(`LittleJS editor: ${record.fileName} could not be written, downloaded instead`, error);
         }
     }
     saveText(text, record.fileName, 'application/json');
@@ -799,15 +802,35 @@ const editorSaves = ()=> readSaveData(editorSaveName(), {});
 // if the last autosave did not fit in storage, the panel says so
 let editorSaveFailed = false;
 
-// write the autosaves, noting whether storage took them
-function editorWriteSaves(saves)
+// write the autosaves, noting whether storage took them; when it did not, the autosave it still has of this map
+// is an older one, and is marked so, for the reload that brings it back to say so
+function editorWriteSaves(saves, key, name=editorSaveName())
 {
     try
     {
-        localStorage.setItem(editorSaveName(), JSON.stringify(saves));
-        editorSaveFailed = false;
+        localStorage.setItem(name, JSON.stringify(saves));
+        return editorSaveFailed = false;
     }
     catch { editorSaveFailed = true; }
+    try
+    {
+        const kept = readSaveData(name, {});
+        if (!kept[key] || kept[key].stale) return true;
+        kept[key].stale = true;
+        localStorage.setItem(name, JSON.stringify(kept));
+    }
+    catch {} // no room for the mark either
+    return true;
+}
+
+// the name of the file a level was fetched from, as it is on disk: without its folder and query, and with what
+// the url spells with a percent as it is written, so it is the name a picked file has
+function editorFileName(url, fallback)
+{
+    const name = url?.split(/[?#]/)[0].split('/').pop();
+    if (!name) return fallback;
+    try { return decodeURIComponent(name); }
+    catch { return name; }
 }
 
 // a map's name for its autosave, the file it was fetched from without a query, or its size, layer names and data as loaded; a map with
@@ -863,12 +886,12 @@ function editorAutosave(record)
     else
         saves[record.key] = {hash: record.hash, savedHash: record.savedHash, width: map.width, height: map.height,
             layers: data, objects, nextobjectid: map.nextobjectid};
-    editorWriteSaves(saves);
+    editorWriteSaves(saves, record.key);
 }
 
 // paint every cell of a map's layers from a list of tile data, the tile layers of the map in order, and set its
 // object layers' objects from a list of them; data of another size resizes the map, which needs the Restart hook
-function editorPaintData(record, data, objects, width=record.map.width, height=record.map.height)
+function editorPaintData(record, data, objects, width=record.map.width, height=record.map.height, keepUnknown=false)
 {
     editorStrokeEnd();
     if (width !== record.map.width || height !== record.map.height)
@@ -888,7 +911,9 @@ function editorPaintData(record, data, objects, width=record.map.width, height=r
             if (gids?.length === width * height)
                 gids.forEach((gid, i)=> editorPaint(layer, vec2(i % width, height - 1 - (i / width | 0)), gid));
         }
-        editorObjectLayers(record).forEach((layer, i)=> objects &&
+        // an autosave from before the file had an object layer leaves that layer as the file has it; Reset to file
+        // empties a layer the file did not have
+        editorObjectLayers(record).forEach((layer, i)=> objects && !(keepUnknown && i >= objects.length) &&
             editorChangeObjects(layer, (list)=> list.splice(0, list.length, ...editorObjectsCopy(objects[i] ?? []))));
     });
     editorStroke ? editorStrokeEnd() : editorAutosave(record);
@@ -908,7 +933,7 @@ function editorApplyPending(record)
         return false;
     }
     record.pending = record.pendingUnfit = undefined;
-    editorPaintData(record, saved.layers, saved.objects, saved.width, saved.height);
+    editorPaintData(record, saved.layers, saved.objects, saved.width, saved.height, true);
     return true;
 }
 
@@ -1013,8 +1038,7 @@ function editorClearSelections()
 function editorMapChanged(record, before)
 {
     const stroke = [{resize: record, before, after: editorMapSnapshot(record)}];
-    editorUndoList.push(stroke);
-    editorRedoList.length = 0;
+    editorUndoPush(stroke);
     editorChanged(stroke);
 }
 
@@ -1091,12 +1115,20 @@ function editorPaint(layer, pos, gid)
     (editorStroke ||= []).push({layer, pos: pos.copy(), before, after: gid});
 }
 
+// an edit goes on the undo list, which keeps the last 100, as the 3D editor's does: a fill of a large layer is
+// an entry for every cell, and a session of them would hold millions
+function editorUndoPush(stroke)
+{
+    editorUndoList.push(stroke);
+    editorUndoList.length > 100 && editorUndoList.shift();
+    editorRedoList.length = 0;
+}
+
 // the stroke is done, it can be undone as one
 function editorStrokeEnd()
 {
     if (!editorStroke) return;
-    editorUndoList.push(editorStroke);
-    editorRedoList.length = 0;
+    editorUndoPush(editorStroke);
     editorChanged(editorStroke);
     editorStroke = undefined;
 }
@@ -1506,7 +1538,7 @@ function editorUpdateObjects(space)
             if (!editorObjectSelection.has(hit.id))
                 editorObjectSelection = new Set([hit.id]);
             editorObjectDrag = {start: snap(mouse), from: new Map(editorSelectedObjects().map((object)=>
-                [object.id, editorObjectPos(record, object)]))};
+                [object.id, {x: object.x, y: object.y}]))};
         }
         else if (editorObjectSelection.size)
             editorObjectSelection.clear();
@@ -1521,8 +1553,10 @@ function editorUpdateObjects(space)
         {
             for (const object of list)
             {
-                const from = drag.from.get(object.id);
-                from && editorObjectSetPos(record, object, from.add(delta));
+                // from the numbers it had, in the map's own units: through cells and back they pick up a hair
+                const from = drag.from.get(object.id), {tilewidth=1, tileheight=1} = record.map;
+                if (from)
+                    object.x = from.x + delta.x * tilewidth, object.y = from.y - delta.y * tileheight;
             }
         });
     }

package/src/engineExport.js

@@ -419,6 +419,7 @@ export
     tileCollisionTest,
     tileCollisionRaycast,
     tileLayersLoad,
+    tileLayersFromLDtk,
     objectLayersAddType,
     objectLayersLoad,
     TileLayerData,