melonjs 13.0.0 → 13.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "13.0.0",
+  "version": "13.2.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "keywords": [
@@ -52,7 +52,7 @@
   ],
   "dependencies": {
     "@teppeis/multimaps": "^2.0.0",
-    "core-js": "^3.23.5",
+    "core-js": "^3.24.1",
     "earcut": "2.2.4",
     "eventemitter3": "^4.0.7",
     "howler": "2.2.3"
@@ -60,22 +60,22 @@
   "devDependencies": {
     "@melonjs/webdoc-theme": "^1.1.1",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@types/offscreencanvas": "^2019.7.0",
     "@webdoc/cli": "^2.0.0",
-    "del-cli": "^4.0.1",
-    "eslint": "^8.20.0",
-    "jasmine-core": "^4.2.0",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.22.0",
+    "jasmine-core": "^4.3.0",
     "karma": "^6.4.0",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-html-detailed-reporter": "^2.1.0",
     "karma-jasmine": "^5.1.0",
     "karma-nyan-reporter": "0.2.5",
-    "rollup": "^2.77.0",
+    "rollup": "^2.78.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
     "terser": "^5.14.2",

package/src/geometries/point.js

@@ -0,0 +1,80 @@
+/**
+ * @classdesc
+ * represents a point in a 2d space
+ */
+class Point {
+    constructor(x = 0, y = 0) {
+        /**
+         * the position of the point on the horizontal axis
+         * @public
+         * @type {Number}
+         * @default 0
+         */
+        this.x = x;
+
+        /**
+         * the position of the point on the vertical axis
+         * @public
+         * @type {Number}
+         * @default 0
+         */
+        this.y = y;
+    }
+
+    /** @ignore */
+    onResetEvent(x = 0, y = 0) {
+        this.set(x, y);
+    }
+
+    /**
+     * set the Point x and y properties to the given values
+     * @param {number} x
+     * @param {number} y
+     * @returns {Point} Reference to this object for method chaining
+     */
+    set(x = 0, y = 0) {
+        this.x = x;
+        this.y = y;
+        return this;
+    }
+
+    /**
+     * return true if the two points are the same
+     * @name equals
+     * @memberof Point
+     * @method
+     * @param {Point} point
+     * @returns {boolean}
+     */
+    /**
+     * return true if this point is equal to the given values
+     * @name equals
+     * @memberof Point
+     * @param {number} x
+     * @param {number} y
+     * @returns {boolean}
+     */
+     equals() {
+        var _x, _y;
+        if (arguments.length === 2) {
+            // x, y
+            _x = arguments[0];
+            _y = arguments[1];
+        } else {
+            // point
+            _x = arguments[0].x;
+            _y = arguments[0].y;
+        }
+        return ((this.x === _x) && (this.y === _y));
+    }
+
+    /**
+     * clone this Point
+     * @name clone
+     * @returns {Point} new Point
+     */
+    clone() {
+        return new Point(this.x, this.y);
+    }
+}
+export default Point;

package/src/index.js

@@ -30,6 +30,7 @@ import Matrix3d from "./math/matrix3.js";
 import Polygon from "./geometries/poly.js";
 import Line from "./geometries/line.js";
 import Ellipse from "./geometries/ellipse.js";
+import Point from "./geometries/point.js";
 import Rect from "./geometries/rectangle.js";
 import RoundRect from "./geometries/roundrect.js";
 import QuadTree from "./physics/quadtree.js";
@@ -119,6 +120,7 @@ export {
     Polygon,
     Line,
     Ellipse,
+    Point,
     Rect,
     RoundRect,
     Tween,
@@ -226,6 +228,7 @@ export function boot() {
     pool.register("me.RoundRect", RoundRect, true);
     pool.register("me.Polygon", Polygon, true);
     pool.register("me.Line", Line, true);
+    pool.register("me.Point", Point, true);
     pool.register("me.Ellipse", Ellipse, true);
     pool.register("me.Bounds", Bounds, true);
 
@@ -255,6 +258,7 @@ export function boot() {
     pool.register("RoundRect", RoundRect, true);
     pool.register("Polygon", Polygon, true);
     pool.register("Line", Line, true);
+    pool.register("Point", Point, true);
     pool.register("Ellipse", Ellipse, true);
     pool.register("Bounds", Bounds, true);
     pool.register("CanvasTexture", CanvasTexture, true);

package/src/input/pointerevent.js

@@ -125,7 +125,7 @@ function enablePointerEvent() {
 
         if (pointerEventTarget === null) {
             // default pointer event target
-            pointerEventTarget = renderer.getScreenCanvas();
+            pointerEventTarget = renderer.getCanvas();
         }
 
         if (device.pointerEvent) {
@@ -556,7 +556,7 @@ export var throttlingInterval;
  */
 export function globalToLocal(x, y, v) {
     v = v || pool.pull("Vector2d");
-    var rect = device.getElementBounds(renderer.getScreenCanvas());
+    var rect = device.getElementBounds(renderer.getCanvas());
     var pixelRatio = globalThis.devicePixelRatio || 1;
     x -= rect.left + (globalThis.pageXOffset || 0);
     y -= rect.top + (globalThis.pageYOffset || 0);

package/src/lang/deprecated.js

@@ -62,7 +62,6 @@ Object.defineProperty(Renderer.prototype, "Texture", {
     }
 });
 
-
 /**
  * @classdesc
  * Used to make a game entity draggable
@@ -100,3 +99,30 @@ export class DroptargetEntity extends DropTarget {
         super(x, y, settings.width, settings.height);
     }
 }
+
+/**
+ * return a reference to the screen canvas
+ * @name getScreenCanvas
+ * @memberof Renderer
+ * @returns {HTMLCanvasElement}
+ * @deprecated since 13.1.0
+ * @see getCanvas();
+ */
+Renderer.prototype.getScreenCanvas = function() {
+    warning("getScreenCanvas", "getCanvas", "13.1.0");
+    return this.getCanvas();
+};
+
+/**
+ * return a reference to the screen canvas corresponding 2d Context<br>
+ * (will return buffered context if double buffering is enabled, or a reference to the Screen Context)
+ * @name getScreenContext
+ * @memberof Renderer
+ * @returns {CanvasRenderingContext2D}
+ * @deprecated since 13.1.0
+ * @see getContext();
+ */
+Renderer.prototype.getScreenContext = function()  {
+    warning("getScreenContext", "getContext", "13.1.0");
+    return this.getContext();
+};

package/src/level/tiled/TMXGroup.js

@@ -49,6 +49,16 @@ export default class TMXGroup {
          */
         this.tintcolor = data.tintcolor;
 
+
+        /**
+         * the group class
+         * @public
+         * @type {string}
+         * @name class
+         * @memberof TMXGroup
+         */
+        this.class = data.class;
+
         /**
          * group z order
          * @public

package/src/level/tiled/TMXLayer.js

@@ -138,6 +138,15 @@ class TMXLayer extends Renderable {
          */
         this.renderorder = data.renderorder || "right-down";
 
+        /**
+         * the layer class
+         * @public
+         * @type {string}
+         * @name class
+         * @name TMXLayer#class
+         */
+        this.class = data.class;
+
         // for displaying order
         this.pos.z = z;
 

package/src/level/tiled/TMXObject.js

@@ -99,20 +99,31 @@ export default class TMXObject {
          * object type
          * @public
          * @type {string}
+         * @deprecated since Tiled 1.9
+         * @see https://docs.mapeditor.org/en/stable/reference/tmx-changelog/#tiled-1-9
          * @name type
          * @memberof TMXObject
          */
         this.type = settings.type;
 
+        /**
+         * the object class
+         * @public
+         * @type {string}
+         * @name class
+         * @memberof TMXObject
+         */
+        this.class = typeof settings.class !== "undefined" ? settings.class : settings.type;
+
         /**
          * object text
          * @public
          * @type {object}
          * @see http://docs.mapeditor.org/en/stable/reference/tmx-map-format/#text
-         * @name type
+         * @name text
          * @memberof TMXObject
          */
-        this.type = settings.type;
+        this.text = undefined;
 
         /**
          * The rotation of the object in radians clockwise (defaults to 0)
@@ -159,6 +170,15 @@ export default class TMXObject {
          */
         this.isEllipse = false;
 
+        /**
+         * if true, the object is a Point
+         * @public
+         * @type {boolean}
+         * @name isPoint
+         * @memberof TMXObject
+         */
+        this.isPoint = false;
+
         /**
          * if true, the object is a Polygon
          * @public
@@ -182,12 +202,14 @@ export default class TMXObject {
             this.setTile(map.tilesets);
         }
         else {
-            if (typeof(settings.ellipse) !== "undefined") {
+            if (typeof settings.ellipse !== "undefined") {
                 this.isEllipse = true;
-            } else if (typeof(settings.polygon) !== "undefined") {
+            } else if (typeof settings.point !== "undefined") {
+                this.isPoint = true;
+            } else if (typeof settings.polygon !== "undefined") {
                 this.points = settings.polygon;
                 this.isPolygon = true;
-            } else if (typeof(settings.polyline) !== "undefined") {
+            } else if (typeof settings.polyline !== "undefined") {
                 this.points = settings.polyline;
                 this.isPolyLine = true;
             }
@@ -261,8 +283,9 @@ export default class TMXObject {
                 this.width,
                 this.height
             )).rotate(this.rotation));
+        } else if (this.isPoint === true) {
+            shapes.push(pool.pull("Point", this.x, this.y));
         } else {
-
             // add a polygon
             if (this.isPolygon === true) {
                 var _polygon = pool.pull("Polygon", 0, 0, this.points);
@@ -271,10 +294,8 @@ export default class TMXObject {
                     throw new Error("collision polygones in Tiled should be defined as Convex");
                 }
                 shapes.push(_polygon.rotate(this.rotation));
-            }
 
-            // add a polyline
-            else if (this.isPolyLine === true) {
+            } else if (this.isPolyLine === true) {
                 var p = this.points;
                 var p1, p2;
                 var segments = p.length - 1;
@@ -306,7 +327,9 @@ export default class TMXObject {
         // Apply isometric projection
         if (this.orientation === "isometric") {
             for (i = 0; i < shapes.length; i++) {
-                shapes[i].toIso();
+                if (typeof shapes[i].toIso === "function") {
+                    shapes[i].toIso();
+                }
             }
         }
 

package/src/level/tiled/TMXTileMap.js

@@ -204,6 +204,16 @@ class TMXTileMap {
          */
         this.tiledversion = data.tiledversion;
 
+
+        /**
+         * The map class.
+         * @public
+         * @type {string}
+         * @name TMXTileMap#class
+         */
+         this.class = data.class;
+
+
         // tilesets for this map
         this.tilesets = null;
 
@@ -545,6 +555,8 @@ class TMXTileMap {
                         obj.anchorPoint.set(0, 0);
                         obj.name = settings.name;
                         obj.type = settings.type;
+                        // for backward compatibility
+                        obj.class = settings.class || settings.type;
                         obj.id = settings.id;
                         obj.body = new Body(obj, shape);
                         obj.body.setStatic(true);

package/src/level/tiled/TMXTileset.js

@@ -62,6 +62,14 @@ class TMXTileset {
          */
         this.isCollection = false;
 
+        /**
+         * the tileset class
+         * @public
+         * @type {boolean}
+         * @name TMXTileset#class
+         */
+        this.class = tileset.class;
+
         /**
          * Tileset animations
          * @private

package/src/math/color.js

@@ -2,10 +2,19 @@ import { clamp, random } from "./math.js";
 import pool from "./../system/pooling.js";
 
 // convert a give color component to it hexadecimal value
-var toHex = function (component) {
+function toHex(component) {
     return "0123456789ABCDEF".charAt((component - (component % 16)) >> 4) + "0123456789ABCDEF".charAt(component % 16);
 };
 
+function hue2rgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1/6) return p + (q - p) * 6 * t;
+    if (t < 1/2) return q;
+    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+    return p;
+}
+
 const rgbaRx = /^rgba?\((\d+), ?(\d+), ?(\d+)(, ?([\d\.]+))?\)$/;
 const hex3Rx = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])$/;
 const hex4Rx = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])([\da-fA-F])$/;
@@ -199,7 +208,6 @@ class Color {
     /**
      * Color Red Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get r() {
         return ~~(this.glArray[0] * 255);
@@ -213,7 +221,6 @@ class Color {
     /**
      * Color Green Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get g() {
         return ~~(this.glArray[1] * 255);
@@ -227,7 +234,6 @@ class Color {
     /**
      * Color Blue Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get b() {
         return ~~(this.glArray[2] * 255);
@@ -239,7 +245,6 @@ class Color {
     /**
      * Color Alpha Component [0.0 .. 1.0]
      * @type {number}
-     * @memberof Color
      */
     get alpha() {
         return this.glArray[3];
@@ -252,8 +257,6 @@ class Color {
 
     /**
      * Set this color to the specified value.
-     * @name setColor
-     * @memberof Color
      * @param {number} r red component [0 .. 255]
      * @param {number} g green component [0 .. 255]
      * @param {number} b blue component [0 .. 255]
@@ -268,10 +271,59 @@ class Color {
         return this;
     }
 
+    /**
+     * set this color to the specified HSV value
+     * @param {number} h hue (a value from 0 to 1)
+     * @param {number} s saturation (a value from 0 to 1)
+     * @param {number} v value (a value from 0 to 1)
+     * @returns {Color} Reference to this object for method chaining
+     */
+    setHSV(h, s, v) {
+        var r, g, b;
+
+        var i = Math.floor(h * 6);
+        var f = h * 6 - i;
+        var p = v * (1 - s);
+        var q = v * (1 - f * s);
+        var t = v * (1 - (1 - f) * s);
+
+        switch (i % 6) {
+            case 0: r = v, g = t, b = p; break;
+            case 1: r = q, g = v, b = p; break;
+            case 2: r = p, g = v, b = t; break;
+            case 3: r = p, g = q, b = v; break;
+            case 4: r = t, g = p, b = v; break;
+            case 5: r = v, g = p, b = q; break;
+        }
+        return this.setColor(r * 255, g * 255, b * 255);
+    }
+
+    /**
+     * set this color to the specified HSL value
+     * @param {number} h hue (a value from 0 to 1)
+     * @param {number} s saturation (a value from 0 to 1)
+     * @param {number} l lightness (a value from 0 to 1)
+     * @returns {Color} Reference to this object for method chaining
+     */
+    setHSL(h, s, l) {
+        var r, g, b;
+
+        if (s === 0) {
+            r = g = b = l; // achromatic
+        } else {
+            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            var p = 2 * l - q;
+
+            r = hue2rgb(p, q, h + 1/3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1/3);
+        }
+
+        return this.setColor(r * 255, g * 255, b * 255);
+    }
+
     /**
      * Create a new copy of this color object.
-     * @name clone
-     * @memberof Color
      * @returns {Color} Reference to the newly cloned object
      */
     clone() {
@@ -280,8 +332,6 @@ class Color {
 
     /**
      * Copy a color object or CSS color into this one.
-     * @name copy
-     * @memberof Color
      * @param {Color|string} color
      * @returns {Color} Reference to this object for method chaining
      */
@@ -296,8 +346,6 @@ class Color {
 
     /**
      * Blend this color with the given one using addition.
-     * @name add
-     * @memberof Color
      * @param {Color} color
      * @returns {Color} Reference to this object for method chaining
      */
@@ -312,8 +360,6 @@ class Color {
 
     /**
      * Darken this color value by 0..1
-     * @name darken
-     * @memberof Color
      * @param {number} scale
      * @returns {Color} Reference to this object for method chaining
      */
@@ -328,8 +374,6 @@ class Color {
 
     /**
      * Linearly interpolate between this color and the given one.
-     * @name lerp
-     * @memberof Color
      * @param {Color} color
      * @param {number} alpha with alpha = 0 being this color, and alpha = 1 being the given one.
      * @returns {Color} Reference to this object for method chaining
@@ -345,8 +389,6 @@ class Color {
 
     /**
      * Lighten this color value by 0..1
-     * @name lighten
-     * @memberof Color
      * @param {number} scale
      * @returns {Color} Reference to this object for method chaining
      */
@@ -361,8 +403,6 @@ class Color {
 
     /**
      * Generate random r,g,b values for this color object
-     * @name random
-     * @memberof Color
      * @param {number} [min=0] minimum value for the random range
      * @param {number} [max=255] maxmium value for the random range
      * @returns {Color} Reference to this object for method chaining
@@ -386,8 +426,6 @@ class Color {
     /**
      * Return true if the r,g,b,a values of this color are equal with the
      * given one.
-     * @name equals
-     * @memberof Color
      * @param {Color} color
      * @returns {boolean}
      */
@@ -403,8 +441,6 @@ class Color {
     /**
      * Parse a CSS color string and set this color to the corresponding
      * r,g,b values
-     * @name parseCSS
-     * @memberof Color
      * @param {string} cssColor
      * @returns {Color} Reference to this object for method chaining
      */
@@ -420,8 +456,6 @@ class Color {
 
     /**
      * Parse an RGB or RGBA CSS color string
-     * @name parseRGB
-     * @memberof Color
      * @param {string} rgbColor
      * @returns {Color} Reference to this object for method chaining
      */
@@ -439,8 +473,6 @@ class Color {
     /**
      * Parse a Hex color ("#RGB", "#RGBA" or "#RRGGBB", "#RRGGBBAA" format) and set this color to
      * the corresponding r,g,b,a values
-     * @name parseHex
-     * @memberof Color
      * @param {string} hexColor
      * @param {boolean} [argb = false] true if format is #ARGB, or #AARRGGBB (as opposed to #RGBA or #RGGBBAA)
      * @returns {Color} Reference to this object for method chaining
@@ -498,12 +530,10 @@ class Color {
 
     /**
      * Pack this color into a Uint32 ARGB representation
-     * @name toUint32
-     * @memberof Color
      * @param {number} [alpha=1.0] alpha value [0.0 .. 1.0]
      * @returns {number}
      */
-    toUint32(alpha = this.alpha) {
+    toUint32(alpha = 1.0) {
         var ur = this.r & 0xff;
         var ug = this.g & 0xff;
         var ub = this.b & 0xff;
@@ -514,8 +544,6 @@ class Color {
 
     /**
      * return an array representation of this object
-     * @name toArray
-     * @memberof Color
      * @returns {Float32Array}
      */
     toArray() {
@@ -524,9 +552,7 @@ class Color {
 
 
     /**
-     * Get the color in "#RRGGBB" format
-     * @name toHex
-     * @memberof Color
+     * return the color in "#RRGGBB" format
      * @returns {string}
      */
     toHex() {
@@ -538,8 +564,6 @@ class Color {
 
     /**
      * Get the color in "#RRGGBBAA" format
-     * @name toHex8
-     * @memberof Color
      * @returns {string}
      */
     toHex8(alpha = this.alpha) {
@@ -551,8 +575,6 @@ class Color {
 
     /**
      * Get the color in "rgb(R,G,B)" format
-     * @name toRGB
-     * @memberof Color
      * @returns {string}
      */
     toRGB() {
@@ -568,8 +590,6 @@ class Color {
 
     /**
      * Get the color in "rgba(R,G,B,A)" format
-     * @name toRGBA
-     * @memberof Color
      * @param {number} [alpha=1.0] alpha value [0.0 .. 1.0]
      * @returns {string}
      */

package/src/math/observable_vector2.js

@@ -388,8 +388,32 @@ class ObservableVector2d extends Vector2d {
      * @returns {ObservableVector2d} Reference to this object for method chaining
      */
     lerp(v, alpha) {
-        this._x += ( v.x - this._x ) * alpha;
-        this._y += ( v.y - this._y ) * alpha;
+        return this._set(
+            this._x + ( v.x - this._x ) * alpha,
+            this._y + ( v.y - this._y ) * alpha
+        );
+    }
+
+    /**
+     * interpolate the position of this vector towards the given one while nsure that the distance never exceeds the given step.
+     * @name moveTowards
+     * @memberof ObservableVector2d
+     * @param {Vector2d|ObservableVector2d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {ObservableVector2d} Reference to this object for method chaining
+     */
+     moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this._y, target.x - this._x);
+
+        var distance = this.distance(target);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        this._x += Math.cos(angle) * step;
+        this._y += Math.sin(angle) * step;
+
         return this;
     }