melonjs 10.7.0 → 10.9.0

package/src/physics/body.js

@@ -1,8 +1,8 @@
-import Vector2d from "./../math/vector2.js";
 import Rect from "./../geometries/rectangle.js";
 import Ellipse from "./../geometries/ellipse.js";
 import Polygon from "./../geometries/poly.js";
 import Bounds from "./bounds.js";
+import pool from "./../system/pooling.js";
 import collision from "./collision.js";
 import * as arrayUtil from "./../utils/array.js";
 import timer from "./../system/timer.js";
@@ -37,7 +37,7 @@ class Body {
              * @public
              * @type {Bounds}
              */
-            this.bounds = new Bounds();
+            this.bounds = pool.pull("Bounds");
         }
 
         if (typeof this.shapes === "undefined") {
@@ -71,55 +71,54 @@ class Body {
          */
         this.collisionType = collision.types.ENEMY_OBJECT;
 
-        /**
-         * body velocity
-         * @public
-         * @type {Vector2d}
-         * @default <0,0>
-         */
         if (typeof this.vel === "undefined") {
-            this.vel = new Vector2d();
+            /**
+             * body velocity
+             * @public
+             * @type {Vector2d}
+             * @default <0,0>
+             */
+            this.vel = pool.pull("Vector2d");
         }
         this.vel.set(0, 0);
 
-        /**
-         * body force or acceleration (automatically) applied to the body.
-         * when defining a force, user should also define a max velocity
-         * @public
-         * @type {Vector2d}
-         * @default <0,0>
-         * @see Body.setMaxVelocity
-         * @example
-         * // define a default maximum acceleration, initial force and friction
-         * this.body.force.set(0, 0);
-         * this.body.friction.set(0.4, 0);
-         * this.body.setMaxVelocity(3, 15);
-         *
-         * // apply a postive or negative force when pressing left of right key
-         * update(dt) {
-         *     if (me.input.isKeyPressed("left"))    {
-         *          this.body.force.x = -this.body.maxVel.x;
-         *      } else if (me.input.isKeyPressed("right")) {
-         *         this.body.force.x = this.body.maxVel.x;
-         *     } else {
-         *         this.body.force.x = 0;
-         *     }
-         * }
-         */
         if (typeof this.force === "undefined") {
-            this.force = new Vector2d();
+            /**
+             * body force or acceleration (automatically) applied to the body.
+             * when defining a force, user should also define a max velocity
+             * @public
+             * @type {Vector2d}
+             * @default <0,0>
+             * @see Body.setMaxVelocity
+             * @example
+             * // define a default maximum acceleration, initial force and friction
+             * this.body.force.set(0, 0);
+             * this.body.friction.set(0.4, 0);
+             * this.body.setMaxVelocity(3, 15);
+             *
+             * // apply a postive or negative force when pressing left of right key
+             * update(dt) {
+             *     if (me.input.isKeyPressed("left"))    {
+             *          this.body.force.x = -this.body.maxVel.x;
+             *      } else if (me.input.isKeyPressed("right")) {
+             *         this.body.force.x = this.body.maxVel.x;
+             *     } else {
+             *         this.body.force.x = 0;
+             *     }
+             * }
+             */
+            this.force = pool.pull("Vector2d");
         }
         this.force.set(0, 0);
 
-
-        /**
-         * body friction
-         * @public
-         * @type {Vector2d}
-         * @default <0,0>
-         */
         if (typeof this.friction === "undefined") {
-            this.friction = new Vector2d();
+            /**
+             * body friction
+             * @public
+             * @type {Vector2d}
+             * @default <0,0>
+             */
+            this.friction = pool.pull("Vector2d");
         }
         this.friction.set(0, 0);
 
@@ -140,14 +139,14 @@ class Body {
          */
         this.mass = 1;
 
-        /**
-         * max velocity (to limit body velocity)
-         * @public
-         * @type {Vector2d}
-         * @default <490,490>
-         */
         if (typeof this.maxVel === "undefined") {
-            this.maxVel = new Vector2d();
+            /**
+             * max velocity (to limit body velocity)
+             * @public
+             * @type {Vector2d}
+             * @default <490,490>
+             */
+            this.maxVel = pool.pull("Vector2d");
         }
         // cap by default to half the default gravity force
         this.maxVel.set(490, 490);
@@ -297,7 +296,7 @@ class Body {
             polygon.setShape(0, 0, vertices);
         } else {
             // this will replace any other non polygon shape type if defined
-            this.shapes[index] = new Polygon(0, 0, vertices);
+            this.shapes[index] = pool.pull("Polygon", 0, 0, vertices);
         }
 
         // update the body bounds to take in account the new vertices
@@ -686,11 +685,28 @@ class Body {
      * @ignore
      */
     destroy() {
+        // push back instance into object pool
+        pool.push(this.bounds);
+        pool.push(this.vel);
+        pool.push(this.force);
+        pool.push(this.friction);
+        pool.push(this.maxVel);
+        this.shapes.forEach((shape) => {
+            pool.push(shape);
+        });
+
+        // set to undefined
         this.onBodyUpdate = undefined;
         this.ancestor = undefined;
         this.bounds = undefined;
-        this.setStatic(false);
+        this.vel = undefined;
+        this.force = undefined;
+        this.friction = undefined;
+        this.maxVel = undefined;
         this.shapes.length = 0;
+
+        // reset some variable to default
+        this.setStatic(false);
     }
 };
 

package/src/physics/bounds.js

@@ -1,5 +1,5 @@
+import pool from "./../system/pooling.js";
 import Vector2d from "./../math/vector2.js";
-import Polygon from "./../geometries/poly.js";
 
 /**
  * @classdesc
@@ -10,6 +10,8 @@ class Bounds {
      * @param {Vector2d[]} [vertices] an array of me.Vector2d points
      */
     constructor(vertices) {
+        // @ignore
+        this._center = new Vector2d();
         this.onResetEvent(vertices);
     }
 
@@ -26,9 +28,6 @@ class Bounds {
         if (typeof vertices !== "undefined") {
             this.update(vertices);
         }
-
-        // @ignore
-        this._center = new Vector2d();
     }
 
     /**
@@ -450,11 +449,11 @@ class Bounds {
      * @returns {Polygon} a new Polygon that represents this bounds.
      */
     toPolygon () {
-        return new Polygon(this.x, this.y, [
-            new Vector2d(0,          0),
-            new Vector2d(this.width, 0),
-            new Vector2d(this.width, this.height),
-            new Vector2d(0,          this.height)
+        return pool.pull("Polygon", this.x, this.y, [
+            pool.pull("Vector2d", 0,          0),
+            pool.pull("Vector2d", this.width, 0),
+            pool.pull("Vector2d", this.width, this.height),
+            pool.pull("Vector2d", 0,          this.height)
         ]);
     }
 

package/src/physics/world.js

@@ -69,7 +69,7 @@ class World extends Container {
          * @name bodies
          * @memberof World
          * @public
-         * @type {Set}
+         * @type {Set<Body>}
          */
         this.bodies = new Set();
 

package/src/polyfill/index.js

@@ -5,3 +5,4 @@ import "core-js/proposals/global-this";
 import "./console.js";
 import "./performance.js";
 import "./requestAnimationFrame.js";
+import "./roundrect.js";

package/src/polyfill/roundrect.js

@@ -0,0 +1,235 @@
+/*
+ * based on https://www.npmjs.com/package/canvas-roundrect-polyfill
+ * @version 0.0.1
+ */
+(() => {
+
+  "use strict";
+
+  /** @ignore */
+  function roundRect(x, y, w, h, radii) {
+
+    if (!([x, y, w, h].every((input) => Number.isFinite(input)))) {
+
+      return;
+
+    }
+
+    radii = parseRadiiArgument(radii);
+
+    let upperLeft, upperRight, lowerRight, lowerLeft;
+
+    if (radii.length === 4) {
+
+      upperLeft = toCornerPoint(radii[0]);
+      upperRight = toCornerPoint(radii[1]);
+      lowerRight = toCornerPoint(radii[2]);
+      lowerLeft = toCornerPoint(radii[3]);
+
+    } else if (radii.length === 3) {
+
+      upperLeft = toCornerPoint(radii[0]);
+      upperRight = toCornerPoint(radii[1]);
+      lowerLeft = toCornerPoint(radii[1]);
+      lowerRight = toCornerPoint(radii[2]);
+
+    } else if (radii.length === 2) {
+
+      upperLeft = toCornerPoint(radii[0]);
+      lowerRight = toCornerPoint(radii[0]);
+      upperRight = toCornerPoint(radii[1]);
+      lowerLeft = toCornerPoint(radii[1]);
+
+    } else if (radii.length === 1) {
+
+      upperLeft = toCornerPoint(radii[0]);
+      upperRight = toCornerPoint(radii[0]);
+      lowerRight = toCornerPoint(radii[0]);
+      lowerLeft = toCornerPoint(radii[0]);
+
+    } else {
+
+      throw new Error(radii.length + " is not a valid size for radii sequence.");
+
+    }
+
+    const corners = [upperLeft, upperRight, lowerRight, lowerLeft];
+    const negativeCorner = corners.find(({x, y}) => x < 0 || y < 0);
+    //const negativeValue = negativeCorner?.x < 0 ? negativeCorner.x : negativeCorner?.y
+
+    if (corners.some(({x, y}) => !Number.isFinite(x) || !Number.isFinite(y))) {
+
+      return;
+
+    }
+
+    if (negativeCorner) {
+
+      throw new Error("Radius value " + negativeCorner + " is negative.");
+
+    }
+
+    fixOverlappingCorners(corners);
+
+    if (w < 0 && h < 0) {
+
+      this.moveTo(x - upperLeft.x, y);
+      this.ellipse(x + w + upperRight.x, y - upperRight.y, upperRight.x, upperRight.y, 0, -Math.PI * 1.5, -Math.PI);
+      this.ellipse(x + w + lowerRight.x, y + h + lowerRight.y, lowerRight.x, lowerRight.y, 0, -Math.PI, -Math.PI / 2);
+      this.ellipse(x - lowerLeft.x, y + h + lowerLeft.y, lowerLeft.x, lowerLeft.y, 0, -Math.PI / 2, 0);
+      this.ellipse(x - upperLeft.x, y - upperLeft.y, upperLeft.x, upperLeft.y, 0, 0, -Math.PI / 2);
+
+    } else if (w < 0) {
+
+      this.moveTo(x - upperLeft.x, y);
+      this.ellipse(x + w + upperRight.x, y + upperRight.y, upperRight.x, upperRight.y, 0, -Math.PI / 2, -Math.PI, 1);
+      this.ellipse(x + w + lowerRight.x, y + h - lowerRight.y, lowerRight.x, lowerRight.y, 0, -Math.PI, -Math.PI * 1.5, 1);
+      this.ellipse(x - lowerLeft.x, y + h - lowerLeft.y, lowerLeft.x, lowerLeft.y, 0, Math.PI / 2, 0, 1);
+      this.ellipse(x - upperLeft.x, y + upperLeft.y, upperLeft.x, upperLeft.y, 0, 0, -Math.PI / 2, 1);
+
+    } else if (h < 0) {
+
+      this.moveTo(x + upperLeft.x, y);
+      this.ellipse(x + w - upperRight.x, y - upperRight.y, upperRight.x, upperRight.y, 0, Math.PI / 2, 0, 1);
+      this.ellipse(x + w - lowerRight.x, y + h + lowerRight.y, lowerRight.x, lowerRight.y, 0, 0, -Math.PI / 2, 1);
+      this.ellipse(x + lowerLeft.x, y + h + lowerLeft.y, lowerLeft.x, lowerLeft.y, 0, -Math.PI / 2, -Math.PI, 1);
+      this.ellipse(x + upperLeft.x, y - upperLeft.y, upperLeft.x, upperLeft.y, 0, -Math.PI, -Math.PI * 1.5, 1);
+
+    } else {
+
+      this.moveTo(x + upperLeft.x, y);
+      this.ellipse(x + w - upperRight.x, y + upperRight.y, upperRight.x, upperRight.y, 0, -Math.PI / 2, 0);
+      this.ellipse(x + w - lowerRight.x, y + h - lowerRight.y, lowerRight.x, lowerRight.y, 0, 0, Math.PI / 2);
+      this.ellipse(x + lowerLeft.x, y + h - lowerLeft.y, lowerLeft.x, lowerLeft.y, 0, Math.PI / 2, Math.PI);
+      this.ellipse(x + upperLeft.x, y + upperLeft.y, upperLeft.x, upperLeft.y, 0, Math.PI, Math.PI * 1.5);
+
+    }
+
+    this.closePath();
+    this.moveTo(x, y);
+
+    /** @ignore */
+    function toDOMPointInit(value) {
+
+      const {x, y, z, w} = value;
+      return {x, y, z, w};
+
+    }
+
+    /** @ignore */
+    function parseRadiiArgument(value) {
+
+      // https://webidl.spec.whatwg.org/#es-union
+      // with 'optional (unrestricted double or DOMPointInit
+      //   or sequence<(unrestricted double or DOMPointInit)>) radii = 0'
+      const type = typeof value;
+
+      if (type === "undefined" || value === null) {
+
+        return [0];
+
+      }
+      if (type === "function") {
+
+        return [NaN];
+
+      }
+      if (type === "object") {
+
+        if (typeof value[Symbol.iterator] === "function") {
+
+          return [...value].map((elem) => {
+            // https://webidl.spec.whatwg.org/#es-union
+            // with '(unrestricted double or DOMPointInit)'
+            const elemType = typeof elem;
+            if (elemType === "undefined" || elem === null) {
+              return 0;
+            }
+            if (elemType === "function") {
+              return NaN;
+            }
+            if (elemType === "object") {
+              return toDOMPointInit(elem);
+            }
+            return toUnrestrictedNumber(elem);
+          });
+
+        }
+
+        return [toDOMPointInit(value)];
+
+      }
+
+      return [toUnrestrictedNumber(value)];
+
+    }
+
+    /** @ignore */
+    function toUnrestrictedNumber(value) {
+
+      return +value;
+
+    }
+
+    /** @ignore */
+    function toCornerPoint(value) {
+
+      const asNumber = toUnrestrictedNumber(value);
+      if (Number.isFinite(asNumber)) {
+
+        return {
+          x: asNumber,
+          y: asNumber
+        };
+
+      }
+      if (Object(value) === value) {
+
+        return {
+          x: toUnrestrictedNumber(value.x || 0),
+          y: toUnrestrictedNumber(value.y || 0)
+        };
+
+      }
+
+      return {
+        x: NaN,
+        y: NaN
+      };
+
+    }
+
+    /** @ignore */
+    function fixOverlappingCorners(corners) {
+      const [upperLeft, upperRight, lowerRight, lowerLeft] = corners;
+      const factors = [
+        Math.abs(w) / (upperLeft.x + upperRight.x),
+        Math.abs(h) / (upperRight.y + lowerRight.y),
+        Math.abs(w) / (lowerRight.x + lowerLeft.x),
+        Math.abs(h) / (upperLeft.y + lowerLeft.y)
+      ];
+      const minFactor = Math.min(...factors);
+      if (minFactor <= 1) {
+        corners.forEach((radii) => {
+            radii.x *= minFactor;
+            radii.y *= minFactor;
+        });
+      }
+    }
+  }
+
+  if (typeof Path2D.prototype.roundRect === "undefined") {
+      Path2D.prototype.roundRect = roundRect;
+  }
+  if (globalThis.CanvasRenderingContext2D) {
+    if (typeof globalThis.CanvasRenderingContext2D.prototype.roundRect === "undefined") {
+        globalThis.CanvasRenderingContext2D.prototype.roundRect = roundRect;
+    }
+  }
+  if (globalThis.OffscreenCanvasRenderingContext2D) {
+    if (typeof globalThis.OffscreenCanvasRenderingContext2D.prototype.roundRect === "undefined") {
+        globalThis.OffscreenCanvasRenderingContext2D.prototype.roundRect = roundRect;
+    }
+  }
+
+})();

package/src/renderable/collectable.js

@@ -1,6 +1,5 @@
 import Sprite from "./sprite.js";
 import Body from "./../physics/body.js";
-import Rect from "./../geometries/rectangle.js";
 import collision from "./../physics/collision.js";
 
 /**
@@ -24,7 +23,15 @@ class Collectable extends Sprite {
         this.id = settings.id;
 
         // add and configure the physic body
-        this.body = new Body(this, settings.shapes || new Rect(0, 0, this.width, this.height));
+        var shape = settings.shapes;
+        if (typeof shape === "undefined") {
+            shape = pool.pull("Polygon", 0, 0, [
+                pool.pull("Vector2d", 0,          0),
+                pool.pull("Vector2d", this.width, 0),
+                pool.pull("Vector2d", this.width, this.height)
+            ]);
+        }
+        this.body = new Body(this, shape);
         this.body.collisionType = collision.types.COLLECTABLE_OBJECT;
         // by default only collides with PLAYER_OBJECT
         this.body.setCollisionMask(collision.types.PLAYER_OBJECT);

package/src/renderable/colorlayer.js

@@ -1,4 +1,4 @@
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import { viewport } from "./../game.js";
 import Renderable from "./renderable.js";
 

package/src/renderable/container.js

@@ -1,7 +1,7 @@
 import utils from "./../utils/utils.js";
 import * as game from "./../game.js";
 import * as event from "./../system/event.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import state from "./../state/state.js";
 import Renderable from "./renderable.js";
 import Body from "./../physics/body.js";

package/src/renderable/imagelayer.js

@@ -1,6 +1,6 @@
 import { renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import { viewport } from "./../game.js";
 import Sprite from "./sprite.js";
 import * as stringUtil from "./../utils/string.js";

package/src/renderable/renderable.js

@@ -2,7 +2,7 @@ import ObservableVector2d from "./../math/observable_vector2.js";
 import ObservableVector3d from "./../math/observable_vector3.js";
 import Rect from "./../geometries/rectangle.js";
 import Container from "./container.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import { releaseAllPointerEvents } from "./../input/input.js";
 import { clamp } from "./../math/math.js";
 
@@ -227,7 +227,7 @@ class Renderable extends Rect {
          * A mask limits rendering elements to the shape and position of the given mask object.
          * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
          * @public
-         * @type {Rect|Polygon|Line|Ellipse}
+         * @type {Rect|RoundRect|Polygon|Line|Ellipse}
          * @name mask
          * @default undefined
          * @memberof Renderable#

package/src/renderable/sprite.js

@@ -1,6 +1,5 @@
-import Vector2d from "./../math/vector2.js";
 import { renderer } from "./../video/video.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
 import { TextureAtlas } from "./../video/texture.js";
 import Renderable from "./renderable.js";
@@ -99,7 +98,7 @@ class Sprite extends Renderable {
             // length of the current animation name
             length : 0,
             //current frame texture offset
-            offset : new Vector2d(),
+            offset : pool.pull("Vector2d"),
             // current frame size
             width : 0,
             height : 0,

package/src/renderable/trigger.js

@@ -1,7 +1,6 @@
 import Renderable from "./renderable.js";
 import collision from "./../physics/collision.js";
 import Body from "./../physics/body.js";
-import Rect from "./../geometries/rectangle.js";
 import level from "./../level/level.js";
 import { world, viewport } from "./../game.js";
 
@@ -66,9 +65,16 @@ class Trigger extends Renderable {
             }
         }.bind(this));
 
-
-        // physic body to check for collision against
-        this.body = new Body(this, settings.shapes || new Rect(0, 0, this.width, this.height));
+        // add and configure the physic body
+        var shape = settings.shapes;
+        if (typeof shape === "undefined") {
+            shape = pool.pull("Polygon", 0, 0, [
+                pool.pull("Vector2d", 0,          0),
+                pool.pull("Vector2d", this.width, 0),
+                pool.pull("Vector2d", this.width, this.height)
+            ]);
+        }
+        this.body = new Body(this, shape);
         this.body.collisionType = collision.types.ACTION_OBJECT;
         // by default only collides with PLAYER_OBJECT
         this.body.setCollisionMask(collision.types.PLAYER_OBJECT);

package/src/state/stage.js

@@ -31,7 +31,7 @@ class Stage {
          * Cameras will be renderered based on this order defined in this list.
          * Only the "default" camera will be resized when the window or canvas is resized.
          * @public
-         * @type {Map}
+         * @type {Map<Camera2d>}
          * @name cameras
          * @memberof Stage
          */

package/src/state/state.js

@@ -512,7 +512,7 @@ var state = {
             // if fading effect
             if (_fade.duration && _stages[state].transition) {
                 /** @ignore */
-                _onSwitchComplete = function() {
+                _onSwitchComplete = () => {
                     game.viewport.fadeOut(_fade.color, _fade.duration);
                 };
                 game.viewport.fadeIn(

package/src/system/device.js

@@ -112,12 +112,6 @@ function _checkCapabilities() {
     // detect device type/platform
     _detectDevice();
 
-    // Mobile browser hacks
-    if (device.isMobile) {
-        // Prevent the webview from moving on a swipe
-        device.enableSwipe(false);
-    }
-
     // Touch/Gesture Event feature detection
     device.TouchEvent = !!("ontouchstart" in globalThis);
     device.PointerEvent = !!globalThis.PointerEvent;
@@ -239,6 +233,13 @@ function _checkCapabilities() {
             );
         }
     }
+
+    // Mobile browser hacks
+    if (device.isMobile) {
+        // Prevent the webview from moving on a swipe
+        device.enableSwipe(false);
+    }
+
 };
 
 
@@ -676,13 +677,14 @@ let device = {
      * @param {boolean} [enable=true] enable or disable swipe.
      */
     enableSwipe(enable) {
+        var moveEvent = device.PointerEvent ? "pointermove" : (device.TouchEvent ? "touchmove" : "mousemove");
         if (enable !== false) {
             if (swipeEnabled === false) {
-                globalThis.document.removeEventListener("touchmove", _disableSwipeFn, false);
+                globalThis.document.removeEventListener(moveEvent, _disableSwipeFn);
                 swipeEnabled = true;
             }
         } else if (swipeEnabled === true) {
-            globalThis.document.addEventListener("touchmove", _disableSwipeFn, false);
+            globalThis.document.addEventListener(moveEvent, _disableSwipeFn, { passive: false });
             swipeEnabled = false;
         }
     },