melonjs 17.3.0 → 18.0.0

package/src/renderable/imagelayer.js

@@ -1,280 +0,0 @@
-import { renderer } from "./../video/video.js";
-import * as event from "./../system/event.js";
-import pool from "./../system/pooling.js";
-import { game } from "../index.js";
-import Sprite from "./sprite.js";
-import * as stringUtil from "./../utils/string.js";
-
-
-/**
- * @classdesc
- * a generic Image Layer Object
- * @augments Sprite
- */
-export default 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 (stringUtil.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
-        event.on(event.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
-        event.on(event.VIEWPORT_ONCHANGE, this.updateLayer, this);
-        event.on(event.VIEWPORT_ONRESIZE, this.resize, this);
-        // force a first refresh when the level is loaded
-        event.on(event.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
-        event.off(event.VIEWPORT_ONCHANGE, this.updateLayer);
-        event.off(event.VIEWPORT_ONRESIZE, this.resize);
-        event.off(event.LEVEL_LOADED, this.updateLayer);
-    }
-
-    /**
-     * Destroy function
-     * @ignore
-     */
-    destroy() {
-        pool.push(this.ratio);
-        this.ratio = undefined;
-        event.off(event.ONCONTEXT_RESTORED, this.createPattern);
-        super.destroy();
-    }
-
-}

package/src/renderable/light2d.js

@@ -1,155 +0,0 @@
-import pool from "./../system/pooling.js";
-import Renderable from "./renderable.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
- */
-export default 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
-     * @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();
-    }
-}

package/src/renderable/nineslicesprite.js

@@ -1,233 +0,0 @@
-import Sprite from "./sprite.js";
-
-/**
- * @classdesc
- * A NineSliceSprite is similar to a Sprite, but it uses 9-slice scaling to strech its inner area to fit the size of the Renderable,
- * by proportionally scaling a sprite by splitting it in a grid of nine parts (with only parts 1, 3, 7, 9 not being scaled). <br>
- * <img src="images/9-slice-scaling.png"/><br>
- * @see https://en.wikipedia.org/wiki/9-slice_scaling
- * @augments Sprite
- */
-export default class NineSliceSprite extends Sprite {
-    /**
-     * @param {number} x - the x coordinates of the sprite object
-     * @param {number} y - the y coordinates of the sprite object
-     * @param {object} settings - Configuration parameters for the Sprite object
-     * @param {number} settings.width - the width of the Renderable over which the sprite needs to be stretched
-     * @param {number} settings.height - the height of the Renderable over which the sprite needs to be stretched
-     * @param {number} [settings.insetx] - the width of a corner over which the sprite is unscaled (default is a quarter of the sprite width)
-     * @param {number} [settings.insety] - the height of a corner over which the sprite is unscaled (default is a quarter of the sprite height)
-     * @param {HTMLImageElement|HTMLCanvasElement|TextureAtlas|string} settings.image - reference to spritesheet image, a texture atlas or to a texture atlas
-     * @param {string} [settings.name=""] - name of this object
-     * @param {string} [settings.region] - region name of a specific region to use when using a texture atlas, see {@link TextureAtlas}
-     * @param {number} [settings.framewidth] - Width of a single frame within the spritesheet
-     * @param {number} [settings.frameheight] - Height of a single frame within the spritesheet
-     * @param {string|Color} [settings.tint] - a tint to be applied to this sprite
-     * @param {number} [settings.flipX] - flip the sprite on the horizontal axis
-     * @param {number} [settings.flipY] - flip the sprite on the vertical axis
-     * @param {Vector2d} [settings.anchorPoint={x:0.5, y:0.5}] - Anchor point to draw the frame at (defaults to the center of the frame).
-     * @example
-     * this.panelSprite = new me.NineSliceSprite(0, 0, {
-     *     image : game.texture,
-     *     region : "grey_panel",
-     *     width : this.width,
-     *     height : this.height
-     * });
-     */
-    constructor(x, y, settings) {
-        // call the super constructor
-        super(x, y, settings);
-
-        // ensure mandatory properties are defined
-        if ((typeof settings.width !== "number") || (typeof settings.height !== "number")) {
-            throw new Error("height and width properties are mandatory");
-        }
-
-        // adjust the nss sprite size accordingly to the target "expanded" size
-        this.width = Math.floor(settings.width);
-        this.height = Math.floor(settings.height);
-
-        // nine slice sprite specific internal variables
-        this.nss_width = this.width;
-        this.nss_height = this.height;
-
-        this.insetx = settings.insetx;
-        this.insety = settings.insety;
-    }
-
-    /**
-     * width of the NineSliceSprite
-     * @type {number}
-     */
-    get width() {
-        return super.width;
-    }
-    set width(value) {
-        super.width = this.nss_width = value;
-    }
-
-    /**
-     * height of the NineSliceSprite
-     * @type {number}
-     */
-    get height() {
-        return super.height;
-    }
-    set height(value) {
-        super.height = this.nss_height = value;
-    }
-
-    /**
-     * @ignore
-     */
-    draw(renderer) {
-        // the frame to draw
-        let frame = this.current;
-
-        // cache the current position and size
-        let dx = this.pos.x,
-            dy = this.pos.y;
-
-        let w = frame.width,
-            h = frame.height;
-
-        // frame offset in the texture/atlas
-        let frame_offset = frame.offset;
-        let g_offset = this.offset;
-
-
-        // remove image's TexturePacker/ShoeBox rotation
-        if (frame.angle !== 0) {
-            renderer.translate(-dx, -dy);
-            renderer.rotate(frame.angle);
-            dx -= h;
-            w = frame.height;
-            h = frame.width;
-        }
-
-        let sx = g_offset.x + frame_offset.x,
-            sy = g_offset.y + frame_offset.y;
-
-        // should this be configurable ?
-        let corner_width = this.insetx || w / 4,
-            corner_height = this.insety || h / 4;
-
-        // OPTIMIZE ME !
-
-        // DRAW CORNERS
-
-        // Top Left
-        renderer.drawImage(
-            this.image,
-            sx,                          // sx
-            sy,                          // sy
-            corner_width, corner_height, // sw,sh
-            dx, dy,                      // dx,dy
-            corner_width, corner_height  // dw,dh
-        );
-
-        // Top Right
-        renderer.drawImage(
-            this.image,
-            sx + w - corner_width,          // sx
-            sy,                             // sy
-            corner_width, corner_height,    // sw,sh
-            dx + this.nss_width - corner_width, // dx
-            dy,                             // dy
-            corner_width, corner_height     // dw,dh
-        );
-        // Bottom Left
-        renderer.drawImage(
-            this.image,
-            sx,                                 // sx
-            sy + h - corner_height,             // sy
-            corner_width, corner_height,        // sw,sh
-            dx,                                 // dx
-            dy + this.nss_height - corner_height,   // dy
-            corner_width, corner_height         // dw,dh
-        );
-        // Bottom Right
-        renderer.drawImage(
-            this.image,
-            sx + w - corner_width,              // sx
-            sy + h - corner_height,             // sy
-            corner_width, corner_height,        // sw,sh
-            dx + this.nss_width - corner_width,     //dx
-            dy + this.nss_height - corner_height,   // dy
-            corner_width, corner_height         // dw,dh
-        );
-
-
-        // DRAW SIDES and CENTER
-        let image_center_width = w - (corner_width << 1);
-        let image_center_height = h - (corner_height << 1);
-
-        let target_center_width = this.nss_width - (corner_width << 1);
-        let target_center_height = this.nss_height - (corner_height << 1);
-
-        //Top center
-        renderer.drawImage(
-            this.image,
-            sx + corner_width,         // sx
-            sy,                        // sy
-            image_center_width,        // sw
-            corner_height,             // sh
-            dx + corner_width,         // dx
-            dy,                        // dy
-            target_center_width,       // dw
-            corner_height              // dh
-        );
-
-        //Bottom center
-        renderer.drawImage(
-            this.image,
-            sx + corner_width,                  // sx
-            sy + h - corner_height,             // sy
-            image_center_width,                 // sw
-            corner_height,                      // sh
-            dx + corner_width,                  // dx
-            dy + this.nss_height - corner_height,   // dx
-            target_center_width,                // dw
-            corner_height                       // dh
-        );
-
-        // Middle Left
-        renderer.drawImage(
-            this.image,
-            sx,                   // sx
-            sy + corner_height,   // sy
-            corner_width,         // sw
-            image_center_height,  // sh
-            dx,                   // dx
-            dy + corner_height,   // dy
-            corner_width,         // dw
-            target_center_height  // dh
-        );
-
-        // Middle Right
-        renderer.drawImage(
-            this.image,
-            sx + w - corner_width,          // sx
-            sy + corner_height,             // sy
-            corner_width,                   // sw
-            image_center_height,            // sh
-            dx + this.nss_width - corner_width, // dx
-            dy + corner_height,             // dy
-            corner_width,                   // dw
-            target_center_height            // dh
-        );
-
-        // Middle Center
-        renderer.drawImage(
-            this.image,
-            sx + corner_width,    // sx
-            sy + corner_height,   // sy
-            image_center_width,   // sw
-            image_center_height,  // sh
-            dx + corner_width,    // dx
-            dy + corner_height,   // dy
-            target_center_width,  // dw
-            target_center_height  // dh
-        );
-    }
-}