melonjs 14.1.2 → 14.3.0

package/dist/types/renderable/container.d.ts

@@ -0,0 +1,302 @@
+/**
+ * @classdesc
+ * Container represents a collection of child objects
+ * @augments Renderable
+ */
+export default class Container extends Renderable {
+    /**
+     * @param {number} [x=0] - position of the container (accessible via the inherited pos.x property)
+     * @param {number} [y=0] - position of the container (accessible via the inherited pos.y property)
+     * @param {number} [width=game.viewport.width] - width of the container
+     * @param {number} [height=game.viewport.height] - height of the container
+     */
+    constructor(x?: number | undefined, y?: number | undefined, width?: number | undefined, height?: number | undefined, root?: boolean);
+    /**
+     * keep track of pending sort
+     * @ignore
+     */
+    pendingSort: any;
+    /**
+     * whether the container is the root of the scene
+     * @type {boolean}
+     * @default false
+     */
+    root: boolean;
+    /**
+     * The array of children of this container.
+     * @ignore
+     */
+    children: any[] | undefined;
+    /**
+     * The property of the child object that should be used to sort on <br>
+     * value : "x", "y", "z"
+     * @type {string}
+     * @default me.game.sortOn
+     */
+    sortOn: string;
+    /**
+     * Specify if the children list should be automatically sorted when adding a new child
+     * @type {boolean}
+     * @default true
+     */
+    autoSort: boolean;
+    /**
+     * Specify if the children z index should automatically be managed by the parent container
+     * @type {boolean}
+     * @default true
+     */
+    autoDepth: boolean;
+    /**
+     * Specify if the container draw operation should clip his children to its own bounds
+     * @type {boolean}
+     * @default false
+     */
+    clipping: boolean;
+    /**
+     * a callback to be extended, triggered after a child has been added or removed
+     * @param {number} index - added or removed child index
+     */
+    onChildChange: (index: number) => void;
+    /**
+     * Specify if the container bounds should automatically take in account
+     * all child bounds when updated (this is expensive and disabled by default,
+     * only enable if necessary)
+     * @type {boolean}
+     * @default false
+     */
+    enableChildBoundsUpdate: boolean;
+    /**
+     * define a background color for this container
+     * @type {Color}
+     * @default (0, 0, 0, 0.0)
+     * @example
+     * // add a red background color to this container
+     * this.backgroundColor.setColor(255, 0, 0);
+     */
+    backgroundColor: Color;
+    /**
+     * Used by the debug panel plugin
+     * @ignore
+     */
+    drawCount: number;
+    /**
+     * reset the container, removing all childrens, and reseting transforms.
+     */
+    reset(): void;
+    /**
+     * Add a child to the container <br>
+     * if auto-sort is disable, the object will be appended at the bottom of the list.
+     * Adding a child to the container will automatically remove it from its other container.
+     * Meaning a child can only have one parent.  This is important if you add a renderable
+     * to a container then add it to the me.game.world container it will move it out of the
+     * orginal container. Then when the me.game.world.reset() is called the renderable
+     * will not be in any container. <br>
+     * if the given child implements a onActivateEvent method, that method will be called
+     * once the child is added to this container.
+     * @param {Renderable} child
+     * @param {number} [z] - forces the z index of the child to the specified value
+     * @returns {Renderable} the added child
+     */
+    addChild(child: Renderable, z?: number | undefined): Renderable;
+    /**
+     * Add a child to the container at the specified index<br>
+     * (the list won't be sorted after insertion)
+     * @param {Renderable} child
+     * @param {number} index
+     * @returns {Renderable} the added child
+     */
+    addChildAt(child: Renderable, index: number): Renderable;
+    /**
+     * The forEach() method executes a provided function once per child element. <br>
+     * the callback function is invoked with three arguments: <br>
+     *    - The current element being processed in the array <br>
+     *    - The index of element in the array. <br>
+     *    - The array forEach() was called upon. <br>
+     * @param {Function} callback - fnction to execute on each element
+     * @param {object} [thisArg] - value to use as this(i.e reference Object) when executing callback.
+     * @example
+     * // iterate through all children of the root container
+     * me.game.world.forEach((child) => {
+     *    // do something with the child
+     *    child.doSomething();
+     * });
+     * me.game.world.forEach((child, index) => { ... });
+     * me.game.world.forEach((child, index, array) => { ... });
+     * me.game.world.forEach((child, index, array) => { ... }, thisArg);
+     */
+    forEach(callback: Function, thisArg?: object | undefined, ...args: any[]): void;
+    /**
+     * Swaps the position (z-index) of 2 children
+     * @param {Renderable} child
+     * @param {Renderable} child2
+     */
+    swapChildren(child: Renderable, child2: Renderable): void;
+    /**
+     * Returns the Child at the specified index
+     * @param {number} index
+     * @returns {Renderable} the child at the specified index
+     */
+    getChildAt(index: number): Renderable;
+    /**
+     * Returns the index of the given Child
+     * @param {Renderable} child
+     * @returns {number} index
+     */
+    getChildIndex(child: Renderable): number;
+    /**
+     * Returns the next child within the container or undefined if none
+     * @param {Renderable} child
+     * @returns {Renderable} child
+     */
+    getNextChild(child: Renderable): Renderable;
+    /**
+     * Returns true if contains the specified Child
+     * @param {Renderable} child
+     * @returns {boolean}
+     */
+    hasChild(child: Renderable): boolean;
+    /**
+     * return the child corresponding to the given property and value.<br>
+     * note : avoid calling this function every frame since
+     * it parses the whole object tree each time
+     * @param {string} prop - Property name
+     * @param {string|RegExp|number|boolean} value - Value of the property
+     * @returns {Renderable[]} Array of childs
+     * @example
+     * // get the first child object called "mainPlayer" in a specific container :
+     * var ent = myContainer.getChildByProp("name", "mainPlayer");
+     *
+     * // or query the whole world :
+     * var ent = me.game.world.getChildByProp("name", "mainPlayer");
+     *
+     * // partial property matches are also allowed by using a RegExp.
+     * // the following matches "redCOIN", "bluecoin", "bagOfCoins", etc :
+     * var allCoins = me.game.world.getChildByProp("name", /coin/i);
+     *
+     * // searching for numbers or other data types :
+     * var zIndex10 = me.game.world.getChildByProp("z", 10);
+     * var inViewport = me.game.world.getChildByProp("inViewport", true);
+     */
+    getChildByProp(prop: string, value: string | RegExp | number | boolean): Renderable[];
+    /**
+     * returns the list of childs with the specified class type
+     * @param {object} classType
+     * @returns {Renderable[]} Array of children
+     */
+    getChildByType(classType: object): Renderable[];
+    /**
+     * returns the list of childs with the specified name<br>
+     * as defined in Tiled (Name field of the Object Properties)<br>
+     * note : avoid calling this function every frame since
+     * it parses the whole object list each time
+     * @param {string|RegExp|number|boolean} name - child name
+     * @returns {Renderable[]} Array of children
+     */
+    getChildByName(name: string | RegExp | number | boolean): Renderable[];
+    /**
+     * return the child corresponding to the specified GUID<br>
+     * note : avoid calling this function every frame since
+     * it parses the whole object list each time
+     * @param {string|RegExp|number|boolean} guid - child GUID
+     * @returns {Renderable} corresponding child or null
+     */
+    getChildByGUID(guid: string | RegExp | number | boolean): Renderable;
+    /**
+     * return all child in this container
+     * @returns {Renderable[]} an array of renderable object
+     */
+    getChildren(): Renderable[];
+    /**
+     * update the bounding box for this shape.
+     * @ignore
+     * @returns {Bounds} this shape bounding box Rectangle object
+     */
+    updateBounds(forceUpdateChildBounds?: boolean): Bounds;
+    /**
+     * Checks if this container is root or if it's attached to the root container.
+     * @private
+     * @returns {boolean}
+     */
+    private isAttachedToRoot;
+    /**
+     * update the cointainer's bounding rect (private)
+     * @ignore
+     */
+    updateBoundsPos(newX: any, newY: any): Bounds;
+    /**
+     * @ignore
+     */
+    onActivateEvent(): void;
+    /**
+     * Invokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed. <br>
+     * if the given child implements a onDeactivateEvent() method, that method will be called once the child is removed from this container.
+     * @param {Renderable} child
+     * @param {boolean} [keepalive=false] - true to prevent calling child.destroy()
+     */
+    removeChild(child: Renderable, keepalive?: boolean | undefined): void;
+    /**
+     * Removes (and optionally destroys) a child from the container.<br>
+     * (removal is immediate and unconditional)<br>
+     * Never use keepalive=true with objects from {@link pool}. Doing so will create a memory leak.
+     * @param {Renderable} child
+     * @param {boolean} [keepalive=False] - True to prevent calling child.destroy()
+     */
+    removeChildNow(child: Renderable, keepalive?: boolean | undefined): void;
+    /**
+     * Automatically set the specified property of all childs to the given value
+     * @param {string} prop - property name
+     * @param {object} value - property value
+     * @param {boolean} [recursive=false] - recursively apply the value to child containers if true
+     */
+    setChildsProperty(prop: string, value: object, recursive?: boolean | undefined): void;
+    /**
+     * Move the child in the group one step forward (z depth).
+     * @param {Renderable} child
+     */
+    moveUp(child: Renderable): void;
+    /**
+     * Move the child in the group one step backward (z depth).
+     * @param {Renderable} child
+     */
+    moveDown(child: Renderable): void;
+    /**
+     * Move the specified child to the top(z depth).
+     * @param {Renderable} child
+     */
+    moveToTop(child: Renderable): void;
+    /**
+     * Move the specified child the bottom (z depth).
+     * @param {Renderable} child
+     */
+    moveToBottom(child: Renderable): void;
+    /**
+     * Manually trigger the sort of all the childs in the container</p>
+     * @param {boolean} [recursive=false] - recursively sort all containers if true
+     */
+    sort(recursive?: boolean | undefined): void;
+    /**
+     * @ignore
+     */
+    onDeactivateEvent(): void;
+    /**
+     * Z Sorting function
+     * @ignore
+     */
+    _sortZ(a: any, b: any): number;
+    /**
+     * Reverse Z Sorting function
+     * @ignore
+     */
+    _sortReverseZ(a: any, b: any): number;
+    /**
+     * X Sorting function
+     * @ignore
+     */
+    _sortX(a: any, b: any): number;
+    /**
+     * Y Sorting function
+     * @ignore
+     */
+    _sortY(a: any, b: any): number;
+}
+import Renderable from "./renderable";

package/dist/types/renderable/dragndrop.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @classdesc
+ * A Draggable base object
+ * @see DropTarget
+ * @augments Renderable
+ */
+export class Draggable extends Renderable {
+    dragging: boolean;
+    dragId: any;
+    grabOffset: Vector2d;
+    /**
+     * 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
+     */
+    private initEvents;
+    /**
+     * 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: object): boolean;
+    /**
+     * Gets called when the user drags this entity around
+     * @name dragMove
+     * @memberof Draggable
+     * @param {object} e - the pointer event
+     */
+    dragMove(e: object): void;
+    /**
+     * Gets called when the user stops dragging the entity
+     * @name dragEnd
+     * @memberof Draggable
+     * @returns {boolean} false if the object stopped being dragged
+     */
+    dragEnd(): boolean;
+    /**
+     * Destructor
+     * @name destroy
+     * @memberof Draggable
+     * @ignore
+     */
+    destroy(): void;
+}
+/**
+ * @classdesc
+ * a base drop target object
+ * @see Draggable
+ * @augments Renderable
+ */
+export class DropTarget extends Renderable {
+    /**
+     * constant for the overlaps method
+     * @public
+     * @constant
+     * @type {string}
+     * @name CHECKMETHOD_OVERLAP
+     * @memberof DropTarget
+     */
+    public CHECKMETHOD_OVERLAP: string;
+    /**
+     * constant for the contains method
+     * @public
+     * @constant
+     * @type {string}
+     * @name CHECKMETHOD_CONTAINS
+     * @memberof DropTarget
+     */
+    public CHECKMETHOD_CONTAINS: string;
+    /**
+     * the checkmethod we want to use
+     * @public
+     * @constant
+     * @type {string}
+     * @name checkMethod
+     * @default "overlaps"
+     * @memberof DropTarget
+     */
+    public checkMethod: string;
+    /**
+     * 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: string): void;
+    /**
+     * 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: object, draggable: Draggable): void;
+    /**
+     * 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: Draggable): void;
+    /**
+     * Destructor
+     * @name destroy
+     * @memberof DropTarget
+     * @ignore
+     */
+    destroy(): void;
+}
+import Renderable from "./../renderable/renderable.js";
+import Vector2d from "./../math/vector2.js";

package/dist/types/renderable/imagelayer.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @classdesc
+ * a generic Image Layer Object
+ * @augments Renderable
+ */
+export default class ImageLayer {
+    /**
+     * @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: number, y: number, settings: {
+        image: HTMLImageElement | HTMLCanvasElement | string;
+        name?: string | undefined;
+        z?: number | undefined;
+        ratio?: number | Vector2d;
+        repeat?: string | undefined;
+        anchorPoint?: number | Vector2d;
+    });
+    floating: boolean;
+    /**
+     * 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
+     */
+    public ratio: Vector2d;
+    public set repeat(arg: string);
+    /**
+     * 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
+     */
+    public get repeat(): string;
+    _repeat: string | undefined;
+    repeatX: boolean | undefined;
+    repeatY: boolean | undefined;
+    onActivateEvent(): void;
+    /**
+     * 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: number, h: number): any;
+    /**
+     * createPattern function
+     * @ignore
+     */
+    createPattern(): void;
+    _pattern: any;
+    /**
+     * updateLayer function
+     * @ignore
+     */
+    updateLayer(vpos: any): void;
+    isDirty: boolean | undefined;
+    /**
+     * override the default predraw function
+     * as repeat and anchor are managed directly in the draw method
+     * @ignore
+     */
+    preDraw(renderer: any): void;
+    /**
+     * 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
+     */
+    protected draw(renderer: CanvasRenderer | WebGLRenderer, viewport?: any): void;
+    onDeactivateEvent(): void;
+    /**
+     * Destroy function<br>
+     * @ignore
+     */
+    destroy(): void;
+}

package/dist/types/renderable/light2d.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @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: number, y: number, radiusX: number, radiusY?: number | undefined, color?: Color | string, intensity?: number | undefined);
+    /**
+     * the color of the light
+     * @type {Color}
+     * @default "#FFF"
+     */
+    color: Color;
+    /**
+     * The horizontal radius of the light
+     * @type {number}
+     */
+    radiusX: number;
+    /**
+     * The vertical radius of the light
+     * @type {number}
+     */
+    radiusY: number;
+    /**
+     * The intensity of the light
+     * @type {number}
+     * @default 0.7
+     */
+    intensity: number;
+    /** @ignore */
+    visibleArea: object;
+    /** @ignore */
+    texture: object;
+    /**
+     * returns a geometry representing the visible area of this light
+     * @name getVisibleArea
+     * @memberof Light2d
+     * @returns {Ellipse} the light visible mask
+     */
+    getVisibleArea(): Ellipse;
+    /**
+     * Destroy function<br>
+     * @ignore
+     */
+    destroy(): void;
+}
+import Renderable from "./renderable.js";

package/dist/types/renderable/nineslicesprite.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @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: number, y: number, settings: {
+        width: number;
+        height: number;
+        insetx?: number | undefined;
+        insety?: number | undefined;
+        image: HTMLImageElement | HTMLCanvasElement | TextureAtlas | string;
+        name?: string | undefined;
+        region?: string | undefined;
+        framewidth?: number | undefined;
+        frameheight?: number | undefined;
+        tint?: string | Color;
+        flipX?: number | undefined;
+        flipY?: number | undefined;
+        anchorPoint?: any;
+    });
+    nss_width: number;
+    nss_height: number;
+    insetx: number | undefined;
+    insety: number | undefined;
+    /**
+     * @ignore
+     */
+    draw(renderer: any): void;
+}
+import Sprite from "./sprite.js";