melonjs 14.5.0 → 15.1.0

package/src/renderable/container.js

@@ -57,12 +57,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
@@ -150,8 +150,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);
@@ -170,9 +170,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.
@@ -219,7 +219,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
@@ -229,7 +229,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
@@ -268,7 +268,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
@@ -278,7 +278,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
@@ -300,20 +300,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");
@@ -335,12 +335,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..
@@ -383,7 +383,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);
         }
@@ -408,27 +408,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);
@@ -455,7 +455,7 @@ let globalFloatingCounter = 0;
      * @returns {Renderable[]} Array of children
      */
     getChildByType(classType) {
-        var objList = [];
+        let objList = [];
 
         this.forEach((child) => {
             if (child instanceof classType) {
@@ -489,7 +489,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;
     }
 
@@ -511,7 +511,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);
@@ -519,7 +519,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);
                     }
@@ -531,14 +531,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;
@@ -549,6 +548,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
@@ -610,7 +628,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) {
@@ -625,7 +643,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;
@@ -633,7 +651,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
@@ -666,7 +684,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));
@@ -680,7 +698,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));
@@ -694,9 +712,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
@@ -711,8 +729,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]);
@@ -746,7 +764,7 @@ let globalFloatingCounter = 0;
                 // clear the defer id
                 this.pendingSort = null;
                 // make sure we redraw everything
-                game.repaint();
+                this.isDirty = true;
             }, this);
         }
     }
@@ -786,7 +804,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));
     }
 
@@ -798,7 +816,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));
     }
 
@@ -815,17 +833,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;
@@ -870,8 +888,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;
 
@@ -893,8 +911,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/src/renderable/dragndrop.js

@@ -36,10 +36,10 @@ export class Draggable extends Renderable {
      * @private
      */
     initEvents() {
-        input.registerPointerEvent("pointerdown", this, (e) => { event.emit(event.DRAGSTART, e, this); });
-        input.registerPointerEvent("pointerup", this,  (e) => { event.emit(event.DRAGEND, e, this); });
-        input.registerPointerEvent("pointercancel", this, (e) => { event.emit(event.DRAGEND, e, this); });
-        event.on(event.POINTERMOVE, this.dragMove.bind(this));
+        input.registerPointerEvent("pointerdown", this, (e) => event.emit(event.DRAGSTART, e, this));
+        input.registerPointerEvent("pointerup", this,  (e) => event.emit(event.DRAGEND, e, this));
+        input.registerPointerEvent("pointercancel", this, (e) => event.emit(event.DRAGEND, e, this));
+        event.on(event.POINTERMOVE, (e) => this.dragMove(e));
         event.on(event.DRAGSTART, (e, draggable) => {
             if (draggable === this) {
                 this.dragStart(e);

package/src/renderable/imagelayer.js

@@ -183,7 +183,7 @@ import * as stringUtil 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) {
@@ -191,7 +191,7 @@ import * as stringUtil 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,
@@ -257,13 +257,14 @@ import * as stringUtil 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/src/renderable/light2d.js

@@ -3,16 +3,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/src/renderable/nineslicesprite.js

@@ -86,18 +86,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
@@ -109,11 +109,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 !
@@ -163,11 +163,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/src/renderable/renderable.js

@@ -206,6 +206,13 @@ import Color from "./../math/color.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}
@@ -419,11 +426,11 @@ import Color from "./../math/color.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
@@ -440,11 +447,11 @@ import Color from "./../math/color.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
@@ -461,7 +468,7 @@ import Color from "./../math/color.js";
      * @returns {Renderable} Reference to this object for method chaining
      */
     lookAt(target) {
-        var position;
+        let position;
 
         if (target instanceof Renderable) {
             position = target.pos;
@@ -469,7 +476,7 @@ import Color from "./../math/color.js";
             position = target;
         }
 
-        var angle = this.angleTo(position);
+        let angle = this.angleTo(position);
 
         this.rotate(angle);
 
@@ -534,7 +541,7 @@ import Color from "./../math/color.js";
      */
     updateBounds(absolute = true) {
         if (this.isRenderable) {
-            var bounds = this.getBounds();
+            let bounds = this.getBounds();
 
             bounds.clear();
 
@@ -620,9 +627,7 @@ import Color from "./../math/color.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;
      }
 
@@ -634,7 +639,7 @@ import Color from "./../math/color.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
@@ -650,6 +655,11 @@ import Color from "./../math/color.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);
@@ -701,6 +711,12 @@ import Color from "./../math/color.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();
 
@@ -780,6 +796,12 @@ import Color from "./../math/color.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;
+        }
     }
 
     /**