littlejsengine 1.15.9 → 1.16.2

package/src/engineDebug.js

@@ -26,7 +26,7 @@ const debugPointSize = .5;
  *  @type {boolean}
  *  @default
  *  @memberof Debug */
-let showWatermark = true;
+let debugWatermark = true;
 
 /** Key code used to toggle debug mode, Esc by default
  *  @type {string}
@@ -41,7 +41,7 @@ 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, debugCanvas;
+let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParticles = false, debugGamepads = false, debugMedals = false, debugTakeScreenshot;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Debug helper functions
@@ -228,46 +228,6 @@ function debugClear() { debugPrimitives = []; }
  *  @memberof Debug */
 function debugScreenshot() { debugTakeScreenshot = 1; }
 
-/** Save a canvas to disk
- *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
- *  @param {string} [filename]
- *  @param {string} [type]
- *  @memberof Debug */
-function debugSaveCanvas(canvas, filename='screenshot', type='image/png')
-{
-    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
- *  @param {string}     [filename]
- *  @param {string}     [type]
- *  @memberof Debug */
-function debugSaveText(text, filename='text', type='text/plain')
-{ debugSaveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
-
-/** Save a data url to disk
- *  @param {string}     dataURL
- *  @param {string}     filename
- *  @memberof Debug */
-function debugSaveDataURL(dataURL, filename)
-{
-    downloadLink.download = filename;
-    downloadLink.href = dataURL;
-    downloadLink.click();
-}
-
 /** Breaks on all asserts/errors, hides the canvas, and shows message in plain text
  *  This is a good function to call at the start of your game to catch all errors
  *  In release builds this function has no effect
@@ -303,21 +263,18 @@ function debugShowErrors()
 
 function debugInit()
 {
-    // create link for saving screenshots
-    downloadLink = document.createElement('a');
 }
 
 function debugUpdate()
 {
-    if (!debug)
-        return;
+    if (!debug) return;
 
     if (keyWasPressed(debugKey)) // Esc
         debugOverlay = !debugOverlay;
     if (debugOverlay)
     {
         if (keyWasPressed('Digit0'))
-            showWatermark = !showWatermark;
+            debugWatermark = !debugWatermark;
         if (keyWasPressed('Digit1'))
             debugPhysics = !debugPhysics, debugParticles = false;
         if (keyWasPressed('Digit2'))
@@ -328,9 +285,15 @@ function debugUpdate()
             debugRaycast = !debugRaycast;
         if (keyWasPressed('Digit5'))
             debugScreenshot();
-        if (keyWasPressed('Digit6'))
-            debugVideoCaptureIsActive() ? debugVideoCaptureStop() : debugVideoCaptureStart();
     }
+    if (debugVideoCaptureIsActive())
+    {
+        // control to stop video capture
+        if (!debugOverlay || keyWasPressed('Digit6'))
+            debugVideoCaptureStop();
+    }
+    else if (debugOverlay && keyWasPressed('Digit6'))
+        debugVideoCaptureStart();
 }
 
 function debugRender()
@@ -345,13 +308,11 @@ function debugRender()
     {
         // combine canvases, remove alpha and save
         combineCanvases();
-        const w = mainCanvas.width, h = mainCanvas.height;
-        overlayContext.fillRect(0,0,w,h);
-        overlayContext.drawImage(mainCanvas, 0, 0);
-        debugSaveCanvas(overlayCanvas);
+        saveCanvas(mainCanvas);
         debugTakeScreenshot = 0;
     }
 
+    const debugContext = mainContext;
     if (debugGamepads && gamepadsEnable)
     {
         // draw gamepads
@@ -399,9 +360,6 @@ function debugRender()
     let debugObject;
     if (debugOverlay)
     {
-        const saveContext = mainContext;
-        mainContext = overlayContext;
-
         // draw red rectangle around screen
         const cameraSize = getCameraSize();
         debugRect(cameraPos, cameraSize.subtract(vec2(.1)), '#f008');
@@ -433,15 +391,14 @@ function debugRender()
             // show floored tile pick for tile collision
             drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(1,1,0,.5));
         }
-        mainContext = saveContext;
     }
 
     {
         // draw debug primitives
-        overlayContext.lineWidth = 2;
+        debugContext.lineWidth = 2;
         debugPrimitives.forEach(p=>
         {
-            overlayContext.save();
+            debugContext.save();
 
             // create canvas transform from world space to screen space
             // without scaling because we want consistent pixel sizes
@@ -452,55 +409,56 @@ function debugRender()
                 scale = cameraScale;
                 angle -= cameraAngle;
             }
-            overlayContext.translate(pos.x|0, pos.y|0);
-            overlayContext.rotate(angle);
-            overlayContext.scale(1, p.text ? 1 : -1);
-            overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
+            debugContext.translate(pos.x|0, pos.y|0);
+            debugContext.rotate(angle);
+            debugContext.scale(1, p.text ? 1 : -1);
+            debugContext.fillStyle = p.color;
+            debugContext.strokeStyle = p.color;
             if (p.text !== undefined)
             {
-                overlayContext.font = p.size*scale + 'px '+ p.font;
-                overlayContext.textAlign = 'center';
-                overlayContext.textBaseline = 'middle';
-                overlayContext.fillText(p.text, 0, 0);
+                debugContext.font = p.size*scale + 'px '+ p.font;
+                debugContext.textAlign = 'center';
+                debugContext.textBaseline = 'middle';
+                debugContext.fillText(p.text, 0, 0);
             }
             else if (p.points !== undefined)
             {
                 // poly
-                overlayContext.beginPath();
+                debugContext.beginPath();
                 for (const point of p.points)
                 {
                     const p2 = point.scale(scale).floor();
-                    overlayContext.lineTo(p2.x, p2.y);
+                    debugContext.lineTo(p2.x, p2.y);
                 }
-                overlayContext.closePath();
-                p.fill && overlayContext.fill();
-                overlayContext.stroke();
+                debugContext.closePath();
+                p.fill && debugContext.fill();
+                debugContext.stroke();
             }
             else if (p.size === 0 || (p.size.x === 0 && p.size.y === 0))
             {
                 // point
                 const pointSize = debugPointSize * scale;
-                overlayContext.fillRect(-pointSize/2, -1, pointSize, 3);
-                overlayContext.fillRect(-1, -pointSize/2, 3, pointSize);
+                debugContext.fillRect(-pointSize/2, -1, pointSize, 3);
+                debugContext.fillRect(-1, -pointSize/2, 3, pointSize);
             }
             else if (p.size.x !== undefined)
             {
                 // rect
                 const s = p.size.scale(scale).floor();
                 const w = s.x, h = s.y;
-                p.fill && overlayContext.fillRect(-w/2|0, -h/2|0, w, h);
-                overlayContext.strokeRect(-w/2|0, -h/2|0, w, h);
+                p.fill && debugContext.fillRect(-w/2|0, -h/2|0, w, h);
+                debugContext.strokeRect(-w/2|0, -h/2|0, w, h);
             }
             else
             {
                 // circle
-                overlayContext.beginPath();
-                overlayContext.arc(0, 0, p.size*scale/2, 0, 9);
-                p.fill && overlayContext.fill();
-                overlayContext.stroke();
+                debugContext.beginPath();
+                debugContext.arc(0, 0, p.size*scale/2, 0, 9);
+                p.fill && debugContext.fill();
+                debugContext.stroke();
             }
 
-            overlayContext.restore();
+            debugContext.restore();
         });
 
         // remove expired primitives
@@ -509,55 +467,53 @@ function debugRender()
 
     if (debugObject)
     {
-        const saveContext = mainContext;
-        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));
 
-        const debugText = 'mouse pos = ' + mousePos +
-            '\nmouse collision = ' + tileCollisionGetData(mousePos) +
-            '\n\n--- object info ---\n' +
-            debugObject.toString();
+        let debugText = 'mouse pos = ' + mousePos;
+        if (tileCollisionLayers.length)
+            debugText += '\nmouse collision = ' + tileCollisionGetData(mousePos);
+        debugText += '\n\n--- object info ---\n';
+        debugText += debugObject.toString();
         drawTextScreen(debugText, mousePosScreen, 24, rgb(), .05, undefined, 'center', 'monospace');
-        mainContext = saveContext;
     }
 
     {
         // 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 = fontSize + 'px monospace';
-        overlayContext.shadowColor = '#000';
-        overlayContext.shadowBlur = 9;
+        debugContext.save();
+        debugContext.fillStyle = '#fff';
+        debugContext.textAlign = 'left';
+        debugContext.textBaseline = 'top';
+        debugContext.font = fontSize + 'px monospace';
+        debugContext.shadowColor = '#000';
+        debugContext.shadowBlur = 9;
 
         let x = 9, y = 0, h = lineHeight;
         if (debugOverlay)
         {
-            overlayContext.fillText(`${engineName} v${engineVersion}`, x, y += h/2 );
-            overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
-            overlayContext.fillText('FPS: ' + averageFPS.toFixed(1) + (glEnable?' WebGL':' Canvas2D'), 
+            debugContext.fillText(`${engineName} v${engineVersion}`, x, y += h/2 );
+            debugContext.fillText('Time: ' + formatTime(time), x, y += h);
+            debugContext.fillText('FPS: ' + averageFPS.toFixed(1) + (glEnable?' WebGL':' Canvas2D'), 
                 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);
-            overlayContext.fillStyle = debugPhysics ? '#f00' : '#fff';
-            overlayContext.fillText('1: Debug Physics', x, y += h);
-            overlayContext.fillStyle = debugParticles ? '#f00' : '#fff';
-            overlayContext.fillText('2: Debug Particles', x, y += h);
-            overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
-            overlayContext.fillText('3: Debug Gamepads', x, y += h);
-            overlayContext.fillStyle = debugRaycast ? '#f00' : '#fff';
-            overlayContext.fillText('4: Debug Raycasts', x, y += h);
-            overlayContext.fillStyle = '#fff';
-            overlayContext.fillText('5: Save Screenshot', x, y += h);
-            overlayContext.fillText('6: Toggle Video Capture', x, y += h);
+            debugContext.fillText('Objects: ' + engineObjects.length, x, y += h);
+            debugContext.fillText('Draw Count: ' + drawCount, x, y += h);
+            debugContext.fillText('---------', x, y += h);
+            debugContext.fillStyle = '#f00';
+            debugContext.fillText('ESC: Debug Overlay', x, y += h);
+            debugContext.fillStyle = debugPhysics ? '#f00' : '#fff';
+            debugContext.fillText('1: Debug Physics', x, y += h);
+            debugContext.fillStyle = debugParticles ? '#f00' : '#fff';
+            debugContext.fillText('2: Debug Particles', x, y += h);
+            debugContext.fillStyle = debugGamepads ? '#f00' : '#fff';
+            debugContext.fillText('3: Debug Gamepads', x, y += h);
+            debugContext.fillStyle = debugRaycast ? '#f00' : '#fff';
+            debugContext.fillText('4: Debug Raycasts', x, y += h);
+            debugContext.fillStyle = '#fff';
+            debugContext.fillText('5: Save Screenshot', x, y += h);
+            debugContext.fillText('6: Toggle Video Capture', x, y += h);
 
             let keysPressed = '';
             let mousePressed = '';
@@ -570,8 +526,8 @@ function debugRender()
                 else if (keyIsDown(i, 0))
                     keysPressed += i + ' ' ;
             }
-            mousePressed && overlayContext.fillText('Mouse: ' + mousePressed, x, y += h);
-            keysPressed && overlayContext.fillText('Keys: ' + keysPressed, x, y += h);
+            mousePressed && debugContext.fillText('Mouse: ' + mousePressed, x, y += h);
+            keysPressed && debugContext.fillText('Keys: ' + keysPressed, x, y += h);
 
             // show gamepad buttons
             for (let i = 1; i < inputData.length; i++)
@@ -583,26 +539,49 @@ function debugRender()
                     if (keyIsDown(j, i))
                         buttonsPressed += j + ' ' ;
                 }
-                buttonsPressed && overlayContext.fillText(`Gamepad ${i-1}: ` + buttonsPressed, x, y += h);
+                buttonsPressed && debugContext.fillText(`Gamepad ${i-1}: ` + buttonsPressed, x, y += h);
             }
         }
         else
         {
-            overlayContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
-            overlayContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
-            overlayContext.fillText(debugRaycast ? 'Debug Raycasts' : '', x, y += h);
-            overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
+            debugContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
+            debugContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
+            debugContext.fillText(debugRaycast ? 'Debug Raycasts' : '', x, y += h);
+            debugContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
 
-        overlayContext.restore();
+        debugContext.restore();
     }
 }
 
+function debugRenderPost()
+{
+    if (debugVideoCaptureIsActive())
+    {
+        debugVideoCaptureUpdate();
+        return;
+    }
+
+    if (!debugWatermark) return;
+    
+    // update fps display
+    mainContext.textAlign = 'right';
+    mainContext.textBaseline = 'top';
+    mainContext.font = '1em monospace';
+    mainContext.fillStyle = '#000';
+    const text = engineName + ' v' + engineVersion + ' / '
+        + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
+        + (glEnable ? ' GL' : ' 2D') ;
+    mainContext.fillText(text, mainCanvas.width-3, 3);
+    mainContext.fillStyle = '#fff';
+    mainContext.fillText(text, mainCanvas.width-2, 2);
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // video capture - records video and audio at 60 fps using MediaRecorder API
 
 // internal variables used to capture video
-let debugVideoCapture, debugVideoCaptureTrack, debugVideoCaptureIcon, debugVideoCaptureTimer;
+let debugVideoCapture, debugVideoCaptureIcon;
 
 /** Check if video capture is active
  *  @memberof Debug */
@@ -612,80 +591,103 @@ function debugVideoCaptureIsActive() { return !!debugVideoCapture; }
  *  @memberof Debug */
 function debugVideoCaptureStart()
 {
-    if (debugVideoCaptureIsActive())
-        return; // already recording
+    ASSERT(!debugVideoCaptureIsActive(), 'Already capturing video!');
+
+    if (!debugVideoCaptureIcon)
+    {
+        // create recording icon to show it is capturing video
+        debugVideoCaptureIcon = document.createElement('div');
+        debugVideoCaptureIcon.style.position = 'absolute';
+        debugVideoCaptureIcon.style.padding = '9px';
+        debugVideoCaptureIcon.style.color = '#f00';
+        debugVideoCaptureIcon.style.font = '50px monospace';
+        document.body.appendChild(debugVideoCaptureIcon);
+    }
+    // show recording icon
+    debugVideoCaptureIcon.textContent = '';
+    debugVideoCaptureIcon.style.display = '';
 
-    // captureStream passing in 0 to only capture when requestFrame() is called
+    // setup captureStream to capture manually by passing 0
     const stream = mainCanvas.captureStream(0);
+    const videoTrack = stream.getVideoTracks()[0];
+    const captureTimer = new Timer(0, true);
     const chunks = [];
-    debugVideoCaptureTrack = stream.getVideoTracks()[0];
-    if (debugVideoCaptureTrack.applyConstraints)
-        debugVideoCaptureTrack.applyConstraints({frameRate:60}); // force 60 fps
-    debugVideoCapture = new MediaRecorder(stream, {mimeType:'video/webm;codecs=vp8'});
-    debugVideoCapture.ondataavailable = (e)=> chunks.push(e.data);
-    debugVideoCapture.onstop = ()=>
+    videoTrack.applyConstraints({frameRate:frameRate});
+
+    // set up the media recorder
+    const mediaRecorder = new MediaRecorder(stream, 
+        {mimeType:'video/webm;codecs=vp8'});
+    mediaRecorder.ondataavailable = (e)=> chunks.push(e.data);
+    mediaRecorder.onstop = ()=>
     {
         const blob = new Blob(chunks, {type: 'video/webm'});
         const url = URL.createObjectURL(blob);
-        downloadLink.download = 'capture.webm';
-        downloadLink.href = url;
-        downloadLink.click();
-        URL.revokeObjectURL(url);
+        saveDataURL(url, 'capture.webm', 1e3);
     };
 
-    if (audioMasterGain)
+    let audioStreamDestination, silentAudioSource;
+    if (soundEnable)
     {
+        // create silent audio source
+        // fixes issue where video can not start recording without audio
+        silentAudioSource = new ConstantSourceNode(audioContext, { offset: 0 });
+        silentAudioSource.connect(audioMasterGain);
+        silentAudioSource.start();
+
         // connect to audio master gain node
-        const audioStreamDestination = audioContext.createMediaStreamDestination();
+        audioStreamDestination = audioContext.createMediaStreamDestination();
         audioMasterGain.connect(audioStreamDestination);
         for (const track of audioStreamDestination.stream.getAudioTracks())
             stream.addTrack(track); // add audio tracks to capture stream
     }
 
     // start recording
+    try { mediaRecorder.start(); }
+    catch(e)
+    {
+        LOG('Video capture not supported in this browser!');
+        silentAudioSource?.stop();
+        return;
+    }
+
     LOG('Video capture started.');
-    debugVideoCapture.start();
-    debugVideoCaptureTimer = new Timer(0);
 
-    if (!debugVideoCaptureIcon)
+    // save debug video info
+    debugVideoCapture =
     {
-        // create recording icon to show it is capturing video
-        debugVideoCaptureIcon = document.createElement('div');
-        debugVideoCaptureIcon.style.position = 'absolute';
-        debugVideoCaptureIcon.style.padding = '9px';
-        debugVideoCaptureIcon.style.color = '#f00';
-        debugVideoCaptureIcon.style.font = '50px monospace';
-        document.body.appendChild(debugVideoCaptureIcon);
-    }
-    // show recording icon
-    debugVideoCaptureIcon.textContent = '';
-    debugVideoCaptureIcon.style.display = '';
+        mediaRecorder,
+        captureTimer,
+        videoTrack,
+        silentAudioSource,
+        audioStreamDestination
+    };
 }
 
 /** Stop capturing video and save to disk
  *  @memberof Debug */
 function debugVideoCaptureStop()
 {
-    if (!debugVideoCaptureIsActive())
-        return; // not recording
+    ASSERT(debugVideoCaptureIsActive(), 'Not capturing video!');
 
     // stop recording
-    LOG(`Video capture ended. ${debugVideoCaptureTimer.get().toFixed(2)} seconds recorded.`);
-    debugVideoCapture.stop();
-    debugVideoCapture = 0;
+    LOG(`Video capture ended. ${debugVideoCapture.captureTimer.get().toFixed(2)} seconds recorded.`);
     debugVideoCaptureIcon.style.display = 'none';
+    debugVideoCapture.silentAudioSource?.stop();
+    debugVideoCapture.mediaRecorder?.stop();
+    debugVideoCapture.videoTrack?.stop();
+    debugVideoCapture = undefined;
 }
 
 // update video capture, called automatically by engine
 function debugVideoCaptureUpdate()
 {
-    if (!debugVideoCaptureIsActive())
-        return; // not recording
+    ASSERT(debugVideoCaptureIsActive(), 'Not capturing video!');
 
     // save the video frame
     combineCanvases();
-    debugVideoCaptureTrack.requestFrame();
-    debugVideoCaptureIcon.textContent = '● REC ' + formatTime(debugVideoCaptureTimer);
+    debugVideoCapture.videoTrack.requestFrame();
+    debugVideoCaptureIcon.textContent = '● REC ' 
+        + formatTime(debugVideoCapture.captureTimer);
 }
 
 ///////////////////////////////////////////////////////////////////////////////