littlejsengine 1.9.9 → 1.9.11

package/examples/box2d/scenes.js

@@ -1,6 +1,18 @@
 /*
     LittleJS Box2D Example - Secenes
     - Each scene demonstrates a feature of Box2D
+    - Feel free to use tis code in your own projects
+    - 0  = Shapes: box, circle, poly, and edge
+    - 1  = Pyramid stack
+    - 2  = Dominoes chain reaction
+    - 3  = Car with controls
+    - 4  = Rope with box attached
+    - 5  = Raycasts in all directions
+    - 6  = Joints demo with every joint type
+    - 7  = Contacts begin and end callbacks
+    - 8  = Mobile object with multiple bodies
+    - 9  = Cloth object grid using rope joints
+    - 10 = Softbody object grid using weld joints
 */
 
 'use strict';
@@ -15,8 +27,8 @@ function loadScene(_scene)
 
     // destroy old scene
     engineObjectsDestroy();
-    carWheelJoint = 0;
     mouseJoint = 0;
+    car = 0;
     
     // create walls
     groundObject = spawnBox(vec2(0,-4), vec2(1e3,8), hsl(0,0,.2), box2dBodyTypeStatic);
@@ -54,7 +66,7 @@ function loadScene(_scene)
     if (scene == 3)
     {
         sceneName = 'Car';
-        spawnCar(vec2(10,2));
+        car = new CarObject(vec2(10,2));
         spawnBox(vec2(20,0), vec2(10,2), randColor(), box2dBodyTypeStatic, false, -.2);
         spawnPyramid(vec2(32,0), 6);
     }
@@ -99,29 +111,11 @@ function loadScene(_scene)
             l1.renderOrder = l2.renderOrder = -2;
         }
         {
-            // pulley object renders a rope to connected point
-            class PulleyObjects extends Box2dObject
-            {
-                constructor(pos, size, color, connectionPos)
-                {
-                    super(pos, size, tile(3), 0, color);
-                    this.addBox(size);
-                    this.connectionPos = connectionPos;
-                }
-                render()
-                {
-                    // draw rope
-                    const topPos = this.localToWorld(vec2(0,this.size.y/2));
-                    drawLine(topPos, this.connectionPos, .2, BLACK);
-                    super.render();
-                }
-            }
-
             // pulley joint
             const anchorA = vec2(14,15);
             const anchorB = vec2(26,15);
-            const oA = new PulleyObjects(vec2(15,8), vec2(1,2), randColor(), anchorA);
-            const oB = new PulleyObjects(vec2(25,8), vec2(1,2), randColor(), anchorB);
+            const oA = new PulleyJointObjects(vec2(15,8), vec2(1,2), randColor(), anchorA);
+            const oB = new PulleyJointObjects(vec2(25,8), vec2(1,2), randColor(), anchorB);
             const aA = spawnCircle(anchorA, 2, randColor(), box2dBodyTypeStatic);
             const aB = spawnCircle(anchorB, 2, randColor(), box2dBodyTypeStatic);
             const oaA = oA.localToWorld(vec2(0,oA.size.y/2));
@@ -156,31 +150,10 @@ function loadScene(_scene)
             box2dCreateDistanceJoint(o1, o2);
         }
         {
-            // motor object renders a rope to connected point
-            class MotorObject extends Box2dObject
-            {
-                constructor(pos, size, color, otherObject)
-                {
-                    super(pos, size, tile(4), 0, color);
-                    this.addCircle(size.x);
-                    this.connectionPos = pos;
-                    const joint = box2dCreateMotorJoint(otherObject, this);
-                    joint.SetMaxForce(500);
-                    joint.SetMaxTorque(500);
-                }
-                render()
-                {
-                    // draw rope
-                    const width = 2/(1+this.pos.distance(this.connectionPos));
-                    drawLine(this.pos, this.connectionPos, width, BLACK);
-                    super.render();
-                }
-            }
-
             // motor joint
             const o = new Box2dObject(vec2(10,8), vec2(4), tile(2), 0, randColor(), box2dBodyTypeStatic);
             o.renderOrder = -2;
-            new MotorObject(vec2(10,8), vec2(2), randColor(), o);
+            new MotorJointObject(vec2(10,8), vec2(2), randColor(), o);
         }
         {
             // friction joint
@@ -194,26 +167,8 @@ function loadScene(_scene)
     if (scene == 7)
     {
         sceneName = 'Contacts';
-        // changes objects color when touched
-        class ContactTester extends Box2dObject
-        {
-            constructor(pos, size, color, contactColor, isSensor=false)
-            {
-                super(pos, size, 0, 0, color, box2dBodyTypeStatic);
-                if (isSensor)
-                {
-                    this.addCircle(size.x);
-                    this.setSensor(isSensor);
-                }
-                else
-                    this.addBox(size);
-                this.contactColor = contactColor;
-            }
-            beginContact(other) { other.color = this.contactColor; }
-            endContact(other)   { other.color = WHITE; }
-        }
-        new ContactTester(vec2(15,8), vec2(5), hsl(0,0,0,.3), RED, true);
-        new ContactTester(vec2(25,8), vec2(5), hsl(0,0,.1), GREEN);
+        new ContactTester(vec2(15,8), vec2(5), RED,  RED);
+        new ContactTester(vec2(25,8), vec2(5), CYAN, CYAN, false, false);
         for (let i=200;i--;)
             spawnRandomObject(vec2(rand(1,39), rand(10,50)));
     }
@@ -221,192 +176,18 @@ function loadScene(_scene)
     {
         sceneName = 'Mobile';
         const pos = vec2(20, 16);
-        const mobile = spawnMobile(pos, 12, 2, 5);
+        const mobile = new MobileObject(pos, 12, 2, 5);
         box2dCreateRevoluteJoint(groundObject, mobile, pos);
     }
-    
-    // helper functions
-    function spawnRandomEdges()
-    {
-        // edge list along bottom
-        const edgePoints = [];
-        edgePoints.push(vec2(40,0));
-        for (let i=40, y=0; i--;)
-            edgePoints.push(vec2(i, y=clamp(y+rand(-2,2),0,5)));
-        edgePoints.push(vec2(0,0));
-        const o = new Box2dObject(vec2(), vec2(), 0, 0, BLACK, box2dBodyTypeStatic);
-        o.addEdgeList(edgePoints);
-    }
-    function spawnRope(startPos, count, angle=PI, color=WHITE, size=vec2(.3,1))
-    {
-        let lastObject = groundObject;
-        for (let i=0; i<count; ++i)
-        {
-            const pos = startPos.add(size.multiply(vec2(0,i+.5)).rotate(-angle));
-            const o = spawnBox(pos, size, color, box2dBodyTypeDynamic, false, angle);
-            o.setFilterData(2, 2);
-            const anchorPos = pos.add(vec2(0,-size.y/2).rotate(-angle));
-            box2dCreateRevoluteJoint(lastObject, o, anchorPos);
-            lastObject = o;
-        }
-        const endPos = lastObject.localToWorld(vec2(0,-size.y/2));
-        box2dCreateRopeJoint(groundObject, lastObject, startPos, endPos);
-        return lastObject;
-    }
-    function spawnPyramid(pos, count)
-    {
-        for (let i=count+1;i--;)
-        for (let j=i;j--;)
-            spawnBox(pos.add(vec2(j-i/2+.5,count-i+.5)), 1, randColor());
-    }
-    function spawnDominoes(pos, count, size=vec2(.5,2))
-    {
-        for (let i=count; i--;)
-            spawnBox(pos.add(vec2(i*size.y*.9,size.y/2)), size, randColor());
-    }
-    function spawnCar(pos)
-    {
-        // car object
-        const car = new Box2dObject(pos, vec2(), 0, 0, randColor());
-        const carPoints = [
-			vec2(-1.5,-.5),
-			vec2(1.5, -.5),
-			vec2(1.5,   0),
-			vec2(0,    .9),
-			vec2(-1.15,.9),
-			vec2(-1.5, .2),
-        ];
-        car.addPoly(carPoints);
-
-        // wheel settings
-        const frequencyHz = 4;
-        const dampingRatio = .7;
-        const wheelDensity = 1;
-        const wheelFriction = 2;
-        const wheelRestitution = 0;
-        const wheelSize = .8;
-
-        // back wheel
-        const wheel1Pos = pos.add(vec2(-1, -.65));
-        const wheel1 = new Box2dObject(wheel1Pos, vec2(wheelSize), tile(4));
-        wheel1.addCircle(wheelSize,vec2(),wheelDensity,wheelFriction,wheelRestitution);
-        const joint1 = box2dCreateWheelJoint(car,wheel1);
-        joint1.SetSpringDampingRatio(dampingRatio);
-        joint1.SetSpringFrequencyHz(frequencyHz);
-        joint1.SetMaxMotorTorque(50);
-        joint1.EnableMotor(true);
-        carWheelJoint = joint1;
-
-        // front wheel
-        const wheel2Pos = pos.add(vec2(1, -.6));
-        const wheel2 = new Box2dObject(wheel2Pos, vec2(wheelSize), tile(4));
-        wheel2.addCircle(wheelSize,vec2(),wheelDensity,wheelFriction,wheelRestitution);
-        const joint2 = box2dCreateWheelJoint(car,wheel2);
-        joint2.SetSpringDampingRatio(dampingRatio);
-        joint2.SetSpringFrequencyHz(frequencyHz);
-    }
-    function spawnMobile(anchor, w, h, depth)
-    {
-        // tall box
-        const pos = anchor.add(vec2(0,-h/2));
-        const o = spawnBox(pos, vec2(h/4, h), randColor(), box2dBodyTypeDynamic, false);
-        if (--depth)
-        {
-            // long box on bottom
-            o.addBox(vec2(w, h/4), vec2(0, -h/2));
-
-            // spawn smaller mobiles attached to each side
-            for(let i=2; i--;)
-            {
-                const a = anchor.add(vec2( w/2*(i?1:-1), -h));
-                const o2 = spawnMobile(a, w/2, h, depth);
-                box2dCreateRevoluteJoint(o, o2, a);
-            }
-        }
-        return o;
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Spawn object functions
-
-function spawnBox(pos, size=1, color=WHITE, type=box2dBodyTypeDynamic, applyTexture=true, angle=0)
-{
-    size = typeof size == 'number' ? vec2(size) : size; // square
-    const o = new Box2dObject(pos, size, applyTexture && tile(3), angle, color, type);
-    o.addBox(size);
-    return o;
-}
-
-function spawnCircle(pos, diameter=1, color=WHITE, type=box2dBodyTypeDynamic, applyTexture=true, angle=0)
-{
-    const size = vec2(diameter);
-    const o = new Box2dObject(pos, size, applyTexture && tile(2), angle, color, type);
-    o.addCircle(diameter);
-    return o;
-}
-
-function spawnRandomPoly(pos, diameter=1, color=WHITE, type=box2dBodyTypeDynamic, angle=0)
-{
-    const o = new Box2dObject(pos, vec2(), 0, angle, color, type);
-    o.addRandomPoly(diameter);
-    return o;
-}
-
-function spawnRandomObject(pos, scale=1, type=box2dBodyTypeDynamic, angle=0)
-{
-    if (randInt(2))
+    if (scene == 9)
     {
-        const size = vec2(scale*rand(.5,1), scale*rand(.5,1));
-        return spawnBox(pos, size, randColor(), type, true, angle);
+        sceneName = 'Cloth';
+        new ClothObject(vec2(20, 9), vec2(15), vec2(24), randColor());
     }
-    else
-    {
-        const diameter = scale*rand(.5,1);
-        return spawnCircle(pos, diameter, randColor(), type, true, angle);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Effects
-
-const sound_click = new Sound([,.1]);
-const sound_explosion = new Sound([,.2,72,.01,.01,.2,4,,,,,,,1,,.5,.1,.5,.02]);
-
-function explosion(pos, radius=3, strength=300)
-{
-    sound_explosion.play(pos);
-    const objects = box2dCircleCastAll(pos, (radius*2));
-    const newColor = randColor();
-    for (const o of objects)
+    if (scene == 10)
     {
-        const p = percent(o.pos.distance(pos), 2*radius, radius);
-        const force = o.pos.subtract(pos).normalize(p*radius*strength);
-        o.applyForce(force);
-        o.color = newColor;
+        sceneName = 'Softbodies';
+        for(let i=3;i--;)
+            new SoftBodyObject(vec2(20, 3+i*7), vec2(6-i), vec2(9-i), randColor());
     }
-
-    // smoke
-    new ParticleEmitter(
-        pos, 0,                     // pos, angle
-        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
-        tile(1),                    // tileInfo
-        hsl(0,0,0),   hsl(0,0,0),   // colorStartA, colorStartB
-        hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        1, 1, 2, .1, .1,    // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, -.5, PI, .1, // damp, angleDamp, gravity, particleCone, fade
-        1, 0, 0, 0, 1e8     // randomness, collide, additive, colorLinear, renderOrder
-    );
-
-    // fire
-    new ParticleEmitter(
-        pos, 0,                         // pos, angle
-        radius, .1, 100*radius, PI,     // emitSize, emitTime, emitRate, emiteCone
-        tile(1),                        // tileInfo
-        hsl(0,1,.5),   hsl(.15,1,.5),   // colorStartA, colorStartB
-        hsl(0,1,.5,0), hsl(.1, 1,.5,0), // colorEndA, colorEndB
-        .7, 1, .5, .1, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, 0, PI, .05, // damp, angleDamp, gravity, particleCone, fade
-        1, 0, 1, 0, 1e9    // randomness, collide, additive, colorLinear, renderOrder
-    );
-}
+}

package/examples/breakout/index.html

@@ -5,7 +5,7 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?197></script>
+<script src=../../dist/littlejs.js?198></script>
 <script src=../../plugins/postProcess.js></script>
-<script src=gameObjects.js?197></script>
-<script src=game.js?197></script>
+<script src=gameObjects.js?198></script>
+<script src=game.js?198></script>

package/examples/breakoutTutorial/index.html

@@ -5,5 +5,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?197></script>
-<script src=game.js?197></script>
+<script src=../../dist/littlejs.js?198></script>
+<script src=game.js?198></script>

package/examples/electron/index.html

@@ -6,7 +6,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?197></script>
+<script src=../../dist/littlejs.js?198></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?197></script>
+<script src=game.js?198></script>

package/examples/js13k/index.html

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

package/examples/module/index.html

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

package/examples/particles/index.html

@@ -9,7 +9,7 @@ button { margin:1px; }
 </style>
 </head><body>
 
-<script src=../../dist/littlejs.js?197></script>
+<script src=../../dist/littlejs.js?198></script>
 <script>
 
 'use strict';

package/examples/platformer/gameCharacter.js

@@ -41,6 +41,7 @@ class Character extends GameObject
         if (this.isDead())
             return super.update();
 
+        // get move input
         const moveInput = this.moveInput.copy();
         
         // jump

package/examples/platformer/gameEffects.js

@@ -92,8 +92,6 @@ function explosion(pos, radius=3)
         const p = percent(d, 2*radius, radius);
         const force = o.pos.subtract(pos).normalize(p*radius*.2);
         o.applyForce(force);
-        if (o.isDead && o.isDead())
-            o.angleVelocity += randSign()*rand(p*radius/4,.3);
     });
 
     // smoke

package/examples/platformer/gameObjects.js

@@ -66,7 +66,7 @@ class Crate extends GameObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(1), spriteAtlas.crate, (randInt(4))*PI/2);
+        super(pos, vec2(.999), spriteAtlas.crate, (randInt(4))*PI/2);
 
         this.color = hsl(rand(),1,.8);
         this.health = 5;

package/examples/platformer/index.html

@@ -6,11 +6,11 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?197></script>
-<script src=gameObjects.js?197></script>
-<script src=gameCharacter.js?197></script>
-<script src=gamePlayer.js?197></script>
-<script src=gameEffects.js?197></script>
-<script src=gameLevel.js?197></script>
-<script src=gameLevelData.js?197></script>
-<script src=game.js?197></script>
+<script src=../../dist/littlejs.js?198></script>
+<script src=gameObjects.js?198></script>
+<script src=gameCharacter.js?198></script>
+<script src=gamePlayer.js?198></script>
+<script src=gameEffects.js?198></script>
+<script src=gameLevel.js?198></script>
+<script src=gameLevelData.js?198></script>
+<script src=game.js?198></script>

package/examples/puzzle/index.html

@@ -5,5 +5,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?197></script>
-<script src=game.js?197></script>
+<script src=../../dist/littlejs.js?198></script>
+<script src=game.js?198></script>

package/examples/starter/game.js

@@ -63,7 +63,7 @@ function gameInit()
     // create particle emitter
     particleEmitter = new ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        1, 0, 500, PI,              // emitSize, emitTime, emitRate, emiteCone
+        0, 0, 500, PI,              // emitSize, emitTime, emitRate, emiteCone
         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

package/examples/starter/index.html

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

package/examples/stress/index.html

@@ -6,7 +6,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.min.js?197></script>
+<script src=../../dist/littlejs.min.js?198></script>
 <script>
 
 /*

package/examples/typescript/index.html

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

package/package.json

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