melonjs 9.1.0 → 10.0.1

package/src/renderable/renderable.js

@@ -17,14 +17,15 @@ import { clamp } from "./../math/math.js";
  * @param {Number} width object width
  * @param {Number} height object height
  */
-var Renderable = Rect.extend({
+class Renderable extends Rect {
+
     /**
      * @ignore
      */
-    init : function (x, y, width, height) {
+    constructor(x, y, width, height) {
 
         // parent constructor
-        this._super(Rect, "init", [x, y, width, height]);
+        super(x, y, width, height);
 
         /**
          * to identify the object as a renderable object
@@ -52,11 +53,11 @@ var Renderable = Rect.extend({
          * @memberOf me.Renderable#
          * @example
          *  // define a new Player Class
-         *  game.PlayerEntity = me.Sprite.extend({
+         *  class PlayerEntity extends me.Sprite {
          *      // constructor
-         *      init:function (x, y, settings) {
+         *      constructor(x, y, settings) {
          *          // call the parent constructor
-         *          this._super(me.Sprite, 'init', [x, y , settings]);
+         *          super(x, y , settings);
          *
          *          // define a basic walking animation
          *          this.addAnimation("walk",  [...]);
@@ -69,13 +70,14 @@ var Renderable = Rect.extend({
          *          this.body = new me.Body(this);
          *          // add a default collision shape
          *          this.body.addShape(new me.Rect(0, 0, this.width, this.height));
-         *          // configure max speed and friction
+         *          // configure max speed, friction, and initial force to be applied
          *          this.body.setMaxVelocity(3, 15);
          *          this.body.setFriction(0.4, 0);
+         *          this.body.force.set(3, 0);
          *
          *          // set the display to follow our position on both axis
          *          me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
-         *      },
+         *      }
          *
          *      ...
          *
@@ -310,12 +312,68 @@ var Renderable = Rect.extend({
 
         // ensure it's fully opaque by default
         this.setOpacity(1.0);
-    },
+    }
+
+    /**
+     * Whether the renderable object is visible and within the viewport
+     * @public
+     * @readonly
+     * @type Boolean
+     * @default false
+     * @name inViewport
+     * @memberOf me.Renderable
+     */
+
+    /**
+     * @ignore
+     */
+    get inViewport() {
+        return this._inViewport;
+    }
+
+    /**
+     * @ignore
+     */
+    set inViewport(value) {
+        if (this._inViewport !== value) {
+            this._inViewport = value;
+            if (typeof this.onVisibilityChange === "function") {
+                this.onVisibilityChange.call(this, value);
+            }
+        }
+    }
+
+    /**
+     * returns true if this renderable is flipped on the horizontal axis
+     * @public
+     * @see me.Renderable#flipX
+     * @type {Boolean}
+     * @name isFlippedX
+     * @memberOf me.Renderable
+     */
+
+    /**
+     * @ignore
+     */
+    get isFlippedX() {
+        return this._flip.x === true;
+    }
 
-    /** @ignore */
-    onResetEvent : function () {
-        this.init.apply(this, arguments);
-    },
+    /**
+     * returns true if this renderable is flipped on the vertical axis
+     * @public
+     * @see me.Renderable#flipY
+     * @type {Boolean}
+     * @name isFlippedY
+     * @memberOf me.Renderable
+     */
+
+    /**
+     * @ignore
+     */
+    get isFlippedY() {
+        return this._flip.y === true;
+    }
 
     /**
      * returns the bounding box for this renderable
@@ -324,9 +382,9 @@ var Renderable = Rect.extend({
      * @function
      * @return {me.Bounds} bounding box Rectangle object
      */
-    getBounds : function () {
+    getBounds() {
         if (typeof this._bounds === "undefined") {
-            this._super(Rect, "getBounds");
+            super.getBounds();
             if (this.isFinite()) {
                 this._bounds.setMinMax(this.pos.x, this.pos.y, this.pos.x + this.width, this.pos.y + this.height);
             } else {
@@ -336,7 +394,7 @@ var Renderable = Rect.extend({
 
         }
         return this._bounds;
-    },
+    }
 
     /**
      * get the renderable alpha channel value<br>
@@ -345,9 +403,9 @@ var Renderable = Rect.extend({
      * @function
      * @return {Number} current opacity value between 0 and 1
      */
-    getOpacity : function () {
+    getOpacity() {
         return this.alpha;
-    },
+    }
 
     /**
      * set the renderable alpha channel value<br>
@@ -356,7 +414,7 @@ var Renderable = Rect.extend({
      * @function
      * @param {Number} alpha opacity value between 0.0 and 1.0
      */
-    setOpacity : function (alpha) {
+    setOpacity(alpha) {
         if (typeof (alpha) === "number") {
             this.alpha = clamp(alpha, 0.0, 1.0);
             // Set to 1 if alpha is NaN
@@ -364,7 +422,7 @@ var Renderable = Rect.extend({
                 this.alpha = 1.0;
             }
         }
-    },
+    }
 
     /**
      * flip the renderable on the horizontal axis (around the center of the renderable)
@@ -372,14 +430,14 @@ var Renderable = Rect.extend({
      * @name flipX
      * @memberOf me.Renderable.prototype
      * @function
-     * @param {Boolean} [flip=false] `true` to flip this renderable.
+     * @param {Boolean} [flip=true] `true` to flip this renderable.
      * @return {me.Renderable} Reference to this object for method chaining
      */
-    flipX : function (flip) {
+    flipX(flip = true) {
         this._flip.x = !!flip;
         this.isDirty = true;
         return this;
-    },
+    }
 
     /**
      * flip the renderable on the vertical axis (around the center of the renderable)
@@ -387,14 +445,14 @@ var Renderable = Rect.extend({
      * @name flipY
      * @memberOf me.Renderable.prototype
      * @function
-     * @param {Boolean} [flip=false] `true` to flip this renderable.
+     * @param {Boolean} [flip=true] `true` to flip this renderable.
      * @return {me.Renderable} Reference to this object for method chaining
      */
-    flipY : function (flip) {
+    flipY(flip = true) {
         this._flip.y = !!flip;
         this.isDirty = true;
         return this;
-    },
+    }
 
     /**
      * multiply the renderable currentTransform with the given matrix
@@ -405,13 +463,13 @@ var Renderable = Rect.extend({
      * @param {me.Matrix2d} matrix the transformation matrix
      * @return {me.Renderable} Reference to this object for method chaining
      */
-    transform : function (m) {
+    transform(m) {
         this.currentTransform.multiply(m);
-        //this._super(Rect, "transform", [m]);
+        //super.transform(m);
         this.updateBoundsPos(this.pos.x, this.pos.y);
         this.isDirty = true;
         return this;
-    },
+    }
 
     /**
      * return the angle to the specified target
@@ -421,7 +479,7 @@ var Renderable = Rect.extend({
      * @param {me.Renderable|me.Vector2d|me.Vector3d} target
      * @return {Number} angle in radians
      */
-    angleTo: function (target) {
+    angleTo(target) {
         var a = this.getBounds();
         var ax, ay;
 
@@ -435,7 +493,7 @@ var Renderable = Rect.extend({
         }
 
         return Math.atan2(ay, ax);
-    },
+    }
 
     /**
      * return the distance to the specified target
@@ -445,7 +503,7 @@ var Renderable = Rect.extend({
      * @param {me.Renderable|me.Vector2d|me.Vector3d} target
      * @return {Number} distance
      */
-    distanceTo: function (target) {
+    distanceTo(target) {
         var a = this.getBounds();
         var dx, dy;
 
@@ -459,7 +517,7 @@ var Renderable = Rect.extend({
         }
 
         return Math.sqrt(dx * dx + dy * dy);
-    },
+    }
 
     /**
      * Rotate this renderable towards the given target.
@@ -469,7 +527,7 @@ var Renderable = Rect.extend({
      * @param {me.Renderable|me.Vector2d|me.Vector3d} target the renderable or position to look at
      * @return {me.Renderable} Reference to this object for method chaining
      */
-    lookAt : function (target) {
+    lookAt(target) {
         var position;
 
         if (target instanceof Renderable) {
@@ -483,7 +541,7 @@ var Renderable = Rect.extend({
         this.rotate(angle);
 
         return this;
-    },
+    }
 
     /**
      * Rotate this renderable by the specified angle (in radians).
@@ -494,14 +552,14 @@ var Renderable = Rect.extend({
      * @param {me.Vector2d|me.ObservableVector2d} [v] an optional point to rotate around
      * @return {me.Renderable} Reference to this object for method chaining
      */
-    rotate : function (angle) {
+    rotate(angle) {
         if (!isNaN(angle)) {
             this.currentTransform.rotate(angle);
             //this.updateBoundsPos(this.pos.x, this.pos.y);
             this.isDirty = true;
         }
         return this;
-    },
+    }
 
     /**
      * scale the renderable around his anchor point.  Scaling actually applies changes
@@ -516,12 +574,12 @@ var Renderable = Rect.extend({
      * @param {Number} [y=x] a number representing the ordinate of the scaling vector.
      * @return {me.Renderable} Reference to this object for method chaining
      */
-    scale : function (x, y) {
+    scale(x, y) {
         this.currentTransform.scale(x, y);
-        this._super(Rect, "scale", [x, y]);
+        super.scale(x, y);
         this.isDirty = true;
         return this;
-    },
+    }
 
     /**
      * scale the renderable around his anchor point
@@ -531,10 +589,10 @@ var Renderable = Rect.extend({
      * @param {me.Vector2d} vector scaling vector
      * @return {me.Renderable} Reference to this object for method chaining
      */
-    scaleV : function (v) {
+    scaleV(v) {
         this.scale(v.x, v.y);
         return this;
-    },
+    }
 
     /**
      * update function. <br>
@@ -546,9 +604,9 @@ var Renderable = Rect.extend({
      * @param {Number} dt time since the last update in milliseconds.
      * @return false
      **/
-    update : function (/* dt */) {
+    update(/* dt */) {
         return this.isDirty;
-    },
+    }
 
     /**
      * update the bounding box for this shape.
@@ -558,11 +616,11 @@ var Renderable = Rect.extend({
      * @function
      * @return {me.Bounds} this shape bounding box Rectangle object
      */
-    updateBounds : function () {
-        this._super(Rect, "updateBounds");
+    updateBounds() {
+        super.updateBounds();
         this.updateBoundsPos(this.pos.x, this.pos.y);
         return this.getBounds();
-    },
+    }
 
     /**
      * update the renderable's bounding rect (private)
@@ -571,7 +629,7 @@ var Renderable = Rect.extend({
      * @memberOf me.Renderable.prototype
      * @function
      */
-     updateBoundsPos : function (newX, newY) {
+     updateBoundsPos(newX, newY) {
          var bounds = this.getBounds();
 
          bounds.shift(newX, newY);
@@ -595,7 +653,7 @@ var Renderable = Rect.extend({
              bounds.translate(this.ancestor.getAbsolutePosition());
          }
          //return bounds;
-     },
+     }
 
      /**
       * return the renderable absolute position in the game world
@@ -604,7 +662,7 @@ var Renderable = Rect.extend({
       * @function
       * @return {me.Vector2d}
       */
-      getAbsolutePosition : function () {
+      getAbsolutePosition() {
           if (typeof this._absPos === "undefined") {
               this._absPos = pool.pull("Vector2d");
           }
@@ -614,7 +672,7 @@ var Renderable = Rect.extend({
               this._absPos.add(this.ancestor.getAbsolutePosition());
           }
           return this._absPos;
-      },
+      }
 
     /**
      * called when the anchor point value is changed
@@ -623,13 +681,13 @@ var Renderable = Rect.extend({
      * @memberOf me.Renderable.prototype
      * @function
      */
-     onAnchorUpdate : function (newX, newY) {
+     onAnchorUpdate(newX, newY) {
          // since the callback is called before setting the new value
          // manually update the anchor point (required for updateBoundsPos)
          this.anchorPoint.setMuted(newX, newY);
-         // then call updateBouds
+         // then call updateBounds
          this.updateBoundsPos(this.pos.x, this.pos.y);
-     },
+     }
 
 
     /**
@@ -642,13 +700,14 @@ var Renderable = Rect.extend({
      * @protected
      * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
      **/
-    preDraw : function (renderer) {
+    preDraw(renderer) {
         var bounds = this.getBounds();
         var ax = bounds.width * this.anchorPoint.x,
             ay = bounds.height * this.anchorPoint.y;
 
-        // save context
+        // save renderer context
         renderer.save();
+
         // apply the defined alpha value
         renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
 
@@ -662,6 +721,13 @@ var Renderable = Rect.extend({
             renderer.translate(-dx, -dy);
         }
 
+        // apply stencil mask if defined
+        if (typeof this.mask !== "undefined") {
+            renderer.translate(this.pos.x, this.pos.y);
+            renderer.setMask(this.mask);
+            renderer.translate(-this.pos.x, -this.pos.y);
+        }
+
         if ((this.autoTransform === true) && (!this.currentTransform.isIdentity())) {
             // apply the renderable transformation matrix
             renderer.translate(this.pos.x, this.pos.y);
@@ -672,14 +738,9 @@ var Renderable = Rect.extend({
         // offset by the anchor point
         renderer.translate(-ax, -ay);
 
-
-        if (typeof this.mask !== "undefined") {
-            renderer.setMask(this.mask);
-        }
-
         // apply the defined tint, if any
         renderer.setTint(this.tint);
-    },
+    }
 
     /**
      * object draw. <br>
@@ -690,9 +751,9 @@ var Renderable = Rect.extend({
      * @protected
      * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
      **/
-    draw : function (/*renderer*/) {
+    draw(/*renderer*/) {
         // empty one !
-    },
+    }
 
     /**
      * restore the rendering context after drawing. <br>
@@ -703,26 +764,55 @@ var Renderable = Rect.extend({
      * @protected
      * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
      **/
-    postDraw : function (renderer) {
+    postDraw(renderer) {
+
+        // remove the previously applied tint
+        renderer.clearTint();
+
+        // clear the mask if set
         if (typeof this.mask !== "undefined") {
             renderer.clearMask();
         }
 
-        // remove the previously applied tint
-        renderer.clearTint();
+        // restore the context
+        renderer.restore();
 
         // reset the dirty flag
         this.isDirty = false;
+    }
 
-        // restore the context
-        renderer.restore();
-    },
+    /**
+     * onCollision callback, triggered in case of collision,
+     * when this renderable body is colliding with another one
+     * @name onCollision
+     * @memberOf me.Renderable.prototype
+     * @function
+     * @param {me.collision.ResponseObject} response the collision response object
+     * @param {me.Renderable} other the other renderable touching this one (a reference to response.a or response.b)
+     * @return {Boolean} true if the object should respond to the collision (its position and velocity will be corrected)
+     * @example
+     * // colision handler
+     * onCollision(response) {
+     *     if (response.b.body.collisionType === me.collision.types.ENEMY_OBJECT) {
+     *         // makes the other object solid, by substracting the overlap vector to the current position
+     *         this.pos.sub(response.overlapV);
+     *         this.hurt();
+     *         // not solid
+     *         return false;
+     *     }
+     *     // Make the object solid
+     *     return true;
+     * },
+     */
+    onCollision() {
+        return false;
+    }
 
     /**
      * Destroy function<br>
      * @ignore
      */
-    destroy : function () {
+    destroy() {
         // allow recycling object properties
         pool.push(this.currentTransform);
         this.currentTransform = undefined;
@@ -766,7 +856,7 @@ var Renderable = Rect.extend({
 
         // call the user defined destroy method
         this.onDestroyEvent.apply(this, arguments);
-    },
+    }
 
     /**
      * OnDestroy Notification function<br>
@@ -775,75 +865,11 @@ var Renderable = Rect.extend({
      * @memberOf me.Renderable
      * @function
      */
-    onDestroyEvent : function () {
+    onDestroyEvent() {
         // to be extended !
     }
-});
 
-/**
- * Whether the renderable object is visible and within the viewport
- * @public
- * @readonly
- * @type Boolean
- * @default false
- * @name inViewport
- * @memberOf me.Renderable
- */
-Object.defineProperty(Renderable.prototype, "inViewport", {
-    /**
-     * @ignore
-     */
-    get : function () {
-        return this._inViewport;
-    },
-    /**
-     * @ignore
-     */
-    set : function (value) {
-        if (this._inViewport !== value) {
-            this._inViewport = value;
-            if (typeof this.onVisibilityChange === "function") {
-                this.onVisibilityChange.call(this, value);
-            }
-        }
-    },
-    configurable : true
-});
-
-/**
- * returns true if this renderable is flipped on the horizontal axis
- * @public
- * @see me.Renderable#flipX
- * @type {Boolean}
- * @name isFlippedX
- * @memberOf me.Renderable
- */
-Object.defineProperty(Renderable.prototype, "isFlippedX", {
-    /**
-     * @ignore
-     */
-    get : function () {
-        return this._flip.x === true;
-    },
-    configurable : true
-});
+};
 
-/**
- * returns true if this renderable is flipped on the vertical axis
- * @public
- * @see me.Renderable#flipY
- * @type {Boolean}
- * @name isFlippedY
- * @memberOf me.Renderable
- */
-Object.defineProperty(Renderable.prototype, "isFlippedY", {
-    /**
-     * @ignore
-     */
-    get : function () {
-        return this._flip.y === true;
-    },
-    configurable : true
-});
 
 export default Renderable;