littlejsengine 1.11.5 → 1.11.7

package/examples/shorts/platformer.js

@@ -0,0 +1,42 @@
+class PhysicsObject extends EngineObject
+{
+    constructor(pos, size, color)
+    {
+        super(pos, size, 0, 0, color);
+        this.setCollision(); // make object collide
+        this.mass = 0; // make object have static physics
+    }
+}
+
+class Player extends PhysicsObject
+{
+    constructor(pos)
+    {
+        super(pos, vec2(2,4), RED);
+        this.mass = 1; // make object have dynamic physics
+    }
+
+    update()
+    {
+        // apply movement controls
+        const moveInput = keyDirection();
+        this.velocity.x += moveInput.x * (this.groundObject ? .1: .01);
+        if (this.groundObject && moveInput.y > 0)
+            this.velocity.y = .9; // jump
+
+        super.update(); // call parent update function
+        cameraPos = vec2(this.pos.x, 9); // move camera with player
+    }
+}
+
+function gameInit()
+{
+    // setup level
+    gravity = -.05;
+    new Player(vec2(0,4));
+
+    // create random objects
+    new PhysicsObject(vec2(), vec2(1e3,4), GRAY); // ground
+    for (let i = 1; i < 500; ++i)
+        new PhysicsObject(vec2(i*10+randInt(4), 0), vec2(2+randInt(20),4+randInt(8)), GREEN);
+}

package/{shortExamples/code → examples/shorts}/playSound.js

@@ -9,12 +9,14 @@ class SoundButton extends EngineObject
 
     update()
     {
+        // play sound when clicked
         if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
             this.sound.play(this.pos);
     }
 
     render()
     {
+        // draw the button and icon
         drawRect(this.pos, this.size, hsl(0,0,.8));
         drawTextOverlay(this.icon, this.pos, 3);
     }
@@ -22,14 +24,13 @@ class SoundButton extends EngineObject
 
 function gameInit()
 {
+    // create a grid of buttons with different sounds
     new SoundButton(vec2(-6, 5),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
     new SoundButton(vec2( 0, 5),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
     new SoundButton(vec2( 6, 5),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
-
     new SoundButton(vec2(-6, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
     new SoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
-    new SoundButton(vec2( 6, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3]));
-    
+    new SoundButton(vec2( 6, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
     new SoundButton(vec2(-6,-5),'🌊', new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
     new SoundButton(vec2( 0,-5),'🛰️', new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
     new SoundButton(vec2( 6,-5),'⚡', new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));

package/{shortExamples/code → examples/shorts}/pong.js

@@ -20,9 +20,9 @@ function gameInit()
 
     // create objects
     paddle = new PhysicsObject(vec2(0,1), vec2(6,1)); // create player's paddle
-    new PhysicsObject(vec2(-.5,levelSize.y/2),            vec2(1,100)) // top wall
-    new PhysicsObject(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)) // left wall
-    new PhysicsObject(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)) // right wall
+    new PhysicsObject(vec2(-.5,levelSize.y/2),            vec2(1,100)); // left wall
+    new PhysicsObject(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)); // right wall
+    new PhysicsObject(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)); // top wall
 }
 
 function gameUpdate()

package/{shortExamples/code → examples/shorts}/shapes.js

@@ -17,7 +17,7 @@ function gameRender()
     drawEllipse(vec2(-5,5), 2, 1, 0, hsl(0,1,.5));
     drawEllipse(vec2(5,5), 1, .5, 0, hsl(.55,1,.5));
 
-    // lines and rects
+    // rects and lines
     drawRect(vec2(0,-5), vec2(13,2), hsl(.6,1,.5));
     drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1));
     drawLine(vec2(-5,-3), vec2(5,-7), .2, hsl(1,1,.5));

package/examples/shorts/spriteAtlas.js

@@ -0,0 +1,34 @@
+let spriteAtlas;
+
+function gameInit()
+{
+    // create a table of all sprites
+    const gameTile = (i, size=16)=>  tile(i, size);
+    spriteAtlas =
+    {
+        circle:    gameTile(0),
+        crate:     gameTile(1),
+        icon:      gameTile(2),
+        circleBig: gameTile(2, 128),
+        iconBig:   gameTile(3, 128),
+    };
+}
+
+function gameRender()
+{
+    drawRect(vec2(0,0), vec2(100), GRAY); // draw background
+
+    // draw a sprite from the atlas
+    let pos = vec2(Math.sin(time)*5,-3);// world position to draw
+    let angle = 0;                      // world space angle to draw the tile
+    let size = vec2(9);                 // world size of the tile
+    let mirror = 0;                     // should tile be mirrored?
+    let color = hsl(0,0,1);             // color to multiply the tile by
+    let additiveColor = hsl(0,0,0,0);   // color to add to
+    drawTile(pos, size, spriteAtlas.iconBig, color, angle, mirror, additiveColor);
+
+    // draw more sprites from the atlas
+    drawTile(vec2(-7,4), vec2(5), spriteAtlas.crate);
+    drawTile(vec2( 0,4), vec2(5), spriteAtlas.circle);
+    drawTile(vec2( 7,4), vec2(5), spriteAtlas.circleBig);
+}

package/examples/shorts/systemFont.js

@@ -0,0 +1,16 @@
+function gameRender()
+{
+    // draw text with built in font image system font
+    const font = new FontImage;
+    font.drawText('System Font Test', cameraPos.add(vec2(0,3)), .2, true);
+
+    // show every character in the system font
+    let s = '';
+    for(let i=32; i<128; ++i)
+    {
+        if (i%32 == 0)
+            s += '\n';
+        s += String.fromCharCode(i);
+    }
+    font.drawText(s, cameraPos, .1, true);
+}

package/{shortExamples/code → examples/shorts}/tileLayer.js

@@ -34,7 +34,7 @@ function gameUpdate()
     {
         // create particle emitter
         const hue = rand();
-        let particleEmitter = new ParticleEmitter(
+        const particleEmitter = new ParticleEmitter(
             mousePos, 0,                // emitPos, emitAngle
             0, 0.1, 500, PI,            // emitSize, emitTime, emitRate, emitCone
             tile(0, 16),                // tileIndex, tileSize

package/examples/shorts/tiltedView.js

@@ -0,0 +1,44 @@
+class GameObject extends EngineObject
+{
+    update()
+    {
+        this.renderOrder = -this.pos.y; // sort by y position
+        super.update();
+    }
+
+    render()
+    {
+        // adjust draw postion to be at the bottom of the object
+        const pos = this.pos.add(vec2(0,this.size.y/2).rotate(this.angle));
+        drawTile(pos, this.size, this.tileInfo, this.color, this.angle);
+    }
+}
+
+class Player extends GameObject
+{
+    update()
+    {
+        // apply movement controls
+        const moveInput = keyDirection().clampLength(1).scale(.2); // clamp and scale input
+        this.velocity = this.velocity.add(moveInput); // apply movement
+
+        super.update(); // call parent update function
+        cameraPos = this.pos.add(vec2(0,2)); // move camera with player
+    }
+}
+
+
+function gameInit()
+{
+    // setup level
+    objectDefaultDamping = .7;
+    new Player(vec2(), vec2(3), tile(5), 0, RED);
+
+    // create background objects
+    for (let i = 1; i < 300; ++i)
+        new EngineObject(randInCircle(90), vec2(rand(59),rand(59)), 0, 0, hsl(.4,.3,rand(.1,.2),.8), -1e5);
+
+    // create world objects
+    for (let i = 1; i < 1e3; ++i)
+        new GameObject(randInCircle(7+i,7), vec2(rand(1,2),rand(4,9)), 0, 0, hsl(.1,.5,rand(.2,.3)));
+}

package/examples/shorts/timers.js

@@ -0,0 +1,40 @@
+class TimerButton extends EngineObject
+{
+    constructor(pos, time)
+    {
+        super(pos, vec2(5.5));
+        this.time = time;
+        this.timer = new Timer;
+    }
+
+    update()
+    {
+        // start or stop the timer when clicked
+        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
+            this.timer.isSet() ? this.timer.unset() : this.timer.set(this.time);
+    }
+
+    render()
+    {
+        // get color based on timer state
+        this.color = this.timer.isSet() ? this.timer.active() ? BLUE : RED : GRAY;
+
+        // draw the button and timer text
+        drawRect(this.pos, this.size, this.color);
+        if (this.timer.isSet())
+        {
+            drawTextOverlay(this.timer.get().toFixed(1), this.pos.add(vec2(0,1)), 2);
+            const percent = this.timer.getPercent()*100|0;
+            drawTextOverlay(percent+'%', this.pos.add(vec2(0,-1)), 2);
+        }
+        else
+            drawTextOverlay('Click\nto set', this.pos, 2);
+    }
+}
+
+function gameInit()
+{
+    // create some timer buttons
+    new TimerButton(vec2(-5, 0), 3);
+    new TimerButton(vec2( 5, 0), 0);
+}

package/examples/shorts/topDown.js

@@ -0,0 +1,44 @@
+class PhysicsObject extends EngineObject
+{
+    constructor(pos, size, color)
+    {
+        super(pos, size, 0, 0, color);
+        this.setCollision(); // make object collide
+        this.mass = 0; // make object have static physics
+    }
+}
+
+class Player extends PhysicsObject
+{
+    constructor(pos)
+    {
+        super(pos, vec2(2), RED);
+        this.mass = 1; // make object have dynamic physics
+        this.renderOrder = 1; // render player on top of other objects
+    }
+
+    update()
+    {
+        // apply movement controls
+        const moveInput = keyDirection().clampLength(1).scale(.2); // clamp and scale input
+        this.velocity = this.velocity.add(moveInput); // apply movement
+
+        super.update(); // call parent update function
+        cameraPos = this.pos; // move camera with player
+    }
+}
+
+function gameInit()
+{
+    // setup level
+    objectDefaultDamping = .7;
+    new Player();
+
+    // create background objects
+    for (let i = 1; i < 300; ++i)
+        new EngineObject(randInCircle(90), vec2(rand(59),rand(59)), 0, rand(), hsl(.4,.5,rand(.2)));
+
+    // create foreground objects
+    for (let i = 1; i < 300; ++i)
+        new PhysicsObject(randInCircle(7+i,7), vec2(rand(4,9),rand(4,9)), hsl(0,0,rand(.8,1)));
+}

package/examples/starter/game.js

@@ -70,9 +70,9 @@ function gameInit()
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
-        .99, 1, 1, PI,        // damping, angleDamping, gravityScale, cone
-        .05, .8, true, true         // fadeRate, randomness, collide, additive
+        2, .2, .2, .1, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
+        .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
+        .05, .5, true, true         // fadeRate, randomness, collide, additive
     );
     particleEmitter.elasticity = .3; // bounce when it collides
     particleEmitter.trailScale = 2;  // stretch in direction of motion

package/examples/starter/index.html

@@ -7,18 +7,18 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?1105></script>
-<script src=../../src/engineUtilities.js?1105></script>
-<script src=../../src/engineSettings.js?1105></script>
-<script src=../../src/engineObject.js?1105></script>
-<script src=../../src/engineDraw.js?1105></script>
-<script src=../../src/engineInput.js?1105></script>
-<script src=../../src/engineAudio.js?1105></script>
-<script src=../../src/engineTileLayer.js?1105></script>
-<script src=../../src/engineParticles.js?1105></script>
-<script src=../../src/engineMedals.js?1105></script>
-<script src=../../src/engineWebGL.js?1105></script>
-<script src=../../src/engine.js?1105></script>
+<script src=../../src/engineDebug.js?1117></script>
+<script src=../../src/engineUtilities.js?1117></script>
+<script src=../../src/engineSettings.js?1117></script>
+<script src=../../src/engineObject.js?1117></script>
+<script src=../../src/engineDraw.js?1117></script>
+<script src=../../src/engineInput.js?1117></script>
+<script src=../../src/engineAudio.js?1117></script>
+<script src=../../src/engineTileLayer.js?1117></script>
+<script src=../../src/engineParticles.js?1117></script>
+<script src=../../src/engineMedals.js?1117></script>
+<script src=../../src/engineWebGL.js?1117></script>
+<script src=../../src/engine.js?1117></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1105></script>
+<script src=game.js?1117></script>

package/examples/stress/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.min.js?1105></script>
+<script src=../../dist/littlejs.min.js?1117></script>
 <script>
 
 /*
@@ -161,6 +161,6 @@ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [ti
 
 ///////////////////////////////////////////////////////////////////////////////
 // music - Depp Loop
-const music = new Music([[[,0,77,,,.7,2,.41,,,,,,,,.06],[,0,43,.01,,.3,2,,,,,,,,,.02,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
+const music = new Music([[[.6,0,76,,,1,1,.5,,,,,.1,,,.06,,.5,.2,,-700],[,0,43,.01,,.2,2,,,,,,,,,,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
 
 </script>

package/examples/uiSystem/game.js

@@ -17,11 +17,15 @@ let uiRoot, uiMenu;
 const getMenuVisible =()=> uiMenu.visible;
 const setMenuVisible =(visible)=> uiMenu.visible = visible;
 
+// use a fixed size canvas
+canvasFixedSize = vec2(1920, 1080); // 1080p
+canvasPixelated = false;
+
 function createUI()
 {
     // setup root to attach all ui elements to
     uiRoot = new UIObject();
-    const uiInfo = new UIText(vec2(0,50), vec2(1e3, 70), 
+    const uiInfo = new UIText(vec2(0,90), vec2(1e3, 70), 
         'LittleJS UI System Example\nM = Toggle menu');
     uiInfo.textColor = WHITE;
     uiInfo.lineWidth = 8;
@@ -31,6 +35,7 @@ function createUI()
     uiMenu = new UIObject(vec2(0,450));
     uiRoot.addChild(uiMenu);
     const uiBackground = new UIObject(vec2(0,0), vec2(450,580));
+    uiBackground.lineWidth = 8;
     uiMenu.addChild(uiBackground);
 
     // example large text

package/examples/uiSystem/index.html

@@ -7,8 +7,8 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1105></script>
+<script src=../../dist/littlejs.js?1117></script>
 
 <!-- Add your game scripts here -->
-<script src=../../plugins/uiSystem.js?1105></script>
-<script src=game.js?1105></script>
+<script src=../../plugins/uiSystem.js?1117></script>
+<script src=game.js?1117></script>

package/package.json

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

package/plugins/Box2D_License.txt

@@ -0,0 +1,17 @@
+Copyright (c) 2006-2010 Erin Catto http://www.gphysics.com
+
+This software is provided 'as-is', without any express or implied
+warranty.  In no event will the authors be held liable for any damages
+arising from the use of this software.
+
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it
+freely, subject to the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not
+claim that you wrote the original software. If you use this software
+in a product, an acknowledgment in the product documentation would be
+appreciated but is not required.
+2. Altered source versions must be plainly marked as such, and must not be
+misrepresented as being the original software.
+3. This notice may not be removed or altered from any source distribution.

package/plugins/uiSystem.js

@@ -246,7 +246,8 @@ class UICheckbox extends UIObject
     }
     render()
     {
-        drawUIRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
+        const color = this.mouseIsOver? this.hoverColor : this.color;
+        drawUIRect(this.pos, this.size, color, this.lineWidth, this.lineColor);
         if (this.checked)
         {
             // draw an X if checked

package/reference.md

@@ -224,6 +224,7 @@ soundDefaultTaper = .7  // Default range percent to taper off sound (0-1)
 keyIsDown(key)                        // Is key down?
 keyWasPressed(key)                    // Was key pressed this frame?
 keyWasReleased(key)                   // Was key released this frame?
+keyDirection()                        // Get input vector from arrow keys or wasd
 
 // Mouse / Touch
 mousePos                              // World space mouse position
@@ -406,4 +407,4 @@ showWatermark        // True if watermark with FPS should be show
 
 [LittleJS Engine](https://github.com/KilledByAPixel/LittleJS) Copyright 2021 Frank Force
 
-![LittleJS Logo](examples/favicon.png)
+![LittleJS Logo](examples/favicon.png)

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.11.5';
+const engineVersion = '1.11.7';
 
 /** Frames per second to update
  *  @type {Number}

package/src/engineDebug.js

@@ -162,6 +162,10 @@ function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monos
  *  @memberof Debug */
 function debugClear() { debugPrimitives = []; }
 
+/** Trigger debug system to take a screenshot
+ *  @memberof Debug */
+function debugScreenshot() { debugTakeScreenshot = 1; }
+
 /** Save a canvas to disk 
  *  @param {HTMLCanvasElement} canvas
  *  @param {String}            [filename]
@@ -235,7 +239,7 @@ function debugUpdate()
         if (keyWasPressed('Digit4'))
             debugRaycast = !debugRaycast;
         if (keyWasPressed('Digit5'))
-            debugTakeScreenshot = 1;
+            debugScreenshot();
     }
 }
 

package/src/engineDraw.js

@@ -458,7 +458,10 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     context.lineJoin = 'round';
 
     pos = pos.copy();
-    (text+'').split('\n').forEach(line=>
+
+    const lines = (text+'').split('\n');
+    pos.y -= (lines.length-1) * size/2; // center text vertically
+    lines.forEach(line=>
     {
         lineWidth && context.strokeText(line, pos.x, pos.y, maxWidth);
         context.fillText(line, pos.x, pos.y, maxWidth);

package/src/engineExport.js

@@ -19,6 +19,7 @@ export {
 	engineInit,
 	engineObjectsUpdate,
 	engineObjectsDestroy,
+	engineObjectsCollect,
 	engineObjectsCallback,
 	engineObjectsRaycast,
 	engineAddPlugin,
@@ -38,6 +39,7 @@ export {
 	debugOverlap,
 	debugText,
 	debugClear,
+	debugScreenshot,
 	debugSaveCanvas,
 	debugSaveText,
 	debugSaveDataURL,
@@ -236,6 +238,7 @@ export {
 	keyIsDown,
 	keyWasPressed,
 	keyWasReleased,
+	keyDirection,
 	clearInput,
 	mouseIsDown,
 	mouseWasPressed,

package/src/engineInput.js

@@ -43,6 +43,15 @@ function keyWasReleased(key, device=0)
     return inputData[device] && !!(inputData[device][key] & 4);
 }
 
+/** Returns input vector from arrow keys or WASD if enabled
+ *  @return {Vector2}
+ *  @memberof Input */
+function keyDirection(up='ArrowUp', down='ArrowDown', left='ArrowLeft', right='ArrowRight')
+{
+    const k = (key)=> keyIsDown(key) ? 1 : 0;
+    return vec2(k(right) - k(left), k(up) - k(down));
+}
+
 /** Clears all input
  *  @memberof Input */
 function clearInput() { inputData = [[]]; touchGamepadButtons = []; }
@@ -126,9 +135,9 @@ function gamepadStick(stick,  gamepad=0)
 { return gamepadStickData[gamepad] ? gamepadStickData[gamepad][stick] || vec2() : vec2(); }
 
 ///////////////////////////////////////////////////////////////////////////////
-// Input update called by engine
+// Input system functions called automatically by engine
 
-// store input as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
+// input is stored as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
 // mouse and keyboard are stored together in device 0, gamepads are in devices > 0
 let inputData = [[]];
 
@@ -158,9 +167,6 @@ function inputUpdatePost()
     mouseWheel = 0;
 }
 
-///////////////////////////////////////////////////////////////////////////////
-// Input event handlers
-
 function inputInit()
 {
     if (headlessMode) return;
@@ -203,11 +209,11 @@ function inputInit()
         
         isUsingGamepad = false; 
         inputData[0][e.button] = 3; 
-        mousePosScreen = mouseToScreen(e); 
+        mousePosScreen = mouseEventToScreen(e); 
         e.button && e.preventDefault();
     }
     onmouseup     = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
-    onmousemove   = (e)=> mousePosScreen = mouseToScreen(e);
+    onmousemove   = (e)=> mousePosScreen = mouseEventToScreen(e);
     onwheel       = (e)=> mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
     oncontextmenu = (e)=> false; // prevent right click menu
     onblur        = (e) => clearInput(); // reset input when focus is lost
@@ -218,14 +224,12 @@ function inputInit()
 }
 
 // convert a mouse or touch event position to screen space
-function mouseToScreen(mousePos)
+function mouseEventToScreen(mousePos)
 {
-    if (!mainCanvas || headlessMode)
-        return vec2(); // fix bug that can occur if user clicks before page loads
-
     const rect = mainCanvas.getBoundingClientRect();
-    return vec2(mainCanvas.width, mainCanvas.height).multiply(
-        vec2(percent(mousePos.x, rect.left, rect.right), percent(mousePos.y, rect.top, rect.bottom)));
+    const px = percent(mousePos.x, rect.left, rect.right);
+    const py = percent(mousePos.y, rect.top, rect.bottom);
+    return vec2(px*mainCanvas.width, py*mainCanvas.height);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -380,7 +384,7 @@ function touchInputInit()
         {
             // set event pos and pass it along
             const p = vec2(e.touches[0].clientX, e.touches[0].clientY);
-            mousePosScreen = mouseToScreen(p);
+            mousePosScreen = mouseEventToScreen(p);
             wasTouching ? isUsingGamepad = touchGamepadEnable : inputData[0][button] = 3;
         }
         else if (wasTouching)
@@ -428,7 +432,7 @@ function touchInputInit()
         // check each touch point
         for (const touch of e.touches)
         {
-            const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
+            const touchPos = mouseEventToScreen(vec2(touch.clientX, touch.clientY));
             if (touchPos.distance(stickCenter) < touchGamepadSize)
             {
                 // virtual analog stick

package/src/engineObject.js

@@ -338,19 +338,19 @@ class EngineObject
 
     /** Convert from local space to world space
      *  @param {Vector2} pos - local space point */
-    localToWorld(pos) { return this.pos.add(pos.rotate(-this.angle)); }
+    localToWorld(pos) { return this.pos.add(pos.rotate(this.angle)); }
 
     /** Convert from world space to local space
      *  @param {Vector2} pos - world space point */
-    worldToLocal(pos) { return pos.subtract(this.pos).rotate(this.angle); }
+    worldToLocal(pos) { return pos.subtract(this.pos).rotate(-this.angle); }
 
     /** Convert from local space to world space for a vector (rotation only)
      *  @param {Vector2} vec - local space vector */
-    localToWorldVector(vec) { return vec.rotate(this.angle); }
+    localToWorldVector(vec) { return vec.rotate(-this.angle); }
 
     /** Convert from world space to local space for a vector (rotation only)
      *  @param {Vector2} vec - world space vector */
-    worldToLocalVector(vec) { return vec.rotate(-this.angle); }
+    worldToLocalVector(vec) { return vec.rotate(this.angle); }
     
     /** Called to check if a tile collision should be resolved
      *  @param {Number}  tileData - the value of the tile at the position