melonjs 9.1.0 → 10.0.1

package/src/utils/function.js

@@ -12,19 +12,17 @@
  * @memberOf me.utils.function
  * @name defer
  * @param {Function} fn The function to be deferred.
- * @param {Object} scope The execution scope of the deferred function.
- * @param {} [arguments...] Optional additional arguments to carry for the
- * function.
+ * @param {Object} thisArg The value to be passed as the this parameter to the target function when the deferred function is called
+ * @param {...*} [args] Optional additional arguments to carry for the function.
  * @return {Number} id that can be used to clear the deferred function using
  * clearTimeout
  * @example
  * // execute myFunc() when the stack is empty,
- * // with the current context and 'myArgument' as parameter
- * me.utils.function.defer(fn, this, 'myArgument');
+ * // with the current context and [1, 2, 3] as parameter
+ * me.utils.function.defer(myFunc, this, 1, 2, 3);
  */
-export function defer(fn, scope) {
-    var args = Array.prototype.slice.call(arguments, 1);
-    return setTimeout(fn.bind.apply(fn, args), 0.01);
+export function defer(func, thisArg, ...args) {
+    return setTimeout(func.bind(thisArg), 0.01, ...args);
 };
 
 /**

package/src/utils/utils.js

@@ -3,13 +3,13 @@ import * as arrayUtils from "./array.js";
 import * as fileUtils from "./file.js";
 import * as stringUtils from "./string.js";
 import * as fnUtils from "./function.js";
-import video from "./../video/video.js";
+import { createCanvas } from "./../video/video.js";
 import CanvasRenderer from "./../video/canvas/canvas_renderer.js";
 import { version } from "./../index.js";
 
 /**
  * a collection of utility functions
- * @namespace me.utils
+ * @namespace utils
  * @memberOf me
  */
 
@@ -37,7 +37,7 @@ var utils = {
     getPixels : function (arg) {
         if (arg instanceof HTMLImageElement) {
             var _context = CanvasRenderer.getContext2d(
-                video.createCanvas(arg.width, arg.height)
+                createCanvas(arg.width, arg.height)
             );
             _context.drawImage(arg, 0, 0);
             return _context.getImageData(0, 0, arg.width, arg.height);
@@ -100,36 +100,40 @@ var utils = {
      * var UriFragment = me.utils.getUriFragment();
      * console.log(UriFragment["mytag"]); //> "value"
      */
-    getUriFragment : (function (url) {
-        var UriFragments = {};
-        var parsed = false;
-        return function (url) {
-            var hash;
-            if (typeof url === "undefined") {
-                hash = UriFragments;
-                if (parsed === true) {
-                    return hash;
-                }
-                url = document.location;
-                parsed = true;
+    getUriFragment : function (url) {
+        var hash = {};
+
+        if (typeof url === "undefined") {
+            var location = document.location;
+
+            if (location && location.hash) {
+                url = location.hash;
             } else {
-                // never cache if a url is passed as parameter
-                hash = {};
+                // No "document.location" exist for Wechat mini game platform.
+                return hash;
             }
-            // No "document.location" exist for Wechat mini game platform.
-            if (url && url.hash) {
-                url.hash.substr(1).split("&").filter(function (value) {
-                    return (value !== "");
-                }).forEach(function (value) {
-                    var kv = value.split("=");
-                    var k = kv.shift();
-                    var v = kv.join("=");
-                    hash[k] = v || true;
-                });
+        } else {
+            // never cache if a url is passed as parameter
+            var index = url.indexOf("#");
+            if (index !== -1) {
+                url = url.substr(index, url.length);
+            } else {
+                return hash;
             }
-            return hash;
-        };
-    })(),
+        }
+
+        // parse the url
+        url.substr(1).split("&").filter(function (value) {
+            return (value !== "");
+        }).forEach(function (value) {
+            var kv = value.split("=");
+            var k = kv.shift();
+            var v = kv.join("=");
+            hash[k] = v || true;
+        });
+
+        return hash;
+    },
 
     /**
      * reset the GUID Base Name

package/src/video/canvas/canvas_renderer.js

@@ -2,7 +2,7 @@ import Color from "./../../math/color.js";
 import Renderer from "./../renderer.js";
 import TextureCache from "./../texture_cache.js";
 import Ellipse from "./../../shapes/ellipse.js";
-import video from "./../video.js";
+import { createCanvas } from "./../video.js";
 
 
 
@@ -36,7 +36,7 @@ class CanvasRenderer extends Renderer {
 
         // create the back buffer if we use double buffering
         if (this.settings.doubleBuffering) {
-            this.backBufferCanvas = video.createCanvas(this.settings.width, this.settings.height, true);
+            this.backBufferCanvas = createCanvas(this.settings.width, this.settings.height, true);
             this.backBufferContext2D = this.getContext2d(this.backBufferCanvas);
         }
         else {
@@ -281,8 +281,9 @@ class CanvasRenderer extends Renderer {
      * @param {Number} start start angle in radians
      * @param {Number} end end angle in radians
      * @param {Boolean} [antiClockwise=false] draw arc anti-clockwise
+     * @param {Boolean} [fill=false] also fill the shape with the current color if true
      */
-    strokeArc(x, y, radius, start, end, antiClockwise, fill) {
+    strokeArc(x, y, radius, start, end, antiClockwise, fill = false) {
         var context = this.backBufferContext2D;
 
         if (context.globalAlpha < 1 / 255) {
@@ -321,8 +322,9 @@ class CanvasRenderer extends Renderer {
      * @param {Number} y ellipse center point y-axis
      * @param {Number} w horizontal radius of the ellipse
      * @param {Number} h vertical radius of the ellipse
+     * @param {Boolean} [fill=false] also fill the shape with the current color if true
      */
-    strokeEllipse(x, y, w, h, fill) {
+    strokeEllipse(x, y, w, h, fill = false) {
         var context = this.backBufferContext2D;
 
         if (context.globalAlpha < 1 / 255) {
@@ -412,8 +414,9 @@ class CanvasRenderer extends Renderer {
      * @memberOf me.CanvasRenderer.prototype
      * @function
      * @param {me.Polygon} poly the shape to draw
+     * @param {Boolean} [fill=false] also fill the shape with the current color if true
      */
-    strokePolygon(poly, fill) {
+    strokePolygon(poly, fill = false) {
         var context = this.backBufferContext2D;
 
         if (context.globalAlpha < 1 / 255) {
@@ -455,8 +458,9 @@ class CanvasRenderer extends Renderer {
      * @param {Number} y
      * @param {Number} width
      * @param {Number} height
+     * @param {Boolean} [fill=false] also fill the shape with the current color if true
      */
-    strokeRect(x, y, width, height, fill) {
+    strokeRect(x, y, width, height, fill = false) {
         if (fill === true ) {
             this.fillRect(x, y, width, height);
         } else {
@@ -695,6 +699,8 @@ class CanvasRenderer extends Renderer {
         var context = this.backBufferContext2D;
         var _x = mask.pos.x, _y = mask.pos.y;
 
+        context.save();
+
         // https://github.com/melonjs/melonJS/issues/648
         if (mask instanceof Ellipse) {
             var hw = mask.radiusV.x,
@@ -718,7 +724,6 @@ class CanvasRenderer extends Renderer {
             context.bezierCurveTo(xmin, by, lx, ymax, lx, _y);
             context.bezierCurveTo(lx, ymin, xmin, ty, _x, ty);
         } else {
-            context.save();
             context.beginPath();
             context.moveTo(_x + mask.points[0].x, _y + mask.points[0].y);
             var point;
@@ -726,8 +731,8 @@ class CanvasRenderer extends Renderer {
                 point = mask.points[i];
                 context.lineTo(_x + point.x, _y + point.y);
             }
-            context.closePath();
         }
+
         context.clip();
     }
 

package/src/video/renderer.js

@@ -1,7 +1,7 @@
 import Color from "./../math/color.js";
 import Matrix3d from "./../math/matrix3.js";
-import video from "./video.js";
-import event from "./../system/event.js";
+import { createCanvas, renderer } from "./video.js";
+import * as event from "./../system/event.js";
 import device from "./../system/device.js";
 import { setPrefixed } from "./../utils/agent.js";
 import { Texture } from "./texture.js";
@@ -72,7 +72,7 @@ class Renderer {
         } else if (typeof this.settings.canvas !== "undefined") {
             this.canvas = this.settings.canvas;
         } else {
-            this.canvas = video.createCanvas(this.settings.zoomX, this.settings.zoomY);
+            this.canvas = createCanvas(this.settings.zoomX, this.settings.zoomY);
         }
 
         // canvas object and context
@@ -94,8 +94,8 @@ class Renderer {
         this.Texture = Texture;
 
         // reset the instantiated renderer on game reset
-        event.subscribe(event.GAME_RESET, function () {
-            video.renderer.reset();
+        event.on(event.GAME_RESET, () => {
+            renderer.reset();
         });
 
         return this;
@@ -288,7 +288,7 @@ class Renderer {
             this.currentScissor[2] = width;
             this.currentScissor[3] = height;
             // publish the corresponding event
-            event.publish(event.CANVAS_ONRESIZE, [ width, height ]);
+            event.emit(event.CANVAS_ONRESIZE, width, height);
         }
     }
 
@@ -367,7 +367,7 @@ class Renderer {
      * @return {HTMLCanvasElement|OffscreenCanvas} a new canvas element representing the tinted image
      */
     tint(src, color, mode) {
-        var canvas = video.createCanvas(src.width, src.height, true);
+        var canvas = createCanvas(src.width, src.height, true);
         var context = this.getContext2d(canvas);
 
         context.save();
@@ -405,6 +405,7 @@ class Renderer {
      * @function
      * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} [mask] the shape defining the mask to be applied
      */
+    // eslint-disable-next-line no-unused-vars
     setMask(mask) {}
 
     /**

package/src/video/texture.js

@@ -2,7 +2,7 @@ import Vector2d from "./../math/vector2.js";
 import WebGLRenderer from "./webgl/webgl_renderer.js";
 import TextureCache from "./texture_cache.js";
 import Sprite from "./../renderable/sprite.js";
-import video from "./video.js";
+import { renderer } from "./video.js";
 import pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
 import { ETA } from "./../math/math.js";
@@ -161,11 +161,11 @@ export class Texture {
 
         // Add self to TextureCache if cache !== false
         if (cache !== false) {
-            this.sources.forEach(function (source) {
+            this.sources.forEach((source) => {
                 if (cache instanceof TextureCache) {
                     cache.set(source, this);
                 } else {
-                    video.renderer.cache.set(source, this);
+                    renderer.cache.set(source, this);
                 }
             });
         }
@@ -177,8 +177,8 @@ export class Texture {
      */
     parse(data) {
         var atlas = {};
-        var self = this;
-        data.frames.forEach(function (frame) {
+
+        data.frames.forEach((frame) => {
             // fix wrongly formatted JSON (e.g. last dummy object in ShoeBox)
             if (frame.hasOwnProperty("filename")) {
                 // Source coordinates
@@ -202,7 +202,7 @@ export class Texture {
                     height       : s.h,
                     angle        : (frame.rotated === true) ? -ETA : 0
                 };
-                self.addUvsMap(atlas, frame.filename, data.meta.size.w, data.meta.size.h);
+                this.addUvsMap(atlas, frame.filename, data.meta.size.w, data.meta.size.h);
             }
         });
         return atlas;
@@ -275,7 +275,7 @@ export class Texture {
      */
     addUvsMap(atlas, frame, w, h) {
         // ignore if using the Canvas Renderer
-        if (video.renderer instanceof WebGLRenderer) {
+        if (renderer instanceof WebGLRenderer) {
             // Source coordinates
             var s = atlas[frame].offset;
             var sw = atlas[frame].width;
@@ -300,7 +300,7 @@ export class Texture {
      */
     addQuadRegion(name, x, y, w, h) {
         // TODO: Require proper atlas regions instead of caching arbitrary region keys
-        if (video.renderer.settings.verbose === true) {
+        if (renderer.settings.verbose === true) {
             console.warn("Adding texture region", name, "for texture", this);
         }
 

package/src/video/texture_cache.js

@@ -1,5 +1,5 @@
-import video from "./video.js";
-import utils from "./../utils/utils.js";
+import { renderer } from "./video.js";
+import * as fileUtil from "./../utils/file.js";
 import { Texture, createAtlas } from "./texture.js";
 import { isPowerOfTwo} from "./../math/math.js";
 
@@ -50,7 +50,7 @@ class TextureCache {
     get(image, atlas) {
         if (!this.cache.has(image)) {
             if (!atlas) {
-                atlas = createAtlas(image.width, image.height, image.src ? utils.file.getBasename(image.src) : undefined);
+                atlas = createAtlas(image.width, image.height, image.src ? fileUtil.getBasename(image.src) : undefined);
             }
             this.set(image, new Texture(atlas, image, false));
         }
@@ -69,7 +69,7 @@ class TextureCache {
         }
 
         if (!image_cache.has(color)) {
-            image_cache.set(color, video.renderer.tint(src, color, "multiply"));
+            image_cache.set(color, renderer.tint(src, color, "multiply"));
         }
 
         return image_cache.get(color);
@@ -83,7 +83,7 @@ class TextureCache {
         var height = image.height;
 
         // warn if a non POT texture is added to the cache when using WebGL1
-        if (video.renderer.WebGLVersion === 1 && (!isPowerOfTwo(width) || !isPowerOfTwo(height))) {
+        if (renderer.WebGLVersion === 1 && (!isPowerOfTwo(width) || !isPowerOfTwo(height))) {
             var src = typeof image.src !== "undefined" ? image.src : image;
             console.warn(
                 "[Texture] " + src + " is not a POT texture " +