littlejsengine 1.9.1 → 1.9.2

package/examples/typescript/game.js

@@ -1,12 +1,12 @@
 /*
-    Little TypeScript Demo
+    Little JS TypeScript Demo
     - A simple starter project
-    - Builds to a JavaScript file from TypeScript
+    - Shows how to use LittleJS with TypeScript
 */
 'use strict';
 // import module
-import * as LittleJS from '../../build/littlejs.esm.js';
-const { Vector2, Color, Timer, vec2, tile } = LittleJS;
+import * as LittleJS from '../../dist/littlejs.esm.js';
+const { Vector2, Color, Timer, tile, vec2, hsl, rgb } = LittleJS;
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
 // sound effects
@@ -16,51 +16,52 @@ const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJ
 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);
+    const tileCollisionSize = vec2(32, 16);
+    LittleJS.initTileCollision(tileCollisionSize);
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
     // get level data from the tiles image
-    const imageLevelDataRow = 1;
     const mainContext = LittleJS.mainContext;
     const tileImage = LittleJS.textureInfos[0].image;
     mainContext.drawImage(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);
-            }
+    const imageData = mainContext.getImageData(0, 0, tileImage.width, tileImage.height).data;
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+        for (pos.y = tileCollisionSize.y; pos.y--;) {
+            // check if this pixel is set
+            const i = pos.x + tileImage.width * (15 + tileCollisionSize.y - pos.y);
+            if (!imageData[4 * i])
+                continue;
+            // set tile data
+            const tileIndex = 1;
+            const direction = LittleJS.randInt(4);
+            const mirror = !LittleJS.randInt(2);
+            const color = LittleJS.randColor();
+            const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+            tileLayer.setData(pos, data);
+            LittleJS.setTileCollisionData(pos, 1);
         }
+    // draw tile layer with new data
     tileLayer.redraw();
     // move camera to center of collision
-    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(48);
     // 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
+    particleEmitter = new LittleJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
     1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
-    LittleJS.tile(0, 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
+    tile(0, 16), // tileIndex, tileSize
+    hsl(1, 1, 1), hsl(0, 0, 0), // colorStartA, colorStartB
+    hsl(0, 0, 0, 0), hsl(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() {
@@ -68,7 +69,7 @@ function gameUpdate() {
         // play sound when mouse is pressed
         sound_click.play(LittleJS.mousePos);
         // change particle color and set to fade out
-        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartA = hsl();
         particleEmitter.colorStartB = LittleJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
@@ -85,7 +86,9 @@ 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);
+    LittleJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6), 0, false);
+    // draw the logo as a tile
+    LittleJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost() {

package/examples/typescript/game.ts

@@ -1,14 +1,14 @@
 /*
-    Little TypeScript Demo
+    Little JS TypeScript Demo
     - A simple starter project
-    - Builds to a JavaScript file from TypeScript
+    - Shows how to use LittleJS with TypeScript
 */
 
 'use strict';
 
 // import module
-import * as LittleJS from '../../build/littlejs.esm.js';
-const {Vector2, Color, Timer, vec2, tile} = LittleJS;
+import * as LittleJS from '../../dist/littlejs.esm.js';
+const {Vector2, Color, Timer, tile, vec2, hsl, rgb} = LittleJS;
 
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
@@ -21,62 +21,63 @@ const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJ
 LittleJS.medalsInit('Hello World');
 
 // game variables
-let particleEmitter: LittleJS.ParticleEmitter;
-let gameTimer = new Timer;
+let particleEmitter;
 
 ///////////////////////////////////////////////////////////////////////////////
 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);
+    const tileCollisionSize = vec2(32, 16);
+    LittleJS.initTileCollision(tileCollisionSize);
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
 
     // get level data from the tiles image
-    const imageLevelDataRow = 1;
     const mainContext = LittleJS.mainContext;
     const tileImage = LittleJS.textureInfos[0].image;
     mainContext.drawImage(tileImage, 0, 0);
-    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
-    for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;)
+    const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+    for (pos.y = 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);
-        }
+        // check if this pixel is set
+        const i = pos.x + tileImage.width*(15 + tileCollisionSize.y - pos.y);
+        if (!imageData[4*i])
+            continue;
+        
+        // set tile data
+        const tileIndex = 1;
+        const direction = LittleJS.randInt(4)
+        const mirror = !LittleJS.randInt(2);
+        const color = LittleJS.randColor();
+        const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+        tileLayer.setData(pos, data);
+        LittleJS.setTileCollisionData(pos, 1);
     }
+
+    // draw tile layer with new data
     tileLayer.redraw();
 
     // move camera to center of collision
-    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(48);
 
     // 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
-        LittleJS.tile(0, 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
+        vec2(16,9), 0,              // emitPos, emitAngle
+        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emiteCone
+        tile(0, 16),                // tileIndex, tileSize
+        hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
+        hsl(0,0,0,0), hsl(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
+        .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();
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -88,7 +89,7 @@ function gameUpdate()
         sound_click.play(LittleJS.mousePos);
 
         // change particle color and set to fade out
-        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartA = hsl();
         particleEmitter.colorStartB = LittleJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
@@ -112,7 +113,10 @@ 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);
+    LittleJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
+    
+    // draw the logo as a tile
+    LittleJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/typescript/index.html

@@ -6,4 +6,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1812 type=module></script>
+<script src=game.js?192 type=module></script>

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "littlejsengine",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
-  "main": "build/littlejs.esm.js",
-  "types": "build/littlejs.esm.js",
+  "main": "dist/littlejs.esm.js",
+  "types": "dist/littlejs.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KilledByAPixel/LittleJS.git"

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.9.1';
+const engineVersion = '1.9.2';
 
 /** Frames per second to update objects
  *  @type {Number}

package/src/engineAudio.js

@@ -146,22 +146,19 @@ class SoundWave extends Sound
         this.randomness = randomness;
 
         if (!soundEnable) return;
-        if (!soundDecoderContext)
-            soundDecoderContext = new AudioContext;
 
         fetch(filename)
         .then(response => response.arrayBuffer())
-        .then(arrayBuffer => soundDecoderContext.decodeAudioData(arrayBuffer))
+        .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
         .then(audioBuffer => 
         {
             this.sampleChannels = [];
             for (let i = audioBuffer.numberOfChannels; i--;)
-                this.sampleChannels[i] = audioBuffer.getChannelData(i);
+                this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
             this.sampleRate = audioBuffer.sampleRate;
         });
     }
 }
-let soundDecoderContext; // audio context used only to decode audio files
 
 /**
  * Music Object - Stores a zzfx music track for later use
@@ -275,8 +272,9 @@ function getNoteFrequency(semitoneOffset, rootFrequency=220)
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Audio context used by the engine
+ *  @type {AudioContext}
  *  @memberof Audio */
-let audioContext;
+let audioContext = new AudioContext;
 
 /** Play cached audio samples with given settings
  *  @param {Array}   sampleChannels - Array of arrays of samples to play (for stereo playback)
@@ -291,10 +289,6 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
 {
     if (!soundEnable) return;
 
-    // create audio context if needed
-    if (!audioContext)
-        audioContext = new AudioContext;
-
     // prevent sounds from building up if they can't be played
     if (audioContext.state != 'running')
     {

package/src/engineBuild.js

@@ -11,7 +11,7 @@
 'use strict';
 
 const ENGINE_NAME = 'littlejs';
-const BUILD_FOLDER = 'build';
+const BUILD_FOLDER = 'dist';
 const SOURCE_FOLDER = 'src';
 const engineSourceFiles =
 [
@@ -158,7 +158,14 @@ function typeScriptBuildStep(filename)
 {
     try
     {
-        child_process.execSync(`npx tsc ${filename} --declaration --allowJs --emitDeclarationOnly --outFile ${BUILD_FOLDER}/${ENGINE_NAME}.d.ts`);
+        const tsFilename = `${BUILD_FOLDER}/${ENGINE_NAME}.d.ts`
+        child_process.execSync(`npx tsc ${filename} --declaration --allowJs --emitDeclarationOnly --outFile ${tsFilename}`);
+
+        // Remove declare module part
+        //let fileContent = fs.readFileSync(tsFilename, 'utf8');
+        //const r = new RegExp(`declare module "${ENGINE_NAME}\.esm" \{([\\s\\S]*?)\}`);
+        //fs.writeFileSync(tsFilename, fileContent.replace(r, '$1'));
+
     }
     catch (e) { handleError(e, 'Failed to run TypeScript build step!'); }
 };

package/src/engineDebug.js

@@ -54,9 +54,13 @@ let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParti
 
 /** Asserts if the experssion is false, does not do anything in release builds
  *  @param {Boolean} assert
- *  @param {Object} output
+ *  @param {Object} [output]
  *  @memberof Debug */
-function ASSERT(assert, output) { enableAsserts && console.assert(assert, output); }
+function ASSERT(assert, output) 
+{
+    if (enableAsserts)
+        output ? console.assert(assert, output) : console.assert(assert);
+}
 
 /** Draw a debug rectangle in world space
  *  @param {Vector2} pos

package/src/engineInput.js

@@ -314,9 +314,9 @@ if (isTouchDevice)
     // handle all touch events the same way
     ontouchstart = ontouchmove = ontouchend = (e)=>
     {
-        // fix stalled audio on mobile
-        if (soundEnable)
-            audioContext ? audioContext.resume() : zzfx(0);
+        // fix stalled audio requiring user interaction
+        if (soundEnable && audioContext && audioContext.state != 'running')
+            zzfx(0);
 
         // check if touching and pass to mouse events
         const touching = e.touches.length;
@@ -462,7 +462,7 @@ function touchGamepadRender()
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)
     {
-        const pos = rightCenter.add(vec2().setAngle(i*PI/2, touchGamepadSize/2));
+        const pos = rightCenter.add(vec2().setDirection(i, touchGamepadSize/2));
         overlayContext.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
         overlayContext.beginPath();
         overlayContext.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);

package/src/engineMedals.js

@@ -90,8 +90,8 @@ class Medal
         // draw containing rect and clip to that region
         context.save();
         context.beginPath();
-        context.fillStyle = rgb(.9,.9,.9).toString();
-        context.strokeStyle = rgb(0,0,0).toString();
+        context.fillStyle = new Color(.9,.9,.9).toString();
+        context.strokeStyle = new Color(0,0,0).toString();
         context.lineWidth = 3;
         context.rect(x, y, width, medalDisplaySize.y);
         context.fill();

package/src/engineParticles.js

@@ -10,12 +10,12 @@
  * @example
  * // create a particle emitter
  * let pos = vec2(2,3);
- * let particleEmiter = new ParticleEmitter
+ * let particleEmitter = new ParticleEmitter
  * (
- *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
- *     tile(0, 16),            // tileInfo
- *     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
+ *     pos, 0, 1, 0, 500, PI,      // pos, angle, emitSize, emitTime, emitRate, emiteCone
+ *     tile(0, 16),                // tileInfo
+ *     rgb(1,1,1),   rgb(0,0,0),   // colorStartA, colorStartB
+ *     rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
  *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
  *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
  *     .5, 1                // randomness, collide, additive, randomColorLinear, renderOrder

package/src/engineTileLayer.js

@@ -138,7 +138,7 @@ class TileLayerData
      *  @param {Number}  [direction] - Integer direction of tile, in 90 degree increments
      *  @param {Boolean} [mirror]    - If the tile should be mirrored along the x axis
      *  @param {Color}   [color]     - Color of the tile */
-    constructor(tile, direction=0, mirror=false, color=new Color())
+    constructor(tile, direction=0, mirror=false, color=new Color)
     {
         /** @property {Number}  - The tile to use, untextured if undefined */
         this.tile      = tile;