littlejsengine 1.7.12 → 1.7.21

package/build/littlejs.esm.js

@@ -1,5 +1,7 @@
 // LittleJS - MIT License - Copyright 2021 Frank Force
 
+'use strict';
+
 /** 
  * LittleJS Debug System
  * - Press Esc to show debug overlay with mouse pick
@@ -10,7 +12,7 @@
  * @namespace Debug
  */
 
-'use strict';
+
 
 /** True if debug is enabled
  *  @type {Boolean}
@@ -213,7 +215,11 @@ function debugRender()
         mainContext.drawImage(overlayCanvas, 0, 0);
         overlayCanvas.width |= 0;
 
-        debugSaveCanvas(mainCanvas);
+        // remove alpha and save
+        const w = mainCanvas.width, h = mainCanvas.height;
+        overlayContext.fillRect(0,0,w,h);
+        overlayContext.drawImage(mainCanvas, 0, 0);
+        debugSaveCanvas(overlayCanvas);
         debugTakeScreenshot = 0;
     }
 
@@ -414,7 +420,7 @@ function debugRender()
  * @namespace Utilities
  */
 
-'use strict';
+
 
 /** A shortcut to get Math.PI
  *  @type {Number}
@@ -1069,7 +1075,7 @@ class Timer
  * @namespace Settings
  */
 
-'use strict';
+
 
 ///////////////////////////////////////////////////////////////////////////////
 // Camera settings
@@ -1317,7 +1323,7 @@ let medalsPreventUnlock;
  * LittleJS Object System
  */
 
-'use strict';
+
 
 /** 
  * LittleJS Object Base Object Class
@@ -1713,7 +1719,7 @@ class EngineObject
  * @namespace Draw
  */
 
-'use strict';
+
 
 /** The primary 2D canvas visible to the user
  *  @type {HTMLCanvasElement}
@@ -1884,7 +1890,7 @@ function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, useWebGL)
+function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
@@ -1904,12 +1910,12 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
 {
     if (!screenSpace)
     {
-        // create canvas transform from world space to screen space
+        // transform from world space to screen space
         pos = worldToScreen(pos);
         size = size.scale(cameraScale);
     }
     context.save();
-    context.translate(pos.x+.5|0, pos.y+.5|0);
+    context.translate(pos.x+.5, pos.y+.5);
     context.rotate(angle);
     context.scale(mirror ? -size.x : size.x, size.y);
     drawFunction(context);
@@ -2094,7 +2100,7 @@ function toggleFullscreen()
  * @namespace Input
  */
 
-'use strict';
+
 
 /** Returns true if device key is down
  *  @param {Number} key
@@ -2278,18 +2284,26 @@ function mouseToScreen(mousePos)
 const stickData = [];
 function gamepadsUpdate()
 {
-    if (touchGamepadEnable && touchGamepadTimer.isSet())
+    // update touch gamepad if enabled
+    if (touchGamepadEnable && isTouchDevice)
     {
-        // read virtual analog stick
-        const sticks = stickData[0] || (stickData[0] = []);
-        sticks[0] = vec2(touchGamepadStick.x, -touchGamepadStick.y); // flip vertical
+        // create the touch gamepad if it doesn't exist
+        if (!touchGamepadButtons)
+            createTouchGamepad();
 
-        // read virtual gamepad buttons
-        const data = inputData[1] || (inputData[1] = []);
-        for (let i=10; i--;)
+        if (touchGamepadTimer.isSet())
         {
-            const j = i == 3 ? 2 : i == 2 ? 3 : i; // fix button locations
-            data[j] = touchGamepadButtons[i] ? 1 + 2*!gamepadIsDown(j,0) : 4*gamepadIsDown(j,0);
+            // read virtual analog stick
+            const sticks = stickData[0] || (stickData[0] = []);
+            sticks[0] = vec2(touchGamepadStick.x, -touchGamepadStick.y); // flip vertical
+
+            // read virtual gamepad buttons
+            const data = inputData[1] || (inputData[1] = []);
+            for (let i=10; i--;)
+            {
+                const j = i == 3 ? 2 : i == 2 ? 3 : i; // fix button locations
+                data[j] = touchGamepadButtons[i] ? 1 + 2*!gamepadIsDown(j,0) : 4*gamepadIsDown(j,0);
+            }
         }
     }
 
@@ -2386,6 +2400,10 @@ if (isTouchDevice)
         // set was touching
         wasTouching = touching;
 
+        // prevent default handling like copy and magnifier lens
+        if (document.hasFocus()) // allow document to get focus
+            e.preventDefault();
+        
         // must return true so the document will get focus
         return true;
     }
@@ -2398,7 +2416,7 @@ if (isTouchDevice)
 let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
 
 // create the touch gamepad, called automatically by the engine
-if (touchGamepadEnable)
+function createTouchGamepad()
 {
     // touch input internal variables
     touchGamepadButtons = [];
@@ -2532,7 +2550,7 @@ function touchGamepadRender()
  * @namespace Audio
  */
 
-'use strict';
+
 
 /** 
  * Sound Object - Stores a zzfx sound for later use and can be played positionally
@@ -2568,8 +2586,9 @@ class Sound
         if (zzfxSound)
         {
             // generate zzfx sound now for fast playback
-            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0); 
-            this.cachedSamples = zzfxSound && zzfxG(...zzfxSound);
+            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0);
+            this.sampleChannels = [zzfxG(...zzfxSound)];
+            this.sampleRate = zzfxR;
         }
     }
 
@@ -2578,11 +2597,12 @@ class Sound
      *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
      *  @param {Number}  [pitch=1] - How much to scale pitch by (also adjusted by this.randomness)
      *  @param {Number}  [randomnessScale=1] - How much to scale randomness
-     *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+     *  @param {Boolean} [loop=0] - Should the sound loop
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
-    play(pos, volume=1, pitch=1, randomnessScale=1)
+    play(pos, volume=1, pitch=1, randomnessScale=1, loop=0)
     {
-        if (!soundEnable || !this.cachedSamples) return;
+        if (!soundEnable || !this.sampleChannels) return;
 
         let pan;
         if (pos)
@@ -2605,43 +2625,80 @@ class Sound
 
         // play the sound
         const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
-        return playSamples([this.cachedSamples], volume, playbackRate, pan);
+        return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate);
+    }
+
+    /** Stop the last instance of this sound that was played */
+    stop()
+    {
+        if (this.source)
+            this.source.stop();
+        this.source = 0;
     }
 
     /** Play the sound as a note with a semitone offset
      *  @param {Number}  semitoneOffset - How many semitones to offset pitch
      *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
      *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
-     *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
     playNote(semitoneOffset, pos, volume)
     { return this.play(pos, volume, 2**(semitoneOffset/12), 0); }
+
+    /** Get how long this sound is in seconds
+     *  @return {Number} - How long the sound is in seconds (undefined if loading)
+     */
+    getDuration() 
+    { return this.sampleChannels && this.sampleChannels[0].length / this.sampleRate; }
+
+    /** Check if the last instance of this sound is playing
+     *  @return {Boolean} - True if the sound is playing
+     */
+    isPlaying() { return this.source && !this.source.ended; }
+
+    /** Check if sound is loading, for sounds fetched from a url
+     *  @return {Boolean} - True if sound is loading and not ready to play
+     */
+    isLoading() { return !this.sampleChannels; }
 }
 
 /** 
  * 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
+ * @example
+ * // create a sound
+ * const sound_example = new SoundWave('sound.mp3');
+ * 
+ * // play the sound
+ * sound_example.play();
  */
 class SoundWave extends Sound
 {
     /** Create a sound object and cache the wave file for later use
-     *  @param {String} waveFilename - Filename of wave file to load
-     *  @param {Number} [randomness=.05] - How much to randomize frequency each time sound plays
+     *  @param {String} filename - Filename of audio file to load
+     *  @param {Number} [randomness=0] - How much to randomize frequency each time sound plays
      *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
      *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
      */
-    constructor(waveFilename, randomness=.05, range, taper)
+    constructor(filename, randomness=0, range, taper)
     {
         super(0, range, taper);
         this.randomness = randomness;
 
         if (!soundEnable) return;
-        if (!soundWaveDecoderContext)
+        if (!soundDecoderContext)
             soundDecoderContext = new AudioContext;
 
-        fetch(waveFilename)
+        fetch(filename)
         .then(response => response.arrayBuffer())
-        .then(arrayBuffer => soundWaveDecoderContext.decodeAudioData(arrayBuffer))
-        .then(audioBuffer => this.cachedSamples = audioBuffer.getChannelData(0));
+        .then(arrayBuffer => soundDecoderContext.decodeAudioData(arrayBuffer))
+        .then(audioBuffer => 
+        {
+            this.sampleChannels = [];
+            for (let i = audioBuffer.numberOfChannels; i--;)
+                this.sampleChannels[i] = audioBuffer.getChannelData(i);
+            this.sampleRate = audioBuffer.sampleRate;
+        });
     }
 }
 let soundDecoderContext; // audio context used only to decode audio files
@@ -2676,48 +2733,34 @@ let soundDecoderContext; // audio context used only to decode audio files
  * // play the music
  * music_example.play();
  */
-class Music
+class Music extends Sound
 {
     /** Create a music object and cache the zzfx music samples for later use
      *  @param {Array} zzfxMusic - Array of zzfx music parameters
      */
     constructor(zzfxMusic)
     {
-        if (!soundEnable) return;
+        super();
 
-        this.cachedSamples = zzfxM(...zzfxMusic);
+        if (!soundEnable) 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=1] - True if the music should loop when it reaches the end
-     *  @return {AudioBufferSourceNode} - The audio node, can be used to stop sound later
+     *  @param {Boolean} [loop=1] - True if the music should loop
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
     play(volume, loop = 1)
-    {
-        if (!soundEnable) return;
-
-        return this.source = playSamples(this.cachedSamples, volume, 1, 0, loop);
-    }
-
-    /** Stop the music */
-    stop()
-    {
-        if (this.source)
-            this.source.stop();
-        this.source = 0;
-    }
-
-    /** Check if music is playing
-     *  @return {Boolean}
-     */
-    isPlaying() { return this.source; }
+    { return super.play(0, volume, 1, 1, loop); }
 }
 
-/** Play an mp3 or wav audio from a local file or url
+/** Play an mp3, ogg, or wav audio from a local file or url
  *  @param {String}  url - Location of sound file to play
  *  @param {Number}  [volume=1] - How much to scale volume by
- *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
+ *  @param {Boolean} [loop=1] - True if the music should loop
  *  @return {HTMLAudioElement} - The audio element for this sound
  *  @memberof Audio */
 function playAudioFile(url, volume=1, loop=1)
@@ -2781,9 +2824,10 @@ let audioContext;
  *  @param {Number}  [rate=1] - The playback rate to use
  *  @param {Number}  [pan=0] - How much to apply stereo panning
  *  @param {Boolean} [loop=0] - True if the sound should loop when it reaches the end
+ *  @param {Number}  [sampleRate=44100] - Sample rate for the sound
  *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0) 
+function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0, sampleRate=zzfxR) 
 {
     if (!soundEnable) return;
 
@@ -2800,7 +2844,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     }
 
     // create buffer and source
-    const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR), 
+    const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, sampleRate), 
         source = audioContext.createBufferSource();
 
     // copy samples to buffer and setup source
@@ -3059,7 +3103,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
  * @namespace TileCollision
  */
 
-'use strict';
+
 
 /** The tile collision layer array, use setTileCollisionData and getTileCollisionData to access
  *  @type {Array} 
@@ -3412,7 +3456,7 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
  * LittleJS Particle System
  */
 
-'use strict';
+
 
 /**
  * Particle Emitter - Spawns particles with the given settings
@@ -3722,7 +3766,7 @@ class Particle extends EngineObject
  * @namespace Medals
  */
 
-'use strict';
+
 
 /** List of all medals
  *  @type {Array}
@@ -4046,7 +4090,7 @@ class Newgrounds
  * @namespace WebGL
  */
 
-'use strict';
+
 
 /** The WebGL canvas which appears above the main canvas and below the overlay canvas
  *  @type {HTMLCanvasElement}
@@ -4068,7 +4112,7 @@ let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBat
 
 ///////////////////////////////////////////////////////////////////////////////
 
-// Init WebGL, called automatically by the engine
+// Initalize WebGL, called automatically by the engine
 function glInit()
 {
     // create the canvas and tile texture
@@ -4107,6 +4151,48 @@ function glInit()
     glBatchCount = 0;
 }
 
+// Setup render each frame, called automatically by engine
+function glPreRender()
+{
+    // clear and set to same size as main canvas
+    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+    glContext.clear(gl_COLOR_BUFFER_BIT);
+
+    // set up the shader
+    glContext.useProgram(glShader);
+    glContext.activeTexture(gl_TEXTURE0);
+    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
+    glSetBlendMode();
+    
+    // set vertex attributes
+    let offset = 0;
+    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
+    {
+        const location = glContext.getAttribLocation(glShader, name);
+        glContext.enableVertexAttribArray(location);
+        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
+        offset += size*typeSize;
+    }
+    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
+    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
+    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
+    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+
+    // build the transform matrix
+    const sx = 2 * cameraScale / mainCanvas.width;
+    const sy = 2 * cameraScale / mainCanvas.height;
+    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
+        new Float32Array([
+            sx, 0, 0, 0,
+            0, sy, 0, 0,
+            1, 1, -1, 1,
+            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
+        ])
+    );
+}
+
 /** Set the WebGl blend mode, normally you should call setBlendMode instead
  *  @param {Boolean} [additive=0]
  *  @memberof WebGL */
@@ -4186,48 +4272,6 @@ function glCreateTexture(image)
     return texture;
 }
 
-// called automatically by engine before render
-function glPreRender()
-{
-    // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
-    glContext.clear(gl_COLOR_BUFFER_BIT);
-
-    // set up the shader
-    glContext.useProgram(glShader);
-    glContext.activeTexture(gl_TEXTURE0);
-    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
-    glSetBlendMode();
-    
-    // set vertex attributes
-    let offset = 0;
-    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
-    {
-        const location = glContext.getAttribLocation(glShader, name);
-        glContext.enableVertexAttribArray(location);
-        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
-        offset += size*typeSize;
-    }
-    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
-    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
-    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
-    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
-
-    // build the transform matrix
-    const sx = 2 * cameraScale / mainCanvas.width;
-    const sy = 2 * cameraScale / mainCanvas.height;
-    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
-        new Float32Array([
-            sx, 0, 0, 0,
-            0, sy, 0, 0,
-            1, 1, -1, 1,
-            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
-        ])
-    );
-}
-
 /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
  *  @memberof WebGL */
 function glFlush()
@@ -4485,7 +4529,7 @@ gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTEX_BYTE_STRIDE;
  * @namespace Engine
  */
 
-'use strict';
+
 
 /** Name of engine
  *  @type {String}
@@ -4497,7 +4541,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.7.12';
+const engineVersion = '1.7.21';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -4567,11 +4611,13 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
 
         // setup html
-        const styleBody = 'margin:0;overflow:hidden;' + // fill the window
-            'background:#000;' +        // set background color
-            'touch-action:none;' +      // prevent mobile pinch to resize
-            'user-select:none;' +       // prevent mobile hold to select
-            '-webkit-user-select:none'; // compatibility for ios
+        const styleBody = 
+            'margin:0;overflow:hidden;' + // fill the window
+            'background:#000;' +          // set background color
+            'touch-action:none;' +        // prevent mobile pinch to resize
+            'user-select:none;' +         // prevent mobile hold to select
+            '-webkit-user-select:none;' + // compatibility for ios
+            '-webkit-touch-callout:none'; // compatibility for ios
         document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
         mainContext = mainCanvas.getContext('2d');
@@ -4585,7 +4631,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         overlayContext = overlayCanvas.getContext('2d');
 
         // set canvas style
-        const styleCanvas = 'position:absolute;' +
+        const styleCanvas = 
+            'position:absolute;' +                               // position canvas              
             'top:50%;left:50%;transform:translate(-50%,-50%);' + // center the canvas
             (canvasPixelated?'image-rendering:pixelated':'');    // set pixelated rendering
         (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;