littlejsengine 1.12.4 → 1.12.6

package/examples/box2d/gameObjects.js

@@ -14,12 +14,16 @@ const {vec2, hsl} = LJS;
 ///////////////////////////////////////////////////////////////////////////////
 // spawn object functions
 
+const density = 1;
+const friction = .5;
+const restitution = .2;
+
 export function spawnBox(pos, size=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, applyTexture=true, angle=0)
 {
     size = typeof size == 'number' ? vec2(size) : size; // square
     const o = new LJS.Box2dObject(pos, size, applyTexture && Game.spriteAtlas.squareOutline, angle, color, type);
     o.drawSize = size.scale(1.02); // slightly enlarge to cover gaps
-    o.addBox(size);
+    o.addBox(size, vec2(), 0, density, friction, restitution);
     return o;
 }
 
@@ -27,14 +31,14 @@ export function spawnCircle(pos, diameter=1, color=LJS.WHITE, type=LJS.box2d.bod
 {
     const size = vec2(diameter);
     const o = new LJS.Box2dObject(pos, size, applyTexture && Game.spriteAtlas.circleOutline, angle, color, type);
-    o.addCircle(diameter);
+    o.addCircle(diameter, vec2(), density, friction, restitution);
     return o;
 }
 
 export function spawnRandomPoly(pos, diameter=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, angle=0)
 {
     const o = new LJS.Box2dObject(pos, vec2(), 0, angle, color, type);
-    o.addRandomPoly(diameter);
+    o.addRandomPoly(diameter, vec2(), 0, density, friction, restitution);
     return o;
 }
 
@@ -101,7 +105,7 @@ export class CarObject extends LJS.Box2dObject
 {
     constructor(pos)
     {
-        super(pos, vec2(), 0, 0, LJS.randColor());
+        super(pos, vec2(), 0, 0, LJS.RED);
         const carPoints = [
             vec2(-1.5,-.5),
             vec2(1.5, -.5),
@@ -112,50 +116,49 @@ export class CarObject extends LJS.Box2dObject
         ];
         this.addPoly(carPoints);
 
+        // create wheels
+        const diameter    = 1;
+        const density     = 1;
+        const friction    = 1;
+        const restitution = 0;
+        const damping     = .7;
+        const frequency   = 4;
+        const maxTorque   = 35;
+        const sprite      = Game.spriteAtlas.wheel;
+        this.wheels = [];
+        const makeWheel = (pos, isMotor) =>
         {
-            // wheel settings
-            const diameter    = .8;
-            const density     = 1;
-            const friction    = 2;
-            const restitution = 0;
-            const damping     = .7;
-            const frequencyHz = 4;
-            const maxTorque   = 50;
-            const sprite      = Game.spriteAtlas.wheel;
-
-            // create wheels
-            this.wheels = [];
-            const makeWheel = (pos, isMotor) =>
+            const wheel = new LJS.Box2dObject(pos, vec2(diameter), sprite);
+            const joint = new LJS.Box2dWheelJoint(this, wheel);
+            joint.setSpringDampingRatio(damping);
+            joint.setSpringFrequencyHz(frequency);
+            if (isMotor)
             {
-                const wheel = new LJS.Box2dObject(pos, vec2(diameter), sprite);
-                wheel.addCircle(diameter, vec2(), density, friction, restitution);
-                this.wheels.push(wheel);
-                const joint = new LJS.Box2dWheelJoint(this, wheel);
-                joint.setSpringDampingRatio(damping);
-                joint.setSpringFrequencyHz(frequencyHz);
-                if (isMotor)
-                {
-                    joint.setMaxMotorTorque(maxTorque);
-                    joint.enableMotor(true);
-                    this.wheelMotorJoint = joint;
-                }
+                joint.enableMotor();
+                joint.setMaxMotorTorque(maxTorque);
+                this.wheelMotorJoint = joint;
             }
-
-            makeWheel(pos.add(vec2( 1, -.6)));
-            makeWheel(pos.add(vec2(-1, -.65)), true);
+            wheel.addCircle(diameter, vec2(), density, friction, restitution);
+            this.wheels.push(wheel);
         }
+
+        makeWheel(pos.add(vec2( 1, -.6)));
+        makeWheel(pos.add(vec2(-1, -.65)), true);
     }
-    applyMotorInput(input)
+    update()
     {
+        // car controls
         const maxSpeed = 40;
         const brakeAmount = .8;
+        const input = LJS.keyDirection().x;
         let s = this.wheelMotorJoint.getMotorSpeed();
-        s = input ? LJS.clamp(s + input, -maxSpeed, maxSpeed) : s * brakeAmount;
+        s = input ? LJS.clamp(s - input, -maxSpeed, maxSpeed) : s * brakeAmount;
         this.wheelMotorJoint.setMotorSpeed(s);
+        super.update();
     }
     destroy()
     {
-        this.wheels.forEach(o=>o && o.destroy());
+        this.wheels.forEach(o=>o.destroy());
         super.destroy();
     }
 }

package/examples/box2d/index.html

@@ -5,5 +5,5 @@
 <meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
-<script src=../../plugins/box2d.wasm.js></script>
+<script src=../../dist/box2d.wasm.js></script>
 <script src=game.js type=module></script>

package/examples/box2d/scenes.js

@@ -23,11 +23,15 @@ import * as GameObjects from './gameObjects.js';
 import * as Game from './game.js';
 const {vec2} = LJS;
 
-export function loadScene(scene)
+export let scene, sceneName;
+
+export function loadScene(_scene)
 {
+    scene = _scene;
+
     if (scene == 0)
     {
-        Game.setSceneName('Shapes');
+        sceneName = 'Shapes';
         GameObjects.spawnRandomEdges();
         GameObjects.spawnBox(vec2(11,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
         GameObjects.spawnCircle(vec2(20,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
@@ -37,14 +41,14 @@ export function loadScene(scene)
     }
     if (scene == 1)
     {
-        Game.setSceneName('Pyramid');
+        sceneName = 'Pyramid';
         GameObjects.spawnPyramid(vec2(20,0), 15);
         GameObjects.spawnBox(vec2(10,2), 4, LJS.randColor());
         GameObjects.spawnCircle(vec2(30,2), 4, LJS.randColor());
     }
     if (scene == 2)
     {
-        Game.setSceneName('Dominoes');
+        sceneName = 'Dominoes';
         GameObjects.spawnDominoes(vec2(11,11), 11);
         GameObjects.spawnDominoes(vec2(2,0), 13, vec2(1,3));
         GameObjects.spawnCircle(vec2(10,20), 2, LJS.randColor());
@@ -54,14 +58,14 @@ export function loadScene(scene)
     }
     if (scene == 3)
     {
-        Game.setSceneName('Car');
-        Game.setCarObject(new GameObjects.CarObject(vec2(10,2)));
+        sceneName = 'Car';
+        new GameObjects.CarObject(vec2(10,2));
         GameObjects.spawnBox(vec2(20,0), vec2(10,2), LJS.randColor(), LJS.box2d.bodyTypeStatic, false, -.2);
         GameObjects.spawnPyramid(vec2(32,0), 6);
     }
     if (scene == 4)
     {
-        Game.setSceneName('Rope');
+        sceneName = 'Rope';
         const startPos = vec2(20, 14);
         const angle = LJS.PI/2;
         const color = LJS.randColor();
@@ -78,14 +82,14 @@ export function loadScene(scene)
     }
     if (scene == 5)
     {
-        Game.setSceneName('Raycasts');
+        sceneName = 'Raycasts';
         GameObjects.spawnRandomEdges();
         for (let i=100;i--;)
             GameObjects.spawnRandomObject(vec2(LJS.rand(1,39), LJS.rand(20)), 2, LJS.box2d.bodyTypeStatic, LJS.rand(LJS.PI*2));
     }
     if (scene == 6)
     {
-        Game.setSceneName('Joints');
+        sceneName = 'Joints';
         {
             // prismatic joint
             const o1 = GameObjects.spawnBox(vec2(20,8), vec2(3,2), LJS.randColor());
@@ -156,7 +160,7 @@ export function loadScene(scene)
     }
     if (scene == 7)
     {
-        Game.setSceneName('Contacts');
+        sceneName = 'Contacts';
         new GameObjects.ContactTester(vec2(15,8), vec2(5), LJS.RED, LJS.RED);
         new GameObjects.ContactTester(vec2(25,8), vec2(5), LJS.CYAN, LJS.CYAN, false, false);
         for (let i=200;i--;)
@@ -164,19 +168,19 @@ export function loadScene(scene)
     }
     if (scene == 8)
     {
-        Game.setSceneName('Mobile');
+        sceneName = 'Mobile';
         const pos = vec2(20, 16);
         const mobile = new GameObjects.MobileObject(pos, 12, 2, 5);
         new LJS.Box2dRevoluteJoint(Game.groundObject, mobile, pos);
     }
     if (scene == 9)
     {
-        Game.setSceneName('Cloth');
+        sceneName = 'Cloth'
         new GameObjects.ClothObject(vec2(20, 9), vec2(15), vec2(24), LJS.randColor());
     }
     if (scene == 10)
     {
-        Game.setSceneName('Softbodies');
+        sceneName = 'Softbodies';
         for(let i=3;i--;)
             new GameObjects.SoftBodyObject(vec2(20, 3+i*7), vec2(6-i), vec2(9-i), LJS.randColor());
     }

package/examples/index.html

@@ -122,7 +122,7 @@ const exampleList =
     new ExampleInfo('Hello World', 'helloWorld.js', 'Simplest example'),
     new ExampleInfo('Shapes', 'shapes.js', 'How to draw geometric shapes'),
     new ExampleInfo('Colors', 'colors.js', 'How to use the color object'),
-    new ExampleInfo('Blending', 'blending.js', 'Shows different blending modes'),
+    new ExampleInfo('Blending', 'blending.js', 'How to use blending modes'),
     new ExampleInfo('Timers', 'timers.js', 'How to use the timer object'),
     new ExampleInfo('Texture', 'texture.js', 'How to display a full texture'),
     new ExampleInfo('Particles', 'particles.js', 'How to use the particle system'),
@@ -130,12 +130,16 @@ const exampleList =
     new ExampleInfo('System Font', 'systemFont.js', 'Demo of the included system font'),
     new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'How to set up a simple sprite atlas'),
     new ExampleInfo('Animation', 'animation.js', 'How to animate sprites'),
-    new ExampleInfo('Clock', 'clock.js', 'A simple clock showing the time'),
+    new ExampleInfo('Clock', 'clock.js', 'Simple clock showing the time'),
     new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use the tile layer object'),
-    new ExampleInfo('Platformer Game', 'platformer.js', 'A platformer jumping game'),
-    new ExampleInfo('Top Down Game', 'topDown.js', 'A top down adventure game'),
+    new ExampleInfo('Platformer Game', 'platformer.js', 'Platformer jumping game'),
+    new ExampleInfo('Top Down Game', 'topDown.js', 'Rop down adventure game'),
     new ExampleInfo('Tilted View', 'tiltedView.js', 'Pseudo 3D view with tilted camera'),
-    new ExampleInfo('Pong Game', 'pong.js', 'A simple pong game'),
+    new ExampleInfo('Pong Game', 'pong.js', 'Simple pong game'),
+    new ExampleInfo('Box2d Demo', 'box2d.js', 'Demo of the Box2D physics plugin'),
+    new ExampleInfo('Box2d Car', 'box2dCar.js', 'Controllable vehicle using the Box2D physics plugin'),
+    new ExampleInfo('Post Processing', 'postProcess.js', 'Example of the post processing plugin'),
+    new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Simple example of LittleJS UI plugin'),
 
     new ExampleInfo('--- FULL EXAMPLES ---'),
     new ExampleInfo('Starter', 'starter', 'Clean starter project', true),
@@ -205,7 +209,7 @@ function codeInput()
     inputTimeout = setTimeout(() => setCode(textareaCode.value), 500);
 }
 
-function loadFile(filename, fullExample)
+async function loadFile(filename, fullExample)
 {
     textareaCode.disabled = fullExample;
     if (fullExample)
@@ -227,14 +231,18 @@ function loadFile(filename, fullExample)
         return;
     }
 
-    fetch(filename)
-        .then(response => {
-            if (!response.ok)
-                throw new Error('Could not load file: '+ filename);
-            return response.text();
-        })
-        .then(text => setCode(textareaCode.value = text, fullExample))
-        .catch(error => setErrorMessage(error.message));
+    try
+    {
+        const response = await fetch(filename);
+        if (!response.ok)
+            throw new Error('Could not load file: ' + filename);
+        const text = await response.text();
+        setCode(textareaCode.value = text, fullExample);
+    }
+    catch (error)
+    {
+        setErrorMessage(error.message);
+    }
 }
 
 function setCode(code, largeExample)

package/examples/platformer/game.js

@@ -16,14 +16,17 @@ import * as GamePlayer from './gamePlayer.js';
 import * as GameLevel from './gameLevel.js';
 const {vec2} = LJS;
 
-// enable touch gamepad on touch devices
-LJS.setTouchGamepadEnable(true);
+// load the game level data
+export const gameLevelData = await LJS.fetchJSON('gameLevelData.json');
 
 // globals
-export let spriteAtlas, player, score, deaths, gameLevelData;
+export let spriteAtlas, player, score, deaths;
 export function addToScore(delta=1) { score += delta; }
 export function addToDeaths() { ++deaths; }
 
+// enable touch gamepad on touch devices
+LJS.setTouchGamepadEnable(true);
+
 ///////////////////////////////////////////////////////////////////////////////
 function loadLevel()
 {
@@ -41,18 +44,6 @@ function loadLevel()
 ///////////////////////////////////////////////////////////////////////////////
 async function gameInit()
 {
-    try
-    {
-        // load level data from external JSON file
-        const response = await fetch('gameLevelData.json');
-        gameLevelData = await response.json();
-        console.log('Level data loaded successfully');
-    } 
-    catch (error)
-    {
-        console.error('Failed to load level data!');
-    }
-
     // engine settings
     LJS.setGravity(vec2(0,-.01));
     LJS.setObjectDefaultDamping(.99);

package/examples/shorts/base.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
+<script src=../../dist/box2d.wasm.js></script>
 <script src=../../dist/littlejs.js?1120></script>
 <script>
 

package/examples/shorts/box2d.js

@@ -0,0 +1,46 @@
+async function gameInit()
+{
+    // setup box2d
+    await box2dInit();
+    mouseJoint = 0;
+    gravity.y = -50;
+    
+    // create ground object
+    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0, GRAY, box2d.bodyTypeStatic);
+    groundObject.addBox(vec2(100,2));
+
+    // add some random objects
+    for(let i=50; i--;)
+    {
+        const o = new Box2dObject(randInCircle(5), vec2(), 0, 0, randColor());
+        randInt(2) ? o.addCircle(rand(1,2)) : o.addRandomPoly(rand(1,2));
+    }
+}
+
+function gameUpdate()
+{
+    // mouse controls
+    if (mouseJoint)
+    {
+        // update mouse joint
+        mouseJoint.setTarget(mousePos);
+        if (mouseWasReleased(0))
+        {
+            // release object
+            mouseJoint = mouseJoint.destroy();
+        }
+    }
+    else if (mouseWasPressed(0))
+    {
+        // grab object
+        const object = box2d.pointCast(mousePos);
+        if (object)
+            mouseJoint = new Box2dTargetJoint(object, groundObject, mousePos);
+    }
+}
+
+function gameRenderPost()
+{
+    // draw mouse joint
+    mouseJoint && drawLine(mousePos, mouseJoint.getAnchorB(), .2, RED);
+}

package/examples/shorts/box2dCar.js

@@ -0,0 +1,49 @@
+async function gameInit()
+{
+    // setup box2d and create the objects
+    await box2dInit();
+    gravity.y = -20;
+    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0, GRAY, box2d.bodyTypeStatic);
+    groundObject.addBox(vec2(100,6));
+    new CarObject(vec2(0,-2));
+}
+
+class CarObject extends Box2dObject
+{
+    constructor(pos)
+    {
+        super(pos, vec2(), 0, 0, RED);
+
+        // create a car with wheels
+        this.addBox(vec2(7,2));
+        const frequency = 4, maxTorque = 250;
+        this.wheels = [];
+        for(let i=2; i--;)
+        {
+            const wheelPos = pos.add(vec2(i?2:-2, -1));
+            const wheel = new Box2dObject(wheelPos, vec2(2), tile(7));
+            const joint = new Box2dWheelJoint(this, wheel);
+            joint.setSpringFrequencyHz(frequency);
+            joint.setMaxMotorTorque(maxTorque);
+            joint.enableMotor(!i);
+            wheel.addCircle(2);
+            wheel.motorJoint = joint;
+            this.wheels[i] = wheel;
+        }
+    }
+    update()
+    {
+        // car controls - use arrow keys or A/D to drive
+        const maxSpeed = 40, brakeAmount = .9;
+        const input = keyDirection().x;
+        let s = this.wheels[0].motorJoint.getMotorSpeed();
+        s = input ? clamp(s - input, -maxSpeed, maxSpeed) : s * brakeAmount;
+        this.wheels[0].motorJoint.setMotorSpeed(s);
+        super.update();
+    }
+    destroy()
+    {
+        this.wheels.forEach(o=>o.destroy());
+        super.destroy();
+    }
+}

package/examples/shorts/postProcess.js

@@ -0,0 +1,45 @@
+function gameInit()
+{
+    new PostProcessPlugin(tvShader);
+}
+
+function gameRender()
+{
+    drawRect(vec2(), vec2(99), GRAY);
+    drawTile(vec2(), vec2(12), tile(3,128));
+}
+
+const tvShader = `
+// Simple TV Shader Code
+float hash(vec2 p)
+{
+    p=fract(p*.3197);
+    return fract(1.+sin(51.*p.x+73.*p.y)*13753.3);
+}
+float noise(vec2 p)
+{
+    vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);
+    return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+1.),u.x),u.y);
+}
+void mainImage(out vec4 c, vec2 p)
+{
+    // setup the shader
+    p /= iResolution.xy;
+    c = texture(iChannel0, p);
+
+    // static noise
+    const float staticAlpha = .1;
+    const float staticScale = .005;
+    c += staticAlpha * hash(floor(p/staticScale) + mod(iTime*500., 1e3));
+
+    // scan lines
+    const float scanlineScale = 2.;
+    const float scanlineAlpha = .3;
+    c *= 1. - scanlineAlpha*cos(p.y*2.*iResolution.y/scanlineScale);
+
+    // black vignette around edges
+    const float vignette = 2.;
+    const float vignettePow = 6.;
+    float dx = 2.*p.x-1., dy = 2.*p.y-1.;
+    c *= 1.-pow((dx*dx + dy*dy)/vignette, vignettePow);
+}`;

package/examples/shorts/uiSystem.js

@@ -0,0 +1,39 @@
+// globals objects
+const sound_ui = new Sound([1,0]);
+let uiMenu;
+
+function gameInit()
+{
+    // load ui system plugin
+    new UISystemPlugin;
+
+    // setup example menu
+    uiMenu = new UIObject(mainCanvasSize.scale(.5));
+    const uiBackground = new UIObject(vec2(), vec2(400));
+    uiMenu.addChild(uiBackground);
+
+    // example text
+    const textTitle = new UIText(vec2(0,-100), vec2(400, 60), 'LittleJS UI\nSystem Demo');
+    uiMenu.addChild(textTitle);
+
+    // example button
+    const button1 = new UIButton(vec2(70,40), vec2(100), 'Test');
+    button1.textHeight = 40;
+    uiMenu.addChild(button1);
+    button1.onPress = ()=> sound_ui.play();
+
+    // example checkbox
+    const checkbox = new UICheckbox(vec2(-70,40), vec2(50));
+    uiMenu.addChild(checkbox);
+    checkbox.onChange = ()=> sound_ui.play(0,1,checkbox.checked?4:1);
+
+    // exit button
+    const button2 = new UIButton(vec2(0,140), vec2(300, 50), 'Exit Menu');
+    button2.textHeight = 40;
+    uiMenu.addChild(button2);
+    button2.onPress = ()=>
+    {
+        uiMenu.visible = false;
+        sound_ui.play(0,1,2);
+    }
+}

package/examples/starter/game.js

@@ -7,6 +7,8 @@
 
 'use strict';
 
+// show the LittleJS splash screen
+setShowSplashScreen(true);
 
 // fix texture bleeding by shrinking tile slightly
 setTileFixBleedScale(.5);

package/examples/uiSystem/game.js

@@ -25,7 +25,7 @@ LJS.setCanvasPixelated(false);
 function createUI()
 {
     // setup root to attach all ui elements to
-    uiRoot = new LJS.UIObject();
+    uiRoot = new LJS.UIObject;
     const uiInfo = new LJS.UIText(vec2(0,90), vec2(1e3, 70), 
         'LittleJS UI System Example\nM = Toggle menu');
     uiInfo.textColor = LJS.WHITE;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.12.4",
+  "version": "1.12.6",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

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; }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -127,7 +131,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);
@@ -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();
-
-        // 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/plugins/pluginExport.js

@@ -30,7 +30,7 @@ export
     box2d,
     box2dDebug,
     box2dSetDebug,
-    box2dEngineInit,
+    box2dInit,
     Box2dPlugin,
     Box2dObject,
     Box2dRaycastResult,