littlejsengine 1.11.17 → 1.12.6

package/reference.md

@@ -13,7 +13,7 @@ To start LittleJS, you need to create a few functions and pass them to engineIni
 
 ```javascript
 // Start up LittleJS engine with your callback functions
-engineInit(init, update, updatePost, render, renderPost, imageSources=['tiles.png']);
+engineInit(init, update, updatePost, render, renderPost, imageSources=[]);
 ```
 
 ## LittleJS Utilities Classes and Functions
@@ -29,7 +29,7 @@ engineInit(init, update, updatePost, render, renderPost, imageSources=['tiles.pn
 vec2(x=0, y=x)                                // Create a 2D vector with Vector or floats
 rgb(r=1, g=1, b=1, a=1)                       // Create a color object with RGBA values
 hsl(h=0, s=0, l=1, a=1)                       // Create a color object with HSLA values
-tile(pos=(0,0), size, textureIndex=0)         // Create a tile info object
+tile(pos, size=(16,16), texture=0, padding=0) // Create a tile info object
 
 // Helper functions 
 abs(value)                                    // Get absolute value
@@ -131,12 +131,12 @@ Timer.valueOf()        // Get how long since elapsed, 0 if not set
 
 ```javascript
 // Drawing functions
-drawTile(pos, size=(1,1), tileInfo, color, angle=0, mirror, additiveColor)
-drawRect(pos, size=(1,1), color=(1,1,1,1), angle=0)
-drawLine(posA, posB, thickness=.1, color=(1,1,1,1))
+drawTile(pos, size=(1,1), tileInfo, color=WHITE, angle=0, mirror, additiveColor)
+drawRect(pos, size=(1,1), color=WHITE, angle=0)
+drawLine(posA, posB, thickness=.1, color=WHITE)
 drawCanvas2D(pos, size, angle, mirror, drawFunction)
-drawText(text, pos, size=1, color=(1,1,1,1), lineWidth, lineColor)
-drawTextScreen(text, pos, size=1, color=(1,1,1,1), lineWidth, lineColor)
+drawText(text, pos, size=1, color=WHITE, lineWidth, lineColor)
+drawTextScreen(text, pos, size=1, color=WHITE, lineWidth, lineColor)
 setBlendMode(additive)
 toggleFullscreen()
 isFullscreen()
@@ -172,10 +172,15 @@ getCameraSize()          // Get the camera's visible area in world space
 canvasMaxSize = (1920, 1200)  // The max size of the canvas
 canvasFixedSize = (0, 0)      // Fixed size of the canvas
 fontDefault = 'arial'         // Default font used for text rendering
-canvasPixelated = true        // Disable filtering for crisper pixel art?
-showSplashScreen = false      // Show the LittleJS splash screen on startup?
-glEnable = true               // Enable fast WebGL rendering?
-glOverlay = true              // Prevent compositing the WebGL canvas?
+canvasPixelated = true        // Use nearest neighbor canvas scaling for more pixelated look
+tilesPixelated = true         // Disable filtering for crisper pixel art
+showSplashScreen = false      // Show the LittleJS splash screen on startup
+glEnable = true               // Enable fast WebGL rendering
+glOverlay = true              // Prevent compositing the WebGL canvas
+
+// Tile sheet settings
+tileSizeDefault = (16,16)  // Default size of tiles in pixels
+tileFixBleedScale = .3     // How much smaller to draw tiles to prevent bleeding
 ```
 
 ## LittleJS Audio System
@@ -224,7 +229,7 @@ soundDefaultTaper = .7  // Default range percent to taper off sound (0-1)
 keyIsDown(key)                        // Is key down?
 keyWasPressed(key)                    // Was key pressed this frame?
 keyWasReleased(key)                   // Was key released this frame?
-keyDirection()                        // Get input vector from arrow keys or wasd
+keyDirection(up, down, left, right)                        // Get input vector from arrow keys or wasd
 
 // Mouse / Touch
 mousePos                              // World space mouse position
@@ -276,7 +281,7 @@ touchGamepadAlpha = .3                // Transparency of touch gamepad overlay
 
 ```javascript
 // Engine Object
-EngineObject(pos=(0,0), size=(1,1), tileInfo, angle=0, color, renderOrder=0)
+EngineObject(pos, size=(1,1), tileInfo, angle=0, color, renderOrder=0)
 EngineObject.update()                              // Update object, called automatically
 EngineObject.render()                              // Render object, called automatically
 EngineObject.destroy()                             // Destroy this object and children
@@ -317,7 +322,7 @@ objectDefaultAngleDamping = 1 // How much to slow angular velocity each frame (0
 objectDefaultElasticity = 0   // How much to bounce when a collision occurs (0-1)
 objectDefaultFriction = .8    // How much to slow when touching (0-1)
 objectMaxSpeed = 1            // Clamp max speed to avoid fast objects missing collisions
-gravity = 0                   // How much gravity to apply to objects
+gravity = (0,0)               // How much gravity to apply to objects
 
 // Engine Object functions
 engineObjectsCollect(pos, size, objects=engineObjects)k
@@ -336,15 +341,8 @@ engineObjectsDestroy()
 - Drawn directly to the main canvas without using WebGL
 
 ```javascript
-// Tile Collision System
-tileCollisionSize                              // Size of the tile collision layer
-initTileCollision(size)                        // Clear and initialize tile collision
-setTileCollisionData(pos, data=0)              // Set tile collision data at pos
-getTileCollisionData(pos)                      // Get tile collision data at pos
-tileCollisionTest(pos, size=(0,0), object)     // Check if collision should occur
-tileCollisionRaycast(posStart, posEnd, object) // Return the center of tile if hit
-
-// Tile Layer Object
+
+// LittleJS Layer System
 TileLayer(position, size, tileInfo, scale)     // Create a tile layer object
 TileLayer.setData(layerPos, data, redraw)      // Set data at position
 TileLayer.getData(layerPos)                    // Get data at position
@@ -355,12 +353,16 @@ TileLayer.drawTile(pos, size=(1,1), tileInfo, color, angle, mirror) // Draw tile
 TileLayer.drawCanvas2D(pos, size, angle, mirror, drawFunction)      // Draw to 2D canvas
 
 // Tile Layer Data Object
-TileLayerData(tile, direction=0, mirror=false, color=(1,1,1,1)) // Create tile data object
+TileLayerData(tile, direction=0, mirror=false, color=WHITE) // Create tile data object
 TileLayerData.clear()      // Clear this tile data
 
-// Tile sheet settings
-tileSizeDefault = (16,16)  // Default size of tiles in pixels
-tileFixBleedScale = .3     // How much smaller to draw tiles to prevent bleeding
+// Tile Collision Layer
+TileCollisionLayer(position, size, tileInfo=tile()) // Create a tile collision layer object
+TileCollisionLayer.size                             // Size of the tile collision layer
+TileCollisionLayer.setCollisionData(pos, data=1)    // Set tile collision data at pos
+getTileCollisionData(pos)                           // Get tile collision data at pos
+tileCollisionTest(pos, size=(0,0), object)          // Check if collision should occur
+tileCollisionRaycast(posStart, posEnd, object)      // Return the center of tile if hit
 ```
 
 ## LittleJS Particle System

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.11.17';
+const engineVersion = '1.12.6';
 
 /** Frames per second to update
  *  @type {number}
@@ -112,7 +112,7 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  @param {Array<string>} [imageSources=[]] - List of images 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)
+async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
     ASSERT(!mainContext, 'engine already initialized');
     ASSERT(Array.isArray(imageSources), 'pass in images as array');
@@ -269,16 +269,14 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
     }
 
-    function startEngine()
+    // wait for gameInit to load
+    async function startEngine()
     {
-        new Promise((resolve) => resolve(gameInit())).then(engineUpdate);
+        await gameInit();
+        engineUpdate();
     }
-
     if (headlessMode)
-    {
-        startEngine();
-        return;
-    }
+        return startEngine();
 
     // setup html
     const styleRoot = 
@@ -354,8 +352,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         }));
     }
 
-    // load all of the images
-    Promise.all(promises).then(startEngine);
+    // wait for all the promises to finish
+    await Promise.all(promises);
+    return startEngine();
 }
 
 /** Update each engine object, remove destroyed objects, and update time

package/src/engineAudio.js

@@ -47,17 +47,17 @@ class Sound
 {
     /** Create a sound object and cache the zzfx samples for later use
      *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
-     *  @param {number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
+     *  @param {number} [range=soundDefaultRange] - World space max range of sound
      *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
      */
     constructor(zzfxSound, range=soundDefaultRange, taper=soundDefaultTaper)
     {
         if (!soundEnable || headlessMode) return;
 
-        /** @property {number} - World space max range of sound, will not play if camera is farther away */
+        /** @property {number} - World space max range of sound */
         this.range = range;
 
-        /** @property {number} - At what percentage of range should it start tapering off */
+        /** @property {number} - At what percentage of range should it start tapering */
         this.taper = taper;
 
         /** @property {number} - How much to randomize frequency each time sound plays */
@@ -173,8 +173,8 @@ class SoundWave extends Sound
     /** Create a sound object and cache the wave file for later use
      *  @param {string} filename - Filename of audio file to load
      *  @param {number} [randomness] - 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
+     *  @param {number} [range=soundDefaultRange] - World space max range of sound
+     *  @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
      *  @param {Function} [onloadCallback] - callback function to call when sound is loaded
      */
     constructor(filename, randomness=0, range, taper, onloadCallback)
@@ -182,17 +182,26 @@ class SoundWave extends Sound
         super(undefined, range, taper);
         if (!soundEnable || headlessMode) return;
 
+        /** @property {Function} - callback function to call when sound is loaded */
+        this.onloadCallback = onloadCallback;
         this.randomness = randomness;
-        fetch(filename)
-        .then(response => response.arrayBuffer())
-        .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
-        .then(audioBuffer => 
-        {
-            this.sampleChannels = [];
-            for (let i = audioBuffer.numberOfChannels; i--;)
-                this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
-            this.sampleRate = audioBuffer.sampleRate;
-        }).then(() => onloadCallback && onloadCallback(this));
+        this.loadSound(filename);
+    }
+
+    /** Loads a sound from a URL and decodes it into sample data. Must be used with await!
+    *  @param {string} filename
+    *  @return {Promise<void>} */
+    async loadSound(filename)
+    {
+        const response = await fetch(filename);
+        const arrayBuffer = await response.arrayBuffer();
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        this.sampleChannels = [];
+        for (let i = audioBuffer.numberOfChannels; i--;)
+            this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
+        this.sampleRate = audioBuffer.sampleRate;
+        if (this.onloadCallback)
+            this.onloadCallback();
     }
 }
 

package/src/engineBuild.js

@@ -35,7 +35,11 @@ const enginePluginFiles =
     `${PLUGIN_FOLDER}/zzfxm.js`,
     `${PLUGIN_FOLDER}/uiSystem.js`,
     `${PLUGIN_FOLDER}/box2d.js`,
-    `${PLUGIN_FOLDER}/pluginExport.js`,
+];
+const engineExtraFiles =
+[
+    `${PLUGIN_FOLDER}/box2d.wasm.js`,
+    `${PLUGIN_FOLDER}/box2d.wasm.wasm`,
 ];
 const asciiArt =`
       ~~~~°°°°ooo°oOo°ooOooOooOo.
@@ -58,6 +62,11 @@ try
     // Setup build folder
     fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
     fs.mkdirSync(BUILD_FOLDER);
+
+    // copy extra files to build folder
+    for (const file of engineExtraFiles)
+        fs.copyFileSync(file, `${BUILD_FOLDER}/${file.substring(file.lastIndexOf('/')+1)}`);
+
 }
 catch (e) { handleError(e, 'Failed to create build folder!'); }
 
@@ -65,7 +74,11 @@ Build
 (
     'Build Engine -- all',
     `${BUILD_FOLDER}/${ENGINE_NAME}.js`,
-    [`${SOURCE_FOLDER}/engineDebug.js`, ...engineSourceFiles],
+    [
+        `${SOURCE_FOLDER}/engineDebug.js`, 
+        ...engineSourceFiles, 
+        ...enginePluginFiles
+    ],
     [], true
 );
 
@@ -73,7 +86,11 @@ Build
 (
     'Build Engine -- release',
     `${BUILD_FOLDER}/${ENGINE_NAME}.release.js`,
-    [`${SOURCE_FOLDER}/engineRelease.js`, ...engineSourceFiles],
+    [
+        `${SOURCE_FOLDER}/engineRelease.js`, 
+        ...engineSourceFiles, 
+        ...enginePluginFiles
+    ],
     [], true
 );
 
@@ -92,7 +109,7 @@ Build
     [
         `${BUILD_FOLDER}/${ENGINE_NAME}.js`, 
         `${SOURCE_FOLDER}/engineExport.js`, 
-        ...enginePluginFiles
+        `${PLUGIN_FOLDER}/pluginExport.js`
     ],
     [typeScriptBuildStep]
 );
@@ -104,9 +121,9 @@ Build
     [
         `${BUILD_FOLDER}/${ENGINE_NAME}.release.js`, 
         `${SOURCE_FOLDER}/engineExport.js`, 
-        ...enginePluginFiles
+        `${PLUGIN_FOLDER}/pluginExport.js`
     ],
-    [closureCompilerStep, uglifyBuildStep]
+    [uglifyBuildStep]
 );
 
 console.log(`Engine built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
@@ -133,9 +150,9 @@ function Build(message, outputFile, files=[], buildSteps=[], isPrimaryBuild)
         // get file content
         let fileContent = fs.readFileSync(file) + '\n';
 
-        // remove first 'use strict' from each file
+        // remove first 'use strict' and surrounding new lines
         if (isPrimaryBuild)
-            fileContent = fileContent.replace("'use strict';", '');
+            fileContent = fileContent.replace(/'use strict';\s*\n/g, '');
 
         // add it to the buffer
         buffer += fileContent;

package/src/engineDebug.js

@@ -329,11 +329,9 @@ function debugRender()
             }
         }
 
-        if (tileCollisionSize.x > 0 && tileCollisionSize.y > 0)
+        if (tileCollisionLayers.length) // show floored tile pick if there is tile collision
             drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(0,0,1,.5), 0, false);
         mainContext = saveContext;
-
-        //glCopyToContext(mainContext = saveContext);
     }
 
     {

package/src/engineExport.js

@@ -2,8 +2,6 @@
  * LittleJS Module Export
  */
 
-'use strict';
-
 export
 {
 	// Engine
@@ -151,6 +149,7 @@ export
 	isIntersecting,
 	wave,
 	formatTime,
+	fetchJSON,
 
 	// Random
 	rand,
@@ -279,15 +278,13 @@ export
 	EngineObject,
 
 	// Tiles
-	tileCollision,
-	tileCollisionSize,
-	initTileCollision,
-	setTileCollisionData,
+	tileCollisionLayers,
 	getTileCollisionData,
 	tileCollisionTest,
 	tileCollisionRaycast,
 	TileLayerData,
 	TileLayer,
+	TileCollisionLayer,
 
 	// Particles
 	ParticleEmitter,

package/src/engineInput.js

@@ -61,21 +61,21 @@ function clearInput() { inputData = [[]]; touchGamepadButtons = []; }
  *  @param {number} button
  *  @return {boolean}
  *  @memberof Input */
-const mouseIsDown = keyIsDown;
+function mouseIsDown(button) { return keyIsDown(button); }
 
 /** Returns true if mouse button was pressed
  *  @function
  *  @param {number} button
  *  @return {boolean}
  *  @memberof Input */
-const mouseWasPressed = keyWasPressed;
+function mouseWasPressed(button) { return keyWasPressed(button); }
 
 /** Returns true if mouse button was released
  *  @function
  *  @param {number} button
  *  @return {boolean}
  *  @memberof Input */
-const mouseWasReleased = keyWasReleased;
+function mouseWasReleased(button) { return keyWasReleased(button); }
 
 /** Mouse pos in world space
  *  @type {Vector2}
@@ -314,7 +314,9 @@ function gamepadsUpdate()
                 const button = gamepad.buttons[j];
                 const wasDown = gamepadIsDown(j,i);
                 data[j] = button.pressed ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
-                isUsingGamepad ||= !i && button.pressed;
+                if (!button.value || button.value > .9) // must be a full press
+                if (!i && button.pressed)
+                    isUsingGamepad = true;
             }
 
             if (gamepadDirectionEmulateStick)

package/src/engineObject.js

@@ -158,7 +158,10 @@ class EngineObject
         this.velocity.x *= this.damping;
         this.velocity.y *= this.damping;
         if (this.mass) // don't apply gravity to static objects
-            this.velocity.y += gravity * this.gravityScale;
+        {
+            this.velocity.x += gravity.x * this.gravityScale;
+            this.velocity.y += gravity.y * this.gravityScale;
+        }
         this.pos.x += this.velocity.x;
         this.pos.y += this.velocity.y;
         this.angle += this.angleVelocity *= this.angleDamping;
@@ -173,9 +176,9 @@ class EngineObject
         if (this.groundObject)
         {
             // apply friction in local space of ground object
-            const groundSpeed = this.groundObject != this && this.groundObject.velocity ? 
-                this.groundObject.velocity.x : 0;
-            this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * this.friction;
+            const friction = max(this.friction, this.groundObject.friction);
+            const groundSpeed = this.groundObject.velocity ? this.groundObject.velocity.x : 0;
+            this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * friction;
             this.groundObject = undefined;
             //debugOverlay && debugPhysics && debugPoint(this.pos.subtract(vec2(0,this.size.y/2)), '#0f0');
         }
@@ -217,7 +220,7 @@ class EngineObject
 
                 // check for collision
                 const sizeBoth = this.size.add(o.size);
-                const smallStepUp = (oldPos.y - o.pos.y)*2 > sizeBoth.y + gravity; // prefer to push up if small delta
+                const smallStepUp = (oldPos.y - o.pos.y)*2 > sizeBoth.y + gravity.y; // prefer to push up if small delta
                 const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
                 const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
                 const elasticity = max(this.elasticity, o.elasticity);
@@ -279,19 +282,21 @@ class EngineObject
         if (this.collideTiles)
         {
             // check collision against tiles
-            if (tileCollisionTest(this.pos, this.size, this))
+            const hitLayer = tileCollisionTest(this.pos, this.size, this)
+            if (hitLayer)
             {
                 // if already was stuck in collision, don't do anything
                 // this should not happen unless something starts in collision
                 if (!tileCollisionTest(oldPos, this.size, this))
                 {
                     // test which side we bounced off (or both if a corner)
-                    const isBlockedY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
-                    const isBlockedX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
-                    if (isBlockedY || !isBlockedX)
+                    const blockedLayerY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
+                    const blockedLayerX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
+                    if (blockedLayerY || !blockedLayerX)
                     {
                         // bounce velocity
-                        this.velocity.y *= -this.elasticity;
+                        const elasticity = max(this.elasticity, hitLayer.elasticity);
+                        this.velocity.y *= -elasticity;
 
                         if (wasMovingDown)
                         {
@@ -300,9 +305,8 @@ class EngineObject
                             const epsilon = .0001;
                             this.pos.y = (oldPos.y-this.size.y/2|0)+this.size.y/2+epsilon;
 
-                            // set ground object to self for tile collision
-                            // TODO: rework system so tile collision is its own object
-                            this.groundObject = this;
+                            // set ground object for tile collision
+                            this.groundObject = hitLayer;
                         }
                         else
                         {
@@ -311,7 +315,7 @@ class EngineObject
                             this.groundObject = undefined; 
                         }
                     }
-                    if (isBlockedX)
+                    if (blockedLayerX)
                     {
                         // move to previous position and bounce
                         this.pos.x = oldPos.x;

package/src/engineSettings.js

@@ -37,7 +37,7 @@ let canvasMaxSize = vec2(1920, 1080);
  *  @memberof Settings */
 let canvasFixedSize = vec2();
 
-/** Use nearest neighbor scaling algorithm for canvas for more pixelated look
+/** Use nearest neighbor canvas scaling for more pixelated look
  *  - Must be set before startup to take effect
  *  - If enabled sets css image-rendering:pixelated
  *  @type {boolean}
@@ -147,11 +147,11 @@ let objectDefaultFriction = .8;
  *  @memberof Settings */
 let objectMaxSpeed = 1;
 
-/** How much gravity to apply to objects along the Y axis, negative is down
- *  @type {number}
+/** How much gravity to apply to objects, negative Y is down
+ *  @type {Vector2}
  *  @default
  *  @memberof Settings */
-let gravity = 0;
+let gravity = vec2();
 
 /** Scales emit rate of particles, useful for low graphics mode (0 disables particle emitters)
  *  @type {number}
@@ -377,8 +377,8 @@ function setObjectDefaultFriction(friction) { objectDefaultFriction = friction;
  *  @memberof Settings */
 function setObjectMaxSpeed(speed) { objectMaxSpeed = speed; }
 
-/** Set how much gravity to apply to objects along the Y axis
- *  @param {number} newGravity
+/** Set how much gravity to apply to objects
+ *  @param {Vector2} newGravity
  *  @memberof Settings */
 function setGravity(newGravity) { gravity = newGravity; }