littlejsengine 1.10.2 → 1.10.4

package/examples/typescript/build/examples/typescript/test/examples/typescript/build.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+/**
+ * LittleJS Build System
+ * - Combine input files
+ * - Run custom build steps
+ * - Check for errors
+ * - Output to build folder
+ * @namespace Build
+ */
+const PROGRAM_NAME = 'game';
+const BUILD_FOLDER = 'build';
+const sourceFiles = [
+    '../../build/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' });
+console.log('');
+// 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, [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, zipBuildStep]);
+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...`);
+    const filenameTemp = filename + '.tmp';
+    fs.copyFileSync(filename, filenameTemp);
+    child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --language_out=ECMASCRIPT_2021 --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...`);
+    // copy files into a buffer
+    let buffer = '';
+    buffer += '<script>';
+    buffer += fs.readFileSync(filename) + '\n';
+    buffer += '</script>';
+    // output html file
+    fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, { flag: 'w+' });
+}
+;
+function zipBuildStep(filename) {
+    console.log(`Zipping...`);
+    const ect = '../../../node_modules/ect-bin/vendor/win32/ect.exe';
+    const args = ['-9', '-strip', '-zip', `../${PROGRAM_NAME}.zip`, 'index.html', ...dataFiles];
+    child_process.spawnSync(ect, args, { stdio: 'inherit', cwd: BUILD_FOLDER });
+}
+;

package/examples/typescript/build/examples/typescript/test/examples/typescript/game.js

@@ -0,0 +1,92 @@
+/*
+    LittleJS Hello World Starter Game
+*/
+'use strict';
+// import module
+import * as LittleJS from '../../build/littlejs.esm.js';
+const { Vector2, Color, Timer, vec2 } = LittleJS;
+// sound effects
+const sound_click = new LittleJS.Sound([1, .5]);
+// medals
+const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LittleJS.medalsInit('Hello World');
+// game variables
+let particleEmitter;
+let gameTimer = new Timer;
+///////////////////////////////////////////////////////////////////////////////
+function gameInit() {
+    // create tile collision and visible tile layer
+    LittleJS.initTileCollision(vec2(32, 16));
+    const pos = new Vector2;
+    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
+    // get level data from the tiles image
+    const imageLevelDataRow = 1;
+    const mainContext = LittleJS.mainContext;
+    mainContext.drawImage(LittleJS.tileImage, 0, 0);
+    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
+        for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;) {
+            const imageData = mainContext.getImageData(pos.x, 16 * (imageLevelDataRow + 1) - pos.y - 1, 1, 1).data;
+            if (imageData[0]) {
+                const tileIndex = 1;
+                const direction = LittleJS.randInt(4);
+                const mirror = LittleJS.randInt(2) ? true : false;
+                const color = LittleJS.randColor();
+                const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+                tileLayer.setData(pos, data);
+                LittleJS.setTileCollisionData(pos, 1);
+            }
+        }
+    tileLayer.redraw();
+    // move camera to center of collision
+    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    // enable gravity
+    LittleJS.setGravity(-.01);
+    // create particle emitter
+    const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0, 9));
+    particleEmitter = new LittleJS.ParticleEmitter(center, 0, // emitPos, emitAngle
+    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
+    0, vec2(16), // tileIndex, tileSize
+    new Color(1, 1, 1), new Color(0, 0, 0), // colorStartA, colorStartB
+    new Color(1, 1, 1, 0), new Color(0, 0, 0, 0), // colorEndA, colorEndB
+    2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+    .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
+    .05, .5, true, true // fadeRate, randomness, collide, additive
+    );
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2; // stretch in direction of motion
+    // start the game timer
+    gameTimer.set();
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate() {
+    if (LittleJS.mouseWasPressed(0)) {
+        // play sound when mouse is pressed
+        sound_click.play(LittleJS.mousePos);
+        // change particle color and set to fade out
+        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
+        // unlock medals
+        medal_example.unlock();
+    }
+    // move particles to mouse location if on screen
+    if (LittleJS.mousePosScreen.x)
+        particleEmitter.pos = LittleJS.mousePos;
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost() {
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRender() {
+    // draw a grey square in the background without using webgl
+    LittleJS.drawRect(LittleJS.cameraPos, LittleJS.tileCollisionSize.add(vec2(5)), new Color(.2, .2, .2), 0, false);
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost() {
+    // draw to overlay canvas for hud rendering
+    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
+}
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');

package/examples/typescript/game.ts

@@ -128,4 +128,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/postProcess.js

@@ -98,4 +98,11 @@ function initPostProcess(shaderCode, includeOverlay=false)
         glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
         glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 4);
     }
-}
+}
+
+export {
+	initPostProcess,
+    glPostShader, 
+    glPostTexture, 
+    glPostIncludeOverlay
+};

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.10.2';
+const engineVersion = '1.10.4';
 
 /** Frames per second to update
  *  @type {Number}
@@ -74,13 +74,6 @@ let timeReal = 0;
  *  @default false
  *  @memberof Engine */
 let paused = false;
-
-/** The root element that engine is attached to
- *  @type {HTMLElement}
- *  @default document.body
- *  @memberof Engine */
-let engineRoot;
-
 /** Set if game is paused
  *  @param {Boolean} isPaused
  *  @memberof Engine */
@@ -113,7 +106,7 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  @param {Function} gameUpdatePost - Called after physics and objects are updated, setup camera and prepare for render
  *  @param {Function} gameRender     - Called before objects are rendered, draw any background effects that appear behind objects
  *  @param {Function} gameRenderPost - Called after objects are rendered, draw effects or hud that appear above all objects
- *  @param {Array} [imageSources=['tiles.png']] - Image to load
+ *  @param {Array} [imageSources=[]] - Image to load
  *  @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default
  *  @memberof Engine */
 function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
@@ -287,9 +280,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         (!touchInputEnable ? '' :     // no touch css setttings
         'touch-action:none;' +        // prevent mobile pinch to resize
         '-webkit-touch-callout:none');// compatibility for ios
-    engineRoot = rootElement;
-    engineRoot.style.cssText = styleRoot;
-    engineRoot.appendChild(mainCanvas = document.createElement('canvas'));
+    rootElement.style.cssText = styleRoot;
+    rootElement.appendChild(mainCanvas = document.createElement('canvas'));
     mainContext = mainCanvas.getContext('2d');
 
     // init stuff and start engine
@@ -299,7 +291,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     glInit();
 
     // create overlay canvas for hud to appear above gl canvas
-    engineRoot.appendChild(overlayCanvas = document.createElement('canvas'));
+    rootElement.appendChild(overlayCanvas = document.createElement('canvas'));
     overlayContext = overlayCanvas.getContext('2d');
 
     // set canvas style

package/src/engineDraw.js

@@ -288,6 +288,22 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
     drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context); 
 }
 
+/** Draw colored line between two points
+ *  @param {Vector2} posA
+ *  @param {Vector2} posB
+ *  @param {Number}  [thickness]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=false]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
+{
+    const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
+    const size = vec2(thickness, halfDelta.length()*2);
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
+}
+
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
  *  @param {Color}   [color=(1,1,1,1)]
@@ -356,22 +372,6 @@ function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth
 function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
 { drawEllipse(pos, radius, radius, 0, color, lineWidth, lineColor, screenSpace, context); }
 
-/** Draw colored line between two points
- *  @param {Vector2} posA
- *  @param {Vector2} posB
- *  @param {Number}  [thickness]
- *  @param {Color}   [color=(1,1,1,1)]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
- *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
-{
-    const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
-    const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
-}
-
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
  *  @param {Vector2}  size
@@ -563,11 +563,12 @@ function isFullscreen() { return !!document.fullscreenElement; }
  *  @memberof Draw */
 function toggleFullscreen()
 {
+    const rootElement = mainCanvas.parentElement;
     if (isFullscreen())
     {
         if (document.exitFullscreen)
             document.exitFullscreen();
     }
-    else if (engineRoot.requestFullscreen)
-        engineRoot.requestFullscreen();
+    else if (rootElement.requestFullscreen)
+        rootElement.requestFullscreen();
 }

package/src/engineExport.js

@@ -191,6 +191,9 @@ export {
 	drawTile,
 	drawRect,
 	drawLine,
+	drawPoly,
+	drawEllipse,
+	drawCircle,
 	drawCanvas2D,
 	setBlendMode,
 	drawTextScreen,
@@ -211,6 +214,17 @@ export {
 	glDraw,
 	glFlush,
 	glSetTexture,
+	glSetAntialias,
+	glAntialias,
+	glShader, 
+	glActiveTexture, 
+	glArrayBuffer, 
+	glGeometryBuffer, 
+	glPositionData, 
+	glColorData, 
+	glInstanceCount, 
+	glAdditive, 
+	glBatchAdditive,
 
 	// Input
 	keyIsDown,

package/src/engineInput.js

@@ -167,7 +167,6 @@ function inputInit()
 
     onkeydown = (e)=>
     {
-        if (debug && e.target != engineRoot) return;
         if (!e.repeat)
         {
             isUsingGamepad = false;
@@ -180,7 +179,6 @@ function inputInit()
 
     onkeyup = (e)=>
     {
-        if (debug && e.target != engineRoot) return;
         inputData[0][e.code] = 4;
         if (inputWASDEmulateDirection)
             inputData[0][remapKey(e.code)] = 4;
@@ -382,7 +380,7 @@ function touchInputInit()
             // set event pos and pass it along
             const p = vec2(e.touches[0].clientX, e.touches[0].clientY);
             mousePosScreen = mouseToScreen(p);
-            wasTouching ? isUsingGamepad = false : inputData[0][button] = 3;
+            wasTouching ? isUsingGamepad = touchGamepadEnable : inputData[0][button] = 3;
         }
         else if (wasTouching)
             inputData[0][button] = inputData[0][button] & 2 | 4;

package/src/engineObject.js

@@ -307,6 +307,7 @@ class EngineObject
                         this.pos.x = oldPos.x;
                         this.velocity.x *= -this.elasticity;
                     }
+                    debugOverlay && debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
             }
         }

package/src/engineTileLayer.js

@@ -70,6 +70,7 @@ function tileCollisionTest(pos, size=vec2(), object)
         if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
             return true;
     }
+    return false;
 }
 
 /** Return the center of first tile hit (does not return the exact intersection)
@@ -93,7 +94,7 @@ function tileCollisionRaycast(posStart, posEnd, object)
     let xi = unit.x * (delta.x < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1);
     let yi = unit.y * (delta.y < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1);
 
-    while (1)
+    while (true)
     {
         // check for tile collision
         const tileData = getTileCollisionData(pos);

package/src/engineUtilities.js

@@ -483,6 +483,7 @@ class Vector2
      * @param {Number} [length] */
     setDirection(direction, length=1)
     {
+        direction = mod(direction, 4);
         ASSERT(direction==0 || direction==1 || direction==2 || direction==3);
         return vec2(direction%2 ? direction-1 ? -length : length : 0, 
             direction%2 ? 0 : direction ? -length : length);

package/src/engineWebGL.js

@@ -22,6 +22,11 @@ let glCanvas;
  *  @memberof WebGL */
 let glContext;
 
+/** Shoule webgl be setup with antialiasing, must be set before calling engineInit
+ *  @type {Boolean}
+ *  @memberof WebGL */
+let glAntialias = true;
+
 // WebGL internal variables not exposed to documentation
 let glShader, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glInstanceCount, glAdditive, glBatchAdditive;
 
@@ -34,10 +39,11 @@ function glInit()
 
     // create the canvas and textures
     glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl2', {antialias:!canvasPixelated});
+    glContext = glCanvas.getContext('webgl2', {antialias:glAntialias});
 
     // some browsers are much faster without copying the gl buffer so we just overlay it instead
-    glOverlay && engineRoot.appendChild(glCanvas);
+    const rootElement = mainCanvas.parentElement;
+    glOverlay && rootElement.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
@@ -241,6 +247,15 @@ function glCopyToContext(context, forceDraw=false)
         context.drawImage(glCanvas, 0, 0);
 }
 
+/** Set antialiasing for webgl canvas
+ *  @param {Boolean} [antialias]
+ *  @memberof WebGL */
+function glSetAntialias(antialias=true)
+{
+    ASSERT(!glCanvas, 'must be called before engineInit');
+    glAntialias = antialias;
+}
+
 /** Add a sprite to the gl draw list, used by all gl draw functions
  *  @param {Number} x
  *  @param {Number} y