melonjs 17.4.0 → 18.0.0

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

@@ -1,293 +0,0 @@
-/*!
- * melonJS Game Engine - v17.4.0
- * http://www.melonjs.org
- * melonjs is licensed under the MIT License.
- * http://www.opensource.org/licenses/mit-license
- * @copyright (C) 2011 - 2024 Olivier Biot (AltByte Pte Ltd)
- */
-import { renderer } from '../video/video.js';
-import { on, ONCONTEXT_RESTORED, VIEWPORT_ONCHANGE, VIEWPORT_ONRESIZE, LEVEL_LOADED, off } from '../system/event.js';
-import pool from '../system/pooling.js';
-import { game } from '../index.js';
-import Sprite from './sprite.js';
-import { isNumeric } from '../utils/string.js';
-
-/**
- * additional import for TypeScript
- * @import Vector2d from "./../math/vector2.js";
- */
-
-/**
- * @classdesc
- * a generic Image Layer Object
- * @augments Sprite
- */
-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 {"repeat"|"repeat-x"|"repeat-y"|"no-repeat"} [settings.repeat="repeat"] - define if and how an Image Layer should be repeated. See {@link ImageLayer#repeat}
-     * @param {number|Vector2d} [settings.anchorPoint=<0.0,0.0>] - Define how the image is anchored to the viewport bound. By default, its upper-left corner is anchored to the viewport bounds upper left corner.
-     * @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
-         * @type {Vector2d}
-         * @default <1.0,1.0>
-         */
-        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") {
-            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>
-     * @type {string}
-     * @default '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
-        on(LEVEL_LOADED, this.updateLayer, this);
-        // 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();
-        }
-    }
-
-    /**
-     * resize the Image Layer to match the given size
-     * @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() {
-        const rx = this.ratio.x,
-            ry = this.ratio.y;
-
-        const viewport = game.viewport;
-
-        if (rx === 0 && ry === 0) {
-            // static image
-            return;
-        }
-
-        const width = this.width,
-            height = this.height,
-            bw = viewport.bounds.width,
-            bh = 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 - viewport.width) + this.offset.x - rx * viewport.pos.x,
-            y = ay * (ry - 1) * (bh - viewport.height) + this.offset.y - ry * viewport.pos.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);
-
-        // apply blending if different from "normal"
-        if (this.blendMode !== renderer.getBlendMode()) {
-            renderer.setBlendMode(this.blendMode);
-        }
-    }
-
-    /**
-     * draw this ImageLayer (automatically called by melonJS)
-     * @protected
-     * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
-     * @param {Camera2d} [viewport] - the viewport to (re)draw
-     */
-    draw(renderer, viewport) {
-        const width = this.width,
-            height = this.height,
-            bw = viewport.bounds.width,
-            bh = viewport.bounds.height,
-            ax = this.anchorPoint.x,
-            ay = this.anchorPoint.y;
-
-        let 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);
-        off(LEVEL_LOADED, this.updateLayer);
-    }
-
-    /**
-     * Destroy function
-     * @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

@@ -1,172 +0,0 @@
-/*!
- * melonJS Game Engine - v17.4.0
- * http://www.melonjs.org
- * melonjs is licensed under the MIT License.
- * http://www.opensource.org/licenses/mit-license
- * @copyright (C) 2011 - 2024 Olivier Biot (AltByte Pte Ltd)
- */
-import pool from '../system/pooling.js';
-import Renderable from './renderable.js';
-
-/**
- * additional import for TypeScript
- * @import Color from "./../math/color.js";
- * @import Ellipse from "./../geometries/ellipse.js";
- * @import CanvasRenderer from "./../video/canvas/canvas_renderer.js";
- * @import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
- */
-
-
-/** @ignore */
-function createGradient(light) {
-    let context = light.texture.context;
-
-    let x1 = light.texture.width / 2,
-        y1 = light.texture.height / 2;
-
-    let radiusX = light.radiusX,
-        radiusY = light.radiusY;
-
-    let scaleX, scaleY, invScaleX, invScaleY;
-    let 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("CanvasRenderTarget", 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);
-    }
-
-    /**
-     * update function
-     * @param {number} dt - time since the last update in milliseconds.
-     * @returns {boolean} true if dirty
-     */
-    update(dt) { // eslint-disable-line no-unused-vars
-        return true;
-    }
-
-    /**
-     * draw this Light2d (automatically called by melonJS)
-     * @name draw
-     * @memberof Light2d
-     * @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 };