melonjs 14.4.0 → 15.0.0

package/src/renderable/renderable.js

@@ -23,18 +23,42 @@ import Color from "./../math/color.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
@@ -73,15 +97,6 @@ import Color from "./../math/color.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>
@@ -132,23 +147,6 @@ import Color from "./../math/color.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.
@@ -208,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}
@@ -224,23 +229,25 @@ import Color from "./../math/color.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 = {
@@ -337,7 +344,7 @@ import Color from "./../math/color.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);
@@ -377,8 +384,11 @@ import Color from "./../math/color.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;
     }
 
@@ -389,8 +399,11 @@ import Color from "./../math/color.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;
     }
 
@@ -402,8 +415,7 @@ import Color from "./../math/color.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;
     }
@@ -478,9 +490,9 @@ import Color from "./../math/color.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;
@@ -496,9 +508,9 @@ import Color from "./../math/color.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;
     }
@@ -524,44 +536,68 @@ import Color from "./../math/color.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);
      }
 
      /**
@@ -591,7 +627,8 @@ 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();
+         this.isDirty = true;
      }
 
     /**
@@ -602,9 +639,8 @@ import Color from "./../math/color.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();
@@ -612,16 +648,6 @@ import Color from "./../math/color.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);
@@ -629,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);
@@ -680,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();
 
@@ -759,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;
+        }
     }
 
     /**

package/src/renderable/sprite.js

@@ -1,6 +1,6 @@
 import { renderer } from "./../video/video.js";
 import pool from "./../system/pooling.js";
-import loader from "./../loader/loader.js";
+import { getImage } from "./../loader/loader.js";
 import { TextureAtlas } from "./../video/texture/atlas.js";
 import Renderable from "./renderable.js";
 import Color from "../math/color.js";
@@ -95,7 +95,7 @@ import Color from "../math/color.js";
         // (reusing current, any better/cleaner place?)
         this.current = {
             // the current animation name
-            name : "default",
+            name : undefined,
             // length of the current animation name
             length : 0,
             //current frame texture offset
@@ -132,9 +132,6 @@ import Color from "../math/color.js";
                 if (region) {
                     // set the sprite region within the texture
                     this.setRegion(region);
-                    // update the default "current" frame size
-                    this.current.width = settings.framewidth || region.width;
-                    this.current.height = settings.frameheight || region.height;
                 } else {
                     // throw an error
                     throw new Error("Texture - region for " + settings.region + " not found");
@@ -142,14 +139,14 @@ import Color from "../math/color.js";
             }
         } else {
             // HTMLImageElement/Canvas or {string}
-            this.image = (typeof settings.image === "object") ? settings.image : loader.getImage(settings.image);
+            this.image = (typeof settings.image === "object") ? settings.image : getImage(settings.image);
             // throw an error if image ends up being null/undefined
             if (!this.image) {
                 throw new Error("me.Sprite: '" + settings.image + "' image/texture not found!");
             }
             // update the default "current" frame size
-            this.current.width = settings.framewidth = settings.framewidth || this.image.width;
-            this.current.height = settings.frameheight = settings.frameheight || this.image.height;
+            this.width = this.current.width = settings.framewidth = settings.framewidth || this.image.width;
+            this.height = this.current.height = settings.frameheight = settings.frameheight || this.image.height;
             this.source = renderer.cache.get(this.image, settings);
             this.textureAtlas = this.source.getAtlas();
         }
@@ -160,10 +157,6 @@ import Color from "../math/color.js";
             this.atlasIndices = settings.atlasIndices;
         }
 
-        // resize based on the active frame
-        this.width = this.current.width;
-        this.height = this.current.height;
-
         // apply flip flags if specified
         if (typeof (settings.flipX) !== "undefined") {
             this.flipX(!!settings.flipX);
@@ -202,14 +195,11 @@ import Color from "../math/color.js";
             this.pos.z = settings.z;
         }
 
-        // for sprite, addAnimation will return !=0
+        // addAnimation will return 0 if no texture atlas is defined
         if (this.addAnimation("default", null) !== 0) {
             // set as default
             this.setCurrentAnimation("default");
         }
-
-        // enable currentTransform for me.Sprite based objects
-        this.autoTransform = true;
     }
 
     /**
@@ -389,22 +379,24 @@ import Color from "../math/color.js";
      *    return false; // do not reset to first frame
      * }).bind(this));
      */
-    setCurrentAnimation(name, resetAnim, preserve_dt) {
-        if (this.anim[name]) {
-            this.current.name = name;
-            this.current.length = this.anim[this.current.name].length;
-            if (typeof resetAnim === "string") {
-                this.resetAnim = this.setCurrentAnimation.bind(this, resetAnim, null, true);
-            } else if (typeof resetAnim === "function") {
-                this.resetAnim = resetAnim;
-            } else {
-                this.resetAnim = undefined;
-            }
-            this.setAnimationFrame(this.current.idx);
-            if (!preserve_dt) {
-                this.dt = 0;
+    setCurrentAnimation(name, resetAnim, preserve_dt = false) {
+        if (typeof this.anim[name] !== "undefined") {
+            if (!this.isCurrentAnimation(name)) {
+                this.current.name = name;
+                this.current.length = this.anim[this.current.name].length;
+                if (typeof resetAnim === "string") {
+                    this.resetAnim = this.setCurrentAnimation.bind(this, resetAnim, null, true);
+                } else if (typeof resetAnim === "function") {
+                    this.resetAnim = resetAnim;
+                } else {
+                    this.resetAnim = undefined;
+                }
+                this.setAnimationFrame(0);
+                if (!preserve_dt) {
+                    this.dt = 0;
+                }
+                this.isDirty = true;
             }
-            this.isDirty = true;
         } else {
             throw new Error("animation id '" + name + "' not defined");
         }
@@ -461,17 +453,19 @@ import Color from "../math/color.js";
         // set the sprite offset within the texture
         this.current.offset.setV(region.offset);
         // set angle if defined
-        this.current.angle = region.angle;
+        this.current.angle = typeof region.angle === "number" ? region.angle : 0;
         // update the default "current" size
         this.width = this.current.width = region.width;
         this.height = this.current.height = region.height;
         // set global anchortPoint if defined
         if (region.anchorPoint) {
-            this.anchorPoint.set(
+            this.anchorPoint.setMuted(
                 this._flip.x && region.trimmed === true ? 1 - region.anchorPoint.x : region.anchorPoint.x,
                 this._flip.y && region.trimmed === true ? 1 - region.anchorPoint.y : region.anchorPoint.y
             );
         }
+        // update the sprite bounding box
+        this.updateBounds();
         this.isDirty = true;
         return this;
     }
@@ -480,14 +474,14 @@ import Color from "../math/color.js";
      * force the current animation frame index.
      * @name setAnimationFrame
      * @memberof Sprite
-     * @param {number} [idx=0] - animation frame index
+     * @param {number} [index=0] - animation frame index
      * @returns {Sprite} Reference to this object for method chaining
      * @example
      * // reset the current animation to the first frame
      * this.setAnimationFrame();
      */
-    setAnimationFrame(idx) {
-        this.current.idx = (idx || 0) % this.current.length;
+    setAnimationFrame(index = 0) {
+        this.current.idx = index % this.current.length;
         return this.setRegion(this.getAnimationFrameObjectByIndex(this.current.idx));
     }
 
@@ -524,14 +518,14 @@ import Color from "../math/color.js";
      */
     update(dt) {
         // Update animation if necessary
-        if (!this.animationpause && this.current && this.current.length > 0) {
+        if (!this.animationpause && this.current.length > 1) {
             var duration = this.getAnimationFrameObjectByIndex(this.current.idx).delay;
             this.dt += dt;
             while (this.dt >= duration) {
                 this.isDirty = true;
                 this.dt -= duration;
 
-                var nextFrame = (this.current.length > 1? this.current.idx+1: this.current.idx);
+                var nextFrame = (this.current.length > 1 ? this.current.idx + 1 : this.current.idx);
                 this.setAnimationFrame(nextFrame);
 
                 // Switch animation if we reach the end of the strip and a callback is defined
@@ -551,21 +545,6 @@ import Color from "../math/color.js";
             }
         }
 
-        // update the sprite bounding box
-        /*
-        if (this.isDirty === true && !this.currentTransform.isIdentity()) {
-            this.getBounds().clear();
-            this.getBounds().addFrame(
-                0,
-                0,
-                this.current.width,
-                this.current.height,
-                this.currentTransform
-            );
-            this.updateBoundsPos(this.pos.x, this.pos.y);
-        }
-        */
-
         //update the "flickering" state if necessary
         if (this._flicker.isFlickering) {
             this._flicker.duration -= dt;

package/src/renderable/ui/uitextbutton.js

@@ -24,7 +24,6 @@ import UIBaseElement from "./uibaseelement.js";
      * @param {string} [settings.backgroundColor] - The css value of a background color
      * @param {string} [settings.hoverColor] - The css value of a color to be used if the pointer hovers over the button
      * @param {string} [settings.borderStrokeColor] - The css value of a color to be used to draw the border
-     * @param {boolean} [settings.offScreenCanvas] - Weather to use an offScreen canvas or not
      * @param {string} [settings.fillStyle] - The css value of a tint color to be used to tint the text
      * @param {number} [settings.borderWidth] - Width of the button
      * @param {number} [settings.borderHeight] - Height of the button
@@ -57,7 +56,6 @@ import UIBaseElement from "./uibaseelement.js";
         settings.backgroundColor = settings.backgroundColor || "#00aa00";
         settings.hoverColor = settings.hoverColor || "#00ff00";
         settings.borderStrokeColor = settings.borderStrokeColor || "#000000";
-        settings.offScreenCanvas = settings.offScreenCanvas || false;
         settings.fillStyle = settings.fillStyle || "#ffffff";
         settings.lineWidth = settings.lineWidth || 1;
         settings.anchorPoint = settings.anchorPoint || new Vector2d(0, 0);

package/src/state/state.js

@@ -520,7 +520,7 @@ var state = {
     },
 
     /**
-     * enable/disable transition for a specific state (by default enabled for all)
+     * enable/disable the transition to a particular state (by default enabled for all)
      * @name setTransition
      * @memberof state
      * @public

package/src/system/device.js

@@ -100,7 +100,7 @@ export const pointerEvent = !!globalThis.PointerEvent;
  * @readonly
  * @public
  */
-export const touch = touchEvent || pointerEvent;
+export const touch = touchEvent || (pointerEvent && globalThis.navigator.maxTouchPoints > 0);
 
 /**
  * the maximum number of simultaneous touch contact points are supported by the current device.

package/src/system/pooling.js

@@ -28,14 +28,14 @@ class ObjectPool {
      * @param {boolean} [recycling=false] - enables object recycling for the specified class
      * @example
      * // implement CherryEntity
-     * class CherryEntity extends Spritesheet {
+     * class Cherry extends Sprite {
      *    onResetEvent() {
      *        // reset object mutable properties
      *        this.lifeBar = 100;
      *    }
      * };
      * // add our users defined entities in the object pool and enable object recycling
-     * me.pool.register("cherryentity", CherryEntity, true);
+     * me.pool.register("cherrysprite", Cherry, true);
      */
     register(className, classObj, recycling = false) {
          if (typeof (classObj) !== "undefined") {
@@ -69,11 +69,7 @@ class ObjectPool {
      * me.game.world.removeChild(enemy);
      * me.game.world.removeChild(bullet);
      */
-    pull(name) {
-        var args = new Array(arguments.length);
-        for (var i = 0; i < arguments.length; i++) {
-            args[i] = arguments[i];
-        }
+    pull(name, ...args) {
         var className = this.objectClass[name];
         if (className) {
             var proto = className["class"],
@@ -81,18 +77,12 @@ class ObjectPool {
                 obj;
 
             if (poolArray && ((obj = poolArray.pop()))) {
-                // pull an existing instance from the pool
-                args.shift();
-                // call the object onResetEvent function if defined
-                if (typeof(obj.onResetEvent) === "function") {
-                    obj.onResetEvent.apply(obj, args);
-                }
+                // poolable object must implement a `onResetEvent` method
+                obj.onResetEvent.apply(obj, args);
                 this.instance_counter--;
-            }
-            else {
+            } else {
                 // create a new instance
-                args[0] = proto;
-                obj = new (proto.bind.apply(proto, args))();
+                obj = new (proto.bind.apply(proto, [ proto, ...args ]))();
                 if (poolArray) {
                     obj.className = name;
                 }