littlejsengine 1.16.1 → 1.16.2

package/dist/littlejs.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.16.1';
+const engineVersion = '1.16.2';
 
 /** Frames per second to update
  *  @type {number}
@@ -272,33 +272,20 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             if (!wasUpdated)
                 updateCanvas();
 
-            // render sort then render while removing destroyed objects
+            // render the game and objects
             enginePreRender();
             gameRender();
             engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
             for (const o of engineObjects)
                 o.destroyed || o.render();
+
+            // post rendering
             gameRenderPost();
             pluginList.forEach(plugin=>plugin.render?.());
             inputRender();
             debugRender();
             glFlush();
-            debugVideoCaptureUpdate();
-
-            if (debugWatermark && !debugVideoCaptureIsActive())
-            {
-                // 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);
-            }
+            debugRenderPost();
             drawCount = 0;
         }
     }
@@ -364,15 +351,9 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         mainContext.lineJoin = 'round';
         mainContext.lineCap  = 'round';
     }
-
-    // wait for gameInit to load
-    async function startEngine()
-    {
-        await gameInit();
-        engineUpdate();
-    }
-    if (headlessMode)
-        return startEngine();
+    
+    // skip setup if headless
+    if (headlessMode) return startEngine();
 
     // setup webgl
     glInit(rootElement);
@@ -387,7 +368,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         'touch-action:none;' +        // prevent mobile pinch to resize
         '-webkit-touch-callout:none'; // compatibility for ios
     rootElement.style.cssText = styleRoot;
-    drawCanvas = mainCanvas = rootElement.appendChild(document.createElement('canvas'));
+    mainCanvas = rootElement.appendChild(document.createElement('canvas'));
     drawContext = mainContext = mainCanvas.getContext('2d');
 
     // init stuff and start engine
@@ -462,6 +443,13 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     await Promise.all(promises);
     return startEngine();
 
+    async function startEngine()
+    {
+        // wait for gameInit to load
+        await gameInit();
+        engineUpdate();
+    }
+
     ///////////////////////////////////////////////////////////////////////////
     // LittleJS Splash Screen
     function drawEngineSplashScreen(t)
@@ -781,7 +769,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
@@ -968,46 +956,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
@@ -1043,21 +991,11 @@ function debugShowErrors()
 
 function debugInit()
 {
-    // create link for saving screenshots
-    downloadLink = document.createElement('a');
 }
 
 function debugUpdate()
 {
-    if (!debug)
-        return;
-
-    if (debugVideoCaptureIsActive())
-    {
-        // control to stop video capture
-        if (keyWasPressed('Digit6') || keyWasPressed(debugKey))
-            debugVideoCaptureStop();
-    }
+    if (!debug) return;
 
     if (keyWasPressed(debugKey)) // Esc
         debugOverlay = !debugOverlay;
@@ -1075,9 +1013,15 @@ function debugUpdate()
             debugRaycast = !debugRaycast;
         if (keyWasPressed('Digit5'))
             debugScreenshot();
-        if (keyWasPressed('Digit6') && !debugVideoCaptureIsActive())
-            debugVideoCaptureStart();
     }
+    if (debugVideoCaptureIsActive())
+    {
+        // control to stop video capture
+        if (!debugOverlay || keyWasPressed('Digit6'))
+            debugVideoCaptureStop();
+    }
+    else if (debugOverlay && keyWasPressed('Digit6'))
+        debugVideoCaptureStart();
 }
 
 function debugRender()
@@ -1092,7 +1036,7 @@ function debugRender()
     {
         // combine canvases, remove alpha and save
         combineCanvases();
-        debugSaveCanvas(mainCanvas);
+        saveCanvas(mainCanvas);
         debugTakeScreenshot = 0;
     }
 
@@ -1338,11 +1282,34 @@ function debugRender()
     }
 }
 
+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 */
@@ -1352,80 +1319,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, true);
 
-    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);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1464,99 +1454,99 @@ function debugProtectConstant(obj)
  * - Color - holds a rgba color with some math functions
  * - Timer - tracks time automatically
  * - RandomGenerator - seeded random number generator
- * @namespace Utilities
+ * @namespace Math
  */
 
 /** The value of PI
  *  @type {number}
  *  @default Math.PI
- *  @memberof Utilities */
+ *  @memberof Math */
 const PI = Math.PI;
 
 /** Returns absolute value of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const abs = Math.abs;
 
 /** Returns floored value of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const floor = Math.floor;
 
 /** Returns ceiled value of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const ceil = Math.ceil;
 
 /** Returns rounded value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const round = Math.round;
 
 /** Returns lowest value passed in
  *  @param {...number} values
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const min = Math.min;
 
 /** Returns highest value passed in
  *  @param {...number} values
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const max = Math.max;
 
 /** Returns the sign of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const sign = Math.sign;
 
 /** Returns hypotenuse of values passed in
  *  @param {...number} values
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const hypot = Math.hypot;
 
 /** Returns log2 of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const log2 = Math.log2;
 
 /** Returns sin of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const sin = Math.sin;
 
 /** Returns cos of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const cos = Math.cos;
 
 /** Returns tan of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const tan = Math.tan;
 
 /** Returns atan2 of values passed in
  *  @param {number} y
  *  @param {number} x
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const atan2 = Math.atan2;
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {number} dividend
  *  @param {number} [divisor]
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % divisor; }
 
 /** Clamps the value between max and min
@@ -1564,7 +1554,7 @@ function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % di
  *  @param {number} [min]
  *  @param {number} [max]
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function clamp(value, min=0, max=1) { return value < min ? min : value > max ? max : value; }
 
 /** Returns what percentage the value is between valueA and valueB
@@ -1572,7 +1562,7 @@ function clamp(value, min=0, max=1) { return value < min ? min : value > max ? m
  *  @param {number} valueA
  *  @param {number} valueB
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function percent(value, valueA, valueB)
 { return (valueB-=valueA) ? clamp((value-valueA)/valueB) : 0; }
 
@@ -1581,7 +1571,7 @@ function percent(value, valueA, valueB)
  *  @param {number} valueB
  *  @param {number} percent
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function lerp(valueA, valueB, percent)
 { return valueA + clamp(percent) * (valueB-valueA); }
 
@@ -1593,7 +1583,7 @@ function lerp(valueA, valueB, percent)
  *  @param {number} lerpA
  *  @param {number} lerpB
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function percentLerp(value, percentA, percentB, lerpA, lerpB)
 { return lerp(lerpA, lerpB, percent(value, percentA, percentB)); }
 
@@ -1602,7 +1592,7 @@ function percentLerp(value, percentA, percentB, lerpA, lerpB)
  *  @param {number} valueB
  *  @param {number} [wrapSize]
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function distanceWrap(valueA, valueB, wrapSize=1)
 { const d = (valueA - valueB) % wrapSize; return d*2 % wrapSize - d; }
 
@@ -1612,7 +1602,7 @@ function distanceWrap(valueA, valueB, wrapSize=1)
  *  @param {number} percent
  *  @param {number} [wrapSize]
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function lerpWrap(valueA, valueB, percent, wrapSize=1)
 { return valueA + clamp(percent) * distanceWrap(valueB, valueA, wrapSize); }
 
@@ -1620,7 +1610,7 @@ function lerpWrap(valueA, valueB, percent, wrapSize=1)
  *  @param {number} angleA
  *  @param {number} angleB
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*PI); }
 
 /** Linearly interpolates between the angles passed in with wrapping
@@ -1628,25 +1618,25 @@ function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*P
  *  @param {number} angleB
  *  @param {number} percent
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function lerpAngle(angleA, angleB, percent) { return lerpWrap(angleA, angleB, percent, 2*PI); }
 
 /** Applies smoothstep function to the percentage value
  *  @param {number} percent
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
 
 /** Checks if the value passed in is a power of two
  *  @param {number} value
  *  @return {boolean}
- *  @memberof Utilities */
+ *  @memberof Math */
 function isPowerOfTwo(value) { return !(value & (value - 1)); }
 
 /** Returns the nearest power of two not less than the value
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function nearestPowerOfTwo(value) { return 2**ceil(log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping
@@ -1656,7 +1646,7 @@ function nearestPowerOfTwo(value) { return 2**ceil(log2(value)); }
  *  @param {Vector2} posB          - Center of box B
  *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
  *  @return {boolean}              - True if overlapping
- *  @memberof Utilities */
+ *  @memberof Math */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
 {
     const dx = (posA.x - posB.x)*2;
@@ -1672,7 +1662,7 @@ function isOverlapping(posA, sizeA, posB, sizeB=vec2())
  *  @param {Vector2} pos   - Center of box
  *  @param {Vector2} size  - Size of box
  *  @return {boolean}      - True if intersecting
- *  @memberof Utilities */
+ *  @memberof Math */
 function isIntersecting(start, end, pos, size)
 {
     // Liang-Barsky algorithm
@@ -1713,52 +1703,29 @@ function isIntersecting(start, end, pos, size)
  *  @param {number} [t=time]    - Value to use for time of the wave
  *  @param {number} [offset]    - Value to use for time offset of the wave
  *  @return {number}            - Value waving between 0 and amplitude
- *  @memberof Utilities */
+ *  @memberof Math */
 function wave(frequency=1, amplitude=1, t=time, offset=0)
 { return amplitude/2 * (1 - cos(offset + t*frequency*2*PI)); }
 
-/** Formats seconds to mm:ss style for display purposes
- *  @param {number} t - time in seconds
- *  @return {string}
- *  @memberof Utilities */
-function formatTime(t)
-{
-    const sign = t < 0 ? '-' : '';
-    t = abs(t)|0;
-    return sign + (t/60|0) + ':' + (t%60<10?'0':'') + t%60;
-}
-
-/** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
- *  @param {string} url - URL of JSON file
- *  @return {Promise<object>}
- *  @memberof Utilities */
-async function fetchJSON(url)
-{
-    const response = await fetch(url);
-    if (!response.ok)
-        throw new Error(`Failed to fetch JSON from ${url}: ${response.status} ${response.statusText}`);
-    return response.json();
-}
-
 /**
  * Check if object is a valid number, not NaN or undefined, but it may be infinite
  * @param {any} n
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isNumber(n) { return typeof n === 'number' && !isNaN(n); }
 
 /**
  * Check if object is a valid string or can be converted to one
  * @param {any} s
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isString(s) { return s !== undefined && s !== null && typeof s.toString() === 'string'; }
 
 /**
  * Check if object is an array
  * @param {any} a
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isArray(a) { return Array.isArray(a); }
 
 /**
@@ -1774,7 +1741,7 @@ function isArray(a) { return Array.isArray(a); }
  * @param {LineTestFunction} testFunction - Check if colliding
  * @param {Vector2} [normal] - Optional vector to store the normal
  * @return {Vector2|undefined} - Position of the collision or undefined if none found
- * @memberof Utilities */
+ * @memberof Math */
 function lineTest(posStart, posEnd, testFunction, normal)
 {
     ASSERT(isVector2(posStart), 'posStart must be a vec2');
@@ -1786,8 +1753,7 @@ function lineTest(posStart, posEnd, testFunction, normal)
     const dx = posEnd.x - posStart.x;
     const dy = posEnd.y - posStart.y;
     const totalLength = hypot(dx, dy);
-    if (!totalLength)
-        return;
+    if (!totalLength) return;
 
     // current integer cell we are in
     const pos = posStart.floor();
@@ -2021,14 +1987,14 @@ class RandomGenerator
  * let a = vec2(0, 1); // vector with coordinates (0, 1)
  * a = vec2(5);        // set a to (5, 5)
  * b = vec2();         // set b to (0, 0)
- * @memberof Utilities */
+ * @memberof Math */
 function vec2(x=0, y) { return new Vector2(x, y === undefined ? x : y); }
 
 /**
  * Check if object is a valid Vector2
  * @param {any} v
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isVector2(v) { return v instanceof Vector2 && v.isValid(); }
 
 // vector2 asserts
@@ -2278,7 +2244,7 @@ class Vector2
  * @param {number} [b=1] - blue
  * @param {number} [a=1] - alpha
  * @return {Color}
- * @memberof Utilities
+ * @memberof Math
  */
 function rgb(r, g, b, a) { return new Color(r, g, b, a); }
 
@@ -2289,14 +2255,14 @@ function rgb(r, g, b, a) { return new Color(r, g, b, a); }
  * @param {number} [l=1] - lightness
  * @param {number} [a=1] - alpha
  * @return {Color}
- * @memberof Utilities */
+ * @memberof Math */
 function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
 
 /**
  * Check if object is a valid Color
  * @param {any} c
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isColor(c) { return c instanceof Color && c.isValid(); }
 
 // color asserts
@@ -2477,7 +2443,7 @@ class Color
     toString(useAlpha = true)
     {
         if (debug && !this.isValid())
-            return `#000`;
+            return '#000';
         const toHex = (c)=> ((c=clamp(c)*255|0)<16 ? '0' : '') + c.toString(16);
         return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
     }
@@ -2534,67 +2500,67 @@ class Color
 
 /** Color - White #ffffff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const WHITE = debugProtectConstant(rgb());
 
 /** Color - Clear White #757474ff with 0 alpha
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const CLEAR_WHITE = debugProtectConstant(rgb(1,1,1,0));
 
 /** Color - Black #000000
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const BLACK = debugProtectConstant(rgb(0,0,0));
 
 /** Color - Clear Black #000000 with 0 alpha
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const CLEAR_BLACK = debugProtectConstant(rgb(0,0,0,0));
 
 /** Color - Gray #808080
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const GRAY = debugProtectConstant(rgb(.5,.5,.5));
 
 /** Color - Red #ff0000
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const RED = debugProtectConstant(rgb(1,0,0));
 
 /** Color - Orange #ff8000
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const ORANGE = debugProtectConstant(rgb(1,.5,0));
 
 /** Color - Yellow #ffff00
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const YELLOW = debugProtectConstant(rgb(1,1,0));
 
 /** Color - Green #00ff00
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const GREEN = debugProtectConstant(rgb(0,1,0));
 
 /** Color - Cyan #00ffff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const CYAN = debugProtectConstant(rgb(0,1,1));
 
 /** Color - Blue #0000ff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const BLUE = debugProtectConstant(rgb(0,0,1));
 
 /** Color - Purple #8000ff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const PURPLE = debugProtectConstant(rgb(.5,0,1));
 
 /** Color - Magenta #ff00ff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const MAGENTA = debugProtectConstant(rgb(1,0,1));
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -2680,6 +2646,84 @@ class Timer
      * @return {number} */
     valueOf() { return this.get(); }
 }
+/**
+ * LittleJS Utility Classes and Functions
+ * - General purpose math library
+ * - Vector2 - fast, simple, easy 2D vector class
+ * - Color - holds a rgba color with some math functions
+ * - Timer - tracks time automatically
+ * - RandomGenerator - seeded random number generator
+ * @namespace Utilities
+ */
+
+/** Formats seconds to mm:ss style for display purposes
+ *  @param {number} t - time in seconds
+ *  @return {string}
+ *  @memberof Utilities */
+function formatTime(t)
+{
+    const sign = t < 0 ? '-' : '';
+    t = abs(t)|0;
+    return sign + (t/60|0) + ':' + (t%60<10?'0':'') + t%60;
+}
+
+/** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
+ *  @param {string} url - URL of JSON file
+ *  @return {Promise<object>}
+ *  @memberof Utilities */
+async function fetchJSON(url)
+{
+    const response = await fetch(url);
+    if (!response.ok)
+        throw new Error(`Failed to fetch JSON from ${url}: ${response.status} ${response.statusText}`);
+    return response.json();
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Save a text file to disk
+ *  @param {string} text
+ *  @param {string} [filename]
+ *  @param {string} [type]
+ *  @memberof Utilities */
+function saveText(text, filename='text', type='text/plain')
+{ saveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
+
+/** Save a canvas to disk
+ *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
+ *  @param {string} [filename]
+ *  @param {string} [type]
+ *  @memberof Utilities */
+function saveCanvas(canvas, filename='screenshot', type='image/png')
+{
+    if (canvas instanceof OffscreenCanvas)
+    {
+        // copy to temporary canvas and save
+        const saveCanvas = document.createElement('canvas');
+        saveCanvas.width = canvas.width;
+        saveCanvas.height = canvas.height;
+        saveCanvas.getContext('2d').drawImage(canvas, 0, 0);
+        saveDataURL(saveCanvas.toDataURL(type), filename);
+    }
+    else
+        saveDataURL(canvas.toDataURL(type), filename);
+}
+
+/** Save a data url to disk
+ *  @param {string} url
+ *  @param {string} [filename]
+ *  @param {number} [revokeTime] - how long before revoking the url
+ *  @memberof Utilities */
+function saveDataURL(url, filename='download', revokeTime)
+{
+    // create link for saving screenshots
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = url;
+    link.click();
+    if (revokeTime !== undefined)
+        setTimeout(()=> URL.revokeObjectURL(url), revokeTime);
+}
 /**
  * LittleJS Engine Settings
  * - All settings for the engine are here
@@ -2717,7 +2761,7 @@ let cameraScale = 32;
  *  @memberof Settings */
 let canvasColorTiles = true;
 
-/** Color to clear the canvas to before render
+/** Color to clear the canvas to before render, does not clear if alpha is 0
  *  @type {Color}
  *  @memberof Draw */
 let canvasClearColor = CLEAR_BLACK;
@@ -3026,7 +3070,7 @@ function setCameraScale(scale) { cameraScale = scale; }
  *  @memberof Settings */
 function setCanvasColorTiles(colorTiles) { canvasColorTiles = colorTiles; }
 
-/** Set color to clear the canvas to before render
+/** Set color to clear the canvas to before render, does not clear if alpha is 0
  *  @param {Color} color
  *  @memberof Settings */
 function setCanvasClearColor(color) { canvasClearColor = color.copy(); }
@@ -3784,8 +3828,7 @@ class EngineObject
     /** Render debug info for this object  */
     renderDebugInfo()
     {
-        if (!debug)
-            return;
+        if (!debug) return;
 
         // show object info for debugging
         const size = vec2(max(this.size.x, .2), max(this.size.y, .2));
@@ -3827,11 +3870,6 @@ let mainCanvas;
  *  @memberof Draw */
 let mainContext;
 
-/** The default canvas to use for drawing, usually mainCanvas
- *  @type {HTMLCanvasElement|OffscreenCanvas}
- *  @memberof Draw */
-let drawCanvas;
-
 /** The default 2d context to use for drawing, usually mainContext
  *  @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
  *  @memberof Draw */
@@ -4419,7 +4457,11 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
     ASSERT(typeof drawFunction === 'function', 'drawFunction must be a function');
 
     if (!screenSpace)
-        [pos, size, angle] = worldToScreenTransform(pos, size, angle);
+    {
+        pos = worldToScreen(pos);
+        size = size.scale(cameraScale);
+        angle -= cameraAngle;
+    }
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
     context.rotate(angle);
@@ -4471,9 +4513,9 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
  *  @param {number}  [angle]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=mainContext)
+function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=drawContext)
 {
     ASSERT(isString(text), 'text must be a string');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -4614,25 +4656,6 @@ function screenToWorldTransform(screenPos, screenSize, screenAngle=0)
     ];
 }
 
-/** Convert world space transform to screen space
- *  @param {Vector2} worldPos
- *  @param {Vector2} worldSize  
- *  @param {number} [worldAngle]
- *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
- *  @memberof Draw */
-function worldToScreenTransform(worldPos, worldSize, worldAngle=0)
-{
-    ASSERT(isVector2(worldPos), 'worldPos must be a vec2');
-    ASSERT(isVector2(worldSize), 'worldSize must be a vec2');
-    ASSERT(isNumber(worldAngle), 'worldAngle must be a number');
-
-    return [
-        worldToScreen(worldPos),
-        worldSize.scale(cameraScale),
-        worldAngle - cameraAngle
-    ];
-}
-
 /** Get the size of the camera window in world space
  *  @return {Vector2}
  *  @memberof Draw */
@@ -4855,7 +4878,7 @@ class FontImage
      *  @param {boolean} [center]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      */
-    drawTextScreen(text, pos, scale=4, center=true, context=mainContext)
+    drawTextScreen(text, pos, scale=4, center=true, context=drawContext)
     {
         context.save();
         const size = this.tileSize;
@@ -5248,8 +5271,7 @@ function inputInit()
     }
     function onMouseDown(e)
     {
-        if (isTouchDevice && touchInputEnable)
-            return;
+        if (isTouchDevice && touchInputEnable) return;
 
         // fix stalled audio requiring user interaction
         if (soundEnable && !headlessMode && audioContext && !audioIsRunning())
@@ -5300,8 +5322,7 @@ function inputInit()
         let wasTouching;
         function handleTouch(e)
         {
-            if (!touchInputEnable)
-                return;
+            if (!touchInputEnable) return;
 
             // route touch to gamepad
             if (touchGamepadEnable)
@@ -5365,8 +5386,7 @@ function inputInit()
             }
 
             // don't process touch gamepad if paused
-            if (paused)
-                return;
+            if (paused) return;
 
             // get center of left and right sides
             const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
@@ -6052,8 +6072,7 @@ class SoundInstance
     /** Pause this sound instance */
     pause()
     {
-        if (this.isPaused())
-            return;
+        if (this.isPaused()) return;
 
         // save current time and stop sound
         this.pausedTime = this.getCurrentTime();
@@ -6065,8 +6084,7 @@ class SoundInstance
     /** Unpauses this sound instance */
     resume()
     {
-        if (!this.isPaused())
-            return;
+        if (!this.isPaused()) return;
         
         // restart sound from paused time
         this.start(this.pausedTime);
@@ -6804,12 +6822,11 @@ class TileLayer extends CanvasLayer
         if (!this.context) return;
 
         // save current render settings
-        /** @type {[HTMLCanvasElement|OffscreenCanvas, CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color]} */
-        this.savedRenderSettings = [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor];
+        /** @type {[CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color]} */
+        this.savedRenderSettings = [drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor];
 
         // set the draw canvas and context to this layer
         // use camera settings to match this layer's canvas
-        drawCanvas = this.canvas;
         drawContext = this.context;
         cameraPos = this.size.scale(.5);
         const tileSize = this.tileInfo ? this.tileInfo.size : vec2(1);
@@ -6819,8 +6836,8 @@ class TileLayer extends CanvasLayer
         if (clear)
         {
             // clear and set size
-            drawCanvas.width  = mainCanvasSize.x;
-            drawCanvas.height = mainCanvasSize.y;
+            this.canvas.width  = mainCanvasSize.x;
+            this.canvas.height = mainCanvasSize.y;
         }
 
         // disable smoothing for pixel art
@@ -6837,10 +6854,10 @@ class TileLayer extends CanvasLayer
 
         ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
         glCopyToContext(drawContext);
-        //debugSaveCanvas(this.canvas);
+        //saveCanvas(this.canvas);
 
         // set stuff back to normal
-        [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor] = this.savedRenderSettings;
+        [drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor] = this.savedRenderSettings;
     }
 
     /** Draw the tile at a given position in the tile grid
@@ -6908,8 +6925,7 @@ class TileCollisionLayer extends TileLayer
     /** Destroy this tile layer */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         // remove from collision layers array and destroy
         const index = tileCollisionLayers.indexOf(this);
@@ -7446,10 +7462,11 @@ function medalsInit(saveName)
 
     // engine automatically renders medals
     engineAddPlugin(undefined, medalsRender);
+
+    // plugin functions
     function medalsRender()
     {
-        if (!medalsDisplayQueue.length)
-            return;
+        if (!medalsDisplayQueue.length) return;
 
         // update first medal in queue
         const medal = medalsDisplayQueue[0];
@@ -7539,8 +7556,7 @@ class Medal
     /** Unlocks a medal if not already unlocked */
     unlock()
     {
-        if (medalsPreventUnlock || this.unlocked)
-            return;
+        if (medalsPreventUnlock || this.unlocked) return;
 
         // save the medal
         ASSERT(medalsSaveName, 'save name must be set');
@@ -7773,8 +7789,7 @@ function glInit(rootElement)
 
 function glSetInstancedMode()
 {
-    if (!glPolyMode)
-        return;
+    if (!glPolyMode) return;
     
     // setup instanced mode
     glFlush();
@@ -7807,8 +7822,7 @@ function glSetInstancedMode()
 
 function glSetPolyMode()
 {
-    if (glPolyMode)
-        return;
+    if (glPolyMode) return;
     
     // setup poly mode
     glFlush();
@@ -7887,8 +7901,8 @@ function glClearCanvas()
     if (!glContext) return;
 
     // clear and set to same size as main canvas
-    glCanvas.width = drawCanvas.width;
-    glCanvas.height = drawCanvas.height;
+    glCanvas.width = mainCanvasSize.x;
+    glCanvas.height = mainCanvasSize.y;
     glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
     const color = canvasClearColor;
     if (color.a > 0)
@@ -7904,8 +7918,7 @@ function glClearCanvas()
 function glSetTexture(texture, wrap=false)
 {
     // must flush cache with the old texture to set a new one
-    if (!glContext || texture === glActiveTexture)
-        return;
+    if (!glContext || texture === glActiveTexture) return;
 
     glFlush();
     glActiveTexture = texture;
@@ -8001,6 +8014,7 @@ function glCreateTexture(image)
 function glDeleteTexture(texture)
 {
     if (!glContext) return;
+    
     glContext.deleteTexture(texture);
 }
 
@@ -8085,8 +8099,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context)
 {
-    if (!glEnable || !glContext)
-        return;
+    if (!glEnable || !glContext) return;
 
     glFlush();
     context.drawImage(glCanvas, 0, 0);
@@ -9682,7 +9695,7 @@ class UIObject
         this.onUpdate();
 
         // unset active if disabled
-        if (this.disabled && this == uiSystem.activeObject)
+        if (this.disabled && this === uiSystem.activeObject)
             uiSystem.activeObject = undefined;
 
         const wasHover = uiSystem.lastHoverObject === this;