melonjs 10.3.0 → 10.5.1

package/src/renderable/renderable.js

@@ -9,18 +9,14 @@ import { clamp } from "./../math/math.js";
 /**
  * @classdesc
  * A base class for renderable objects.
- * @class Renderable
- * @augments me.Rect
- * @memberof me
- * @param {number} x position of the renderable object (accessible through inherited pos.x property)
- * @param {number} y position of the renderable object (accessible through inherited pos.y property)
- * @param {number} width object width
- * @param {number} height object height
+ * @augments Rect
  */
 class Renderable extends Rect {
-
     /**
-     * @ignore
+     * @param {number} x position of the renderable object (accessible through inherited pos.x property)
+     * @param {number} y position of the renderable object (accessible through inherited pos.y property)
+     * @param {number} width object width
+     * @param {number} height object height
      */
     constructor(x, y, width, height) {
 
@@ -39,17 +35,17 @@ class Renderable extends Rect {
          * @type {boolean}
          * @default true
          * @name isKinematic
-         * @memberof me.Renderable
+         * @memberof Renderable
          */
         this.isKinematic = true;
 
         /**
          * the renderable physic body
          * @public
-         * @type {me.Body}
-         * @see me.Body
+         * @type {Body}
+         * @see Body
          * @name body
-         * @memberof me.Renderable#
+         * @memberof Renderable#
          * @example
          *  // define a new Player Class
          *  class PlayerEntity extends me.Sprite {
@@ -84,14 +80,14 @@ class Renderable extends Rect {
          */
         this.body = undefined;
 
-        /**
-         * the renderable default transformation matrix
-         * @public
-         * @type {me.Matrix2d}
-         * @name currentTransform
-         * @memberof me.Renderable#
-         */
         if (typeof this.currentTransform === "undefined") {
+            /**
+             * the renderable default transformation matrix
+             * @public
+             * @type {Matrix2d}
+             * @name currentTransform
+             * @memberof Renderable#
+             */
             this.currentTransform = pool.pull("Matrix2d");
         }
         this.currentTransform.identity();
@@ -103,7 +99,7 @@ class Renderable extends Rect {
         * @public
         * @type {string}
         * @name GUID
-        * @memberof me.Renderable
+        * @memberof Renderable
         */
         this.GUID = undefined;
 
@@ -113,7 +109,7 @@ class Renderable extends Rect {
          * @type {Function}
          * @default undefined
          * @name onVisibilityChange
-         * @memberof me.Renderable#
+         * @memberof Renderable#
          * @example
          * this.onVisibilityChange = function(inViewport) {
          *     if (inViewport === true) {
@@ -129,7 +125,7 @@ class Renderable extends Rect {
          * @type {boolean}
          * @default false
          * @name alwaysUpdate
-         * @memberof me.Renderable
+         * @memberof Renderable
          */
         this.alwaysUpdate = false;
 
@@ -139,7 +135,7 @@ class Renderable extends Rect {
          * @type {boolean}
          * @default false
          * @name updateWhenPaused
-         * @memberof me.Renderable
+         * @memberof Renderable
          */
         this.updateWhenPaused = false;
 
@@ -149,7 +145,7 @@ class Renderable extends Rect {
          * @type {boolean}
          * @default false
          * @name isPersistent
-         * @memberof me.Renderable
+         * @memberof Renderable
          */
         this.isPersistent = false;
 
@@ -160,27 +156,27 @@ class Renderable extends Rect {
          * @type {boolean}
          * @default false
          * @name floating
-         * @memberof me.Renderable
+         * @memberof Renderable
          */
         this.floating = false;
 
-        /**
-         * The anchor point is used for attachment behavior, and/or when applying transformations.<br>
-         * The coordinate system places the origin at the top left corner of the frame (0, 0) and (1, 1) means the bottom-right corner<br>
-         * <img src="images/anchor_point.png"/><br>
-         * a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.<br>
-         * <br>
-         * <i><b>Note:</b> Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation.
-         * To specify a value through Tiled, use a json expression like `json:{"x":0.5,"y":0.5}`. </i>
-         * @public
-         * @type {me.ObservableVector2d}
-         * @default <0.5,0.5>
-         * @name anchorPoint
-         * @memberof me.Renderable#
-         */
         if (this.anchorPoint instanceof ObservableVector2d) {
             this.anchorPoint.setMuted(0.5, 0.5).setCallback(this.onAnchorUpdate, this);
         } else {
+            /**
+             * The anchor point is used for attachment behavior, and/or when applying transformations.<br>
+             * The coordinate system places the origin at the top left corner of the frame (0, 0) and (1, 1) means the bottom-right corner<br>
+             * <img src="images/anchor_point.png"/><br>
+             * a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.<br>
+             * <br>
+             * <i><b>Note:</b> Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation.
+             * To specify a value through Tiled, use a json expression like `json:{"x":0.5,"y":0.5}`. </i>
+             * @public
+             * @type {ObservableVector2d}
+             * @default <0.5,0.5>
+             * @name anchorPoint
+             * @memberof Renderable#
+             */
             this.anchorPoint = pool.pull("ObservableVector2d", 0.5, 0.5, { onUpdate: this.onAnchorUpdate, scope: this });
         }
 
@@ -191,7 +187,7 @@ class Renderable extends Rect {
          * @type {boolean}
          * @default true
          * @name autoTransform
-         * @memberof me.Renderable
+         * @memberof Renderable
          * @example
          * // enable "automatic" transformation when the object is activated
          * onActivateEvent: function () {
@@ -209,21 +205,21 @@ class Renderable extends Rect {
         /**
          * Define the renderable opacity<br>
          * Set to zero if you do not wish an object to be drawn
-         * @see me.Renderable#setOpacity
-         * @see me.Renderable#getOpacity
+         * @see Renderable#setOpacity
+         * @see Renderable#getOpacity
          * @public
          * @type {number}
          * @default 1.0
-         * @name me.Renderable#alpha
+         * @name Renderable#alpha
          */
         this.alpha = 1.0;
 
         /**
          * a reference to the parent object that contains this renderable
          * @public
-         * @type {me.Container|me.Entity}
+         * @type {Container|Entity}
          * @default undefined
-         * @name me.Renderable#ancestor
+         * @name Renderable#ancestor
          */
         this.ancestor = undefined;
 
@@ -231,10 +227,10 @@ class Renderable extends Rect {
          * A mask limits rendering elements to the shape and position of the given mask object.
          * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
          * @public
-         * @type {me.Rect|me.Polygon|me.Line|me.Ellipse}
+         * @type {Rect|Polygon|Line|Ellipse}
          * @name mask
          * @default undefined
-         * @memberof me.Renderable#
+         * @memberof Renderable#
          * @example
          * // apply a mask in the shape of a Star
          * myNPCSprite.mask = new me.Polygon(myNPCSprite.width / 2, 0, [
@@ -256,10 +252,10 @@ class Renderable extends Rect {
         /**
          * define a tint for this renderable. a (255, 255, 255) r, g, b value will remove the tint effect.
          * @public
-         * @type {me.Color}
+         * @type {Color}
          * @name tint
          * @default (255, 255, 255)
-         * @memberof me.Renderable#
+         * @memberof Renderable#
          * @example
          * // add a red tint to this renderable
          * this.tint.setColor(255, 128, 128);
@@ -274,20 +270,20 @@ class Renderable extends Rect {
          * @type {string}
          * @name name
          * @default ""
-         * @memberof me.Renderable
+         * @memberof Renderable
          */
         this.name = "";
 
-        /**
-         * Position of the Renderable relative to its parent container
-         * @public
-         * @type {me.ObservableVector3d}
-         * @name pos
-         * @memberof me.Renderable#
-         */
         if (this.pos instanceof ObservableVector3d) {
             this.pos.setMuted(x, y, 0).setCallback(this.updateBoundsPos, this);
         } else {
+            /**
+             * Position of the Renderable relative to its parent container
+             * @public
+             * @type {ObservableVector3d}
+             * @name pos
+             * @memberof Renderable#
+             */
             this.pos = pool.pull("ObservableVector3d", x, y, 0, { onUpdate: this.updateBoundsPos, scope: this});
         }
 
@@ -296,7 +292,7 @@ class Renderable extends Rect {
          * @type {boolean}
          * @name isDirty
          * @default false
-         * @memberof me.Renderable#
+         * @memberof Renderable#
          */
         this.isDirty = false;
 
@@ -316,11 +312,10 @@ class Renderable extends Rect {
     /**
      * Whether the renderable object is floating, or contained in a floating container
      * @public
-     * @see me.Renderable#floating
-     * @readonly
+     * @see Renderable#floating
      * @type {boolean}
      * @name isFloating
-     * @memberof me.Renderable
+     * @memberof Renderable
      */
     get isFloating() {
         return this.floating === true || (typeof this.ancestor !== "undefined" && this.ancestor.floating === true);
@@ -329,17 +324,14 @@ class Renderable extends Rect {
     /**
      * Whether the renderable object is visible and within the viewport
      * @public
-     * @readonly
      * @type {boolean}
      * @default false
      * @name inViewport
-     * @memberof me.Renderable
+     * @memberof Renderable
      */
-
     get inViewport() {
         return this._inViewport;
     }
-
     set inViewport(value) {
         if (this._inViewport !== value) {
             this._inViewport = value;
@@ -352,12 +344,11 @@ class Renderable extends Rect {
     /**
      * returns true if this renderable is flipped on the horizontal axis
      * @public
-     * @see me.Renderable#flipX
+     * @see Renderable#flipX
      * @type {boolean}
      * @name isFlippedX
-     * @memberof me.Renderable
+     * @memberof Renderable
      */
-
     get isFlippedX() {
         return this._flip.x === true;
     }
@@ -365,12 +356,11 @@ class Renderable extends Rect {
     /**
      * returns true if this renderable is flipped on the vertical axis
      * @public
-     * @see me.Renderable#flipY
+     * @see Renderable#flipY
      * @type {boolean}
      * @name isFlippedY
-     * @memberof me.Renderable
+     * @memberof Renderable
      */
-
     get isFlippedY() {
         return this._flip.y === true;
     }
@@ -378,9 +368,9 @@ class Renderable extends Rect {
     /**
      * returns the bounding box for this renderable
      * @name getBounds
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
-     * @returns {me.Bounds} bounding box Rectangle object
+     * @returns {Bounds} bounding box Rectangle object
      */
     getBounds() {
         if (typeof this._bounds === "undefined") {
@@ -399,7 +389,7 @@ class Renderable extends Rect {
     /**
      * get the renderable alpha channel value<br>
      * @name getOpacity
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @returns {number} current opacity value between 0 and 1
      */
@@ -410,7 +400,7 @@ class Renderable extends Rect {
     /**
      * set the renderable alpha channel value<br>
      * @name setOpacity
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @param {number} alpha opacity value between 0.0 and 1.0
      */
@@ -427,12 +417,12 @@ class Renderable extends Rect {
 
     /**
      * flip the renderable on the horizontal axis (around the center of the renderable)
-     * @see me.Matrix2d#scaleX
+     * @see Matrix2d#scaleX
      * @name flipX
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @param {boolean} [flip=true] `true` to flip this renderable.
-     * @returns {me.Renderable} Reference to this object for method chaining
+     * @returns {Renderable} Reference to this object for method chaining
      */
     flipX(flip = true) {
         this._flip.x = !!flip;
@@ -442,12 +432,12 @@ class Renderable extends Rect {
 
     /**
      * flip the renderable on the vertical axis (around the center of the renderable)
-     * @see me.Matrix2d#scaleY
+     * @see Matrix2d#scaleY
      * @name flipY
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @param {boolean} [flip=true] `true` to flip this renderable.
-     * @returns {me.Renderable} Reference to this object for method chaining
+     * @returns {Renderable} Reference to this object for method chaining
      */
     flipY(flip = true) {
         this._flip.y = !!flip;
@@ -458,11 +448,11 @@ class Renderable extends Rect {
     /**
      * multiply the renderable currentTransform with the given matrix
      * @name transform
-     * @memberof me.Renderable.prototype
-     * @see me.Renderable#currentTransform
+     * @memberof Renderable.prototype
+     * @see Renderable#currentTransform
      * @function
-     * @param {me.Matrix2d} m the transformation matrix
-     * @returns {me.Renderable} Reference to this object for method chaining
+     * @param {Matrix2d} m the transformation matrix
+     * @returns {Renderable} Reference to this object for method chaining
      */
     transform(m) {
         this.currentTransform.multiply(m);
@@ -475,9 +465,9 @@ class Renderable extends Rect {
     /**
      * return the angle to the specified target
      * @name angleTo
-     * @memberof me.Renderable
+     * @memberof Renderable
      * @function
-     * @param {me.Renderable|me.Vector2d|me.Vector3d} target
+     * @param {Renderable|Vector2d|Vector3d} target
      * @returns {number} angle in radians
      */
     angleTo(target) {
@@ -499,9 +489,9 @@ class Renderable extends Rect {
     /**
      * return the distance to the specified target
      * @name distanceTo
-     * @memberof me.Renderable
+     * @memberof Renderable
      * @function
-     * @param {me.Renderable|me.Vector2d|me.Vector3d} target
+     * @param {Renderable|Vector2d|Vector3d} target
      * @returns {number} distance
      */
     distanceTo(target) {
@@ -523,10 +513,10 @@ class Renderable extends Rect {
     /**
      * Rotate this renderable towards the given target.
      * @name lookAt
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
-     * @param {me.Renderable|me.Vector2d|me.Vector3d} target the renderable or position to look at
-     * @returns {me.Renderable} Reference to this object for method chaining
+     * @param {Renderable|Vector2d|Vector3d} target the renderable or position to look at
+     * @returns {Renderable} Reference to this object for method chaining
      */
     lookAt(target) {
         var position;
@@ -547,11 +537,11 @@ class Renderable extends Rect {
     /**
      * Rotate this renderable by the specified angle (in radians).
      * @name rotate
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @param {number} angle The angle to rotate (in radians)
-     * @param {me.Vector2d|me.ObservableVector2d} [v] an optional point to rotate around
-     * @returns {me.Renderable} Reference to this object for method chaining
+     * @param {Vector2d|ObservableVector2d} [v] an optional point to rotate around
+     * @returns {Renderable} Reference to this object for method chaining
      */
     rotate(angle, v) {
         if (!isNaN(angle)) {
@@ -569,11 +559,11 @@ class Renderable extends Rect {
      * is an image, the image.width and image.height properties are unaltered but the currentTransform
      * member will be changed.
      * @name scale
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @param {number} x a number representing the abscissa of the scaling vector.
      * @param {number} [y=x] a number representing the ordinate of the scaling vector.
-     * @returns {me.Renderable} Reference to this object for method chaining
+     * @returns {Renderable} Reference to this object for method chaining
      */
     scale(x, y) {
         this.currentTransform.scale(x, y);
@@ -585,10 +575,10 @@ class Renderable extends Rect {
     /**
      * scale the renderable around his anchor point
      * @name scaleV
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
-     * @param {me.Vector2d} v scaling vector
-     * @returns {me.Renderable} Reference to this object for method chaining
+     * @param {Vector2d} v scaling vector
+     * @returns {Renderable} Reference to this object for method chaining
      */
     scaleV(v) {
         this.scale(v.x, v.y);
@@ -597,15 +587,15 @@ class Renderable extends Rect {
 
     /**
      * update function. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name update
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @protected
      * @param {number} dt time since the last update in milliseconds.
      * @returns {boolean} true if the renderable is dirty
      */
-    update(/* dt */) {
+    update(dt) { // eslint-disable-line no-unused-vars
         return this.isDirty;
     }
 
@@ -613,9 +603,9 @@ class Renderable extends Rect {
      * update the bounding box for this shape.
      * @ignore
      * @name updateBounds
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
-     * @returns {me.Bounds} this shape bounding box Rectangle object
+     * @returns {Bounds} this shape bounding box Rectangle object
      */
     updateBounds() {
         super.updateBounds();
@@ -627,7 +617,7 @@ class Renderable extends Rect {
      * update the renderable's bounding rect (private)
      * @ignore
      * @name updateBoundsPos
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      */
      updateBoundsPos(newX, newY) {
@@ -659,9 +649,9 @@ class Renderable extends Rect {
      /**
       * return the renderable absolute position in the game world
       * @name getAbsolutePosition
-      * @memberof me.Renderable.prototype
+      * @memberof Renderable.prototype
       * @function
-      * @returns {me.Vector2d}
+      * @returns {Vector2d}
       */
       getAbsolutePosition() {
           if (typeof this._absPos === "undefined") {
@@ -679,7 +669,7 @@ class Renderable extends Rect {
      * called when the anchor point value is changed
      * @private
      * @name onAnchorUpdate
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @param {number} x the new X value to be set for the anchor
      * @param {number} y the new Y value to be set for the anchor
@@ -695,12 +685,12 @@ class Renderable extends Rect {
     /**
      * prepare the rendering context before drawing
      * (apply defined transforms, anchor point). <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name preDraw
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @protected
-     * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
     preDraw(renderer) {
         var bounds = this.getBounds();
@@ -746,28 +736,27 @@ class Renderable extends Rect {
 
     /**
      * object draw. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name draw
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @protected
-     * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
-    draw(/*renderer*/) {
+    draw(renderer) {  // eslint-disable-line no-unused-vars
         // empty one !
     }
 
     /**
      * restore the rendering context after drawing. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name postDraw
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
      * @protected
-     * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
     postDraw(renderer) {
-
         // remove the previously applied tint
         renderer.clearTint();
 
@@ -787,10 +776,10 @@ class Renderable extends Rect {
      * onCollision callback, triggered in case of collision,
      * when this renderable body is colliding with another one
      * @name onCollision
-     * @memberof me.Renderable.prototype
+     * @memberof 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)
+     * @param {collision.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
      * // colision handler
@@ -864,7 +853,7 @@ class Renderable extends Rect {
      * OnDestroy Notification function<br>
      * Called by engine before deleting the object
      * @name onDestroyEvent
-     * @memberof me.Renderable
+     * @memberof Renderable
      * @function
      */
     onDestroyEvent() {