melonjs 14.5.0 → 15.1.0

package/dist/melonjs.mjs/renderable/container.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -64,12 +64,12 @@ let globalFloatingCounter = 0;
         this.children = undefined;
 
         /**
-         * The property of the child object that should be used to sort on <br>
+         * The property of the child object that should be used to sort on this container
          * value : "x", "y", "z"
          * @type {string}
-         * @default me.game.sortOn
+         * @default "z"
          */
-        this.sortOn = game.sortOn;
+        this.sortOn = "z";
 
         /**
          * Specify if the children list should be automatically sorted when adding a new child
@@ -157,8 +157,8 @@ let globalFloatingCounter = 0;
         }
 
         // delete all children
-        var children = this.getChildren();
-        for (var i = children.length, child; i >= 0; (child = children[--i])) {
+        let children = this.getChildren();
+        for (let i = children.length, child; i >= 0; (child = children[--i])) {
             // don't remove it if a persistent object
             if (child && child.isPersistent !== true) {
                 this.removeChildNow(child);
@@ -177,9 +177,9 @@ let globalFloatingCounter = 0;
      * Add a child to the container <br>
      * if auto-sort is disable, the object will be appended at the bottom of the list.
      * Adding a child to the container will automatically remove it from its other container.
-     * Meaning a child can only have one parent.  This is important if you add a renderable
-     * to a container then add it to the me.game.world container it will move it out of the
-     * orginal container. Then when the me.game.world.reset() is called the renderable
+     * Meaning a child can only have one parent. This is important if you add a renderable
+     * to a container then add it to the World container it will move it out of the
+     * orginal container. Then when the World container reset() method is called the renderable
      * will not be in any container. <br>
      * if the given child implements a onActivateEvent method, that method will be called
      * once the child is added to this container.
@@ -226,7 +226,7 @@ let globalFloatingCounter = 0;
 
         // force repaint in case this is a static non-animated object
         if (this.isAttachedToRoot() === true) {
-            game.repaint();
+            this.isDirty = true;
         }
 
         // force bounds update if required
@@ -236,7 +236,7 @@ let globalFloatingCounter = 0;
 
         // if a physic body is defined, add it to the game world
         if (child.body instanceof Body) {
-            game.world.addBody(child.body);
+            this.getRootAncestor().addBody(child.body);
         }
 
         // triggered callback if defined
@@ -275,7 +275,7 @@ let globalFloatingCounter = 0;
 
             // force repaint in case this is a static non-animated object
             if (this.isAttachedToRoot() === true) {
-                game.repaint();
+                this.isDirty = true;
             }
 
             // force bounds update if required
@@ -285,7 +285,7 @@ let globalFloatingCounter = 0;
 
             // if a physic body is defined, add it to the game world
             if (child.body instanceof Body) {
-                game.world.addBody(child.body);
+                this.getRootAncestor().addBody(child.body);
             }
 
             // triggered callback if defined
@@ -307,20 +307,20 @@ let globalFloatingCounter = 0;
      * @param {Function} callback - fnction to execute on each element
      * @param {object} [thisArg] - value to use as this(i.e reference Object) when executing callback.
      * @example
-     * // iterate through all children of the root container
-     * me.game.world.forEach((child) => {
+     * // iterate through all children of this container
+     * container.forEach((child) => {
      *    // do something with the child
      *    child.doSomething();
      * });
-     * me.game.world.forEach((child, index) => { ... });
-     * me.game.world.forEach((child, index, array) => { ... });
-     * me.game.world.forEach((child, index, array) => { ... }, thisArg);
+     * container.forEach((child, index) => { ... });
+     * container.forEach((child, index, array) => { ... });
+     * container.forEach((child, index, array) => { ... }, thisArg);
      */
     forEach(callback, thisArg) {
-        var context = this, i = 0;
-        var children = this.getChildren();
+        let context = this, i = 0;
+        let children = this.getChildren();
 
-        var len = children.length;
+        let len = children.length;
 
         if (typeof callback !== "function") {
             throw new Error(callback + " is not a function");
@@ -342,12 +342,12 @@ let globalFloatingCounter = 0;
      * @param {Renderable} child2
      */
     swapChildren(child, child2) {
-        var index = this.getChildIndex(child);
-        var index2 = this.getChildIndex(child2);
+        let index = this.getChildIndex(child);
+        let index2 = this.getChildIndex(child2);
 
         if ((index !== -1) && (index2 !== -1)) {
             // swap z index
-            var _z = child.pos.z;
+            let _z = child.pos.z;
             child.pos.z = child2.pos.z;
             child2.pos.z = _z;
             // swap the positions..
@@ -390,7 +390,7 @@ let globalFloatingCounter = 0;
      * @returns {Renderable} child
      */
     getNextChild(child) {
-        var index = this.getChildren().indexOf(child) - 1;
+        let index = this.getChildren().indexOf(child) - 1;
         if (index >= 0 && index < this.getChildren().length) {
             return this.getChildAt(index);
         }
@@ -415,27 +415,27 @@ let globalFloatingCounter = 0;
      * @returns {Renderable[]} Array of childs
      * @example
      * // get the first child object called "mainPlayer" in a specific container :
-     * var ent = myContainer.getChildByProp("name", "mainPlayer");
+     * let ent = myContainer.getChildByProp("name", "mainPlayer");
      *
      * // or query the whole world :
-     * var ent = me.game.world.getChildByProp("name", "mainPlayer");
+     * let ent = container.getChildByProp("name", "mainPlayer");
      *
      * // partial property matches are also allowed by using a RegExp.
      * // the following matches "redCOIN", "bluecoin", "bagOfCoins", etc :
-     * var allCoins = me.game.world.getChildByProp("name", /coin/i);
+     * let allCoins = container.getChildByProp("name", /coin/i);
      *
      * // searching for numbers or other data types :
-     * var zIndex10 = me.game.world.getChildByProp("z", 10);
-     * var inViewport = me.game.world.getChildByProp("inViewport", true);
+     * let zIndex10 = container.getChildByProp("z", 10);
+     * let inViewport = container.getChildByProp("inViewport", true);
      */
     getChildByProp(prop, value)    {
-        var objList = [];
+        let objList = [];
 
         /**
          * @ignore
          */
         function compare(obj, prop) {
-            var v = obj[prop];
+            let v = obj[prop];
             if (value instanceof RegExp && typeof(v) === "string") {
                 if (value.test(v)) {
                     objList.push(obj);
@@ -462,7 +462,7 @@ let globalFloatingCounter = 0;
      * @returns {Renderable[]} Array of children
      */
     getChildByType(classType) {
-        var objList = [];
+        let objList = [];
 
         this.forEach((child) => {
             if (child instanceof classType) {
@@ -496,7 +496,7 @@ let globalFloatingCounter = 0;
      * @returns {Renderable} corresponding child or null
      */
     getChildByGUID(guid) {
-        var obj = this.getChildByProp("GUID", guid);
+        let obj = this.getChildByProp("GUID", guid);
         return (obj.length > 0) ? obj[0] : null;
     }
 
@@ -518,7 +518,7 @@ let globalFloatingCounter = 0;
      * @returns {Bounds} this shape bounding box Rectangle object
      */
     updateBounds(absolute = true) {
-        var bounds = this.getBounds();
+        let bounds = this.getBounds();
 
         // call parent method
         super.updateBounds(absolute);
@@ -526,7 +526,7 @@ let globalFloatingCounter = 0;
         if (this.enableChildBoundsUpdate === true) {
             this.forEach((child) => {
                 if (child.isRenderable) {
-                    var childBounds = child.getBounds();
+                    let childBounds = child.getBounds();
                     if (childBounds.isFinite()) {
                         bounds.addBounds(childBounds);
                     }
@@ -538,14 +538,13 @@ let globalFloatingCounter = 0;
 
     /**
      * Checks if this container is root or if it's attached to the root container.
-     * @private
      * @returns {boolean}
      */
     isAttachedToRoot() {
         if (this.root === true) {
             return true;
         } else {
-            var ancestor = this.ancestor;
+            let ancestor = this.ancestor;
             while (ancestor) {
                 if (ancestor.root === true) {
                     return true;
@@ -556,6 +555,25 @@ let globalFloatingCounter = 0;
         }
     }
 
+    /**
+     * Returns the instance of the root container (i.e. the current application World container).
+     * @returns {Container}
+     */
+    getRootAncestor() {
+        if (this.root === true) {
+            return this;
+        } else {
+            let ancestor = this.ancestor;
+            while (ancestor) {
+                if (ancestor.root === true) {
+                    break;
+                }
+                ancestor = ancestor.ancestor;
+            }
+            return ancestor;
+        }
+    }
+
     /**
      * update the cointainer's bounding rect (private)
      * @ignore
@@ -617,7 +635,7 @@ let globalFloatingCounter = 0;
             // remove the body first to avoid a condition where a body can be detached
             // from its parent, before the body is removed from the game world
             if (child.body instanceof Body) {
-                game.world.removeBody(child.body);
+               this.getRootAncestor().removeBody(child.body);
             }
 
             if (!keepalive) {
@@ -632,7 +650,7 @@ let globalFloatingCounter = 0;
 
             // Don't cache the child index; another element might have been removed
             // by the child's `onDeactivateEvent` or `destroy` methods
-            var childIndex = this.getChildIndex(child);
+            let childIndex = this.getChildIndex(child);
             if (childIndex >= 0) {
                 this.getChildren().splice(childIndex, 1);
                 child.ancestor = undefined;
@@ -640,7 +658,7 @@ let globalFloatingCounter = 0;
 
             // force repaint in case this is a static non-animated object
             if (this.isAttachedToRoot() === true) {
-                game.repaint();
+                this.isDirty = true;
             }
 
             // force bounds update if required
@@ -673,7 +691,7 @@ let globalFloatingCounter = 0;
      * @param {Renderable} child
      */
     moveUp(child) {
-        var childIndex = this.getChildIndex(child);
+        let childIndex = this.getChildIndex(child);
         if (childIndex - 1 >= 0) {
             // note : we use an inverted loop
             this.swapChildren(child, this.getChildAt(childIndex - 1));
@@ -687,7 +705,7 @@ let globalFloatingCounter = 0;
      * @param {Renderable} child
      */
     moveDown(child) {
-        var childIndex = this.getChildIndex(child);
+        let childIndex = this.getChildIndex(child);
         if (childIndex >= 0 && (childIndex + 1) < this.getChildren().length) {
             // note : we use an inverted loop
             this.swapChildren(child, this.getChildAt(childIndex + 1));
@@ -701,9 +719,9 @@ let globalFloatingCounter = 0;
      * @param {Renderable} child
      */
     moveToTop(child) {
-        var childIndex = this.getChildIndex(child);
+        let childIndex = this.getChildIndex(child);
         if (childIndex > 0) {
-            var children = this.getChildren();
+            let children = this.getChildren();
             // note : we use an inverted loop
             children.splice(0, 0, children.splice(childIndex, 1)[0]);
             // increment our child z value based on the previous child depth
@@ -718,8 +736,8 @@ let globalFloatingCounter = 0;
      * @param {Renderable} child
      */
     moveToBottom(child) {
-        var childIndex = this.getChildIndex(child);
-        var children = this.getChildren();
+        let childIndex = this.getChildIndex(child);
+        let children = this.getChildren();
         if (childIndex >= 0 && childIndex < (children.length - 1)) {
             // note : we use an inverted loop
             children.splice((children.length - 1), 0, children.splice(childIndex, 1)[0]);
@@ -753,7 +771,7 @@ let globalFloatingCounter = 0;
                 // clear the defer id
                 this.pendingSort = null;
                 // make sure we redraw everything
-                game.repaint();
+                this.isDirty = true;
             }, this);
         }
     }
@@ -793,7 +811,7 @@ let globalFloatingCounter = 0;
         if (!b.pos || !a.pos) {
             return (a.pos ? -Infinity : Infinity);
         }
-        var result = b.pos.z - a.pos.z;
+        let result = b.pos.z - a.pos.z;
         return (result ? result : (b.pos.x - a.pos.x));
     }
 
@@ -805,7 +823,7 @@ let globalFloatingCounter = 0;
         if (!b.pos || !a.pos) {
             return (a.pos ? -Infinity : Infinity);
         }
-        var result = b.pos.z - a.pos.z;
+        let result = b.pos.z - a.pos.z;
         return (result ? result : (b.pos.y - a.pos.y));
     }
 
@@ -822,17 +840,17 @@ let globalFloatingCounter = 0;
 
     /**
      * container update function. <br>
-     * automatically called by the game manager {@link game}
+     * automatically called by the application update loop {@link Application}
      * @protected
      * @param {number} dt - time since the last update in milliseconds.
      * @returns {boolean} true if the Container is dirty
      */
     update(dt) {
-        var isFloating = false;
-        var isPaused = state.isPaused();
-        var children = this.getChildren();
+        let isFloating = false;
+        let isPaused = state.isPaused();
+        let children = this.getChildren();
 
-        for (var i = children.length, obj; i--, (obj = children[i]);) {
+        for (let i = children.length, obj; i--, (obj = children[i]);) {
             if (isPaused && (!obj.updateWhenPaused)) {
                 // skip this object
                 continue;
@@ -877,8 +895,8 @@ let globalFloatingCounter = 0;
      * @param {Camera2d} [viewport] - the viewport to (re)draw
      */
     draw(renderer, viewport) {
-        var isFloating = false;
-        var bounds = this.getBounds();
+        let isFloating = false;
+        let bounds = this.getBounds();
 
         this.drawCount = 0;
 
@@ -900,8 +918,8 @@ let globalFloatingCounter = 0;
             renderer.clearColor(this.backgroundColor);
         }
 
-        var children = this.getChildren();
-        for (var i = children.length, obj; i--, (obj = children[i]);) {
+        let children = this.getChildren();
+        for (let i = children.length, obj; i--, (obj = children[i]);) {
             if (obj.isRenderable) {
 
                 isFloating = obj.floating === true;

package/dist/melonjs.mjs/renderable/dragndrop.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -43,10 +43,10 @@ class Draggable extends Renderable {
      * @private
      */
     initEvents() {
-        registerPointerEvent("pointerdown", this, (e) => { emit(DRAGSTART, e, this); });
-        registerPointerEvent("pointerup", this,  (e) => { emit(DRAGEND, e, this); });
-        registerPointerEvent("pointercancel", this, (e) => { emit(DRAGEND, e, this); });
-        on(POINTERMOVE, this.dragMove.bind(this));
+        registerPointerEvent("pointerdown", this, (e) => emit(DRAGSTART, e, this));
+        registerPointerEvent("pointerup", this,  (e) => emit(DRAGEND, e, this));
+        registerPointerEvent("pointercancel", this, (e) => emit(DRAGEND, e, this));
+        on(POINTERMOVE, (e) => this.dragMove(e));
         on(DRAGSTART, (e, draggable) => {
             if (draggable === this) {
                 this.dragStart(e);

package/dist/melonjs.mjs/renderable/imagelayer.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -189,7 +189,7 @@ import { isNumeric } from '../utils/string.js';
      * @ignore
      */
     updateLayer(vpos) {
-        var rx = this.ratio.x,
+        const rx = this.ratio.x,
             ry = this.ratio.y;
 
         if (rx === 0 && ry === 0) {
@@ -197,7 +197,7 @@ import { isNumeric } from '../utils/string.js';
             return;
         }
 
-        var width = this.width,
+        const width = this.width,
             height = this.height,
             bw = game.viewport.bounds.width,
             bh = game.viewport.bounds.height,
@@ -263,13 +263,14 @@ import { isNumeric } from '../utils/string.js';
      * @param {Camera2d} [viewport] - the viewport to (re)draw
      */
     draw(renderer, viewport) {
-        var width = this.width,
+        const width = this.width,
             height = this.height,
             bw = viewport.bounds.width,
             bh = viewport.bounds.height,
             ax = this.anchorPoint.x,
-            ay = this.anchorPoint.y,
-            x = this.pos.x,
+            ay = this.anchorPoint.y;
+
+        let x = this.pos.x,
             y = this.pos.y;
 
         if (this.ratio.x === 0 && this.ratio.y === 0) {

package/dist/melonjs.mjs/renderable/light2d.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -10,16 +10,16 @@ import Renderable from './renderable.js';
 
 /** @ignore */
 function createGradient(light) {
-    var context = light.texture.context;
+    let context = light.texture.context;
 
-    var x1 = light.texture.width / 2,
+    let x1 = light.texture.width / 2,
         y1 = light.texture.height / 2;
 
-    var radiusX = light.radiusX,
+    let radiusX = light.radiusX,
         radiusY = light.radiusY;
 
-    var scaleX, scaleY, invScaleX, invScaleY;
-    var gradient;
+    let scaleX, scaleY, invScaleX, invScaleY;
+    let gradient;
 
 
     light.texture.clear();

package/dist/melonjs.mjs/renderable/nineslicesprite.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -93,18 +93,18 @@ import Sprite from './sprite.js';
      */
     draw(renderer) {
         // the frame to draw
-        var frame = this.current;
+        let frame = this.current;
 
         // cache the current position and size
-        var dx = this.pos.x,
+        let dx = this.pos.x,
             dy = this.pos.y;
 
-        var w = frame.width,
+        let w = frame.width,
             h = frame.height;
 
         // frame offset in the texture/atlas
-        var frame_offset = frame.offset;
-        var g_offset = this.offset;
+        let frame_offset = frame.offset;
+        let g_offset = this.offset;
 
 
         // remove image's TexturePacker/ShoeBox rotation
@@ -116,11 +116,11 @@ import Sprite from './sprite.js';
             h = frame.width;
         }
 
-        var sx = g_offset.x + frame_offset.x,
+        let sx = g_offset.x + frame_offset.x,
             sy = g_offset.y + frame_offset.y;
 
         // should this be configurable ?
-        var corner_width = this.insetx || w / 4,
+        let corner_width = this.insetx || w / 4,
             corner_height = this.insety || h / 4;
 
         // OPTIMIZE ME !
@@ -170,11 +170,11 @@ import Sprite from './sprite.js';
 
 
         // DRAW SIDES and CENTER
-        var image_center_width = w - (corner_width << 1);
-        var image_center_height = h - (corner_height << 1);
+        let image_center_width = w - (corner_width << 1);
+        let image_center_height = h - (corner_height << 1);
 
-        var target_center_width = this.nss_width - (corner_width << 1);
-        var target_center_height = this.nss_height - (corner_height << 1);
+        let target_center_width = this.nss_width - (corner_width << 1);
+        let target_center_height = this.nss_height - (corner_height << 1);
 
         //Top center
         renderer.drawImage(

package/dist/melonjs.mjs/renderable/renderable.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -213,6 +213,13 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
          */
         this.mask = undefined;
 
+        /**
+          * (Experimental) an optional shader, to be used instead of the default built-in one, when drawing this renderable (WebGL only)
+          * @type {GLShader}
+          * @default undefined
+        */
+        this.shader = undefined;
+
         /**
          * the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)
          * @type {string}
@@ -426,11 +433,11 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @returns {number} angle in radians
      */
     angleTo(target) {
-        var a = this.getBounds();
-        var ax, ay;
+        let a = this.getBounds();
+        let ax, ay;
 
         if (target instanceof Renderable) {
-            var b = target.getBounds();
+            let b = target.getBounds();
             ax = b.centerX - a.centerX;
             ay = b.centerY - a.centerY;
         } else { // vector object
@@ -447,11 +454,11 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @returns {number} distance
      */
     distanceTo(target) {
-        var a = this.getBounds();
-        var dx, dy;
+        let a = this.getBounds();
+        let dx, dy;
 
         if (target instanceof Renderable) {
-            var b = target.getBounds();
+            let b = target.getBounds();
             dx = a.centerX - b.centerX;
             dy = a.centerY - b.centerY;
         } else { // vector object
@@ -468,7 +475,7 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @returns {Renderable} Reference to this object for method chaining
      */
     lookAt(target) {
-        var position;
+        let position;
 
         if (target instanceof Renderable) {
             position = target.pos;
@@ -476,7 +483,7 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
             position = target;
         }
 
-        var angle = this.angleTo(position);
+        let angle = this.angleTo(position);
 
         this.rotate(angle);
 
@@ -541,7 +548,7 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      */
     updateBounds(absolute = true) {
         if (this.isRenderable) {
-            var bounds = this.getBounds();
+            let bounds = this.getBounds();
 
             bounds.clear();
 
@@ -627,9 +634,7 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
          // manually update the anchor point (required for updateBoundsPos)
          this.anchorPoint.setMuted(x, y);
          // then call updateBounds
-         //this.updateBoundsPos(this.pos.x, this.pos.y);
          this.updateBounds();
-         //console.log("hello");
          this.isDirty = true;
      }
 
@@ -641,7 +646,7 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer object
      */
     preDraw(renderer) {
-        var ax = this.width * this.anchorPoint.x,
+        let ax = this.width * this.anchorPoint.x,
             ay = this.height * this.anchorPoint.y;
 
         // save renderer context
@@ -657,6 +662,11 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
             renderer.translate(-this.pos.x, -this.pos.y);
         }
 
+        // use this renderable shader if defined
+        if (typeof this.shader === "object" && typeof renderer.gl !== "undefined") {
+            renderer.customShader = this.shader;
+        }
+
         if ((this.autoTransform === true) && (!this.currentTransform.isIdentity())) {
             // apply the renderable transformation matrix
             renderer.translate(this.pos.x, this.pos.y);
@@ -708,6 +718,12 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
             renderer.clearMask();
         }
 
+        // revert to the default shader if defined
+        if (typeof this.shader === "object" && typeof renderer.gl !== "undefined") {
+            renderer.customShader = undefined;
+            //renderer.setCompositor("quad");
+        }
+
         // restore the context
         renderer.restore();
 
@@ -787,6 +803,12 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
 
         // call the user defined destroy method
         this.onDestroyEvent.apply(this, arguments);
+
+        // destroy any shader object if not done by the user through onDestroyEvent()
+        if (typeof this.shader === "object") {
+            this.shader.destroy();
+            this.shader = undefined;
+        }
     }
 
     /**