littlejsengine 1.9.6 → 1.9.8

package/plugins/newgrounds.js

@@ -0,0 +1,169 @@
+/** 
+ * LittleJS Newgrounds API
+ * - NewgroundsMedal extends Medal with Newgrounds API functionality
+ * - Call newgroundsInit to enable Newgrounds functionality
+ * - Uses CryptoJS for encryption if optional cipher is provided
+ * - Keeps connection alive and logs views
+ * - Functions to interact with scoreboards
+ * - Functions to unlock medals
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Newgrounds medal auto unlocks in newgronds API */
+class NewgroundsMedal extends Medal
+{
+    /** Create a medal object and adds it to the list of medals */
+    constructor(id, name, description, icon, src)
+    { super(id, name, description, icon, src); }
+
+    /** Unlocks a medal if not already unlocked */
+    unlock()
+    {
+        super.unlock();
+        newgrounds && newgrounds.unlockMedal(this.id);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+ 
+/** Global Newgrounds object */
+let newgrounds;
+
+/** This can used to enable Newgrounds functionality
+ *  @param {Number} app_id   - The newgrounds App ID
+ *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+ *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher
+ *  @memberof Medals */
+function newgroundsInit(app_id, cipher, cryptoJS)
+{ newgrounds = new Newgrounds(app_id, cipher, cryptoJS); }
+
+/** 
+ * Newgrounds API wrapper object
+ * @example
+ * // create a newgrounds object, replace the app id with your own
+ * const app_id = '52123:1ZuSTQ7l';
+ * newgrounds = new Newgrounds(app_id);
+ */
+class Newgrounds
+{
+    /** Create a newgrounds object
+     *  @param {String} app_id   - The newgrounds App ID
+     *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+     *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher */
+    constructor(app_id, cipher, cryptoJS)
+    {
+        ASSERT(!newgrounds, 'there can only be one newgrounds object');
+        ASSERT(!cipher || cryptoJS, 'must provide cryptojs if there is a cipher');
+
+        this.app_id = app_id;
+        this.cipher = cipher;
+        this.cryptoJS = cryptoJS;
+        this.host = location ? location.hostname : '';
+
+        // get session id from url search params
+        const url = new URL(location.href);
+        this.session_id = url.searchParams.get('ngio_session_id');
+
+        if (!this.session_id)
+            return; // only use newgrounds when logged in
+
+        // get medals
+        const medalsResult = this.call('Medal.getList');
+        this.medals = medalsResult ? medalsResult.result.data['medals'] : [];
+        debugMedals && console.log(this.medals);
+        for (const newgroundsMedal of this.medals)
+        {
+            const medal = medals[newgroundsMedal['id']];
+            if (medal)
+            {
+                // copy newgrounds medal data
+                medal.image =       new Image;
+                medal.image.src =   newgroundsMedal['icon'];
+                medal.name =        newgroundsMedal['name'];
+                medal.description = newgroundsMedal['description'];
+                medal.unlocked =    newgroundsMedal['unlocked'];
+                medal.difficulty =  newgroundsMedal['difficulty'];
+                medal.value =       newgroundsMedal['value'];
+
+                if (medal.value) // add value to description
+                    medal.description = medal.description + ` (${ medal.value })`;
+            }
+        }
+    
+        // get scoreboards
+        const scoreboardResult = this.call('ScoreBoard.getBoards');
+        this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
+        debugMedals && console.log(this.scoreboards);
+
+        // keep the session alive with a ping every 5 minutes
+        const keepAliveMS = 5 * 60 * 1e3;
+        setInterval(()=>this.call('Gateway.ping', 0, true), keepAliveMS);
+    }
+
+    /** Send message to unlock a medal by id
+     * @param {Number} id - The medal id */
+    unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, true); }
+
+    /** Send message to post score
+     * @param {Number} id    - The scoreboard id
+     * @param {Number} value - The score value */
+    postScore(id, value) { return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, true); }
+
+    /** Get scores from a scoreboard
+     * @param {Number} id       - The scoreboard id
+     * @param {String} [user]   - A user's id or name
+     * @param {Number} [social] - If true, only social scores will be loaded
+     * @param {Number} [skip]   - Number of scores to skip before start
+     * @param {Number} [limit]  - Number of scores to include in the list
+     * @return {Object}         - The response JSON object
+     */
+    getScores(id, user, social=0, skip=0, limit=10)
+    { return this.call('ScoreBoard.getScores', {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit}); }
+
+    /** Send message to log a view */
+    logView() { return this.call('App.logView', {'host':this.host}, true); }
+
+    /** Send a message to call a component of the Newgrounds API
+     * @param {String}  component    - Name of the component
+     * @param {Object}  [parameters] - Parameters to use for call
+     * @param {Boolean} [async]      - If true, don't wait for response before continuing
+     * @return {Object}              - The response JSON object
+     */
+    call(component, parameters, async=false)
+    {
+        const call = {'component':component, 'parameters':parameters};
+        if (this.cipher)
+        {
+            // encrypt using AES-128 Base64 with cryptoJS
+            const cryptoJS = this.cryptoJS;
+            const aesKey = cryptoJS['enc']['Base64']['parse'](this.cipher);
+            const iv = cryptoJS['lib']['WordArray']['random'](16);
+            const encrypted = cryptoJS['AES']['encrypt'](JSON.stringify(call), aesKey, {'iv':iv});
+            call['secure'] = cryptoJS['enc']['Base64']['stringify'](iv.concat(encrypted['ciphertext']));
+            call['parameters'] = 0;
+        }
+
+        // build the input object
+        const input =
+        {
+            'app_id':     this.app_id,
+            'session_id': this.session_id,
+            'call':       call
+        };
+
+        // build post data
+        const formData = new FormData();
+        formData.append('input', JSON.stringify(input));
+        
+        // send post data
+        const xmlHttp = new XMLHttpRequest();
+        const url = 'https://newgrounds.io/gateway_v3.php';
+        xmlHttp.open('POST', url, !debugMedals && async);
+        xmlHttp.send(formData);
+        debugMedals && console.log(xmlHttp.responseText);
+        return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
+    }
+}

package/plugins/postProcess.js

@@ -0,0 +1,101 @@
+/**
+ * LittleJS Post Processing Plugin
+ * - Supports shadertoy style post processing shaders
+ * - call glInitPostProcess
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+// post processing - can be enabled to pass other canvases through a final shader
+
+let glPostShader, glPostTexture, glPostIncludeOverlay;
+
+/** Set up a post processing shader
+ *  @param {String} shaderCode
+ *  @param {Boolean} includeOverlay
+ *  @memberof WebGL */
+function initPostProcess(shaderCode, includeOverlay=false)
+{
+    ASSERT(!glPostShader, 'can only have 1 post effects shader');
+    if (headlessMode) return;
+    
+    if (!shaderCode) // default shader pass through
+        shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
+
+    // create the shader
+    glPostShader = glCreateProgram(
+        '#version 300 es\n' +            // specify GLSL ES version
+        'precision highp float;'+        // use highp for better accuracy
+        'in vec2 p;'+                    // position
+        'void main(){'+                  // shader entry point
+        'gl_Position=vec4(p+p-1.,1,1);'+ // set position
+        '}'                              // end of shader
+        ,
+        '#version 300 es\n' +            // specify GLSL ES version
+        'precision highp float;'+        // use highp for better accuracy
+        'uniform sampler2D iChannel0;'+  // input texture
+        'uniform vec3 iResolution;'+     // size of output texture
+        'uniform float iTime;'+          // time
+        'out vec4 c;'+                   // out color
+        '\n' + shaderCode + '\n'+        // insert custom shader code
+        'void main(){'+                  // shader entry point
+        'mainImage(c,gl_FragCoord.xy);'+ // call post process function
+        'c.a=1.;'+                       // always use full alpha
+        '}'                              // end of shader
+    );
+
+    // create buffer and texture
+    glPostTexture = glCreateTexture(undefined);
+    glPostIncludeOverlay = includeOverlay;
+
+    // hide the original 2d canvas
+    mainCanvas.style.visibility = 'hidden';
+    if (glPostIncludeOverlay)
+        overlayCanvas.style.visibility = 'hidden';
+
+    // Render the post processing shader, called automatically by the engine
+    addPluginRender(function()
+    {
+        if (headlessMode) return;
+        
+        // prepare to render post process shader
+        if (glEnable)
+        {
+            glFlush(); // clear out the buffer
+            mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
+        }
+        else
+        {
+            // set the viewport
+            glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+        }
+
+        // copy overlay canvas so it will be included in post processing
+        glPostIncludeOverlay && mainContext.drawImage(overlayCanvas, 0, 0);
+
+        // setup shader program to draw one triangle
+        glContext.useProgram(glPostShader);
+        glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
+        glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, 1);
+        glContext.disable(gl_BLEND);
+
+        // set textures, pass in the 2d canvas and gl canvas in separate texture channels
+        glContext.activeTexture(gl_TEXTURE0);
+        glContext.bindTexture(gl_TEXTURE_2D, glPostTexture);
+        glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, mainCanvas);
+
+        // set vertex position attribute
+        const vertexByteStride = 8;
+        const pLocation = glContext.getAttribLocation(glPostShader, 'p');
+        glContext.enableVertexAttribArray(pLocation);
+        glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, false, vertexByteStride, 0);
+
+        // set uniforms and draw
+        const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
+        glContext.uniform1i(uniformLocation('iChannel0'), 0);
+        glContext.uniform1f(uniformLocation('iTime'), time);
+        glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
+        glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 4);
+    });
+}

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.9.6';
+const engineVersion = '1.9.8';
 
 /** Frames per second to update
  *  @type {Number}
@@ -84,6 +84,22 @@ function setPaused(isPaused) { paused = isPaused; }
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
 
 ///////////////////////////////////////////////////////////////////////////////
+// plugin hooks
+
+const pluginUpdateList = [], pluginRenderList = [];
+
+/** Add a new update function for a plugin
+ *  @param {Function} updateFunction
+ *  @memberof Engine */
+function addPluginUpdate(updateFunction) { pluginUpdateList.push(updateFunction); }
+
+/** Add a new render function for a plugin
+ *  @param {Function} renderFunction
+ *  @memberof Engine */
+function addPluginRender(renderFunction) { pluginRenderList.push(renderFunction); }
+
+///////////////////////////////////////////////////////////////////////////////
+// Main engine functions
 
 /** Startup LittleJS engine with your callback functions
  *  @param {Function} gameInit       - Called once after the engine starts up, setup the game
@@ -159,6 +175,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
                 // update game and objects
                 inputUpdate();
                 gameUpdate();
+                pluginUpdateList.forEach(f=>f());
                 engineObjectsUpdate();
 
                 // do post update
@@ -180,8 +197,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             for (const o of engineObjects)
                 o.destroyed || o.render();
             gameRenderPost();
-            glRenderPostProcess();
-            medalsRender();
+            pluginRenderList.forEach(f=>f());
             touchGamepadRender();
             debugRender();
             glCopyToContext(mainContext);
@@ -263,6 +279,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
     // init stuff and start engine
     inputInit();
+    audioInit();
     debugInit();
     glInit();
 
@@ -470,21 +487,23 @@ function drawEngineSplashScreen(t)
     x.setLineDash([99*p2,99]);
 
     // cab top
-    rect(7,17,18,-8,color(2,2));
-    rect(7,9,18,4,color(2,3));
-    rect(25,9,8,8,color(2,1));
-    rect(25,9,-18,8);
-    rect(25,9,8,8);
+    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,17,7,22,color());
-    rect(11,40,14,-23,color(1,1));
-    rect(11,17,14,17,color(1,2));
-    rect(11,17,14,9,color(1,3));
-    rect(15,31,6,-9,color(2,2));
-    circle(15,23,5,0,PI/2,color(2,4),1);
-    rect(25,17,-14,23);
-    rect(21,22,-6,9);
+    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));
@@ -492,16 +511,16 @@ function drawEngineSplashScreen(t)
     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)
+    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--;)

package/src/engineAudio.js

@@ -11,6 +11,32 @@
 
 'use strict';
 
+/** Audio context used by the engine
+ *  @type {AudioContext}
+ *  @memberof Audio */
+let audioContext;
+
+/** Master gain node for all audio to pass through
+ *  @type {GainNode}
+ *  @memberof Audio */
+let audioGainNode;
+
+function audioInit()
+{
+    if (!soundEnable || headlessMode) return;
+    
+    // create audio context
+    audioContext = new AudioContext;
+
+    // create and connect gain node
+    // (createGain is more widely spported then GainNode construtor)
+    audioGainNode = audioContext.createGain();
+    audioGainNode.connect(audioContext.destination);
+    setSoundVolume(soundVolume); // update gain volume
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
 /** 
  * Sound Object - Stores a sound for later use and can be played positionally
  * 
@@ -62,7 +88,8 @@ class Sound
      */
     play(pos, volume=1, pitch=1, randomnessScale=1, loop=false)
     {
-        if (!soundEnable || !this.sampleChannels || headlessMode) return;
+        if (!soundEnable || headlessMode) return;
+        if (!this.sampleChannels) return;
 
         let pan;
         if (pos)
@@ -85,7 +112,17 @@ class Sound
 
         // play the sound
         const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
-        return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate);
+        this.gainNode = audioContext.createGain();
+        return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate, this.gainNode);
+    }
+
+    /** Set the sound volume
+     *  @param {Number}  [volume] - How much to scale volume by
+     */
+    setVolume(volume=1)
+    {
+        if (this.gainNode)
+            this.gainNode.gain.value = volume;
     }
 
     /** Stop the last instance of this sound that was played */
@@ -139,16 +176,14 @@ class SoundWave extends Sound
      *  @param {Number} [randomness] - 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
+     *  @param {Function} [onloadCallback] - callback function to call when sound is loaded
      */
-    constructor(filename, randomness=0, range, taper)
+    constructor(filename, randomness=0, range, taper, onloadCallback)
     {
         super(undefined, range, taper);
-        this.randomness = randomness;
-
         if (!soundEnable || headlessMode) return;
-        if (!audioContext)
-            audioContext = new AudioContext; // create audio context
 
+        this.randomness = randomness;
         fetch(filename)
         .then(response => response.arrayBuffer())
         .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
@@ -158,10 +193,23 @@ class SoundWave extends Sound
             for (let i = audioBuffer.numberOfChannels; i--;)
                 this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
             this.sampleRate = audioBuffer.sampleRate;
-        });
+        }).then(() => onloadCallback && onloadCallback(this));
     }
 }
 
+/** Play an mp3, ogg, or wav audio from a local file or url
+ *  @param {String}  filename - Location of sound file to play
+ *  @param {Number}  [volume] - How much to scale volume by
+ *  @param {Boolean} [loop] - True if the music should loop
+ *  @return {SoundWave} - The sound object for this file
+ *  @memberof Audio */
+function playAudioFile(filename, volume=1, loop=false)
+{
+    if (!soundEnable || headlessMode) return;
+
+    return new SoundWave(filename,0,0,0, s=>s.play(undefined, volume, 1, 1, loop));
+}
+
 /**
  * Music Object - Stores a zzfx music track for later use
  * 
@@ -216,23 +264,6 @@ class Music extends Sound
     { return super.play(undefined, volume, 1, 1, loop); }
 }
 
-/** Play an mp3, ogg, or wav audio from a local file or url
- *  @param {String}  filename - Location of sound file to play
- *  @param {Number}  [volume] - How much to scale volume by
- *  @param {Boolean} [loop] - True if the music should loop
- *  @return {HTMLAudioElement} - The audio element for this sound
- *  @memberof Audio */
-function playAudioFile(filename, volume=1, loop=false)
-{
-    if (!soundEnable || headlessMode) return;
-
-    const audio = new Audio(filename);
-    audio.volume = soundVolume * volume;
-    audio.loop = loop;
-    audio.play();
-    return audio;
-}
-
 /** Speak text with passed in settings
  *  @param {String} text - The text to speak
  *  @param {String} [language] - The language/accent to use (examples: en, it, ru, ja, zh)
@@ -243,7 +274,8 @@ function playAudioFile(filename, volume=1, loop=false)
  *  @memberof Audio */
 function speak(text, language='', volume=1, rate=1, pitch=1)
 {
-    if (!soundEnable || !speechSynthesis || headlessMode) return;
+    if (!soundEnable || headlessMode) return;
+    if (!speechSynthesis) return;
 
     // common languages (not supported by all browsers)
     // en - english,  it - italian, fr - french,  de - german, es - spanish
@@ -273,30 +305,23 @@ function getNoteFrequency(semitoneOffset, rootFrequency=220)
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Audio context used by the engine
- *  @type {AudioContext}
- *  @memberof Audio */
-let audioContext;
-
-/** Keep track if audio was suspended when last sound was played
- *  @type {Boolean}
- *  @memberof Audio */
+// internal tracking if audio was suspended when last sound was played
+// allows first suspended sound to play when audio is resumed
 let audioSuspended = false;
 
 /** Play cached audio samples with given settings
- *  @param {Array}   sampleChannels - Array of arrays of samples to play (for stereo playback)
- *  @param {Number}  [volume] - How much to scale volume by
- *  @param {Number}  [rate] - The playback rate to use
- *  @param {Number}  [pan] - How much to apply stereo panning
- *  @param {Boolean} [loop] - True if the sound should loop when it reaches the end
- *  @param {Number}  [sampleRate=44100] - Sample rate for the sound
+ *  @param {Array}    sampleChannels - Array of arrays of samples to play (for stereo playback)
+ *  @param {Number}   [volume] - How much to scale volume by
+ *  @param {Number}   [rate] - The playback rate to use
+ *  @param {Number}   [pan] - How much to apply stereo panning
+ *  @param {Boolean}  [loop] - True if the sound should loop when it reaches the end
+ *  @param {Number}   [sampleRate=44100] - Sample rate for the sound
+ *  @param {GainNode} [gainNode] - Optional gain node for volume control while playing
  *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=zzfxR) 
+function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=zzfxR, gainNode) 
 {
     if (!soundEnable || headlessMode) return;
-    if (!audioContext)
-        audioContext = new AudioContext; // create audio context
 
     // prevent sounds from building up if they can't be played
     const audioWasSuspended = audioSuspended;
@@ -320,10 +345,10 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
     source.playbackRate.value = rate;
     source.loop = loop;
 
-    // create and connect gain node (createGain is more widely spported then GainNode construtor)
-    const gainNode = audioContext.createGain();
-    gainNode.gain.value = soundVolume*volume;
-    gainNode.connect(audioContext.destination);
+    // create and connect gain node
+    gainNode = gainNode || audioContext.createGain();
+    gainNode.gain.value = volume;
+    gainNode.connect(audioGainNode);
 
     // connect source to stereo panner and gain
     source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)})).connect(gainNode);