littlejsengine 1.11.17 → 1.12.6

package/examples/typescript/game.js

@@ -4,56 +4,54 @@
     - Shows how to use LittleJS with modules
 */
 'use strict';
-// import module
-import * as LittleJS from '../../dist/littlejs.esm.js';
-const { tile, vec2, hsl } = LittleJS;
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const { tile, vec2, hsl } = LJS;
 // show the LittleJS splash screen
-LittleJS.setShowSplashScreen(true);
+LJS.setShowSplashScreen(true);
 // fix texture bleeding by shrinking tile slightly
-LittleJS.setTileFixBleedScale(.5);
+LJS.setTileFixBleedScale(.5);
 // sound effects
-const sound_click = new LittleJS.Sound([1, .5]);
+const sound_click = new LJS.Sound([1, .5]);
 // medals
-const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-LittleJS.medalsInit('Hello World');
+const medal_example = new LJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LJS.medalsInit('Hello World');
 // game variables
 let particleEmitter;
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit() {
     // create tile collision and visible tile layer
-    const tileCollisionSize = vec2(32, 16);
-    LittleJS.initTileCollision(tileCollisionSize);
     const pos = vec2();
-    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
+    const tileLayer = new LJS.TileCollisionLayer(pos, vec2(32, 16));
     // get level data from the tiles image
-    const mainContext = LittleJS.mainContext;
-    const tileImage = LittleJS.textureInfos[0].image;
+    const mainContext = LJS.mainContext;
+    const tileImage = LJS.textureInfos[0].image;
     mainContext.drawImage(tileImage, 0, 0);
     const imageData = mainContext.getImageData(0, 0, tileImage.width, tileImage.height).data;
-    for (pos.x = tileCollisionSize.x; pos.x--;)
-        for (pos.y = tileCollisionSize.y; pos.y--;) {
+    for (pos.x = tileLayer.size.x; pos.x--;)
+        for (pos.y = tileLayer.size.y; pos.y--;) {
             // check if this pixel is set
-            const i = pos.x + tileImage.width * (15 + tileCollisionSize.y - pos.y);
+            const i = pos.x + tileImage.width * (15 + tileLayer.size.y - pos.y);
             if (!imageData[4 * i])
                 continue;
             // set tile data
             const tileIndex = 1;
-            const direction = LittleJS.randInt(4);
-            const mirror = !LittleJS.randInt(2);
-            const color = LittleJS.randColor();
-            const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+            const direction = LJS.randInt(4);
+            const mirror = !LJS.randInt(2);
+            const color = LJS.randColor();
+            const data = new LJS.TileLayerData(tileIndex, direction, mirror, color);
             tileLayer.setData(pos, data);
-            LittleJS.setTileCollisionData(pos, 1);
+            tileLayer.setCollisionData(pos);
         }
     // draw tile layer with new data
     tileLayer.redraw();
     // move camera to center of collision
-    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
-    LittleJS.setCameraScale(32);
+    LJS.setCameraPos(tileLayer.size.scale(.5));
+    LJS.setCameraScale(32);
     // enable gravity
-    LittleJS.setGravity(-.01);
+    LJS.setGravity(vec2(0, -.01));
     // create particle emitter
-    particleEmitter = new LittleJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
+    particleEmitter = new LJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
     1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emitCone
     tile(0, 16), // tileIndex, tileSize
     hsl(1, 1, 1), hsl(0, 0, 0), // colorStartA, colorStartB
@@ -67,20 +65,20 @@ function gameInit() {
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate() {
-    if (LittleJS.mouseWasPressed(0)) {
+    if (LJS.mouseWasPressed(0)) {
         // play sound when mouse is pressed
-        sound_click.play(LittleJS.mousePos);
+        sound_click.play(LJS.mousePos);
         // change particle color and set to fade out
         particleEmitter.colorStartA = hsl();
-        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
         // unlock medals
         medal_example.unlock();
     }
     // move particles to mouse location if on screen
-    if (LittleJS.mousePosScreen.x)
-        particleEmitter.pos = LittleJS.mousePos;
+    if (LJS.mousePosScreen.x)
+        particleEmitter.pos = LJS.mousePos;
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdatePost() {
@@ -88,15 +86,15 @@ function gameUpdatePost() {
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender() {
     // draw a grey square in the background without using webgl
-    LittleJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6), 0, false);
+    LJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6), 0, false);
     // draw the logo as a tile
-    LittleJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
+    LJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost() {
     // draw to overlay canvas for hud rendering
-    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
+    LJS.drawTextScreen('LittleJS with TypeScript', vec2(LJS.mainCanvasSize.x / 2, 80), 80);
 }
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/game.ts

@@ -6,22 +6,22 @@
 
 'use strict';
 
-// import module
-import * as LittleJS from '../../dist/littlejs.esm.js';
-const {tile, vec2, hsl} = LittleJS;
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const {tile, vec2, hsl} = LJS;
 
 // show the LittleJS splash screen
-LittleJS.setShowSplashScreen(true);
+LJS.setShowSplashScreen(true);
 
 // fix texture bleeding by shrinking tile slightly
-LittleJS.setTileFixBleedScale(.5);
+LJS.setTileFixBleedScale(.5);
 
 // sound effects
-const sound_click = new LittleJS.Sound([1,.5]);
+const sound_click = new LJS.Sound([1,.5]);
 
 // medals
-const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-LittleJS.medalsInit('Hello World');
+const medal_example = new LJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LJS.medalsInit('Hello World');
 
 // game variables
 let particleEmitter;
@@ -30,46 +30,44 @@ let particleEmitter;
 function gameInit()
 {
     // create tile collision and visible tile layer
-    const tileCollisionSize = vec2(32, 16);
-    LittleJS.initTileCollision(tileCollisionSize);
     const pos = vec2();
-    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
+    const tileLayer = new LJS.TileCollisionLayer(pos, vec2(32,16));
 
     // get level data from the tiles image
-    const mainContext = LittleJS.mainContext;
-    const tileImage = LittleJS.textureInfos[0].image;
+    const mainContext = LJS.mainContext;
+    const tileImage = LJS.textureInfos[0].image;
     mainContext.drawImage(tileImage, 0, 0);
     const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
-    for (pos.x = tileCollisionSize.x; pos.x--;)
-    for (pos.y = tileCollisionSize.y; pos.y--;)
+    for (pos.x = tileLayer.size.x; pos.x--;)
+    for (pos.y = tileLayer.size.y; pos.y--;)
     {
         // check if this pixel is set
-        const i = pos.x + tileImage.width*(15 + tileCollisionSize.y - pos.y);
+        const i = pos.x + tileImage.width*(15 + tileLayer.size.y - pos.y);
         if (!imageData[4*i])
             continue;
         
         // set tile data
         const tileIndex = 1;
-        const direction = LittleJS.randInt(4)
-        const mirror = !LittleJS.randInt(2);
-        const color = LittleJS.randColor();
-        const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+        const direction = LJS.randInt(4)
+        const mirror = !LJS.randInt(2);
+        const color = LJS.randColor();
+        const data = new LJS.TileLayerData(tileIndex, direction, mirror, color);
         tileLayer.setData(pos, data);
-        LittleJS.setTileCollisionData(pos, 1);
+        tileLayer.setCollisionData(pos);
     }
 
     // draw tile layer with new data
     tileLayer.redraw();
 
     // move camera to center of collision
-    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
-    LittleJS.setCameraScale(32);
+    LJS.setCameraPos(tileLayer.size.scale(.5));
+    LJS.setCameraScale(32);
 
     // enable gravity
-    LittleJS.setGravity(-.01);
+    LJS.setGravity(vec2(0,-.01));
 
     // create particle emitter
-    particleEmitter = new LittleJS.ParticleEmitter(
+    particleEmitter = new LJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
         1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emitCone
         tile(0, 16),                // tileIndex, tileSize
@@ -86,14 +84,14 @@ function gameInit()
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate()
 {
-    if (LittleJS.mouseWasPressed(0))
+    if (LJS.mouseWasPressed(0))
     {
         // play sound when mouse is pressed
-        sound_click.play(LittleJS.mousePos);
+        sound_click.play(LJS.mousePos);
 
         // change particle color and set to fade out
         particleEmitter.colorStartA = hsl();
-        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
 
@@ -102,8 +100,8 @@ function gameUpdate()
     }
 
     // move particles to mouse location if on screen
-    if (LittleJS.mousePosScreen.x)
-        particleEmitter.pos = LittleJS.mousePos;
+    if (LJS.mousePosScreen.x)
+        particleEmitter.pos = LJS.mousePos;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -116,19 +114,19 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    LittleJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
+    LJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
     
     // draw the logo as a tile
-    LittleJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
+    LJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x/2, 80), 80);
+    LJS.drawTextScreen('LittleJS with TypeScript', vec2(LJS.mainCanvasSize.x/2, 80), 80);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/index.html

@@ -7,4 +7,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js type=module></script>
+<script src=game.js type=module></script>

package/examples/uiSystem/game.js

@@ -6,8 +6,12 @@
 
 'use strict';
 
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const {vec2, hsl, tile} = LJS;
+
 // sound effects
-const sound_ui = new Sound([1,0]);
+const sound_ui = new LJS.Sound([1,0]);
 
 // UI system
 let uiRoot, uiMenu;
@@ -15,43 +19,43 @@ const getMenuVisible =()=> uiMenu.visible;
 const setMenuVisible =(visible)=> uiMenu.visible = visible;
 
 // use a fixed size canvas
-canvasFixedSize = vec2(1920, 1080); // 1080p
-canvasPixelated = false;
+LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
+LJS.setCanvasPixelated(false);
 
 function createUI()
 {
     // setup root to attach all ui elements to
-    uiRoot = new UIObject();
-    const uiInfo = new UIText(vec2(0,90), vec2(1e3, 70), 
+    uiRoot = new LJS.UIObject;
+    const uiInfo = new LJS.UIText(vec2(0,90), vec2(1e3, 70), 
         'LittleJS UI System Example\nM = Toggle menu');
-    uiInfo.textColor = WHITE;
+    uiInfo.textColor = LJS.WHITE;
     uiInfo.lineWidth = 8;
     uiRoot.addChild(uiInfo);
 
     // setup example menu
-    uiMenu = new UIObject(vec2(0,450));
+    uiMenu = new LJS.UIObject(vec2(0,450));
     uiRoot.addChild(uiMenu);
-    const uiBackground = new UIObject(vec2(0,0), vec2(450,580));
+    const uiBackground = new LJS.UIObject(vec2(0,0), vec2(450,580));
     uiBackground.lineWidth = 8;
     uiMenu.addChild(uiBackground);
 
     // example large text
-    const textTitle = new UIText(vec2(0,-220), vec2(500, 90), 'Test Title');
+    const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 90), 'Test Title');
     uiMenu.addChild(textTitle);
-    textTitle.textColor = RED;
+    textTitle.textColor = LJS.RED;
     textTitle.lineWidth = 4;
-    textTitle.lineColor = BLUE;
+    textTitle.lineColor = LJS.BLUE;
 
     // example multiline text
-    const textTest = new UIText(vec2(-60,-140), vec2(300, 50), 'Test Text\nSecond text line.')
+    const textTest = new LJS.UIText(vec2(-60,-140), vec2(300, 50), 'Test Text\nSecond text line.')
     uiMenu.addChild(textTest);
 
     // example tile image
-    const tileTest = new UITile(vec2(150,-130), vec2(110), tile(3,128))
+    const tileTest = new LJS.UITile(vec2(150,-130), vec2(110), tile(3,128))
     uiMenu.addChild(tileTest);
 
     // example checkbox
-    const checkbox = new UICheckbox(vec2(-140,-20), vec2(40));
+    const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
     uiMenu.addChild(checkbox);
     checkbox.onPress = ()=>
     {
@@ -61,18 +65,18 @@ function createUI()
     }
 
     // text attached to checkbox
-    const checkboxText = new UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
+    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
     checkbox.addChild(checkboxText);
 
     // example scrollbar
-    const scrollbar = new UIScrollbar(vec2(0,60), vec2(350, 50));
+    const scrollbar = new LJS.UIScrollbar(vec2(0,60), vec2(350, 50));
     uiMenu.addChild(scrollbar);
     scrollbar.onChange  = ()=> console.log('New scrollbar value:', scrollbar.value);
     scrollbar.onPress   = ()=> sound_ui.play(0,.3,2);
     scrollbar.onRelease = ()=> sound_ui.play(0,.3,4);
 
     // example button
-    const button1 = new UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
+    const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
     button1.onPress = ()=>
     {
@@ -81,7 +85,7 @@ function createUI()
     }
 
     // exit button
-    const button2 = new UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
+    const button2 = new LJS.UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
     uiMenu.addChild(button2);
     button2.onPress = ()=>
     {
@@ -94,7 +98,7 @@ function createUI()
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
-    new UISystemPlugin;
+    new LJS.UISystemPlugin;
     createUI();
 }
 
@@ -106,27 +110,26 @@ function gameUpdate()
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdatePost()
 {
-    // center ui
-    uiRoot.pos.x = mainCanvasSize.x/2;
+    // toggle menu visibility
+    if (LJS.keyWasPressed('KeyM'))
+        setMenuVisible(!getMenuVisible());
 
-    // menu system
-    const menuVisible = getMenuVisible();
-    paused = menuVisible;
+    // center ui
+    uiRoot.pos.x = LJS.mainCanvasSize.x/2;
 
-    // toggle menu visibility
-    if (keyWasPressed('KeyM'))
-        setMenuVisible(!menuVisible);
+    // pause when menu is visible
+    LJS.setPaused(getMenuVisible())
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
     // test game rendering
-    drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
+    LJS.drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
     for(let i=0; i<1e3; ++i)
     {
-        const pos = vec2(30*Math.sin(i+time/9),20*Math.sin(i*i+time/9));
-        drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), time+i, !(i%2), hsl(i/9,1,.1,0));
+        const pos = vec2(30*Math.sin(i+LJS.time/9),20*Math.sin(i*i+LJS.time/9));
+        LJS.drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), LJS.time+i, !(i%2), hsl(i/9,1,.1,0));
     }
 }
 
@@ -137,4 +140,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/uiSystem/index.html

@@ -6,9 +6,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?11115></script>
-
 <!-- Add your game scripts here -->
-<script src=../../plugins/uiSystem.js?11115></script>
-<script src=game.js?11115></script>
+<script src=game.js type=module></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.11.17",
+  "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,29 +1,37 @@
 /**
  * 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
+ *  @memberof Box2D */
+function box2dSetDebug(enable) { box2dDebug = enable; }
+
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Box2D Object - extend with your own custom physics objects
@@ -123,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);
@@ -1427,7 +1435,7 @@ class Box2dPlugin
      *  @param {number} [frames] */
     step(frames=1)
     {
-        box2d.world.SetGravity(box2d.vec2dTo(vec2(0,gravity)));
+        box2d.world.SetGravity(box2d.vec2dTo(gravity));
         for (let i=frames; i--;)
             box2d.world.Step(timeDelta, this.velocityIterations, this.positionIterations);
     }
@@ -1568,8 +1576,8 @@ class Box2dPlugin
         aabb.set_upperBound(box2d.vec2dTo(pos));
 
         let queryObject;
-        debugRaycast && debugRect(pos, vec2(), queryObject ? '#f00' : '#00f', .02);
         box2d.world.QueryAABB(queryCallback, aabb);
+        debugRaycast && debugRect(pos, vec2(), queryObject ? '#f00' : '#00f', .02);
         return queryObject;
     }
 
@@ -1762,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

@@ -2,8 +2,6 @@
  * LittleJS Module Plugins Export
  */
 
-'use strict';
-
 export
 {
     // Newgrounds
@@ -31,7 +29,8 @@ export
     // Box2D Physics
     box2d,
     box2dDebug,
-    box2dEngineInit,
+    box2dSetDebug,
+    box2dInit,
     Box2dPlugin,
     Box2dObject,
     Box2dRaycastResult,

package/plugins/uiSystem.js

@@ -177,6 +177,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>} */
@@ -287,7 +289,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);
     }
 }
 
@@ -350,7 +353,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);
     }
@@ -447,7 +452,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);
     }