littlejsengine 1.12.4 → 1.13.1

package/src/engineAudio.js

@@ -47,17 +47,17 @@ class Sound
 {
     /** Create a sound object and cache the zzfx samples for later use
      *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
-     *  @param {number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
+     *  @param {number} [range=soundDefaultRange] - World space max range of sound
      *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
      */
     constructor(zzfxSound, range=soundDefaultRange, taper=soundDefaultTaper)
     {
         if (!soundEnable || headlessMode) return;
 
-        /** @property {number} - World space max range of sound, will not play if camera is farther away */
+        /** @property {number} - World space max range of sound */
         this.range = range;
 
-        /** @property {number} - At what percentage of range should it start tapering off */
+        /** @property {number} - At what percentage of range should it start tapering */
         this.taper = taper;
 
         /** @property {number} - How much to randomize frequency each time sound plays */
@@ -122,11 +122,20 @@ class Sound
             this.gainNode.gain.value = volume;
     }
 
-    /** Stop the last instance of this sound that was played */
-    stop()
+    /** Stop the last instance of this sound that was played
+     *  @param {number}  [fadeTime] - How long to fade out (seconds)
+     */
+    stop(fadeTime=0)
     {
-        if (this.source)
-            this.source.stop();
+        if (!this.source)
+            return;
+        
+        // ramp off gain
+        const startFade = audioContext.currentTime;
+        const endFade = startFade + fadeTime;
+        this.gainNode.gain.linearRampToValueAtTime(1, startFade);
+        this.gainNode.gain.linearRampToValueAtTime(0, endFade);
+        this.source.stop(endFade);
         this.source = undefined;
     }
     
@@ -173,8 +182,8 @@ class SoundWave extends Sound
     /** Create a sound object and cache the wave file for later use
      *  @param {string} filename - Filename of audio file to load
      *  @param {number} [randomness] - How much to randomize frequency each time sound plays
-     *  @param {number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
-     *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
+     *  @param {number} [range=soundDefaultRange] - World space max range of sound
+     *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
      *  @param {Function} [onloadCallback] - callback function to call when sound is loaded
      */
     constructor(filename, randomness=0, range, taper, onloadCallback)
@@ -182,17 +191,26 @@ class SoundWave extends Sound
         super(undefined, range, taper);
         if (!soundEnable || headlessMode) return;
 
+        /** @property {Function} - callback function to call when sound is loaded */
+        this.onloadCallback = onloadCallback;
         this.randomness = randomness;
-        fetch(filename)
-        .then(response => response.arrayBuffer())
-        .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
-        .then(audioBuffer => 
-        {
-            this.sampleChannels = [];
-            for (let i = audioBuffer.numberOfChannels; i--;)
-                this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
-            this.sampleRate = audioBuffer.sampleRate;
-        }).then(() => onloadCallback && onloadCallback(this));
+        this.loadSound(filename);
+    }
+
+    /** Loads a sound from a URL and decodes it into sample data. Must be used with await!
+    *  @param {string} filename
+    *  @return {Promise<void>} */
+    async loadSound(filename)
+    {
+        const response = await fetch(filename);
+        const arrayBuffer = await response.arrayBuffer();
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        this.sampleChannels = [];
+        for (let i = audioBuffer.numberOfChannels; i--;)
+            this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
+        this.sampleRate = audioBuffer.sampleRate;
+        if (this.onloadCallback)
+            this.onloadCallback();
     }
 }
 
@@ -460,4 +478,4 @@ function zzfxG
     }
 
     return b; // return sample buffer
-}
+}

package/src/engineBuild.bat

@@ -1,2 +1,7 @@
 rem LittleJS Build Script
-call npm run build
+call npm run build
+if %errorlevel% neq 0 (
+    echo Build failed with error level %errorlevel%
+    pause
+    exit /b %errorlevel%
+)

package/src/engineBuild.js

@@ -26,7 +26,6 @@ const engineSourceFiles =
     `${SOURCE_FOLDER}/engineParticles.js`,
     `${SOURCE_FOLDER}/engineMedals.js`,
     `${SOURCE_FOLDER}/engineWebGL.js`,
-    `${SOURCE_FOLDER}/engine.js`,
 ];
 const enginePluginFiles =
 [
@@ -35,6 +34,12 @@ const enginePluginFiles =
     `${PLUGIN_FOLDER}/zzfxm.js`,
     `${PLUGIN_FOLDER}/uiSystem.js`,
     `${PLUGIN_FOLDER}/box2d.js`,
+    `${PLUGIN_FOLDER}/drawUtilities.js`,
+];
+const engineExtraFiles =
+[
+    `${PLUGIN_FOLDER}/box2d.wasm.js`,
+    `${PLUGIN_FOLDER}/box2d.wasm.wasm`,
 ];
 const asciiArt =`
       ~~~~°°°°ooo°oOo°ooOooOooOo.
@@ -44,7 +49,7 @@ const asciiArt =`
   OOO  OOO     OO  OO     OO=OO-oo\\
 `;
 const license = '// LittleJS Engine - MIT License - Copyright 2021 Frank Force\n'+
-                '// https://github.com/KilledByAPixel/LittleJS\n';
+                '// https://github.com/KilledByAPixel/LittleJS\n\n';
 
 console.log(asciiArt);
 console.log('Choo Choo... Building LittleJS Engine!\n');
@@ -57,6 +62,11 @@ try
     // Setup build folder
     fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
     fs.mkdirSync(BUILD_FOLDER);
+
+    // copy extra files to build folder
+    for (const file of engineExtraFiles)
+        fs.copyFileSync(file, `${BUILD_FOLDER}/${file.substring(file.lastIndexOf('/')+1)}`);
+
 }
 catch (e) { handleError(e, 'Failed to create build folder!'); }
 
@@ -65,6 +75,7 @@ Build
     'Build Engine -- all',
     `${BUILD_FOLDER}/${ENGINE_NAME}.js`,
     [
+        `${SOURCE_FOLDER}/engine.js`,
         `${SOURCE_FOLDER}/engineDebug.js`, 
         ...engineSourceFiles, 
         ...enginePluginFiles
@@ -77,6 +88,7 @@ Build
     'Build Engine -- release',
     `${BUILD_FOLDER}/${ENGINE_NAME}.release.js`,
     [
+        `${SOURCE_FOLDER}/engine.js`,
         `${SOURCE_FOLDER}/engineRelease.js`, 
         ...engineSourceFiles, 
         ...enginePluginFiles
@@ -89,7 +101,7 @@ Build
     'Build Engine -- minified',
     `${BUILD_FOLDER}/${ENGINE_NAME}.min.js`,
     [`${BUILD_FOLDER}/${ENGINE_NAME}.release.js`],
-    [closureCompilerStep, uglifyBuildStep]
+    [closureCompilerStep, uglifyBuildStep, addLicenseStep]
 );
 
 Build
@@ -113,7 +125,7 @@ Build
         `${SOURCE_FOLDER}/engineExport.js`, 
         `${PLUGIN_FOLDER}/pluginExport.js`
     ],
-    [uglifyBuildStep]
+    [uglifyBuildStep, addLicenseStep]
 );
 
 console.log(`Engine built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
@@ -131,7 +143,7 @@ function Build(message, outputFile, files=[], buildSteps=[], isPrimaryBuild)
     if (isPrimaryBuild)
     {
         // add license and strict mode to top
-        buffer += license + '\n';
+        buffer += license;
         buffer += "'use strict';\n\n";
     }
 
@@ -140,9 +152,9 @@ function Build(message, outputFile, files=[], buildSteps=[], isPrimaryBuild)
         // get file content
         let fileContent = fs.readFileSync(file) + '\n';
 
-        // remove first 'use strict' from each file
+        // remove first 'use strict' and surrounding new lines
         if (isPrimaryBuild)
-            fileContent = fileContent.replace("'use strict';", '');
+            fileContent = fileContent.replace(/'use strict';\s*\n/g, '');
 
         // add it to the buffer
         buffer += fileContent;
@@ -179,6 +191,19 @@ function uglifyBuildStep(filename)
     catch (e) { handleError(e,'Failed to run Uglify minification step!'); }
 };
 
+// Add license to top of file
+function addLicenseStep(filename)
+{
+    try
+    {
+        // add license to top of minified file
+        let fileContent = fs.readFileSync(filename, 'utf8');
+        fileContent = license + fileContent;
+        fs.writeFileSync(filename, fileContent);
+    }
+    catch (e) { handleError(e, 'Failed to add license to minified file!'); }
+};
+
 // Build TypeScript definitions
 function typeScriptBuildStep(filename)
 {

package/src/engineDebug.js

@@ -47,19 +47,19 @@ let debugKey = 'Escape';
 let debugOverlay = false;
 
 // Engine internal variables not exposed to documentation
-let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParticles = false, debugGamepads = false, debugMedals = false, debugTakeScreenshot, downloadLink;
+let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParticles = false, debugGamepads = false, debugMedals = false, debugTakeScreenshot, downloadLink, debugCanvas;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Debug helper functions
 
 /** Asserts if the expression is false, does not do anything in release builds
- *  @param {boolean} assert
- *  @param {Object} [output]
+ *  @param {boolean} assert 
+ *  @param {...Object} [output] - error message output
  *  @memberof Debug */
-function ASSERT(assert, output) 
+function ASSERT(assert, ...output) 
 {
     if (enableAsserts)
-        output ? console.assert(assert, output) : console.assert(assert);
+        console.assert(assert, ...output);
 }
 
 /** Draw a debug rectangle in world space
@@ -132,16 +132,22 @@ function debugLine(posA, posB, color, thickness=.1, time)
 }
 
 /** Draw a debug combined axis aligned bounding box in world space
- *  @param {Vector2} pA - position A
- *  @param {Vector2} sA - size A
- *  @param {Vector2} pB - position B
- *  @param {Vector2} sB - size B
+ *  @param {Vector2} posA
+ *  @param {Vector2} sizeA
+ *  @param {Vector2} posB
+ *  @param {Vector2} sizeB
  *  @param {string}  [color]
  *  @memberof Debug */
-function debugOverlap(pA, sA, pB, sB, color)
+function debugOverlap(posA, sizeA, posB, sizeB, color)
 {
-    const minPos = vec2(min(pA.x - sA.x/2, pB.x - sB.x/2), min(pA.y - sA.y/2, pB.y - sB.y/2));
-    const maxPos = vec2(max(pA.x + sA.x/2, pB.x + sB.x/2), max(pA.y + sA.y/2, pB.y + sB.y/2));
+    const minPos = vec2(
+        min(posA.x - sizeA.x/2, posB.x - sizeB.x/2), 
+        min(posA.y - sizeA.y/2, posB.y - sizeB.y/2)
+    );
+    const maxPos = vec2(
+        max(posA.x + sizeA.x/2, posB.x + sizeB.x/2), 
+        max(posA.y + sizeA.y/2, posB.y + sizeB.y/2)
+    );
     debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color);
 }
 
@@ -169,12 +175,25 @@ function debugClear() { debugPrimitives = []; }
 function debugScreenshot() { debugTakeScreenshot = 1; }
 
 /** Save a canvas to disk 
- *  @param {HTMLCanvasElement} canvas
- *  @param {string}            [filename]
- *  @param {string}            [type]
+ *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
+ *  @param {string} [filename]
+ *  @param {string} [type]
  *  @memberof Debug */
 function debugSaveCanvas(canvas, filename='screenshot', type='image/png')
-{ debugSaveDataURL(canvas.toDataURL(type), filename); }
+{
+    if (canvas instanceof OffscreenCanvas)
+    {
+        // copy to temporary canvas and save
+        if (!debugCanvas)
+            debugCanvas = document.createElement('canvas');
+        debugCanvas.width = canvas.width;
+        debugCanvas.height = canvas.height;
+        debugCanvas.getContext('2d').drawImage(canvas, 0, 0);
+        debugSaveDataURL(debugCanvas.toDataURL(type), filename);
+    }
+    else
+        debugSaveDataURL(canvas.toDataURL(type), filename);
+}
 
 /** Save a text file to disk 
  *  @param {string}     text
@@ -252,7 +271,8 @@ function debugRender()
     if (debugVideoCaptureIsActive())
         return; // don't show debug info when capturing video
 
-    glCopyToContext(mainContext);
+    // flush any gl sprites before drawing debug info
+    glFlush();
 
     if (debugTakeScreenshot)
     {
@@ -329,8 +349,11 @@ function debugRender()
             }
         }
 
-        if (tileCollisionLayers.length) // show floored tile pick if there is tile collision
-            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(0,0,1,.5), 0, false);
+        if (tileCollisionTest(mousePos))
+        {
+            // show floored tile pick for tile collision
+            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(1,1,0,.5));
+        }
         mainContext = saveContext;
     }
 
@@ -405,10 +428,10 @@ function debugRender()
         mainContext = overlayContext;
         const raycastHitPos = tileCollisionRaycast(debugObject.pos, mousePos);
         raycastHitPos && drawRect(raycastHitPos.floor().add(vec2(.5)), vec2(1), rgb(0,1,1,.3));
-        drawLine(mousePos, debugObject.pos, .1, raycastHitPos ? rgb(1,0,0,.5) : rgb(0,1,0,.5), false);
+        drawLine(mousePos, debugObject.pos, .1, raycastHitPos ? rgb(1,0,0,.5) : rgb(0,1,0,.5));
 
         const debugText = 'mouse pos = ' + mousePos + 
-            '\nmouse collision = ' + getTileCollisionData(mousePos) + 
+            '\nmouse collision = ' + tileCollisionGetData(mousePos) + 
             '\n\n--- object info ---\n' +
             debugObject.toString();
         drawTextScreen(debugText, mousePosScreen, 24, rgb(), .05, undefined, 'center', 'monospace');
@@ -417,20 +440,24 @@ function debugRender()
 
     {
         // draw debug overlay
+        const fontSize = 20;
+        const lineHeight = fontSize * 1.2 | 0;
         overlayContext.save();
         overlayContext.fillStyle = '#fff';
         overlayContext.textAlign = 'left';
         overlayContext.textBaseline = 'top';
-        overlayContext.font = '28px monospace';
+        overlayContext.font = fontSize + 'px monospace';
         overlayContext.shadowColor = '#000';
         overlayContext.shadowBlur = 9;
 
-        let x = 9, y = -20, h = 30;
+        let x = 9, y = 0, h = lineHeight;
         if (debugOverlay)
         {
-            overlayContext.fillText(engineName, x, y += h);
-            overlayContext.fillText('Objects: ' + engineObjects.length, x, y += h);
+            overlayContext.fillText(engineName, x, y += h/2 );
             overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
+            overlayContext.fillText('FPS: ' + averageFPS.toFixed(1), x, y += h);
+            overlayContext.fillText('Objects: ' + engineObjects.length, x, y += h);
+            overlayContext.fillText('Draw Count: ' + drawCount, x, y += h);
             overlayContext.fillText('---------', x, y += h);
             overlayContext.fillStyle = '#f00';
             overlayContext.fillText('ESC: Debug Overlay', x, y += h);
@@ -444,7 +471,7 @@ function debugRender()
             overlayContext.fillText('4: Debug Raycasts', x, y += h);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText('5: Save Screenshot', x, y += h);
-            overlayContext.fillText('6: Capture Video', x, y += h);
+            overlayContext.fillText('6: Toggle Video Capture', x, y += h);
 
             let keysPressed = '';
             for(const i in inputData[0])