littlejsengine 1.15.9 → 1.16.2

package/reference.md

@@ -145,7 +145,6 @@ drawCanvas2D(pos, size, angle=0, mirror, drawFunction, screenSpace, context)
 
 // Text functions
 drawText(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK)
-drawTextOverlay(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK)
 drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK)
 
 // Utility drawing functions
@@ -173,7 +172,6 @@ TextureInfo.glTexture   // WebGL texture
 FontImage(image, tileSize=(8,8), paddingSize=(0,1)) // Create an image font
 FontImage.drawText(text, pos, scale, center)        // Draw text in world space
 FontImage.drawTextScreen(text, pos, scale, center)  // Draw text in screen space
-FontImage.drawTextOverlay(text, pos, scale, center) // Draw text to overlay canvas
 
 // Camera settings
 cameraPos = (0,0)        // Position of camera in world space
@@ -193,8 +191,8 @@ showSplashScreen = false      // Show the LittleJS splash screen on startup
 glEnable = true               // Enable fast WebGL rendering
 
 // Tile sheet settings
-tileSizeDefault = (16,16)  // Default size of tiles in pixels
-tileFixBleedScale = .3     // How much smaller to draw tiles to prevent bleeding
+tileDefaultSize = (16,16) // Default size of tiles in pixels
+tileDefaultBleed = .3     // How much smaller to draw tiles to prevent bleeding
 ```
 
 ## LittleJS Audio System
@@ -430,18 +428,18 @@ debugCircle(pos, size, color='#fff', time=0, fill)        // Draw debug circle
 debugPoint(pos, color, time, angle)                         // Draw debug point
 debugLine(posA, posB, color, width=.1, time)                // Draw debug line
 debugText(text, pos, size=1, color='#fff', time=0, angle=0) // Draw debug text
-debugAABB(pA, sA, pB, sB, color)     // Draw a debug axis aligned box
-debugClear()                         // Clear all debug primitives
-debugSaveCanvas(canvas, filename)    // Save canvas to a file
-debugSaveText(text, filename)        // Save text to a file 
-debugSaveDataURL(dataURL, filename)  // Save url to a file
+debugAABB(pA, sA, pB, sB, color) // Draw a debug axis aligned box
+debugClear()                     // Clear all debug primitives
+saveCanvas(canvas, filename)     // Save canvas to a file
+saveText(text, filename)         // Save text to a file 
+saveDataURL(dataURL, filename)   // Save url to a file
 
 // Debug settings
 debug                // Is debug enabled?
 debugPointSize = .5  // Size to render debug points by default
 debugKey = 'Escape'  // Key code used to toggle debug mode
-debugOverlay         // True if the debug overlay is active
-showWatermark        // True if watermark with FPS should be show
+debugOverlay         // Is the debug overlay is active?
+debugWatermark       // Should watermark with FPS appear in debug mode?
 ```
 
 [LittleJS Engine](https://github.com/KilledByAPixel/LittleJS) Copyright 2021 Frank Force

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.15.9';
+const engineVersion = '1.16.2';
 
 /** Frames per second to update
  *  @type {number}
@@ -177,8 +177,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
 
         // disable smoothing for pixel art
-        overlayContext.imageSmoothingEnabled =
-            mainContext.imageSmoothingEnabled = !tilesPixelated;
+        mainContext.imageSmoothingEnabled = !tilesPixelated;
 
         // setup gl rendering if enabled
         glPreRender();
@@ -190,7 +189,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         // update time keeping
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
-        if (debug || showWatermark)
+        if (debug || debugWatermark)
             averageFPS = lerp(averageFPS, 1e3/(frameTimeDeltaMS||1), .05);
         const debugSpeedUp   = debug && keyIsDown('Equal'); // +
         const debugSpeedDown = debug && keyIsDown('Minus'); // -
@@ -218,6 +217,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             debugUpdate();
             gameUpdatePost();
             inputUpdatePost();
+            if (debugVideoCaptureIsActive())
+                renderFrame();
         }
         else
         {
@@ -268,33 +269,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 (showWatermark && !debugVideoCaptureIsActive())
-            {
-                // update fps display
-                overlayContext.textAlign = 'right';
-                overlayContext.textBaseline = 'top';
-                overlayContext.font = '1em monospace';
-                overlayContext.fillStyle = '#000';
-                const text = engineName + ' ' + 'v' + engineVersion + ' / '
-                    + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
-                    + (glEnable ? ' GL' : ' 2D') ;
-                overlayContext.fillText(text, mainCanvas.width-3, 3);
-                overlayContext.fillStyle = '#fff';
-                overlayContext.fillText(text, mainCanvas.width-2, 2);
-            }
+            debugRenderPost();
             drawCount = 0;
         }
     }
@@ -313,8 +301,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             const fixedAspect = canvasFixedSize.x / canvasFixedSize.y;
             const w = innerAspect < fixedAspect ? '100%' : '';
             const h = innerAspect < fixedAspect ? '' : '100%';
-            overlayCanvas.style.width  = mainCanvas.style.width  = w;
-            overlayCanvas.style.height = mainCanvas.style.height = h;
+            mainCanvas.style.width  = w;
+            mainCanvas.style.height = h;
             if (glCanvas)
             {
                 glCanvas.style.width  = w;
@@ -329,6 +317,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             
             // responsive aspect ratio with native resolution
             const innerAspect = innerWidth / innerHeight;
+            ASSERT(canvasMinAspect <= canvasMaxAspect); 
             if (canvasMaxAspect && innerAspect > canvasMaxAspect)
             {
                 // full height
@@ -343,12 +332,12 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             }
         }
 
-        // clear main and overlay canvas and set size
-        overlayCanvas.width  = mainCanvas.width  = mainCanvasSize.x;
-        overlayCanvas.height = mainCanvas.height = mainCanvasSize.y;
+        // clear main canvas and set size
+        mainCanvas.width  = mainCanvasSize.x;
+        mainCanvas.height = mainCanvasSize.y;
 
         // apply the clear color to main canvas
-        if (canvasClearColor.a > 0)
+        if (canvasClearColor.a > 0 && !glEnable)
         {
             mainContext.fillStyle = canvasClearColor.toString();
             mainContext.fillRect(0, 0, mainCanvasSize.x, mainCanvasSize.y);
@@ -356,19 +345,15 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         }
 
         // set default line join and cap
-        const lineJoin = 'round', lineCap = 'round';
-        mainContext.lineJoin = overlayContext.lineJoin = lineJoin;
-        mainContext.lineCap  = overlayContext.lineCap  = lineCap;
+        mainContext.lineJoin = 'round';
+        mainContext.lineCap  = 'round';
     }
+    
+    // skip setup if headless
+    if (headlessMode) return startEngine();
 
-    // wait for gameInit to load
-    async function startEngine()
-    {
-        await gameInit();
-        engineUpdate();
-    }
-    if (headlessMode)
-        return startEngine();
+    // setup webgl
+    glInit(rootElement);
 
     // setup html
     const styleRoot =
@@ -380,36 +365,30 @@ 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 = document.createElement('canvas');
-    rootElement.appendChild(mainCanvas);
+    mainCanvas = rootElement.appendChild(document.createElement('canvas'));
     drawContext = mainContext = mainCanvas.getContext('2d');
 
     // init stuff and start engine
     inputInit();
     audioInit();
     debugInit();
-    glInit();
-
-    // create overlay canvas for hud to appear above gl canvas
-    overlayCanvas = document.createElement('canvas')
-    rootElement.appendChild(overlayCanvas);
-    overlayContext = overlayCanvas.getContext('2d');
 
     // setup canvases
     // transform way is still more reliable then flexbox or grid
     const styleCanvas = 'position:absolute;'+ // allow canvases to overlap
         'top:50%;left:50%;transform:translate(-50%,-50%)'; // center on screen
-    mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
+    mainCanvas.style.cssText = styleCanvas;
     if (glCanvas)
         glCanvas.style.cssText = styleCanvas;
     setCanvasPixelated(canvasPixelated);
-    setOverlayCanvasPixelated(overlayCanvasPixelated);
     updateCanvas();
     glPreRender();
 
-    // create offscreen canvas for image processing
-    workCanvas = new OffscreenCanvas(256, 256);
-    workContext = workCanvas.getContext('2d', { willReadFrequently: true });
+    // create offscreen canvases for image processing
+    workCanvas = new OffscreenCanvas(64, 64);
+    workContext = workCanvas.getContext('2d');
+    workReadCanvas = new OffscreenCanvas(64, 64);
+    workReadContext = workReadCanvas.getContext('2d', { willReadFrequently: true });
 
     // create promises for loading images
     const promises = imageSources.map((src, textureIndex)=>
@@ -461,13 +440,20 @@ 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)
     {
-        const x = overlayContext;
-        const w = overlayCanvas.width = innerWidth;
-        const h = overlayCanvas.height = innerHeight;
+        const x = mainContext;
+        const w = mainCanvas.width = innerWidth;
+        const h = mainCanvas.height = innerHeight;
 
         {
             // background

package/src/engineAudio.js

@@ -178,12 +178,12 @@ class Sound
 ///////////////////////////////////////////////////////////////////////////////
 
 /**
- * Sound Wave Object - Stores a wave sound for later use and can be played positionally
- * - this can be used to play wave, mp3, and ogg files
+ * Sound Wave Object - Loads and stores an audio file for later use
+ * - this can be used to load and play wave, mp3, and ogg files
  * @extends Sound
  * @memberof Audio
  * @example
- * // create a sound
+ * // load an audio asset file
  * const sound_example = new SoundWave('sound.mp3');
  *
  * // play the sound
@@ -383,8 +383,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();
@@ -396,8 +395,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);

package/src/engineBuild.js

@@ -16,6 +16,7 @@ const SOURCE_FOLDER = 'src';
 const PLUGIN_FOLDER = 'plugins';
 const engineSourceFiles =
 [
+    `${SOURCE_FOLDER}/engineMath.js`,
     `${SOURCE_FOLDER}/engineUtilities.js`,
     `${SOURCE_FOLDER}/engineSettings.js`,
     `${SOURCE_FOLDER}/engineObject.js`,