littlejsengine 1.12.4 → 1.12.6

package/dist/littlejs.release.js

@@ -9,8 +9,6 @@
  * - Debug functionality is disabled to reduce size and increase performance
  */
 
-
-
 let showWatermark = 0;
 let debugKey = '';
 const debug = 0;
@@ -53,8 +51,6 @@ function debugVideoCaptureUpdate(){}
  * @namespace Utilities
  */
 
-
-
 /** A shortcut to get Math.PI
  *  @type {number}
  *  @default Math.PI
@@ -234,6 +230,16 @@ function wave(frequency=1, amplitude=1, t=time)
  *  @memberof Utilities */
 function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
 
+/** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
+ *  @param {string} url - URL of JSON file
+ *  @return {Promise<object>}
+ *  @memberof Utilities */
+async function fetchJSON(url)
+{
+    const response = await fetch(url);
+    return response.json();
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Random global functions
@@ -329,6 +335,12 @@ class RandomGenerator
     /** Randomly returns either -1 or 1 deterministically
     *  @return {number} */
     sign() { return this.float() > .5 ? 1 : -1; }
+
+    /** Returns a seeded random value between the two values passed in with a random sign
+    *  @param {number} [valueA]
+    *  @param {number} [valueB]
+    *  @return {number} */
+    floatSign(valueA=1, valueB=0) { return this.float(valueA, valueB) * this.sign(); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -969,8 +981,6 @@ class Timer
  * @namespace Settings
  */
 
-
-
 ///////////////////////////////////////////////////////////////////////////////
 // Camera settings
 
@@ -1455,8 +1465,6 @@ function setDebugKey(key) { debugKey = key; }
  * LittleJS Object System
  */
 
-
-
 /** 
  * LittleJS Object Base Object Class
  * - Top level object class used by the engine
@@ -1939,8 +1947,6 @@ class EngineObject
  * @namespace Draw
  */
 
-
-
 /** The primary 2D canvas visible to the user
  *  @type {HTMLCanvasElement}
  *  @memberof Draw */
@@ -2562,8 +2568,6 @@ function setCursor(cursorStyle = 'auto')
  * @namespace Input
  */
 
-
-
 /** Returns true if device key is down
  *  @param {string|number} key
  *  @param {number} [device]
@@ -2615,21 +2619,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}
@@ -3088,8 +3092,6 @@ function touchGamepadRender()
  * @namespace Audio
  */
 
-
-
 /** Audio context used by the engine
  *  @type {AudioContext}
  *  @memberof Audio */
@@ -3126,17 +3128,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 */
@@ -3252,8 +3254,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)
@@ -3261,17 +3263,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();
     }
 }
 
@@ -3551,8 +3562,6 @@ function zzfxG
  * @namespace TileCollision
  */
 
-
-
 ///////////////////////////////////////////////////////////////////////////////
 // Tile Layer System
 
@@ -4016,8 +4025,6 @@ class TileCollisionLayer extends TileLayer
  * LittleJS Particle System
  */
 
-
-
 /**
  * Particle Emitter - Spawns particles with the given settings
  * @extends EngineObject
@@ -4362,8 +4369,6 @@ class Particle extends EngineObject
  * @namespace Medals
  */
 
-
-
 /** List of all medals
  *  @type {Object}
  *  @memberof Medals */
@@ -4551,8 +4556,6 @@ class Medal
  * @namespace WebGL
  */
 
-
-
 /** The WebGL canvas which appears above the main canvas and below the overlay canvas
  *  @type {HTMLCanvasElement}
  *  @memberof WebGL */
@@ -4751,7 +4754,19 @@ function glCreateTexture(image)
     const texture = glContext.createTexture();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     if (image && image.width)
+    {
         glSetTextureData(texture, image);
+        
+        const isPowerOfTwo = (value)=> !(value & (value - 1));
+        if (!tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height))
+        {
+            // use mipmap filtering
+            glContext.generateMipmap(glContext.TEXTURE_2D);
+            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, glContext.LINEAR_MIPMAP_LINEAR);
+            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, glContext.LINEAR);
+            return texture;
+        }
+    }
     else
     {
         // create a white texture
@@ -4759,7 +4774,7 @@ function glCreateTexture(image)
         glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
     }
     
-    // use point filtering for pixelated rendering
+    // set texture filtering
     const filter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, filter);
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, filter);
@@ -4875,8 +4890,6 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=-1, rgba
  * @namespace Engine
  */
 
-
-
 /** Name of engine
  *  @type {string}
  *  @default
@@ -4887,7 +4900,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.12.4';
+const engineVersion = '1.12.6';
 
 /** Frames per second to update
  *  @type {number}
@@ -4969,7 +4982,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');
@@ -5126,16 +5139,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 = 
@@ -5211,8 +5222,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
@@ -5491,8 +5503,6 @@ function drawEngineSplashScreen(t)
  * - Functions to unlock medals
  */
 
-
-
 /** Global Newgrounds object
  *  @type {NewgroundsPlugin}
  *  @memberof Medal */
@@ -5666,8 +5676,6 @@ class NewgroundsPlugin
  * - can be enabled to pass other canvases through a final shader
  */
 
-
-
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Global Post Process plugin object
@@ -5780,8 +5788,6 @@ class PostProcessPlugin
  * LittleJS ZzFXM Plugin
  */
 
-
-
 /**
  * Music Object - Stores a zzfx music track for later use
  * 
@@ -5950,8 +5956,6 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
  * - Images
  */
 
-
-
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Global UI system plugin object
@@ -6119,6 +6123,8 @@ class UIObject
         this.lineWidth  = uiSystem.defaultLineWidth;
         /** @property {string} */
         this.font       = uiSystem.defaultFont;
+        /** @property {number} - override for text height */
+        this.textHeight   = undefined;
         /** @property {boolean} */
         this.visible    = true;
         /** @property {Array<UIObject>} */
@@ -6229,7 +6235,8 @@ class UIText extends UIObject
     }
     render()
     {
-        uiSystem.drawText(this.text, this.pos, this.size, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
+        const textSize = vec2(this.size.x, this.textHeight || this.size.y);
+        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
     }
 }
 
@@ -6292,7 +6299,9 @@ class UIButton extends UIObject
         const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
         const color = this.mouseIsOver? this.hoverColor : this.color;
         uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor);
-        const textSize = vec2(this.size.x, this.size.y*.8);
+        
+        const textScale = .8; // scale text to fit in button
+        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
     }
@@ -6389,7 +6398,8 @@ class UIScrollbar extends UIObject
         const barColor = this.mouseIsHeld ? this.color : this.handleColor;
         uiSystem.drawRect(handlePos, handleSize, barColor, this.lineWidth, this.lineColor);
 
-        const textSize = vec2(this.size.x, this.size.y*.8);
+        const textScale = .8; // scale text to fit in scrollbar
+        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
     }
@@ -6398,31 +6408,33 @@ class UIScrollbar extends UIObject
 /**
  * LittleJS Box2D Physics Plugin
  * - Box2dObject extends EngineObject with Box2D physics
- * - Call box2dEngineInit() to start instead of normal engineInit()
+ * - Call box2dInit() before engineInit() to enable
  * - You will also need to include box2d.wasm.js
- * - Uses box2d.js super fast web assembly port of Box2D
+ * - Uses a super fast web assembly port of Box2D
  * - More info: https://github.com/kripken/box2d.js
- * - Fully wraps everything in Box2d
  * - Functions to create polygon, circle, and edge shapes
- * - Raycasting and querying
- * - Joint creation
  * - Contact begin and end callbacks
+ * - Wraps b2Vec2 type to/from Vector2
+ * - Raycasting and querying
+ * - Every type of joint
  * - Debug physics drawing
+ * @namespace Box2D
  */
 
-
- 
 /** Global Box2d Plugin object
- *  @type {Box2dPlugin} */
+ *  @type {Box2dPlugin}
+ *  @memberof Box2D */
 let box2d;
 
 /** Enable Box2D debug drawing
  *  @type {boolean}
- *  @default */
+ *  @default
+ *  @memberof Box2D */
 let box2dDebug = false;
 
 /** Enable Box2D debug drawing
- *  @param {boolean} enable */
+ *  @param {boolean} enable
+ *  @memberof Box2D */
 function box2dSetDebug(enable) { box2dDebug = enable; }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -6524,7 +6536,7 @@ class Box2dObject extends EngineObject
      *  @param {number}  [friction]
      *  @param {number}  [restitution]
      *  @param {boolean} [isSensor] */
-    addShape(shape, density=1, friction=.2, restitution=0, isSensor=false)
+    addShape(shape, density=1, friction=1, restitution=0, isSensor=false)
     {
         const fd = new box2d.instance.b2FixtureDef();
         fd.set_shape(shape);
@@ -8163,28 +8175,18 @@ class Box2dPlugin
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-/** Box2d Init - Startup LittleJS engine with your callback functions
- *  @param {Function|function():Promise} gameInit - Called once after the engine starts up
- *  @param {Function} gameUpdate - Called every frame before objects are updated
- *  @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused
- *  @param {Function} gameRender - Called before objects are rendered, for drawing the background
- *  @param {Function} gameRenderPost - Called after objects are rendered, useful for drawing UI
- *  @param {Array<string>} [imageSources=[]] - List of images to load
- *  @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default */
-function box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources, rootElement)
+/** Box2d Init - Call with await before starting LittleJS to init box2d
+ *  @return {Promise<Box2dPlugin>}
+ *  @memberof Box2D */
+async function box2dInit()
 {
-    Box2D().then(box2dInstance=>
-    {
-        // create box2d object
-        new Box2dPlugin(box2dInstance);
-        setupDebugDraw();
-
-        // start littlejs
-        engineAddPlugin(box2dUpdate, box2dRender);
-        engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources, rootElement);
-    });
+    // load box2d
+    new Box2dPlugin(await Box2D());
+    setupDebugDraw();
+    engineAddPlugin(box2dUpdate, box2dRender);
+    return box2d;
 
-    // hook up box2d plugin to update and render
+    // add the box2d plugin to the engine
     function box2dUpdate()
     {
         if (!paused)

package/examples/box2d/game.js

@@ -17,24 +17,21 @@ import * as GameObjects from './gameObjects.js';
 import * as Scenes from './scenes.js';
 const {vec2, hsl} = LJS;
 
+// use HD textures
+LJS.setCanvasPixelated(false);
+LJS.setTilesPixelated(false);
+
 ///////////////////////////////////////////////////////////////////////////////
 // game variables
 
-//LJS.box2dSetDebug(true); // enable box2d debug draw
-
 const maxScenes = 11;
-export let scene = 0, sceneName;
-export let spriteAtlas, groundObject, car, mouseJoint, repeatSpawnTimer = new LJS.Timer;
+const startScene = 0;
+export let spriteAtlas, groundObject, mouseJoint, repeatSpawnTimer = new LJS.Timer;
 const sound_click = new LJS.Sound([.2,.1,,,,.01,,,,,,,,,,,,,,,-500]);
 
-export function setSceneName(name) { sceneName = name; }
-export function setCarObject(carObject) { car = carObject; }
-
 ///////////////////////////////////////////////////////////////////////////////
-function setScene(_scene)
+function setScene(scene)
 {
-    scene = _scene;
-
     // setup
     LJS.setCameraPos(vec2(20,10));
     LJS.setGravity(vec2(0,-20));
@@ -42,7 +39,6 @@ function setScene(_scene)
     // destroy old scene
     LJS.engineObjectsDestroy();
     mouseJoint = 0;
-    car = 0;
     
     // create walls
     groundObject = GameObjects.spawnBox(vec2(0,-4), vec2(1e3,8), hsl(0,0,.2), LJS.box2d.bodyTypeStatic);
@@ -55,10 +51,14 @@ function setScene(_scene)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-function gameInit()
+async function gameInit()
 {
+    // start up LittleJS Box2D plugin
+    await LJS.box2dInit();
+    //LJS.box2dSetDebug(true); // enable box2d debug draw
+
     // create a table of all sprites
-    const gameTile = (i)=> LJS.tile(i, 16, 0, 1);
+    const gameTile = (i)=> LJS.tile(i, 496, 0, 8);
     spriteAtlas =
     {
         circle:         gameTile(0),
@@ -70,7 +70,7 @@ function gameInit()
         squareOutline2: gameTile(6),
     };
 
-    setScene(scene);
+    setScene(startScene);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -80,7 +80,19 @@ function gameUpdate()
     LJS.setCameraScale(LJS.mainCanvasSize.y * 48 / 1080);
 
     // mouse controls
-    if (LJS.mouseWasPressed(0))
+    if (mouseJoint)
+    {
+        // update mouse joint
+        mouseJoint.setTarget(LJS.mousePos);
+        if (LJS.mouseWasReleased(0))
+        {
+            // release object
+            sound_click.play(LJS.mousePos, 1, .5);
+            mouseJoint.destroy();
+            mouseJoint = 0;
+        }
+    }
+    else if (LJS.mouseWasPressed(0))
     {
         // grab object
         sound_click.play(LJS.mousePos);
@@ -88,16 +100,8 @@ function gameUpdate()
         if (object)
             mouseJoint = new LJS.Box2dTargetJoint(object, groundObject, LJS.mousePos);
     }
-    if (LJS.mouseWasReleased(0))
-    {
-        // release object
-        sound_click.play(LJS.mousePos, 1, .5);
-        if (mouseJoint)
-        {
-            mouseJoint.destroy();
-            mouseJoint = 0;
-        }
-    }
+
+    // controls
     if (LJS.mouseIsDown(1) || LJS.mouseIsDown('KeyZ'))
     {
         const isSet = repeatSpawnTimer.isSet();
@@ -112,23 +116,14 @@ function gameUpdate()
         repeatSpawnTimer.unset();
     if (LJS.mouseWasPressed(2) || LJS.keyWasPressed('KeyX'))
         GameObjects.explosion(LJS.mousePos);
-    if (mouseJoint)
-        mouseJoint.setTarget(LJS.mousePos);
 
     if (LJS.keyWasPressed('KeyR'))
         setScene(scene); // reset scene
     if (LJS.keyWasPressed('ArrowUp') || LJS.keyWasPressed('ArrowDown'))
     {
         // change scene
-        scene += LJS.keyWasPressed('ArrowUp') ? 1 : -1;
-        scene = LJS.mod(scene, maxScenes);
-        setScene(scene);
-    }
-    if (car)
-    {
-        // update car controls
-        const input = LJS.keyDirection();
-        car.applyMotorInput(-input.x);
+        const upPressed = LJS.keyWasPressed('ArrowUp');
+        setScene(LJS.mod(Scenes.scene + (upPressed?1:-1), maxScenes));
     }
 }
 
@@ -144,7 +139,7 @@ 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);
 
-    if (scene == 5)
+    if (Scenes.scene == 5)
     {
         // raycast test
         const count = 100;
@@ -174,15 +169,15 @@ function gameRenderPost()
     // draw to overlay canvas for hud rendering
     const pos = vec2(LJS.mainCanvasSize.x/2, 50);
     drawText('LittleJS Box2D Demo', 80, 80);
-    drawText(sceneName, 60, 100);
-    if (scene == 0)
+    drawText(Scenes.sceneName, 60, 100);
+    if (Scenes.scene == 0)
     {
         drawText('Mouse Left = Grab');
         drawText('Mouse Middle or Z = Spawn');
         drawText('Mouse Right or X = Explode');
         drawText('Arrows Up/Down = Change Scene');
     }
-    if (scene == 3)
+    if (Scenes.scene == 3)
     {
         drawText('Right = Accelerate');
         drawText('Left = Reverse');
@@ -195,4 +190,4 @@ function gameRenderPost()
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine with Box2D
 
-LJS.box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);