littlejsengine 1.16.2 → 1.17.5

package/plugins/uiSystem.js

@@ -30,7 +30,7 @@ let uiDebug = 0;
 
 /** Enable UI system debug drawing
  *  0=off, 1=normal, 2=show invisible
- *  @param {number|boolean} enable
+ *  @param {number|boolean} debugMode
  *  @memberof UISystem */
 function uiSetDebug(debugMode)
 { uiDebug = typeof debugMode === 'boolean' ? (debugMode ? 1 : 0) : debugMode; }
@@ -512,7 +512,7 @@ class UISystemPlugin
         const up = 'ArrowUp', down = 'ArrowDown', left = 'ArrowLeft', right = 'ArrowRight';
         if (both)
         {
-            return keyIsDown(up) || keyIsDown(left) ? -1 : 
+            return keyIsDown(up) || keyIsDown(left) ? -1 :
                 keyIsDown(down) || keyIsDown(right) ? 1 : 0;
         }
         const back = vertical ? up : left;
@@ -543,7 +543,7 @@ class UISystemPlugin
      *  @return {boolean} */
     getNavigationWasPressed()
     {
-        return isUsingGamepad ? gamepadWasPressed(0, gamepadPrimary) : 
+        return isUsingGamepad ? gamepadWasPressed(0, gamepadPrimary) :
             keyWasPressed('Space') || keyWasPressed('Enter');
     }
         
@@ -591,7 +591,7 @@ class UISystemPlugin
         buttonYes.textHeight = 40;
         buttonYes.navigationIndex = 1;
         buttonYes.hoverColor = hsl(0,1,.5);
-        buttonYes.onClick = ()=> { closeMenu(); yesCallback && yesCallback(); }; 
+        buttonYes.onClick = ()=> { closeMenu(); yesCallback && yesCallback(); };
         confirmMenu.addChild(buttonYes);
         
         // no button
@@ -621,8 +621,8 @@ class UISystemPlugin
 class UIObject
 {
     /** Create a UIObject
-     *  @param {Vector2}  [pos=(0,0)]
-     *  @param {Vector2}  [size=(1,1)]
+     *  @param {Vector2}  [pos=vec2()]
+     *  @param {Vector2}  [size=vec2(1)]
      */
     constructor(pos=vec2(), size=vec2())
     {
@@ -637,7 +637,7 @@ class UIObject
         this.size = size.copy();
         /** @property {Color} - Color of the object */
         this.color = uiSystem.defaultColor.copy();
-        /** @property {Color} - Color of the object when active, uses color if undefined */
+        /** @property {Color} - Color of the object when active, uses hoverColor if undefined */
         this.activeColor = undefined;
         /** @property {string} - Text for this ui object */
         this.text = undefined;
@@ -735,10 +735,10 @@ class UIObject
 
         // disconnect from parent and destroy children
         this.destroyed = 1;
-        this.parent && this.parent.removeChild(this);
+        this.parent?.removeChild(this);
         for (const child of this.children)
         {
-            child.parent = 0;
+            child.parent = undefined;
             child.destroy();
         }
     }
@@ -834,10 +834,10 @@ class UIObject
             this.interactive && this.isActiveObject() && !this.disabled ?
             this.color : this.lineColor;
         const color = isNavigationObject ? this.hoverColor :
-            this.disabled ? this.disabledColor : 
-            this.interactive ? 
-                this.isHoverObject() ? this.hoverColor : 
-                this.isActiveObject() ? this.activeColor || this.color : 
+            this.disabled ? this.disabledColor :
+            this.interactive ?
+                this.isActiveObject() ? this.activeColor || this.hoverColor :
+                this.isHoverObject() ? this.hoverColor :
                 this.color : this.color;
         const lineWidth = this.lineWidth * (isNavigationObject ? 1.5 : 1);
         
@@ -849,7 +849,7 @@ class UIObject
     getTextSize()
     {
         return vec2(
-            this.textWidth  || this.textFitScale * this.size.x, 
+            this.textWidth  || this.textFitScale * this.size.x,
             this.textHeight || this.textFitScale * this.size.y);
     }
 
@@ -897,9 +897,9 @@ class UIObject
     renderDebug(visible=true)
     {
         // apply color based on state
-        const color = 
+        const color =
             !visible ? GREEN :
-            this.isHoverObject() ? YELLOW : 
+            this.isHoverObject() ? YELLOW :
             this.disabled ? PURPLE :
             this.interactive ? RED : BLUE;
         uiSystem.drawRect(this.pos, this.size, CLEAR_BLACK, 4, color);
@@ -1231,8 +1231,8 @@ class UIScrollbar extends UIObject
 class UIVideo extends UIObject
 {
     /** Create a video player UI object
-     *  @param {Vector2} [pos]
-     *  @param {Vector2} [size]
+     *  @param {Vector2} pos
+     *  @param {Vector2} size
      *  @param {string} src - Video file path or URL
      *  @param {boolean} [autoplay=false] - Start playing immediately?
      *  @param {boolean} [loop=false] - Loop the video?

package/plugins/zzfxm.js

@@ -55,7 +55,7 @@ class ZzFXMusic extends Sound
     /** Play the music that loops by default
      *  @param {number}  [volume] - Volume to play the music at
      *  @param {boolean} [loop] - Should the music loop?
-     *  @return {AudioBufferSourceNode} - The audio source node
+     *  @return {SoundInstance} - The sound instance
      */
     playMusic(volume=1, loop=true)
     { return super.play(undefined, volume, 1, 0, loop); }
@@ -102,7 +102,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
     sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
 
     // for each pattern in sequence
-    sequence.forEach((patternIndex, sequenceIndex) => {
+    sequence.forEach((patternIndex, sequenceIndex)=> {
       // get pattern for current channel, use empty 1 note pattern if none found
       patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
 

package/reference.md

@@ -205,8 +205,8 @@ tileDefaultBleed = .3     // How much smaller to draw tiles to prevent bleeding
 
 ```javascript
 // Sound Object
-Sound(zzfxSound, range, taper)                         // Create a zzfx sound
-SoundWave(filename, randomness=0, range, taper)        // Load a wave, mp3, or ogg
+Sound(zzfxSound, randomness, range, taper)             // Create a zzfx sound
+Sound(filename, randomness, range, taper)              // Load a wave, mp3, or ogg
 Sound.play(pos, volume=1, pitch=1, randomness=1, loop) // Play a sound, returns SoundInstance
 Sound.playMusic(volume=1, loop=true)                   // Play as music with looping
 Sound.playNote(semitoneOffset, pos, volume=1)          // Play as note with a semitone offset
@@ -375,11 +375,12 @@ CanvasLayer(position, size) // Create a canvas layer object
 CanvasLayer.canvas          // The canvas used by this layer
 CanvasLayer.context         // The 2D context of the canvas
 CanvasLayer.getImageData()  // Get image data from canvas
-CanvasLayer.useWebGL()      // Creates or updates WebGL texture
+CanvasLayer.updateWebGL()   // Creates or updates WebGL texture
 
 // LittleJS Layer System
 TileLayer(position, size, tileInfo, scale)     // Create a tile layer object
 TileLayer.setData(layerPos, data, redraw)      // Set data at position
+TileLayer.clearData(layerPos, redraw)          // Clear data at position
 TileLayer.getData(layerPos)                    // Get data at position
 TileLayer.redraw()                             // Draw to an offscreen canvas
 TileLayer.drawTileData(layerPos, clear=true)   // Draw the tile

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.16.2';
+const engineVersion = '1.17.5';
 
 /** Frames per second to update
  *  @type {number}
@@ -85,8 +85,9 @@ function getPaused() { return paused; }
  *  @memberof Engine */
 function setPaused(isPaused=true) { paused = isPaused; }
 
-// Frame time tracking
+// Engine internal variables
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
+let showEngineVersion = true;
 
 ///////////////////////////////////////////////////////////////////////////////
 // plugin hooks
@@ -150,16 +151,17 @@ function engineAddPlugin(update, render, glContextLost, glContextRestored)
  *  @example
  *  // Basic engine startup
  *  engineInit(
- *    () => { LOG('Game initialized!'); },  // gameInit
- *    () => { updateGameLogic(); },         // gameUpdate
- *    () => { updateUI(); },                // gameUpdatePost
- *    () => { drawBackground(); },          // gameRender
- *    () => { drawHUD(); },                 // gameRenderPost
+ *    ()=> { LOG('Game initialized!'); },  // gameInit
+ *    ()=> { updateGameLogic(); },         // gameUpdate
+ *    ()=> { updateUI(); },                // gameUpdatePost
+ *    ()=> { drawBackground(); },          // gameRender
+ *    ()=> { drawHUD(); },                 // gameRenderPost
  *    ['tiles.png', 'tilesLevel.png']       // images to load
  *  );
  *  @memberof Engine */
 async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
+    showEngineVersion && console.log(`${engineName} Engine v${engineVersion}`);
     ASSERT(!mainContext, 'engine already initialized');
     ASSERT(isArray(imageSources), 'pass in images as array');
 
@@ -317,7 +319,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             
             // responsive aspect ratio with native resolution
             const innerAspect = innerWidth / innerHeight;
-            ASSERT(canvasMinAspect <= canvasMaxAspect); 
+            ASSERT(canvasMinAspect <= canvasMaxAspect);
             if (canvasMaxAspect && innerAspect > canvasMaxAspect)
             {
                 // full height
@@ -374,7 +376,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     debugInit();
 
     // setup canvases
-    // transform way is still more reliable then flexbox or grid
+    // transform way is still more reliable than 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 = styleCanvas;
@@ -419,18 +421,20 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         }));
     }
 
+    // load engine font image
+    promises.push(fontImageInit());
+
     if (showSplashScreen)
     {
         // draw splash screen
         promises.push(new Promise(resolve =>
         {
             let t = 0;
-            console.log(`${engineName} Engine v${engineVersion}`);
             updateSplash();
             function updateSplash()
             {
                 inputClear();
-                drawEngineSplashScreen(t+=.01);
+                drawEngineLogo(t+=.01);
                 t>1 ? resolve() : setTimeout(updateSplash, 16);
             }
         }));
@@ -446,172 +450,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         await gameInit();
         engineUpdate();
     }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // LittleJS Splash Screen
-    function drawEngineSplashScreen(t)
-    {
-        const x = mainContext;
-        const w = mainCanvas.width = innerWidth;
-        const h = mainCanvas.height = innerHeight;
-
-        {
-            // background
-            const p3 = percent(t, 1, .8);
-            const p4 = percent(t, 0, .5);
-            const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
-            g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
-            g.addColorStop(1,hsl(0,0,0,p3).toString());
-            x.save();
-            x.fillStyle = g;
-            x.fillRect(0,0,w,h);
-        }
-
-        // draw LittleJS logo...
-        const rect = (X, Y, W, H, C)=>
-        {
-            x.beginPath();
-            x.rect(X,Y,W,C?H*p:H);
-            x.fillStyle = C;
-            C ? x.fill() : x.stroke();
-        };
-        const line = (X, Y, Z, W)=>
-        {
-            x.beginPath();
-            x.lineTo(X,Y);
-            x.lineTo(Z,W);
-            x.stroke();
-        };
-        const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
-        {
-            const D = (A+B)/2, E = p*(B-A)/2;
-            x.beginPath();
-            F && x.lineTo(X,Y);
-            x.arc(X,Y,R,D-E,D+E);
-            x.fillStyle = C;
-            C ? x.fill() : x.stroke();
-        };
-        const color = (c=0, l=0) =>
-            hsl([.98,.3,.57,.14][c%4],.8,[0,.3,.5,.8,.9][l]).toString();
-        const alpha = wave(1,1,t);
-        const p = percent(alpha, .1, .5);
-
-        // setup
-        x.translate(w/2,h/2);
-        const size = min(6, min(w,h)/99); // fit to screen
-        x.scale(size,size);
-        x.translate(-40,-35);
-        x.lineJoin = x.lineCap = 'round';
-        x.lineWidth = .1 + p*1.9;
-
-        // drawing effect
-        const p2 = percent(alpha,.1,1);
-        x.setLineDash([99*p2,99]);
-
-        // cab top
-        rect(7,16,18,-8,color(2,2));
-        rect(7,8,18,4,color(2,3));
-        rect(25,8,8,8,color(2,1));
-        rect(25,8,-18,8);
-        rect(25,8,8,8);
-
-        // cab
-        rect(25,16,7,23,color());
-        rect(11,39,14,-23,color(1,1));
-        rect(11,16,14,18,color(1,2));
-        rect(11,16,14,8,color(1,3));
-        rect(25,16,-14,24);
-
-        // cab window
-        rect(15,29,6,-9,color(2,2));
-        circle(15,21,5,0,PI/2,color(2,4),1);
-        rect(21,21,-6,9);
-
-        // little stack
-        rect(37,14,9,6,color(3,2));
-        rect(37,14,4.5,6,color(3,3));
-        rect(37,14,9,6);
-
-        // big stack
-        rect(50,20,10,-8,color(0,1));
-        rect(50,20,6.5,-8,color(0,2));
-        rect(50,20,3.5,-8,color(0,3));
-        rect(50,20,10,-8);
-        circle(55,2,11.4,.5,PI-.5,color(3,3));
-        circle(55,2,11.4,.5,PI/2,color(3,2),1);
-        circle(55,2,11.4,.5,PI-.5);
-        rect(45,7,20,-7,color(0,2));
-        rect(45,-1,20,4,color(0,3));
-        rect(45,-1,20,8);
-
-        // engine
-        for (let i=5; i--;)
-        {
-            // stagger radius to fix slight seam
-            circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
-            circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
-            circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
-        }
-
-        // engine outline
-        circle(36,30,10,PI/2,PI*3/2);
-        circle(48,30,10,PI/2,PI*3/2);
-        circle(60,30,10);
-        line(36,20,60,20);
-
-        // engine front light
-        circle(60,30,4,PI,3*PI,color(3,2));
-        circle(60,30,4,PI,2*PI,color(3,3));
-        circle(60,30,4,PI,3*PI);
-
-        // front brush
-        for (let i=6; i--;)
-        {
-            x.beginPath();
-            x.lineTo(53,54);
-            x.lineTo(53,40);
-            x.lineTo(53+(1+i*2.9)*p,40);
-            x.lineTo(53+(4+i*3.5)*p,54);
-            x.fillStyle = color(0,i%2+2);
-            x.fill();
-            i%2 && x.stroke();
-        }
-
-        // wheels
-        rect(6,40,5,5);
-        rect(6,40,5,5,color());
-        rect(15,54,38,-14,color());
-        for (let i=3; i--;)
-        for (let j=2; j--;)
-        {
-            circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
-            x.stroke();
-            circle(15*i+15,47,j?7:1,0,PI,color(i,2));
-            x.stroke();
-        }
-        line(6,40,68,40); // center
-        line(77,54,4,54); // bottom
-
-        // draw engine name
-        const s = engineName;
-        x.font = '900 16px arial';
-        x.textAlign = 'center';
-        x.textBaseline = 'top';
-        x.lineWidth = .1+p*3.9;
-        let w2 = 0;
-        for (let i=0; i<s.length; ++i)
-            w2 += x.measureText(s[i]).width;
-        for (let j=2; j--;)
-        for (let i=0, X=41-w2/2; i<s.length; ++i)
-        {
-            x.fillStyle = color(i,2);
-            const w = x.measureText(s[i]).width;
-            x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
-            X += w;
-        }
-        x.restore();
-    }
-    ///////////////////////////////////////////////////////////////////////////
 }
 
 /** Update each engine object, remove destroyed objects, and update time
@@ -625,8 +463,7 @@ function engineObjectsUpdate()
     // recursive object update
     function updateObject(o)
     {
-        if (o.destroyed)
-            return;
+        if (o.destroyed) return;
 
         o.update();
         for (const child of o.children)
@@ -634,8 +471,7 @@ function engineObjectsUpdate()
     }
     for (const o of engineObjects)
     {
-        if (o.parent)
-            continue;
+        if (o.parent || o.destroyed) continue;
 
         // update top level objects
         o.update();
@@ -724,4 +560,169 @@ function engineObjectsRaycast(start, end, objects=engineObjects)
 
     debugRaycast && debugLine(start, end, hitObjects.length ? '#f00' : '#00f', .02);
     return hitObjects;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function drawEngineLogo(t)
+{
+    // LittleJS Logo and Splash Screen
+    const x = mainContext;
+    const w = mainCanvas.width = innerWidth;
+    const h = mainCanvas.height = innerHeight;
+
+    {
+        // background
+        const p3 = percent(t, 1, .8);
+        const p4 = percent(t, 0, .5);
+        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
+        g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
+        g.addColorStop(1,hsl(0,0,0,p3).toString());
+        x.save();
+        x.fillStyle = g;
+        x.fillRect(0,0,w,h);
+    }
+
+    // draw LittleJS logo...
+    const rect = (X, Y, W, H, C)=>
+    {
+        x.beginPath();
+        x.rect(X,Y,W,C?H*p:H);
+        x.fillStyle = C;
+        C ? x.fill() : x.stroke();
+    };
+    const line = (X, Y, Z, W)=>
+    {
+        x.beginPath();
+        x.lineTo(X,Y);
+        x.lineTo(Z,W);
+        x.stroke();
+    };
+    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+    {
+        const D = (A+B)/2, E = p*(B-A)/2;
+        x.beginPath();
+        F && x.lineTo(X,Y);
+        x.arc(X,Y,R,D-E,D+E);
+        x.fillStyle = C;
+        C ? x.fill() : x.stroke();
+    };
+    const color = (c=0, l=0)=>
+        hsl([.98,.3,.57,.14][c%4],.9,[0,.3,.5,.8,.9][l]).toString();
+    const alpha = wave(1,1,t);
+    const p = percent(alpha, .1, .5);
+
+    // setup
+    x.translate(w/2,h/2);
+    const size = min(6, min(w,h)/99); // fit to screen
+    x.scale(size,size);
+    x.translate(-40,-35);
+    x.lineJoin = x.lineCap = 'round';
+    x.lineWidth = .1 + p*1.9;
+
+    // drawing effect
+    const p2 = percent(alpha,.1,1);
+    x.setLineDash([99*p2,99]);
+
+    // cab top
+    rect(7,16,18,-8,color(2,2));
+    rect(7,8,18,4,color(2,3));
+    rect(25,8,8,8,color(2,1));
+    rect(25,8,-18,8);
+    rect(25,8,8,8);
+
+    // cab
+    rect(25,16,7,24,color());
+    rect(11,39,14,-23,color(1,1));
+    rect(11,16,14,18,color(1,2));
+    rect(11,16,14,8,color(1,3));
+    rect(25,16,-14,24);
+
+    // cab window
+    rect(15,29,6,-9,color(2,2));
+    circle(15,21,5,0,PI/2,color(2,4),1);
+    rect(21,21,-6,9);
+
+    // little stack
+    rect(37,14,9,6,color(3,2));
+    rect(37,14,4.5,6,color(3,3));
+    rect(37,14,9,6);
+
+    // big stack
+    rect(50,20,10,-8,color(0,1));
+    rect(50,20,6.5,-8,color(0,2));
+    rect(50,20,3.5,-8,color(0,3));
+    rect(50,20,10,-8);
+    circle(55,2,11.4,.5,PI-.5,color(3,3));
+    circle(55,2,11.4,.5,PI/2,color(3,2),1);
+    circle(55,2,11.4,.5,PI-.5);
+    rect(45,7,20,-7,color(0,2));
+    rect(45,-1,20,4,color(0,3));
+    rect(45,-1,20,8);
+
+    // engine
+    for (let i=5; i--;)
+    {
+        // stagger radius to fix slight seam
+        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
+        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
+        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
+    }
+
+    // engine outline
+    circle(36,30,10,PI/2,PI*3/2);
+    circle(48,30,10,PI/2,PI*3/2);
+    circle(60,30,10);
+    line(36,20,60,20);
+
+    // engine front light
+    circle(60,30,4,PI,3*PI,color(3,2));
+    circle(60,30,4,PI,2*PI,color(3,3));
+    circle(60,30,4,PI,3*PI);
+
+    // front brush
+    for (let i=6; i--;)
+    {
+        x.beginPath();
+        x.lineTo(53,54);
+        x.lineTo(53,40);
+        x.lineTo(53+(1+i*2.9)*p,40);
+        x.lineTo(53+(4+i*3.5)*p,54);
+        x.fillStyle = color(0,i%2+2);
+        x.fill();
+        i%2 && x.stroke();
+    }
+
+    // wheels
+    rect(6,40,5,5);
+    rect(6,40,5,5,color());
+    rect(15,54,38,-14,color());
+    for (let i=3; i--;)
+    for (let j=2; j--;)
+    {
+        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
+        x.stroke();
+        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
+        x.stroke();
+    }
+    line(6,40,68,40); // center
+    line(77,54,4,54); // bottom
+
+    // draw engine name
+    const s = engineName;
+    x.font = '900 16px arial';
+    x.textAlign = 'center';
+    x.textBaseline = 'top';
+    x.lineWidth = .1+p*3.9;
+    let w2 = 0;
+    for (let i=0; i<s.length; ++i)
+        w2 += x.measureText(s[i]).width;
+    for (let j=2; j--;)
+    for (let i=0, X=41-w2/2; i<s.length; ++i)
+    {
+        x.fillStyle = color(i,2);
+        const w = x.measureText(s[i]).width;
+        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
+        X += w;
+    }
+    x.restore();
 }