melonjs 10.7.0 → 10.9.0

package/src/geometries/roundrect.js

@@ -0,0 +1,164 @@
+import Rect from "./rectangle.js";
+
+// https://developer.chrome.com/blog/canvas2d/#round-rect
+
+/**
+ * @classdesc
+ * a rectangle object with rounded corners
+ * @augments Rect
+ */
+class RoundRect extends Rect {
+    /**
+     * @param {number} x position of the rounded rectangle
+     * @param {number} y position of the rounded rectangle
+     * @param {number} width the rectangle width
+     * @param {number} height the rectangle height
+     * @param {number} [radius=20] the radius of the rounded corner
+     */
+    constructor(x, y, width, height, radius = 20) {
+        // parent constructor
+        super(x, y, width, height);
+
+        // set the corner radius
+        this.radius = radius;
+    }
+
+    /** @ignore */
+    onResetEvent(x, y, w, h, radius) {
+        super.setShape(x, y, w, h);
+        this.radius = radius;
+    }
+
+
+    /**
+     * the radius of the rounded corner
+     * @public
+     * @type {number}
+     * @default 20
+     * @name radius
+     * @memberof RoundRect.prototype
+     */
+    get radius() {
+        return this._radius;
+    }
+    set radius(value) {
+        // verify the rectangle is at least as wide and tall as the rounded corners.
+        if (this.width < 2 * value) {
+            value = this.width / 2;
+        }
+        if (this.height < 2 * value) {
+            value = this.height / 2;
+        }
+        this._radius = value;
+    }
+
+    /**
+     * copy the position, size and radius of the given rounded rectangle into this one
+     * @name copy
+     * @memberof RoundRect.prototype
+     * @function
+     * @param {RoundRect} rrect source rounded rectangle
+     * @returns {RoundRect} new rectangle
+     */
+    copy(rrect) {
+        super.setShape(rrect.pos.x, rrect.pos.y, rrect.width, rrect.height);
+        this.radius = rrect.radius;
+        return this;
+    }
+
+    /**
+     * Returns true if the rounded rectangle contains the given point
+     * @name contains
+     * @memberof RoundRect.prototype
+     * @function
+     * @param  {number} x x coordinate
+     * @param  {number} y y coordinate
+     * @returns {boolean} true if contains
+     */
+
+    /**
+     * Returns true if the rounded rectangle contains the given point
+     * @name contains
+     * @memberof RoundRect.prototype
+     * @function
+     * @param {Vector2d} point
+     * @returns {boolean} true if contains
+     */
+    contains() {
+        var arg0 = arguments[0];
+        var _x, _y;
+        if (arguments.length === 2) {
+             // x, y
+             _x = arg0;
+             _y = arguments[1];
+         } else {
+             if (arg0 instanceof Rect) {
+                 // good enough
+                 return super.contains(arg0);
+             } else {
+                 // vector
+                _x = arg0.x;
+                _y = arg0.y;
+             }
+        }
+
+        // check whether point is outside the bounding box
+        if (_x < this.left || _x >= this.right || _y < this.top || _y >= this.bottom) {
+            return false; // outside bounding box
+        }
+
+        // check whether point is within the bounding box minus radius
+        if ((_x >= this.left + this.radius && _x <= this.right - this.radius) || (_y >= this.top + this.radius && _y <= this.bottom - this.radius)) {
+            return true;
+        }
+
+        // check whether point is in one of the rounded corner areas
+        var tx, ty;
+        var radiusX =  Math.max(0, Math.min(this.radius, this.width / 2));
+        var radiusY =  Math.max(0, Math.min(this.radius, this.height / 2));
+
+        if (_x < this.left + radiusX && _y < this.top + radiusY) {
+            tx = _x - this.left - radiusX;
+            ty = _y - this.top - radiusY;
+        } else if (_x > this.right - radiusX && _y < this.top + radiusY) {
+            tx = _x - this.right + radiusX;
+            ty = _y - this.top - radiusY;
+        } else if (_x > this.right - radiusX && _y > this.bottom - radiusY) {
+            tx = _x - this.right + radiusX;
+            ty = _y - this.bottom + radiusY;
+        } else if (_x < this.left + radiusX && _y > this.bottom - radiusY) {
+            tx = _x - this.left - radiusX;
+            ty = _y - this.bottom + radiusY;
+        } else {
+            return false; // inside and not within the rounded corner area
+        }
+
+        // Pythagorean theorem.
+        return ((tx * tx) + (ty * ty) <= (radiusX * radiusY));
+    }
+
+    /**
+     * check if this RoundRect is identical to the specified one
+     * @name equals
+     * @memberof RoundRect.prototype
+     * @function
+     * @param {RoundRect} rrect
+     * @returns {boolean} true if equals
+     */
+    equals(rrect) {
+        return super.equals(rrect) && this.radius === rrect.radius;
+    }
+
+    /**
+     * clone this RoundRect
+     * @name clone
+     * @memberof RoundRect.prototype
+     * @function
+     * @returns {RoundRect} new RoundRect
+     */
+    clone() {
+        return new RoundRect(this.pos.x, this.pos.y, this.width, this.height, radius);
+    }
+};
+
+export default RoundRect;

package/src/index.js

@@ -15,7 +15,7 @@ import { plugin, plugins } from "./plugin/plugin.js";
 import * as video from "./video/video.js";
 import save from "./system/save.js";
 import timer from "./system/timer.js";
-import * as pool from "./system/pooling.js";
+import pool from "./system/pooling.js";
 import state from "./state/state.js";
 import level from "./level/level.js";
 
@@ -31,6 +31,7 @@ import Polygon from "./geometries/poly.js";
 import Line from "./geometries/line.js";
 import Ellipse from "./geometries/ellipse.js";
 import Rect from "./geometries/rectangle.js";
+import RoundRect from "./geometries/roundrect.js";
 import QuadTree from "./physics/quadtree.js";
 import Body from "./physics/body.js";
 import Bounds from "./physics/bounds.js";
@@ -117,6 +118,7 @@ export {
     Line,
     Ellipse,
     Rect,
+    RoundRect,
     Tween,
     QuadTree,
     GLShader,
@@ -218,6 +220,7 @@ export function boot() {
     pool.register("me.Matrix2d", Matrix2d, true);
     pool.register("me.Matrix3d", Matrix3d, true);
     pool.register("me.Rect", Rect, true);
+    pool.register("me.RoundRect", RoundRect, true);
     pool.register("me.Polygon", Polygon, true);
     pool.register("me.Line", Line, true);
     pool.register("me.Ellipse", Ellipse, true);
@@ -245,6 +248,7 @@ export function boot() {
     pool.register("Matrix2d", Matrix2d, true);
     pool.register("Matrix3d", Matrix3d, true);
     pool.register("Rect", Rect, true);
+    pool.register("RoundRect", RoundRect, true);
     pool.register("Polygon", Polygon, true);
     pool.register("Line", Line, true);
     pool.register("Ellipse", Ellipse, true);

package/src/input/gamepad.js

@@ -57,8 +57,8 @@ var leadingZeroRE = /^0+/;
 function addMapping(id, mapping) {
     var expanded_id = id.replace(vendorProductRE, function (_, a, b) {
         return (
-            "000".substr(a.length - 1) + a + "-" +
-            "000".substr(b.length - 1) + b + "-"
+            "000".slice(a.length - 1) + a + "-" +
+            "000".slice(b.length - 1) + b + "-"
         );
     });
     var sparse_id = id.replace(vendorProductRE, function (_, a, b) {

package/src/input/pointerevent.js

@@ -5,7 +5,7 @@ import { throttle } from "./../utils/function.js";
 import { remove } from "./../utils/array.js";
 import * as event from "./../system/event.js";
 import timer from "./../system/timer.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import device from "./../system/device.js";
 import Pointer from "./pointer.js";
 import Rect from "./../geometries/rectangle.js";

package/src/lang/deprecated.js

@@ -74,7 +74,7 @@ device.turnOffPointerLock = function () {
 /**
  * @public
  * @name Texture
- * @memberof Renderer
+ * @memberof Renderer#
  * @deprecated since 10.4.0
  * @see TextureAtlas
  */

package/src/level/tiled/TMXLayer.js

@@ -1,5 +1,5 @@
 import { createCanvas } from "./../../video/video.js";
-import * as pool from "./../../system/pooling.js";
+import pool from "./../../system/pooling.js";
 import * as TMXUtils from "./TMXUtils.js";
 import Tile from "./TMXTile.js";
 import Renderable from "./../../renderable/renderable.js";

package/src/level/tiled/TMXObject.js

@@ -1,9 +1,6 @@
-import Vector2d from "./../../math/vector2.js";
+import pool from "./../../system/pooling.js";
 import { applyTMXProperties } from "./TMXUtils.js";
 import Tile from "./TMXTile.js";
-import Ellipse from "./../../geometries/ellipse.js";
-import Polygon from "./../../geometries/poly.js";
-import Line from "./../../geometries/line.js";
 import { degToRad } from "./../../math/math.js";
 
 /**
@@ -260,7 +257,7 @@ export default class TMXObject {
         // add an ellipse shape
         if (this.isEllipse === true) {
             // ellipse coordinates are the center position, so set default to the corresonding radius
-            shapes.push((new Ellipse(
+            shapes.push((pool.pull("Ellipse",
                 this.width / 2,
                 this.height / 2,
                 this.width,
@@ -270,7 +267,7 @@ export default class TMXObject {
 
             // add a polygon
             if (this.isPolygon === true) {
-                var _polygon = new Polygon(0, 0, this.points);
+                var _polygon = pool.pull("Polygon", 0, 0, this.points);
                 // make sure it's a convex polygon
                 if (_polygon.isConvex() === false ) {
                     throw new Error("collision polygones in Tiled should be defined as Convex");
@@ -286,22 +283,22 @@ export default class TMXObject {
                 for (i = 0; i < segments; i++) {
                     // clone the value before, as [i + 1]
                     // is reused later by the next segment
-                    p1 = new Vector2d(p[i].x, p[i].y);
-                    p2 = new Vector2d(p[i + 1].x, p[i + 1].y);
+                    p1 = pool.pull("Vector2d", p[i].x, p[i].y);
+                    p2 = pool.pull("Vector2d", p[i + 1].x, p[i + 1].y);
                     if (this.rotation !== 0) {
                         p1 = p1.rotate(this.rotation);
                         p2 = p2.rotate(this.rotation);
                     }
-                    shapes.push(new Line(0, 0, [ p1, p2 ]));
+                    shapes.push(pool.pull("Line", 0, 0, [ p1, p2 ]));
                 }
             }
 
             // it's a rectangle, returns a polygon object anyway
             else {
-                shapes.push((new Polygon(
+                shapes.push((pool.pull("Polygon",
                     0, 0, [
-                        new Vector2d(), new Vector2d(this.width, 0),
-                        new Vector2d(this.width, this.height), new Vector2d(0, this.height)
+                        pool.pull("Vector2d"),  pool.pull("Vector2d", this.width, 0),
+                        pool.pull("Vector2d", this.width, this.height), pool.pull("Vector2d", 0, this.height)
                     ]
                 )).rotate(this.rotation));
             }

package/src/level/tiled/TMXTileMap.js

@@ -1,4 +1,4 @@
-import * as pool from "./../../system/pooling.js";
+import pool from "./../../system/pooling.js";
 import * as event from "./../../system/event.js";
 import { viewport } from "./../../game.js";
 import collision from "./../../physics/collision.js";
@@ -14,7 +14,6 @@ import TMXLayer from "./TMXLayer.js";
 import { applyTMXProperties } from "./TMXUtils.js";
 import Renderable from "./../../renderable/renderable.js";
 import Container from "./../../renderable/container.js";
-import Rect from "./../../geometries/rectangle.js";
 
 // constant to identify the collision object layer
 var COLLISION_GROUP = "collision";
@@ -474,6 +473,8 @@ class TMXTileMap {
                 var settings = group.objects[o];
                 // reference to the instantiated object
                 var obj;
+                // a reference to the default shape
+                var shape;
 
                 // Tiled uses 0,0 by default
                 if (typeof (settings.anchorPoint) === "undefined") {
@@ -506,9 +507,18 @@ class TMXTileMap {
                     // set the obj z order
                     obj.pos.z = settings.z;
                 } else if (typeof settings.tile === "object") {
+                    // create a default shape if none is specified
+                    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)
+                        ]);
+                    }
                     // check if a me.Tile object is embedded
                     obj = settings.tile.getRenderable(settings);
-                    obj.body = new Body(obj, settings.shapes || new Rect(0, 0, this.width, this.height));
+                    obj.body = new Body(obj, shape);
                     obj.body.setStatic(true);
                     // set the obj z order
                     obj.pos.setMuted(settings.x, settings.y, settings.z);
@@ -527,11 +537,20 @@ class TMXTileMap {
                             settings.x, settings.y,
                             settings.width, settings.height
                         );
+                        // create a default shape if none is specified
+                        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)
+                            ]);
+                        }
                         obj.anchorPoint.set(0, 0);
                         obj.name = settings.name;
                         obj.type = settings.type;
                         obj.id = settings.id;
-                        obj.body = new Body(obj, settings.shapes || new Rect(0, 0, obj.width, obj.height));
+                        obj.body = new Body(obj, shape);
                         obj.body.setStatic(true);
                         obj.resize(obj.body.getBounds().width, obj.body.getBounds().height);
                     }

package/src/level/tiled/renderer/TMXHexagonalRenderer.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../../../math/vector2.js";
-import * as pool from "./../../../system/pooling.js";
+import pool from "./../../../system/pooling.js";
 import TMXRenderer from "./TMXRenderer.js";
 import TMXLayer from "./../TMXLayer.js";
 

package/src/level/tiled/renderer/TMXIsometricRenderer.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../../../math/vector2.js";
-import * as pool from "./../../../system/pooling.js";
+import pool from "./../../../system/pooling.js";
 import TMXRenderer from "./TMXRenderer.js";
 import TMXLayer from "./../TMXLayer.js";
 

package/src/level/tiled/renderer/TMXOrthogonalRenderer.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../../../math/vector2.js";
-import * as pool from "./../../../system/pooling.js";
+import pool from "./../../../system/pooling.js";
 import TMXRenderer from "./TMXRenderer.js";
 
 /**

package/src/level/tiled/renderer/TMXRenderer.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 
-import * as pool from "./../../../system/pooling.js";
+import pool from "./../../../system/pooling.js";
 import TMXLayer from "./../TMXLayer.js";
 import Bounds from "./../../../physics/Bounds.js";
 

package/src/level/tiled/renderer/TMXStaggeredRenderer.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../../../math/vector2.js";
-import * as pool from "./../../../system/pooling.js";
+import pool from "./../../../system/pooling.js";
 import TMXHexagonalRenderer from "./TMXHexagonalRenderer.js";
 import { degToRad } from "./../../../math/math.js";
 

package/src/loader/loader.js

@@ -46,7 +46,7 @@ function checkLoadStatus(onload) {
         }
     }
     else {
-        timerId = setTimeout(function() {
+        timerId = setTimeout(() => {
             checkLoadStatus(onload);
         }, 100);
     }
@@ -85,7 +85,7 @@ function preloadImage(img, onload, onerror) {
 function preloadFontFace(data, onload, onerror) {
     var font = new FontFace(data.name, data.src);
     // loading promise
-    font.load().then(function() {
+    font.load().then(() => {
         // apply the font after the font has finished downloading
         document.fonts.add(font);
         document.body.style.fontFamily = data.name;
@@ -278,12 +278,12 @@ function preloadJavascript(data, onload, onerror) {
     }
     script.defer = true;
 
-    script.onload = function() {
+    script.onload = () => {
         // callback
         onload();
     };
 
-    script.onerror = function() {
+    script.onerror = () => {
         // callback
         onerror(data.name);
     };

package/src/loader/loadingscreen.js

@@ -2,7 +2,7 @@ import { world, viewport } from "./../game.js";
 import { createCanvas, renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
 import {nextPowerOfTwo} from "./../math/math.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import Stage from "./../state/stage.js";
 

package/src/math/color.js

@@ -1,5 +1,5 @@
 import { clamp, random } from "./math.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 
 // convert a give color component to it hexadecimal value
 var toHex = function (component) {

package/src/math/matrix2.js

@@ -1,4 +1,4 @@
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import Matrix3d from "./matrix3.js";
 
 /**

package/src/math/matrix3.js

@@ -1,4 +1,4 @@
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import { EPSILON } from "./math.js";
 
 /**

package/src/math/observable_vector2.js

@@ -1,4 +1,4 @@
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import Vector2d from "./vector2.js";
 import {clamp} from "./math.js";
 

package/src/math/observable_vector3.js

@@ -1,6 +1,6 @@
 import Vector3d from "./vector3.js";
 import {clamp} from "./math.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 
 /**
  * @classdesc

package/src/math/vector2.js

@@ -1,5 +1,5 @@
 import {clamp} from "./math.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 
 /**
  * @classdesc

package/src/math/vector3.js

@@ -1,5 +1,5 @@
 import {clamp} from "./math.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 
 /**
  * @classdesc

package/src/particles/emitter.js

@@ -1,5 +1,5 @@
 import { createCanvas } from "./../video/video.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import ParticleEmitterSettings from "./settings.js";
 import { randomFloat } from "./../math/math.js";
 import Container from "./../renderable/container.js";
@@ -32,14 +32,17 @@ class ParticleEmitter extends Container {
      * @param {number} y y position of the particle emitter
      * @param {ParticleEmitterSettings} [settings=ParticleEmitterSettings] the settings for the particle emitter.
      * @example
-     * // Create a basic emitter at position 100, 100
-     * var emitter = new ParticleEmitter(100, 100);
-     *
-     * // Adjust the emitter properties
-     * emitter.totalParticles = 200;
-     * emitter.minLife = 1000;
-     * emitter.maxLife = 3000;
-     * emitter.z = 10;
+     * // Create a particle emitter at position 100, 100
+     * var emitter = new ParticleEmitter(100, 100, {
+     *     width: 16,
+     *     height : 16,
+     *     tint: "#f00",
+     *     totalParticles: 32,
+     *     angle: 0,
+     *     angleVariation: 6.283185307179586,
+     *     maxLife: 5,
+     *     speed: 3
+     * });
      *
      * // Add the emitter to the game world
      * me.game.world.addChild(emitter);
@@ -62,6 +65,15 @@ class ParticleEmitter extends Container {
             settings.height | 1
         );
 
+        /**
+         * the current (active) emitter settings
+         * @public
+         * @type {ParticleEmitterSettings}
+         * @name settings
+         * @memberof ParticleEmitter
+         */
+        this.settings = {};
+
         // center the emitter around the given coordinates
         this.centerOn(x, y);
 
@@ -92,9 +104,6 @@ class ParticleEmitter extends Container {
         // count the updates
         this._updateCount = 0;
 
-        // the emitter settings
-        this.settings = {};
-
         // internally store how much time was skipped when frames are skipped
         this._dt = 0;
 
@@ -106,7 +115,7 @@ class ParticleEmitter extends Container {
 
     /**
      * Reset the emitter with particle emitter settings.
-     * @param {object} settings [optional] object with emitter settings. See {@link ParticleEmitterSettings}
+     * @param {ParticleEmitterSettings} settings [optional] object with emitter settings. See {@link ParticleEmitterSettings}
      */
     reset(settings = {}) {
         Object.assign(this.settings, ParticleEmitterSettings, settings);
@@ -140,7 +149,7 @@ class ParticleEmitter extends Container {
     // Add count particles in the game world
     /** @ignore */
     addParticles(count) {
-        for (var i = 0; i < ~~count; i++) {
+        for (var i = 0; i < count; i++) {
             // Add particle to the container
             this.addChild(pool.pull("Particle", this), this.pos.z);
         }

package/src/particles/particle.js

@@ -1,4 +1,4 @@
-import Vector2d from "./../math/vector2.js";
+import pool from "./../system/pooling.js";
 import timer from "./../system/timer.js";
 import { randomFloat, clamp } from "./../math/math.js";
 import Renderable from "./../renderable/renderable.js";
@@ -36,9 +36,10 @@ class Particle extends Renderable {
                 emitter.settings.image.width,
                 emitter.settings.image.height
             );
+            this.currentTransform.identity();
         } else {
             // particle velocity
-            this.vel = new Vector2d();
+            this.vel = pool.pull("Vector2d");
         }
 
         this.image = emitter.settings.image;