littlejsengine 1.20.0 → 1.21.0

package/src/engineEditor.js

@@ -57,6 +57,14 @@ class LevelEditor
          *  section has Play from mouse, which starts play there, Escape at the mouse and Play at the view center
          *  @type {EditorPlayFromCallback|undefined} */
         this.onPlayFrom = undefined;
+        /** @property {Array<number>|undefined} - The tiles the palette shows, in its order, for a sheet that also holds
+         *  sprites and art that are not level tiles; undefined shows every tile of the sheet
+         *  @type {Array<number>|undefined} */
+        this.paletteTiles = undefined;
+        /** @property {boolean|undefined} - Which level editor opens: true the 3D one, false the 2D one, undefined the
+         *  3D one when a level was loaded with level3DLoad and there is a Render3DPlugin
+         *  @type {boolean|undefined} */
+        this.use3D = undefined;
     }
 
     /** True while the editor is open, the game is paused under it
@@ -253,7 +261,7 @@ function editorMapRestore(map)
     if (!saved) return map;
     // an autosave from before the map's shape was in the hash matches on its tiles and objects, and one from before
     // objects were matches on its tiles; one of a resized map is resized to first
-    const sameFile = saved.hash === record.hash || !saved.width &&
+    const sameFile = saved.hash === record.hash || saved.savedHash === record.hash || !saved.width &&
         (saved.hash === editorMapHash(data, objects) || !saved.objects && saved.hash === editorMapHash(data));
     if ((saved.width ?? map.width) === map.width && (saved.height ?? map.height) === map.height &&
         editorSameData(saved.layers, data) && editorSameData(saved.objects ?? [], objects))
@@ -406,15 +414,17 @@ async function editorRememberedFile(record)
 }
 const editorFileKey = (record)=> (globalThis.location?.pathname ?? '') + ' ' + record.key;
 
-// a map as a file Save wrote is the file from then on: Reset to file goes back to it, the autosave keeps only the
-// edits since, and a reload of it has nothing to apply; a download can not say it replaced the file, so it does not,
-// and neither does a file of another name, a copy, since the game still loads the one it came from
+// a map as a file Save wrote is the file from then on: Reset to file goes back to it, and a reload of it has nothing
+// to apply; a download can not say it replaced the file, so it does not, and neither does a file of another name, a
+// copy, since the game still loads the one it came from; the browser gives a picked file's name and not its folder,
+// so a file of the same name may be a copy too, and the autosave stays, with the hash of the file the game loads and
+// of the file written, until a reload shows which one the game loads
 function editorSetBaseline(record, written)
 {
     if (record.synthetic) return; // a layer made in code has no file to load it from
     const data = editorTileLayerData(written.layers);
     const objects = editorObjectGroups(written.layers).map((group)=> group.objects ?? []);
-    Object.assign(record, {original: data, originalObjects: objects, hash: editorMapHash(data, objects,
+    Object.assign(record, {original: data, originalObjects: objects, savedHash: editorMapHash(data, objects,
         editorMapLayout(written)), originalSize: {width: written.width, height: written.height}});
     record.pending || editorAutosave(record); // edits waiting to be applied keep their autosave
 }
@@ -527,11 +537,12 @@ function editorAutosave(record)
     while (kept.length > original.length && !kept.at(-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;
-    if (sameSize && editorSameData(data, record.original) && editorSameData(kept, original))
+    // the map as it was loaded has nothing to keep; one a Save wrote is kept until a reload shows the file has it
+    if (sameSize && editorSameData(data, record.original) && editorSameData(kept, original) && !record.savedHash)
         delete saves[record.key];
     else
-        saves[record.key] = {hash: record.hash, width: map.width, height: map.height, layers: data, objects,
-            nextobjectid: map.nextobjectid};
+        saves[record.key] = {hash: record.hash, savedHash: record.savedHash, width: map.width, height: map.height,
+            layers: data, objects, nextobjectid: map.nextobjectid};
     editorWriteSaves(saves);
 }
 
@@ -1364,8 +1375,8 @@ function editorBrushTile()
 // the brush takes the tile in a cell, an empty cell gives the Erase brush
 function editorPick(layer, pos) { editorBrush = editorStampTile(editorGidAt(layer, pos) || 0); }
 
-// a palette slot into the brush: slot 0 is the Erase brush, slot n tile n - 1, keeping a one tile brush's turn; on
-// an object layer slot n is the nth object type
+// a palette slot into the brush: slot 0 is the Erase brush, slot n the palette's nth tile, keeping a one tile
+// brush's turn; on an object layer slot n is the nth object type
 function editorPalettePick(slot)
 {
     if (editorObjectLayer)
@@ -1376,7 +1387,8 @@ function editorPalettePick(slot)
         return;
     }
     const t = editorBrushTile();
-    editorBrush = editorStampTile(slot ? editorTileToGid(slot - 1, t?.direction, t?.mirror) : 0);
+    const tile = slot && (editorPaletteTiles(editorLayer)[slot - 1]?.tile ?? slot - 1); // every tile, in order
+    editorBrush = editorStampTile(slot ? editorTileToGid(tile, t?.direction, t?.mirror) : 0);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1795,11 +1807,18 @@ function editorPanelInit()
 // the palette's cell size in pixels and how many to a row
 const editorPaletteCell = 30, editorPaletteColumns = 8;
 
-// a layer's tiles in order, as the tile infos it draws them with, up to the image's edge and without the blank
-// ones at the end, a tile of one flat color; found once for each layer
+// the tiles a layer's palette shows, each its index and the tile info it draws with: the game's
+// levelEditor.paletteTiles, or every tile up to the image's edge without the blank ones at the end, a tile of one
+// flat color; found once for each layer and list
 function editorPaletteTiles(layer)
 {
-    const live = layer?.live, image = live?.tileInfo?.textureInfo?.image;
+    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)}))};
+        return layer.palette.tiles;
+    }
     if (!image) return [];
     if (layer.palette?.image === image) return layer.palette.tiles;
 
@@ -1808,7 +1827,7 @@ function editorPaletteTiles(layer)
     {
         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(t);
+        tiles.push({tile: i, tileInfo: t});
     }
     try
     {
@@ -1817,7 +1836,8 @@ function editorPaletteTiles(layer)
         context.drawImage(image, 0, 0);
         const blank = (t)=>
         {
-            const pixels = new Uint32Array(context.getImageData(t.pos.x, t.pos.y, t.size.x, t.size.y).data.buffer);
+            const {pos, size} = t.tileInfo, pixels = new Uint32Array(context.getImageData(pos.x, pos.y, size.x,
+                size.y).data.buffer);
             return pixels.every((p)=> p === pixels[0]);
         };
         while (tiles.length > 1 && blank(tiles.at(-1)))
@@ -1877,15 +1897,16 @@ 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((t, i)=>
+    tiles.forEach(({tileInfo: {pos, size}}, i)=>
     {
         const slot = i + 1, x = slot % columns * cell, y = (slot / columns | 0) * cell;
-        context.drawImage(image, t.pos.x, t.pos.y, t.size.x, t.size.y, x + 2, y + 2, cell - 4, cell - 4);
+        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 or Erase
+    // the brush's slot outlined, when it is one tile the palette shows or Erase
     const t = editorBrushTile(), erase = !t && editorBrush.width === 1 && editorBrush.height === 1 &&
-        editorBrush.grids[0][0] === 0, selected = erase ? 0 : t ? t.tile + 1 : -1;
+        editorBrush.grids[0][0] === 0, shown = t ? tiles.findIndex((p)=> p.tile === t.tile) : -1;
+    const selected = erase ? 0 : shown >= 0 ? shown + 1 : -1;
     if (selected < 0) return;
     context.strokeStyle = '#4af';
     context.strokeRect(selected % columns * cell + 1, (selected / columns | 0) * cell + 1, cell - 2, cell - 2);

package/src/engineExport.js

@@ -26,6 +26,7 @@ export
     engineObjectsCallback,
     engineObjectsRaycast,
     engineAddPlugin,
+    engineAddLoad,
 
     // Globals
     debug,
@@ -70,8 +71,10 @@ export
     canvasPixelRatio,
     fontDefault,
     showSplashScreen,
+    loadingScreen,
     headlessMode,
     engineManualStep,
+    engineVariableStep,
     tileDefaultSize,
     tileDefaultPadding,
     tileDefaultBleed,
@@ -129,8 +132,10 @@ export
     getCanvasPixelRatio,
     setFontDefault,
     setShowSplashScreen,
+    setLoadingScreen,
     setHeadlessMode,
     setEngineManualStep,
+    setEngineVariableStep,
     setGLEnable,
     setDrawScreenSpace,
     setTileDefaultSize,
@@ -268,6 +273,7 @@ export
     TextureInfo,
     loadTexture,
     SpriteAnimation,
+    SpriteAnimator,
     Shader,
     mainCanvas,
     mainContext,

package/src/engineInput.js

@@ -192,7 +192,7 @@ function keyIsDown(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 1);
+    return !!(inputData[device]?.[key] & 1) && !inputCaptureHides(device);
 }
 
 /** Returns true if device key was pressed this frame
@@ -205,7 +205,7 @@ function keyWasPressed(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 2);
+    return !!(inputData[device]?.[key] & 2) && !inputCaptureHides(device);
 }
 
 /** Returns true if device key was released this frame
@@ -218,7 +218,7 @@ function keyWasReleased(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 4);
+    return !!(inputData[device]?.[key] & 4) && !inputCaptureHides(device);
 }
 
 /** Returns input vector from arrow keys or WASD if enabled
@@ -421,7 +421,10 @@ function pointerLockRequest()
 /** Request to unlock the pointer
  *  @memberof Input */
 function pointerLockExit()
-{ document.exitPointerLock?.(); }
+{
+    inputLockExit(); // debug builds: the free camera and the 3D editor tell this from Escape
+    document.exitPointerLock?.();
+}
 
 /** Check if pointer is locked (true if locked)
  *  @return {boolean}
@@ -738,6 +741,7 @@ function inputInit()
 
 function inputUpdate()
 {
+    inputCaptureMouse(); // debug builds: the free camera or the 3D editor may have the mouse
     if (headlessMode) return;
 
     // clear input when lost focus (prevent stuck keys)

package/src/engineLogo.js

@@ -7,6 +7,25 @@
 'use strict';
 
 ///////////////////////////////////////////////////////////////////////////////
+// the default loading screen: Loading over a bar across the middle, filled by the part of the loads done
+function drawLoadingScreen(progress)
+{
+    const x = mainContext, w = mainCanvasSize.x, h = mainCanvasSize.y;
+    const barWidth = min(w * .6, 400), barHeight = 12, left = (w - barWidth) / 2, top = h / 2;
+    x.save();
+    x.fillStyle = '#000';
+    x.fillRect(0, 0, w, h);
+    x.fillStyle = x.strokeStyle = '#fff';
+    x.font = '28px ' + fontDefault;
+    x.textAlign = 'center';
+    x.textBaseline = 'bottom';
+    x.fillText('Loading', w / 2, top - 16);
+    x.lineWidth = 2;
+    x.strokeRect(left, top, barWidth, barHeight);
+    x.fillRect(left, top, barWidth * clamp(progress), barHeight);
+    x.restore();
+}
+
 function drawEngineLogo(t)
 {
     const blackAndWhite = 0;

package/src/engineObject.js

@@ -188,9 +188,10 @@ class EngineObject
         // bail if a collision callback destroyed us mid-frame
         if (this.destroyed) return;
 
-        if (this.clampSpeed)
+        // limit max speed to prevent missing collisions, only for what collides: with solids, or with tiles while it
+        // has a mass, which tile collision needs; anything else moves as fast as it is told
+        if (this.clampSpeed && enablePhysicsSolver && (this.collideSolidObjects || this.collideLevel && this.mass))
         {
-            // limit max speed to prevent missing collisions
             this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
             this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
         }

package/src/engineRelease.js

@@ -52,16 +52,28 @@ function tweak(){}
 function tweakButton(){}
 function tweakDivider(){}
 function tweakEngineDefaults(){}
-const levelEditor = {isOpen: false, open(){}, close(){}, onTile: undefined, onRestart: undefined, onPlayFrom: undefined};
+const levelEditor = {isOpen: false, open(){}, close(){}, onTile: undefined, onRestart: undefined, onPlayFrom: undefined,
+    paletteTiles: undefined, use3D: undefined};
 function editorMapRestore(map){ return map; }
 function editorMapLoaded(){}
 function editorJSONFetched(){}
 function editorPreRender(){}
 function editorObjectMade(){}
 
+// the input capture of the free camera and the 3D editor
+function inputCaptureHides(){ return false; }
+function inputCaptureMouse(){}
+function inputLockExit(){}
+
 // the 3D debug draws are debug only too
 function debugBox3D(){}
 function debugSphere3D(){}
 function debugLine3D(){}
 function debugPoint3D(){}
 function render3DRenderDebug(){}
+
+// the free camera and the 3D level editor are debug only
+function editor3DCameraBegin(){}
+function editor3DCameraEnd(){}
+function editor3DLevelLoaded(){}
+function editor3DObjectMade(){}

package/src/engineSettings.js

@@ -122,6 +122,13 @@ let fontDefault = 'arial';
  *  @memberof Settings */
 let showSplashScreen = false;
 
+/** The loading screen, drawn after the splash while the images, gameInit and what they load are loading, once that
+ *  takes more than half a second: a function given the part done, 0 to 1, or undefined for none, which leaves the
+ *  screen blank; the default says Loading over a bar
+ *  @type {LoadingScreenCallback|undefined}
+ *  @memberof Settings */
+let loadingScreen = drawLoadingScreen;
+
 /** Disables all rendering, audio, and input for servers, must be set before engineInit
  *  @type {boolean}
  *  @default
@@ -135,6 +142,15 @@ let headlessMode = false;
  *  @memberof Settings */
 let engineManualStep = false;
 
+/** Run one update per display frame with timeDelta the time it covers, in place of fixed updates at frameRate
+ *  - Per-frame values are not scaled: velocity, gravity, damping and particle speeds act once per update, so a
+ *    game that turns this on scales its own movement by timeDelta
+ *  - Values in seconds follow real time as they are: time, timers, particle emit rate and life, animation, Box2D
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let engineVariableStep = false;
+
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
 
@@ -530,6 +546,11 @@ function setFontDefault(font) { fontDefault = font; }
  *  @memberof Settings */
 function setShowSplashScreen(show) { showSplashScreen = show; }
 
+/** Set the loading screen, drawn after the splash while the game loads, once that takes more than half a second
+ *  @param {LoadingScreenCallback} [callback] - Draws on mainContext given the part done, 0 to 1; undefined for none
+ *  @memberof Settings */
+function setLoadingScreen(callback) { loadingScreen = callback; }
+
 /** Set to disable rendering, audio, and input for servers, must be set before engineInit
  *  @param {boolean} headless
  *  @memberof Settings */
@@ -555,6 +576,23 @@ function setEngineManualStep(enable=true)
     }
 }
 
+/** Set if the engine runs one update per display frame with timeDelta the time it covers
+ *  Can be set before engineInit or while running; turned off it goes back to fixed updates at frameRate
+ *  @param {boolean} [enable]
+ *  @memberof Settings */
+function setEngineVariableStep(enable=true)
+{
+    if (engineVariableStep && !enable)
+    {
+        // fixed time goes on one fixed step after the last update, if one ran, and timeDelta is the fixed step again
+        timeFixedStart = frame ? time + 1 / frameRate : time;
+        frameFixedStart = frame;
+        timeDelta = 1 / frameRate;
+        frameTimeBufferMS = engineManualStep ? -.5e3 / frameRate : 0;
+    }
+    engineVariableStep = enable;
+}
+
 /** Set whether the draw and debug functions draw in screen space when a call leaves screenSpace out
  *  @param {boolean} screenSpace
  *  @memberof Settings */