littlejsengine 1.12.4 → 1.13.1

package/plugins/box2d.js

@@ -1,31 +1,35 @@
 /**
  * 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
  */
 
 'use strict';
  
 /** 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; }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -72,7 +76,7 @@ class Box2dObject extends EngineObject
     /** Copy box2d update sim data */
     update()
     {
-        // use box2d physics update
+        // use box2d physics update instead of normal engine update
         this.pos = box2d.vec2From(this.body.GetPosition());
         this.angle = -this.body.GetAngle();
     }
@@ -1588,7 +1592,7 @@ class Box2dPlugin
      *  @param {Color} [outlineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=mainContext)
+    drawFixture(fixture, pos, angle, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -1624,7 +1628,7 @@ class Box2dPlugin
      *  @param {Color} [outlineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawCircle(pos, radius, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=mainContext)
+    drawCircle(pos, radius, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
     {
         drawCanvas2D(pos, vec2(1), 0, 0, context=>
         {
@@ -1642,7 +1646,7 @@ class Box2dPlugin
      *  @param {Color} [outlineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawPoly(pos, angle, points, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=mainContext)
+    drawPoly(pos, angle, points, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
     {
         drawCanvas2D(pos, vec2(1), angle, 0, context=>
         {
@@ -1661,7 +1665,7 @@ class Box2dPlugin
      *  @param {Color} [color]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawLine(pos, angle, posA, posB, color=WHITE, lineWidth=.1, context=mainContext)
+    drawLine(pos, angle, posA, posB, color=WHITE, lineWidth=.1, context=drawContext)
     {
         drawCanvas2D(pos, vec2(1), angle, 0, context=>
         {
@@ -1677,7 +1681,7 @@ class Box2dPlugin
      *  @param {Color} [outlineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFillStroke(color=WHITE, outlineColor=BLACK, lineWidth=.1, context=mainContext)
+    drawFillStroke(color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
     {
         if (color)
         {
@@ -1766,28 +1770,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();
+    // load box2d
+    new Box2dPlugin(await Box2D());
+    setupDebugDraw();
+    engineAddPlugin(box2dUpdate, box2dRender);
+    return box2d;
 
-        // start littlejs
-        engineAddPlugin(box2dUpdate, box2dRender);
-        engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources, rootElement);
-    });
-
-    // hook up box2d plugin to update and render
+    // add the box2d plugin to the engine
     function box2dUpdate()
     {
         if (!paused)
@@ -1866,4 +1860,4 @@ function box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameR
         //debugDraw.AppendFlags(box2d.instance.b2Draw.e_centerOfMassBit);
         box2d.world.SetDebugDraw(debugDraw);
     }
-}
+}

package/plugins/drawUtilities.js

@@ -0,0 +1,126 @@
+/**
+ * LittleJS Drawing Utilities Plugin
+ * - Extra drawing functions for LittleJS
+ * - Nine slice and three slice drawing
+ * @namespace DrawUtilities
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Draw a scalable nine-slice UI element to the overlay canvas in screen space
+ *  This function can not apply color because it draws using the overlay 2d context
+ *  @param {Vector2} pos - Screen space position
+ *  @param {Vector2} size - Screen space size
+ *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
+ *  @param {number} [borderSize] - Width of the border sections
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @memberof DrawUtilities */
+function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+{
+    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+}
+
+/** Draw a scalable nine-slice UI element in world space
+ *  This function can apply color and additive color if webgl is enabled
+ *  @param {Vector2} pos - World space position
+ *  @param {Vector2} size - World space size
+ *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
+ *  @param {Color} [color] - Color to modulate with
+ *  @param {number} [borderSize] - Width of the border sections
+ *  @param {Color} [additiveColor] - Additive color
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
+ *  @param {boolean} [screenSpace] - Use screen space coordinates
+ *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
+ *  @memberof DrawUtilities */
+function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+{
+    // setup nine slice tiles
+    const centerTile = startTile.offset(startTile.size);
+    const centerSize = size.add(vec2(extraSpace-borderSize*2));
+    const cornerSize = vec2(borderSize);
+    const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
+    const flip = screenSpace ? -1 : 1;
+
+    // center
+    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+    for(let i=4; i--;)
+    {
+        // sides
+        const horizontal = i%2;
+        const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-1:1));
+        const sideSize = vec2(horizontal ? borderSize : centerSize.x, horizontal ? centerSize.y : borderSize);
+        const sideTile = centerTile.offset(startTile.size.multiply(vec2(i==1?1:i==3?-1:0,i==0?-flip:i==2?flip:0)))
+        drawTile(pos.add(sidePos), sideSize, sideTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+    }
+    for(let i=4; i--;)
+    {
+        // corners
+        const flipX = i>1;
+        const flipY = i && i<3;
+        const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-1:1));
+        const cornerTile = centerTile.offset(startTile.size.multiply(vec2(flipX?-1:1,flipY?flip:-flip)));
+        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+    }
+}
+
+/** Draw a scalable three-slice UI element to the overlay canvas in screen space
+ *  This function can not apply color because it draws using the overlay 2d context
+ *  @param {Vector2} pos - Screen space position
+ *  @param {Vector2} size - Screen space size
+ *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
+ *  @param {number} [borderSize] - Width of the border sections
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @memberof DrawUtilities */
+function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+{
+    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+}
+
+/** Draw a scalable three-slice UI element in world space
+ *  This function can apply color and additive color if webgl is enabled
+ *  @param {Vector2} pos - World space position
+ *  @param {Vector2} size - World space size
+ *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
+ *  @param {Color} [color] - Color to modulate with
+ *  @param {number} [borderSize] - Width of the border sections
+ *  @param {Color} [additiveColor] - Additive color
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
+ *  @param {boolean} [screenSpace] - Use screen space coordinates
+ *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
+ *  @memberof DrawUtilities */
+function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+{
+    // setup three slice tiles
+    const cornerTile = startTile.frame(0);
+    const sideTile   = startTile.frame(1);
+    const centerTile = startTile.frame(2);
+    const centerSize = size.add(vec2(extraSpace-borderSize*2));
+    const cornerSize = vec2(borderSize);
+    const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
+    const flip = screenSpace ? -1 : 1;
+
+    // center
+    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+    for(let i=4; i--;)
+    {
+        // sides
+        const angle = i*PI/2;
+        const horizontal = i%2;
+        const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-flip:flip));
+        const sideSize = vec2(horizontal ? centerSize.y : centerSize.x, borderSize);
+        drawTile(pos.add(sidePos), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    }
+    for(let i=4; i--;)
+    {
+        // corners
+        const angle = i*PI/2;
+        const flipX = !i || i>2;
+        const flipY = i>1;
+        const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-flip:flip));
+        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    }
+}

package/plugins/newgrounds.js

@@ -174,4 +174,4 @@ class NewgroundsPlugin
         debugMedals && console.log(xmlHttp.responseText);
         return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
     }
-}
+}

package/plugins/pluginExport.js

@@ -30,7 +30,7 @@ export
     box2d,
     box2dDebug,
     box2dSetDebug,
-    box2dEngineInit,
+    box2dInit,
     Box2dPlugin,
     Box2dObject,
     Box2dRaycastResult,
@@ -47,4 +47,10 @@ export
     Box2dFrictionJoint,
     Box2dPulleyJoint,
     Box2dMotorJoint,
-};
+
+    // Drawing Utilities
+    drawNineSlice,
+    drawNineSliceScreen,
+    drawThreeSlice,
+    drawThreeSliceScreen,
+};

package/plugins/postProcess.js

@@ -78,7 +78,7 @@ class PostProcessPlugin
             else
             {
                 // set the viewport
-                glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+                glContext.viewport(0, 0, glCanvas.width = drawCanvas.width, glCanvas.height = drawCanvas.height);
             }
 
             if (postProcess.includeOverlay)
@@ -113,4 +113,4 @@ class PostProcessPlugin
             glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, 4);
         }
     }
-}
+}