littlejsengine 1.12.4 → 1.13.1

package/examples/box2d/game.js

@@ -17,24 +17,21 @@ import * as GameObjects from './gameObjects.js';
 import * as Scenes from './scenes.js';
 const {vec2, hsl} = LJS;
 
+// use HD textures
+LJS.setCanvasPixelated(false);
+LJS.setTilesPixelated(false);
+
 ///////////////////////////////////////////////////////////////////////////////
 // game variables
 
-//LJS.box2dSetDebug(true); // enable box2d debug draw
-
 const maxScenes = 11;
-export let scene = 0, sceneName;
-export let spriteAtlas, groundObject, car, mouseJoint, repeatSpawnTimer = new LJS.Timer;
+const startScene = 0;
+export let spriteAtlas, groundObject, mouseJoint, repeatSpawnTimer = new LJS.Timer;
 const sound_click = new LJS.Sound([.2,.1,,,,.01,,,,,,,,,,,,,,,-500]);
 
-export function setSceneName(name) { sceneName = name; }
-export function setCarObject(carObject) { car = carObject; }
-
 ///////////////////////////////////////////////////////////////////////////////
-function setScene(_scene)
+function setScene(scene)
 {
-    scene = _scene;
-
     // setup
     LJS.setCameraPos(vec2(20,10));
     LJS.setGravity(vec2(0,-20));
@@ -42,7 +39,6 @@ function setScene(_scene)
     // destroy old scene
     LJS.engineObjectsDestroy();
     mouseJoint = 0;
-    car = 0;
     
     // create walls
     groundObject = GameObjects.spawnBox(vec2(0,-4), vec2(1e3,8), hsl(0,0,.2), LJS.box2d.bodyTypeStatic);
@@ -55,10 +51,14 @@ function setScene(_scene)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-function gameInit()
+async function gameInit()
 {
+    // start up LittleJS Box2D plugin
+    await LJS.box2dInit();
+    //LJS.box2dSetDebug(true); // enable box2d debug draw
+
     // create a table of all sprites
-    const gameTile = (i)=> LJS.tile(i, 16, 0, 1);
+    const gameTile = (i)=> LJS.tile(i, 496, 0, 8);
     spriteAtlas =
     {
         circle:         gameTile(0),
@@ -70,7 +70,7 @@ function gameInit()
         squareOutline2: gameTile(6),
     };
 
-    setScene(scene);
+    setScene(startScene);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -80,7 +80,19 @@ function gameUpdate()
     LJS.setCameraScale(LJS.mainCanvasSize.y * 48 / 1080);
 
     // mouse controls
-    if (LJS.mouseWasPressed(0))
+    if (mouseJoint)
+    {
+        // update mouse joint
+        mouseJoint.setTarget(LJS.mousePos);
+        if (LJS.mouseWasReleased(0))
+        {
+            // release object
+            sound_click.play(LJS.mousePos, 1, .5);
+            mouseJoint.destroy();
+            mouseJoint = 0;
+        }
+    }
+    else if (LJS.mouseWasPressed(0))
     {
         // grab object
         sound_click.play(LJS.mousePos);
@@ -88,16 +100,8 @@ function gameUpdate()
         if (object)
             mouseJoint = new LJS.Box2dTargetJoint(object, groundObject, LJS.mousePos);
     }
-    if (LJS.mouseWasReleased(0))
-    {
-        // release object
-        sound_click.play(LJS.mousePos, 1, .5);
-        if (mouseJoint)
-        {
-            mouseJoint.destroy();
-            mouseJoint = 0;
-        }
-    }
+
+    // controls
     if (LJS.mouseIsDown(1) || LJS.mouseIsDown('KeyZ'))
     {
         const isSet = repeatSpawnTimer.isSet();
@@ -112,23 +116,14 @@ function gameUpdate()
         repeatSpawnTimer.unset();
     if (LJS.mouseWasPressed(2) || LJS.keyWasPressed('KeyX'))
         GameObjects.explosion(LJS.mousePos);
-    if (mouseJoint)
-        mouseJoint.setTarget(LJS.mousePos);
 
     if (LJS.keyWasPressed('KeyR'))
-        setScene(scene); // reset scene
+        setScene(Scenes.scene); // reset scene
     if (LJS.keyWasPressed('ArrowUp') || LJS.keyWasPressed('ArrowDown'))
     {
         // change scene
-        scene += LJS.keyWasPressed('ArrowUp') ? 1 : -1;
-        scene = LJS.mod(scene, maxScenes);
-        setScene(scene);
-    }
-    if (car)
-    {
-        // update car controls
-        const input = LJS.keyDirection();
-        car.applyMotorInput(-input.x);
+        const upPressed = LJS.keyWasPressed('ArrowUp');
+        setScene(LJS.mod(Scenes.scene + (upPressed?1:-1), maxScenes));
     }
 }
 
@@ -144,7 +139,7 @@ function gameRender()
     // draw a grey square in the background without using webgl
     LJS.drawRect(vec2(20,8), vec2(100), hsl(0,0,.8), 0, 0);
 
-    if (scene == 5)
+    if (Scenes.scene == 5)
     {
         // raycast test
         const count = 100;
@@ -174,15 +169,15 @@ function gameRenderPost()
     // draw to overlay canvas for hud rendering
     const pos = vec2(LJS.mainCanvasSize.x/2, 50);
     drawText('LittleJS Box2D Demo', 80, 80);
-    drawText(sceneName, 60, 100);
-    if (scene == 0)
+    drawText(Scenes.sceneName, 60, 100);
+    if (Scenes.scene == 0)
     {
         drawText('Mouse Left = Grab');
         drawText('Mouse Middle or Z = Spawn');
         drawText('Mouse Right or X = Explode');
         drawText('Arrows Up/Down = Change Scene');
     }
-    if (scene == 3)
+    if (Scenes.scene == 3)
     {
         drawText('Right = Accelerate');
         drawText('Left = Reverse');
@@ -195,4 +190,4 @@ function gameRenderPost()
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine with Box2D
 
-LJS.box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

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;
 }
 
@@ -59,7 +63,7 @@ export function spawnPyramid(pos, count)
         spawnBox(pos.add(vec2(j-i/2+.5,count-i+.5)), 1, LJS.randColor());
 }
 
-export function spawnDominoes(pos, count, size=vec2(.5,2))
+export function spawnDominoes(pos, count, size=vec2(.5,3))
 {
     for (let i=count; i--;)
         spawnBox(pos.add(vec2(i*size.y*.9,size.y/2)), size, LJS.randColor());
@@ -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()
     {
+        super.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) : 0;
         this.wheelMotorJoint.setMotorSpeed(s);
     }
     destroy()
     {
-        this.wheels.forEach(o=>o && o.destroy());
+        this.wheels.forEach(o=>o.destroy());
         super.destroy();
     }
 }
@@ -390,6 +393,8 @@ export class ClothObject extends LJS.Box2dObject
     }
     update()
     {
+        super.update();
+        
         for (let y=this.sizeCount.y; y--;)
         for (let x=this.sizeCount.x; x--;)
         {
@@ -422,7 +427,6 @@ export class ClothObject extends LJS.Box2dObject
                 this.nodes[y*this.sizeCount.x+x] = 0;
             }
         }
-        super.update();
     }
     render()
     {

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=game.js type=module></script>
+<script src=../../dist/box2d.wasm.js></script>
+<script src=game.js type=module></script>

package/examples/box2d/scenes.js

@@ -23,45 +23,49 @@ 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);
-        GameObjects.spawnRandomPoly(vec2(29,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
+        GameObjects.spawnRandomPoly(vec2(29,8), 4, LJS.randColor(), LJS.box2d.bodyTypeStatic);
         for (let i=500;i--;)
             GameObjects.spawnRandomObject(vec2(LJS.rand(1,39), LJS.rand(10,50)));
     }
     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');
-        GameObjects.spawnDominoes(vec2(11,11), 11);
-        GameObjects.spawnDominoes(vec2(2,0), 13, vec2(1,3));
-        GameObjects.spawnCircle(vec2(10,20), 2, LJS.randColor());
-        GameObjects.spawnCircle(vec2(31.7,12), 2, LJS.randColor());
-        GameObjects.spawnBox(vec2(16,11), vec2(32,1), LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
-        GameObjects.spawnBox(vec2(24,6.5), vec2(32,1), LJS.randColor(), LJS.box2d.bodyTypeStatic, false, -.15);
+        sceneName = 'Dominoes';
+        GameObjects.spawnDominoes(vec2(11,13), 8);
+        GameObjects.spawnDominoes(vec2(3,0), 10, vec2(1,4));
+        GameObjects.spawnCircle(vec2(10.2,20), 1.5, LJS.randColor());
+        GameObjects.spawnCircle(vec2(31.9,15), 2.5, LJS.randColor());
+        GameObjects.spawnBox(vec2(16,13), vec2(32,1), LJS.randColor(), LJS.box2d.bodyTypeStatic, false);
+        GameObjects.spawnBox(vec2(24,8), vec2(34,1), LJS.randColor(), LJS.box2d.bodyTypeStatic, false, -.15);
     }
     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/breakout/game.js

@@ -104,7 +104,7 @@ function gameRenderPost()
 {
     // use built in image font for text
     const font = new LJS.FontImage;
-    font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,10)), .15, true);
+    font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,9.7)), .15, true);
     if (!brickCount)
         font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
     else if (!ball)

package/examples/breakout/gameObjects.js

@@ -31,7 +31,7 @@ export class Wall extends PhysicsObject
 {
     constructor(pos, size)
     {
-        super(pos, size, 0, 0, hsl(0,0,0));
+        super(pos, size, 0, 0, hsl(0,0,0,0));
     }
 }
 
@@ -103,7 +103,7 @@ export class Ball extends PhysicsObject
 
         // make a bouncy ball
         this.velocity = vec2(0, -.1);
-        this.elasticity = 1;
+        this.restitution = 1;
         this.mass = 1;
         
         // attach a trail effect

package/examples/breakout/index.html

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

package/examples/breakoutTutorial/README.md

@@ -189,10 +189,10 @@ Now the ball collides but unfortunately also pushes the paddle away, not quite w
 this.mass = 0; // make object have static physics
 ```
 
-Getting closer, the paddle is not pushed away but the ball doesn’t bounce either. To make it bounce, we need to set the ball’s elasticity which controls how much it will bounce.
+Getting closer, the paddle is not pushed away but the ball doesn’t bounce either. To make it bounce, we need to set the ball’s restitution which controls how much it will bounce.
 
 ```javascript
-this.elasticity = 1; // make object bounce
+this.restitution = 1; // make object bounce
 ```
 
 ![LittleJS Screenshot](images/5.png)

package/examples/breakoutTutorial/game.js

@@ -52,7 +52,7 @@ class Ball extends LJS.EngineObject
 
         this.velocity = vec2(-.1, -.1); // give ball some movement
         this.setCollision(); // make object collide
-        this.elasticity = 1; // make object bounce
+        this.restitution = 1; // make object bounce
     }
     collideWithObject(o)              
     {

package/examples/breakoutTutorial/index.html

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

package/examples/empty/index.html

@@ -2,4 +2,4 @@
 <title>LittleJS Hello World Demo</title>
 <meta charset=utf-8>
 </head><body>
-<script src=game.js type=module></script>
+<script src=game.js type=module></script>

package/examples/htmlMenu/index.html

@@ -42,4 +42,4 @@ This is an example menu using html elements.
 </div>
 
 <!-- Add your game scripts here -->
-<script src=game.js type=module></script>
+<script src=game.js type=module></script>