littlejsengine 1.18.23 → 1.18.25

package/dist/littlejs.release.js

@@ -35,7 +35,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.18.23';
+const engineVersion = '1.18.25';
 
 /** Frames per second to update
  *  @type {number}
@@ -92,6 +92,7 @@ function setPaused(isPaused=true) { paused = isPaused; }
 
 // Engine internal variables
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
+let engineUpdateInternal; // assigned by engineInit so engineStep can drive it
 let showEngineVersion = true;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -280,7 +281,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
 
         if (!debugVideoCaptureIsActive())
             renderFrame();
-        requestAnimationFrame(engineUpdate);
+        if (!engineManualStep)
+            requestAnimationFrame(engineUpdate);
 
         function renderFrame()
         {
@@ -308,6 +310,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             primitiveCount = 0;
         }
     }
+    engineUpdateInternal = engineUpdate;
 
     function updateCanvas()
     {
@@ -462,10 +465,39 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     {
         // wait for gameInit to load
         await gameInit();
-        engineUpdate();
+        engineManualStep || engineUpdate();
     }
 }
 
+// max frames engineStep can advance in one call, 10 minutes at 60fps
+// large counts block until they finish, so this catches runaway values
+const engineStepMaxFrames = 36000;
+
+/** Advance the engine by a number of frames
+ *  Requires setEngineManualStep(true) before engineInit
+ *  Respects paused exactly as the normal update loop does
+ *  @param {number} [frames] - number of engine update ticks, max 36000, each running one fixed update at timeScale 1
+ *  @example
+ *  setHeadlessMode(true);
+ *  setEngineManualStep(true);
+ *  await engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+ *  engineStep(600); // advance 10 seconds of game time
+ *  @memberof Engine */
+function engineStep(frames=1)
+{
+    ASSERT(engineManualStep,
+        'engineStep requires setEngineManualStep(true) before engineInit');
+    ASSERT(engineUpdateInternal, 'engineStep requires engineInit to complete');
+    // runtime guard so release builds (where the asserts are stripped) can't
+    // start a second requestAnimationFrame chain or call an undefined update
+    if (!engineManualStep || !engineUpdateInternal) return;
+    ASSERT(Number.isInteger(frames) && frames >= 0 && frames <= engineStepMaxFrames,
+        'engineStep requires a whole frame count from 0 to ' + engineStepMaxFrames);
+    frames = min(frames, engineStepMaxFrames); // release has no asserts, don't freeze
+    for (let i = frames; i > 0; --i)
+        engineUpdateInternal(frameTimeLastMS + 1e3 / frameRate);
+}
+
 /** Update each engine object, remove destroyed objects, and update time
  * can be called manually if objects need to be updated outside of main loop
  *  @memberof Engine */
@@ -1997,12 +2029,17 @@ function shareURL(title, url, callback)
 
 /** Read save data from local storage
  *  @param {string} saveName - unique name for the game/save
- *  @param {Object} [defaultSaveData] - default values for save
+ *  @param {Object} [defaultSaveData] - default values, result is {...default, ...loaded} so this must be an object
  *  @return {Object}
  *  @memberof Utilities */
 function readSaveData(saveName, defaultSaveData)
 {
-    ASSERT(isStringLike(saveName), 'loadData requires saveName string');
+    ASSERT(isStringLike(saveName), 'readSaveData requires saveName string');
+    ASSERT(defaultSaveData === undefined ||
+        (typeof defaultSaveData === 'object' && defaultSaveData !== null),
+        'readSaveData: default must be an object - the result is ' +
+        '{...default, ...loaded}, so a scalar default yields {}. ' +
+        'Use readSaveData(key, {best:0}).best');
 
     // tolerate localStorage being unavailable (iOS private mode, sandboxed
     // iframes) and corrupt JSON in stored data
@@ -2026,7 +2063,7 @@ function readSaveData(saveName, defaultSaveData)
  *  @memberof Utilities */
 function writeSaveData(saveName, saveData)
 {
-    ASSERT(isStringLike(saveName), 'saveData requires saveName string');
+    ASSERT(isStringLike(saveName), 'writeSaveData requires saveName string');
     // tolerate localStorage being unavailable or quota exceeded
     try { localStorage[saveName] = JSON.stringify(saveData); }
     catch { LOG('writeSaveData: failed to write', saveName); }
@@ -2194,6 +2231,13 @@ let showSplashScreen = false;
  *  @memberof Settings */
 let headlessMode = false;
 
+/** Disables the automatic requestAnimationFrame loop so the engine only
+ *  advances when engineStep is called, for tests and frame-stepping tools
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let engineManualStep = false;
+
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
 
@@ -2544,6 +2588,12 @@ function setShowSplashScreen(show) { showSplashScreen = show; }
  *  @memberof Settings */
 function setHeadlessMode(headless) { headlessMode = headless; }
 
+/** Set if the engine only advances when engineStep is called
+ *  Must be set before engineInit
+ *  @param {boolean} [enable]
+ *  @memberof Settings */
+function setEngineManualStep(enable=true) { engineManualStep = enable; }
+
 /** Set if WebGL rendering is enabled
  *  @param {boolean} enable
  *  @memberof Settings */
@@ -14307,17 +14357,21 @@ class TextureSheet
      *  @param {Vector2} imageSize - Size of the source image in pixels
      *  @param {Vector2} [frameSize] - Size of each frame, or the whole image if not passed
      *  @param {number} [padding] - How many pixels padding around each frame
-     *  @param {number} [sourcePadding] - How many pixels padding around each frame in the source image
+     *  @param {number|Vector2} [sourcePadding] - How many pixels padding around each frame in the source image
      *  @return {TileInfo} Tile for the packed image, or undefined if the sheet is full */
     tryAdd(imageSize, frameSize=imageSize, padding=textureSheetPadding, sourcePadding=0)
     {
         ASSERT(isVector2(imageSize) && isVector2(frameSize), 'sizes must be vec2');
         ASSERT(frameSize.x > 0 && frameSize.y > 0, 'frame size must be positive');
-        ASSERT(isNumber(sourcePadding) && sourcePadding >= 0, 'sourcePadding must be a number >= 0');
+
+        if (isNumber(sourcePadding))
+            sourcePadding = vec2(sourcePadding);
+        ASSERT(isVector2(sourcePadding) && sourcePadding.x >= 0 && sourcePadding.y >= 0,
+            'sourcePadding must be a number or vec2 >= 0');
 
         // the source may have its own padding baked in around each frame
-        const sourceCellWidth = frameSize.x + sourcePadding*2;
-        const sourceCellHeight = frameSize.y + sourcePadding*2;
+        const sourceCellWidth = frameSize.x + sourcePadding.x*2;
+        const sourceCellHeight = frameSize.y + sourcePadding.y*2;
         ASSERT(imageSize.x % sourceCellWidth === 0 && imageSize.y % sourceCellHeight === 0,
             'image size must be a multiple of the padded frame size');
 
@@ -14359,16 +14413,19 @@ class TextureSheet
      *  @param {HTMLImageElement} image - Source image to copy from
      *  @param {TileInfo} tileInfo - Where to put it, from tryAdd
      *  @param {boolean} [update] - Upload to webgl now, pass false when batching
-     *  @param {number} [sourcePadding] - How many pixels padding around each frame in the source image */
+     *  @param {number|Vector2} [sourcePadding] - How many pixels padding around each frame in the source image */
     drawImage(image, tileInfo, update=true, sourcePadding=0)
     {
         ASSERT(!!this.context, 'texture sheet has no canvas');
 
+        if (isNumber(sourcePadding))
+            sourcePadding = vec2(sourcePadding);
+
         // copy frames in order, reading the source left to right, top to bottom
         // the destination wraps at tileInfo.columns which may be narrower than the source
         const frameSize = tileInfo.size;
-        const sourceCellWidth = frameSize.x + sourcePadding*2;
-        const sourceCellHeight = frameSize.y + sourcePadding*2;
+        const sourceCellWidth = frameSize.x + sourcePadding.x*2;
+        const sourceCellHeight = frameSize.y + sourcePadding.y*2;
         const sourceColumns = image.width / sourceCellWidth;
         const frameCount = sourceColumns * (image.height / sourceCellHeight);
         const columns = tileInfo.columns || frameCount;
@@ -14376,8 +14433,8 @@ class TextureSheet
         const cellHeight = frameSize.y + tileInfo.padding*2;
         for (let i = frameCount; i--;)
         {
-            const sourceX = (i % sourceColumns) * sourceCellWidth + sourcePadding;
-            const sourceY = (i / sourceColumns | 0) * sourceCellHeight + sourcePadding;
+            const sourceX = (i % sourceColumns) * sourceCellWidth + sourcePadding.x;
+            const sourceY = (i / sourceColumns | 0) * sourceCellHeight + sourcePadding.y;
             this.context.drawImage(image,
                 sourceX, sourceY, frameSize.x, frameSize.y,
                 tileInfo.pos.x + (i % columns) * cellWidth,
@@ -14411,7 +14468,7 @@ class TextureSheet
  *  @param {string} src - Image source path
  *  @param {Vector2|number} [frameSize] - Size of each animation frame in pixels
  *  @param {number} [padding] - How many pixels padding around each frame
- *  @param {number} [sourcePadding] - How many pixels padding around each frame in the source image
+ *  @param {number|Vector2} [sourcePadding] - How many pixels padding around each frame in the source image
  *  @return {TileInfo}
  *  @example
  *  const playerTile = loadSprite('player.png');     // a single sprite
@@ -14422,6 +14479,7 @@ function loadSprite(src, frameSize, padding=textureSheetPadding, sourcePadding=0
     ASSERT(isStringLike(src), 'image src must be a string');
     ASSERT(!frameSize || isVector2(frameSize) || isNumber(frameSize), 'frameSize must be a vec2 or number');
     ASSERT(isNumber(padding), 'padding must be a number');
+    ASSERT(isNumber(sourcePadding) || isVector2(sourcePadding), 'sourcePadding must be a number or vec2');
 
     if (isNumber(frameSize))
         frameSize = vec2(frameSize);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.18.23",
+  "version": "1.18.25",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",
@@ -38,6 +38,7 @@
   ],
   "scripts": {
     "build": "node src/engineBuild.mjs",
+    "build-docs": "node tools/buildDocs.mjs",
     "test": "node --test --import ./test/setup.mjs \"test/**/*.test.mjs\""
   },
   "engines": {
@@ -45,9 +46,11 @@
   },
   "devDependencies": {
     "bestzip": "^2.2.1",
+    "clean-jsdoc-theme": "~4.2.9",
     "electron": "^38.2.0",
     "electron-packager": "^17.1.2",
     "google-closure-compiler": "~20230502.0.0",
+    "jsdoc": "~4.0.2",
     "roadroller": "~2.1.0",
     "typescript": "~5.1.6",
     "uglify-js": "~3.17.4"

package/plugins/textureSheet.js

@@ -73,17 +73,21 @@ class TextureSheet
      *  @param {Vector2} imageSize - Size of the source image in pixels
      *  @param {Vector2} [frameSize] - Size of each frame, or the whole image if not passed
      *  @param {number} [padding] - How many pixels padding around each frame
-     *  @param {number} [sourcePadding] - How many pixels padding around each frame in the source image
+     *  @param {number|Vector2} [sourcePadding] - How many pixels padding around each frame in the source image
      *  @return {TileInfo} Tile for the packed image, or undefined if the sheet is full */
     tryAdd(imageSize, frameSize=imageSize, padding=textureSheetPadding, sourcePadding=0)
     {
         ASSERT(isVector2(imageSize) && isVector2(frameSize), 'sizes must be vec2');
         ASSERT(frameSize.x > 0 && frameSize.y > 0, 'frame size must be positive');
-        ASSERT(isNumber(sourcePadding) && sourcePadding >= 0, 'sourcePadding must be a number >= 0');
+
+        if (isNumber(sourcePadding))
+            sourcePadding = vec2(sourcePadding);
+        ASSERT(isVector2(sourcePadding) && sourcePadding.x >= 0 && sourcePadding.y >= 0,
+            'sourcePadding must be a number or vec2 >= 0');
 
         // the source may have its own padding baked in around each frame
-        const sourceCellWidth = frameSize.x + sourcePadding*2;
-        const sourceCellHeight = frameSize.y + sourcePadding*2;
+        const sourceCellWidth = frameSize.x + sourcePadding.x*2;
+        const sourceCellHeight = frameSize.y + sourcePadding.y*2;
         ASSERT(imageSize.x % sourceCellWidth === 0 && imageSize.y % sourceCellHeight === 0,
             'image size must be a multiple of the padded frame size');
 
@@ -125,16 +129,19 @@ class TextureSheet
      *  @param {HTMLImageElement} image - Source image to copy from
      *  @param {TileInfo} tileInfo - Where to put it, from tryAdd
      *  @param {boolean} [update] - Upload to webgl now, pass false when batching
-     *  @param {number} [sourcePadding] - How many pixels padding around each frame in the source image */
+     *  @param {number|Vector2} [sourcePadding] - How many pixels padding around each frame in the source image */
     drawImage(image, tileInfo, update=true, sourcePadding=0)
     {
         ASSERT(!!this.context, 'texture sheet has no canvas');
 
+        if (isNumber(sourcePadding))
+            sourcePadding = vec2(sourcePadding);
+
         // copy frames in order, reading the source left to right, top to bottom
         // the destination wraps at tileInfo.columns which may be narrower than the source
         const frameSize = tileInfo.size;
-        const sourceCellWidth = frameSize.x + sourcePadding*2;
-        const sourceCellHeight = frameSize.y + sourcePadding*2;
+        const sourceCellWidth = frameSize.x + sourcePadding.x*2;
+        const sourceCellHeight = frameSize.y + sourcePadding.y*2;
         const sourceColumns = image.width / sourceCellWidth;
         const frameCount = sourceColumns * (image.height / sourceCellHeight);
         const columns = tileInfo.columns || frameCount;
@@ -142,8 +149,8 @@ class TextureSheet
         const cellHeight = frameSize.y + tileInfo.padding*2;
         for (let i = frameCount; i--;)
         {
-            const sourceX = (i % sourceColumns) * sourceCellWidth + sourcePadding;
-            const sourceY = (i / sourceColumns | 0) * sourceCellHeight + sourcePadding;
+            const sourceX = (i % sourceColumns) * sourceCellWidth + sourcePadding.x;
+            const sourceY = (i / sourceColumns | 0) * sourceCellHeight + sourcePadding.y;
             this.context.drawImage(image,
                 sourceX, sourceY, frameSize.x, frameSize.y,
                 tileInfo.pos.x + (i % columns) * cellWidth,
@@ -177,7 +184,7 @@ class TextureSheet
  *  @param {string} src - Image source path
  *  @param {Vector2|number} [frameSize] - Size of each animation frame in pixels
  *  @param {number} [padding] - How many pixels padding around each frame
- *  @param {number} [sourcePadding] - How many pixels padding around each frame in the source image
+ *  @param {number|Vector2} [sourcePadding] - How many pixels padding around each frame in the source image
  *  @return {TileInfo}
  *  @example
  *  const playerTile = loadSprite('player.png');     // a single sprite
@@ -188,6 +195,7 @@ function loadSprite(src, frameSize, padding=textureSheetPadding, sourcePadding=0
     ASSERT(isStringLike(src), 'image src must be a string');
     ASSERT(!frameSize || isVector2(frameSize) || isNumber(frameSize), 'frameSize must be a vec2 or number');
     ASSERT(isNumber(padding), 'padding must be a number');
+    ASSERT(isNumber(sourcePadding) || isVector2(sourcePadding), 'sourcePadding must be a number or vec2');
 
     if (isNumber(frameSize))
         frameSize = vec2(frameSize);

package/src/engine.js

@@ -32,7 +32,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.18.23';
+const engineVersion = '1.18.25';
 
 /** Frames per second to update
  *  @type {number}
@@ -89,6 +89,7 @@ function setPaused(isPaused=true) { paused = isPaused; }
 
 // Engine internal variables
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
+let engineUpdateInternal; // assigned by engineInit so engineStep can drive it
 let showEngineVersion = true;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -277,7 +278,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
 
         if (!debugVideoCaptureIsActive())
             renderFrame();
-        requestAnimationFrame(engineUpdate);
+        if (!engineManualStep)
+            requestAnimationFrame(engineUpdate);
 
         function renderFrame()
         {
@@ -305,6 +307,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             primitiveCount = 0;
         }
     }
+    engineUpdateInternal = engineUpdate;
 
     function updateCanvas()
     {
@@ -459,10 +462,39 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     {
         // wait for gameInit to load
         await gameInit();
-        engineUpdate();
+        engineManualStep || engineUpdate();
     }
 }
 
+// max frames engineStep can advance in one call, 10 minutes at 60fps
+// large counts block until they finish, so this catches runaway values
+const engineStepMaxFrames = 36000;
+
+/** Advance the engine by a number of frames
+ *  Requires setEngineManualStep(true) before engineInit
+ *  Respects paused exactly as the normal update loop does
+ *  @param {number} [frames] - number of engine update ticks, max 36000, each running one fixed update at timeScale 1
+ *  @example
+ *  setHeadlessMode(true);
+ *  setEngineManualStep(true);
+ *  await engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+ *  engineStep(600); // advance 10 seconds of game time
+ *  @memberof Engine */
+function engineStep(frames=1)
+{
+    ASSERT(engineManualStep,
+        'engineStep requires setEngineManualStep(true) before engineInit');
+    ASSERT(engineUpdateInternal, 'engineStep requires engineInit to complete');
+    // runtime guard so release builds (where the asserts are stripped) can't
+    // start a second requestAnimationFrame chain or call an undefined update
+    if (!engineManualStep || !engineUpdateInternal) return;
+    ASSERT(Number.isInteger(frames) && frames >= 0 && frames <= engineStepMaxFrames,
+        'engineStep requires a whole frame count from 0 to ' + engineStepMaxFrames);
+    frames = min(frames, engineStepMaxFrames); // release has no asserts, don't freeze
+    for (let i = frames; i > 0; --i)
+        engineUpdateInternal(frameTimeLastMS + 1e3 / frameRate);
+}
+
 /** Update each engine object, remove destroyed objects, and update time
  * can be called manually if objects need to be updated outside of main loop
  *  @memberof Engine */

package/src/engineExport.js

@@ -19,6 +19,7 @@ export
     getPaused,
     setPaused,
     engineInit,
+    engineStep,
     engineObjectsUpdate,
     engineObjectsDestroy,
     engineObjectsCollect,
@@ -66,6 +67,7 @@ export
     fontDefault,
     showSplashScreen,
     headlessMode,
+    engineManualStep,
     tileDefaultSize,
     tileDefaultPadding,
     tileDefaultBleed,
@@ -120,6 +122,7 @@ export
     setFontDefault,
     setShowSplashScreen,
     setHeadlessMode,
+    setEngineManualStep,
     setGLEnable,
     setTileDefaultSize,
     setTileDefaultPadding,

package/src/engineSettings.js

@@ -121,6 +121,13 @@ let showSplashScreen = false;
  *  @memberof Settings */
 let headlessMode = false;
 
+/** Disables the automatic requestAnimationFrame loop so the engine only
+ *  advances when engineStep is called, for tests and frame-stepping tools
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let engineManualStep = false;
+
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
 
@@ -471,6 +478,12 @@ function setShowSplashScreen(show) { showSplashScreen = show; }
  *  @memberof Settings */
 function setHeadlessMode(headless) { headlessMode = headless; }
 
+/** Set if the engine only advances when engineStep is called
+ *  Must be set before engineInit
+ *  @param {boolean} [enable]
+ *  @memberof Settings */
+function setEngineManualStep(enable=true) { engineManualStep = enable; }
+
 /** Set if WebGL rendering is enabled
  *  @param {boolean} enable
  *  @memberof Settings */

package/src/engineUtilities.js

@@ -190,12 +190,17 @@ function shareURL(title, url, callback)
 
 /** Read save data from local storage
  *  @param {string} saveName - unique name for the game/save
- *  @param {Object} [defaultSaveData] - default values for save
+ *  @param {Object} [defaultSaveData] - default values, result is {...default, ...loaded} so this must be an object
  *  @return {Object}
  *  @memberof Utilities */
 function readSaveData(saveName, defaultSaveData)
 {
-    ASSERT(isStringLike(saveName), 'loadData requires saveName string');
+    ASSERT(isStringLike(saveName), 'readSaveData requires saveName string');
+    ASSERT(defaultSaveData === undefined ||
+        (typeof defaultSaveData === 'object' && defaultSaveData !== null),
+        'readSaveData: default must be an object - the result is ' +
+        '{...default, ...loaded}, so a scalar default yields {}. ' +
+        'Use readSaveData(key, {best:0}).best');
 
     // tolerate localStorage being unavailable (iOS private mode, sandboxed
     // iframes) and corrupt JSON in stored data
@@ -219,7 +224,7 @@ function readSaveData(saveName, defaultSaveData)
  *  @memberof Utilities */
 function writeSaveData(saveName, saveData)
 {
-    ASSERT(isStringLike(saveName), 'saveData requires saveName string');
+    ASSERT(isStringLike(saveName), 'writeSaveData requires saveName string');
     // tolerate localStorage being unavailable or quota exceeded
     try { localStorage[saveName] = JSON.stringify(saveData); }
     catch { LOG('writeSaveData: failed to write', saveName); }