littlejsengine 1.11.13 → 1.12.4

package/plugins/uiSystem.js

@@ -1,166 +1,150 @@
 /**
  * LittleJS User Interface Plugin
+ * - call new UISystemPlugin() to setup the UI system
  * - Nested Menus
  * - Text
  * - Buttons
  * - Checkboxes
  * - Images
- * @namespace UISystemPlugin
  */
 
 'use strict';
 
 ///////////////////////////////////////////////////////////////////////////////
 
-// ui defaults
-
-/** Default fill color for UI elements
- *  @type {Color}
- *  @memberof UISystemPlugin */
-let uiDefaultColor       = WHITE;
-
-/** Default outline color for UI elements
- *  @type {Color}
- *  @memberof UISystemPlugin */
-let uiDefaultLineColor   = BLACK;
-
-/** Default text color for UI elements
- *  @type {Color}
- *  @memberof UISystemPlugin */
-let uiDefaultTextColor   = BLACK;
-
-/** Default button color for UI elements
- *  @type {Color}
- *  @memberof UISystemPlugin */
-let uiDefaultButtonColor = hsl(0,0,.5);
-
-/** Default hover color for UI elements
- *  @type {Color}
- *  @memberof UISystemPlugin */
-let uiDefaultHoverColor  = hsl(0,0,.7);
-
-/** Default line width for UI elements
- *  @type {number}
- *  @memberof UISystemPlugin */
-let uiDefaultLineWidth = 4;
-
-/** Default font for UI elements
- *  @type {string}
- *  @memberof UISystemPlugin */
-let uiDefaultFont = 'arial';
-
-/** List of all UI elements
- *  @type {Array<UIObject>}
- *  @memberof UISystemPlugin */
-let uiObjects = [];
-
-/** Context to render UI elements to
- *  @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
- *  @memberof UISystemPlugin */
-let uiContext;
-
-/** Set up the UI system, typically called in gameInit
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
- *  @memberof UISystemPlugin */
-function initUISystem(context=overlayContext)
-{
-    uiContext = context;
-    engineAddPlugin(uiUpdate, uiRender);
+/** Global UI system plugin object
+ *  @type {UISystemPlugin} */
+let uiSystem;
 
-    // setup recursive update and render
-    function uiUpdate()
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * UI System Global Object
+ */
+class UISystemPlugin
+{
+    /** Create the global UI system object
+     *  @param {CanvasRenderingContext2D} [context]
+     *  @example
+     *  // create the ui plugin object
+     *  new UISystemPlugin;
+     */
+    constructor(context=overlayContext)
     {
-        function updateObject(o)
+        ASSERT(!uiSystem, 'UI system already initialized');
+        uiSystem = this;
+
+        /** @property {Color} - Default fill color for UI elements */
+        this.defaultColor = WHITE;
+        /** @property {Color} - Default outline color for UI elements */
+        this.defaultLineColor = BLACK;
+        /** @property {Color} - Default text color for UI elements */
+        this.defaultTextColor = BLACK;
+        /** @property {Color} - Default button color for UI elements */
+        this.defaultButtonColor = hsl(0,0,.5);
+        /** @property {Color} - Default hover color for UI elements */
+        this.defaultHoverColor = hsl(0,0,.7);
+        /** @property {number} - Default line width for UI elements */
+        this.defaultLineWidth = 4;
+        /** @property {string} - Default font for UI elements */
+        this.defaultFont = 'arial';
+        /** @property {Array<UIObject>} - List of all UI elements */
+        this.uiObjects = [];
+        /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
+        this.uiContext = context;
+            
+        engineAddPlugin(uiUpdate, uiRender);
+
+        // setup recursive update and render
+        function uiUpdate()
         {
-            if (!o.visible)
-                return;
-            if (o.parent)
-                o.pos = o.localPos.add(o.parent.pos);
-            o.update();
-            for(const c of o.children)
-                updateObject(c);
+            function updateObject(o)
+            {
+                if (!o.visible)
+                    return;
+                if (o.parent)
+                    o.pos = o.localPos.add(o.parent.pos);
+                o.update();
+                for(const c of o.children)
+                    updateObject(c);
+            }
+            uiSystem.uiObjects.forEach(o=> o.parent || updateObject(o));
+        }
+        function uiRender()
+        {
+            function renderObject(o)
+            {
+                if (!o.visible)
+                    return;
+                if (o.parent)
+                    o.pos = o.localPos.add(o.parent.pos);
+                o.render();
+                for(const c of o.children)
+                    renderObject(c);
+            }
+            uiSystem.uiObjects.forEach(o=> o.parent || renderObject(o));
         }
-        uiObjects.forEach(o=> o.parent || updateObject(o));
     }
-    function uiRender()
+
+    /** Draw a rectangle to the UI context
+    *  @param {Vector2} pos
+    *  @param {Vector2} size
+    *  @param {Color}   [color=uiSystem.defaultColor]
+    *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
+    *  @param {Color}   [lineColor=uiSystem.defaultLineColor] */
+    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor)
     {
-        function renderObject(o)
+        uiSystem.uiContext.fillStyle = color.toString();
+        uiSystem.uiContext.beginPath();
+        uiSystem.uiContext.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
+        uiSystem.uiContext.fill();
+        if (lineWidth)
         {
-            if (!o.visible)
-                return;
-            if (o.parent)
-                o.pos = o.localPos.add(o.parent.pos);
-            o.render();
-            for(const c of o.children)
-                renderObject(c);
+            uiSystem.uiContext.strokeStyle = lineColor.toString();
+            uiSystem.uiContext.lineWidth = lineWidth;
+            uiSystem.uiContext.stroke();
         }
-        uiObjects.forEach(o=> o.parent || renderObject(o));
     }
-}
 
-/** Draw a rectangle to the UI context
- *  @param {Vector2} pos
- *  @param {Vector2} size
- *  @param {Color}   [color=uiDefaultColor]
- *  @param {number}  [lineWidth=uiDefaultLineWidth]
- *  @param {Color}   [lineColor=uiDefaultLineColor]
- *  @memberof UISystemPlugin */
-function drawUIRect(pos, size, color=uiDefaultColor, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor)
-{
-    uiContext.fillStyle = color.toString();
-    uiContext.beginPath();
-    uiContext.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
-    uiContext.fill();
-    if (lineWidth)
+    /** Draw a line to the UI context
+    *  @param {Vector2} posA
+    *  @param {Vector2} posB
+    *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
+    *  @param {Color}   [lineColor=uiSystem.defaultLineColor] */
+    drawLine(posA, posB, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor)
     {
-        uiContext.strokeStyle = lineColor.toString();
-        uiContext.lineWidth = lineWidth;
-        uiContext.stroke();
+        uiSystem.uiContext.strokeStyle = lineColor.toString();
+        uiSystem.uiContext.lineWidth = lineWidth;
+        uiSystem.uiContext.beginPath();
+        uiSystem.uiContext.lineTo(posA.x, posA.y);
+        uiSystem.uiContext.lineTo(posB.x, posB.y);
+        uiSystem.uiContext.stroke();
     }
-}
 
-/** Draw a line to the UI context
- *  @param {Vector2} posA
- *  @param {Vector2} posB
- *  @param {number}  [lineWidth=uiDefaultLineWidth]
- *  @param {Color}   [lineColor=uiDefaultLineColor]
- *  @memberof UISystemPlugin */
-function drawUILine(posA, posB, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor)
-{
-    uiContext.strokeStyle = lineColor.toString();
-    uiContext.lineWidth = lineWidth;
-    uiContext.beginPath();
-    uiContext.lineTo(posA.x, posA.y);
-    uiContext.lineTo(posB.x, posB.y);
-    uiContext.stroke();
-}
-
-/** Draw a tile to the UI context
- *  @param {Vector2}  pos
- *  @param {Vector2}  size
- *  @param {TileInfo} tileInfo
- *  @param {Color}    [color=uiDefaultColor]
- *  @param {number}   [angle]
- *  @param {boolean}  [mirror]
- *  @memberof UISystemPlugin */
-function drawUITile(pos, size, tileInfo, color=uiDefaultColor, angle=0, mirror=false)
-{
-    drawTile(pos, size, tileInfo, color, angle, mirror, BLACK, false, true, uiContext);
-}
+    /** Draw a tile to the UI context
+    *  @param {Vector2}  pos
+    *  @param {Vector2}  size
+    *  @param {TileInfo} tileInfo
+    *  @param {Color}    [color=uiSystem.defaultColor]
+    *  @param {number}   [angle]
+    *  @param {boolean}  [mirror] */
+    drawTile(pos, size, tileInfo, color=uiSystem.defaultColor, angle=0, mirror=false)
+    {
+        drawTile(pos, size, tileInfo, color, angle, mirror, BLACK, false, true, uiSystem.uiContext);
+    }
 
-/** Draw text to the UI context
- *  @param {string}  text
- *  @param {Vector2} pos
- *  @param {Vector2} size
- *  @param {Color}   [color=uiDefaultColor]
- *  @param {number}  [lineWidth=uiDefaultLineWidth]
- *  @param {Color}   [lineColor=uiDefaultLineColor]
- *  @param {string}  [align]
- *  @param {string}  [font=uiDefaultFont]
- *  @memberof UISystemPlugin */
-function drawUIText(text, pos, size, color=uiDefaultColor, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor, align='center', font=uiDefaultFont)
-{
-    drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, size.x, uiContext);
+    /** Draw text to the UI context
+    *  @param {string}  text
+    *  @param {Vector2} pos
+    *  @param {Vector2} size
+    *  @param {Color}   [color=uiSystem.defaultColor]
+    *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
+    *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
+    *  @param {string}  [align]
+    *  @param {string}  [font=uiSystem.defaultFont] */
+    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont)
+    {
+        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, size.x, uiSystem.uiContext);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -182,24 +166,24 @@ class UIObject
         /** @property {Vector2} - Screen space size of the object */
         this.size       = size.copy();
         /** @property {Color} */
-        this.color      = uiDefaultColor;
+        this.color      = uiSystem.defaultColor;
         /** @property {Color} */
-        this.lineColor  = uiDefaultLineColor;
+        this.lineColor  = uiSystem.defaultLineColor;
         /** @property {Color} */
-        this.textColor  = uiDefaultTextColor;
+        this.textColor  = uiSystem.defaultTextColor;
         /** @property {Color} */
-        this.hoverColor = uiDefaultHoverColor;
+        this.hoverColor = uiSystem.defaultHoverColor;
         /** @property {number} */
-        this.lineWidth  = uiDefaultLineWidth;
+        this.lineWidth  = uiSystem.defaultLineWidth;
         /** @property {string} */
-        this.font       = uiDefaultFont;
+        this.font       = uiSystem.defaultFont;
         /** @property {boolean} */
         this.visible    = true;
         /** @property {Array<UIObject>} */
         this.children   = [];
         /** @property {UIObject} */
         this.parent     = undefined;
-        uiObjects.push(this);
+        uiSystem.uiObjects.push(this);
     }
 
     /** Add a child UIObject to this object
@@ -256,7 +240,7 @@ class UIObject
     render()
     {
         if (this.size.x && this.size.y)
-            drawUIRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
+            uiSystem.drawRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
     }
 
     /** Called when the mouse enters the object */
@@ -287,9 +271,9 @@ class UIText extends UIObject
      *  @param {Vector2} [size]
      *  @param {string}  [text]
      *  @param {string}  [align]
-     *  @param {string}  [font=uiDefaultFont]
+     *  @param {string}  [font=uiSystem.defaultFont]
      */
-    constructor(pos, size, text='', align='center', font=uiDefaultFont)
+    constructor(pos, size, text='', align='center', font=uiSystem.defaultFont)
     {
         super(pos, size);
 
@@ -303,7 +287,7 @@ class UIText extends UIObject
     }
     render()
     {
-        drawUIText(this.text, this.pos, this.size, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
+        uiSystem.drawText(this.text, this.pos, this.size, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
     }
 }
 
@@ -336,7 +320,7 @@ class UITile extends UIObject
     }
     render()
     {
-        drawUITile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror);
+        uiSystem.drawTile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror);
     }
 }
 
@@ -351,9 +335,9 @@ class UIButton extends UIObject
      *  @param {Vector2} [pos]
      *  @param {Vector2} [size]
      *  @param {string}  [text]
-     *  @param {Color}   [color=uiDefaultButtonColor]
+     *  @param {Color}   [color=uiSystem.defaultButtonColor]
      */
-    constructor(pos, size, text, color=uiDefaultButtonColor)
+    constructor(pos, size, text='', color=uiSystem.defaultButtonColor)
     {
         super(pos, size);
 
@@ -365,9 +349,9 @@ class UIButton extends UIObject
     {
         const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
         const color = this.mouseIsOver? this.hoverColor : this.color;
-        drawUIRect(this.pos, this.size, color, this.lineWidth, lineColor);
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor);
         const textSize = vec2(this.size.x, this.size.y*.8);
-        drawUIText(this.text, this.pos, textSize, 
+        uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
     }
 }
@@ -399,12 +383,12 @@ class UICheckbox extends UIObject
     render()
     {
         const color = this.mouseIsOver? this.hoverColor : this.color;
-        drawUIRect(this.pos, this.size, color, this.lineWidth, this.lineColor);
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, this.lineColor);
         if (this.checked)
         {
             // draw an X if checked
-            drawUILine(this.pos.add(this.size.multiply(vec2(-.5,-.5))), this.pos.add(this.size.multiply(vec2(.5,.5))), this.lineWidth, this.lineColor);
-            drawUILine(this.pos.add(this.size.multiply(vec2(-.5,.5))), this.pos.add(this.size.multiply(vec2(.5,-.5))), this.lineWidth, this.lineColor);
+            uiSystem.drawLine(this.pos.add(this.size.multiply(vec2(-.5,-.5))), this.pos.add(this.size.multiply(vec2(.5,.5))), this.lineWidth, this.lineColor);
+            uiSystem.drawLine(this.pos.add(this.size.multiply(vec2(-.5,.5))), this.pos.add(this.size.multiply(vec2(.5,-.5))), this.lineWidth, this.lineColor);
         }
     }
 }
@@ -421,10 +405,10 @@ class UIScrollbar extends UIObject
      *  @param {Vector2} [size]
      *  @param {number}  [value]
      *  @param {string}  [text]
-     *  @param {Color}   [color=uiDefaultButtonColor]
+     *  @param {Color}   [color=uiSystem.defaultButtonColor]
      *  @param {Color}   [handleColor=WHITE]
      */
-    constructor(pos, size, value=.5, text='', color=uiDefaultButtonColor, handleColor=WHITE)
+    constructor(pos, size, value=.5, text='', color=uiSystem.defaultButtonColor, handleColor=WHITE)
     {
         super(pos, size);
 
@@ -453,7 +437,7 @@ class UIScrollbar extends UIObject
     {
         const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
         const color = this.mouseIsOver? this.hoverColor : this.color;
-        drawUIRect(this.pos, this.size, color, this.lineWidth, lineColor);
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor);
     
         const handleSize = vec2(this.size.y);
         const handleWidth = this.size.x - handleSize.x;
@@ -461,10 +445,10 @@ class UIScrollbar extends UIObject
         const p2 = this.pos.x + handleWidth/2;
         const handlePos = vec2(lerp(this.value, p1, p2), this.pos.y);
         const barColor = this.mouseIsHeld ? this.color : this.handleColor;
-        drawUIRect(handlePos, handleSize, barColor, this.lineWidth, this.lineColor);
+        uiSystem.drawRect(handlePos, handleSize, barColor, this.lineWidth, this.lineColor);
 
         const textSize = vec2(this.size.x, this.size.y*.8);
-        drawUIText(this.text, this.pos, textSize, 
+        uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
     }
-}
+}

package/plugins/zzfxm.js

@@ -0,0 +1,163 @@
+/**
+ * LittleJS ZzFXM Plugin
+ */
+
+'use strict';
+
+/**
+ * Music Object - Stores a zzfx music track for later use
+ * 
+ * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
+ * @example
+ * // create some music
+ * const music_example = new Music(
+ * [
+ *     [                         // instruments
+ *       [,0,400]                // simple note
+ *     ], 
+ *     [                         // patterns
+ *         [                     // pattern 1
+ *             [                 // channel 0
+ *                 0, -1,        // instrument 0, left speaker
+ *                 1, 0, 9, 1    // channel notes
+ *             ], 
+ *             [                 // channel 1
+ *                 0, 1,         // instrument 0, right speaker
+ *                 0, 12, 17, -1 // channel notes
+ *             ]
+ *         ],
+ *     ],
+ *     [0, 0, 0, 0], // sequence, play pattern 0 four times
+ *     90            // BPM
+ * ]);
+ * 
+ * // play the music
+ * music_example.play();
+ */
+class ZzFXMusic extends Sound
+{
+    /** Create a music object and cache the zzfx music samples for later use
+     *  @param {[Array, Array, Array, number]} zzfxMusic - Array of zzfx music parameters
+     */
+    constructor(zzfxMusic)
+    {
+        super(undefined);
+
+        if (!soundEnable || headlessMode) return;
+        this.randomness = 0;
+        this.sampleChannels = zzfxM(...zzfxMusic);
+        this.sampleRate = zzfxR;
+    }
+
+    /** Play the music
+     *  @param {number}  [volume=1] - How much to scale volume by
+     *  @param {boolean} [loop] - True if the music should loop
+     *  @return {AudioBufferSourceNode} - The audio source node
+     */
+    playMusic(volume, loop=false)
+    { return super.play(undefined, volume, 1, 1, loop); }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
+
+/** Generate samples for a ZzFM song with given parameters
+ *  @param {Array} instruments - Array of ZzFX sound parameters
+ *  @param {Array} patterns - Array of pattern data
+ *  @param {Array} sequence - Array of pattern indexes
+ *  @param {number} [BPM] - Playback speed of the song in BPM
+ *  @return {Array} - Left and right channel sample data */
+function zzfxM(instruments, patterns, sequence, BPM = 125) 
+{
+  let i, j, k;
+  let instrumentParameters;
+  let note;
+  let sample;
+  let patternChannel;
+  let notFirstBeat;
+  let stop;
+  let instrument;
+  let attenuation;
+  let outSampleOffset;
+  let isSequenceEnd;
+  let sampleOffset = 0;
+  let nextSampleOffset;
+  let sampleBuffer = [];
+  let leftChannelBuffer = [];
+  let rightChannelBuffer = [];
+  let channelIndex = 0;
+  let panning = 0;
+  let hasMore = 1;
+  let sampleCache = {};
+  let beatLength = zzfxR / BPM * 60 >> 2;
+
+  // for each channel in order until there are no more
+  for (; hasMore; channelIndex++) {
+
+    // reset current values
+    sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
+
+    // for each pattern in sequence
+    sequence.forEach((patternIndex, sequenceIndex) => {
+      // get pattern for current channel, use empty 1 note pattern if none found
+      patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
+
+      // check if there are more channels
+      hasMore |= patterns[patternIndex][channelIndex]&&1;
+
+      // get next offset, use the length of first channel
+      nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
+      // for each beat in pattern, plus one extra if end of sequence
+      isSequenceEnd = sequenceIndex == sequence.length - 1;
+      for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
+
+        // <channel-note>
+        note = patternChannel[i];
+
+        // stop if end, different instrument or new note
+        stop = i == patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
+            instrument != (patternChannel[0] || 0) || note | 0;
+
+        // fill buffer with samples for previous beat, most cpu intensive part
+        for (j = 0; j < beatLength && notFirstBeat;
+
+            // fade off attenuation at end of beat if stopping note, prevents clicking
+            j++ > beatLength - 99 && stop && attenuation < 1? attenuation += 1 / 99 : 0
+        ) {
+          // copy sample to stereo buffers with panning
+          sample = (1 - attenuation) * sampleBuffer[sampleOffset++] / 2 || 0;
+          leftChannelBuffer[k] = (leftChannelBuffer[k] || 0) - sample * panning + sample;
+          rightChannelBuffer[k] = (rightChannelBuffer[k++] || 0) + sample * panning + sample;
+        }
+
+        // set up for next note
+        if (note) {
+          // set attenuation
+          attenuation = note % 1;
+          panning = patternChannel[1] || 0;
+          if (note |= 0) {
+            // get cached sample
+            sampleBuffer = sampleCache[
+              [
+                instrument = patternChannel[sampleOffset = 0] || 0,
+                note
+              ]
+            ] = sampleCache[[instrument, note]] || (
+                // add sample to cache
+                instrumentParameters = [...instruments[instrument]],
+                instrumentParameters[2] = (instrumentParameters[2] || 220) * 2**(note / 12 - 1),
+
+                // allow negative values to stop notes
+                note > 0 ? zzfxG(...instrumentParameters) : []
+            );
+          }
+        }
+      }
+
+      // update the sample offset
+      outSampleOffset = nextSampleOffset;
+    });
+  }
+
+  return [leftChannelBuffer, rightChannelBuffer];
+}