littlejsengine 1.6.92 → 1.7.1

package/src/engineDraw.js

@@ -1,8 +1,9 @@
 /** 
  * LittleJS Drawing System
- * - Hybrid with both Canvas2D and WebGL available
+ * - Hybrid system with both Canvas2D and WebGL available
  * - Super fast tile sheet rendering with WebGL
  * - Can apply rotation, mirror, color and additive color
+ * - Font rendering system with built in engine font
  * - Many useful utility functions
  * 
  * LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
@@ -12,7 +13,6 @@
  * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
  * 
  * The WebGL rendering system is very fast with some caveats...
- * - The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
  * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
  * - Group additive rendering together using renderOrder to mitigate this issue
  * 
@@ -56,33 +56,29 @@ const tileImage = new Image;
 let tileImageSize, tileImageFixBleed, drawCount;
 
 /** Convert from screen to world space coordinates
- *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} screenPos
  *  @return {Vector2}
  *  @memberof Draw */
 function screenToWorld(screenPos)
 {
-    ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
-    return screenPos
-        .add(vec2(.5))
-        .subtract(mainCanvasSize.scale(.5))
-        .multiply(vec2(1/cameraScale,-1/cameraScale))
-        .add(cameraPos);
+    return new Vector2
+    (
+        (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale + cameraPos.x,
+        (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale + cameraPos.y
+    );
 }
 
 /** Convert from world to screen space coordinates
- *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} worldPos
  *  @return {Vector2}
  *  @memberof Draw */
 function worldToScreen(worldPos)
 {
-    ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
-    return worldPos
-        .subtract(cameraPos)
-        .multiply(vec2(cameraScale,-cameraScale))
-        .add(mainCanvasSize.scale(.5))
-        .subtract(vec2(.5));
+    return new Vector2
+    (
+        (worldPos.x - cameraPos.x) *  cameraScale + mainCanvasSize.x/2 - .5,
+        (worldPos.y - cameraPos.y) * -cameraScale + mainCanvasSize.y/2 - .5
+    );
 }
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
@@ -95,13 +91,21 @@ function worldToScreen(worldPos)
  *  @param {Boolean} [mirror=0]                     - If true image is flipped along the Y axis
  *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
+ *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color,
-    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable)
+    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
 {
     showWatermark && ++drawCount;
+    
     if (glEnable && useWebGL)
     {
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            size = size.scale(1/cameraScale);
+        }
         if (tileIndex < 0 || !tileImage.width)
         {
             // if negative tile index or image not found, force untextured
@@ -143,7 +147,7 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
                 context.globalAlpha = color.a; // only alpha is supported
                 context.drawImage(tileImage, sX, sY, sWidth, sHeight, -.5, -.5, 1, 1);
             }
-        });
+        }, undefined, screenSpace);
     }
 }
 
@@ -153,38 +157,30 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
  *  @param {Color}   [color=Color()]
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawRect(pos, size, color, angle, useWebGL)
-{
-    drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
-}
+function drawRect(pos, size, color, angle, useWebGL, screenSpace)
+{ drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, undefined, useWebGL, screenSpace); }
 
-/** Draw textured tile centered on pos in screen space
- *  @param {Vector2} pos                        - Center of the tile
- *  @param {Vector2} [size=Vector2(1,1)]    - Size of the tile
- *  @param {Number}  [tileIndex=-1]             - Tile index to use, negative is untextured
- *  @param {Vector2} [tileSize=tileSizeDefault] - Tile size in source pixels
+/** Draw colored polygon using passed in points
+ *  @param {Array}   points - Array of Vector2 points
  *  @param {Color}   [color=Color()]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [mirror=0]
- *  @param {Color}   [additiveColor=Color(0,0,0,0)]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL)
+function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
 {
-    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL);
-}
-
-/** Draw colored rectangle in screen space
- *  @param {Vector2} pos
- *  @param {Vector2} [size=Vector2(1,1)]
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @memberof Draw */
-function drawRectScreenSpace(pos, size, color, angle, useWebGL)
-{
-    drawTileScreenSpace(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
+    if (useWebGL)
+        glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
+    else
+    {
+        // draw using canvas
+        mainContext.fillStyle = color;
+        mainContext.beginPath();
+        for (const point of screenSpace ? points : points.map(worldToScreen))
+            mainContext.lineTo(point.x, point.y);
+        mainContext.fill();
+    }
 }
 
 /** Draw colored line between two points
@@ -193,12 +189,13 @@ function drawRectScreenSpace(pos, size, color, angle, useWebGL)
  *  @param {Number}  [thickness=.1]
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
 function drawLine(posA, posB, thickness=.1, color, useWebGL)
 {
     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);
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace);
 }
 
 /** Draw directly to a 2d canvas context in world space
@@ -208,12 +205,16 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL)
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
  *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext)
+function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext, screenSpace)
 {
-    // create canvas transform from world space to screen space
-    pos = worldToScreen(pos);
-    size = size.scale(cameraScale);
+    if (!screenSpace)
+    {
+        // create canvas transform from world space to screen space
+        pos = worldToScreen(pos);
+        size = size.scale(cameraScale);
+    }
     context.save();
     context.translate(pos.x+.5|0, pos.y+.5|0);
     context.rotate(angle);
@@ -320,6 +321,17 @@ class FontImage
         this.context = context;
     }
 
+    /** Draw text in world space using the image font
+     *  @param {String}  text
+     *  @param {Vector2} pos
+     *  @param {Number}  [scale=.25]
+     *  @param {Boolean} [center]
+     */
+    drawText(text, pos, scale=1, center)
+    {
+        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
+    }
+
     /** Draw text in screen space using the image font
      *  @param {String}  text
      *  @param {Vector2} pos
@@ -357,17 +369,6 @@ class FontImage
 
         context.restore();
     }
-
-    /** Draw text in world space using the image font
-     *  @param {String}  text
-     *  @param {Vector2} pos
-     *  @param {Number}  [scale=.25]
-     *  @param {Boolean} [center]
-     */
-    drawText(text, pos, scale=1, center)
-    {
-        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/src/engineExport.js

@@ -1,6 +1,6 @@
 /** 
  * LittleJS Module Export
- * - Export engine as a module with extra functions where necessary
+ * - Export engine as a module with functions where necessary
  */
 
 /** Set position of camera in world space
@@ -295,6 +295,10 @@ export {
 	mod,
 	clamp,
 	percent,
+	distanceWrap,
+	lerpWrap,
+	distanceAngle,
+	lerpAngle,
 	lerp,
 	smoothStep,
 	nearestPowerOfTwo,
@@ -309,11 +313,9 @@ export {
 	randInCircle,
 	randVector,
 	randColor,
-	randSeed,
-	setRandSeed,
-	randSeeded,
 
 	// Utility Classes
+	RandomGenerator,
 	Vector2,
 	Color,
 	Timer,

package/src/engineInput.js

@@ -1,9 +1,9 @@
 /** 
  * LittleJS Input System
- * - Tracks key down, pressed, and released
- * - Also tracks mouse buttons, position, and wheel
- * - Supports multiple gamepads
- * - Virtual gamepad for touch devices with touchGamepadSize
+ * - Tracks keyboard down, pressed, and released
+ * - Tracks mouse buttons, position, and wheel
+ * - Tracks multiple analog gamepads
+ * - Virtual gamepad for touch devices
  * @namespace Input
  */
 
@@ -275,40 +275,32 @@ if (isTouchDevice)
     let wasTouching, mouseDown = onmousedown, mouseUp = onmouseup;
     onmousedown = onmouseup = ()=> 0;
 
-    // setup touch input
-    ontouchstart = (e)=>
+    // handle all touch events the same way
+    ontouchstart = ontouchmove = ontouchend = (e)=>
     {
-        // fix mobile audio, force it to play a sound on first touch
-        zzfx(0);
+        e.button = 0; // all touches are left click
 
-        // handle all touch events the same way
-        ontouchstart = ontouchmove = ontouchend = (e)=>
-        {
-            e.button = 0; // all touches are left click
-
-            // check if touching and pass to mouse events
-            const touching = e.touches.length;
-            if (touching)
-            {
-                // set event pos and pass it along
-                e.x = e.touches[0].clientX;
-                e.y = e.touches[0].clientY;
-                wasTouching ? onmousemove(e) : mouseDown(e);
-            }
-            else if (wasTouching)
-                mouseUp(e);
-
-            // set was touching
-            wasTouching = touching;
+        // fix stalled audio on mobile
+        if (soundEnable)
+            audioContext ? audioContext.resume() : zzfx(0);
 
-            // must return true so the document will get focus
-            return true;
+        // check if touching and pass to mouse events
+        const touching = e.touches.length;
+        if (touching)
+        {
+            // set event pos and pass it along
+            e.x = e.touches[0].clientX;
+            e.y = e.touches[0].clientY;
+            wasTouching ? onmousemove(e) : mouseDown(e);
         }
+        else if (wasTouching)
+            mouseUp(e);
 
-        // try to create touch game pad
-        touchGamepadEnable && touchGamepadCreate();
+        // set was touching
+        wasTouching = touching;
 
-        return ontouchstart(e);
+        // must return true so the document will get focus
+        return true;
     }
 }
 
@@ -319,13 +311,13 @@ if (isTouchDevice)
 let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
 
 // create the touch gamepad, called automatically by the engine
-function touchGamepadCreate()
+if (touchGamepadEnable)
 {
     // touch input internal variables
     touchGamepadButtons = [];
     touchGamepadStick = vec2();
 
-    let touchHandler = ontouchstart;
+    const touchHandler = ontouchstart;
     ontouchstart = ontouchmove = ontouchend = (e)=> 
     {
         // clear touch gamepad input

package/src/engineObject.js

@@ -6,12 +6,12 @@
 
 /** 
  * LittleJS Object Base Object Class
- * - Base object class used by the engine
+ * - Top level object class used by the engine
  * - Automatically adds self to object list
  * - Will be updated and rendered each frame
  * - Renders as a sprite from a tilesheet by default
  * - Can have color and addtive color applied
- * - 2d Physics and collision system
+ * - 2D Physics and collision system
  * - Sorted by renderOrder
  * - Objects can have children attached
  * - Parents are updated before children, and set child transform

package/src/engineRelease.js

@@ -1,6 +1,5 @@
 /** 
- * LittleJS - Release Build
- * MIT License - Copyright 2021 Frank Force
+ * LittleJS - Release Mode
  * - This file is used for release builds in place of engineDebug.js
  * - Debug functionality is disabled to reduce size and increase performance
  */

package/src/engineSettings.js

@@ -1,5 +1,6 @@
 /**
  * LittleJS Engine Settings
+ * - All settings for the engine are here
  * @namespace Settings
  */
 

package/src/engineUtilities.js

@@ -4,6 +4,7 @@
  * - Vector2 - fast, simple, easy 2D vector class
  * - Color - holds a rgba color with some math functions
  * - Timer - tracks time automatically
+ * - RandomGenerator - seeded random number generator
  * @namespace Utilities
  */
 
@@ -54,25 +55,58 @@ function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % di
  *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-function clamp(value, min=0, max=1)
-{ return value < min ? min : value > max ? max : value; }
+function clamp(value, min=0, max=1) { return value < min ? min : value > max ? max : value; }
 
-/** Returns what percentage the value is between max and min
+/** Returns what percentage the value is between valueA and valueB
  *  @param {Number} value
- *  @param {Number} [min=0]
- *  @param {Number} [max=1]
+ *  @param {Number} valueA
+ *  @param {Number} valueB
  *  @return {Number}
  *  @memberof Utilities */
-function percent(value, min=0, max=1)
-{ return max-min ? clamp((value-min) / (max-min)) : 0; }
+function percent(value, valueA, valueB)
+{ return valueB-valueA ? clamp((value-valueA) / (valueB-valueA)) : 0; }
 
-/** Linearly interpolates the percent value between max and min
+/** Linearly interpolates between values passed in using percent
  *  @param {Number} percent
- *  @param {Number} [min=0]
- *  @param {Number} [max=1]
+ *  @param {Number} valueA
+ *  @param {Number} valueB
  *  @return {Number}
  *  @memberof Utilities */
-function lerp(percent, min=0, max=1){ return min + clamp(percent) * (max-min); }
+function lerp(percent, valueA, valueB) { return valueA + clamp(percent) * (valueB-valueA); }
+
+/** Returns signed wrapped distance between the two values passed in
+ *  @param {Number} valueA
+ *  @param {Number} valueB
+ *  @param {Number} [wrapSize=1]
+ *  @returns {Number}
+ *  @memberof Utilities */
+function distanceWrap(valueA, valueB, wrapSize=1)
+{ const d = (valueA - valueB) % wrapSize; return d*2 % wrapSize - d; }
+
+/** Linearly interpolates between values passed in with wrappping
+ *  @param {Number} percent
+ *  @param {Number} valueA
+ *  @param {Number} valueB
+ *  @param {Number} [wrapSize=1]
+ *  @returns {Number}
+ *  @memberof Utilities */
+function lerpWrap(percent, valueA, valueB, wrapSize=1)
+{ return valueB + clamp(percent) * distanceWrap(valueA, valueB, wrapSize); }
+
+/** Returns signed wrapped distance between the two angles passed in
+ *  @param {Number} angleA
+ *  @param {Number} angleB
+ *  @returns {Number}
+ *  @memberof Utilities */
+function distanceAngle(angleA, angleB) { distanceWrap(angleA, angleB, 2*PI); }
+
+/** Linearly interpolates between the angles passed in with wrappping
+ *  @param {Number} percent
+ *  @param {Number} angleA
+ *  @param {Number} angleB
+ *  @returns {Number}
+ *  @memberof Utilities */
+function lerpAngle(percent, angleA, angleB) { return lerpWrap(percent, angleA, angleB, 2*PI); }
 
 /** Applies smoothstep function to the percentage value
  *  @param {Number} percent
@@ -127,17 +161,23 @@ function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
 function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valueB); }
 
 /** Returns a floored random value the two values passed in
- *  @param {Number} [valueA=1]
+ *  @param {Number} valueA
  *  @param {Number} [valueB=0]
  *  @return {Number}
  *  @memberof Random */
-function randInt(valueA=1, valueB=0) { return Math.floor(rand(valueA,valueB)); }
+function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
 
 /** Randomly returns either -1 or 1
  *  @return {Number}
  *  @memberof Random */
 function randSign() { return randInt(2) * 2 - 1; }
 
+/** Returns a random Vector2 with the passed in length
+ *  @param {Number} [length=1]
+ *  @return {Vector2}
+ *  @memberof Random */
+function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length); }
+
 /** Returns a random Vector2 within a circular shape
  *  @param {Number} [radius=1]
  *  @param {Number} [minRadius=0]
@@ -146,12 +186,6 @@ function randSign() { return randInt(2) * 2 - 1; }
 function randInCircle(radius=1, minRadius=0)
 { return radius > 0 ? randVector(radius * rand(minRadius / radius, 1)**.5) : new Vector2; }
 
-/** Returns a random Vector2 with the passed in length
- *  @param {Number} [length=1]
- *  @return {Vector2}
- *  @memberof Random */
-function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length); }
-
 /** Returns a random color between the two passed in colors, combine components if linear
  *  @param {Color}   [colorA=Color()]
  *  @param {Color}   [colorB=Color(0,0,0,1)]
@@ -164,29 +198,50 @@ function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear)
         new Color(rand(colorA.r,colorB.r), rand(colorA.g,colorB.g), rand(colorA.b,colorB.b), rand(colorA.a,colorB.a));
 }
 
-/** Seed used by the randSeeded function
- *  @type {Number}
- *  @default
- *  @memberof Random */
-let randSeed = 1;
-
-/** Set seed used by the randSeeded function, should not be 0
- *  @param {Number} seed
- *  @memberof Random */
-function setRandSeed(seed) { randSeed = seed; }
+///////////////////////////////////////////////////////////////////////////////
 
-/** Returns a seeded random value between the two values passed in using randSeed
- *  @param {Number} [valueA=1]
- *  @param {Number} [valueB=0]
- *  @return {Number}
- *  @memberof Random */
-function randSeeded(valueA=1, valueB=0)
+/** 
+ * Seeded random number generator
+ * - Can be used to create a deterministic random number sequence
+ * @example
+ * let r = new RandomGenerator(123); // random number generator with seed 123
+ * let a = r.rand();                 // random value between 0 and 1
+ * let b = r.randInt(10);            // random integer between 0 and 9
+ * r.seed = 123;                     // reset the seed
+ * let c = r.rand();                 // the same value as a
+ */
+class RandomGenerator
 {
-    // xorshift algorithm
-    randSeed ^= randSeed << 13; 
-    randSeed ^= randSeed >>> 17; 
-    randSeed ^= randSeed << 5;
-    return valueB + (valueA-valueB) * abs(randSeed % 1e9) / 1e9;
+    /** Create a random number generator with the seed passed in
+     *  @param {Number} seed - Starting seed */
+    constructor(seed)
+    {
+        /** @property {Number} - random seed */
+        this.seed = seed;
+    }
+
+    /** Returns a seeded random value between the two values passed in
+    *  @param {Number} [valueA=1]
+    *  @param {Number} [valueB=0]
+    *  @return {Number} */
+    float(valueA=1, valueB=0)
+    {
+        // xorshift algorithm
+        this.seed ^= this.seed << 13; 
+        this.seed ^= this.seed >>> 17; 
+        this.seed ^= this.seed << 5;
+        return valueB + (valueA - valueB) * abs(this.seed % 1e9) / 1e9;
+    }
+
+    /** Returns a floored seeded random value the two values passed in
+    *  @param {Number} valueA
+    *  @param {Number} [valueB=0]
+    *  @return {Number} */
+    int(valueA, valueB=0) { return Math.floor(this.rand(valueA, valueB)); }
+
+    /** Randomly returns either -1 or 1 deterministically
+    *  @return {Number} */
+    sign() { return this.randInt(2) * 2 - 1; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////