melonjs 15.14.0 → 16.0.0

package/src/loader/parsers/tmx.js

@@ -1,9 +1,8 @@
 import * as fileUtil from "../../utils/file.js";
-import { ua } from "../../system/platform.js";
 import level from "../../level/level.js";
 import * as TMXUtils from "../../level/tiled/TMXUtils.js";
 import { tmxList } from "../cache.js";
-import { nocache, withCredentials } from "../settings.js";
+import { fetchData } from "./fetchdata.js";
 
 
 /**
@@ -11,6 +10,7 @@ import { nocache, withCredentials } from "../settings.js";
  * @param {loader.Asset} data - asset data
  * @param {Function} [onload] - function to be called when the asset is loaded
  * @param {Function} [onerror] - function to be called in case of error
+ * @param {Function} [fetchData] - function to use instead of default window.fetch, has some error handling and things
  * @returns {number} the amount of corresponding resource parsed/preloaded
  * @ignore
  */
@@ -33,7 +33,6 @@ export function preloadTMX(tmxData, onload, onerror) {
         }
     }
 
-
     //if the data is in the tmxData object, don't get it via a XMLHTTPRequest
     if (tmxData.data) {
         addToTMXList(tmxData.data);
@@ -43,85 +42,60 @@ export function preloadTMX(tmxData, onload, onerror) {
         return;
     }
 
-    let xmlhttp = new XMLHttpRequest();
-    // check the data format ('tmx', 'json')
-    let format = fileUtil.getExtension(tmxData.src);
-
-    if (xmlhttp.overrideMimeType) {
-        if (format === "json") {
-            xmlhttp.overrideMimeType("application/json");
-        }
-        else {
-            xmlhttp.overrideMimeType("text/xml");
-        }
-    }
+    fetchData(tmxData.src, "text")
+        .then(response => {
+            if (typeof response !== "string") {
+                throw new Error("Invalid response type");
+            }
 
-    xmlhttp.open("GET", tmxData.src + nocache, true);
-    xmlhttp.withCredentials = withCredentials;
-    // set the callbacks
-    xmlhttp.ontimeout = onerror;
-    xmlhttp.onreadystatechange = function () {
-        if (xmlhttp.readyState === 4) {
-            // status = 0 when file protocol is used, or cross-domain origin,
-            // (With Chrome use "--allow-file-access-from-files --disable-web-security")
-            if ((xmlhttp.status === 200) || ((xmlhttp.status === 0) && xmlhttp.responseText)) {
-                let result = null;
+            let result;
 
-                // parse response
-                switch (format) {
-                    case "xml":
-                    case "tmx":
-                    case "tsx": {
-                        // ie9 does not fully implement the responseXML
-                        if (ua.match(/msie/i) || !xmlhttp.responseXML) {
-                            if (globalThis.DOMParser) {
-                                // manually create the XML DOM
-                                result = (new DOMParser()).parseFromString(xmlhttp.responseText, "text/xml");
-                            } else {
-                                throw new Error("XML file format loading not supported, use the JSON file format instead");
-                            }
-                        }
-                        else {
-                            result = xmlhttp.responseXML;
-                        }
-                        // converts to a JS object
-                        const data = TMXUtils.parse(result);
-                        switch (format) {
-                            case "tmx":
-                                result = data.map;
-                                break;
+            switch (fileUtil.getExtension(tmxData.src)) {
+                case "xml":
+                case "tmx":
+                case "tsx": {
+                    const parser = new DOMParser();
 
-                            case "tsx":
-                                result = data.tilesets[0];
-                                break;
-                        }
-                        break;
+                    if (typeof parser.parseFromString === "undefined") {
+                        throw new Error(
+                            "XML file format loading supported, use the JSON file format instead"
+                        );
                     }
-                    case "json":
-                    case "tmj":
-                    case "tsj":
-                        result = JSON.parse(xmlhttp.responseText);
-                        break;
 
-                    default:
-                        throw new Error("TMX file format " + format + " not supported !");
-                }
+                    const xmlDoc = parser.parseFromString(response, "text/xml");
+                    const data = TMXUtils.parse(xmlDoc);
 
-                //set the TMX content
-                addToTMXList(result);
+                    switch (fileUtil.getExtension(tmxData.src)) {
+                        case "tmx":
+                            result = data.map;
+                            break;
 
-                // fire the callback
-                if (typeof onload === "function") {
-                    onload();
+                        case "tsx":
+                            result = data.tilesets[0];
+                            break;
+                    }
+                    break;
                 }
+                case "json":
+                case "tmj":
+                case "tsj":
+                    result = JSON.parse(response);
+                    break;
+                default:
+                    throw new Error(`TMX file format not supported: ${fileUtil.getExtension(tmxData.src)}`);
+            }
+
+            addToTMXList(result);
+
+            if (typeof onload === "function") {
+                onload();
             }
-            else if (typeof onerror === "function") {
-                onerror(tmxData.name);
+        })
+        .catch(error => {
+            if (typeof onerror === "function") {
+                onerror(error);
             }
-        }
-    };
-    // send the request
-    xmlhttp.send();
+        });
 
     return 1;
 }

package/src/math/math.js

@@ -207,3 +207,13 @@ export function round(num, dec = 0) {
 export function toBeCloseTo(expected, actual, precision = 2) {
     return Math.abs(expected - actual) < (Math.pow(10, -precision) / 2);
 }
+
+
+/**
+ * Calculates the power of a number.
+ * @param {number} n - The number to be raised to the power of 2.
+ * @returns {number} The result of raising the number to the power of 2.
+ */
+export function pow(n) {
+    return Math.pow(n, 2);
+}

package/src/math/vector2.js

@@ -246,18 +246,16 @@ export default class Vector2d {
      * @param {number} [y]
      * @returns {boolean}
      */
-    equals() {
+    equals(...args) {
         let _x, _y;
-        if (arguments.length === 2) {
+        if (args.length === 2) {
             // x, y
-            _x = arguments[0];
-            _y = arguments[1];
+            [_x, _y] = args;
         } else {
             // vector
-            _x = arguments[0].x;
-            _y = arguments[0].y;
+            [_x, _y] = [args[0].x, args[0].y];
         }
-        return ((this.x === _x) && (this.y === _y));
+        return this.x === _x && this.y === _y;
     }
 
     /**

package/src/math/vector3.js

@@ -262,18 +262,14 @@ export default class Vector3d {
      * @param {number} [z]
      * @returns {boolean}
      */
-    equals() {
+    equals(...args) {
         let _x, _y, _z;
-        if (arguments.length >= 2) {
+        if (args.length >= 2) {
             // x, y, z
-            _x = arguments[0];
-            _y = arguments[1];
-            _z = arguments[2];
+            [_x, _y, _z] = args;
         } else {
             // vector
-            _x = arguments[0].x;
-            _y = arguments[0].y;
-            _z = arguments[0].z;
+            [_x, _y, _z] = [args[0].x, args[0].y, args[0].z];
         }
 
         if (typeof _z === "undefined") {

package/src/physics/body.js

@@ -528,17 +528,15 @@ export default class Body {
      *   // do something
      * }
      */
-    contains() {
+    contains(...args) {
         let _x, _y;
 
-        if (arguments.length === 2) {
+        if (args.length === 2) {
             // x, y
-            _x = arguments[0];
-            _y = arguments[1];
+            [_x, _y] = args;
         } else {
             // vector
-            _x = arguments[0].x;
-            _y = arguments[0].y;
+            [_x, _y] = [args[0].x, args[0].y];
         }
 
         if (this.getBounds().contains(_x, _y)) {

package/src/plugin/plugin.js

@@ -135,7 +135,7 @@ export function register(plugin, name = plugin.toString().match(/ (\w+)/)[1]) {
     }
 
     // compatibility testing
-    if (checkVersion(instance.version, version) > 0) {
+    if (checkVersion(instance.version, version) < 0) {
         throw new Error("Plugin version mismatch, expected: " + instance.version + ", got: " + version);
     }
 

package/src/polyfill/index.js

@@ -8,3 +8,6 @@ import "core-js/es/string/trim-end";
 // "built-in" polyfills
 import "./console.js";
 import "./roundrect.js";
+
+// fetch polyfill
+import "whatwg-fetch";

package/src/renderable/imagelayer.js

@@ -124,14 +124,12 @@ export default class ImageLayer extends Sprite {
         event.on(event.VIEWPORT_ONCHANGE, this.updateLayer, this);
         event.on(event.VIEWPORT_ONRESIZE, this.resize, this);
         // force a first refresh when the level is loaded
-        event.once(event.LEVEL_LOADED, () => {
-            this.updateLayer(game.viewport.pos);
-        });
+        event.on(event.LEVEL_LOADED, this.updateLayer, this);
         // in case the level is not added to the root container,
         // the onActivateEvent call happens after the LEVEL_LOADED event
         // so we need to force a first update
         if (this.ancestor.root !== true) {
-            this.updateLayer(game.viewport.pos);
+            this.updateLayer();
         }
     }
 
@@ -159,10 +157,12 @@ export default class ImageLayer extends Sprite {
      * updateLayer function
      * @ignore
      */
-    updateLayer(vpos) {
+    updateLayer() {
         const rx = this.ratio.x,
             ry = this.ratio.y;
 
+        const viewport = game.viewport;
+
         if (rx === 0 && ry === 0) {
             // static image
             return;
@@ -170,8 +170,8 @@ export default class ImageLayer extends Sprite {
 
         const width = this.width,
             height = this.height,
-            bw = game.viewport.bounds.width,
-            bh = game.viewport.bounds.height,
+            bw = viewport.bounds.width,
+            bh = viewport.bounds.height,
             ax = this.anchorPoint.x,
             ay = this.anchorPoint.y,
 
@@ -181,8 +181,8 @@ export default class ImageLayer extends Sprite {
              * See https://github.com/melonjs/melonJS/issues/741#issuecomment-138431532
              * for a thorough description of how this works.
              */
-            x = ax * (rx - 1) * (bw - game.viewport.width) + this.offset.x - rx * vpos.x,
-            y = ay * (ry - 1) * (bh - game.viewport.height) + this.offset.y - ry * vpos.y;
+            x = ax * (rx - 1) * (bw - viewport.width) + this.offset.x - rx * viewport.pos.x,
+            y = ay * (ry - 1) * (bh - viewport.height) + this.offset.y - ry * viewport.pos.y;
 
 
         // Repeat horizontally; start drawing from left boundary
@@ -263,6 +263,7 @@ export default class ImageLayer extends Sprite {
         // cancel all event subscriptions
         event.off(event.VIEWPORT_ONCHANGE, this.updateLayer);
         event.off(event.VIEWPORT_ONRESIZE, this.resize);
+        event.off(event.LEVEL_LOADED, this.updateLayer);
     }
 
     /**

package/src/renderable/renderable.js

@@ -258,6 +258,9 @@ export default class Renderable extends Rect {
         // viewport flag
         this._inViewport = false;
 
+        // cache value for the parentApp
+        this._parentApp = undefined;
+
         // renderable cache tint value used by the getter/setter
         this._tint = pool.pull("Color", 255, 255, 255, 1.0);
 
@@ -265,6 +268,20 @@ export default class Renderable extends Rect {
         this.setOpacity(1.0);
     }
 
+    /**
+     * returns the parent application (or game) to which this renderable is attached to
+     * @return {Application} the parent application or undefined if not attached to any container/app
+     */
+    get parentApp() {
+        if (typeof this._parentApp === "undefined") {
+            if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getRootAncestor === "function") {
+                // the `app` property is only defined in the world "root" container
+                this._parentApp = this.ancestor.getRootAncestor().app;
+            }
+        }
+        return this._parentApp;
+    }
+
     /**
      * Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container
      * @see Renderable#floating
@@ -790,6 +807,7 @@ export default class Renderable extends Rect {
         }
 
         this.ancestor = undefined;
+        this._parentApp = undefined;
 
         // destroy the physic body if defined and is a builtin body object
         if ((typeof this.body !== "undefined") && (typeof this.body.destroy === "function")) {

package/src/video/renderer.js

@@ -409,19 +409,18 @@ export default class Renderer {
 
     /**
      * creates a Blob object representing the last rendered frame
-     * @param {object} [options] - An object with the following properties:
-     * @param {string} [options.type="image/png"] - A string indicating the image format
-     * @param {number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
      * @returns {Promise} A Promise returning a Blob object representing the last rendered frame
      * @example
      * renderer.convertToBlob().then((blob) => console.log(blob));
      */
-    toBlob(options) {
+    toBlob(type = "image/png", quality) {
         return new Promise((resolve) => {
             event.once(event.GAME_AFTER_DRAW, () => {
                 this.canvas.toBlob((blob) => {
                     resolve(blob);
-                }, options ? options.type : undefined, options ? options.quality : undefined);
+                }, type, quality);
             });
         });
     }
@@ -429,18 +428,17 @@ export default class Renderer {
     /**
      * creates an ImageBitmap object of the last frame rendered
      * (not supported by standard Canvas)
-     * @param {object} [options] - An object with the following properties:
-     * @param {string} [options.type="image/png"] - A string indicating the image format
-     * @param {number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
      * @returns {Promise} A Promise returning an ImageBitmap.
      * @example
      * renderer.transferToImageBitmap().then((image) => console.log(image));
      */
-    toImageBitmap(options) {
+    toImageBitmap(type = "image/png", quality) {
         return new Promise((resolve) => {
             event.once(event.GAME_AFTER_DRAW, () => {
                 let image = new Image();
-                image.src = this.canvas.toDataURL(options);
+                image.src = this.canvas.toDataURL(type, quality);
                 image.onload = () => {
                     createImageBitmap(image).then((bitmap) => resolve(bitmap));
                 };
@@ -450,17 +448,16 @@ export default class Renderer {
 
     /**
      * returns a data URL containing a representation of the last frame rendered
-     * @param {object} [options] - An object with the following properties:
-     * @param {string} [options.type="image/png"] - A string indicating the image format
-     * @param {number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
      * @returns {Promise} A Promise returning a string containing the requested data URL.
      * @example
      * renderer.toDataURL().then((dataURL) => console.log(dataURL));
      */
-    toDataURL(options) {
+    toDataURL(type = "image/png", quality) {
         return new Promise((resolve) => {
             event.once(event.GAME_AFTER_DRAW, () => {
-                resolve(this.canvas.toDataURL(options));
+                resolve(this.canvas.toDataURL(type, quality));
             });
         });
     }

package/src/video/texture/atlas.js

@@ -174,13 +174,25 @@ export class TextureAtlas {
             if (frame.hasOwnProperty("filename")) {
                 // Source coordinates
                 let s = frame.frame;
+                let trimmed = !!frame.trimmed;
+
+                let trim;
+
+                if (trimmed) {
+                    trim = {
+                        x : frame.spriteSourceSize.x,
+                        y : frame.spriteSourceSize.y,
+                        w : frame.spriteSourceSize.w,
+                        h : frame.spriteSourceSize.h
+                    };
+                }
 
                 let originX, originY;
                 // Pixel-based offset origin from the top-left of the source frame
-                let hasTextureAnchorPoint = (frame.spriteSourceSize && frame.sourceSize && frame.pivot);
+                let hasTextureAnchorPoint = (frame.sourceSize && frame.pivot);
                 if (hasTextureAnchorPoint) {
-                    originX = (frame.sourceSize.w * frame.pivot.x) - ((frame.trimmed) ? frame.spriteSourceSize.x : 0);
-                    originY = (frame.sourceSize.h * frame.pivot.y) - ((frame.trimmed) ? frame.spriteSourceSize.y : 0);
+                    originX = (frame.sourceSize.w * frame.pivot.x) - ((trimmed) ? trim.x : 0);
+                    originY = (frame.sourceSize.h * frame.pivot.y) - ((trimmed) ? trim.y : 0);
                 }
 
                 atlas[frame.filename] = {
@@ -188,7 +200,8 @@ export class TextureAtlas {
                     texture      : data.meta.image || "default", // the source texture
                     offset       : new Vector2d(s.x, s.y),
                     anchorPoint  : (hasTextureAnchorPoint) ? new Vector2d(originX / s.w, originY / s.h) : null,
-                    trimmed      : !!frame.trimmed,
+                    trimmed      : trimmed,
+                    trim         : trim,
                     width        : s.w,
                     height       : s.h,
                     angle        : (frame.rotated === true) ? -ETA : 0
@@ -241,17 +254,18 @@ export class TextureAtlas {
         for (let frame = 0, count = spritecount.x * spritecount.y; frame < count; frame++) {
             let name = "" + frame;
             atlas[name] = {
-                name        : name,
-                texture     : "default", // the source texture
-                offset      : new Vector2d(
+                name            : name,
+                texture         : "default", // the source texture
+                offset          : new Vector2d(
                     margin + (spacing + data.framewidth) * (frame % spritecount.x),
                     margin + (spacing + data.frameheight) * ~~(frame / spritecount.x)
                 ),
-                anchorPoint : (data.anchorPoint || null),
-                trimmed     : false,
-                width       : data.framewidth,
-                height      : data.frameheight,
-                angle       : 0
+                anchorPoint     : (data.anchorPoint || null),
+                trimmed         : false,
+                trim            : undefined,
+                width           : data.framewidth,
+                height          : data.frameheight,
+                angle           : 0
             };
             this.addUVs(atlas, name, width, height);
         }

package/src/video/texture/canvas_texture.js

@@ -120,43 +120,41 @@ class CanvasTexture {
 
     /**
      * creates a Blob object representing the image contained in this canvas texture
-     * @param {object} [options] - An object with the following properties:
-     * @param {string} [options.type="image/png"] - A string indicating the image format
-     * @param {number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
      * @returns {Promise} A Promise returning a Blob object representing the image contained in this canvas texture
      * @example
      * canvasTexture.convertToBlob().then((blob) => console.log(blob));
      */
-    toBlob(options) {
+    toBlob(type = "image/png", quality) {
         if (typeof this.canvas.convertToBlob === "function") {
-            return this.canvas.convertToBlob(options);
+            return this.canvas.convertToBlob(type, quality);
         } else {
             return new Promise(function(resolve) {
                 this.canvas.toBlob((blob) => {
                     resolve(blob);
-                }, options ? options.type : undefined, options ? options.quality : undefined);
+                }, type, quality);
             });
         }
     }
 
     /**
      * creates an ImageBitmap object from the most recently rendered image of this canvas texture
-     * @param {object} [options] - An object with the following properties:
-     * @param {string} [options.type="image/png"] - A string indicating the image format
-     * @param {number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
      * @returns {Promise} A Promise returning an ImageBitmap.
      * @example
      * canvasTexture.transferToImageBitmap().then((bitmap) => console.log(bitmap));
      */
-    toImageBitmap(options) {
+    toImageBitmap(type = "image/png", quality) {
         return new Promise((resolve) => {
             if (typeof this.canvas.transferToImageBitmap === "function") {
                 resolve(this.canvas.transferToImageBitmap());
             } else {
                 let image = new Image();
-                image.src = this.canvas.toDataURL(options);
+                image.src = this.canvas.toDataURL(type, quality);
                 image.onload = () => {
-                    createImageBitmap(image).then((bitmap) => resolve(bitmap));
+                    globalThis.createImageBitmap(image).then((bitmap) => resolve(bitmap));
                 };
             }
         });
@@ -165,16 +163,15 @@ class CanvasTexture {
     /**
      * returns a data URL containing a representation of the most recently rendered image of this canvas texture
      * (not supported by OffscreenCanvas)
-     * @param {object} [options] - An object with the following properties:
-     * @param {string} [options.type="image/png"] - A string indicating the image format
-     * @param {number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
      * @returns {Promise} A Promise returning a string containing the requested data URL.
      * @example
      * renderer.toDataURL().then((dataURL) => console.log(dataURL));
      */
-    toDataURL(options) {
+    toDataURL(type = "image/png", quality) {
         return new Promise((resolve) => {
-            resolve(this.canvas.toDataURL(options));
+            resolve(this.canvas.toDataURL(type, quality));
         });
     }
 

package/src/video/webgl/compositors/quad_compositor.js

@@ -92,7 +92,9 @@ export default class QuadCompositor extends Compositor {
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels, 0);
         } else if (typeof globalThis.OffscreenCanvas !== "undefined" && pixels instanceof globalThis.OffscreenCanvas) {
             // convert to ImageBitmap first (else Safari 16.4 and higher will throw an TypeError exception)
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, pixels.transferToImageBitmap());
+            const imageBitmap = pixels.transferToImageBitmap();
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageBitmap);
+            imageBitmap.close();
         } else {
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
         }