littlejsengine 1.17.1 → 1.17.10

package/plugins/box2d.js

@@ -9,6 +9,7 @@
  * - Contact begin and end callbacks
  * - Wraps b2Vec2 type to/from Vector2
  * - Raycasting and querying
+ * - Box2dTileLayer for grid based collision
  * - Every type of joint
  * - Debug physics drawing
  * @namespace Box2D
@@ -60,21 +61,24 @@ class Box2dObject extends EngineObject
         bodyDef.set_type(bodyType);
         bodyDef.set_position(box2d.vec2dTo(pos));
         bodyDef.set_angle(-angle);
+        
+        /** @property {Object} - The Box2d body */
         this.body = box2d.world.CreateBody(bodyDef);
-        this.body.object = this;
+        /** @property {Color} - Line color used for default box2d drawing */
         this.lineColor = BLACK;
-        box2d.objects.push(this);
-        
-        // edge lists and loops for drawing
+        /** @property {Array<Object>} - List of all edges for default box2d drawing */
         this.edgeLists = [];
+        /** @property {Array<Object>} - List of all edge loops for default box2d drawing */
         this.edgeLoops = [];
+
+        this.body.object = this; // link body to this object
+        box2d.objects.push(this); // keep track of all box2d objects
     }
 
     /** Destroy this object and its physics body */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         // destroy physics body, fixtures, and joints
         ASSERT(this.body, 'Box2dObject has no body to destroy');
@@ -105,11 +109,12 @@ class Box2dObject extends EngineObject
     }
 
     /** Draws all this object's fixtures 
-     *  @param {Color}  [color]
-     *  @param {Color}  [lineColor]
-     *  @param {number} [lineWidth]
+     *  @param {Color}   [color]
+     *  @param {Color}   [lineColor]
+     *  @param {number}  [lineWidth]
+     *  @param {boolean} [useWebGL=glEnable]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixtures(color=WHITE, lineColor=BLACK, lineWidth=.1, context)
+    drawFixtures(color=WHITE, lineColor=BLACK, lineWidth=.1, useWebGL, context)
     {
         // draw non-edge fixtures
         this.getFixtureList().forEach((fixture)=>
@@ -117,7 +122,7 @@ class Box2dObject extends EngineObject
             const shape = box2d.castObjectType(fixture.GetShape());
             if (shape.GetType() !== box2d.instance.b2Shape.e_edge)
             {
-                box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context);
+                box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, useWebGL, context);
             }
         });
 
@@ -343,6 +348,14 @@ class Box2dObject extends EngineObject
         return fixtures;
     }
 
+    /** Destroy a fixture from the body
+     *  @param {Object} [fixture] */
+    destroyFixture(fixture) { this.body.DestroyFixture(fixture); }
+
+    /** Destroy all fixture from the body */
+    destroyAllFixtures()
+    { this.getFixtureList().forEach(fixture=>this.destroyFixture(fixture)); }
+
     ///////////////////////////////////////////////////////////////////////////////
     // physics get functions
 
@@ -575,6 +588,135 @@ class Box2dObject extends EngineObject
     }
 }
 
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * Box2D Static Object - Box2d with a static physics body
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dStaticObject extends Box2dObject 
+{
+    /** Create a LittleJS object with Box2d physics
+     *  @param {Vector2}  [pos]
+     *  @param {Vector2}  [size]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {number}   [angle]
+     *  @param {Color}    [color]
+     *  @param {number}   [renderOrder] */
+    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
+    {
+        const bodyType = box2d.bodyTypeStatic;
+        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * Box2D Kinematic Object - Box2d with a kinematic physics body
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dKinematicObject extends Box2dObject 
+{
+    /** Create a LittleJS object with Box2d physics
+     *  @param {Vector2}  [pos]
+     *  @param {Vector2}  [size]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {number}   [angle]
+     *  @param {Color}    [color]
+     *  @param {number}   [renderOrder] */
+    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
+    {
+        const bodyType = box2d.bodyTypeKinematic;
+        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Box2d Tile Layer
+ * - adds Box2d support to tile layers
+ * - creates static box2d fixtures for solid tiles
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dTileLayer extends Box2dStaticObject
+{
+    /** Create a Box2d tile layer object
+    *  @param {TileCollisionLayer} tileLayer - Tile layer for this object */
+    constructor(tileLayer)
+    {
+        ASSERT(tileLayer instanceof TileCollisionLayer, 'tileLayer must be a TileCollisionLayer');
+        super(tileLayer.pos, tileLayer.size);
+
+        /** @property {TileLayer} - The tile layer */
+        this.tileLayer = tileLayer;
+        this.addChild(tileLayer);
+    }
+
+    render()
+    {
+        // do not render fixtures, tile layer handles rendering
+    }
+    
+    /** Create box2d collision fixtures for solid tiles
+    *  @param {number} [friction]
+    *  @param {number} [restitution] */
+    buildCollision(friction=.2, restitution=0)
+    {
+        // destroy all fixtures and create new ones
+        this.destroyAllFixtures();
+
+        // create box2d object for this layer
+        this.pos = this.tileLayer.pos.copy();
+        this.size = this.tileLayer.size.copy();
+
+        // track which tiles have been processed
+        const processed = [];
+        const getIndex = (x, y)=> x + y * this.size.x;
+        const isSolidUnprocessed = (x, y)=>
+            !processed[getIndex(x, y)] &&
+            this.tileLayer.getCollisionData(vec2(x, y)) > 0;
+
+        // combine tiles into larger boxes
+        for (let x = 0; x < this.size.x; ++x)
+        for (let y = 0; y < this.size.y; ++y)
+        {
+            if (!isSolidUnprocessed(x, y)) continue;
+
+            // find max width by scanning right
+            let width = 1, height = 1, canExpand = true;
+            while (isSolidUnprocessed(x + width, y))
+                ++width;
+
+            // find max height by scanning up, ensuring all rows have the same width
+            while (canExpand)
+            {
+                for (let checkX = 0; checkX < width; ++checkX)
+                {
+                    if (!isSolidUnprocessed(x + checkX, y + height))
+                    {
+                        canExpand = false;
+                        break;
+                    }
+                }
+                if (canExpand)
+                    ++height;
+            }
+
+            // mark all tiles in this rectangle as processed
+            for (let rectX = width;  rectX--;)
+            for (let rectY = height; rectY--;)
+                processed[getIndex(x + rectX, y + rectY)] = true;
+
+            // create a single fixture for the entire rectangle
+            const shapeSize = vec2(width, height);
+            const offset = vec2(x + width/2, y + height/2);
+            this.addBox(shapeSize, offset, 0, 0, friction, restitution);
+        }
+    }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Box2D Raycast Result
@@ -616,6 +758,7 @@ class Box2dJoint
      *  @param {Object} jointDef */
     constructor(jointDef)
     {
+        /** @property {Object} - The Box2d joint */
         this.box2dJoint = box2d.castObjectType(box2d.world.CreateJoint(jointDef));
     }
 
@@ -962,7 +1105,7 @@ class Box2dGearJoint extends Box2dJoint
      *  @param {Box2dObject} objectB
      *  @param {Box2dJoint} joint1
      *  @param {Box2dJoint} joint2
-     *  @param {ratio} [ratio] */
+     *  @param {number} [ratio] */
     constructor(objectA, objectB, joint1, joint2, ratio=1)
     {
         const jointDef = new box2d.instance.b2GearJointDef();
@@ -1104,50 +1247,6 @@ class Box2dPrismaticJoint extends Box2dJoint
     getMotorForce(time) { return this.box2dJoint.GetMotorForce(1/time); }
 }
 
-///////////////////////////////////////////////////////////////////////////////
-/** 
- * Box2D Static Object - Box2d with a static physics body
- * @extends Box2dObject
- * @memberof Box2D
- */
-class Box2dStaticObject extends Box2dObject 
-{
-    /** Create a LittleJS object with Box2d physics
-     *  @param {Vector2}  [pos]
-     *  @param {Vector2}  [size]
-     *  @param {TileInfo} [tileInfo]
-     *  @param {number}   [angle]
-     *  @param {Color}    [color]
-     *  @param {number}   [renderOrder] */
-    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
-    {
-        const bodyType = box2d.bodyTypeStatic;
-        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-/** 
- * Box2D Kiematic Object - Box2d with a kinematic physics body
- * @extends Box2dObject
- * @memberof Box2D
- */
-class Box2dKiematicObject extends Box2dObject 
-{
-    /** Create a LittleJS object with Box2d physics
-     *  @param {Vector2}  [pos]
-     *  @param {Vector2}  [size]
-     *  @param {TileInfo} [tileInfo]
-     *  @param {number}   [angle]
-     *  @param {Color}    [color]
-     *  @param {number}   [renderOrder] */
-    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
-    {
-        const bodyType = box2d.bodyTypeKinematic;
-        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
-    }
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Box2D Wheel Joint
@@ -1508,10 +1607,13 @@ class Box2dPlugin
     {
         ASSERT(!box2d, 'Box2D already initialized');
         box2d = this;
+
+        /** @property {Object} - The Box2d instance */
         this.instance = instance;
+        /** @property {Object} - The Box2d world */
         this.world = new box2d.instance.b2World();
+        /** @property {Array<Box2dObject>} - List of all Box2d objects */
         this.objects = [];
-
         /** @property {number} - Velocity iterations per update*/
         this.velocityIterations = 8;
         /** @property {number} - Position iterations per update*/
@@ -1710,8 +1812,9 @@ class Box2dPlugin
      *  @param {Color} [color]
      *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
+     *  @param {boolean} [useWebGL=glEnable]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context)
+    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, useWebgl, context)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -1721,20 +1824,20 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                drawPoly(points, color, lineWidth, lineColor, pos, angle);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebgl, false, context);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                drawCircle(pos, radius*2, color, lineWidth, lineColor);
+                drawCircle(pos, radius*2, color, lineWidth, lineColor, useWebgl, false, context);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
             {
                 const v1 = box2d.vec2From(shape.get_m_vertex1());
                 const v2 = box2d.vec2From(shape.get_m_vertex2());
-                drawLine(v1, v2, lineWidth, lineColor, pos, angle);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle, useWebgl, false, context);
                 break;
             }
         }
@@ -1752,7 +1855,7 @@ class Box2dPlugin
     }
 
     /** converts a box2d vec2 pointer to a Vector2
-     *  @param {Object} v */
+     *  @param {Object} vp */
     vec2FromPointer(vp)
     {
         const v = box2d.instance.wrapPointer(vp, box2d.instance.b2Vec2);
@@ -1864,7 +1967,7 @@ async function box2dInit()
         const box2dColorPointer = (c)=>
             box2dColor(box2d.instance.wrapPointer(c, box2d.instance.b2Color));
         const getDebugColor = (color)=>box2dColorPointer(color).scale(1,.8);
-        const getPointsList = (vertices, vertexCount) =>
+        const getPointsList = (vertices, vertexCount)=>
         {
             const points = [];
             for (let i=vertexCount; i--;)

package/plugins/pluginExport.js

@@ -37,7 +37,7 @@ export
     Box2dPlugin,
     Box2dObject,
     Box2dStaticObject,
-    Box2dKiematicObject,
+    Box2dKinematicObject,
     Box2dRaycastResult,
     Box2dJoint,
     Box2dTargetJoint,

package/plugins/postProcess.js

@@ -24,7 +24,7 @@ class PostProcessPlugin
 {
     /** Create global post processing shader
     *  @param {string} shaderCode
-    *  @param {boolean} [includeMainCanvas] - combine mainCanvs onto glCanvas
+    *  @param {boolean} [includeMainCanvas] - combine mainCanvas onto glCanvas
     *  @param {boolean} [feedbackTexture] - use glCanvas from previous frame as the texture
     *  @example
     *  // create the post process plugin object

package/plugins/uiSystem.js

@@ -30,7 +30,7 @@ let uiDebug = 0;
 
 /** Enable UI system debug drawing
  *  0=off, 1=normal, 2=show invisible
- *  @param {number|boolean} enable
+ *  @param {number|boolean} debugMode
  *  @memberof UISystem */
 function uiSetDebug(debugMode)
 { uiDebug = typeof debugMode === 'boolean' ? (debugMode ? 1 : 0) : debugMode; }
@@ -96,7 +96,7 @@ class UISystemPlugin
         // navigation properties
         /** @property {UIObject} - Object currently selected by navigation (gamepad or keyboard) */
         this.navigationObject = undefined;
-        /** @property {Timer} - Cooldown timer for navigation inputs */
+        /** @property {Timer} - Cool down timer for navigation inputs */
         this.navigationTimer = new Timer(undefined, true);
         /** @property {number} - Time between navigation inputs in seconds */
         this.navigationDelay = .2;
@@ -562,7 +562,7 @@ class UISystemPlugin
 
         const savedNavigationDirection = uiSystem.navigationDirection;
 
-        // allow both axies for navigation
+        // allow both axes for navigation
         uiSystem.navigationDirection = 2;
 
         // confirm menu
@@ -657,7 +657,7 @@ class UIObject
         this.lineWidth = uiSystem.defaultLineWidth;
         /** @property {number} - Corner radius for rounded rects */
         this.cornerRadius = uiSystem.defaultCornerRadius;
-        /** @property {string} - Font for this objecct */
+        /** @property {string} - Font for this object */
         this.font = uiSystem.defaultFont;
         /** @property {string} - Font style for this object or undefined */
         this.fontStyle = undefined;
@@ -1145,6 +1145,8 @@ class UIScrollbar extends UIObject
         this.value = value;
         /** @property {Color} - Color for the handle part of the scrollbar */
         this.handleColor = handleColor.copy();
+        /** @property {boolean} - Should it fill up like a progress bar? */
+        this.fillMode = false;
 
         // set properties
         this.text = text;
@@ -1190,19 +1192,30 @@ class UIScrollbar extends UIObject
 
         // handle horizontal or vertical scrollbar
         const isHorizontal = this.size.x > this.size.y;
-        const handleSize = isHorizontal ? this.size.y : this.size.x;
-        const barSize = isHorizontal ? this.size.x : this.size.y;
-        const centerPos = isHorizontal ? this.pos.x : this.pos.y;
-        
-        // draw the scrollbar handle
-        const handleWidth = barSize - handleSize;
-        const p1 = centerPos - handleWidth/2;
-        const p2 = centerPos + handleWidth/2;
-        const handlePos = isHorizontal ? 
-            vec2(lerp(p1, p2, this.value), this.pos.y) :
-            vec2(this.pos.x, lerp(p2, p1, this.value))
-        const handleColor = this.disabled ? this.disabledColor : this.handleColor;
-        uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        const barWidth = isHorizontal ? this.size.x : this.size.y;
+        const handleWidth = isHorizontal ? this.size.y : this.size.x;
+        if (this.fillMode)
+        {
+            // draw progress bar
+            const minWidth = min(handleWidth, this.cornerRadius * 2);
+            const progressWidth = lerp(minWidth, barWidth, this.value);
+            const p = (progressWidth - barWidth) * (isHorizontal ? .5 : -.5);
+            const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p));
+            const color = this.disabled ? this.disabledColor : this.handleColor;
+            const drawSize = isHorizontal ? 
+                vec2(progressWidth, this.size.y) : vec2(this.size.x, progressWidth);
+            uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        }
+        else
+        {
+            // draw the scrollbar handle
+            const value = isHorizontal ? this.value : 1 - this.value;
+            const p = (barWidth - handleWidth) * (value - .5);
+            const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p));
+            const color = this.disabled ? this.disabledColor : this.handleColor;
+            const drawSize = vec2(handleWidth);
+            uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        }
 
         // draw the text scaled to fit on the scrollbar
         const textSize = this.getTextSize();
@@ -1224,15 +1237,15 @@ class UIScrollbar extends UIObject
  * @extends UIObject
  * @example
  * // Create a video player UI object
- * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'cutscene.mp4', true);
+ * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'video.mp4', true);
  * video.play();
  * @memberof UISystem
  */
 class UIVideo extends UIObject
 {
     /** Create a video player UI object
-     *  @param {Vector2} [pos]
-     *  @param {Vector2} [size]
+     *  @param {Vector2} pos
+     *  @param {Vector2} size
      *  @param {string} src - Video file path or URL
      *  @param {boolean} [autoplay=false] - Start playing immediately?
      *  @param {boolean} [loop=false] - Loop the video?

package/plugins/zzfxm.js

@@ -55,7 +55,7 @@ class ZzFXMusic extends Sound
     /** Play the music that loops by default
      *  @param {number}  [volume] - Volume to play the music at
      *  @param {boolean} [loop] - Should the music loop?
-     *  @return {AudioBufferSourceNode} - The audio source node
+     *  @return {SoundInstance} - The sound instance
      */
     playMusic(volume=1, loop=true)
     { return super.play(undefined, volume, 1, 0, loop); }
@@ -102,7 +102,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
     sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
 
     // for each pattern in sequence
-    sequence.forEach((patternIndex, sequenceIndex) => {
+    sequence.forEach((patternIndex, sequenceIndex)=> {
       // get pattern for current channel, use empty 1 note pattern if none found
       patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
 

package/reference.md

@@ -205,8 +205,8 @@ tileDefaultBleed = .3     // How much smaller to draw tiles to prevent bleeding
 
 ```javascript
 // Sound Object
-Sound(zzfxSound, range, taper)                         // Create a zzfx sound
-SoundWave(filename, randomness=0, range, taper)        // Load a wave, mp3, or ogg
+Sound(zzfxSound, randomness, range, taper)             // Create a zzfx sound
+Sound(filename, randomness, range, taper)              // Load a wave, mp3, or ogg
 Sound.play(pos, volume=1, pitch=1, randomness=1, loop) // Play a sound, returns SoundInstance
 Sound.playMusic(volume=1, loop=true)                   // Play as music with looping
 Sound.playNote(semitoneOffset, pos, volume=1)          // Play as note with a semitone offset
@@ -371,15 +371,16 @@ engineObjectsDestroy()
 ```javascript
 
 // Canvas Layer
-CanvasLayer(position, size) // Create a canvas layer object
+CanvasLayer(pos, size)      // Create a canvas layer object
 CanvasLayer.canvas          // The canvas used by this layer
 CanvasLayer.context         // The 2D context of the canvas
 CanvasLayer.getImageData()  // Get image data from canvas
 CanvasLayer.updateWebGL()   // Creates or updates WebGL texture
 
 // LittleJS Layer System
-TileLayer(position, size, tileInfo, scale)     // Create a tile layer object
+TileLayer(pos, size, tileInfo, scale)          // Create a tile layer object
 TileLayer.setData(layerPos, data, redraw)      // Set data at position
+TileLayer.clearData(layerPos, redraw)          // Clear data at position
 TileLayer.getData(layerPos)                    // Get data at position
 TileLayer.redraw()                             // Draw to an offscreen canvas
 TileLayer.drawTileData(layerPos, clear=true)   // Draw the tile
@@ -392,12 +393,12 @@ TileLayerData(tile, direction=0, mirror=false, color=WHITE) // Create tile data
 TileLayerData.clear()                                       // Clear this tile data
 
 // Tile Collision Layer
-TileCollisionLayer(position, size, tileInfo=tile()) // Create a tile collision layer object
+TileCollisionLayer(pos, size, tileInfo=tile())      // Create a tile collision layer object
 TileCollisionLayer.setCollisionData(pos, data=1)    // Set tile collision data at pos
 tileCollisionGetData(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
-tileLayersLoad(tileMapData, tileInfo)            // Load tile layers from exported data
+tileLayersLoad(tileMapData, tileInfo)               // Load tile layers from exported data
 
 ```
 
@@ -407,8 +408,8 @@ tileLayersLoad(tileMapData, tileInfo)            // Load tile layers from export
 
 ```javascript
 // Particle Emitter Object
-ParticleEmitter(position, angle, ...settings) // Create a particle system
-ParticleEmitter.emitParticle()                // Spawn one particle
+ParticleEmitter(pos, angle, ...settings) // Create a particle system
+ParticleEmitter.emitParticle()           // Spawn one particle
 
 // Particle Settings
 particleEmitRateScale = 1 // Scales particles emit rate