littlejsengine 1.13.1 → 1.13.4

package/plugins/drawUtilities.js

@@ -16,10 +16,11 @@
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
  *  @param {number} [borderSize] - Width of the border sections
  *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @memberof DrawUtilities */
-function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
 }
 
 /** Draw a scalable nine-slice UI element in world space
@@ -31,11 +32,12 @@ function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
  *  @param {number} [borderSize] - Width of the border sections
  *  @param {Color} [additiveColor] - Additive color
  *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
  *  @param {boolean} [screenSpace] - Use screen space coordinates
  *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
  *  @memberof DrawUtilities */
-function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.05, angle=0, useWebGL=glEnable, screenSpace, context)
 {
     // setup nine slice tiles
     const centerTile = startTile.offset(startTile.size);
@@ -43,26 +45,27 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
     const cornerSize = vec2(borderSize);
     const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
     const flip = screenSpace ? -1 : 1;
+    const rotateAngle = screenSpace ? -angle : angle;
 
     // center
-    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
-    for(let i=4; i--;)
+    drawTile(pos, centerSize, centerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    for (let i=4; i--;)
     {
         // sides
         const horizontal = i%2;
         const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-1:1));
         const sideSize = vec2(horizontal ? borderSize : centerSize.x, horizontal ? centerSize.y : borderSize);
         const sideTile = centerTile.offset(startTile.size.multiply(vec2(i==1?1:i==3?-1:0,i==0?-flip:i==2?flip:0)))
-        drawTile(pos.add(sidePos), sideSize, sideTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
-    for(let i=4; i--;)
+    for (let i=4; i--;)
     {
         // corners
         const flipX = i>1;
         const flipY = i && i<3;
         const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-1:1));
         const cornerTile = centerTile.offset(startTile.size.multiply(vec2(flipX?-1:1,flipY?flip:-flip)));
-        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(cornerPos.rotate(rotateAngle)), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
 }
 
@@ -73,10 +76,11 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
  *  @param {number} [borderSize] - Width of the border sections
  *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @memberof DrawUtilities */
-function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
 }
 
 /** Draw a scalable three-slice UI element in world space
@@ -88,11 +92,12 @@ function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
  *  @param {number} [borderSize] - Width of the border sections
  *  @param {Color} [additiveColor] - Additive color
  *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
  *  @param {boolean} [screenSpace] - Use screen space coordinates
  *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
  *  @memberof DrawUtilities */
-function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.05, angle=0, useWebGL=glEnable, screenSpace, context)
 {
     // setup three slice tiles
     const cornerTile = startTile.frame(0);
@@ -102,25 +107,26 @@ function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor
     const cornerSize = vec2(borderSize);
     const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
     const flip = screenSpace ? -1 : 1;
+    const rotateAngle = screenSpace ? -angle : angle;
 
     // center
-    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
-    for(let i=4; i--;)
+    drawTile(pos, centerSize, centerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    for (let i=4; i--;)
     {
         // sides
-        const angle = i*PI/2;
+        const a = angle + i*PI/2;
         const horizontal = i%2;
         const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-flip:flip));
         const sideSize = vec2(horizontal ? centerSize.y : centerSize.x, borderSize);
-        drawTile(pos.add(sidePos), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }
-    for(let i=4; i--;)
+    for (let i=4; i--;)
     {
         // corners
-        const angle = i*PI/2;
+        const a = angle + i*PI/2;
         const flipX = !i || i>2;
         const flipY = i>1;
         const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-flip:flip));
-        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(cornerPos.rotate(rotateAngle)), cornerSize, cornerTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }
 }

package/plugins/postProcess.js

@@ -32,6 +32,13 @@ class PostProcessPlugin
         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);}';
 

package/plugins/uiSystem.js

@@ -66,7 +66,7 @@ class UISystemPlugin
 
         function updateInvisible(o)
         {
-            for(const c of o.children)
+            for (const c of o.children)
                 updateInvisible(c);
             o.updateInvisible();
         }
@@ -82,7 +82,7 @@ class UISystemPlugin
                     if (o.parent)
                         o.pos = o.localPos.add(o.parent.pos);
                     // update in reverse order to detect mouse enter/leave
-                    for(let i=o.children.length; i--;)
+                    for (let i=o.children.length; i--;)
                         updateObject(o.children[i]);
                     o.update();
                 }
@@ -100,7 +100,7 @@ class UISystemPlugin
                 if (o.parent)
                     o.pos = o.localPos.add(o.parent.pos);
                 o.render();
-                for(const c of o.children)
+                for (const c of o.children)
                     renderObject(c);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || renderObject(o));
@@ -157,7 +157,7 @@ class UISystemPlugin
     *  @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);
+        drawTile(pos, size, tileInfo, color, angle, mirror, CLEAR_BLACK, false, true, uiSystem.uiContext);
     }
 
     /** Draw text to the UI context

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.13.1';
+const engineVersion = '1.13.4';
 
 /** Frames per second to update
  *  @type {number}
@@ -297,7 +297,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         'margin:0;' +                 // fill the window
         'overflow:hidden;' +          // no scroll bars
         'background:#000;' +          // set background color
-        (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
         (!touchInputEnable ? '' :     // no touch css settings
@@ -325,7 +324,13 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
     if (glCanvas)
         glCanvas.style.cssText = styleCanvas;
+    setCanvasPixelated(canvasPixelated);
+    setOverlayCanvasPixelated(overlayCanvasPixelated);
     updateCanvas();
+
+    // create offscreen canvas for image processing
+    workCanvas = new OffscreenCanvas(256, 256);
+    workContext = workCanvas.getContext('2d', { willReadFrequently: true });
     
     // create promises for loading images
     const promises = imageSources.map((src, textureIndex)=>

package/src/engineAudio.js

@@ -423,7 +423,7 @@ function zzfxG
         repeatTime = repeatTime * sampleRate | 0;
 
     // generate waveform
-    for(length = attack + decay + sustain + release + delay | 0;
+    for (length = attack + decay + sustain + release + delay | 0;
         i < length; b[i++] = s * volume)                   // sample
     {
         if (!(++crush%(bitCrush*100|0)))                   // bit crush

package/src/engineDebug.js

@@ -474,7 +474,7 @@ function debugRender()
             overlayContext.fillText('6: Toggle Video Capture', x, y += h);
 
             let keysPressed = '';
-            for(const i in inputData[0])
+            for (const i in inputData[0])
             {
                 if (keyIsDown(i, 0))
                     keysPressed += i + ' ' ;
@@ -483,7 +483,7 @@ function debugRender()
 
             let buttonsPressed = '';
             if (inputData[1])
-            for(const i in inputData[1])
+            for (const i in inputData[1])
             {
                 if (keyIsDown(i, 1))
                     buttonsPressed += i + ' ' ;