melonjs 10.7.0 → 10.9.0

package/src/system/pooling.js

@@ -1,7 +1,5 @@
-var objectClass = {};
-var instance_counter = 0;
-
 /**
+ * @classdesc
  * This object is used for object pooling - a technique that might speed up your game if used properly.<br>
  * If some of your classes will be instantiated and removed a lot at a time, it is a
  * good idea to add the class to this object pool. A separate pool for that class
@@ -12,172 +10,181 @@ var instance_counter = 0;
  * which means, that on level loading the engine will try to instantiate every object
  * found in the map, based on the user defined name in each Object Properties<br>
  * <img src="images/object_properties.png"/><br>
- * @namespace pool
+ * @see {@link pool} a default global instance of ObjectPool
  */
+class ObjectPool {
 
-/**
- * register an object to the pool. <br>
- * Pooling must be set to true if more than one such objects will be created. <br>
- * (Note: for an object to be poolable, it must implements a `onResetEvent` method)
- * @function pool.register
- * @param {string} className as defined in the Name field of the Object Properties (in Tiled)
- * @param {object} classObj corresponding Class to be instantiated
- * @param {boolean} [recycling=false] enables object recycling for the specified class
- * @example
- * // implement CherryEntity
- * class CherryEntity extends Spritesheet {
- *    onResetEvent() {
- *        // reset object mutable properties
- *        this.lifeBar = 100;
- *    }
- * };
- * // add our users defined entities in the object pool and enable object recycling
- * me.pool.register("cherryentity", CherryEntity, true);
- */
-export function register(className, classObj, recycling = false) {
-     if (typeof (classObj) !== "undefined") {
-         objectClass[className] = {
-             "class" : classObj,
-             "pool" : (recycling ? [] : undefined)
-         };
-     } else {
-         throw new Error("Cannot register object '" + className + "', invalid class");
+    constructor() {
+        this.objectClass = {};
+        this.instance_counter = 0;
+    }
+
+    /**
+     * register an object to the pool. <br>
+     * Pooling must be set to true if more than one such objects will be created. <br>
+     * (Note: for an object to be poolable, it must implements a `onResetEvent` method)
+     * @param {string} className as defined in the Name field of the Object Properties (in Tiled)
+     * @param {object} classObj corresponding Class to be instantiated
+     * @param {boolean} [recycling=false] enables object recycling for the specified class
+     * @example
+     * // implement CherryEntity
+     * class CherryEntity extends Spritesheet {
+     *    onResetEvent() {
+     *        // reset object mutable properties
+     *        this.lifeBar = 100;
+     *    }
+     * };
+     * // add our users defined entities in the object pool and enable object recycling
+     * me.pool.register("cherryentity", CherryEntity, true);
+     */
+    register(className, classObj, recycling = false) {
+         if (typeof (classObj) !== "undefined") {
+             this.objectClass[className] = {
+                 "class" : classObj,
+                 "pool" : (recycling ? [] : undefined)
+             };
+         } else {
+             throw new Error("Cannot register object '" + className + "', invalid class");
+         }
      }
- };
 
-/**
- * Pull a new instance of the requested object (if added into the object pool)
- * @function pool.pull
- * @param {string} name as used in {@link pool.register}
- * @param {object} [...arguments] arguments to be passed when instantiating/reinitializing the object
- * @returns {object} the instance of the requested object
- * @example
- * me.pool.register("bullet", BulletEntity, true);
- * me.pool.register("enemy", EnemyEntity, true);
- * // ...
- * // when we need to manually create a new bullet:
- * var bullet = me.pool.pull("bullet", x, y, direction);
- * // ...
- * // params aren't a fixed number
- * // when we need new enemy we can add more params, that the object construct requires:
- * var enemy = me.pool.pull("enemy", x, y, direction, speed, power, life);
- * // ...
- * // when we want to destroy existing object, the remove
- * // function will ensure the object can then be reallocated later
- * me.game.world.removeChild(enemy);
- * me.game.world.removeChild(bullet);
- */
-export function pull(name) {
-    var args = new Array(arguments.length);
-    for (var i = 0; i < arguments.length; i++) {
-        args[i] = arguments[i];
-    }
-    var className = objectClass[name];
-    if (className) {
-        var proto = className["class"],
-            poolArray = className.pool,
-            obj;
+    /**
+     * Pull a new instance of the requested object (if added into the object pool)
+     * @param {string} name as used in {@link pool.register}
+     * @param {object} [...arguments] arguments to be passed when instantiating/reinitializing the object
+     * @returns {object} the instance of the requested object
+     * @example
+     * me.pool.register("bullet", BulletEntity, true);
+     * me.pool.register("enemy", EnemyEntity, true);
+     * // ...
+     * // when we need to manually create a new bullet:
+     * var bullet = me.pool.pull("bullet", x, y, direction);
+     * // ...
+     * // params aren't a fixed number
+     * // when we need new enemy we can add more params, that the object construct requires:
+     * var enemy = me.pool.pull("enemy", x, y, direction, speed, power, life);
+     * // ...
+     * // when we want to destroy existing object, the remove
+     * // function will ensure the object can then be reallocated later
+     * me.game.world.removeChild(enemy);
+     * me.game.world.removeChild(bullet);
+     */
+    pull(name) {
+        var args = new Array(arguments.length);
+        for (var i = 0; i < arguments.length; i++) {
+            args[i] = arguments[i];
+        }
+        var className = this.objectClass[name];
+        if (className) {
+            var proto = className["class"],
+                poolArray = className.pool,
+                obj;
 
-        if (poolArray && ((obj = poolArray.pop()))) {
-            // pull an existing instance from the pool
-            args.shift();
-            // call the object onResetEvent function if defined
-            if (typeof(obj.onResetEvent) === "function") {
-                obj.onResetEvent.apply(obj, args);
+            if (poolArray && ((obj = poolArray.pop()))) {
+                // pull an existing instance from the pool
+                args.shift();
+                // call the object onResetEvent function if defined
+                if (typeof(obj.onResetEvent) === "function") {
+                    obj.onResetEvent.apply(obj, args);
+                }
+                this.instance_counter--;
             }
-            instance_counter--;
-        }
-        else {
-            // create a new instance
-            args[0] = proto;
-            obj = new (proto.bind.apply(proto, args))();
-            if (poolArray) {
-                obj.className = name;
+            else {
+                // create a new instance
+                args[0] = proto;
+                obj = new (proto.bind.apply(proto, args))();
+                if (poolArray) {
+                    obj.className = name;
+                }
             }
+            return obj;
         }
-        return obj;
+        throw new Error("Cannot instantiate object of type '" + name + "'");
     }
-    throw new Error("Cannot instantiate object of type '" + name + "'");
-};
 
-/**
- * purge the object pool from any inactive object <br>
- * Object pooling must be enabled for this function to work<br>
- * note: this will trigger the garbage collector
- * @function pool.purge
- */
-export function purge() {
-    for (var className in objectClass) {
-        if (objectClass[className]) {
-            objectClass[className].pool = [];
+    /**
+     * purge the object pool from any inactive object <br>
+     * Object pooling must be enabled for this function to work<br>
+     * note: this will trigger the garbage collector
+     */
+    purge() {
+        for (var className in this.objectClass) {
+            if (this.objectClass[className]) {
+                this.objectClass[className].pool = [];
+            }
         }
+        this.instance_counter = 0;
     }
-    instance_counter = 0;
-};
 
-/**
- * Push back an object instance into the object pool <br>
- * Object pooling for the object class must be enabled,
- * and object must have been instantiated using {@link pool#pull},
- * otherwise this function won't work
- * @function pool.push
- * @throws will throw an error if the object cannot be recycled
- * @param {object} obj instance to be recycled
- * @param {boolean} [throwOnError=true] throw an exception if the object cannot be recycled
- * @returns {boolean} true if the object was successfully recycled in the object pool
- */
-export function push(obj, throwOnError = true) {
-    if (!poolable(obj)) {
-        if (throwOnError === true ) {
-            throw new Error("me.pool: object " + obj + " cannot be recycled");
-        } else {
-            return false;
+    /**
+     * Push back an object instance into the object pool <br>
+     * Object pooling for the object class must be enabled,
+     * and object must have been instantiated using {@link pool#pull},
+     * otherwise this function won't work
+     * @throws will throw an error if the object cannot be recycled
+     * @param {object} obj instance to be recycled
+     * @param {boolean} [throwOnError=true] throw an exception if the object cannot be recycled
+     * @returns {boolean} true if the object was successfully recycled in the object pool
+     */
+    push(obj, throwOnError = true) {
+        if (!this.poolable(obj)) {
+            if (throwOnError === true ) {
+                throw new Error("me.pool: object " + obj + " cannot be recycled");
+            } else {
+                return false;
+            }
         }
-    }
 
-    // store back the object instance for later recycling
-    objectClass[obj.className].pool.push(obj);
-    instance_counter++;
+        // store back the object instance for later recycling
+        this.objectClass[obj.className].pool.push(obj);
+        this.instance_counter++;
 
-    return true;
-};
+        return true;
+    }
 
-/**
- * Check if an object with the provided name is registered
- * @function pool.exists
- * @param {string} name of the registered object class
- * @returns {boolean} true if the classname is registered
- */
-export function exists(name) {
-    return name in objectClass;
-};
+    /**
+     * Check if an object with the provided name is registered
+     * @param {string} name of the registered object class
+     * @returns {boolean} true if the classname is registered
+     */
+    exists(name) {
+        return name in this.objectClass;
+    };
 
-/**
- * Check if an object is poolable
- * (was properly registered with the recycling feature enable)
- * @function pool.poolable
- * @see pool.register
- * @param {object} obj object to be checked
- * @returns {boolean} true if the object is poolable
- * @example
- * if (!me.pool.poolable(myCherryEntity)) {
- *     // object was not properly registered
- * }
- */
-export function poolable(obj) {
-    var className = obj.className;
-    return (typeof className !== "undefined") &&
-            (typeof obj.onResetEvent === "function") &&
-            (className in objectClass) &&
-            (objectClass[className].pool !== "undefined");
+    /**
+     * Check if an object is poolable
+     * (was properly registered with the recycling feature enable)
+     * @see register
+     * @param {object} obj object to be checked
+     * @returns {boolean} true if the object is poolable
+     * @example
+     * if (!me.pool.poolable(myCherryEntity)) {
+     *     // object was not properly registered
+     * }
+     */
+    poolable(obj) {
+        var className = obj.className;
+        return (typeof className !== "undefined") &&
+                (typeof obj.onResetEvent === "function") &&
+                (className in this.objectClass) &&
+                (this.objectClass[className].pool !== "undefined");
+
+    }
 
+    /**
+     * returns the amount of object instance currently in the pool
+     * @returns {number} amount of object instance
+     */
+    getInstanceCount() {
+        return this.instance_counter;
+    }
 };
 
 /**
- * returns the amount of object instance currently in the pool
- * @function pool.getInstanceCount
- * @returns {number} amount of object instance
+ * a default global object pool instance
+ * @public
+ * @type {ObjectPool}
  */
-export function getInstanceCount() {
-    return instance_counter;
-};
+var pool = new ObjectPool();
+
+export default pool;

package/src/text/bitmaptext.js

@@ -1,6 +1,6 @@
 import Color from "./../math/color.js";
 import * as stringUtil from "./../utils/string.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
 import Renderable from "./../renderable/renderable.js";
 import TextMetrics from "./textmetrics.js";

package/src/text/text.js

@@ -2,7 +2,7 @@ import Color from "./../math/color.js";
 import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
 import { renderer as globalRenderer, createCanvas } from "./../video/video.js";
 import { trimRight } from "./../utils/string.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import { nextPowerOfTwo } from "./../math/math.js";
 import setContextStyle from "./textstyle.js";

package/src/utils/utils.js

@@ -120,14 +120,14 @@ var utils = {
             // never cache if a url is passed as parameter
             var index = url.indexOf("#");
             if (index !== -1) {
-                url = url.substr(index, url.length);
+                url = url.slice(index, url.length);
             } else {
                 return hash;
             }
         }
 
         // parse the url
-        url.substr(1).split("&").filter(function (value) {
+        url.slice(1).split("&").filter(function (value) {
             return (value !== "");
         }).forEach(function (value) {
             var kv = value.split("=");

package/src/video/canvas/canvas_renderer.js

@@ -2,6 +2,7 @@ import Color from "./../../math/color.js";
 import Renderer from "./../renderer.js";
 import TextureCache from "./../texture_cache.js";
 import Ellipse from "./../../geometries/ellipse.js";
+import RoundRect from "./../../geometries/roundrect.js";
 import { createCanvas } from "./../video.js";
 
 
@@ -65,7 +66,6 @@ class CanvasRenderer extends Renderer {
         this.getScreenCanvas().addEventListener("contextrestored", () => {
             this.isContextValid = true;
             event.emit(event.ONCONTEXT_RESTORED, this);
-            me.game.repaint();
         }, false );
     }
 
@@ -190,7 +190,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} height The rectangle's height.
      */
     clearRect(x, y, width, height) {
-        this.backBufferContext2D.clearRect(x, y, width, height);
+        this.getContext().clearRect(x, y, width, height);
     }
 
     /**
@@ -209,7 +209,7 @@ class CanvasRenderer extends Renderer {
      * var basic      = renderer.createPattern(image, "no-repeat");
      */
     createPattern(image, repeat) {
-        return this.backBufferContext2D.createPattern(image, repeat);
+        return this.getContext().createPattern(image, repeat);
     }
 
     /**
@@ -235,10 +235,11 @@ class CanvasRenderer extends Renderer {
      * renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
      */
     drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
-        if (this.backBufferContext2D.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
+        var context = this.getContext();
 
         if (typeof sw === "undefined") {
             sw = dw = image.width;
@@ -272,7 +273,7 @@ class CanvasRenderer extends Renderer {
             // get a tinted version of this image from the texture cache
             source = this.cache.tint(image, this.currentTint.toRGB());
         }
-        this.backBufferContext2D.drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh);
+        context.drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh);
     }
 
     /**
@@ -288,14 +289,15 @@ class CanvasRenderer extends Renderer {
      * @see CanvasRenderer#createPattern
      */
     drawPattern(pattern, x, y, width, height) {
-        if (this.backBufferContext2D.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
-        var fillStyle = this.backBufferContext2D.fillStyle;
-        this.backBufferContext2D.fillStyle = pattern;
-        this.backBufferContext2D.fillRect(x, y, width, height);
-        this.backBufferContext2D.fillStyle = fillStyle;
+        var context = this.getContext();
+        var fillStyle = context.fillStyle;
+        context.fillStyle = pattern;
+        context.fillRect(x, y, width, height);
+        context.fillStyle = fillStyle;
     }
 
     /**
@@ -312,12 +314,12 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeArc(x, y, radius, start, end, antiClockwise, fill = false) {
-        var context = this.backBufferContext2D;
-
-        if (context.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
+        var context = this.getContext();
+
         context.translate(x, y);
         context.beginPath();
         context.arc(0, 0, radius, start, end, antiClockwise || false);
@@ -353,12 +355,11 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeEllipse(x, y, w, h, fill = false) {
-        var context = this.backBufferContext2D;
-
-        if (context.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
+        var context = this.getContext();
 
         var hw = w,
             hh = h,
@@ -409,9 +410,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} endY the end y coordinate
      */
     strokeLine(startX, startY, endX, endY) {
-        var context = this.backBufferContext2D;
-
-        if (context < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
@@ -445,12 +444,11 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokePolygon(poly, fill = false) {
-        var context = this.backBufferContext2D;
-
-        if (context.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
+        var context = this.getContext();
 
         this.translate(poly.pos.x, poly.pos.y);
         context.beginPath();
@@ -489,15 +487,13 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeRect(x, y, width, height, fill = false) {
-        if (fill === true ) {
-            this.fillRect(x, y, width, height);
-        } else {
-            if (this.backBufferContext2D.globalAlpha < 1 / 255) {
-                // Fast path: don't draw fully transparent
-                return;
-            }
-            this.backBufferContext2D.strokeRect(x, y, width, height);
+        if (this.getGlobalAlpha() < 1 / 255) {
+            // Fast path: don't draw fully transparent
+            return;
         }
+        var context = this.getContext();
+
+        context[fill === true ? "fillRect" : "strokeRect"](x, y, width, height);
     }
 
     /**
@@ -511,11 +507,46 @@ class CanvasRenderer extends Renderer {
      * @param {number} height
      */
     fillRect(x, y, width, height) {
-        if (this.backBufferContext2D.globalAlpha < 1 / 255) {
+        this.strokeRect(x, y, width, height, true);
+    }
+
+    /**
+     * Stroke a rounded rectangle at the specified coordinates
+     * @name strokeRoundRect
+     * @memberof CanvasRenderer.prototype
+     * @function
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {number} radius
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
+     */
+    strokeRoundRect(x, y, width, height, radius, fill = false) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
-        this.backBufferContext2D.fillRect(x, y, width, height);
+        var context = this.getContext();
+
+        context.beginPath();
+        context.roundRect(x, y, width, height, radius);
+        context[fill === true ? "fill" : "stroke"]();
+    }
+
+    /**
+     * Draw a rounded filled rectangle at the specified coordinates
+     * @name fillRoundRect
+     * @memberof CanvasRenderer.prototype
+     * @function
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {number} radius
+     */
+    fillRoundRect(x, y, width, height, radius) {
+        this.strokeRoundRect(x, y, width, height, radius, true);
     }
 
 
@@ -557,7 +588,7 @@ class CanvasRenderer extends Renderer {
      */
     restore() {
         this.backBufferContext2D.restore();
-        this.currentColor.glArray[3] = this.backBufferContext2D.globalAlpha;
+        this.currentColor.glArray[3] = this.getGlobalAlpha();
         this.currentScissor[0] = 0;
         this.currentScissor[1] = 0;
         this.currentScissor[2] = this.backBufferCanvas.width;
@@ -605,7 +636,7 @@ class CanvasRenderer extends Renderer {
     }
 
     /**
-     * Set the global alpha on the canvas context
+     * Set the global alpha
      * @name setGlobalAlpha
      * @memberof CanvasRenderer.prototype
      * @function
@@ -615,6 +646,17 @@ class CanvasRenderer extends Renderer {
         this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] = alpha;
     }
 
+    /**
+     * Return the global alpha
+     * @name getGlobalAlpha
+     * @memberof CanvasRenderer.prototype
+     * @function
+     * @returns {number} global alpha value
+     */
+    getGlobalAlpha() {
+        return this.backBufferContext2D.globalAlpha;
+    }
+
     /**
      * Set the line width on the context
      * @name setLineWidth
@@ -721,14 +763,16 @@ class CanvasRenderer extends Renderer {
      * @name setMask
      * @memberof CanvasRenderer.prototype
      * @function
-     * @param {Rect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
+     * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
      */
     setMask(mask) {
-        var context = this.backBufferContext2D;
+        var context = this.getContext();
         var _x = mask.pos.x, _y = mask.pos.y;
 
         context.save();
 
+        context.beginPath();
+
         // https://github.com/melonjs/melonJS/issues/648
         if (mask instanceof Ellipse) {
             var hw = mask.radiusV.x,
@@ -745,14 +789,14 @@ class CanvasRenderer extends Renderer {
                 ymin = _y - ymagic,
                 ymax = _y + ymagic;
 
-            context.beginPath();
             context.moveTo(_x, ty);
             context.bezierCurveTo(xmax, ty, rx, ymin, rx, _y);
             context.bezierCurveTo(rx, ymax, xmax, by, _x, by);
             context.bezierCurveTo(xmin, by, lx, ymax, lx, _y);
             context.bezierCurveTo(lx, ymin, xmin, ty, _x, ty);
+        } else if (mask instanceof RoundRect) {
+            context.roundRect(_x, _y, mask.width, mask.height, mask.radius);
         } else {
-            context.beginPath();
             context.moveTo(_x + mask.points[0].x, _y + mask.points[0].y);
             var point;
             for (var i = 1; i < mask.points.length; i++) {
@@ -772,7 +816,7 @@ class CanvasRenderer extends Renderer {
      * @function
      */
     clearMask() {
-        this.backBufferContext2D.restore();
+        this.getContext().restore();
     }
 
 };