littlejsengine 1.13.1 → 1.14.2

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, 0);
+    // draw a grey square in the background without using WebGL
+    LJS.drawRect(vec2(20,8), vec2(100), hsl(0,0,.8), 0, false);
 
     if (Scenes.scene == 5)
     {

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);
@@ -308,7 +308,7 @@ export class SoftBodyObject extends LJS.Box2dObject
         for (let y = 0; y < sy.y; ++y) poly.push(this.getNode(sx-1, y).pos);
         for (let x = sx; x--;) poly.push(this.getNode(x, sy-1).pos);
         for (let y = sy; y--;) poly.push(this.getNode(0, y).pos);
-        LJS.box2d.drawPoly(vec2(), 0, poly, LJS.BLACK)
+        LJS.drawPoly(poly, LJS.BLACK)
     }
     getNode(x, y) 
     {

package/examples/box2d/scenes.js

@@ -181,7 +181,7 @@ export function loadScene(_scene)
     if (scene == 10)
     {
         sceneName = 'Softbodies';
-        for(let i=3;i--;)
+        for (let i=3;i--;)
             new GameObjects.SoftBodyObject(vec2(20, 3+i*7), vec2(6-i), vec2(9-i), LJS.randColor());
     }
 }

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

@@ -21,11 +21,11 @@ The first step is to make a 2D grid of brick objects in gameInit. As a placehold
 
 ```javascript
 // create bricks
-for(let x=0; x<=20; x++)
-for(let y=0; y<=20; y++)
+for (let x=0; x<=20; x++)
+for (let y=0; y<=20; y++)
 {
-    const brick = new EngineObject(vec2(x,y)); // create a brick
-    brick.color = randColor(); // give brick a random color
+    const brick = new LJS.EngineObject(vec2(x,y)); // create a brick
+    brick.color = LJS.randColor(); // give brick a random color
 }
 ```
 
@@ -42,11 +42,11 @@ Let’s make the bricks more rectangular by passing vec2(2,1) to the size parame
 ```javascript
 // create bricks
 const levelSize = vec2(20, 20);
-for(let x=0; x<=levelSize.x; x+=2)
-for(let y=0; y<=levelSize.y; y+=1)
+for (let x=0; x<=levelSize.x; x+=2)
+for (let y=0; y<=levelSize.y; y+=1)
 {
-    const brick = new EngineObject(vec2(x,y), vec2(2,1)); // create a brick
-    brick.color = randColor(); // give brick a random color
+    const brick = new LJS.EngineObject(vec2(x,y), vec2(2,1)); // create a brick
+    brick.color = LJS.randColor(); // give brick a random color
 }
 ```
 
@@ -57,13 +57,13 @@ You can also change the camera zoom by using camaraScale which controls the numb
 For this example the camera will just remain stationary, but in other types of games it is very useful!
 
 ```javascript
-setCameraPos(levelSize.scale(.5)); // center camera in level
+LJS.setCameraPos(levelSize.scale(.5)); // center camera in level
 ```
 
 We’ll also start with a blank slate by commenting out the default “Hello World!” text in gameRenderPost.
 
 ```javascript
-// drawTextScreen('Hello World!', mainCanvasSize.scale(.5), 80);
+// LJS.drawTextScreen('Hello World!', LJS.mainCanvasSize.scale(.5), 80);
 ```
 
 ![LittleJS Screenshot](images/2.png)
@@ -77,14 +77,14 @@ For this example we will use a fixed size canvas. This will let the drawing canv
 To enable it we will set canvasFixedSize in gameInit to use 720p resolution.
 
 ```javascript
-setCanvasFixedSize(vec2(1280, 720)); // use a 720p fixed size canvas
+LJS.setCanvasFixedSize(vec2(1280, 720)); // use a 720p fixed size canvas
 ```
 
 Before we tweak the level size, let’s add this bit of code to gameRender to show the size of the level. This will cause some rects to be drawn each frame before the engine objects. To create color objects we pass in RGB values between 0 and 1.
 
 ```javascript
-drawRect(cameraPos, vec2(100), new Color(.5,.5,.5)); // draw background
-drawRect(cameraPos, levelSize, new Color(.1,.1,.1)); // draw level boundary
+LJS.drawRect(LJS.cameraPos, vec2(100), rgb(.5,.5,.5)); // draw background
+LJS.drawRect(LJS.cameraPos, levelSize, rgb(.1,.1,.1)); // draw level boundary
 ```
 
 We also need to make levelSize a global by moving it to the top so it can be accessed from other functions.
@@ -98,11 +98,11 @@ Now we can see the boundaries of our level and tweak the size to fill the canvas
 We can also adjust the for loop where the bricks are created to make them only fill the top middle part of the level.
 
 ```javascript
-for(let x=2;  x<=levelSize.x-2; x+=2)
-for(let y=12; y<=levelSize.y-2; y+=1)
+for (let x=2;  x<=levelSize.x-2; x+=2)
+for (let y=12; y<=levelSize.y-2; y+=1)
 {
-    const brick = new EngineObject(vec2(x,y), vec2(2,1)); // create a brick
-    brick.color = randColor(); // give brick a random color
+    const brick = new LJS.EngineObject(vec2(x,y), vec2(2,1)); // create a brick
+    brick.color = LJS.randColor(); // give brick a random color
 }
 ```
 
@@ -115,11 +115,11 @@ Now that looks almost like a breakout game!
 For the player’s paddle, let’s create a new class of object that extends the built in EngineObject. This will allow us to control movement with the mouse. In this Paddle class we will just add some new code to the update function which is automatically called each frame by the engine.
 
 ```javascript
-class Paddle extends EngineObject
+class Paddle extends LJS.EngineObject
 {
     update()
     {
-        this.pos.x = mousePos.x; // move paddle to mouse
+        this.pos.x = LJS.mousePos.x; // move paddle to mouse
     }
 }
 ```
@@ -149,7 +149,7 @@ You can also add this code to the paddle update that will keep the paddle from f
 
 ```javascript
 // clamp paddle to level size
-this.pos.x = clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
+this.pos.x = LJS.clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
 ```
 
 ## Create the Ball
@@ -158,7 +158,7 @@ The final missing piece is of course that ball that moves around and bounces off
 We can create a Ball class the same way we created the paddle. In this case we will also apply some velocity to ball so it starts moving right away.
 
 ```javascript
-class Ball extends EngineObject 
+class Ball extends LJS.EngineObject 
 {
     constructor(pos)
     {
@@ -172,7 +172,10 @@ class Ball extends EngineObject
 Then we just need to create the ball in gameInit, passing in the camera position for it’s location.
 
 ```javascript
-new Ball(cameraPos); // create a ball
+{
+    // create a ball
+    ball = new Ball(LJS.cameraPos);
+}
 ```
 
 ## Make the Ball Collide
@@ -210,7 +213,7 @@ super(pos, vec2(.5)); // set object position and size
 Next, let’s make the ball bounce when it hits the top or sides of the screen. To do this, we will make a Wall object class that works similar to the paddle but without an update function.
 
 ```javascript
-class Wall extends EngineObject
+class Wall extends LJS.EngineObject
 {
     constructor(pos, size)
     {
@@ -236,7 +239,7 @@ new Wall(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)) // top
 Now we have white walls around the outside that block the ball. These walls should be invisible so we will set their color to be transparent by adding another line to the Wall constructor.
 
 ```javascript
-this.color = new Color(0,0,0,0); // make object invisible
+this.color = rgb(0,0,0,0); // make object invisible
 ```
 
 ## Debug Display
@@ -268,7 +271,7 @@ if (!ball || ball.pos.y < -1)
         ball.destroy();
 
     // create a ball
-    ball = new Ball(cameraPos);
+    ball = new Ball(LJS.cameraPos);
 }
 ```
 
@@ -279,7 +282,7 @@ Don’t forget to destroy the old ball before creating the new one! Though it do
 Still, the ball doesn’t collide with the bricks much less breaks them and it wouldn’t be breakout without that. So we need to make the brick collide with the ball, just like the walls, so let’s start with Brick class that is the same as Wall.
 
 ```javascript
-class Brick extends EngineObject
+class Brick extends LJS.EngineObject
 {
     constructor(pos, size)
     {
@@ -333,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
-drawTextScreen("Score " + score, vec2(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)
@@ -347,7 +350,7 @@ We will start with the ball bounce sound. [You can use the official ZzFX sound d
 To make a sound effect with this system we will create a global object for each sound.
 
 ```javascript
-const sound_bounce = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
+const sound_bounce = new LJS.Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
 ```
 
 You can use the sound I chose or copy the code for your own sound from ZzFX. There is a checkbox for LittleJS style sounds to make exporting a little easier.
@@ -366,7 +369,7 @@ Let’s also make a brick break sound. You can use the ZzFX sound designer again
 Create a global object for this sound the same way we did for the bounce sound. You can replace it with your own generated sound or use mine.
 
 ```javascript
-const sound_break = new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
+const sound_break = new LJS.Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
 ```
 
 Then in the Brick’s collideWithObject function just add some code to play that sound.
@@ -384,7 +387,7 @@ Let’s improve the gameplay by letting the player click to start, instead of cr
 We can also add a special sound that plays on startup. Try making an interesting start from the ZzFX sound designer, maybe using the Powerup preset.
 
 ```javascript
-const sound_start = new Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
+const sound_start = new LJS.Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
 ```
 
 We can modify the gameUpdate to wait for player input from the mouse and play the sound when the ball is created.
@@ -396,9 +399,9 @@ if (ball && ball.pos.y < -1) // if ball is below level
     ball.destroy();
     ball = 0;
 }
-if (!ball && mouseWasPressed(0)) // if there is no ball and left mouse is pressed
+if (!ball && LJS.mouseWasPressed(0)) // if there is no ball and left mouse is pressed
 {
-    ball = new Ball(cameraPos); // create the ball
+    ball = new Ball(LJS.cameraPos); // create the ball
     sound_start.play(); // play start sound
 }
 ```
@@ -413,7 +416,7 @@ Make sure you replace the first parameter, vec2(), with this.pos so the effect a
 
 ```javascript
 // create explosion effect
-new ParticleEmitter(this.pos, 0, 0, 0.1, 100, 3.14, 0, new Color(1, 1, 1, 1), new Color(1, 1, 1, 1), new Color(1, 1, 1, 0), new Color(1, 1, 1, 0), 0.5, 0.1, 1, 0.1, 0.05, 1, 1, 0, 3.14, 0.1, 0.2, 0, 0, 1);
+new LJS.ParticleEmitter(this.pos, 0, 0, 0.1, 100, 3.14, 0, rgb(1, 1, 1, 1), rgb(1, 1, 1, 1), rgb(1, 1, 1, 0), rgb(1, 1, 1, 0), 0.5, 0.1, 1, 0.1, 0.05, 1, 1, 0, 3.14, 0.1, 0.2, 0, 0, 1);
 ```
 
 Now you should see this simple particle effect play wherever a brick breaks. You can continue tweaking the parameters to make your own effect or use the one I made which also uses this.color to change the particle’s color so it matches the brick.
@@ -421,15 +424,15 @@ Now you should see this simple particle effect play wherever a brick breaks. You
 ```javascript
 // create explosion effect
 const color = this.color;
-new ParticleEmitter(
-    this.pos, 0,            // pos, angle
-    this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
-    undefined,              // tileInfo
-    color, color,           // colorStartA, colorStartB
+new LJS.ParticleEmitter(
+    this.pos, 0,             // pos, angle
+    this.size, .1, 200, 3.14,// emitSize, emitTime, emitRate, emitCone
+    undefined,               // tileInfo
+    color, color,                       // colorStartA, colorStartB
     color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
     .2, .5, 1, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
-    .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
-    .1, .5, false, true // fadeRate, randomness, collide, additive
+    .99, .95, .4, 3.14, // damp, angleDamp, gravity, cone
+    .1, .5, false, true // fade, randomness, collide, additive
 );
 ```
 
@@ -459,7 +462,7 @@ collideWithObject(o)
         this.velocity = this.velocity.rotate(.3 * deltaX);
         
         // make sure ball is moving upwards with a minimum speed
-        this.velocity.y = max(-this.velocity.y, .2);
+        this.velocity.y = LJS.max(-this.velocity.y, .2);
         
         // prevent default collision code
         return false;

package/examples/breakoutTutorial/game.js

@@ -138,8 +138,8 @@ function gameInit()
     LJS.setCanvasFixedSize(vec2(1280, 720)); // use a 720p fixed size canvas
     
     // create bricks
-    for(let x=2;  x<=levelSize.x-2; x+=2)
-    for(let y=12; y<=levelSize.y-2; y+=1)
+    for (let x=2;  x<=levelSize.x-2; x+=2)
+    for (let y=12; y<=levelSize.y-2; y+=1)
         new Brick(vec2(x,y), vec2(2,1)); // create a brick
 
     // create player paddle

package/examples/electron/build.bat

@@ -0,0 +1,7 @@
+rem LittleJS Build Script
+call node build.js
+if %errorlevel% neq 0 (
+    echo Build failed with error level %errorlevel%
+    pause
+    exit /b %errorlevel%
+)

package/examples/electron/build.js

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+
+/** 
+ * LittleJS Build System
+ */
+
+'use strict';
+
+const PROGRAM_TITLE = 'Little JS Electron Project';
+const PROGRAM_NAME = 'game';
+const BUILD_FOLDER = 'build';
+const USE_ROADROLLER = false; // enable for extra compression
+const sourceFiles =
+[
+    '../../dist/littlejs.release.js',
+    'game.js',
+    // add your game's files here
+];
+const dataFiles =
+[
+    'tiles.png',
+    // add your game's data files here
+];
+
+console.log(`Building ${PROGRAM_NAME}...`);
+const startTime = Date.now();
+const fs = require('node:fs');
+const child_process = require('node:child_process');
+
+// rebuild engine
+//child_process.execSync(`npm run build`, { stdio: 'inherit' });
+
+// remove old files and setup build folder
+fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+fs.rmSync(`${PROGRAM_NAME}.zip`, { force: true });
+fs.mkdirSync(BUILD_FOLDER);
+
+// copy data files
+for (const file of dataFiles)
+    fs.copyFileSync(file, `${BUILD_FOLDER}/${file}`);
+
+Build
+(
+    `${BUILD_FOLDER}/index.js`,
+    sourceFiles,
+    USE_ROADROLLER ? 
+        [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, electronBuildStep] :
+        [closureCompilerStep, uglifyBuildStep, htmlBuildStep, electronBuildStep]
+);
+
+console.log('');
+console.log(`Build Completed in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
+
+///////////////////////////////////////////////////////////////////////////////
+
+// A single build with its own source files, build steps, and output file
+// - each build step is a callback that accepts a single filename
+function Build(outputFile, files=[], buildSteps=[])
+{
+    // copy files into a buffer
+    let buffer = '';
+    for (const file of files)
+        buffer += fs.readFileSync(file) + '\n';
+
+    // output file
+    fs.writeFileSync(outputFile, buffer, {flag: 'w+'});
+
+    // execute build steps in order
+    for (const buildStep of buildSteps)
+        buildStep(outputFile);
+}
+
+function closureCompilerStep(filename)
+{
+    console.log('Running closure compiler...');
+
+    // use closer compiler to minify the code
+    const filenameTemp = filename + '.tmp';
+    fs.copyFileSync(filename, filenameTemp);
+    child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, {stdio: 'inherit'});
+    fs.rmSync(filenameTemp);
+};
+
+function uglifyBuildStep(filename)
+{
+    console.log('Running uglify...');
+    child_process.execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
+};
+
+function roadrollerBuildStep(filename)
+{
+    console.log('Running roadroller...');
+    child_process.execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
+};
+
+function htmlBuildStep(filename)
+{
+    console.log('Building html...');
+
+    // create html file
+    let buffer = '';
+    buffer += '<!DOCTYPE html>';
+    buffer += '<head>';
+    buffer += `<title>${PROGRAM_TITLE}</title>`;
+    buffer += '<meta charset=utf-8>';
+    buffer += '</head>';
+    buffer += '<body>';
+    buffer += '<script src="index.js"></script>';
+
+    // output html file
+    fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, {flag: 'w+'});
+};
+
+function electronBuildStep(filename)
+{
+    console.log('Building executable with electron...');
+
+    // copy elecron files to build folder
+    fs.copyFileSync('electron.js', `${BUILD_FOLDER}/electron.js`);
+    fs.copyFileSync('package.json', `${BUILD_FOLDER}/package.json`);
+
+    // run electron packager
+    child_process.execSync(`npx electron-packager ./${BUILD_FOLDER} --overwrite`, {stdio: 'inherit'});
+};

package/examples/electron/electron.js

@@ -0,0 +1,35 @@
+const { app, BrowserWindow } = require('electron');
+
+function createWindow()
+{
+  // create the browser window
+  const mainWindow = new BrowserWindow({width: 800, height: 600});
+  
+  // hide the toolbar menu
+  mainWindow.setMenu(null);
+
+  // load the index.html of the app
+  mainWindow.loadFile('index.html');
+
+  // go fullscreen
+  //mainWindow.setFullScreen(true);
+
+  // open the dev tools debugging
+  //mainWindow.webContents.openDevTools()
+}
+
+// wait until the app is ready and create the window
+app.whenReady().then(createWindow);
+
+// quit when all windows are closed (except macOS convention)
+app.on('window-all-closed', ()=>
+{
+    if (process.platform != 'darwin')
+        app.quit();
+});
+
+app.on('activate', ()=>
+{
+    if (BrowserWindow.getAllWindows().length == 0)
+        createWindow();
+});