littlejsengine 1.13.4 → 1.14.4

package/examples/box2d/game.js

@@ -136,8 +136,8 @@ function gameUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    // draw a grey square in the background without using webgl
-    LJS.drawRect(vec2(20,8), vec2(100), hsl(0,0,.8), 0, false);
+    // draw a grey square in the background
+    LJS.drawRect(vec2(20,8), vec2(100), hsl(0,0,.8));
 
     if (Scenes.scene == 5)
     {
@@ -168,8 +168,8 @@ function gameRenderPost()
 
     // draw to overlay canvas for hud rendering
     const pos = vec2(LJS.mainCanvasSize.x/2, 50);
-    drawText('LittleJS Box2D Demo', 80, 80);
-    drawText(Scenes.sceneName, 60, 100);
+    drawText('LittleJS Box2D Demo', 65, 70);
+    drawText(Scenes.sceneName, 50, 100);
     if (Scenes.scene == 0)
     {
         drawText('Mouse Left = Grab');

package/examples/box2d/gameObjects.js

@@ -20,7 +20,7 @@ const restitution = .2;
 
 export function spawnBox(pos, size=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, applyTexture=true, angle=0)
 {
-    size = typeof size == 'number' ? vec2(size) : size; // square
+    size = typeof size === 'number' ? vec2(size) : size; // square
     const o = new LJS.Box2dObject(pos, size, applyTexture && Game.spriteAtlas.squareOutline, angle, color, type);
     o.drawSize = size.scale(1.02); // slightly enlarge to cover gaps
     o.addBox(size, vec2(), 0, density, friction, restitution);

package/examples/breakout/game.js

@@ -122,38 +122,43 @@ function setupPostProcess()
         p=fract(p*.3197);
         return fract(1.+sin(51.*p.x+73.*p.y)*13753.3);
     }
-    float noise(vec2 p)
-    {
-        vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);
-        return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+1.),u.x),u.y);
-    }
+
     void mainImage(out vec4 c, vec2 p)
     {
-        // put uv in texture pixel space
+        // setup the shader
+        vec2 uv = p;
         p /= iResolution.xy;
-
-        // apply fuzz as horizontal offset
-        const float fuzz = .0005;
-        const float fuzzScale = 800.;
-        const float fuzzSpeed = 9.;
-        p.x += fuzz*(noise(vec2(p.y*fuzzScale, iTime*fuzzSpeed))*2.-1.);
-
-        // init output color
         c = texture(iChannel0, p);
 
-        // chromatic aberration
-        const float chromatic = .002;
-        c.r = texture(iChannel0, p - vec2(chromatic,0)).r;
-        c.b = texture(iChannel0, p + vec2(chromatic,0)).b;
-
-        // tv static noise
-        const float staticNoise = .1;
-        c += staticNoise * hash(p + mod(iTime, 1e3));
+        // static noise
+        const float staticAlpha = .1;
+        const float staticScale = .002;
+        c += staticAlpha * hash(floor(p/staticScale) + mod(iTime*500., 1e3));
 
         // scan lines
-        const float scanlineScale = 1e3;
-        const float scanlineAlpha = .1;
-        c *= 1. + scanlineAlpha*sin(p.y*scanlineScale);
+        const float scanlineScale = 2.;
+        const float scanlineAlpha = .3;
+        c *= 1. - scanlineAlpha*cos(p.y*2.*iResolution.y/scanlineScale);
+
+        {
+            // bloom effect
+            const float blurSize = .002;
+            const float bloomIntensity = .2;
+
+            // 5-tap Gaussian blur
+            vec4 bloom = vec4(0);
+            bloom += texture(iChannel0, p + vec2(-2.*blurSize, 0)) * .12;
+            bloom += texture(iChannel0, p + vec2(   -blurSize, 0)) * .24;
+            bloom += texture(iChannel0, p)                         * .28;
+            bloom += texture(iChannel0, p + vec2(    blurSize, 0)) * .24;
+            bloom += texture(iChannel0, p + vec2( 2.*blurSize, 0)) * .12;
+            bloom += texture(iChannel0, p + vec2(0, -2.*blurSize)) * .12;
+            bloom += texture(iChannel0, p + vec2(0,    -blurSize)) * .24;
+            bloom += texture(iChannel0, p)                         * .28;
+            bloom += texture(iChannel0, p + vec2(0,     blurSize)) * .24;
+            bloom += texture(iChannel0, p + vec2(0,  2.*blurSize)) * .12;
+            c += bloom * bloomIntensity;
+        }
 
         // black vignette around edges
         const float vignette = 2.;

package/examples/breakoutTutorial/README.md

@@ -336,7 +336,7 @@ Then increment it in the Brick.collideWithObject function.
 And change that drawTextScreen code we had commented out in gameRenderPost to display the score. We can adjust the position and size of the text to fit at the top of the screen.
 
 ```javascript
-LJS.drawTextScreen("Score " + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
+LJS.drawTextScreen('Score ' + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
 ```
 
 ![LittleJS Screenshot](images/9.png)

package/examples/breakoutTutorial/game.js

@@ -183,7 +183,7 @@ function gameRender()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
-    LJS.drawTextScreen("Score " + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
+    LJS.drawTextScreen('Score ' + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/electron/build.js

@@ -105,7 +105,7 @@ function htmlBuildStep(filename)
     buffer += '<meta charset=utf-8>';
     buffer += '</head>';
     buffer += '<body>';
-    buffer += '<script src="index.js"></script>';
+    buffer += `<script src='index.js'></script>`;
 
     // output html file
     fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, {flag: 'w+'});

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1133></script>
+<script src=../../dist/littlejs.js?1136></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1133></script>
+<script src=game.js?1136></script>

package/examples/empty/game.js

@@ -1,6 +1,6 @@
 /*
     Little JS Hello World Demo
-    - Just prints "Hello World!"
+    - Just prints 'Hello World!'
     - A good starting point for new projects
 */
 

package/examples/htmlMenu/index.html

@@ -30,14 +30,14 @@
 </head><body>
 
 <!-- setup html menu system -->
-<div class="topDiv">
-<div id="menu" class="menuDiv">
-<b style="font-size:50px">Test Menu</b>
+<div class=topDiv>
+<div id=menu class=menuDiv>
+<b style=font-size:50px>Test Menu</b>
 This is an example menu using html elements.
-<input id="input_test" value="Test Input">
-<input id="input_rangeTest" type="range">
-<button id="button_test">Test Button</button>
-<button id="button_exitMenu">Exit Menu</button>
+<input id=input_test value='Test Input'>
+<input id=input_rangeTest type=range>
+<button id=button_test>Test Button</button>
+<button id=button_exitMenu>Exit Menu</button>
 </div>
 </div>