melonjs 10.7.1 → 10.8.0

package/src/geometries/roundrect.js

@@ -0,0 +1,67 @@
+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;
+    }
+
+    /**
+     * 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, this.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/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;

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);
     }
 };