melonjs 15.1.3 → 15.1.5

package/src/loader/loader.js

@@ -17,9 +17,9 @@ export * from "./settings.js";
 
 /**
  * onload callback
- * @name onload
  * @default undefined
  * @memberof loader
+ * @type {function}
  * @example
  * // set a callback when everything is loaded
  * me.loader.onload = this.loaded.bind(this);
@@ -30,9 +30,9 @@ export let onload;
  * onProgress callback<br>
  * each time a resource is loaded, the loader will fire the specified function,
  * giving the actual progress [0 ... 1], as argument, and an object describing the resource loaded
- * @name onProgress
  * @default undefined
  * @memberof loader
+ * @type {function}
  * @example
  * // set a callback for progress notification
  * me.loader.onProgress = this.updateProgress.bind(this);
@@ -101,19 +101,25 @@ function onLoadingError(res) {
 }
 
 /**
- * set all the specified game resources to be preloaded.
- * @name preload
+ * an asset definition to be used with the loader
+ * @typedef {object} loader.Asset
+ * @property {string} name - name of the asset
+ * @property {string} type  - the type of the asset : "audio", binary", "image", "json", "js", "tmx", "tmj", "tsx", "tsj", "fontface"
+ * @property {string} [src]  - path and/or file name of the resource (for audio assets only the path is required)
+ * @property {string} [data]  - TMX data if not provided through a src url
+ * @property {boolean} [stream] - Set to true to force HTML5 Audio, which allows not to wait for large file to be downloaded before playing.
+ * @see loader.preload
+ * @see loader.load
+ */
+
+/**
+ * set all the specified game assets to be preloaded.
  * @memberof loader
- * @public
- * @param {object[]} res
- * @param {string} res.name - internal name of the resource
- * @param {string} res.type  - "audio", binary", "image", "json","js", "tmx", "tsx", "fontface"
- * @param {string} res.src  - path and/or file name of the resource (for audio assets only the path is required)
- * @param {boolean} [res.stream] - Set to true to force HTML5 Audio, which allows not to wait for large file to be downloaded before playing.
- * @param {Function} [onload=loader.onload] - function to be called when all resources are loaded
+ * @param {loader.Asset[]} assets - list of assets to load
+ * @param {Function} [onloadcb=loader.onload] - function to be called when all resources are loaded
  * @param {boolean} [switchToLoadState=true] - automatically switch to the loading screen
  * @example
- * game_resources = [
+ * game.assets = [
  *   // PNG tileset
  *   {name: "tileset-platformer", type: "image",  src: "data/map/tileset.png"},
  *   // PNG packed texture
@@ -143,15 +149,15 @@ function onLoadingError(res) {
  * ];
  * ...
  * // set all resources to be loaded
- * me.loader.preload(game.resources, () => this.loaded());
+ * me.loader.preload(game.assets, () => this.loaded());
  */
-export function preload(res, onloadcb, switchToLoadState = true) {
+export function preload(assets, onloadcb, switchToLoadState = true) {
     // parse the resources
-    for (let i = 0; i < res.length; i++) {
+    for (let i = 0; i < assets.length; i++) {
         resourceCount += load(
-            res[i],
-            onResourceLoaded.bind(this, res[i]),
-            onLoadingError.bind(this, res[i])
+            assets[i],
+            onResourceLoaded.bind(this, assets[i]),
+            onLoadingError.bind(this, assets[i])
         );
     }
     // set the onload callback if defined
@@ -169,15 +175,9 @@ export function preload(res, onloadcb, switchToLoadState = true) {
 }
 
 /**
- * Load a single resource (to be used if you need to load additional resource during the game)
- * @name load
+ * Load a single asset (to be used if you need to load additional asset(s) during the game)
  * @memberof loader
- * @public
- * @param {object} res
- * @param {string} res.name - internal name of the resource
- * @param {string} res.type  - "audio", binary", "image", "json", "tmx", "tsx"
- * @param {string} res.src  - path and/or file name of the resource (for audio assets only the path is required)
- * @param {boolean} [res.stream] - Set to true to force HTML5 Audio, which allows not to wait for large file to be downloaded before playing.
+ * @param {loader.Asset} asset
  * @param {Function} [onload] - function to be called when the resource is loaded
  * @param {Function} [onerror] - function to be called in case of error
  * @returns {number} the amount of corresponding resource to be preloaded
@@ -195,83 +195,79 @@ export function preload(res, onloadcb, switchToLoadState = true) {
  *     me.audio.play("bgmusic");
  * });
  */
-export function load(res, onload, onerror) {
+export function load(asset, onload, onerror) {
     // transform the url if necessary
-    if (typeof (baseURL[res.type]) !== "undefined") {
-        res.src = baseURL[res.type] + res.src;
+    if (typeof (baseURL[asset.type]) !== "undefined") {
+        asset.src = baseURL[asset.type] + asset.src;
     }
     // check ressource type
-    switch (res.type) {
+    switch (asset.type) {
         case "binary":
             // reuse the preloadImage fn
-            preloadBinary.call(this, res, onload, onerror);
+            preloadBinary.call(this, asset, onload, onerror);
             return 1;
 
         case "image":
             // reuse the preloadImage fn
-            preloadImage.call(this, res, onload, onerror);
+            preloadImage.call(this, asset, onload, onerror);
             return 1;
 
         case "json":
-            preloadJSON.call(this, res, onload, onerror);
+            preloadJSON.call(this, asset, onload, onerror);
             return 1;
 
         case "js":
-            preloadJavascript.call(this, res, onload, onerror);
+            preloadJavascript.call(this, asset, onload, onerror);
             return 1;
 
         case "tmx":
         case "tsx":
-            preloadTMX.call(this, res, onload, onerror);
+            preloadTMX.call(this, asset, onload, onerror);
             return 1;
 
         case "audio":
-            audio.load(res, !!res.stream, onload, onerror);
+            audio.load(asset, !!asset.stream, onload, onerror);
             return 1;
 
         case "fontface":
-            preloadFontFace.call(this, res, onload, onerror);
+            preloadFontFace.call(this, asset, onload, onerror);
             return 1;
 
         default:
-            throw new Error("load : unknown or invalid resource type : " + res.type);
+            throw new Error("load : unknown or invalid resource type : " + asset.type);
     }
 }
 
 /**
- * unload specified resource to free memory
- * @name unload
+ * unload the specified asset to free memory
  * @memberof loader
- * @public
- * @param {object} res
- * @param {string} res.name - internal name of the resource
- * @param {string} res.type  - "audio", binary", "image", "json", "tmx", "tsx"
+ * @param {loader.Asset} asset
  * @returns {boolean} true if unloaded
  * @example me.loader.unload({name: "avatar",  type:"image"});
  */
-export function unload(res) {
-    switch (res.type) {
+export function unload(asset) {
+    switch (asset.type) {
         case "binary":
-            if (!(res.name in binList)) {
+            if (!(asset.name in binList)) {
                 return false;
             }
 
-            delete binList[res.name];
+            delete binList[asset.name];
             return true;
 
         case "image":
-            if (!(res.name in imgList)) {
+            if (!(asset.name in imgList)) {
                 return false;
             }
-            delete imgList[res.name];
+            delete imgList[asset.name];
             return true;
 
         case "json":
-            if (!(res.name in jsonList)) {
+            if (!(asset.name in jsonList)) {
                 return false;
             }
 
-            delete jsonList[res.name];
+            delete jsonList[asset.name];
             return true;
 
         case "js":
@@ -284,26 +280,24 @@ export function unload(res) {
 
         case "tmx":
         case "tsx":
-            if (!(res.name in tmxList)) {
+            if (!(asset.name in tmxList)) {
                 return false;
             }
 
-            delete tmxList[res.name];
+            delete tmxList[asset.name];
             return true;
 
         case "audio":
-            return audio.unload(res.name);
+            return audio.unload(asset.name);
 
         default:
-            throw new Error("unload : unknown or invalid resource type : " + res.type);
+            throw new Error("unload : unknown or invalid resource type : " + asset.type);
     }
 }
 
 /**
  * unload all resources to free memory
- * @name unloadAll
  * @memberof loader
- * @public
  * @example me.loader.unloadAll();
  */
 export function unloadAll() {
@@ -355,9 +349,7 @@ export function unloadAll() {
 
 /**
  * return the specified TMX/TSX object
- * @name getTMX
  * @memberof loader
- * @public
  * @param {string} elt - name of the tmx/tsx element ("map1");
  * @returns {object} requested element or null if not found
  */
@@ -372,9 +364,7 @@ export function getTMX(elt) {
 
 /**
  * return the specified Binary object
- * @name getBinary
  * @memberof loader
- * @public
  * @param {string} elt - name of the binary object ("ymTrack");
  * @returns {object} requested element or null if not found
  */
@@ -389,9 +379,7 @@ export function getBinary(elt) {
 
 /**
  * return the specified Image Object
- * @name getImage
  * @memberof loader
- * @public
  * @param {string} image - name of the Image element ("tileset-platformer");
  * @returns {HTMLImageElement} requested element or null if not found
  */
@@ -407,9 +395,7 @@ export function getImage(image) {
 
 /**
  * return the specified JSON Object
- * @name getJSON
  * @memberof loader
- * @public
  * @param {string} elt - name of the json file to load
  * @returns {object}
  */

package/src/physics/bounds.js

@@ -190,7 +190,7 @@ import Vector2d from "./../math/vector2.js";
             this.clear();
         }
         for (let i = 0; i < vertices.length; i++) {
-            let vertex = vertices[i];
+            const vertex = vertices[i];
             if (vertex.x > this.max.x) this.max.x = vertex.x;
             if (vertex.x < this.min.x) this.min.x = vertex.x;
             if (vertex.y > this.max.y) this.max.y = vertex.y;

package/src/physics/detector.js

@@ -170,7 +170,7 @@ export default class Detector {
             if (objB.body && line.getBounds().overlaps(objB.getBounds())) {
 
                 // go trough all defined shapes in B (if any)
-                let bLen = objB.body.shapes.length;
+                const bLen = objB.body.shapes.length;
                 if ( objB.body.shapes.length === 0) {
                     continue;
                 }

package/src/physics/quadtree.js

@@ -352,7 +352,7 @@ let QT_VECTOR = new Vector2d();
      */
     hasChildren() {
         for (let i = 0; i < this.nodes.length; i = i + 1) {
-            let subnode = this.nodes[i];
+            const subnode = this.nodes[i];
             if (subnode.length > 0 || subnode.objects.length > 0) {
                 return true;
             }

package/src/physics/sat.js

@@ -58,7 +58,7 @@ function flattenPointsOn(points, normal, result) {
     let len = points.length;
     for (let i = 0; i < len; i++) {
         // The magnitude of the projection of the point onto the normal
-        let dot = points[i].dot(normal);
+        const dot = points[i].dot(normal);
         if (dot < min) { min = dot; }
         if (dot > max) { max = dot; }
     }
@@ -305,8 +305,8 @@ export function testPolygonEllipse(a, polyA, b, ellipseB, response) {
 
     // For each edge in the polygon:
     for (let i = 0; i < len; i++) {
-        let next = i === len - 1 ? 0 : i + 1;
-        let prev = i === 0 ? len - 1 : i - 1;
+        const next = i === len - 1 ? 0 : i + 1;
+        const prev = i === 0 ? len - 1 : i - 1;
         let overlap = 0;
         let overlapN = null;
 

package/src/renderable/container.js

@@ -193,10 +193,16 @@ let globalFloatingCounter = 0;
             }
         }
 
+        // add the new child
         child.ancestor = this;
         this.getChildren().push(child);
+
+        // update child bounds to reflect the new ancestor
         if (typeof child.updateBounds === "function") {
-            // update child bounds to reflect the new ancestor
+            if (this.isFloating === true) {
+                // only parent container can be floating
+                child.floating = false;
+            }
             child.updateBounds();
         }
 
@@ -217,12 +223,7 @@ let globalFloatingCounter = 0;
             child.onActivateEvent();
         }
 
-        // force repaint in case this is a static non-animated object
-        if (this.isAttachedToRoot() === true) {
-            this.isDirty = true;
-        }
-
-        // force bounds update if required
+        // force container bounds update if required
         if (this.enableChildBoundsUpdate === true) {
             this.updateBounds();
         }
@@ -245,6 +246,9 @@ let globalFloatingCounter = 0;
             }
         }
 
+        // mark the container for repaint
+        this.isDirty = true;
+
         // triggered callback if defined
         this.onChildChange.call(this, this.getChildren().length - 1);
 
@@ -271,20 +275,25 @@ let globalFloatingCounter = 0;
                     child.GUID = utils.createGUID();
                 }
             }
-            child.ancestor = this;
 
+            // add the new child
+            child.ancestor = this;
             this.getChildren().splice(index, 0, child);
 
-            if (typeof child.onActivateEvent === "function" && this.isAttachedToRoot()) {
-                child.onActivateEvent();
+            // update child bounds to reflect the new ancestor
+            if (typeof child.updateBounds === "function") {
+                if (this.isFloating === true) {
+                    // only parent container can be floating
+                    child.floating = false;
+                }
+                child.updateBounds();
             }
 
-            // force repaint in case this is a static non-animated object
-            if (this.isAttachedToRoot() === true) {
-                this.isDirty = true;
+            if (typeof child.onActivateEvent === "function" && this.isAttachedToRoot()) {
+                child.onActivateEvent();
             }
 
-            // force bounds update if required
+            // force container bounds update if required
             if (this.enableChildBoundsUpdate === true) {
                 this.updateBounds();
             }
@@ -307,6 +316,9 @@ let globalFloatingCounter = 0;
                 }
             }
 
+            // mark the container for repaint
+            this.isDirty = true;
+
             // triggered callback if defined
             this.onChildChange.call(this, index);
 
@@ -531,10 +543,9 @@ let globalFloatingCounter = 0;
     }
 
     /**
-     * update the bounding box for this shape.
-     * @ignore
-     * @param {boolean} absolute - update the bounds size and position in (world) absolute coordinates
-     * @returns {Bounds} this shape bounding box Rectangle object
+     * update the bounding box for this container.
+     * @param {boolean} [absolute=true] - update the bounds size and position in (world) absolute coordinates
+     * @returns {Bounds} this container bounding box Rectangle object
      */
     updateBounds(absolute = true) {
         let bounds = this.getBounds();
@@ -545,13 +556,14 @@ let globalFloatingCounter = 0;
         if (this.enableChildBoundsUpdate === true) {
             this.forEach((child) => {
                 if (child.isRenderable) {
-                    let childBounds = child.getBounds();
+                    let childBounds = child.updateBounds(true);
                     if (childBounds.isFinite()) {
                         bounds.addBounds(childBounds);
                     }
                 }
             });
         }
+
         return bounds;
     }
 
@@ -675,16 +687,14 @@ let globalFloatingCounter = 0;
                 child.ancestor = undefined;
             }
 
-            // force repaint in case this is a static non-animated object
-            if (this.isAttachedToRoot() === true) {
-                this.isDirty = true;
-            }
-
             // force bounds update if required
             if (this.enableChildBoundsUpdate === true) {
                 this.updateBounds();
             }
 
+            // mark the container for repaint
+            this.isDirty = true;
+
             // triggered callback if defined
             this.onChildChange.call(this, childIndex);
         }

package/src/renderable/renderable.js

@@ -263,12 +263,12 @@ import Color from "./../math/color.js";
     }
 
     /**
-     * Whether the renderable object is floating, or contained in a floating container
+     * Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container
      * @see Renderable#floating
      * @type {boolean}
      */
     get isFloating() {
-        return this.floating === true || (typeof this.ancestor !== "undefined" && this.ancestor.floating === true);
+        return this.floating === true || (typeof this.ancestor !== "undefined" && this.ancestor.isFloating === true);
     }
 
     /**
@@ -577,11 +577,8 @@ import Color from "./../math/color.js";
             }
 
             if (absolute === true) {
-                bounds.centerOn(this.pos.x + bounds.x + bounds.width / 2,  this.pos.y + bounds.y + bounds.height / 2);
-                if (typeof this.ancestor !== "undefined" && typeof this.ancestor.addChild === "function" && this.floating !== true) {
-                     bounds.translate(this.ancestor.getAbsolutePosition());
-                }
-
+                var absPos = this.getAbsolutePosition();
+                bounds.centerOn(absPos.x + bounds.x + bounds.width / 2,  absPos.y + bounds.y + bounds.height / 2);
             }
             return bounds;
 
@@ -610,7 +607,7 @@ import Color from "./../math/color.js";
           }
           // XXX Cache me or something
           this._absPos.set(this.pos.x, this.pos.y);
-          if (typeof this.ancestor !== "undefined" && typeof this.ancestor.addChild === "function" && this.floating !== true) {
+          if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getAbsolutePosition === "function" && this.floating !== true) {
               this._absPos.add(this.ancestor.getAbsolutePosition());
           }
           return this._absPos;

package/src/renderable/ui/uibaseelement.js

@@ -64,7 +64,7 @@ import pool from "../../system/pooling.js";
 
         /**
          * UI base elements use screen coordinates by default
-         * (Note: any child elements added to a UIBaseElement should set their floating property to false)
+         * (Note: any child elements added to a UIBaseElement should have their floating property to false)
          * @see Renderable.floating
          * @type {boolean}
          * @default true
@@ -76,6 +76,9 @@ import pool from "../../system/pooling.js";
 
         // enable event detection
         this.isKinematic = false;
+
+        // update container and children bounds automatically
+        this.enableChildBoundsUpdate = true;
     }
 
     /**
@@ -110,7 +113,7 @@ import pool from "../../system/pooling.js";
      * @returns {boolean} return false if we need to stop propagating the event
      */
     onClick(event) { // eslint-disable-line no-unused-vars
-        return false;
+        return true;
     }
 
     /**
@@ -203,7 +206,7 @@ import pool from "../../system/pooling.js";
      * @returns {boolean} return false if we need to stop propagating the event
      */
     onRelease() {
-        return false;
+        return true;
     }
 
     /**

package/src/renderable/ui/uispriteelement.js

@@ -73,7 +73,13 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
         this.holdTimeout = -1;
         this.released = true;
 
-        // GUI items use screen coordinates
+        /**
+         * if this UISpriteElement should use screen coordinates or local coordinates
+         * (Note: any UISpriteElement elements added to a floating parent container should have their floating property to false)
+         * @see Renderable.floating
+         * @type {boolean}
+         * @default true
+         */
         this.floating = true;
 
         // enable event detection

package/src/text/bitmaptext.js

@@ -232,7 +232,7 @@ import TextMetrics from "./textmetrics.js";
         }
 
         if (absolute === true) {
-            if (typeof this.ancestor !== "undefined" && typeof this.ancestor.addChild === "function" && this.floating !== true) {
+            if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getAbsolutePosition === "function" && this.floating !== true) {
                  bounds.translate(this.ancestor.getAbsolutePosition());
             }
         }
@@ -311,7 +311,7 @@ import TextMetrics from "./textmetrics.js";
 
         for (let i = 0; i < this._text.length; i++) {
             x = lX;
-            let string = this._text[i].trimEnd();
+            const string = this._text[i].trimEnd();
             // adjust x pos based on alignment value
             let stringWidth = this.metrics.lineWidth(string);
             switch (this.textAlign) {

package/src/text/text.js

@@ -375,7 +375,7 @@ const toPX = [12, 24, 0.75, 1];
         setContextStyle(context, this);
 
         for (let i = 0; i < text.length; i++) {
-            let string = text[i].trimEnd();
+            const string = text[i].trimEnd();
             // draw the string
             if (this.fillStyle.alpha > 0) {
                 context.fillText(string, x, y);

package/src/video/canvas/canvas_renderer.js

@@ -392,9 +392,8 @@ import * as event from "./../../system/event.js";
         this.translate(poly.pos.x, poly.pos.y);
         context.beginPath();
         context.moveTo(poly.points[0].x, poly.points[0].y);
-        let point;
         for (let i = 1; i < poly.points.length; i++) {
-            point = poly.points[i];
+            const point = poly.points[i];
             context.lineTo(point.x, point.y);
         }
         context.lineTo(poly.points[0].x, poly.points[0].y);
@@ -689,11 +688,9 @@ import * as event from "./../../system/event.js";
         } else {
             // polygon
             const _x = mask.pos.x, _y = mask.pos.y;
-            let point;
-
             context.moveTo(_x + mask.points[0].x, _y + mask.points[0].y);
             for (let i = 1; i < mask.points.length; i++) {
-                point = mask.points[i];
+                const point = mask.points[i];
                 context.lineTo(_x + point.x, _y + point.y);
             }
         }

package/src/video/texture/canvas_texture.js

@@ -38,7 +38,7 @@ class CanvasTexture {
          * the rendering context of this CanvasTexture
          * @type {CanvasRenderingContext2D}
          */
-        this.context = this.canvas.getContext("2d", { willReadFrequently: attributes.willReadFrequently });
+        this.context = this.canvas.getContext(attributes.context, { willReadFrequently: attributes.willReadFrequently });
 
         // enable or disable antiAlias if specified
         this.setAntiAlias(attributes.antiAlias);

package/src/video/video.js

@@ -155,7 +155,7 @@ export function createCanvas(width, height, returnOffscreenCanvas = false) {
         throw new Error("width or height was zero, Canvas could not be initialized !");
     }
 
-    if (device.hasOffscreenCanvas === true && returnOffscreenCanvas === true) {
+    if (device.offscreenCanvas === true && returnOffscreenCanvas === true) {
         _canvas = new globalThis.OffscreenCanvas(0, 0);
         // stubbing style for compatibility,
         // as OffscreenCanvas is detached from the DOM