melonjs 14.3.0 → 14.5.0

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

@@ -1,9 +1,9 @@
 /*!
- * melonJS Game Engine - v14.3.0
+ * melonJS Game Engine - v14.5.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
  */
 import Renderable from './renderable.js';
 import utils from '../utils/utils.js';
@@ -136,7 +136,13 @@ let globalFloatingCounter = 0;
         // subscribe on the canvas resize event
         if (this.root === true) {
             // Workaround for not updating container child-bounds automatically (it's expensive!)
-            on(CANVAS_ONRESIZE, this.updateBounds.bind(this, true));
+            on(CANVAS_ONRESIZE, () => {
+                // temporarly enable the enableChildBoundsUpdate flag
+                this.enableChildBoundsUpdate === true;
+                // update bounds
+                this.updateBounds();
+                this.enableChildBoundsUpdate === false;
+            });
         }
     }
 
@@ -196,6 +202,10 @@ let globalFloatingCounter = 0;
 
         child.ancestor = this;
         this.getChildren().push(child);
+        if (typeof child.updateBounds === "function") {
+            // update child bounds to reflect the new ancestor
+            child.updateBounds();
+        }
 
         // set the child z value if required
         if (typeof(child.pos) !== "undefined") {
@@ -220,8 +230,8 @@ let globalFloatingCounter = 0;
         }
 
         // force bounds update if required
-        if (this.enableChildBoundsUpdate) {
-            this.updateBounds(true);
+        if (this.enableChildBoundsUpdate === true) {
+            this.updateBounds();
         }
 
         // if a physic body is defined, add it to the game world
@@ -269,8 +279,8 @@ let globalFloatingCounter = 0;
             }
 
             // force bounds update if required
-            if (this.enableChildBoundsUpdate) {
-                this.updateBounds(true);
+            if (this.enableChildBoundsUpdate === true) {
+                this.updateBounds();
             }
 
             // if a physic body is defined, add it to the game world
@@ -504,26 +514,25 @@ let globalFloatingCounter = 0;
     /**
      * update the bounding box for this shape.
      * @ignore
+     * @param {boolean} absolute - update the bounds size and position in (world) absolute coordinates
      * @returns {Bounds} this shape bounding box Rectangle object
      */
-    updateBounds(forceUpdateChildBounds = false) {
+    updateBounds(absolute = true) {
+        var bounds = this.getBounds();
 
         // call parent method
-        super.updateBounds();
+        super.updateBounds(absolute);
 
-        var bounds = this.getBounds();
-
-        if (forceUpdateChildBounds === true || this.enableChildBoundsUpdate === true) {
+        if (this.enableChildBoundsUpdate === true) {
             this.forEach((child) => {
                 if (child.isRenderable) {
                     var childBounds = child.getBounds();
                     if (childBounds.isFinite()) {
-                        bounds.addBounds(child.getBounds());
+                        bounds.addBounds(childBounds);
                     }
                 }
             });
         }
-
         return bounds;
     }
 
@@ -551,7 +560,7 @@ let globalFloatingCounter = 0;
      * update the cointainer's bounding rect (private)
      * @ignore
      */
-    updateBoundsPos(newX, newY) {
+    updateBoundsPos(newX = this.pos.x, newY = this.pos.y) {
         // call the parent method
         super.updateBoundsPos(newX, newY);
 
@@ -559,14 +568,11 @@ let globalFloatingCounter = 0;
         this.forEach((child) => {
             if (child.isRenderable) {
                 child.updateBoundsPos(
-                    // workaround on this.pos being updated after
-                    // the callback being triggered
                     child.pos.x + newX - this.pos.x,
                     child.pos.y + newY - this.pos.y
                 );
             }
         });
-        return this.getBounds();
     }
 
     /**
@@ -638,8 +644,8 @@ let globalFloatingCounter = 0;
             }
 
             // force bounds update if required
-            if (this.enableChildBoundsUpdate) {
-                this.updateBounds(true);
+            if (this.enableChildBoundsUpdate === true) {
+                this.updateBounds();
             }
 
             // triggered callback if defined

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

@@ -1,9 +1,9 @@
 /*!
- * melonJS Game Engine - v14.3.0
+ * melonJS Game Engine - v14.5.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
  */
 import Vector2d from '../math/vector2.js';
 import { emit, DRAGSTART, DRAGEND, on, POINTERMOVE, off } from '../system/event.js';

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

@@ -1,9 +1,9 @@
 /*!
- * melonJS Game Engine - v14.3.0
+ * melonJS Game Engine - v14.5.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
  */
 import { renderer } from '../video/video.js';
 import { on, ONCONTEXT_RESTORED, VIEWPORT_ONCHANGE, VIEWPORT_ONRESIZE, once, off, LEVEL_LOADED } from '../system/event.js';
@@ -241,11 +241,17 @@ import { isNumeric } from '../utils/string.js';
     preDraw(renderer) {
         // save the context
         renderer.save();
+
         // apply the defined alpha value
         renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
 
         // apply the defined tint, if any
         renderer.setTint(this.tint);
+
+        // apply blending if different from "normal"
+        if (this.blendMode !== renderer.getBlendMode()) {
+            renderer.setBlendMode(this.blendMode);
+        }
     }
 
     /**

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

@@ -1,9 +1,9 @@
 /*!
- * melonJS Game Engine - v14.3.0
+ * melonJS Game Engine - v14.5.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
  */
 import pool from '../system/pooling.js';
 import Renderable from './renderable.js';

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

@@ -1,9 +1,9 @@
 /*!
- * melonJS Game Engine - v14.3.0
+ * melonJS Game Engine - v14.5.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
  */
 import Sprite from './sprite.js';
 

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

@@ -1,9 +1,9 @@
 /*!
- * melonJS Game Engine - v14.3.0
+ * melonJS Game Engine - v14.5.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
  */
 import ObservableVector2d from '../math/observable_vector2.js';
 import ObservableVector3d from '../math/observable_vector3.js';
@@ -30,18 +30,42 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
         // parent constructor
         super(x, y, width, height);
 
-        /**
-         * to identify the object as a renderable object
-         * @ignore
-         */
-        this.isRenderable = true;
+        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}
+             */
+            this.pos = pool.pull("ObservableVector3d", x, y, 0, { onUpdate: this.updateBoundsPos, scope: this});
+        }
 
-        /**
-         * If true then physic collision and input events will not impact this renderable
-         * @type {boolean}
-         * @default true
-         */
-        this.isKinematic = true;
+        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>
+             * @type {ObservableVector2d}
+             * @default <0.5,0.5>
+             */
+            this.anchorPoint = pool.pull("ObservableVector2d", 0.5, 0.5, { onUpdate: this.onAnchorUpdate, scope: this });
+        }
+
+        if (typeof this.currentTransform === "undefined") {
+            /**
+             * the renderable default transformation matrix
+             * @type {Matrix2d}
+             */
+            this.currentTransform = pool.pull("Matrix2d");
+        }
+        this.currentTransform.identity();
 
         /**
          * the renderable physic body
@@ -80,15 +104,6 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
          */
         this.body = undefined;
 
-        if (typeof this.currentTransform === "undefined") {
-            /**
-             * the renderable default transformation matrix
-             * @type {Matrix2d}
-             */
-            this.currentTransform = pool.pull("Matrix2d");
-        }
-        this.currentTransform.identity();
-
        /**
         * (G)ame (U)nique (Id)entifier" <br>
         * a GUID will be allocated for any renderable object added <br>
@@ -139,23 +154,6 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
          */
         this.floating = false;
 
-        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>
-             * @type {ObservableVector2d}
-             * @default <0.5,0.5>
-             */
-            this.anchorPoint = pool.pull("ObservableVector2d", 0.5, 0.5, { onUpdate: this.onAnchorUpdate, scope: this });
-        }
-
         /**
          * When enabled, an object container will automatically apply
          * any defined transformation before calling the child draw method.
@@ -231,23 +229,25 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
          */
         this.name = "";
 
-        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}
-             */
-            this.pos = pool.pull("ObservableVector3d", x, y, 0, { onUpdate: this.updateBoundsPos, scope: this});
-        }
+        /**
+         * to identify the object as a renderable object
+         * @ignore
+         */
+        this.isRenderable = true;
+
+        /**
+         * If true then physic collision and input events will not impact this renderable
+         * @type {boolean}
+         * @default true
+         */
+        this.isKinematic = true;
 
         /**
          * when true the renderable will be redrawn during the next update cycle
          * @type {boolean}
-         * @default false
+         * @default true
          */
-        this.isDirty = false;
+        this.isDirty = true;
 
         // keep track of when we flip
         this._flip = {
@@ -344,7 +344,7 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
         if (typeof this._bounds === "undefined") {
             super.getBounds();
             if (this.isFinite()) {
-                this._bounds.setMinMax(this.pos.x, this.pos.y, this.pos.x + this.width, this.pos.y + this.height);
+                this.updateBounds();
             } else {
                 // e.g. containers or game world can have infinite size
                 this._bounds.setMinMax(this.pos.x, this.pos.y, this.width, this.height);
@@ -384,8 +384,11 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @returns {Renderable} Reference to this object for method chaining
      */
     flipX(flip = true) {
-        this._flip.x = !!flip;
-        this.isDirty = true;
+        if (this.isFlippedX !== flip) {
+            this._flip.x = !!flip;
+            this.scale(-1, 1);
+            this.isDirty = true;
+        }
         return this;
     }
 
@@ -396,8 +399,11 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @returns {Renderable} Reference to this object for method chaining
      */
     flipY(flip = true) {
-        this._flip.y = !!flip;
-        this.isDirty = true;
+        if (this.isFlippedY !== flip) {
+            this._flip.y = !!flip;
+            this.scale(1, -1);
+            this.isDirty = true;
+        }
         return this;
     }
 
@@ -409,8 +415,7 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      */
     transform(m) {
         this.currentTransform.multiply(m);
-        //super.transform(m);
-        this.updateBoundsPos(this.pos.x, this.pos.y);
+        this.updateBounds();
         this.isDirty = true;
         return this;
     }
@@ -485,9 +490,9 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @returns {Renderable} Reference to this object for method chaining
      */
     rotate(angle, v) {
-        if (!isNaN(angle)) {
+        if (angle !== 0) {
             this.currentTransform.rotate(angle, v);
-            //this.updateBoundsPos(this.pos.x, this.pos.y);
+            this.updateBounds();
             this.isDirty = true;
         }
         return this;
@@ -503,9 +508,9 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @param {number} [y=x] - a number representing the ordinate of the scaling vector.
      * @returns {Renderable} Reference to this object for method chaining
      */
-    scale(x, y) {
+    scale(x, y = x) {
         this.currentTransform.scale(x, y);
-        super.scale(x, y);
+        this.updateBounds();
         this.isDirty = true;
         return this;
     }
@@ -531,44 +536,68 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
 
     /**
      * update the bounding box for this shape.
-     * @ignore
+     * @param {boolean} [absolute=true] - update the bounds size and position in (world) absolute coordinates
      * @returns {Bounds} this shape bounding box Rectangle object
      */
-    updateBounds() {
-        super.updateBounds();
-        this.updateBoundsPos(this.pos.x, this.pos.y);
-        return this.getBounds();
+    updateBounds(absolute = true) {
+        if (this.isRenderable) {
+            var bounds = this.getBounds();
+
+            bounds.clear();
+
+            if ((this.autoTransform === true) && (!this.currentTransform.isIdentity())) {
+                // temporarly translate the matrix based on the anchor point
+                this.currentTransform.translate(
+                    -this.width * this.anchorPoint.x,
+                    -this.height * this.anchorPoint.y
+                );
+                bounds.addFrame(
+                    0,
+                    0,
+                    this.width,
+                    this.height,
+                    this.currentTransform
+                );
+                this.currentTransform.translate(
+                    this.width * this.anchorPoint.x,
+                    this.height * this.anchorPoint.y
+                );
+            } else {
+                bounds.addFrame(
+                    0,
+                    0,
+                    this.width,
+                    this.height
+                );
+                // translate the bounds based on the anchor point
+                bounds.translate(
+                    -this.width * this.anchorPoint.x,
+                    -this.height * this.anchorPoint.y
+                );
+            }
+
+            if (absolute === true) {
+                bounds.centerOn(this.pos.x + bounds.x + bounds.width / 2,  this.pos.y + bounds.y + bounds.height / 2);
+                if (typeof this.ancestor !== "undefined" && typeof this.ancestor.addChild === "function" && this.floating !== true) {
+                     bounds.translate(this.ancestor.getAbsolutePosition());
+                }
+
+            }
+            return bounds;
+
+        } else {
+            // manage the case where updateBounds is called
+            // before the object being yet properly initialized
+            return super.updateBounds(absolute);
+        }
     }
 
     /**
      * update the renderable's bounding rect (private)
      * @ignore
      */
-     updateBoundsPos(newX, newY) {
-         var bounds = this.getBounds();
-
-         bounds.shift(newX, newY);
-
-         if (typeof this.anchorPoint !== "undefined" && bounds.isFinite()) {
-             bounds.translate(
-                 -(this.anchorPoint.x * bounds.width),
-                 -(this.anchorPoint.y * bounds.height)
-             );
-         }
-
-         /*
-         if (typeof this.body !== "undefined") {
-              var bodyBounds = this.body.getBounds();
-              bounds.translate(bodyBounds.x, bodyBounds.y);
-         }
-         */
-
-         // XXX: This is called from the constructor, before it gets an ancestor
-         if (typeof this.ancestor !== "undefined" && typeof this.ancestor.addChild === "function" && this.floating !== true) {
-             bounds.translate(this.ancestor.getAbsolutePosition());
-         }
-
-         this.isDirty = true;
+     updateBoundsPos(newX = this.pos.x, newY = this.pos.y) {
+        this.getBounds().translate(newX - this.pos.x, newY - this.pos.y);
      }
 
      /**
@@ -598,7 +627,10 @@ 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.updateBoundsPos(this.pos.x, this.pos.y);
+         this.updateBounds();
+         //console.log("hello");
+         this.isDirty = true;
      }
 
     /**
@@ -609,9 +641,8 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
      * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer object
      */
     preDraw(renderer) {
-        var bounds = this.getBounds();
-        var ax = bounds.width * this.anchorPoint.x,
-            ay = bounds.height * this.anchorPoint.y;
+        var ax = this.width * this.anchorPoint.x,
+            ay = this.height * this.anchorPoint.y;
 
         // save renderer context
         renderer.save();
@@ -619,16 +650,6 @@ import { releaseAllPointerEvents } from '../input/pointerevent.js';
         // apply the defined alpha value
         renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
 
-        // apply flip
-        if (this._flip.x || this._flip.y) {
-            var dx = this._flip.x ? this.centerX - ax : 0,
-                dy = this._flip.y ? this.centerY - ay : 0;
-
-            renderer.translate(dx, dy);
-            renderer.scale(this._flip.x  ? -1 : 1, this._flip.y  ? -1 : 1);
-            renderer.translate(-dx, -dy);
-        }
-
         // apply stencil mask if defined
         if (typeof this.mask !== "undefined") {
             renderer.translate(this.pos.x, this.pos.y);