melonjs 13.4.0 → 14.0.0

package/src/physics/world.js

@@ -194,7 +194,7 @@ class World extends Container {
                     if (body.update(dt) === true) {
                         // mark ancestor as dirty
                         ancestor.isDirty = true;
-                    };
+                    }
                     // handle collisions against other objects
                     collisionCheck(ancestor);
                     // clear body force
@@ -207,6 +207,6 @@ class World extends Container {
         return super.update(dt);
     }
 
-};
+}
 
 export default World;

package/src/polyfill/performance.js

@@ -8,7 +8,7 @@ Date.now = (Date.now || function () {  // thanks IE8
 
 if ("now" in globalThis.performance === false) {
 
-    var nowOffset = Date.now();
+    let nowOffset = Date.now();
 
     if (performance.timing && performance.timing.navigationStart) {
       nowOffset = performance.timing.navigationStart;

package/src/polyfill/requestAnimationFrame.js

@@ -22,7 +22,7 @@ if (!requestAnimationFrame || !cancelAnimationFrame) {
     requestAnimationFrame = function (callback) {
         var currTime = globalThis.performance.now();
         var timeToCall = Math.max(0, (1000 / timer.maxfps) - (currTime - lastTime));
-        var id = globalThis.setTimeout(function () {
+        var id = globalThis.setTimeout(() => {
             callback(currTime + timeToCall);
         }, timeToCall);
         lastTime = currTime + timeToCall;

package/src/renderable/collectable.js

@@ -48,6 +48,6 @@ class Collectable extends Sprite {
 
     }
 
-};
+}
 
 export default Collectable;

package/src/renderable/colorlayer.js

@@ -67,6 +67,6 @@ class ColorLayer extends Renderable {
         super.destroy();
     }
 
-};
+}
 
 export default ColorLayer;

package/src/renderable/container.js

@@ -28,10 +28,14 @@ class Container extends Renderable {
      * @param {number} [width=game.viewport.width] width of the container
      * @param {number} [height=game.viewport.height] height of the container
      */
-    constructor(x = 0, y = 0, width = game.viewport.width, height = game.viewport.height, root = false) {
+    constructor(x = 0, y = 0, width, height, root = false) {
 
         // call the super constructor
-        super(x, y, width, height);
+        super(
+            x, y,
+            typeof width === "undefined" ? (typeof game.viewport !== "undefined" ? game.viewport.width : Infinity) : width,
+            typeof height === "undefined" ? (typeof game.viewport !== "undefined" ? game.viewport.height : Infinity) : height
+        );
 
         /**
          * keep track of pending sort
@@ -171,7 +175,7 @@ class Container extends Renderable {
             if (child && child.isPersistent !== true) {
                 this.removeChildNow(child);
             }
-        };
+        }
 
         if (typeof this.currentTransform !== "undefined") {
             // just reset some variables
@@ -912,10 +916,10 @@ class Container extends Renderable {
                 // check if object is in any active cameras
                 obj.inViewport = false;
                 // iterate through all cameras
-                state.current().cameras.forEach(function(camera) {
+                state.current().cameras.forEach((camera) => {
                     if (camera.isVisible(obj, isFloating)) {
                         obj.inViewport = true;
-                    };
+                    }
                 });
 
                 // update our object
@@ -1000,6 +1004,6 @@ class Container extends Renderable {
             }
         }
     }
-};
+}
 
 export default Container;

package/src/renderable/dragndrop.js

@@ -109,7 +109,7 @@ export class Draggable extends Renderable {
         input.releasePointerEvent("pointercancel", this);
         super.destroy();
     }
-};
+}
 
 /**
  * @classdesc
@@ -212,4 +212,4 @@ export class DropTarget extends Renderable {
         event.off(event.DRAGEND, this.checkOnMe);
         super.destroy();
     }
-};
+}

package/src/renderable/imagelayer.js

@@ -294,6 +294,5 @@ class ImageLayer extends Sprite {
         super.destroy();
     }
 
-};
-
+}
 export default ImageLayer;

package/src/renderable/light2d.js

@@ -143,5 +143,5 @@ class Light2d extends Renderable {
         this.visibleArea = undefined;
         super.destroy();
     }
-};
+}
 export default Light2d;

package/src/renderable/nineslicesprite.js

@@ -234,6 +234,5 @@ class NineSliceSprite extends Sprite {
             target_center_height  // dh
         );
     }
-};
-
+}
 export default NineSliceSprite;

package/src/renderable/renderable.js

@@ -770,7 +770,5 @@ class Renderable extends Rect {
         // to be extended !
     }
 
-};
-
-
+}
 export default Renderable;

package/src/renderable/sprite.js

@@ -200,7 +200,7 @@ class Sprite extends Renderable {
         // displaying order
         if (typeof settings.z !== "undefined") {
             this.pos.z = settings.z;
-        };
+        }
 
         // for sprite, addAnimation will return !=0
         if (this.addAnimation("default", null) !== 0) {
@@ -301,7 +301,7 @@ class Sprite extends Renderable {
         if (index == null) {
             index = [];
             // create a default animation with all frame
-            Object.keys(this.textureAtlas).forEach(function (v, i) {
+            Object.keys(this.textureAtlas).forEach((v, i) => {
                 index[i] = i;
             });
         }
@@ -641,6 +641,5 @@ class Sprite extends Renderable {
             w, h                         // dw,dh
         );
     }
-};
-
+}
 export default Sprite;

package/src/renderable/trigger.js

@@ -60,11 +60,11 @@ class Trigger extends Renderable {
             event: "level"
         };
 
-        [ "type", "container", "onLoaded", "flatten", "setViewportBounds", "to" ].forEach(function(property) {
+        [ "type", "container", "onLoaded", "flatten", "setViewportBounds", "to" ].forEach((property) => {
             if (typeof settings[property] !== "undefined") {
                 this.triggerSettings[property] = settings[property];
             }
-        }.bind(this));
+        });
 
         // add and configure the physic body
         var shape = settings.shapes;
@@ -144,6 +144,5 @@ class Trigger extends Renderable {
         return false;
     }
 
-};
-
+}
 export default Trigger;

package/src/renderable/ui/uibaseelement.js

@@ -0,0 +1,204 @@
+import Container from "./../container.js";
+import timer from "../../system/timer.js";
+import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js";
+
+/**
+ * @classdesc
+ * This is a basic clickable container which you can use in your game UI.
+ * Use this for example if you want to display a button which contains
+ * text and images.
+ * @augments Container
+ */
+class UIBaseElement extends Container {
+    /**
+     *
+     * @param {number} x The x position of the container
+     * @param {number} y The y position of the container
+     * @param {number} w width of the container (default: viewport width)
+     * @param {number} h height of the container (default: viewport height)
+     */
+    constructor(x, y, w, h) {
+        super(x, y, w, h);
+        /**
+         * object can be clicked or not
+         * @type {boolean}
+         */
+        this.isClickable = true;
+
+        /**
+         * Tap and hold threshold timeout in ms
+         * @type {number}
+         * @default 250
+         */
+        this.holdThreshold = 250;
+
+        /**
+         * object can be tap and hold
+         * @type {boolean}
+         * @default false
+         */
+        this.isHoldable = false;
+
+        /**
+         * true if the pointer is over the object
+         * @type {boolean}
+         * @default false
+         */
+        this.hover = false;
+
+        // object has been updated (clicked,etc..)
+        this.holdTimeout = null;
+        this.released = true;
+
+        // GUI items use screen coordinates
+        this.floating = true;
+
+        // enable event detection
+        this.isKinematic = false;
+    }
+
+    /**
+     * function callback for the pointerdown event
+     * @ignore
+     */
+    clicked(event) {
+        // Check if left mouse button is pressed
+        if (event.button === 0 && this.isClickable) {
+            this.dirty = true;
+            this.released = false;
+            if (this.isHoldable) {
+                if (this.holdTimeout !== null) {
+                    timer.clearTimeout(this.holdTimeout);
+                }
+                this.holdTimeout = timer.setTimeout(
+                    this.hold.bind(this),
+                    this.holdThreshold,
+                    false
+                );
+                this.released = false;
+            }
+            return this.onClick(event);
+        }
+    }
+
+    /**
+     * function called when the object is pressed (to be extended)
+     * @param {Pointer} event the event object
+     * @returns {boolean} return false if we need to stop propagating the event
+     */
+    onClick(event) { // eslint-disable-line no-unused-vars
+        return false;
+    }
+
+    /**
+     * function callback for the pointerEnter event
+     * @ignore
+     */
+    enter(event) {
+        this.hover = true;
+        this.dirty = true;
+        return this.onOver(event);
+    }
+
+    /**
+     * function called when the pointer is over the object
+     * @param {Pointer} event the event object
+     */
+    onOver(event) { // eslint-disable-line no-unused-vars
+        // to be extended
+    }
+
+    /**
+     * function callback for the pointerLeave event
+     * @ignore
+     */
+    leave(event) {
+        this.hover = false;
+        this.dirty = true;
+        this.release(event);
+        return this.onOut(event);
+    }
+
+    /**
+     * function called when the pointer is leaving the object area
+     * @param {Pointer} event the event object
+     */
+    onOut(event) { // eslint-disable-line no-unused-vars
+        // to be extended
+    }
+
+    /**
+     * function callback for the pointerup event
+     * @ignore
+     */
+    release(event) {
+        if (this.released === false) {
+            this.released = true;
+            this.dirty = true;
+            timer.clearTimeout(this.holdTimeout);
+            return this.onRelease(event);
+        }
+    }
+
+    /**
+     * function called when the object is pressed and released (to be extended)
+     * @returns {boolean} return false if we need to stop propagating the event
+     */
+    onRelease() {
+        return false;
+    }
+
+    /**
+     * function callback for the tap and hold timer event
+     * @ignore
+     */
+    hold() {
+        timer.clearTimeout(this.holdTimeout);
+        this.dirty = true;
+        if (!this.released) {
+            this.onHold();
+        }
+    }
+
+    /**
+     * function called when the object is pressed and held<br>
+     * to be extended <br>
+     */
+    onHold() {}
+
+    /**
+     * function called when added to the game world or a container
+     * @ignore
+     */
+    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() {
+        // release pointer events
+        releasePointerEvent("pointerdown", this.hitbox);
+        releasePointerEvent("pointerup", this);
+        releasePointerEvent("pointercancel", this);
+        releasePointerEvent("pointerenter", this);
+        releasePointerEvent("pointerleave", this);
+        timer.clearTimeout(this.holdTimeout);
+    }
+}
+export default UIBaseElement;

package/src/renderable/{GUI.js → ui/uispriteelement.js}

@@ -1,24 +1,20 @@
-import timer from "./../system/timer.js";
-import Sprite from "./sprite.js";
-import { registerPointerEvent, releasePointerEvent} from "./../input/input.js";
-
+import timer from "./../../system/timer.js";
+import Sprite from "./../sprite.js";
+import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js";
 
 /**
  * @classdesc
- * GUI Object<br>
- * A very basic object to manage GUI elements <br>
- * The object simply register on the "pointerdown" <br>
- * or "touchstart" event and call the onClick function"
+ *  This is a basic sprite based button which you can use in your Game UI.
  * @augments Sprite
  */
-class GUI_Object extends Sprite {
+class UISpriteElement extends Sprite {
     /**
      * @param {number} x the x coordinate of the GUI Object
      * @param {number} y the y coordinate of the GUI Object
      * @param {object} settings See {@link Sprite}
      * @example
      * // create a basic GUI Object
-     * class myButton extends GUI_Object {
+     * class myButton extends UISpriteElement {
      *    constructor(x, y) {
      *       var settings = {}
      *       settings.image = "button";
@@ -49,10 +45,8 @@ class GUI_Object extends Sprite {
 
         /**
          * object can be clicked or not
-         * @public
          * @type {boolean}
          * @default true
-         * @name GUI_Object#isClickable
          */
         this.isClickable = true;
 
@@ -60,25 +54,20 @@ class GUI_Object extends Sprite {
          * Tap and hold threshold timeout in ms
          * @type {number}
          * @default 250
-         * @name GUI_Object#holdThreshold
          */
         this.holdThreshold = 250;
 
         /**
          * object can be tap and hold
-         * @public
          * @type {boolean}
          * @default false
-         * @name GUI_Object#isHoldable
          */
         this.isHoldable = false;
 
         /**
          * true if the pointer is over the object
-         * @public
          * @type {boolean}
          * @default false
-         * @name GUI_Object#hover
          */
         this.hover = false;
 
@@ -115,9 +104,6 @@ class GUI_Object extends Sprite {
 
     /**
      * function called when the object is pressed (to be extended)
-     * @name onClick
-     * @memberof GUI_Object
-     * @public
      * @param {Pointer} event the event object
      * @returns {boolean} return false if we need to stop propagating the event
      */
@@ -137,9 +123,6 @@ class GUI_Object extends Sprite {
 
     /**
      * function called when the pointer is over the object
-     * @name onOver
-     * @memberof GUI_Object
-     * @public
      * @param {Pointer} event the event object
      */
     onOver(event) { // eslint-disable-line no-unused-vars
@@ -159,9 +142,6 @@ class GUI_Object extends Sprite {
 
     /**
      * function called when the pointer is leaving the object area
-     * @name onOut
-     * @memberof GUI_Object
-     * @public
      * @param {Pointer} event the event object
      */
     onOut(event) { // eslint-disable-line no-unused-vars
@@ -183,9 +163,6 @@ class GUI_Object extends Sprite {
 
     /**
      * function called when the object is pressed and released (to be extended)
-     * @name onRelease
-     * @memberof GUI_Object
-     * @public
      * @returns {boolean} return false if we need to stop propagating the event
      */
     onRelease() {
@@ -207,9 +184,6 @@ class GUI_Object extends Sprite {
     /**
      * function called when the object is pressed and held<br>
      * to be extended <br>
-     * @name onHold
-     * @memberof GUI_Object
-     * @public
      */
     onHold() {}
 
@@ -239,6 +213,5 @@ class GUI_Object extends Sprite {
         releasePointerEvent("pointerleave", this);
         timer.clearTimeout(this.holdTimeout);
     }
-};
-
-export default GUI_Object;
+}
+export default UISpriteElement;

package/src/renderable/ui/uitextbutton.js

@@ -0,0 +1,121 @@
+import Vector2d from "../../math/vector2.js";
+import BitmapText from "../../text/bitmaptext.js";
+import RoundRect from "../../geometries/roundrect.js";
+import UIBaseElement from "./uibaseelement.js";
+
+
+/**
+ * @classdesc
+ * This is a basic base text button which you can use in your Game UI.
+ * @augments UIBaseElement
+ */
+class UITextButton extends UIBaseElement {
+    /**
+     * A Text Button with an outlined background border, filled with background color.
+     * It uses a RoundRect as background and changes the background color on hovering over.
+     * The background will be drawn with 0.5 opacity, so that the background of the button is
+     * slightly shining through.
+     * @param {number} x x pos of the button
+     * @param {number} y y pos of the button
+     * @param {string} [settings.font] The name of the BitmapText font to use
+     * @param {number} [settings.size] The scale factor of the font (default: 1)
+     * @param {string} [settings.text] The text to display (default: 'click me')
+     * @param {string} [settings.bindKey] The key to bind the action to (default: none)
+     * @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
+     * @example
+     * // Create a new Button
+     * class PlayButton extends BaseTextButton {
+     *      constructor(x,y) {
+     *          super(x,y, {
+     *              font: 'my-font',
+     *              text: 'Play',
+     *              // if you omit the next two, size is calculated by the size of the text
+     *              borderWidth: 200,
+     *              borderHeight: 20,
+     *          });
+     *      }
+     *
+     *      onClick(){
+     *          state.change(state.PLAY);
+     *      }
+     * }
+     *
+     * game.world.addChild(new PlayButton(15,200));
+     */
+    constructor(x, y, settings) {
+        super(x, y);
+        settings.font = settings.font || "24Outline";
+        settings.size = settings.size || 1;
+        settings.text = settings.text || "<Click Me>";
+        settings.bindKey = settings.bindKey || -1;
+        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);
+
+        let font = new BitmapText(x, y, settings);
+        let dimensions = font.measureText();
+        settings.borderWidth = settings.borderWidth || dimensions.width + 16;
+        settings.borderHeight = settings.borderHeight || dimensions.height + 16;
+
+        let border = new RoundRect(
+            x,
+            y,
+            settings.borderWidth,
+            settings.borderHeight
+        );
+        super.setShape(
+            x,
+            y,
+            border.getBounds().width,
+            border.getBounds().height
+        );
+
+        // build up
+        this.font = font;
+        this.dimensions = dimensions;
+        this.border = border;
+        this.settings = settings;
+
+        // adjust text position
+        this.font.pos.set(
+            Math.round((border.width - dimensions.width) / 2) + this.font.pos.x,
+            Math.round((border.height - dimensions.height) / 2) +
+                this.font.pos.y
+        );
+    }
+
+    draw(renderer) {
+        renderer.setGlobalAlpha(0.5);
+        if (!this.hover) {
+            renderer.setColor(this.settings.backgroundColor);
+        } else {
+            renderer.setColor(this.settings.hoverColor);
+        }
+
+        renderer.fill(this.border);
+        renderer.setGlobalAlpha(1);
+        renderer.setColor(this.settings.borderStrokeColor);
+        renderer.stroke(this.border);
+
+        // fix: supporting tint
+        renderer.setTint(this.font.tint, this.font.getOpacity());
+        this.font.draw(
+            renderer,
+            this.settings.text,
+            this.font.pos.x,
+            this.font.pos.y
+        );
+    }
+}
+export default UITextButton;
+

package/src/state/stage.js

@@ -125,17 +125,17 @@ class Stage {
 
         // update the camera/viewport
         // iterate through all cameras
-        this.cameras.forEach(function(camera) {
+        this.cameras.forEach((camera) => {
             if (camera.update(dt) === true) {
                 isDirty = true;
-            };
+            }
         });
 
         // update all lights
         this.lights.forEach((light) => {
             if (light.update(dt) === true) {
                 isDirty = true;
-            };
+            }
         });
 
         return isDirty;
@@ -224,6 +224,5 @@ class Stage {
             this.settings.onDestroyEvent.apply(this, arguments);
         }
     }
-};
-
+}
 export default Stage;