melonjs 14.0.2 → 14.1.1

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

@@ -0,0 +1,224 @@
+/*!
+ * 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 Vector2d from '../math/vector2.js';
+import { emit, DRAGSTART, DRAGEND, on, POINTERMOVE, off } from '../system/event.js';
+import Renderable from './renderable.js';
+import { registerPointerEvent, releasePointerEvent } from '../input/pointerevent.js';
+
+/**
+ * @classdesc
+ * A Draggable base object
+ * @see DropTarget
+ * @augments Renderable
+ */
+class Draggable extends Renderable {
+    /**
+     * @param {number} x - the x coordinates of the draggable object
+     * @param {number} y - the y coordinates of the draggable object
+     * @param {number} width - draggable object width
+     * @param {number} height - draggable object height
+     */
+    constructor(x, y, width, height) {
+        super(x, y, width, height);
+        this.isKinematic = false;
+        this.dragging = false;
+        this.dragId = null;
+        this.grabOffset = new Vector2d(0, 0);
+        this.initEvents();
+    }
+
+    /**
+     * Initializes the events the modules needs to listen to
+     * It translates the pointer events to me.events
+     * in order to make them pass through the system and to make
+     * this module testable. Then we subscribe this module to the
+     * transformed events.
+     * @name initEvents
+     * @memberof Draggable
+     * @private
+     */
+    initEvents() {
+        registerPointerEvent("pointerdown", this, (e) => { emit(DRAGSTART, e, this); });
+        registerPointerEvent("pointerup", this,  (e) => { emit(DRAGEND, e, this); });
+        registerPointerEvent("pointercancel", this, (e) => { emit(DRAGEND, e, this); });
+        on(POINTERMOVE, this.dragMove.bind(this));
+        on(DRAGSTART, (e, draggable) => {
+            if (draggable === this) {
+                this.dragStart(e);
+            }
+        });
+        on(DRAGEND, (e, draggable) => {
+            if (draggable === this) {
+                this.dragEnd(e);
+            }
+        });
+    }
+
+    /**
+     * Gets called when the user starts dragging the entity
+     * @name dragStart
+     * @memberof Draggable
+     * @param {object} e - the pointer event
+     * @returns {boolean} false if the object is being dragged
+     */
+    dragStart(e) {
+        if (this.dragging === false) {
+            this.dragging = true;
+            this.grabOffset.set(e.gameX, e.gameY);
+            this.grabOffset.sub(this.pos);
+            return false;
+        }
+    }
+
+    /**
+     * Gets called when the user drags this entity around
+     * @name dragMove
+     * @memberof Draggable
+     * @param {object} e - the pointer event
+     */
+    dragMove(e) {
+        if (this.dragging === true) {
+            this.pos.set(e.gameX, e.gameY, this.pos.z); //TODO : z ?
+            this.pos.sub(this.grabOffset);
+        }
+    }
+
+    /**
+     * Gets called when the user stops dragging the entity
+     * @name dragEnd
+     * @memberof Draggable
+     * @returns {boolean} false if the object stopped being dragged
+     */
+    dragEnd() {
+        if (this.dragging === true) {
+            this.dragging = false;
+            return false;
+        }
+    }
+
+    /**
+     * Destructor
+     * @name destroy
+     * @memberof Draggable
+     * @ignore
+     */
+    destroy() {
+        off(POINTERMOVE, this.dragMove);
+        off(DRAGSTART, this.dragStart);
+        off(DRAGEND, this.dragEnd);
+        releasePointerEvent("pointerdown", this);
+        releasePointerEvent("pointerup", this);
+        releasePointerEvent("pointercancel", this);
+        super.destroy();
+    }
+}
+
+/**
+ * @classdesc
+ * a base drop target object
+ * @see Draggable
+ * @augments Renderable
+ */
+class DropTarget extends Renderable {
+    /**
+     * @param {number} x - the x coordinates of the drop target
+     * @param {number} y - the y coordinates of the drop target
+     * @param {number} width - drop target width
+     * @param {number} height - drop target height
+     */
+    constructor(x, y, width, height) {
+        super(x, y, width, height);
+
+        this.isKinematic = false;
+
+        /**
+         * constant for the overlaps method
+         * @public
+         * @constant
+         * @type {string}
+         * @name CHECKMETHOD_OVERLAP
+         * @memberof DropTarget
+         */
+        this.CHECKMETHOD_OVERLAP = "overlaps";
+
+        /**
+         * constant for the contains method
+         * @public
+         * @constant
+         * @type {string}
+         * @name CHECKMETHOD_CONTAINS
+         * @memberof DropTarget
+         */
+        this.CHECKMETHOD_CONTAINS = "contains";
+
+        /**
+         * the checkmethod we want to use
+         * @public
+         * @constant
+         * @type {string}
+         * @name checkMethod
+         * @default "overlaps"
+         * @memberof DropTarget
+         */
+        this.checkMethod = this.CHECKMETHOD_OVERLAP;
+
+        on(DRAGEND, this.checkOnMe, this);
+
+    }
+
+    /**
+     * Sets the collision method which is going to be used to check a valid drop
+     * @name setCheckMethod
+     * @memberof DropTarget
+     * @param {string} checkMethod - the checkmethod (defaults to CHECKMETHOD_OVERLAP)
+     */
+    setCheckMethod(checkMethod) {
+        //  We can improve this check,
+        //  because now you can use every method in theory
+        if (typeof(this.getBounds()[this.checkMethod]) === "function") {
+            this.checkMethod = checkMethod;
+        }
+    }
+
+    /**
+     * Checks if a dropped entity is dropped on the current entity
+     * @name checkOnMe
+     * @memberof DropTarget
+     * @param {object} e - the triggering event
+     * @param {Draggable} draggable - the draggable object that is dropped
+     */
+    checkOnMe(e, draggable) {
+        if (draggable && this.getBounds()[this.checkMethod](draggable.getBounds())) {
+            // call the drop method on the current entity
+            this.drop(draggable);
+        }
+    }
+
+    /**
+     * Gets called when a draggable entity is dropped on the current entity
+     * @name drop
+     * @memberof DropTarget
+     * @param {Draggable} draggable - the draggable object that is dropped
+     */
+    drop(draggable) {  // eslint-disable-line no-unused-vars
+
+    }
+
+    /**
+     * Destructor
+     * @name destroy
+     * @memberof DropTarget
+     * @ignore
+     */
+    destroy() {
+        off(DRAGEND, this.checkOnMe);
+        super.destroy();
+    }
+}
+
+export { Draggable, DropTarget };

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

@@ -0,0 +1,305 @@
+/*!
+ * 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 { renderer } from '../video/video.js';
+import { on, ONCONTEXT_RESTORED, VIEWPORT_ONCHANGE, VIEWPORT_ONRESIZE, once, off, LEVEL_LOADED } from '../system/event.js';
+import pool from '../system/pooling.js';
+import game from '../game.js';
+import Sprite from './sprite.js';
+import { isNumeric } from '../utils/string.js';
+
+/**
+ * @classdesc
+ * a generic Image Layer Object
+ * @augments Renderable
+ */
+ class ImageLayer extends Sprite {
+    /**
+     * @param {number} x - x coordinate
+     * @param {number} y - y coordinate
+     * @param {object} settings - ImageLayer properties
+     * @param {HTMLImageElement|HTMLCanvasElement|string} settings.image - Image reference. See {@link loader.getImage}
+     * @param {string} [settings.name="me.ImageLayer"] - layer name
+     * @param {number} [settings.z=0] - z-index position
+     * @param {number|Vector2d} [settings.ratio=1.0] - Scrolling ratio to be applied. See {@link ImageLayer#ratio}
+     * @param {string} [settings.repeat='repeat'] - define if and how an Image Layer should be repeated (accepted values are 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'). See {@link ImageLayer#repeat}
+     * @param {number|Vector2d} [settings.anchorPoint=0.0] - Image origin. See {@link ImageLayer#anchorPoint}
+     * @example
+     * // create a repetitive background pattern on the X axis using the citycloud image asset
+     * me.game.world.addChild(new me.ImageLayer(0, 0, {
+     *     image:"citycloud",
+     *     repeat :"repeat-x"
+     * }), 1);
+     */
+    constructor(x, y, settings) {
+        // call the constructor
+        super(x, y, settings);
+
+        // render in screen coordinates
+        this.floating = true;
+
+        // image drawing offset
+        this.offset.set(x, y);
+
+        /**
+         * Define the image scrolling ratio<br>
+         * Scrolling speed is defined by multiplying the viewport delta position by the specified ratio.
+         * Setting this vector to &lt;0.0,0.0&gt; will disable automatic scrolling.<br>
+         * To specify a value through Tiled, use one of the following format : <br>
+         * - a number, to change the value for both axis <br>
+         * - a json expression like `json:{"x":0.5,"y":0.5}` if you wish to specify a different value for both x and y
+         * @public
+         * @type {Vector2d}
+         * @default <1.0,1.0>
+         * @name ImageLayer#ratio
+         */
+        this.ratio = pool.pull("Vector2d", 1.0, 1.0);
+
+        if (typeof(settings.ratio) !== "undefined") {
+            // little hack for backward compatiblity
+            if (isNumeric(settings.ratio)) {
+                this.ratio.set(settings.ratio, +settings.ratio);
+            } else /* vector */ {
+                this.ratio.setV(settings.ratio);
+            }
+        }
+
+        if (typeof(settings.anchorPoint) === "undefined") {
+            /**
+             * Define how the image is anchored to the viewport bounds<br>
+             * By default, its upper-left corner is anchored to the viewport bounds upper left corner.<br>
+             * The anchorPoint is a unit vector where each component falls in range [0.0,1.0].<br>
+             * Some common examples:<br>
+             * - &lt;0.0,0.0&gt; : (Default) Anchor image to the upper-left corner of viewport bounds
+             * - &lt;0.5,0.5&gt; : Center the image within viewport bounds
+             * - &lt;1.0,1.0&gt; : Anchor image to the lower-right corner of viewport bounds
+             * To specify a value through Tiled, use one of the following format : <br>
+             * - a number, to change the value for both axis <br>
+             * - a json expression like `json:{"x":0.5,"y":0.5}` if you wish to specify a different value for both x and y
+             * @public
+             * @member {Vector2d}
+             * @default <0.0,0.0>
+             * @name ImageLayer#anchorPoint
+             */
+            this.anchorPoint.set(0, 0);
+        }
+        else {
+            if (typeof(settings.anchorPoint) === "number") {
+                this.anchorPoint.set(settings.anchorPoint, settings.anchorPoint);
+            }
+            else /* vector */ {
+                this.anchorPoint.setV(settings.anchorPoint);
+            }
+        }
+
+        this.repeat = settings.repeat || "repeat";
+
+        // on context lost, all previous textures are destroyed
+        on(ONCONTEXT_RESTORED, this.createPattern, this);
+    }
+
+    /**
+     * Define if and how an Image Layer should be repeated.<br>
+     * By default, an Image Layer is repeated both vertically and horizontally.<br>
+     * Acceptable values : <br>
+     * - 'repeat' - The background image will be repeated both vertically and horizontally <br>
+     * - 'repeat-x' - The background image will be repeated only horizontally.<br>
+     * - 'repeat-y' - The background image will be repeated only vertically.<br>
+     * - 'no-repeat' - The background-image will not be repeated.<br>
+     * @public
+     * @type {string}
+     * @default 'repeat'
+     * @name ImageLayer#repeat
+     */
+
+    get repeat() {
+        return this._repeat;
+    }
+
+    set repeat(value) {
+        this._repeat = value;
+        switch (this._repeat) {
+            case "no-repeat" :
+                this.repeatX = false;
+                this.repeatY = false;
+                break;
+            case "repeat-x" :
+                this.repeatX = true;
+                this.repeatY = false;
+                break;
+            case "repeat-y" :
+                this.repeatX = false;
+                this.repeatY = true;
+                break;
+            default : // "repeat"
+                this.repeatX = true;
+                this.repeatY = true;
+                break;
+        }
+        this.resize(game.viewport.width, game.viewport.height);
+        this.createPattern();
+    }
+
+
+    // called when the layer is added to the game world or a container
+    onActivateEvent() {
+        // register to the viewport change notification
+        on(VIEWPORT_ONCHANGE, this.updateLayer, this);
+        on(VIEWPORT_ONRESIZE, this.resize, this);
+        // force a first refresh when the level is loaded
+        once(LEVEL_LOADED, () => {
+            this.updateLayer(game.viewport.pos);
+        });
+        // in case the level is not added to the root container,
+        // the onActivateEvent call happens after the LEVEL_LOADED event
+        // so we need to force a first update
+        if (this.ancestor.root !== true) {
+            this.updateLayer(game.viewport.pos);
+        }
+    }
+
+    /**
+     * resize the Image Layer to match the given size
+     * @name resize
+     * @memberof ImageLayer
+     * @param {number} w - new width
+     * @param {number} h - new height
+     */
+    resize(w, h) {
+        return super.resize(
+            this.repeatX ? Infinity : w,
+            this.repeatY ? Infinity : h
+        );
+    }
+
+    /**
+     * createPattern function
+     * @ignore
+     */
+    createPattern() {
+        this._pattern = renderer.createPattern(this.image, this._repeat);
+    }
+
+    /**
+     * updateLayer function
+     * @ignore
+     */
+    updateLayer(vpos) {
+        var rx = this.ratio.x,
+            ry = this.ratio.y;
+
+        if (rx === 0 && ry === 0) {
+            // static image
+            return;
+        }
+
+        var width = this.width,
+            height = this.height,
+            bw = game.viewport.bounds.width,
+            bh = game.viewport.bounds.height,
+            ax = this.anchorPoint.x,
+            ay = this.anchorPoint.y,
+
+            /*
+             * Automatic positioning
+             *
+             * See https://github.com/melonjs/melonJS/issues/741#issuecomment-138431532
+             * for a thorough description of how this works.
+             */
+            x = ax * (rx - 1) * (bw - game.viewport.width) + this.offset.x - rx * vpos.x,
+            y = ay * (ry - 1) * (bh - game.viewport.height) + this.offset.y - ry * vpos.y;
+
+
+        // Repeat horizontally; start drawing from left boundary
+        if (this.repeatX) {
+            this.pos.x = x % width;
+        }
+        else {
+            this.pos.x = x;
+        }
+
+        // Repeat vertically; start drawing from top boundary
+        if (this.repeatY) {
+            this.pos.y = y % height;
+        }
+        else {
+            this.pos.y = y;
+        }
+
+        this.isDirty = true;
+    }
+
+   /**
+    * override the default predraw function
+    * as repeat and anchor are managed directly in the draw method
+    * @ignore
+    */
+    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);
+    }
+
+    /**
+     * draw this ImageLayer (automatically called by melonJS)
+     * @name draw
+     * @memberof ImageLayer
+     * @protected
+     * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
+     * @param {Camera2d} [viewport] - the viewport to (re)draw
+     */
+    draw(renderer, viewport) {
+        var width = this.width,
+            height = this.height,
+            bw = viewport.bounds.width,
+            bh = viewport.bounds.height,
+            ax = this.anchorPoint.x,
+            ay = this.anchorPoint.y,
+            x = this.pos.x,
+            y = this.pos.y;
+
+        if (this.ratio.x === 0 && this.ratio.y === 0) {
+            // static image
+            x = x + ax * (bw - width);
+            y = y + ay * (bh - height);
+        }
+
+        renderer.translate(x, y);
+        renderer.drawPattern(
+            this._pattern,
+            0,
+            0,
+            viewport.width * 2,
+            viewport.height * 2
+        );
+    }
+
+    // called when the layer is removed from the game world or a container
+    onDeactivateEvent() {
+        // cancel all event subscriptions
+        off(VIEWPORT_ONCHANGE, this.updateLayer);
+        off(VIEWPORT_ONRESIZE, this.resize);
+    }
+
+    /**
+     * Destroy function<br>
+     * @ignore
+     */
+    destroy() {
+        pool.push(this.ratio);
+        this.ratio = undefined;
+        off(ONCONTEXT_RESTORED, this.createPattern);
+        super.destroy();
+    }
+
+}
+
+export { ImageLayer as default };

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

@@ -0,0 +1,155 @@
+/*!
+ * 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 pool from '../system/pooling.js';
+import Renderable from './renderable.js';
+
+/** @ignore */
+function createGradient(light) {
+    var context = light.texture.context;
+
+    var x1 = light.texture.width / 2,
+        y1 = light.texture.height / 2;
+
+    var radiusX = light.radiusX,
+        radiusY = light.radiusY;
+
+    var scaleX, scaleY, invScaleX, invScaleY;
+    var gradient;
+
+
+    light.texture.clear();
+
+    if (radiusX >= radiusY) {
+        scaleX = 1;
+        invScaleX = 1;
+        scaleY = radiusY/radiusX;
+        invScaleY = radiusX/radiusY;
+        gradient = context.createRadialGradient(x1, y1 * invScaleY, 0, x1, radiusY * invScaleY, radiusX);
+    }
+    else {
+        scaleY = 1;
+        invScaleY = 1;
+        scaleX = radiusX/radiusY;
+        invScaleX = radiusY/radiusX;
+        gradient = context.createRadialGradient(x1 * invScaleX, y1, 0, x1 * invScaleX, y1, radiusY);
+    }
+
+    gradient.addColorStop( 0, light.color.toRGBA(light.intensity));
+    gradient.addColorStop( 1, light.color.toRGBA(0.0));
+
+    context.fillStyle = gradient;
+
+    context.setTransform(scaleX, 0, 0, scaleY, 0, 0);
+    context.fillRect(0, 0, light.texture.width * invScaleX, light.texture.height * invScaleY);
+}
+
+/**
+ * @classdesc
+ * A 2D point light.
+ * Note: this is a very experimental and work in progress feature, that provides a simple spot light effect.
+ * The light effect is best rendered in WebGL, as they are few limitations when using the Canvas Renderer
+ * (multiple lights are not supported, alpha component of the ambient light is ignored)
+ * @see stage.lights
+ */
+ class Light2d extends Renderable {
+   /**
+    * @param {number} x - The horizontal position of the light.
+    * @param {number} y - The vertical position of the light.
+    * @param {number} radiusX - The horizontal radius of the light.
+    * @param {number} [radiusY=radiusX] - The vertical radius of the light.
+    * @param {Color|string} [color="#FFF"] - the color of the light
+    * @param {number} [intensity=0.7] - The intensity of the light.
+    */
+    constructor(x, y, radiusX, radiusY = radiusX, color = "#FFF", intensity = 0.7) {
+        // call the parent constructor
+        super(x, y, radiusX * 2, radiusY * 2);
+
+        /**
+         * the color of the light
+         * @type {Color}
+         * @default "#FFF"
+         */
+        this.color = pool.pull("Color").parseCSS(color);
+
+        /**
+         * The horizontal radius of the light
+         * @type {number}
+         */
+        this.radiusX = radiusX;
+
+        /**
+         * The vertical radius of the light
+         * @type {number}
+         */
+        this.radiusY = radiusY;
+
+        /**
+         * The intensity of the light
+         * @type {number}
+         * @default 0.7
+         */
+        this.intensity = intensity;
+
+        /**
+         * the default blend mode to be applied when rendering this light
+         * @type {string}
+         * @default "lighter"
+         * @see CanvasRenderer#setBlendMode
+         * @see WebGLRenderer#setBlendMode
+         */
+        this.blendMode = "lighter";
+
+        /** @ignore */
+        this.visibleArea = pool.pull("Ellipse", this.centerX, this.centerY, this.width, this.height);
+
+        /** @ignore */
+        this.texture = pool.pull("CanvasTexture", this.width, this.height, { offscreenCanvas: false });
+
+        this.anchorPoint.set(0, 0);
+
+        createGradient(this);
+    }
+
+    /**
+     * returns a geometry representing the visible area of this light
+     * @name getVisibleArea
+     * @memberof Light2d
+     * @returns {Ellipse} the light visible mask
+     */
+    getVisibleArea() {
+        return this.visibleArea.setShape(this.getBounds().centerX, this.getBounds().centerY, this.width, this.height);
+    }
+
+    /**
+     * draw this Light2d (automatically called by melonJS)
+     * @name draw
+     * @memberof Light2d
+     * @protected
+     * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
+     * @param {Camera2d} [viewport] - the viewport to (re)draw
+     */
+    draw(renderer, viewport) {   // eslint-disable-line no-unused-vars
+        renderer.drawImage(this.texture.canvas, this.getBounds().x, this.getBounds().y);
+    }
+
+    /**
+     * Destroy function<br>
+     * @ignore
+     */
+    destroy() {
+        pool.push(this.color);
+        this.color = undefined;
+        pool.push(this.texture);
+        this.texture = undefined;
+        pool.push(this.visibleArea);
+        this.visibleArea = undefined;
+        super.destroy();
+    }
+}
+
+export { Light2d as default };