littlejsengine 1.14.16 → 1.14.19

package/plugins/postProcess.js

@@ -25,80 +25,97 @@ class PostProcessPlugin
     /** Create global post processing shader
     *  @param {string} shaderCode
     *  @param {boolean} [includeOverlay]
+    *  @param {boolean} [includeMainCanvas]
      *  @example
      *  // create the post process plugin object
      *  new PostProcessPlugin(shaderCode);
      */
-    constructor(shaderCode, includeOverlay=false)
+    constructor(shaderCode, includeOverlay=false, includeMainCanvas=true)
     {
         ASSERT(!postProcess, 'Post process already initialized');
         postProcess = this;
 
-        if (headlessMode) return;
-
-        if (!glEnable)
-        {
-            console.warn('PostProcessPlugin: WebGL not enabled!');
-            return;
-        }
-
         if (!shaderCode) // default shader pass through
             shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
 
         /** @property {WebGLProgram} - Shader for post processing */
-        this.shader = 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
-        );
+        this.shader = undefined;
 
         /** @property {WebGLTexture} - Texture for post processing */
-        this.texture = glCreateTexture();
+        this.texture = undefined;
 
-        /** @property {boolean} - Should overlay canvas be included in post processing */
-        this.includeOverlay = includeOverlay;
+        // setup the post processing plugin
+        initPostProcess();
+        engineAddPlugin(undefined, postProcessRender, postProcessContextLost, postProcessContextRestored);
 
-        // Render the post processing shader, called automatically by the engine
-        engineAddPlugin(undefined, postProcessRender);
-        function postProcessRender()
+        function initPostProcess()
         {
             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
+
+            if (!glEnable)
             {
-                // set the viewport
-                glContext.viewport(0, 0, glCanvas.width = drawCanvas.width, glCanvas.height = drawCanvas.height);
+                console.warn('PostProcessPlugin: WebGL not enabled!');
+                return;
             }
 
-            if (postProcess.includeOverlay)
+            // create resources
+            postProcess.texture = glCreateTexture();
+            postProcess.shader = 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
+            );
+        }
+        function postProcessContextLost()
+        {
+            postProcess.shader = undefined;
+            postProcess.texture = undefined;
+            LOG('PostProcessPlugin: WebGL context lost');
+        }
+        function postProcessContextRestored()
+        {
+            initPostProcess();
+            LOG('PostProcessPlugin: WebGL context restored');
+        }
+        function postProcessRender()
+        {
+            if (headlessMode) return;
+
+            if (!glEnable)
+                return;
+            
+            // clear out the buffer
+            glFlush();
+            
+            if (includeMainCanvas || includeOverlay)
             {
-                // copy overlay canvas so it will be included in post processing
-                mainContext.drawImage(overlayCanvas, 0, 0);
-                overlayCanvas.width |= 0;
+                // copy WebGL to the main canvas
+                mainContext.drawImage(glCanvas, 0, 0);
+
+                if (includeOverlay)
+                {
+                    // copy overlay canvas so it will be included in post processing
+                    mainContext.drawImage(overlayCanvas, 0, 0);
+                    overlayCanvas.width |= 0; // clear overlay canvas
+                }
             }
 
-            // setup shader program to draw one triangle
+            // setup shader program to draw a quad
             glContext.useProgram(postProcess.shader);
             glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
             glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, 1);
@@ -107,7 +124,10 @@ class PostProcessPlugin
             // set textures, pass in the 2d canvas and gl canvas in separate texture channels
             glContext.activeTexture(glContext.TEXTURE0);
             glContext.bindTexture(glContext.TEXTURE_2D, postProcess.texture);
-            glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, mainCanvas);
+            if (includeMainCanvas || includeOverlay)
+            {
+                glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, mainCanvas);
+            }
 
             // set vertex position attribute
             const vertexByteStride = 8;

package/plugins/uiSystem.js

@@ -48,6 +48,8 @@ class UISystemPlugin
         this.defaultHoverColor = hsl(0,0,.9);
         /** @property {Color} - Default color for disabled UI elements */
         this.defaultDisabledColor = hsl(0,0,.3);
+        /** @property {Color} - Uses a gradient fill combined with color */
+        this.defaultGradientColor = undefined;
         /** @property {number} - Default line width for UI elements */
         this.defaultLineWidth = 4;
         /** @property {number} - Default rounded rect corner radius for UI elements */
@@ -55,7 +57,7 @@ class UISystemPlugin
         /** @property {number} - Default scale to use for fitting text to object */
         this.defaultTextScale = .8;
         /** @property {string} - Default font for UI elements */
-        this.defaultFont = 'arial';
+        this.defaultFont = fontDefault;
         /** @property {Sound} - Default sound when interactive UI element is pressed */
         this.defaultSoundPress = undefined;
         /** @property {Sound} - Default sound when interactive UI element is released */
@@ -72,7 +74,9 @@ class UISystemPlugin
         this.hoverObject = undefined;
         /** @property {UIObject} - Hover object at start of update */
         this.lastHoverObject = undefined;
-            
+        /** @property {number} - If set ui coords will be renormalized to this canvas height */
+        this.nativeHeight = 0;
+
         engineAddPlugin(uiUpdate, uiRender);
 
         // setup recursive update and render
@@ -112,6 +116,17 @@ class UISystemPlugin
         }
         function uiRender()
         {
+            const context = uiSystem.uiContext;
+            context.save();
+            if (uiSystem.nativeHeight)
+            {
+                // convert to native height
+                const s = mainCanvasSize.y / uiSystem.nativeHeight;
+                context.translate(-s*mainCanvasSize.x/2,0);
+                context.scale(s,s);
+                context.translate(mainCanvasSize.x/2/s,0);
+            }
+
             function renderObject(o)
             {
                 if (!o.visible)
@@ -123,6 +138,7 @@ class UISystemPlugin
                     renderObject(c);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || renderObject(o));
+            context.restore();
         }
     }
 
@@ -132,8 +148,9 @@ class UISystemPlugin
     *  @param {Color}   [color=uiSystem.defaultColor]
     *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
-    *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius] */
-    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius)
+    *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius]
+    *  @param {Color}   [gradientColor=uiSystem.defaultGradientColor] */
+    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius, gradientColor=uiSystem.defaultGradientColor)
     {
         ASSERT(isVector2(pos), 'pos must be a vec2');
         ASSERT(isVector2(size), 'size must be a vec2');
@@ -143,7 +160,18 @@ class UISystemPlugin
         ASSERT(isNumber(cornerRadius), 'cornerRadius must be a number');
         
         const context = uiSystem.uiContext;
-        context.fillStyle = color.toString();
+        if (gradientColor)
+        {
+            const g = context.createLinearGradient(
+                pos.x, pos.y-size.y/2, pos.x, pos.y+size.y/2);
+            const c = color.toString();
+            g.addColorStop(0, c);
+            g.addColorStop(.5, gradientColor.toString());
+            g.addColorStop(1, c);
+            context.fillStyle = g;
+        }
+        else
+            context.fillStyle = color.toString();
         context.beginPath();
         if (cornerRadius && context['roundRect'])
             context['roundRect'](pos.x-size.x/2, pos.y-size.y/2, size.x, size.y, cornerRadius);
@@ -200,10 +228,11 @@ class UISystemPlugin
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
     *  @param {string}  [align]
     *  @param {string}  [font=uiSystem.defaultFont]
+    *  @param {string}  [fontStyle]
     *  @param {boolean} [applyMaxWidth=true] */
-    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, applyMaxWidth=true)
+    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, fontStyle='', applyMaxWidth=true)
     {
-        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, applyMaxWidth ? size.x : undefined, uiSystem.uiContext);
+        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, uiSystem.uiContext);
     }
 
     /**
@@ -264,17 +293,21 @@ class UIObject
         /** @property {boolean} - Is this object disabled? */
         this.disabled = false;
         /** @property {Color} - Color for text */
-        this.textColor = uiSystem.defaultTextColor.copy()
+        this.textColor = uiSystem.defaultTextColor.copy();
         /** @property {Color} - Color used when hovering over the object */
-        this.hoverColor = uiSystem.defaultHoverColor.copy()
+        this.hoverColor = uiSystem.defaultHoverColor.copy();
         /** @property {Color} - Color for line drawing */
-        this.lineColor = uiSystem.defaultLineColor.copy()
+        this.lineColor = uiSystem.defaultLineColor.copy();
+        /** @property {Color} - Uses a gradient fill combined with color */
+        this.gradientColor = uiSystem.defaultGradientColor ? uiSystem.defaultGradientColor.copy() : undefined;
         /** @property {number} - Width for line drawing */
         this.lineWidth = uiSystem.defaultLineWidth;
         /** @property {number} - Corner radius for rounded rects */
         this.cornerRadius = uiSystem.defaultCornerRadius;
         /** @property {string} - Font for this objecct */
         this.font = uiSystem.defaultFont;
+        /** @property {string} - Font style for this object or undefined */
+        this.fontStyle = undefined;
         /** @property {number} - Override for text width */
         this.textWidth = undefined;
         /** @property {number} - Override for text height */
@@ -299,6 +332,8 @@ class UIObject
         this.interactive = false;
         /** @property {boolean} - Activate when dragged over with mouse held down */
         this.dragActivate = false;
+        /** @property {boolean} - True if this can be a hover object */
+        this.canBeHover = true;
         uiSystem.uiObjects.push(this);
     }
 
@@ -322,6 +357,26 @@ class UIObject
         child.parent = undefined;
     }
 
+    /** Check if the mouse is overlapping a box in screen space
+     *  @return {boolean} - True if overlapping
+     */
+    isMouseOverlapping()
+    {
+        const size = !isTouchDevice ? this.size :
+                this.size.add(vec2(this.extraTouchSize || 0));
+        if (!uiSystem.nativeHeight)
+            return isOverlapping(this.pos, size, mousePosScreen);
+
+        const s = mainCanvasSize.y / uiSystem.nativeHeight;
+        const sInv = 1/s;
+        let pos = mousePosScreen.copy();
+        pos.x += s*mainCanvasSize.x/2;
+        pos.x *= sInv;
+        pos.y *= sInv;
+        pos.x -= sInv*mainCanvasSize.x/2;
+        return isOverlapping(this.pos, size, pos);
+    }
+
     /** Update the object, called automatically by plugin once each frame */
     update()
     {
@@ -329,13 +384,10 @@ class UIObject
         const isActive = this.isActiveObject();
         const mouseDown = mouseIsDown(0);
         const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
-        if (!uiSystem.hoverObject)
+        if (this.canBeHover)
         if (mousePress || isActive || (!mouseDown && !isTouchDevice))
-        {
-            const size = this.size.add(vec2(isTouchDevice && this.extraTouchSize || 0));
-            if (isOverlapping(this.pos, size, mousePosScreen))
-                uiSystem.hoverObject = this;
-        }
+        if (!uiSystem.hoverObject && this.isMouseOverlapping())
+            uiSystem.hoverObject = this;
         if (this.isHoverObject())
         {
             if (!this.disabled)
@@ -460,11 +512,13 @@ class UIText extends UIObject
 
         // make text not outlined by default
         this.lineWidth = 0;
+        // text can not be a hover object by default
+        this.canBeHover = false;
     }
     render()
     {
         const textSize = this.getTextSize();
-        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
+        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font, this.fontStyle);
     }
 }
 
@@ -530,7 +584,7 @@ class UIButton extends UIObject
 
         // set properties
         this.text = text;
-        this.color = color.copy()
+        this.color = color.copy();
         this.interactive = true;
     }
     render()
@@ -540,7 +594,7 @@ class UIButton extends UIObject
         // draw the text scaled to fit
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
-            this.textColor, 0, undefined, this.align, this.font);
+            this.textColor, 0, undefined, this.align, this.font, this.fontStyle);
     }
 }
 
@@ -594,7 +648,7 @@ class UICheckbox extends UIObject
         const textSize = this.getTextSize();
         const pos = this.pos.add(vec2(this.size.x,0));
         uiSystem.drawText(this.text, pos, textSize, 
-            this.textColor, 0, undefined, 'left', this.font, false);
+            this.textColor, 0, undefined, 'left', this.font, this.fontStyle, false);
     }
 }
 
@@ -672,13 +726,12 @@ class UIScrollbar extends UIObject
         const handlePos = isHorizontal ? 
             vec2(lerp(p1, p2, this.value), this.pos.y) :
             vec2(this.pos.x, lerp(p2, p1, this.value))
-        const handleColor = this.disabled ? this.disabledColor : 
-            this.interactive && this.isActiveObject() ? this.color : this.handleColor;
+        const handleColor = this.disabled ? this.disabledColor : this.handleColor;
         uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
 
         // draw the text scaled to fit on the scrollbar
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
-            this.textColor, 0, undefined, this.align, this.font);
+            this.textColor, 0, undefined, this.align, this.font, this.fontStyle);
     }
 }

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.16';
+const engineVersion = '1.14.19';
 
 /** Frames per second to update
  *  @type {number}
@@ -91,7 +91,17 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
 ///////////////////////////////////////////////////////////////////////////////
 // plugin hooks
 
-const pluginUpdateList = [], pluginRenderList = [];
+const pluginList = [];
+class EnginePlugin
+{
+    constructor(update, render, glContextLost, glContextRestored)
+    {
+        this.update = update;
+        this.render = render;
+        this.glContextLost = glContextLost;
+        this.glContextRestored = glContextRestored;
+    }
+}
 
 /**
  * @callback PluginCallback - Update or render function for a plugin
@@ -99,15 +109,21 @@ const pluginUpdateList = [], pluginRenderList = [];
  */
 
 /** Add a new update function for a plugin
- *  @param {PluginCallback} [updateFunction]
- *  @param {PluginCallback} [renderFunction]
+ *  @param {PluginCallback} [update]
+ *  @param {PluginCallback} [render]
+ *  @param {PluginCallback} [glContextLost]
+ *  @param {PluginCallback} [glContextRestored]
  *  @memberof Engine */
-function engineAddPlugin(updateFunction, renderFunction)
+function engineAddPlugin(update, render, glContextLost, glContextRestored)
 {
-    ASSERT(!pluginUpdateList.includes(updateFunction));
-    ASSERT(!pluginRenderList.includes(renderFunction));
-    updateFunction && pluginUpdateList.push(updateFunction);
-    renderFunction && pluginRenderList.push(renderFunction);
+    // make sure plugin functions are unique
+    ASSERT(!pluginList.find(p=>
+        p.update === update && p.render === render &&
+        p.glContextLost === glContextLost &&
+        p.glContextRestored === glContextRestored));
+
+    const plugin = new EnginePlugin(update, render, glContextLost, glContextRestored);
+    pluginList.push(plugin);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -192,7 +208,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             wasUpdated = true;
             updateCanvas();
             inputUpdate();
-            pluginUpdateList.forEach(f=>f());
+            pluginList.forEach(plugin=>plugin.update?.());
 
             // update object transforms even when paused
             for (const o of engineObjects)
@@ -225,7 +241,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 updateCanvas();
                 inputUpdate();
                 gameUpdate();
-                pluginUpdateList.forEach(f=>f());
+                pluginList.forEach(plugin=>plugin.update?.());
                 engineObjectsUpdate();
 
                 // do post update
@@ -259,7 +275,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             for (const o of engineObjects)
                 o.destroyed || o.render();
             gameRenderPost();
-            pluginRenderList.forEach(f=>f());
+            pluginList.forEach(plugin=>plugin.render?.());
             touchGamepadRender();
             debugRender();
             glFlush();
@@ -386,7 +402,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             image.onerror = image.onload = ()=>
             {
                 const textureInfo = new TextureInfo(image);
-                textureInfo.createWebGLTexture();
                 textureInfos[textureIndex] = textureInfo;
                 resolve();
             }
@@ -402,7 +417,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         {
             const textureInfo = new TextureInfo(new Image);
             textureInfos[0] = textureInfo;
-            textureInfo.createWebGLTexture();
             resolve();
         }));
     }

package/src/engineAudio.js

@@ -324,8 +324,16 @@ class SoundInstance
             this.stop();
         this.gainNode = audioContext.createGain();
         this.source = playSamples(this.sound.sampleChannels, this.volume, this.rate, this.pan, this.loop, this.sound.sampleRate, this.gainNode, offset, this.onendedCallback);
-        this.startTime = audioContext.currentTime - offset;
-        this.pausedTime = undefined;
+        if (this.source)
+        {
+            this.startTime = audioContext.currentTime - offset;
+            this.pausedTime = undefined;
+        }
+        else
+        {
+            this.startTime = undefined;
+            this.pausedTime = 0;
+        }
     }
 
     /** Set the volume of this sound instance
@@ -474,12 +482,19 @@ function getNoteFrequency(semitoneOffset, rootFrequency=220)
  *  @param {GainNode} [gainNode] - Optional gain node for volume control while playing
  *  @param {number}   [offset] - Offset in seconds to start playback from
  *  @param {AudioEndedCallback} [onended] - Callback for when the sound ends
- *  @return {AudioBufferSourceNode} - The audio node of the sound played
+ *  @return {AudioBufferSourceNode} - The source node of the sound played, may be undefined if play fails
  *  @memberof Audio */
 function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=audioDefaultSampleRate, gainNode, offset=0, onended)
 {
     if (!soundEnable || headlessMode) return;
 
+    if (!audioIsRunning())
+    {
+        // fix stalled audio, this sound won't be able to play
+        audioContext.resume();
+        return;
+    }
+
     // create buffer and source
     const channelCount = sampleChannels.length;
     const sampleLength = sampleChannels[0].length;
@@ -505,14 +520,9 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
     if (onended)
         source.addEventListener('ended', ()=> onended(source));
 
+    // play and return sound
     const startOffset = offset * rate;
-    if (!audioIsRunning())
-    {
-        // fix stalled audio and start
-        audioContext.resume().then(()=>source.start(0, startOffset));
-    }
-    else
-        source.start(0, startOffset);
+    source.start(0, startOffset);
     return source;
 }