melonjs 14.0.2 → 14.1.1

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

@@ -0,0 +1,156 @@
+/*!
+ * melonJS Game Engine - v14.1.1
+ * 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)
+ */
+import Renderable from './renderable.js';
+import collision from '../physics/collision.js';
+import Body from '../physics/body.js';
+import level from '../level/level.js';
+import game from '../game.js';
+import pool from '../system/pooling.js';
+
+/**
+ * @classdesc
+ * trigger an event when colliding with another object
+ * @augments Renderable
+ */
+ class Trigger extends Renderable {
+    /**
+     * @param {number} x - the x coordinates of the trigger area
+     * @param {number} y - the y coordinates of the trigger area
+     * @param {number} [settings.width] - width of the trigger area
+     * @param {number} [settings.height] - height of the trigger area
+     * @param {Rect[]|Polygon[]|Line[]|Ellipse[]} [settings.shapes] - collision shape(s) that will trigger the event
+     * @param {string} [settings.duration] - Fade duration (in ms)
+     * @param {string|Color} [settings.color] - Fade color
+     * @param {string} [settings.event="level"] - the type of event to trigger (only "level" supported for now)
+     * @param {string} [settings.to] - level to load if level trigger
+     * @param {string|Container} [settings.container] - Target container. See {@link level.load}
+     * @param {Function} [settings.onLoaded] - Level loaded callback. See {@link level.load}
+     * @param {boolean} [settings.flatten] - Flatten all objects into the target container. See {@link level.load}
+     * @param {boolean} [settings.setViewportBounds] - Resize the viewport to match the level. See {@link level.load}
+     * @example
+     * me.game.world.addChild(new me.Trigger(
+     *     x, y, {
+     *         shapes: [new me.Rect(0, 0, 100, 100)],
+     *         "duration" : 250,
+     *         "color" : "#000",
+     *         "to" : "mymap2"
+     *     }
+     * ));
+     */
+    constructor(x, y, settings) {
+        // call the parent constructor
+        super(x, y, settings.width || 0, settings.height || 0);
+
+        // for backward compatibility
+        this.anchorPoint.set(0, 0);
+
+        this.fade = settings.fade;
+        this.duration = settings.duration;
+        this.fading = false;
+
+        // Tiled Settings
+        this.name = "Trigger";
+        this.type = settings.type;
+        this.id = settings.id;
+
+        // a temp variable
+        this.gotolevel = settings.to;
+
+        // Collect the defined trigger settings
+        this.triggerSettings = {
+            // the default (and only for now) action
+            event: "level"
+        };
+
+        [ "type", "container", "onLoaded", "flatten", "setViewportBounds", "to" ].forEach((property) => {
+            if (typeof settings[property] !== "undefined") {
+                this.triggerSettings[property] = settings[property];
+            }
+        });
+
+        // add and configure the physic body
+        var shape = settings.shapes;
+        if (typeof shape === "undefined") {
+            shape = pool.pull("Polygon", 0, 0, [
+                pool.pull("Vector2d", 0,          0),
+                pool.pull("Vector2d", this.width, 0),
+                pool.pull("Vector2d", this.width, this.height)
+            ]);
+        }
+        this.body = new Body(this, shape);
+        this.body.collisionType = collision.types.ACTION_OBJECT;
+        // by default only collides with PLAYER_OBJECT
+        this.body.setCollisionMask(collision.types.PLAYER_OBJECT);
+        this.body.setStatic(true);
+        this.resize(this.body.getBounds().width, this.body.getBounds().height);
+    }
+
+    /**
+     * @ignore
+     */
+     getTriggerSettings() {
+         // Lookup for the container instance
+         if (typeof(this.triggerSettings.container) === "string") {
+             this.triggerSettings.container = game.world.getChildByName(this.triggerSettings.container)[0];
+         }
+         return this.triggerSettings;
+     }
+
+    /**
+     * @ignore
+     */
+    onFadeComplete() {
+        level.load(this.gotolevel, this.getTriggerSettings());
+        game.viewport.fadeOut(this.fade, this.duration);
+    }
+
+    /**
+     * trigger this event
+     * @name triggerEvent
+     * @memberof Trigger
+     * @protected
+     */
+    triggerEvent() {
+        var triggerSettings = this.getTriggerSettings();
+
+        if (triggerSettings.event === "level") {
+            this.gotolevel = triggerSettings.to;
+            // load a level
+            //console.log("going to : ", to);
+            if (this.fade && this.duration) {
+                if (!this.fading) {
+                    this.fading = true;
+                    game.viewport.fadeIn(this.fade, this.duration,
+                            this.onFadeComplete.bind(this));
+                }
+            } else {
+                level.load(this.gotolevel, triggerSettings);
+            }
+        } else {
+            throw new Error("Trigger invalid type");
+        }
+    }
+
+    /**
+     * onCollision callback, triggered in case of collision with this trigger
+     * @name onCollision
+     * @memberof Trigger
+     * @param {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)
+     */
+    onCollision(response, other) { // eslint-disable-line no-unused-vars
+        if (this.name === "Trigger") {
+            this.triggerEvent.apply(this);
+        }
+        return false;
+    }
+
+}
+
+export { Trigger as default };

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

@@ -0,0 +1,212 @@
+/*!
+ * melonJS Game Engine - v14.1.1
+ * 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)
+ */
+import Container from '../container.js';
+import timer from '../../system/timer.js';
+import { registerPointerEvent, releasePointerEvent } from '../../input/pointerevent.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 { UIBaseElement as default };

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

@@ -0,0 +1,225 @@
+/*!
+ * melonJS Game Engine - v14.1.1
+ * 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)
+ */
+import timer from '../../system/timer.js';
+import Sprite from '../sprite.js';
+import { registerPointerEvent, releasePointerEvent } from '../../input/pointerevent.js';
+
+/**
+ * @classdesc
+ *  This is a basic sprite based button which you can use in your Game UI.
+ * @augments 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 UISpriteElement {
+     *    constructor(x, y) {
+     *       var settings = {}
+     *       settings.image = "button";
+     *       settings.framewidth = 100;
+     *       settings.frameheight = 50;
+     *       // super constructor
+     *       super(x, y, settings);
+     *       // define the object z order
+     *       this.pos.z = 4;
+     *    }
+     *
+     *    // output something in the console
+     *    // when the object is clicked
+     *    onClick:function (event) {
+     *       console.log("clicked!");
+     *       // don't propagate the event
+     *       return false;
+     *    }
+     * });
+     *
+     * // add the object at pos (10,10)
+     * me.game.world.addChild(new myButton(10,10));
+     */
+    constructor(x, y, settings) {
+
+        // call the parent constructor
+        super(x, y, settings);
+
+        /**
+         * object can be clicked or not
+         * @type {boolean}
+         * @default true
+         */
+        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);
+        releasePointerEvent("pointerup", this);
+        releasePointerEvent("pointercancel", this);
+        releasePointerEvent("pointerenter", this);
+        releasePointerEvent("pointerleave", this);
+        timer.clearTimeout(this.holdTimeout);
+    }
+}
+
+export { UISpriteElement as default };