littlejsengine 1.15.2 → 1.15.8

package/src/engineObject.js

@@ -134,7 +134,7 @@ class EngineObject
             child.updateTransforms();
     }
 
-    /** Update the object physics, called automatically by engine once each frame */
+    /** Update the object physics, called automatically by engine once each frame. Can be overridden to stop or change how physics works for an object. */
     updatePhysics()
     {
         // child objects do not have physics
@@ -167,7 +167,7 @@ class EngineObject
         if (!enablePhysicsSolver || !this.mass) // don't do collision for static objects
             return;
 
-        const wasMovingDown = this.velocity.y < 0;
+        const wasFalling = this.velocity.y < 0 && gravity.y < 0 || this.velocity.y > 0 && gravity.y > 0;
         if (this.groundObject)
         {
             // apply friction in local space of ground object
@@ -223,10 +223,10 @@ class EngineObject
                 {
                     // push outside object collision
                     this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
-                    if ((o.groundObject && wasMovingDown) || !o.mass)
+                    if ((o.groundObject && wasFalling) || !o.mass)
                     {
                         // set ground object if landed on something
-                        if (wasMovingDown)
+                        if (wasFalling)
                             this.groundObject = o;
 
                         // bounce if other object is fixed or grounded
@@ -313,12 +313,15 @@ class EngineObject
                         const restitution = max(this.restitution, hitLayer.restitution);
                         this.velocity.y *= -restitution;
 
-                        if (wasMovingDown)
+                        if (wasFalling)
                         {
-                            // adjust position to slightly above nearest tile boundary
+                            // adjust position to slightly away from nearest tile
                             // this prevents gap between object and ground
                             const epsilon = .0001;
-                            this.pos.y = (oldPos.y-this.size.y/2|0)+this.size.y/2+epsilon;
+                            const offset = this.size.y/2 + epsilon;
+                            this.pos.y = gravity.y < 0 ?
+                                floor(oldPos.y-this.size.y/2) + offset :
+                                ceil( oldPos.y+this.size.y/2) - offset;
 
                             // set ground object for tile collision
                             this.groundObject = hitLayer;
@@ -448,7 +451,9 @@ class EngineObject
     {
         ASSERT(child.parent === this && this.children.includes(child));
         ASSERT(child instanceof EngineObject, 'child must be an EngineObject');
-        this.children.splice(this.children.indexOf(child), 1);
+        const index = this.children.indexOf(child);
+        ASSERT(index >= 0, 'child not found in children array');
+        index >= 0 && this.children.splice(index, 1);
         child.parent = 0;
     }
 
@@ -485,21 +490,20 @@ class EngineObject
      *  @return {string} */
     toString()
     {
-        if (debug)
-        {
-            let text = 'type = ' + this.constructor.name;
-            if (this.pos.x || this.pos.y)
-                text += '\npos = ' + this.pos;
-            if (this.velocity.x || this.velocity.y)
-                text += '\nvelocity = ' + this.velocity;
-            if (this.size.x || this.size.y)
-                text += '\nsize = ' + this.size;
-            if (this.angle)
-                text += '\nangle = ' + this.angle.toFixed(3);
-            if (this.color)
-                text += '\ncolor = ' + this.color;
-            return text;
-        }
+        if (!debug) return;
+        
+        let text = 'type = ' + this.constructor.name;
+        if (this.pos.x || this.pos.y)
+            text += '\npos = ' + this.pos;
+        if (this.velocity.x || this.velocity.y)
+            text += '\nvelocity = ' + this.velocity;
+        if (this.size.x || this.size.y)
+            text += '\nsize = ' + this.size;
+        if (this.angle)
+            text += '\nangle = ' + this.angle.toFixed(3);
+        if (this.color)
+            text += '\ncolor = ' + this.color;
+        return text;
     }
 
     /** Render debug info for this object  */

package/src/engineSettings.js

@@ -224,17 +224,17 @@ let touchGamepadEnable = false;
  *  @memberof Settings */
 let touchGamepadCenterButton = true;
 
-/** True if touch gamepad should be analog stick or false to use if 8 way dpad
- *  @type {boolean}
+/** Number of buttons on touch gamepad (0-4), if 1 also acts as right analog stick
+ *  @type {number}
  *  @default
  *  @memberof Settings */
-let touchGamepadAnalog = true;
+let touchGamepadButtonCount = 4;
 
-/** Number of buttons on touch gamepad
- *  @type {number}
+/** True if touch gamepad should be analog stick or false to use if 8 way dpad
+ *  @type {boolean}
  *  @default
  *  @memberof Settings */
-let touchGamepadButtonCount = 4;
+let touchGamepadAnalog = true;
 
 /** Size of virtual gamepad for touch devices in pixels
  *  @type {number}
@@ -500,6 +500,11 @@ function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
  *  @memberof Settings */
 function setTouchGamepadCenterButton(enable) { touchGamepadCenterButton = enable; }
 
+/** Set number of buttons on touch gamepad (0-4), if 1 also acts as right analog stick
+ *  @param {number} count
+ *  @memberof Settings */
+function setTouchGamepadButtonCount(count) { touchGamepadButtonCount = count; }
+
 /** Set if touch gamepad should be analog stick or 8 way dpad
  *  @param {boolean} analog
  *  @memberof Settings */

package/src/engineSplash.js

@@ -0,0 +1,173 @@
+/**
+ * LittleJS Engine Splash Screen
+ * @namespace Settings
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+// LittleJS splash screen and logo
+
+function drawEngineSplashScreen(t)
+{
+    const x = overlayContext;
+    const w = overlayCanvas.width = innerWidth;
+    const h = overlayCanvas.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);
+        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)=>
+    {
+        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.beginPath();
+        x.lineTo(X,Y);
+        x.lineTo(Z,W);
+        x.stroke();
+    };
+    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+    {
+        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],.8,[0,.3,.5,.8,.9][l]).toString();
+    const alpha = wave(1,1,t);
+    const p = percent(alpha, .1, .5);
+
+    // setup
+    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);
+    x.lineJoin = x.lineCap = 'round';
+    x.lineWidth = .1 + p*1.9;
+
+    // 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,23,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);
+
+    // 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);
+
+    // 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));
+    }
+
+    // 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();
+    }
+
+    // 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)
+    {
+        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;
+    }
+
+    x.restore();
+}

package/src/engineTileLayer.js

@@ -47,7 +47,7 @@ function tileCollisionTest(pos, size=vec2(), object, solidOnly=true)
     }
 }
 
-/** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
+/** Return the exact position of the boundary of first tile hit, undefined if nothing was hit.
  *  The point will be inside the colliding tile if it hits (may have a tiny shift)
  *  @param {Vector2}      posStart
  *  @param {Vector2}      posEnd
@@ -553,7 +553,7 @@ class TileCollisionLayer extends TileLayer
         // remove from collision layers array and destroy
         const index = tileCollisionLayers.indexOf(this);
         ASSERT(index >= 0, 'tile collision layer not found in array');
-        tileCollisionLayers.splice(index, 1);
+        index >= 0 && tileCollisionLayers.splice(index, 1);
         super.destroy();
     }
 
@@ -621,7 +621,7 @@ class TileCollisionLayer extends TileLayer
         return false;
     }
 
-    /** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
+    /** Return the exact position of the boundary of first tile hit, undefined if nothing was hit.
     *  The point will be inside the colliding tile if it hits (may have a tiny shift)
     *  @param {Vector2}      posStart
     *  @param {Vector2}      posEnd

package/src/engineUtilities.js

@@ -623,9 +623,15 @@ class Vector2
     {
         this.x = x;
         this.y = y;
+        ASSERT_VECTOR2_VALID(this);
         return this;
     }
 
+    /** Sets this vector from another vector and returns self
+     *  @param {Vector2} v - other vector
+     *  @return {Vector2} */
+    setFrom(v) { return this.set(v.x, v.y); }
+
     /** Returns a new vector that is a copy of this
      *  @return {Vector2} */
     copy() { return new Vector2(this.x, this.y); }
@@ -688,7 +694,7 @@ class Vector2
     clampLength(length=1)
     {
         const l = this.length();
-        return l > length ? this.scale(length/l) : this;
+        return l > length ? this.scale(length/l) : this.copy();
     }
 
     /** Returns the dot product of this and the vector passed in
@@ -775,6 +781,10 @@ class Vector2
      * @return {number} */
     area() { return abs(this.x * this.y); }
 
+    /** Returns true if this vector is (0,0)
+     * @return {boolean} */
+    isZero() { return !this.x && !this.y; }
+
     /** Returns a new vector that is p percent between this and the vector passed in
      * @param {Vector2} v - other vector
      * @param {number}  percent
@@ -885,9 +895,15 @@ class Color
         this.g = g;
         this.b = b;
         this.a = a;
+        ASSERT_COLOR_VALID(this);
         return this;
     }
 
+    /** Sets this color from another color and returns self
+     * @param {Color} c - other color
+     * @return {Color} */
+    setFrom(c) { return this.set(c.r, c.g, c.b, c.a); }
+
     /** Returns a new color that is a copy of this
      * @return {Color} */
     copy() { return new Color(this.r, this.g, this.b, this.a); }