melonjs 10.11.0 → 12.0.0

package/src/renderable/dragndrop.js

@@ -198,7 +198,7 @@ export class DropTarget extends Renderable {
      * @memberof DropTarget
      * @param {Draggable} draggable the draggable object that is dropped
      */
-    drop() {
+    drop(draggable) {  // eslint-disable-line no-unused-vars
 
     }
 

package/src/renderable/imagelayer.js

@@ -164,7 +164,7 @@ class ImageLayer extends Sprite {
      * @param {number} h new height
      */
     resize(w, h) {
-        super.resize(
+        return super.resize(
             this.repeatX ? Infinity : w,
             this.repeatY ? Infinity : h
         );
@@ -243,14 +243,14 @@ class ImageLayer extends Sprite {
     }
 
     /**
-     * draw the ImageLayer. <br>
-     * automatically called by the game manager {@link game}
+     * draw this ImageLayer (automatically called by melonJS)
      * @name draw
      * @memberof ImageLayer
      * @protected
-     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer) {
+    draw(renderer, viewport) {
         var width = this.width,
             height = this.height,
             bw = viewport.bounds.width,

package/src/renderable/light2d.js

@@ -4,19 +4,41 @@ import Renderable from "./renderable.js";
 /** @ignore */
 function createGradient(light) {
     var context = light.texture.context;
-    var x1 = light.texture.width / 2;
-    var y1 = light.texture.height / 2;
-    var gradient = context.createRadialGradient(x1, y1, 0, x1, y1, light.radius);
+
+    var x1 = light.texture.width / 2,
+        y1 = light.texture.height / 2;
+
+    var radiusX = light.radiusX,
+        radiusY = light.radiusY;
+
+    var scaleX, scaleY, invScaleX, invScaleY;
+    var gradient;
+
 
     light.texture.clear();
 
+    if (radiusX >= radiusY) {
+        scaleX = 1;
+        invScaleX = 1;
+        scaleY = radiusY/radiusX;
+        invScaleY = radiusX/radiusY;
+        gradient = context.createRadialGradient(x1, y1 * invScaleY, 0, x1, radiusY * invScaleY, radiusX);
+    }
+    else {
+        scaleY = 1;
+        invScaleY = 1;
+        scaleX = radiusX/radiusY;
+        invScaleX = radiusY/radiusX;
+        gradient = context.createRadialGradient(x1 * invScaleX, y1, 0, x1 * invScaleX, y1, radiusY);
+    }
+
     gradient.addColorStop( 0, light.color.toRGBA(light.intensity));
     gradient.addColorStop( 1, light.color.toRGBA(0.0));
 
-    context.beginPath();
     context.fillStyle = gradient;
-    context.arc(x1, y1, light.radius, 0, Math.PI * 2, false);
-    context.fill();
+
+    context.setTransform(scaleX, 0, 0, scaleY, 0, 0);
+    context.fillRect(0, 0, light.texture.width * invScaleX, light.texture.height * invScaleY);
 }
 
 /**
@@ -31,13 +53,14 @@ class Light2d extends Renderable {
    /**
     * @param {number} x - The horizontal position of the light.
     * @param {number} y - The vertical position of the light.
-    * @param {number} radius - The radius of the light.
+    * @param {number} radiusX - The horizontal radius of the light.
+    * @param {number} [radiusY=radiusX] - The vertical radius of the light.
     * @param {Color|string} [color="#FFF"] the color of the light
     * @param {number} [intensity=0.7] - The intensity of the light.
     */
-    constructor(x, y, radius, color = "#FFF", intensity = 0.7) {
+    constructor(x, y, radiusX, radiusY = radiusX, color = "#FFF", intensity = 0.7) {
         // call the parent constructor
-        super(x, y, radius * 2, radius * 2);
+        super(x, y, radiusX * 2, radiusY * 2);
 
         /**
          * the color of the light
@@ -47,10 +70,16 @@ class Light2d extends Renderable {
         this.color = pool.pull("Color").parseCSS(color);
 
         /**
-         * The radius of the light
+         * The horizontal radius of the light
          * @type {number}
          */
-        this.radius = radius;
+        this.radiusX = radiusX;
+
+        /**
+         * The vertical radius of the light
+         * @type {number}
+         */
+        this.radiusY = radiusY;
 
         /**
          * The intensity of the light
@@ -90,10 +119,14 @@ class Light2d extends Renderable {
     }
 
     /**
-     * object draw (Called internally by the engine).
-     * @ignore
+     * draw this Light2d (automatically called by melonJS)
+     * @name draw
+     * @memberof Light2d
+     * @protected
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer) {
+    draw(renderer, viewport) {   // eslint-disable-line no-unused-vars
         renderer.drawImage(this.texture.canvas, this.getBounds().x, this.getBounds().y);
     }
 

package/src/renderable/renderable.js

@@ -735,14 +735,14 @@ class Renderable extends Rect {
     }
 
     /**
-     * object draw. <br>
-     * automatically called by the game manager {@link game}
+     * draw this renderable (automatically called by melonJS)
      * @name draw
      * @memberof Renderable
      * @protected
-     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer) {  // eslint-disable-line no-unused-vars
+    draw(renderer, viewport) {  // eslint-disable-line no-unused-vars
         // empty one !
     }
 
@@ -775,7 +775,7 @@ class Renderable extends Rect {
      * when this renderable body is colliding with another one
      * @name onCollision
      * @memberof Renderable
-     * @param {collision.ResponseObject} response the collision response object
+     * @param {ResponseObject} response the collision response object
      * @param {Renderable} other the other renderable touching this one (a reference to response.a or response.b)
      * @returns {boolean} true if the object should respond to the collision (its position and velocity will be corrected)
      * @example
@@ -792,7 +792,7 @@ class Renderable extends Rect {
      *     return true;
      * },
      */
-    onCollision() {
+    onCollision(response, other) { // eslint-disable-line no-unused-vars
         return false;
     }
 

package/src/renderable/sprite.js

@@ -586,14 +586,14 @@ class Sprite extends Renderable {
     }
 
     /**
-     * sprite draw. <br>
-     * automatically called by the game manager {@link game}
+     * draw this srite (automatically called by melonJS)
      * @name draw
      * @memberof Sprite
      * @protected
-     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer) {
+    draw(renderer, viewport) {   // eslint-disable-line no-unused-vars
         // do nothing if we are flickering
         if (this._flicker.isFlickering) {
             this._flicker.state = !this._flicker.state;

package/src/renderable/trigger.js

@@ -129,8 +129,15 @@ class Trigger extends Renderable {
         }
     }
 
-    /** @ignore */
-    onCollision() {
+    /**
+     * onCollision callback, triggered in case of collision with this trigger
+     * @name onCollision
+     * @memberof Trigger
+     * @param {ResponseObject} response the collision response object
+     * @param {Renderable} other the other renderable touching this one (a reference to response.a or response.b)
+     * @returns {boolean} true if the object should respond to the collision (its position and velocity will be corrected)
+     */
+    onCollision(response, other) { // eslint-disable-line no-unused-vars
         if (this.name === "Trigger") {
             this.triggerEvent.apply(this);
         }

package/src/state/state.js

@@ -426,6 +426,24 @@ var state = {
         }
     },
 
+    /**
+     * returns the stage associated with the specified state
+     * (or the current one if none is specified)
+     * @name set
+     * @memberof state
+     * @public
+     * @param {number} [state] State ID (see constants)
+     * @returns {Stage}
+     */
+    get(state = _state) {
+        if (typeof _stages[state] !== "undefined") {
+            return _stages[state].stage;
+        } else {
+            return undefined;
+        }
+
+    },
+
     /**
      * return a reference to the current stage<br>
      * useful to call a object specific method
@@ -435,9 +453,7 @@ var state = {
      * @returns {Stage}
      */
     current() {
-        if (typeof _stages[_state] !== "undefined") {
-            return _stages[_state].stage;
-        }
+        return this.get();
     },
 
     /**

package/src/system/device.js

@@ -4,6 +4,7 @@ import save from "./save.js";
 import { prefixed } from "./../utils/agent.js";
 import state from "./../state/state.js";
 import * as event from "./event.js";
+import { DOMContentLoaded } from "./dom.js";
 
 // private properties
 let accelInitialized = false;
@@ -23,45 +24,6 @@ function _disableSwipeFn(e) {
     return false;
 };
 
-// DOM loading stuff
-let readyBound = false, isReady = false, readyList = [];
-
-/**
- * // called to check if the device is ready
- * @ignore
- */
-function _domReady() {
-    // Make sure that the DOM is not already loaded
-    if (!isReady) {
-        // be sure document.body is there
-        if (typeof globalThis.document !== "undefined" && !globalThis.document.body) {
-            return setTimeout(_domReady, 13);
-        }
-
-        // clean up loading event
-        if (typeof globalThis.document !== "undefined" && typeof globalThis.document.removeEventListener === "function") {
-            globalThis.document.removeEventListener(
-                "DOMContentLoaded",
-                this._domReady,
-                false
-            );
-        }
-
-        if (typeof globalThis.removeEventListener === "function") {
-            // remove the event on globalThis.onload (always added in `onReady`)
-            globalThis.removeEventListener("load", _domReady, false);
-        }
-
-        // execute all callbacks
-        while (readyList.length) {
-            readyList.shift().call(globalThis, []);
-        }
-
-        // Remember that the DOM is ready
-        isReady = true;
-    }
-};
-
 // a cache DOMRect object
 let _domRect = {left: 0, top: 0, x: 0, y: 0, width: 0, height: 0, right: 0, bottom: 0};
 
@@ -418,7 +380,7 @@ let device = {
      * @readonly
      * @name nodeJS
      */
-    nodeJS : (typeof process !== "undefined") && (process.release.name === "node"),
+    nodeJS : (typeof globalThis.process !== "undefined") && (typeof globalThis.process.release !== "undefined") && (globalThis.process.release.name === "node"),
 
     /**
      * equals to true if the device is running on ChromeOS.
@@ -606,33 +568,7 @@ let device = {
     * });
     */
     onReady(fn) {
-        // If the DOM is already ready
-        if (isReady) {
-            // Execute the function immediately
-            fn.call(globalThis, []);
-        }
-        else {
-            // Add the function to the wait list
-            readyList.push(fn);
-
-            // attach listeners if not yet done
-            if (!readyBound) {
-                // directly call domReady if document is already "ready"
-                if (device.nodeJS === true || (typeof globalThis.document !== "undefined" && globalThis.document.readyState === "complete")) {
-                    // defer the fn call to ensure our script is fully loaded
-                    globalThis.setTimeout(_domReady, 0);
-                }
-                else {
-                    if (typeof globalThis.document !== "undefined" && typeof globalThis.document.addEventListener === "function") {
-                        // Use the handy event callback
-                        globalThis.document.addEventListener("DOMContentLoaded", _domReady, false);
-                    }
-                    // A fallback to globalThis.onload, that will always work
-                    globalThis.addEventListener("load", _domReady, false);
-                }
-                readyBound = true;
-            }
-        }
+        DOMContentLoaded(fn);
     },
 
     /**

package/src/system/dom.js

@@ -0,0 +1,69 @@
+import * as event from "./event.js";
+
+// track if DOMContentLoaded was called already
+let readyBound = false;
+
+// is the DOM ready ?
+let isDOMReady = false;
+
+// check if the dom is ready
+function _domReady() {
+
+    // Make sure that the DOM is not already loaded
+    if (!isDOMReady) {
+        // be sure document.body is there
+        if (typeof globalThis.document !== "undefined" && !globalThis.document.body) {
+            return setTimeout(_domReady, 13);
+        }
+
+        // clean up loading event
+        if (typeof globalThis.document !== "undefined" && typeof globalThis.document.removeEventListener === "function") {
+            globalThis.document.removeEventListener(
+                "DOMContentLoaded",
+                _domReady,
+                false
+            );
+        }
+
+        if (typeof globalThis.removeEventListener === "function") {
+            // remove the event on globalThis.onload (always added in `onReady`)
+            globalThis.removeEventListener("load", _domReady, false);
+        }
+
+        // execute all callbacks
+        event.emit(event.DOM_READY);
+
+        // Remember that the DOM is ready
+        isDOMReady = true;
+    }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
+export function DOMContentLoaded(fn) {
+    // If the DOM is already ready
+    if (isDOMReady) {
+        // Execute the function immediately
+        fn.call(globalThis, []);
+    }
+    else {
+        // else add the function to the DOM_READY event
+        event.once(event.DOM_READY, fn, globalThis);
+        // bind dom load event if not done yet
+        if (!readyBound) {
+            // directly call domReady if document is already "ready"
+            if (((typeof process !== "undefined") && (process.release.name === "node")) || (typeof globalThis.document !== "undefined" && globalThis.document.readyState === "complete")) {
+                // defer the fn call to ensure our script is fully loaded
+                globalThis.setTimeout(_domReady, 0);
+            }
+            else {
+                if (typeof globalThis.document !== "undefined" && typeof globalThis.document.addEventListener === "function") {
+                    // Use the handy event callback
+                    globalThis.document.addEventListener("DOMContentLoaded", _domReady, false);
+                }
+                // A fallback to globalThis.onload, that will always work
+                globalThis.addEventListener("load", _domReady, false);
+            }
+            readyBound = true;
+        }
+    }
+}

package/src/system/event.js

@@ -8,6 +8,17 @@ import EventEmitter from "eventemitter3";
 // internal instance of the event emiter
 var eventEmitter = new EventEmitter();
 
+/**
+ * event when the DOM is Ready is booting
+ * @public
+ * @constant
+ * @type {string}
+ * @name DOM_READY
+ * @memberof event
+ * @see event.on
+ */
+export const DOM_READY = "dom_ready";
+
 /**
  * event when the system is booting
  * @public

package/src/system/pooling.js

@@ -167,7 +167,7 @@ class ObjectPool {
         return (typeof className !== "undefined") &&
                 (typeof obj.onResetEvent === "function") &&
                 (className in this.objectClass) &&
-                (this.objectClass[className].pool !== "undefined");
+                (typeof this.objectClass[className].pool !== "undefined");
 
     }
 

package/src/text/bitmaptext.js

@@ -1,5 +1,4 @@
 import Color from "./../math/color.js";
-import * as stringUtil from "./../utils/string.js";
 import pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
 import Renderable from "./../renderable/renderable.js";
@@ -254,7 +253,7 @@ class BitmapText extends Renderable {
 
         for (var i = 0; i < this._text.length; i++) {
             x = lX;
-            var string = stringUtil.trimRight(this._text[i]);
+            var string = this._text[i].trimRight();
             // adjust x pos based on alignment value
             var stringWidth = this.metrics.lineWidth(string);
             switch (this.textAlign) {

package/src/text/text.js

@@ -1,7 +1,6 @@
 import Color from "./../math/color.js";
 import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
 import { renderer as globalRenderer } from "./../video/video.js";
-import { trimRight } from "./../utils/string.js";
 import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import { nextPowerOfTwo } from "./../math/math.js";
@@ -25,6 +24,9 @@ var getContext2d = function (renderer, text) {
     if (text.offScreenCanvas === true) {
         return text.canvasTexture.context;
     } else {
+        if (typeof renderer === "undefined") {
+            renderer = globalRenderer;
+        }
         return renderer.getFontContext();
     }
 };
@@ -333,11 +335,11 @@ class Text extends Renderable {
 
     /**
      * measure the given text size in pixels
-     * @param {CanvasRenderer|WebGLRenderer} [renderer] reference to the active renderer
+     * @param {CanvasRenderer|WebGLRenderer} renderer reference to the active renderer
      * @param {string} [text] the text to be measured
      * @returns {TextMetrics} a TextMetrics object defining the dimensions of the given piece of text
      */
-    measureText(renderer = globalRenderer, text = this._text) {
+    measureText(renderer, text = this._text) {
         return this.metrics.measureText(text, getContext2d(renderer, this));
     }
 
@@ -350,7 +352,7 @@ class Text extends Renderable {
      * @param {number} [y]
      * @param {boolean} [stroke=false] draw stroke the the text if true
      */
-    draw(renderer, text, x, y, stroke) {
+    draw(renderer, text, x = this.pos.x, y = this.pos.y, stroke = false) {
         // "hacky patch" for backward compatibilty
         if (typeof this.ancestor === "undefined") {
 
@@ -420,7 +422,7 @@ class Text extends Renderable {
         setContextStyle(context, this, stroke);
 
         for (var i = 0; i < text.length; i++) {
-            var string = trimRight(text[i]);
+            var string = text[i].trimRight();
             // draw the string
             context[stroke ? "strokeText" : "fillText"](string, x, y);
             // add leading space

package/src/text/textmetrics.js

@@ -1,5 +1,4 @@
 import Bounds from "./../physics/bounds.js";
-import { trimRight } from "./../utils/string.js";
 import Text from "./text.js";
 import setContextStyle from "./textstyle.js";
 
@@ -92,7 +91,7 @@ class TextMetrics extends Bounds {
         this.width = this.height = 0;
 
         for (var i = 0; i < strings.length; i++) {
-            this.width = Math.max(this.lineWidth(trimRight(strings[i]), context), this.width);
+            this.width = Math.max(this.lineWidth(strings[i].trimRight(), context), this.width);
             this.height += this.lineHeight();
         }
         this.width = Math.ceil(this.width);

package/src/utils/string.js

@@ -15,30 +15,6 @@ export function capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
 };
 
-/**
- * returns the string stripped of whitespace from the left.
- * @public
- * @memberof utils.string
- * @name trimLeft
- * @param {string} str the string to be trimmed
- * @returns {string} trimmed string
- */
-export function trimLeft(str) {
-    return str.replace(/^\s+/, "");
-};
-
-/**
- * returns the string stripped of whitespace from the right.
- * @public
- * @memberof utils.string
- * @name trimRight
- * @param {string} str the string to be trimmed
- * @returns {string} trimmed string
- */
-export function trimRight(str) {
-    return str.replace(/\s+$/, "");
-};
-
 /**
  * returns true if the given string contains a numeric integer or float value
  * @public

package/src/video/texture/atlas.js

@@ -381,6 +381,8 @@ export class TextureAtlas {
      * add uvs mapping for the given region
      * @param {object} atlas the atlas dictionnary where the region is define
      * @param {object} name region (or frame) name
+     * @param {number} w the width of the region
+     * @param {number} h the height of the region
      * @returns {Float32Array} the created region UVs
      */
     addUVs(atlas, name, w, h) {