littlejsengine 1.17.5 → 1.17.10

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.17.5';
+const engineVersion = '1.17.10';
 
 /** Frames per second to update
  *  @type {number}
@@ -461,13 +461,13 @@ function engineObjectsUpdate()
     engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
 
     // recursive object update
-    function updateObject(o)
+    function updateChildObject(o)
     {
         if (o.destroyed) return;
 
         o.update();
         for (const child of o.children)
-            updateObject(child);
+            updateChildObject(child);
     }
     for (const o of engineObjects)
     {
@@ -477,7 +477,7 @@ function engineObjectsUpdate()
         o.update();
         o.updatePhysics();
         for (const child of o.children)
-            updateObject(child);
+            updateChildObject(child);
         o.updateTransforms();
     }
 
@@ -486,11 +486,14 @@ function engineObjectsUpdate()
 }
 
 /** Destroy and remove all objects
+ *  - This can be used to clear out all objects when restarting a level
+ *  - Objects can override their destroy function to do cleanup or stick around
+ *  @param {boolean} [immediate] - should attached effects be allowed to die off?
  *  @memberof Engine */
-function engineObjectsDestroy()
+function engineObjectsDestroy(immediate=true)
 {
     for (const o of engineObjects)
-        o.parent || o.destroy();
+        o.parent || o.destroy(immediate);
     engineObjects = engineObjects.filter(o=>!o.destroyed);
 }
 
@@ -565,164 +568,137 @@ function engineObjectsRaycast(start, end, objects=engineObjects)
 ///////////////////////////////////////////////////////////////////////////////
 function drawEngineLogo(t)
 {
+    const blackAndWhite = 0;
+    const showName = 1;
+
     // LittleJS Logo and Splash Screen
     const x = mainContext;
     const w = mainCanvas.width = innerWidth;
     const h = mainCanvas.height = innerHeight;
-
     {
         // background
         const p3 = percent(t, 1, .8);
         const p4 = percent(t, 0, .5);
-        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
+        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.6);
         g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
         g.addColorStop(1,hsl(0,0,0,p3).toString());
         x.save();
         x.fillStyle = g;
         x.fillRect(0,0,w,h);
     }
-
-    // draw LittleJS logo...
-    const rect = (X, Y, W, H, C)=>
+    const gradient = (X1,Y1,X2,Y2,C,S=1)=>
+    {
+        if (C >= 0)
+        {
+            if (blackAndWhite)
+                x.fillStyle = '#fff';
+            else
+            {
+                const g = x.fillStyle = x.createLinearGradient(X1,Y1,X2,Y2);
+                g.addColorStop(0,color(C,2));
+                g.addColorStop(1,color(C,1));
+            }
+        }
+        else
+            x.fillStyle = '#000';
+        C >= -1 ? (x.fill(), S && x.stroke()) : x.stroke();
+    }
+    const circle = (X,Y,R,A=0,B=2*PI,C,S)=>
     {
         x.beginPath();
-        x.rect(X,Y,W,C?H*p:H);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const line = (X, Y, Z, W)=>
+        x.arc(X,Y,R,p*A,p*B);
+        gradient(X,Y-R,X,Y+R,C,S);
+    }
+    const rect = (X,Y,W,H,C)=>
     {
         x.beginPath();
-        x.lineTo(X,Y);
-        x.lineTo(Z,W);
-        x.stroke();
-    };
-    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+        x.rect(X,Y,W,H*p);
+        gradient(X,Y+H,X+W,Y,C);
+    }
+    const poly = (points,C,Y,H)=>
     {
-        const D = (A+B)/2, E = p*(B-A)/2;
         x.beginPath();
-        F && x.lineTo(X,Y);
-        x.arc(X,Y,R,D-E,D+E);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const color = (c=0, l=0)=>
-        hsl([.98,.3,.57,.14][c%4],.9,[0,.3,.5,.8,.9][l]).toString();
+        for (const p of points)
+            x.lineTo(p.x, p.y);
+        x.closePath();
+        gradient(0, Y, 0, Y+H,C);
+    }
+    const color = (c,l)=> l?`hsl(${[.95,.56,.13][c%3]*360} 99%${[0,50,75][l]}%`:'#000';
+
+    // center and fit tos screen
     const alpha = wave(1,1,t);
     const p = percent(alpha, .1, .5);
-
-    // setup
+    const size = min(6, min(w,h)/99);
     x.translate(w/2,h/2);
-    const size = min(6, min(w,h)/99); // fit to screen
     x.scale(size,size);
     x.translate(-40,-35);
+    p < 1 && x.setLineDash([99*p,99]);
     x.lineJoin = x.lineCap = 'round';
     x.lineWidth = .1 + p*1.9;
+    //x.strokeStyle='#fff7';
+
+    if (showName)
+    {
+        // engine name text
+        const Y = 54;
+        const s = 'LittleJS';
+        x.font = '900 15.5px arial';
+        x.lineWidth = .1+p*3.9;
+        x.textAlign = 'center';
+        x.textBaseline = 'top';
+        rect(11,Y+2,59,8*p,-1);
+        x.beginPath();
+
+        let w2 = 0;
+        for (let i=0;i<s.length;++i)
+            w2 += x.measureText(s[i]).width;
+        for (let j=2;j--;)
+        for (let i=0,X=40-w2/2;i<s.length;++i)
+        {
+            const w = x.measureText(s[i]).width, X2 = X+w/2;
+            gradient(X2,Y,X2+2,Y+13,i>5?1:0);
+            x[j?'strokeText':'fillText'](s[i],X2,Y+.5,17*p);
+            X += w;
+        }
+
+        x.lineWidth = .1 + p*1.9;
+        rect(3,Y,73,0); // bottom
+    }
 
-    // drawing effect
-    const p2 = percent(alpha,.1,1);
-    x.setLineDash([99*p2,99]);
-
-    // cab top
-    rect(7,16,18,-8,color(2,2));
-    rect(7,8,18,4,color(2,3));
-    rect(25,8,8,8,color(2,1));
-    rect(25,8,-18,8);
-    rect(25,8,8,8);
-
-    // cab
-    rect(25,16,7,24,color());
-    rect(11,39,14,-23,color(1,1));
-    rect(11,16,14,18,color(1,2));
-    rect(11,16,14,8,color(1,3));
-    rect(25,16,-14,24);
-
-    // cab window
-    rect(15,29,6,-9,color(2,2));
-    circle(15,21,5,0,PI/2,color(2,4),1);
-    rect(21,21,-6,9);
-
-    // little stack
-    rect(37,14,9,6,color(3,2));
-    rect(37,14,4.5,6,color(3,3));
-    rect(37,14,9,6);
+    rect(7,15,26,-7,0);   // cab top
+    rect(25,15,8,25,-1);  // cab front
+    rect(10,40,15,-25,1); // cab back
+    rect(14,21,7,9,2);    // cab window
+    rect(38,15,6,6,2);    // little stack
 
     // big stack
-    rect(50,20,10,-8,color(0,1));
-    rect(50,20,6.5,-8,color(0,2));
-    rect(50,20,3.5,-8,color(0,3));
-    rect(50,20,10,-8);
-    circle(55,2,11.4,.5,PI-.5,color(3,3));
-    circle(55,2,11.4,.5,PI/2,color(3,2),1);
-    circle(55,2,11.4,.5,PI-.5);
-    rect(45,7,20,-7,color(0,2));
-    rect(45,-1,20,4,color(0,3));
-    rect(45,-1,20,8);
+    rect(49,20,10,-6,0);
+    const stackPoints = [vec2(44,8),vec2(64,8),vec2(59,8+6*p),vec2(49,8+6*p)];
+    poly(stackPoints,2,8,6*p);
+    rect(44,8,20,-7,0);
 
     // engine
-    for (let i=5; i--;)
-    {
-        // stagger radius to fix slight seam
-        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
-        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
-        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
-    }
+    for (let i=5;i--;) circle(59-i*6,30,10,0,7,1,0);
+    circle(59,30,4,0,7,2); // light
 
     // engine outline
-    circle(36,30,10,PI/2,PI*3/2);
-    circle(48,30,10,PI/2,PI*3/2);
-    circle(60,30,10);
-    line(36,20,60,20);
-
-    // engine front light
-    circle(60,30,4,PI,3*PI,color(3,2));
-    circle(60,30,4,PI,2*PI,color(3,3));
-    circle(60,30,4,PI,3*PI);
-
-    // front brush
-    for (let i=6; i--;)
-    {
-        x.beginPath();
-        x.lineTo(53,54);
-        x.lineTo(53,40);
-        x.lineTo(53+(1+i*2.9)*p,40);
-        x.lineTo(53+(4+i*3.5)*p,54);
-        x.fillStyle = color(0,i%2+2);
-        x.fill();
-        i%2 && x.stroke();
-    }
+    rect(35,20,24,0);  // top
+    circle(59,30,10);  // front
+    circle(47,30,10,PI/2,PI*3/2); // middle
+    circle(35,30,10,PI/2,PI*3/2); // back
+    rect(7,40,13,7,-1);   // bottom back
+    rect(17,40,43,14,-1); // bottom center
 
     // wheels
-    rect(6,40,5,5);
-    rect(6,40,5,5,color());
-    rect(15,54,38,-14,color());
-    for (let i=3; i--;)
-    for (let j=2; j--;)
-    {
-        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
-        x.stroke();
-        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
-        x.stroke();
-    }
-    line(6,40,68,40); // center
-    line(77,54,4,54); // bottom
-
-    // draw engine name
-    const s = engineName;
-    x.font = '900 16px arial';
-    x.textAlign = 'center';
-    x.textBaseline = 'top';
-    x.lineWidth = .1+p*3.9;
-    let w2 = 0;
-    for (let i=0; i<s.length; ++i)
-        w2 += x.measureText(s[i]).width;
-    for (let j=2; j--;)
-    for (let i=0, X=41-w2/2; i<s.length; ++i)
+    for (let i=3;i--;) for (let j=2;j--;) circle(15*i+17,47,j?7:1,0,7,2);
+    
+    // cowcatcher
+    for (let i=2;i--;)
     {
-        x.fillStyle = color(i,2);
-        const w = x.measureText(s[i]).width;
-        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
-        X += w;
+        let w=6, s=7, o=53+w*p*i
+        const points = [vec2(o+s,54),vec2(o,40),vec2(o+w*p,40),vec2(o+s+w*p,54)];
+        poly(points,0,40,14);
     }
+
     x.restore();
 }

package/src/engineDraw.js

@@ -190,7 +190,7 @@ class TileInfo
     }
 
     /**
-     * Returns a tile info for an index using this tile as refrence
+     * Returns a tile info for an index using this tile as reference
      * @param {Vector2|number} [index=0]
      * @return {TileInfo}
      */
@@ -1020,7 +1020,7 @@ let engineFontImage;
 class FontImage
 {
     /** Create an image font
-     *  @param {TileInfo} tileInfo - Tile info of first characeter in font
+     *  @param {TileInfo} tileInfo - Tile info of first character in font
      */
     constructor(tileInfo)
     {

package/src/engineExport.js

@@ -177,6 +177,8 @@ export
     saveCanvas,
     saveDataURL,
     shareURL,
+    readSaveData,
+    writeSaveData,
 
     // Random
     rand,

package/src/engineInput.js

@@ -769,7 +769,7 @@ function inputRender()
     }
 }
 
-// center position for right tocuh pad face buttons
+// center position for right touch pad face buttons
 function touchGamepadButtonCenter()
 {
     const center = mainCanvasSize.subtract(vec2(touchGamepadSize));

package/src/engineObject.js

@@ -66,17 +66,19 @@ class EngineObject
         this.additiveColor = undefined;
         /** @property {boolean} - Should it flip along y axis when rendered */
         this.mirror = false;
+        /** @property {boolean} - Has object been destroyed? */
+        this.destroyed = false;
 
         // physical properties
-        /** @property {number} [mass=objectDefaultMass] - How heavy the object is, static if 0 */
+        /** @property {number} - How heavy the object is, static if 0 */
         this.mass = objectDefaultMass;
-        /** @property {number} [damping=objectDefaultDamping] - How much to slow down velocity each frame (0-1) */
+        /** @property {number} - How much to slow down velocity each frame (0-1) */
         this.damping = objectDefaultDamping;
-        /** @property {number} [angleDamping=objectDefaultAngleDamping] - How much to slow down rotation each frame (0-1) */
+        /** @property {number} - How much to slow down rotation each frame (0-1) */
         this.angleDamping = objectDefaultAngleDamping;
-        /** @property {number} [restitution=objectDefaultRestitution] - How bouncy the object is when colliding (0-1) */
+        /** @property {number} - How bouncy the object is when colliding (0-1) */
         this.restitution = objectDefaultRestitution;
-        /** @property {number} [friction=objectDefaultFriction] - How much friction to apply when sliding (0-1) */
+        /** @property {number} - How much friction to apply when sliding (0-1) */
         this.friction  = objectDefaultFriction;
         /** @property {number} - How much to scale gravity by for this object */
         this.gravityScale = 1;
@@ -285,10 +287,10 @@ class EngineObject
                 if (!tileCollisionTest(oldPos, this.size, this))
                 {
                     // test which side we bounced off (or both if a corner)
-                    const blockedLayerY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
-                    const blockedLayerX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
-
-                    if (blockedLayerX)
+                    const isBlockedX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
+                    const isBlockedY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
+                    const restitution = max(this.restitution, hitLayer.restitution);
+                    if (isBlockedX)
                     {
                         // try to move up a tiny bit
                         const epsilon = 1e-3;
@@ -304,16 +306,12 @@ class EngineObject
                             return;
                         }
 
-                        // move to previous position and bounce
+                        // move to previous X position and bounce
                         this.pos.x = oldPos.x;
-                        this.velocity.x *= -this.restitution;
+                        this.velocity.x *= -restitution;
                     }
-                    if (blockedLayerY || !blockedLayerX)
+                    if (isBlockedY || !isBlockedX)
                     {
-                        // bounce velocity
-                        const restitution = max(this.restitution, hitLayer.restitution);
-                        this.velocity.y *= -restitution;
-
                         if (wasFalling)
                         {
                             // adjust position to slightly away from nearest tile
@@ -329,10 +327,12 @@ class EngineObject
                         }
                         else
                         {
-                            // move to previous position
+                            // move to previous Y position
                             this.pos.y = oldPos.y;
                             this.groundObject = undefined;
                         }
+                        // bounce velocity
+                        this.velocity.y *= -restitution;
                     }
                     debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
@@ -350,19 +350,19 @@ class EngineObject
         drawTile(this.pos, this.drawSize || this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
     }
 
-    /** Destroy this object, destroy its children, detach its parent, and mark it for removal */
-    destroy()
+    /** Destroy this object, destroy its children, detach its parent, and mark it for removal
+     *  @param {boolean} [immediate] - should attached effects be allowed to die off? */
+    destroy(immediate=false)
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         // disconnect from parent and destroy children
-        this.destroyed = 1;
+        this.destroyed = true;
         this.parent?.removeChild(this);
         for (const child of this.children)
         {
             child.parent = undefined;
-            child.destroy();
+            child.destroy(immediate);
         }
     }
 
@@ -461,7 +461,7 @@ class EngineObject
     }
 
     /** Check if overlapping another engine object
-     *  Collisions are resoloved to prevent overlaps
+     *  Collisions are resolved to prevent overlaps
      *  @param {EngineObject} object
      *  @return {boolean} */
     isOverlappingObject(object)