littlejsengine 1.10.2 → 1.10.7

package/examples/box2d/gameObjects.js

@@ -12,7 +12,8 @@
 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);
+    const o = new Box2dObject(pos, size, applyTexture && spriteAtlas.squareOutline, angle, color, type);
+    o.drawSize = size.scale(1.02); // slightly enarge to cover gaps
     o.addBox(size);
     return o;
 }
@@ -20,7 +21,7 @@ function spawnBox(pos, size=1, color=WHITE, type=box2dBodyTypeDynamic, applyText
 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);
+    const o = new Box2dObject(pos, size, applyTexture && spriteAtlas.circleOutline, angle, color, type);
     o.addCircle(diameter);
     return o;
 }
@@ -115,7 +116,7 @@ class CarObject extends Box2dObject
             const damping     = .7;
             const frequencyHz = 4;
             const maxTorque   = 50;
-            const sprite      = tile(4);
+            const sprite      = spriteAtlas.wheel;
 
             // create wheels
             this.wheels = [];
@@ -208,7 +209,7 @@ class PulleyJointObjects extends Box2dObject
 {
     constructor(pos, size, color, connectionPos)
     {
-        super(pos, size, tile(3), 0, color);
+        super(pos, size, spriteAtlas.squareOutline, 0, color);
         this.addBox(size);
         this.connectionPos = connectionPos;
     }
@@ -228,7 +229,7 @@ class MotorJointObject extends Box2dObject
 {
     constructor(pos, size, color, otherObject)
     {
-        super(pos, size, tile(4), 0, color);
+        super(pos, size, spriteAtlas.wheel, 0, color);
         this.addCircle(size.x);
         this.connectionPos = pos;
         const joint = box2dCreateMotorJoint(otherObject, this);
@@ -265,7 +266,7 @@ class SoftBodyObject extends Box2dObject
             const mass = .1;
             const center = vec2(x-nodeSize.x/2, y-nodeSize.y/2);
             const p = pos.add(center.multiply(spacing));
-            const o = new Box2dObject(p, vec2(objectDiameter*1.1), tile(0), 0, color);
+            const o = new Box2dObject(p, vec2(objectDiameter*1.1), spriteAtlas.circle, 0, color);
             o.addCircle(objectDiameter);
             o.setMass(mass);
             o.setAngularDamping(10);
@@ -336,7 +337,7 @@ class ClothObject extends Box2dObject
             const mass = .5;
             const center = vec2(x-nodeSize.x/2, y-nodeSize.y/2);
             const p = pos.add(center.multiply(spacing));
-            const o = new Box2dObject(p, vec2(.4), tile(0), 0, color);
+            const o = new Box2dObject(p, vec2(.4), spriteAtlas.circle, 0, color);
             o.addCircle(objectDiameter);
             o.setFilterData(2, 2);
             o.setLinearDamping(1);
@@ -463,7 +464,7 @@ function explosion(pos, radius=3, strength=300)
     new ParticleEmitter(
         pos, 0,                     // pos, angle
         radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
-        tile(1),                    // tileInfo
+        spriteAtlas.dot,            // 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
@@ -475,7 +476,7 @@ function explosion(pos, radius=3, strength=300)
     new ParticleEmitter(
         pos, 0,                         // pos, angle
         radius, .1, 100*radius, PI,     // emitSize, emitTime, emitRate, emiteCone
-        tile(1),                        // tileInfo
+        spriteAtlas.dot,                // 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

package/examples/box2d/index.html

@@ -7,8 +7,8 @@
 </head><body>
 
 <script src=../../dist/littlejs.js></script>
-<script src=../../plugins/Box2D_v2.3.1_min.wasm.js?1100></script>
-<script src=../../plugins/box2d.js?1100></script>
-<script src=scenes.js?1100></script>
-<script src=gameObjects.js?1100></script>
-<script src=game.js?1100></script>
+<script src=../../plugins/Box2D_v2.3.1_min.wasm.js?1105></script>
+<script src=../../plugins/box2d.js?1105></script>
+<script src=scenes.js?1105></script>
+<script src=gameObjects.js?1105></script>
+<script src=game.js?1105></script>

package/examples/box2d/scenes.js

@@ -132,7 +132,7 @@ function loadScene(_scene)
             const o1 = spawnCircle(vec2(23.5,3), 3, randColor());
             const j1 = box2dCreateRevoluteJoint(groundObject, o1, o1.pos);
             const o2 = spawnCircle(vec2(28,3), 6, randColor());
-            o1.tileInfo = o2.tileInfo = tile(5);
+            o1.tileInfo = o2.tileInfo = spriteAtlas.gear;
             const j2 = box2dCreateRevoluteJoint(groundObject, o2, o2.pos);
             box2dCreateGearJoint(o1, o2, j1, j2, 2);
         }
@@ -144,21 +144,21 @@ function loadScene(_scene)
         }
         {
             // distance joint
-            const o1 = new Box2dObject(vec2(30,11), vec2(4), tile(2), 0, randColor(), box2dBodyTypeStatic);
+            const o1 = new Box2dObject(vec2(30,11), vec2(4), spriteAtlas.circleOutline, 0, randColor(), box2dBodyTypeStatic);
             o1.renderOrder = -2;
             const o2 = spawnCircle(vec2(30,8), 2, randColor());
             box2dCreateDistanceJoint(o1, o2);
         }
         {
             // motor joint
-            const o = new Box2dObject(vec2(10,8), vec2(4), tile(2), 0, randColor(), box2dBodyTypeStatic);
+            const o = new Box2dObject(vec2(10,8), vec2(4), spriteAtlas.circleOutline, 0, randColor(), box2dBodyTypeStatic);
             o.renderOrder = -2;
             new MotorJointObject(vec2(10,8), vec2(2), randColor(), o);
         }
         {
             // friction joint
             const o = spawnBox(vec2(10,15), 3, randColor());
-            o.tileInfo = tile(6);
+            o.tileInfo = spriteAtlas.squareOutline2;
             const joint = box2dCreateFrictionJoint(groundObject, o);
             joint.SetMaxForce(200);
             joint.SetMaxTorque(200);

package/examples/breakout/index.html

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

package/examples/breakoutTutorial/README.md

@@ -53,6 +53,8 @@ for(let y=0; y<=levelSize.y; y+=1)
 ## Move the Camera
 
 Let’s move the camera to the center of our level by setting the cameraPos variable to half the level size.
+You can also change the camera zoom by using camaraScale which controls the number of pixels for each world space unit.
+For this example the camera will just remain stationary, but in other types of games it is very useful!
 
 ```javascript
 setCameraPos(levelSize.scale(.5)); // center camera in level
@@ -307,7 +309,7 @@ collideWithObject(o)
 But wait! This will cause the ball to careen through the bricks without bouncing. Maybe fun for a special powerup, but not our goal here. This function should return a Boolean value to indicate if the collision needs to be resolved, if it returns false then the ball will not bounce. So the answer is to just add another line of code to the collideWithObject function that returns a truthy value indicating that the collision should occur.
 
 ```javascript
-return 1; // allow object to collide
+return true; // allow object to collide
 ```
 
 ![LittleJS Screenshot](images/8.png)
@@ -356,7 +358,7 @@ To play the sound we will override collideWithObject for the Ball class. Also re
 collideWithObject(o)              
 {
     sound_bounce.play(); // play bounce sound
-    return 1; // allow object to collide
+    return true; // allow object to collide
 }
 ```
 Let’s also make a brick break sound. You can use the ZzFX sound designer again to create your own sound, for this one try the Hit preset.
@@ -422,12 +424,12 @@ const color = this.color;
 new ParticleEmitter(
     this.pos, 0,            // pos, angle
     this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
-    0,                      // tileInfo
+    undefined,              // tileInfo
     color, color,           // colorStartA, colorStartB
     color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
     .2, .5, 1, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
     .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
-    .1, .5, 0, 1        // fadeRate, randomness, collide, additive
+    .1, .5, false, true // fadeRate, randomness, collide, additive
 );
 ```
 
@@ -446,7 +448,7 @@ collideWithObject(o)
 {
     // prevent colliding with paddle if moving upwards
     if (o == paddle && this.velocity.y > 0)
-        return 0;
+        return false;
 
     sound_bounce.play(); // play bounce sound
 
@@ -460,10 +462,10 @@ collideWithObject(o)
         this.velocity.y = max(-this.velocity.y, .2);
         
         // prevent default collision code
-        return 0;
+        return false;
     }
 
-    return 1; // allow object to collide
+    return true; // allow object to collide
 }
 ```
 

package/examples/breakoutTutorial/game.js

@@ -54,7 +54,7 @@ class Ball extends EngineObject
     {
         // prevent colliding with paddle if moving upwards
         if (o == paddle && this.velocity.y > 0)
-            return 0;
+            return false;
 
         // speed up
         const speed = min(1.04*this.velocity.length(), .5);
@@ -73,10 +73,10 @@ class Ball extends EngineObject
             this.velocity.y = max(-this.velocity.y, .2);
             
             // prevent default collision code
-            return 0;
+            return false;
         }
 
-        return 1; // allow object to collide
+        return true; // allow object to collide
     }
 }
 
@@ -114,15 +114,15 @@ class Brick extends EngineObject
         new ParticleEmitter(
             this.pos, 0,            // pos, angle
             this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
-            0,                      // tileInfo
+            undefined,              // tileInfo
             color, color,                       // colorStartA, colorStartB
             color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
             .2, .5, 1, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
             .99, .95, .4, PI,   // damp, angleDamp, gravity, cone
-            .1, .5, 0, 1        // fade, randomness, collide, additive
+            .1, .5, false, true // fade, randomness, collide, additive
         );
 
-        return 1; // allow object to collide
+        return true; // allow object to collide
     }
 }
 

package/examples/breakoutTutorial/index.html

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

package/examples/electron/game.js

@@ -10,6 +10,9 @@
 // show the LittleJS splash screen
 setShowSplashScreen(true);
 
+// fix texture bleeding by shrinking tile slightly
+tileFixBleedScale = .5;
+
 // sound effects
 const sound_click = new Sound([1,.5]);
 

package/examples/electron/index.html

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

package/examples/htmlMenu/index.html

@@ -32,7 +32,7 @@
 <!-- setup html menu system -->
 <div class="topDiv">
 <div id="menu" class="menuDiv">
-<h1><i style="font-size:30px">Test Menu</i></h1>
+<b style="font-size:50px">Test Menu</b>
 This is an example menu using html elements.
 <input value="Test Input" onchange="alert('New text: ' + this.value)">
 <input type="range" onchange="alert('New value: ' + this.value)">
@@ -52,5 +52,5 @@ setMenuVisible(false);
 </script>
 
 <!-- Add your game scripts here -->
-<script src=../../dist/littlejs.js?1100></script>
-<script src=game.js?1100></script>
+<script src=../../dist/littlejs.js?1105></script>
+<script src=game.js?1105></script>

package/examples/js13k/game.js

@@ -7,6 +7,9 @@
 
 'use strict';
 
+// fix texture bleeding by shrinking tile slightly
+tileFixBleedScale = .5;
+
 // sound effects
 const sound_click = new Sound([1,.5]);
 

package/examples/js13k/index.html

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

package/examples/module/game.js

@@ -13,6 +13,9 @@ const {tile, vec2, hsl} = LittleJS;
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
 
+// fix texture bleeding by shrinking tile slightly
+LittleJS.setTileFixBleedScale(.5);
+
 // sound effects
 const sound_click = new LittleJS.Sound([1,.5]);
 

package/examples/module/index.html

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

package/examples/particles/index.html

@@ -10,11 +10,14 @@ button { margin:1px; }
 </style>
 </head><body>
 
-<script src=../../dist/littlejs.js?1100></script>
+<script src=../../dist/littlejs.js?1105></script>
 <script>
 
 'use strict';
 
+// fix texture bleeding by shrinking tiles slightly
+tileFixBleedScale = .5;
+
 let particleEditor = 0, particleSystem, particleSystemDiv, particleSystemCode;
 let inputExpand;
 let restartTimer = new Timer();

package/examples/platformer/game.js

@@ -13,37 +13,39 @@ setShowSplashScreen(true);
 
 let spriteAtlas, score, deaths;
 
+// enable touch gamepad on touch devices
+touchGamepadEnable = true;
+
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    // engine settings
+    gravity = -.01;
+    objectDefaultDamping = .99;
+    objectDefaultAngleDamping = .99;
+    cameraScale = 4*16;
+
     // create a table of all sprites
+    const gameTile = (i, size=16)=>  tile(i, size, 0, 1);
     spriteAtlas =
     {
         // large tiles
-        circle:  tile(0),
-        crate:   tile(2),
-        player:  tile(3),
-        enemy:   tile(5),
-        coin:    tile(6),
+        circle:  gameTile(0),
+        crate:   gameTile(1),
+        player:  gameTile(2),
+        enemy:   gameTile(4),
+        coin:    gameTile(5),
 
         // small tiles
-        gun:     tile(2,8),
-        grenade: tile(3,8),
+        gun:     gameTile(vec2(0,2),8),
+        grenade: gameTile(vec2(1,2),8),
     };
 
-    // enable touch gamepad on touch devices
-    touchGamepadEnable = true;
-
     // setup level
     buildLevel();
 
     // init game
     score = deaths = 0;
-    gravity = -.01;
-    objectDefaultDamping = .99;
-    objectDefaultAngleDamping = .99;
-    cameraScale = 4*16;
-    cameraPos = getCameraTarget();
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -75,6 +77,10 @@ function gameUpdate()
     // M = move player to mouse
     if (keyWasPressed('KeyM'))
         player.pos = mousePos;
+
+    // R = restart level
+    if (keyWasPressed('KeyR'))
+        buildLevel();
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/platformer/gameCharacter.js

@@ -15,7 +15,7 @@ class Character extends GameObject
 {
     constructor(pos)
     { 
-        super(pos, vec2(.6,.95), tile());
+        super(pos, vec2(.6,.95));
 
         this.weapon = new Weapon(pos, this);
         this.lastPos = pos;
@@ -31,6 +31,7 @@ class Character extends GameObject
         this.renderOrder = 10;
         this.walkCyclePercent = 0;
         this.health = 1;
+        this.climbingLadder = false;
         this.setCollision(true,false);
     }
     
@@ -102,9 +103,9 @@ class Character extends GameObject
             touchingLadder ||= collisionData == tileType_ladder;
         }
         if (!touchingLadder)
-            this.climbingLadder = 0;
+            this.climbingLadder = false;
         else if (moveInput.y)
-            this.climbingLadder = 1;
+            this.climbingLadder = true;
 
         if (this.weapon) // update weapon trigger
             this.weapon.triggerIsDown = this.holdingShoot && !this.dodgeTimer.active();
@@ -177,7 +178,7 @@ class Character extends GameObject
         
         // apply movement acceleration and clamp
         const maxCharacterSpeed = .2;
-        this.velocity.x = clamp(this.velocity.x + moveInput.x * .042, -maxCharacterSpeed, maxCharacterSpeed);
+        this.velocity.x = clamp(this.velocity.x + moveInput.x * .04, -maxCharacterSpeed, maxCharacterSpeed);
 
         // track last pos for ladder collision code
         this.lastPos = this.pos.copy();
@@ -225,7 +226,7 @@ class Character extends GameObject
         if (!this.isDead())
         {
             // bounce pos with walk cycle
-            bodyPos = bodyPos.add(vec2(0,.05*Math.sin(this.walkCyclePercent*PI)));
+            bodyPos = bodyPos.add(vec2(0,.01+.05*Math.sin(this.walkCyclePercent*PI)));
 
             // make bottom flush
             bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));
@@ -236,10 +237,10 @@ class Character extends GameObject
     damage(damage, damagingObject)
     {
         if (this.isDead() || this.getAliveTime() < 1 || this.dodgeTimer.active())
-            return;
+            return 0;
 
         makeBlood(damagingObject ? damagingObject.pos : this.pos);
-        super.damage(damage, damagingObject);
+        return super.damage(damage, damagingObject);
     }
 
     kill(damagingObject)                  
@@ -251,31 +252,31 @@ class Character extends GameObject
         sound_die.play(this.pos);
 
         this.health = 0;
-        if (this.weapon)
-            this.weapon.destroy();
         this.deadTimer.set();
         this.size = this.size.scale(.5);
         const fallDirection = damagingObject ? sign(damagingObject.velocity.x) : randSign();
         this.angleVelocity = fallDirection*rand(.22,.14);
         this.angleDamping = .9;
         this.renderOrder = -1;  // move to back layer
+        if (this.weapon)
+            this.weapon.destroy();
     }
     
     collideWithTile(data, pos)
     {
         if (!data)
-            return;
+            return false;
 
         if (data == tileType_ladder)
         {
             // handle ladder collisions
             if (pos.y + 1 > this.lastPos.y - this.size.y/2)
-                return;
+                return false;
 
             if (getTileCollisionData(pos.add(vec2(0,1)))      // above
                 && !getTileCollisionData(pos.add(vec2(1,0)))  // left
                 && !getTileCollisionData(pos.add(vec2(1,0)))) // right
-                return; // dont collide if something above it and nothing to left or right
+                return false; // dont collide if something above it and nothing to left or right
 
             // allow standing on top of ladders
             return !this.climbingLadder;
@@ -287,9 +288,9 @@ class Character extends GameObject
         {
             // break blocks above
             this.velocity.y = 0;
-            return;
+            return false;
         }
 
-        return 1;
+        return true;
     }
 }

package/examples/platformer/gameEffects.js

@@ -129,13 +129,13 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
     // destroy tile
     const tileType = getTileCollisionData(pos);
     if (!tileType)
-        return 1;
+        return true;
 
     const tileLayer = tileLayers[foregroundLayerIndex];
     const centerPos = pos.add(vec2(.5));
     const layerData = tileLayer.getData(pos);
     if (!layerData || tileType == tileType_solid)
-        return;
+        return false;
 
     // create effects
     makeDebris(centerPos, layerData.color.mutate());
@@ -144,7 +144,6 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
      // set and clear tile
     tileLayer.setData(pos, new TileLayerData, 1);
     setTileCollisionData(pos, tileType_empty);
-    setTileData(pos, foregroundLayerIndex, 0);
 
     // cleanup neighbors
     if (cleanNeighbors)
@@ -154,7 +153,7 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
             decorateTile(pos.add(vec2(i,j)));
     }
 
-    return 1;
+    return true;
 }
 
 ///////////////////////////////////////////////////////////////////////////////