littlejsengine 1.6.6 → 1.7.1

package/examples/typescript/game.js

@@ -1,89 +1,94 @@
-/*
-    LittleJS Hello World Starter Game
-*/
-'use strict';
-// import module
-import * as LittleJS from '../../build/littlejs.esm.js';
-const { Color, 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;
-///////////////////////////////////////////////////////////////////////////////
-function gameInit() {
-    // create tile collision and visible tile layer
-    LittleJS.initTileCollision(vec2(32, 16));
-    const pos = vec2();
-    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
-}
-///////////////////////////////////////////////////////////////////////////////
-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');
+/*
+    Little TypeScript Demo
+    - A simple starter project
+    - Builds to a JavaScript file from TypeScript
+*/
+'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

@@ -1,12 +1,14 @@
 /*
-    LittleJS Hello World Starter Game
+    Little TypeScript Demo
+    - A simple starter project
+    - Builds to a JavaScript file from TypeScript
 */
 
 'use strict';
 
 // import module
 import * as LittleJS from '../../build/littlejs.esm.js';
-const {Color, vec2} = LittleJS;
+const {Vector2, Color, Timer, vec2} = LittleJS;
 
 // sound effects
 const sound_click = new LittleJS.Sound([1,.5]);
@@ -17,13 +19,14 @@ LittleJS.medalsInit('Hello World');
 
 // game variables
 let particleEmitter: LittleJS.ParticleEmitter;
+let gameTimer = new Timer;
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
     // create tile collision and visible tile layer
     LittleJS.initTileCollision(vec2(32, 16));
-    const pos = vec2();
+    const pos = new Vector2;
     const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
 
     // get level data from the tiles image
@@ -67,6 +70,9 @@ function gameInit()
     );
     particleEmitter.elasticity = .3; // bounce when it collides
     particleEmitter.trailScale = 2;  // stretch in direction of motion
+
+    // start the game timer
+    gameTimer.set();
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/typescript/index.html

@@ -1,4 +1,4 @@
-<html><head>
+<!DOCTYPE html><head>
 <title>Little TypeScript Demo</title>
 <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
 <meta name=apple-mobile-web-app-capable content=yes>
@@ -7,4 +7,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?166 type=module></script>
+<script src=game.js?1701 type=module></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.6.6",
+  "version": "1.7.01",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "build/littlejs.esm.js",
   "repository": {
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/KilledByAPixel/LittleJS",
   "scripts": {
-    "build": "cd src && engineBuild.bat"
+    "build": "node src/engineBuild.js"
   },
   "devDependencies": {
     "google-closure-compiler": "~20230502.0.0",

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.6.6';
+const engineVersion = '1.7.01';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -120,7 +120,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         // set canvas style
         const styleCanvas = 'position:absolute;' +
             'top:50%;left:50%;transform:translate(-50%,-50%);' + // center the canvas
-            (canvasPixelated?'image-rendering:pixelated':'');     // set pixelated rendering
+            (canvasPixelated?'image-rendering:pixelated':'');    // set pixelated rendering
         (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
         
         gameInit();
@@ -128,7 +128,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     };
 
     // frame time tracking
-    let frameTimeLastMS = 0, frameTimeBufferMS, averageFPS;
+    let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
 
     // main update loop
     function engineUpdate(frameTimeMS=0)

package/src/engineAudio.js

@@ -1,11 +1,11 @@
 /** 
  * LittleJS Audio System
- * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - Sound Effect Generator
- * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - Music System
+ * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
+ * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - ZzFXM Music System
  * - Caches sounds and music for fast playback
  * - Can attenuate and apply stereo panning to sounds
  * - Ability to play mp3, ogg, and wave files
- * - Speech synthesis wrapper functions
+ * - Speech synthesis functions
  * @namespace Audio
  */
 
@@ -39,12 +39,15 @@ class Sound
         /** @property {Number} - At what percentage of range should it start tapering off */
         this.taper = taper;
 
-        // get randomness from sound parameters
-        this.randomness = zzfxSound[1] || 0;
-        zzfxSound[1] = 0;
+        /** @property {Number} - How much to randomize frequency each time sound plays */
+        this.randomness = 0;
 
-        // generate sound now for fast playback
-        this.cachedSamples = zzfxG(...zzfxSound);
+        if (zzfxSound)
+        {
+            // generate zzfx sound now for fast playback
+            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0); 
+            this.cachedSamples = zzfxSound && zzfxG(...zzfxSound);
+        }
     }
 
     /** Play the sound
@@ -56,7 +59,7 @@ class Sound
      */
     play(pos, volume=1, pitch=1, randomnessScale=1)
     {
-        if (!soundEnable) return;
+        if (!soundEnable || !this.cachedSamples) return;
 
         let pan;
         if (pos)
@@ -89,12 +92,36 @@ class Sound
      *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
      */
     playNote(semitoneOffset, pos, volume)
+    { return this.play(pos, volume, 2**(semitoneOffset/12), 0); }
+}
+
+/** 
+ * Sound Wave Object - Stores a wave sound for later use and can be played positionally
+ */
+class SoundWave extends Sound
+{
+    /** Create a sound object and cache the wave file for later use
+     *  @param {String} waveFilename - Filename of wave file to load
+     *  @param {Number} [randomness=.05] - How much to randomize frequency each time sound plays
+     *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
+     *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
+     */
+    constructor(waveFilename, randomness=.05, range, taper)
     {
+        super(0, range, taper);
+        this.randomness = randomness;
+
         if (!soundEnable) return;
+        if (!soundWaveDecoderContext)
+            soundDecoderContext = new AudioContext;
 
-        return this.play(pos, volume, 2**(semitoneOffset/12), 0);
+        fetch(waveFilename)
+        .then(response => response.arrayBuffer())
+        .then(arrayBuffer => soundWaveDecoderContext.decodeAudioData(arrayBuffer))
+        .then(audioBuffer => this.cachedSamples = audioBuffer.getChannelData(0));
     }
 }
+let soundDecoderContext; // audio context used only to decode audio files
 
 /**
  * Music Object - Stores a zzfx music track for later use
@@ -237,16 +264,17 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 {
     if (!soundEnable) return;
 
-    // create audio context
+    // create audio context if needed
     if (!audioContext)
         audioContext = new AudioContext;
 
-    // fix stalled audio
-    audioContext.resume();
-
     // prevent sounds from building up if they can't be played
     if (audioContext.state != 'running')
+    {
+        // fix stalled audio
+        audioContext.resume();
         return;
+    }
 
     // create buffer and source
     const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR), 
@@ -438,7 +466,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
       patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
 
       // check if there are more channels
-      hasMore |= !!patterns[patternIndex][channelIndex];
+      hasMore ||= !!patterns[patternIndex][channelIndex];
 
       // get next offset, use the length of first channel
       nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - !notFirstBeat) * beatLength;
@@ -451,7 +479,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
 
         // stop if end, different instrument or new note
         stop = i == patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
-            instrument != (patternChannel[0] || 0) | note | 0;
+            instrument != (patternChannel[0] || 0) || note | 0;
 
         // fill buffer with samples for previous beat, most cpu intensive part
         for (j = 0; j < beatLength && notFirstBeat;

package/src/engineBuild.bat

@@ -1,132 +1,2 @@
-rem Simple build script for LittleJS Engine by Frank Force
-rem Minfies and combines index.html and index.js and zips the result
-rem Run npm install first to install required dependencies
-
-rem --- BUILD ENGINE DEBUG ---
-
-set BUILD_FOLDER=build
-set ENGINE_NAME=littlejs
-
-pushd ..
-
-rem remove old files
-rmdir /s /q %BUILD_FOLDER%
-mkdir %BUILD_FOLDER%
-pushd %BUILD_FOLDER%
-
-rem --- BUILD ENGINE ALL ---
-
-set OUTPUT_FILENAME=%ENGINE_NAME%.js
-
-rem combine code
-type ..\src\engineDebug.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineUtilities.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineSettings.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineObject.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineDraw.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineInput.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineAudio.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineTileLayer.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineParticles.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineMedals.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineWebGL.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engine.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-
-rem --- BUILD ENGINE RELEASE ---
-
-set OUTPUT_FILENAME=%ENGINE_NAME%.release.js
-
-rem combine code
-type ..\src\engineRelease.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineUtilities.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineSettings.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engine.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineObject.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineDraw.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineInput.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineAudio.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineTileLayer.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineParticles.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineMedals.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineWebGL.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-
-rem --- BUILD ENGINE MINIFIED ---
-
-set OUTPUT_FILENAME=%ENGINE_NAME%.min.js
-
-rem start with release build
-copy %ENGINE_NAME%.release.js %OUTPUT_FILENAME%
-
-rem check code with closure
-move %OUTPUT_FILENAME% %OUTPUT_FILENAME%.temp
-call npx google-closure-compiler --js=%OUTPUT_FILENAME%.temp --js_output_file=%OUTPUT_FILENAME% --language_out=ECMASCRIPT_2021 --warning_level=VERBOSE --jscomp_off=*
-del %OUTPUT_FILENAME%.temp
-if %ERRORLEVEL% NEQ 0 (
-    pause
-    exit /b %ERRORLEVEL%
-)
-
-rem lightly minify with uglify
-call npx uglifyjs -o %OUTPUT_FILENAME% -- %OUTPUT_FILENAME%
-if %ERRORLEVEL% NEQ 0 (
-    pause
-    exit /b %ERRORLEVEL%
-)
-
-rem --- BUILD ENGINE ESM MODULE ---
-
-set OUTPUT_FILENAME=%ENGINE_NAME%.esm.js
-type %ENGINE_NAME%.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineExport.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-
-rem --- BUILD ENGINE ESM MODULE RELEASE ---
-
-set OUTPUT_FILENAME=%ENGINE_NAME%.esm.min.js
-type %ENGINE_NAME%.min.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-type ..\src\engineExport.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
-
-rem lightly minify with uglify
-call npx uglifyjs -o %OUTPUT_FILENAME% -- %OUTPUT_FILENAME%
-if %ERRORLEVEL% NEQ 0 (
-    pause
-    exit /b %ERRORLEVEL%
-)
-
-rem --- BUILD TYPESCRIPT DEFINITIONS ---
-
-call npx tsc %ENGINE_NAME%.esm.js --declaration --allowJs --emitDeclarationOnly --outFile %ENGINE_NAME%.d.ts
-if %ERRORLEVEL% NEQ 0 (
-    pause
-    exit /b %ERRORLEVEL%
-)
-
-popd
-popd
+rem LittleJS Build Script
+call npm run build