melonjs 9.1.0 → 10.0.1

package/src/renderable/GUI.js

@@ -18,24 +18,21 @@ import { registerPointerEvent, releasePointerEvent} from "./../input/input.js";
  * @example
  *
  * // create a basic GUI Object
- * var myButton = me.GUI_Object.extend(
- * {
- *    init:function (x, y)
- *    {
+ * class myButton extends GUI_Object {
+ *    constructor(x, y) {
  *       var settings = {}
  *       settings.image = "button";
  *       settings.framewidth = 100;
  *       settings.frameheight = 50;
  *       // super constructor
- *       this._super(me.GUI_Object, "init", [x, y, settings]);
+ *       super(x, y, settings);
  *       // define the object z order
  *       this.pos.z = 4;
- *    },
+ *    }
  *
  *    // output something in the console
  *    // when the object is clicked
- *    onClick:function (event)
- *    {
+ *    onClick:function (event) {
  *       console.log("clicked!");
  *       // don't propagate the event
  *       return false;
@@ -46,11 +43,17 @@ import { registerPointerEvent, releasePointerEvent} from "./../input/input.js";
  * me.game.world.addChild(new myButton(10,10));
  *
  */
-var GUI_Object = Sprite.extend({
+
+class GUI_Object extends Sprite {
+
     /**
      * @ignore
      */
-    init : function (x, y, settings) {
+    constructor(x, y, settings) {
+
+        // call the parent constructor
+        super(x, y, settings);
+
         /**
          * object can be clicked or not
          * @public
@@ -88,46 +91,23 @@ var GUI_Object = Sprite.extend({
 
         // object has been updated (clicked,etc..)
         this.holdTimeout = null;
-        this.updated = false;
         this.released = true;
 
-        // call the parent constructor
-        this._super(Sprite, "init", [ x, y, settings ]);
-
         // GUI items use screen coordinates
         this.floating = true;
 
         // enable event detection
         this.isKinematic = false;
-    },
-
-    /**
-     * return true if the object has been clicked
-     * @ignore
-     */
-    update : function (dt) {
-        // call the parent constructor
-        var updated = this._super(Sprite, "update", [ dt ]);
-        // check if the button was updated
-        if (this.updated) {
-            // clear the flag
-            if (!this.released) {
-                this.updated = false;
-            }
-            return true;
-        }
-        // else only return true/false based on the parent function
-        return updated;
-    },
+    }
 
     /**
      * function callback for the pointerdown event
      * @ignore
      */
-    clicked : function (event) {
+    clicked(event) {
         // Check if left mouse button is pressed
         if (event.button === 0 && this.isClickable) {
-            this.updated = true;
+            this.dirty = true;
             this.released = false;
             if (this.isHoldable) {
                 if (this.holdTimeout !== null) {
@@ -136,9 +116,9 @@ var GUI_Object = Sprite.extend({
                 this.holdTimeout = timer.setTimeout(this.hold.bind(this), this.holdThreshold, false);
                 this.released = false;
             }
-            return this.onClick.call(this, event);
+            return this.onClick(event);
         }
-    },
+    }
 
     /**
      * function called when the object is pressed <br>
@@ -150,18 +130,19 @@ var GUI_Object = Sprite.extend({
      * @function
      * @param {Event} event the event object
      */
-    onClick : function (/* event */) {
+    onClick(/* event */) {
         return false;
-    },
+    }
 
     /**
      * function callback for the pointerEnter event
      * @ignore
      */
-    enter : function (event) {
+    enter(event) {
         this.hover = true;
-        return this.onOver.call(this, event);
-    },
+        this.dirty = true;
+        return this.onOver(event);
+    }
 
     /**
      * function called when the pointer is over the object
@@ -171,17 +152,18 @@ var GUI_Object = Sprite.extend({
      * @function
      * @param {Event} event the event object
      */
-    onOver : function (/* event */) {},
+    onOver(/* event */) {}
 
     /**
      * function callback for the pointerLeave event
      * @ignore
      */
-    leave : function (event) {
+    leave(event) {
         this.hover = false;
-        this.release.call(this, event);
-        return this.onOut.call(this, event);
-    },
+        this.dirty = true;
+        this.release(event);
+        return this.onOut(event);
+    }
 
     /**
      * function called when the pointer is leaving the object area
@@ -191,19 +173,22 @@ var GUI_Object = Sprite.extend({
      * @function
      * @param {Event} event the event object
      */
-    onOut : function (/* event */) {},
+    onOut(/* event */) {
+
+    }
 
     /**
      * function callback for the pointerup event
      * @ignore
      */
-    release : function (event) {
+    release(event) {
         if (this.released === false) {
             this.released = true;
+            this.dirty = true;
             timer.clearTimeout(this.holdTimeout);
-            return this.onRelease.call(this, event);
+            return this.onRelease(event);
         }
-    },
+    }
 
     /**
      * function called when the object is pressed and released <br>
@@ -215,20 +200,21 @@ var GUI_Object = Sprite.extend({
      * @function
      * @param {Event} event the event object
      */
-    onRelease : function () {
+    onRelease() {
         return false;
-    },
+    }
 
     /**
      * function callback for the tap and hold timer event
      * @ignore
      */
-    hold : function () {
+    hold() {
         timer.clearTimeout(this.holdTimeout);
+        this.dirty = true;
         if (!this.released) {
-            this.onHold.call(this);
+            this.onHold();
         }
-    },
+    }
 
     /**
      * function called when the object is pressed and held<br>
@@ -238,26 +224,26 @@ var GUI_Object = Sprite.extend({
      * @public
      * @function
      */
-    onHold : function () {},
+    onHold() {}
 
     /**
      * function called when added to the game world or a container
      * @ignore
      */
-    onActivateEvent : function () {
+    onActivateEvent() {
         // register pointer events
         registerPointerEvent("pointerdown", this, this.clicked.bind(this));
         registerPointerEvent("pointerup", this, this.release.bind(this));
         registerPointerEvent("pointercancel", this, this.release.bind(this));
         registerPointerEvent("pointerenter", this, this.enter.bind(this));
         registerPointerEvent("pointerleave", this, this.leave.bind(this));
-    },
+    }
 
     /**
      * function called when removed from the game world or a container
      * @ignore
      */
-    onDeactivateEvent : function () {
+    onDeactivateEvent() {
         // release pointer events
         releasePointerEvent("pointerdown", this);
         releasePointerEvent("pointerup", this);
@@ -266,6 +252,6 @@ var GUI_Object = Sprite.extend({
         releasePointerEvent("pointerleave", this);
         timer.clearTimeout(this.holdTimeout);
     }
-});
+};
 
 export default GUI_Object;

package/src/renderable/collectable.js

@@ -4,6 +4,7 @@ import Rect from "./../shapes/rectangle.js";
 import collision from "./../physics/collision.js";
 
 /**
+ * @classdesc
  * a basic collectable helper class for immovable object (e.g. a coin)
  * @class
  * @extends me.Sprite
@@ -13,13 +14,15 @@ import collision from "./../physics/collision.js";
  * @param {Number} y the y coordinates of the collectable
  * @param {Object} settings See {@link me.Sprite}
  */
-var Collectable = Sprite.extend({
+
+class Collectable extends Sprite {
     /**
      * @ignore
      */
-    init : function (x, y, settings) {
+    constructor(x, y, settings) {
+
         // call the super constructor
-        this._super(Sprite, "init", [x, y, settings]);
+        super(x, y, settings);
 
         this.name = settings.name;
         this.type = settings.type;
@@ -28,6 +31,9 @@ var Collectable = Sprite.extend({
         // add and configure the physic body
         this.body = new Body(this, settings.shapes || new Rect(0, 0, this.width, this.height));
         this.body.collisionType = collision.types.COLLECTABLE_OBJECT;
+        // by default only collides with PLAYER_OBJECT
+        this.body.setCollisionMask(collision.types.PLAYER_OBJECT);
+        this.body.setStatic(true);
 
         // Update anchorPoint
         if (settings.anchorPoint) {
@@ -38,6 +44,7 @@ var Collectable = Sprite.extend({
         }
 
     }
-});
+
+};
 
 export default Collectable;

package/src/renderable/colorlayer.js

@@ -1,10 +1,10 @@
-import Color from "./../math/color.js";
 import pool from "./../system/pooling.js";
-import game from "./../game.js";
+import { viewport } from "./../game.js";
 import Renderable from "./renderable.js";
 
 
 /**
+ * @classdesc
  * a generic Color Layer Object.  Fills the entire Canvas with the color not just the container the object belongs to.
  * @class
  * @extends me.Renderable
@@ -12,20 +12,16 @@ import Renderable from "./renderable.js";
  * @constructor
  * @param {String} name Layer name
  * @param {me.Color|String} color CSS color
- * @param {Number} z z-index position
+ * @param {Number} [z = 0] z-index position
  */
-var ColorLayer = Renderable.extend({
+class ColorLayer extends Renderable {
+
     /**
      * @ignore
      */
-    init: function (name, color, z) {
+    constructor(name, color, z) {
         // parent constructor
-        this._super(Renderable, "init", [0, 0, Infinity, Infinity]);
-
-        // apply given parameters
-        this.name = name;
-        this.pos.z = z;
-        this.floating = true;
+        super(0, 0, Infinity, Infinity);
 
         /**
          * the layer color component
@@ -34,40 +30,46 @@ var ColorLayer = Renderable.extend({
          * @name color
          * @memberOf me.ColorLayer#
          */
-        // parse the given color
-        if (color instanceof Color) {
-            this.color = color;
-        } else {
-            // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
-            this.color = pool.pull("Color").parseCSS(color);
-        }
-        this.anchorPoint.set(0, 0);
-    },
+         this.color = pool.pull("Color").parseCSS(color);
+
+         this.onResetEvent(name, color, z);
+
+    }
+
+    onResetEvent(name, color, z = 0) {
+        // apply given parameters
+        this.name = name;
+        this.pos.z = z;
+        this.floating = true;
+        // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+        this.color.parseCSS(color);
+    }
 
     /**
      * draw the color layer
      * @ignore
      */
-    draw : function (renderer, rect) {
+    draw(renderer, rect) {
         var color = renderer.getColor();
-        var vpos = game.viewport.pos;
+        var vpos = viewport.pos;
         renderer.setColor(this.color);
         renderer.fillRect(
             rect.left - vpos.x, rect.top - vpos.y,
             rect.width, rect.height
         );
         renderer.setColor(color);
-    },
+    }
 
     /**
      * Destroy function
      * @ignore
      */
-    destroy : function () {
+    destroy() {
         pool.push(this.color);
         this.color = undefined;
-        this._super(Renderable, "destroy");
+        super.destroy();
     }
-});
+
+};
 
 export default ColorLayer;