melonjs 10.11.0 → 10.12.0

package/dist/melonjs.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v10.11.0
+ * melonJS Game Engine - v10.12.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -315,10 +315,10 @@
 	(shared$3.exports = function (key, value) {
 	  return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 	})('versions', []).push({
-	  version: '3.23.0',
+	  version: '3.23.1',
 	  mode: 'global',
 	  copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-	  license: 'https://github.com/zloirock/core-js/blob/v3.23.0/LICENSE',
+	  license: 'https://github.com/zloirock/core-js/blob/v3.23.1/LICENSE',
 	  source: 'https://github.com/zloirock/core-js'
 	});
 
@@ -1753,7 +1753,7 @@
 	    return (typeof className !== "undefined") &&
 	            (typeof obj.onResetEvent === "function") &&
 	            (className in this.objectClass) &&
-	            (this.objectClass[className].pool !== "undefined");
+	            (typeof this.objectClass[className].pool !== "undefined");
 
 	};
 
@@ -10364,7 +10364,7 @@
 	 * (which means that all angles are less than 180 degrees), as described here below : <br>
 	 * <center><img src="images/convex_polygon.png"/></center><br>
 	 *
-	 * A polygon's `winding` is clockwise iff its vertices (points) are declared turning to the right. The image above shows COUNTERCLOCKWISE winding.
+	 * A polygon's `winding` is clockwise if its vertices (points) are declared turning to the right. The image above shows COUNTERCLOCKWISE winding.
 	 */
 	var Polygon = function Polygon(x, y, points) {
 	    /**
@@ -11010,7 +11010,7 @@
 	     * @name centerOn
 	     * @memberof Rect
 	     * @param {number} x the x coordinate around which to center this rectangle
-	     * @param {number} x the y coordinate around which to center this rectangle
+	     * @param {number} y the y coordinate around which to center this rectangle
 	     * @returns {Rect} this rectangle
 	     */
 	    Rect.prototype.centerOn = function centerOn (x, y) {
@@ -14549,14 +14549,14 @@
 	    };
 
 	    /**
-	     * object draw. <br>
-	     * automatically called by the game manager {@link game}
+	     * draw this renderable (automatically called by melonJS)
 	     * @name draw
 	     * @memberof Renderable
 	     * @protected
-	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+	     * @param {Camera2d} [viewport] the viewport to (re)draw
 	     */
-	    Renderable.prototype.draw = function draw (renderer) {  // eslint-disable-line no-unused-vars
+	    Renderable.prototype.draw = function draw (renderer, viewport) {  // eslint-disable-line no-unused-vars
 	        // empty one !
 	    };
 
@@ -14589,7 +14589,7 @@
 	     * when this renderable body is colliding with another one
 	     * @name onCollision
 	     * @memberof Renderable
-	     * @param {collision.ResponseObject} response the collision response object
+	     * @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)
 	     * @example
@@ -14606,7 +14606,7 @@
 	     *     return true;
 	     * },
 	     */
-	    Renderable.prototype.onCollision = function onCollision () {
+	    Renderable.prototype.onCollision = function onCollision (response, other) { // eslint-disable-line no-unused-vars
 	        return false;
 	    };
 
@@ -14822,7 +14822,7 @@
 	 * @param {Matrix2d} matrix the transformation matrix
 	 * @returns {Polygon} Reference to this object for method chaining
 	 */
-	Ellipse.prototype.transform = function transform (/* m */) {
+	Ellipse.prototype.transform = function transform (matrix) { // eslint-disable-line no-unused-vars
 	    // TODO
 	    return this;
 	};
@@ -15389,7 +15389,7 @@
 	 */
 	function testEllipsePolygon(a, ellipseA, b, polyB, response) {
 	    // Test the polygon against the circle.
-	    var result = this.testPolygonEllipse(b, polyB, a, ellipseA, response);
+	    var result = testPolygonEllipse(b, polyB, a, ellipseA, response);
 	    if (result && response) {
 	        // Swap A and B in the response.
 	        var resa = response.a;
@@ -15412,36 +15412,6 @@
 		testEllipsePolygon: testEllipsePolygon
 	});
 
-	// a dummy object when using Line for raycasting
-	var dummyObj = {
-	    pos : new Vector2d(0, 0),
-	    ancestor : {
-	        _absPos : new Vector2d(0, 0),
-	        getAbsolutePosition : function () {
-	            return this._absPos;
-	        }
-	    }
-	};
-
-	/**
-	 * a function used to determine if two objects should collide (based on both respective objects collision mask and type).<br>
-	 * you can redefine this function if you need any specific rules over what should collide with what.
-	 * @name shouldCollide
-	 * @memberof collision
-	 * @ignore
-	 * @param {Renderable} a a reference to the object A.
-	 * @param {Renderable} b a reference to the object B.
-	 * @returns {boolean} true if they should collide, false otherwise
-	 */
-	function shouldCollide(a, b) {
-	    return (
-	        a.isKinematic !== true && b.isKinematic !== true &&
-	        typeof a.body === "object" && typeof b.body === "object" &&
-	        !(a.body.isStatic === true && b.body.isStatic === true) &&
-	        (a.body.collisionMask & b.body.collisionType) !== 0 &&
-	        (a.body.collisionType & b.body.collisionMask) !== 0
-	    );
-	}
 	/**
 	 * @classdesc
 	 * An object representing the result of an intersection.
@@ -15455,7 +15425,6 @@
 	 * @property {number} indexShapeA The index of the colliding shape for the object a body
 	 * @property {number} indexShapeB The index of the colliding shape for the object b body
 	 * @name ResponseObject
-	 * @memberof collision
 	 * @public
 	 */
 	var ResponseObject = function ResponseObject() {
@@ -15476,7 +15445,6 @@
 	 * Response object for multiple intersection tests <br>
 	 * (recommended as it will avoid allocating extra memory) <br>
 	 * @name clear
-	 * @memberof collision.ResponseObject
 	 * @public
 	 * @returns {object} this object for chaining
 	 */
@@ -15489,15 +15457,47 @@
 	    return this;
 	};
 
-	// @ignore
+	// a dummy object when using Line for raycasting
+	var dummyObj = {
+	    pos : new Vector2d(0, 0),
+	    ancestor : {
+	        _absPos : new Vector2d(0, 0),
+	        getAbsolutePosition : function () {
+	            return this._absPos;
+	        }
+	    }
+	};
+
+	// the global response object used for collisions
 	var globalResponse = new ResponseObject();
 
+	/**
+	 * a function used to determine if two objects should collide (based on both respective objects collision mask and type).<br>
+	 * you can redefine this function if you need any specific rules over what should collide with what.
+	 * @name shouldCollide
+	 * @memberof collision
+	 * @ignore
+	 * @param {Renderable} a a reference to the object A.
+	 * @param {Renderable} b a reference to the object B.
+	 * @returns {boolean} true if they should collide, false otherwise
+	 */
+	function shouldCollide(a, b) {
+	    return (
+	        a.isKinematic !== true && b.isKinematic !== true &&
+	        typeof a.body === "object" && typeof b.body === "object" &&
+	        !(a.body.isStatic === true && b.body.isStatic === true) &&
+	        (a.body.collisionMask & b.body.collisionType) !== 0 &&
+	        (a.body.collisionType & b.body.collisionMask) !== 0
+	    );
+	}
+
+
 	/**
 	 * find all the collisions for the specified object
 	 * @name collisionCheck
 	 * @ignore
 	 * @param {Renderable} objA object to be tested for collision
-	 * @param {collision.ResponseObject} [response=collision.response] a user defined response object that will be populated if they intersect.
+	 * @param {ResponseObject} [response] a user defined response object that will be populated if they intersect.
 	 * @returns {boolean} in case of collision, false otherwise
 	 */
 	function collisionCheck(objA, response) {
@@ -15731,17 +15731,6 @@
 	        ALL_OBJECT          : 0xFFFFFFFF // all objects
 	    },
 
-
-	    /**
-	     * a global instance of a response object used for collision detection <br>
-	     * this object will be reused amongst collision detection call if not user-defined response is specified
-	     * @name response
-	     * @memberof collision
-	     * @public
-	     * @type {collision.ResponseObject}
-	     */
-	    response : globalResponse,
-
 	    /**
 	     * Checks for object colliding with the given line
 	     * @name rayCast
@@ -15774,6 +15763,7 @@
 	/**
 	 * @classdesc
 	 * a Generic Physic Body Object with some physic properties and behavior functionality, to as a member of a Renderable.
+	 * @see Renderable.body
 	 */
 	var Body = function Body(ancestor, shapes, onBodyUpdate) {
 
@@ -16202,7 +16192,7 @@
 
 	/**
 	 * the built-in function to solve the collision response
-	 * @param {object} response the collision response object (see {@link collision.ResponseObject})
+	 * @param {object} response the collision response object (see {@link ResponseObject})
 	 */
 	Body.prototype.respondToCollision = function respondToCollision (response) {
 	    // the overlap vector
@@ -16339,7 +16329,6 @@
 	 * cap the body velocity (body.maxVel property) to the specified value<br>
 	 * @param {number} x max velocity on x axis
 	 * @param {number} y max velocity on y axis
-	 * @protected
 	 */
 	Body.prototype.setMaxVelocity = function setMaxVelocity (x, y) {
 	    this.maxVel.x = x;
@@ -16350,7 +16339,6 @@
 	 * set the body default friction
 	 * @param {number} x horizontal friction
 	 * @param {number} y vertical friction
-	 * @protected
 	 */
 	Body.prototype.setFriction = function setFriction (x, y) {
 	        if ( x === void 0 ) x = 0;
@@ -16461,7 +16449,7 @@
 	    pool.push(this.friction);
 	    pool.push(this.maxVel);
 	    this.shapes.forEach(function (shape) {
-	        pool.push(shape);
+	        pool.push(shape, false);
 	    });
 
 	    // set to undefined
@@ -16574,7 +16562,7 @@
 	         * @memberof Container#
 	         * @param {number} index added or removed child index
 	         */
-	        this.onChildChange = function (/* index */) {
+	        this.onChildChange = function (index) {   // eslint-disable-line no-unused-vars
 	            // to be extended
 	        };
 
@@ -16662,8 +16650,10 @@
 	     * 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.
+	     * 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.
 	     * @name addChild
 	     * @memberof Container
 	     * @param {Renderable} child
@@ -17109,7 +17099,8 @@
 	    };
 
 	    /**
-	     * Invokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed
+	     * 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.
 	     * @name removeChild
 	     * @memberof Container
 	     * @public
@@ -17411,15 +17402,14 @@
 	    };
 
 	    /**
-	     * draw the container. <br>
-	     * automatically called by the game manager {@link game}
+	      * draw this renderable (automatically called by melonJS)
 	     * @name draw
 	     * @memberof Container
 	     * @protected
-	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
-	     * @param {Rect|Bounds} [rect] the area or viewport to (re)draw
+	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+	     * @param {Camera2d} [viewport] the viewport to (re)draw
 	     */
-	    Container.prototype.draw = function draw (renderer, rect) {
+	    Container.prototype.draw = function draw (renderer, viewport) {
 	        var isFloating = false;
 	        var bounds = this.getBounds();
 
@@ -17461,7 +17451,7 @@
 	                    obj.preDraw(renderer);
 
 	                    // draw the object
-	                    obj.draw(renderer, rect);
+	                    obj.draw(renderer, viewport);
 
 	                    // postdraw (clean-up);
 	                    obj.postDraw(renderer);
@@ -19821,6 +19811,26 @@
 	        }
 	    },
 
+	    /**
+	     * returns the stage associated with the specified state
+	     * (or the current one if none is specified)
+	     * @name set
+	     * @memberof state
+	     * @public
+	     * @param {number} [state] State ID (see constants)
+	     * @returns {Stage}
+	     */
+	    get: function get(state) {
+	        if ( state === void 0 ) state = _state;
+
+	        if (typeof _stages[state] !== "undefined") {
+	            return _stages[state].stage;
+	        } else {
+	            return undefined;
+	        }
+
+	    },
+
 	    /**
 	     * return a reference to the current stage<br>
 	     * useful to call a object specific method
@@ -19830,9 +19840,7 @@
 	     * @returns {Stage}
 	     */
 	    current: function current() {
-	        if (typeof _stages[_state] !== "undefined") {
-	            return _stages[_state].stage;
-	        }
+	        return this.get();
 	    },
 
 	    /**
@@ -21205,6 +21213,8 @@
 	  * add uvs mapping for the given region
 	  * @param {object} atlas the atlas dictionnary where the region is define
 	  * @param {object} name region (or frame) name
+	  * @param {number} w the width of the region
+	  * @param {number} h the height of the region
 	  * @returns {Float32Array} the created region UVs
 	  */
 	 TextureAtlas.prototype.addUVs = function addUVs (atlas, name, w, h) {
@@ -21885,14 +21895,14 @@
 	    };
 
 	    /**
-	     * sprite draw. <br>
-	     * automatically called by the game manager {@link game}
+	     * draw this srite (automatically called by melonJS)
 	     * @name draw
 	     * @memberof Sprite
 	     * @protected
-	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+	     * @param {Camera2d} [viewport] the viewport to (re)draw
 	     */
-	    Sprite.prototype.draw = function draw (renderer) {
+	    Sprite.prototype.draw = function draw (renderer, viewport) {   // eslint-disable-line no-unused-vars
 	        // do nothing if we are flickering
 	        if (this._flicker.isFlickering) {
 	            this._flicker.state = !this._flicker.state;
@@ -22539,10 +22549,10 @@
 	 * adds a circular arc to the path with the given control points and radius, connected to the previous point by a straight line.
 	 * @name arcTo
 	 * @memberof Path2D
-	 * @param {number} x the x-axis coordinate of the first control point.
-	 * @param {number} y the y-axis coordinate of the first control point.
-	 * @param {number} x the x-axis coordinate of the second control point.
-	 * @param {number} y the y-axis coordinate of the second control point.
+	 * @param {number} x1 the x-axis coordinate of the first control point.
+	 * @param {number} y1 the y-axis coordinate of the first control point.
+	 * @param {number} x2 the x-axis coordinate of the second control point.
+	 * @param {number} y2 the y-axis coordinate of the second control point.
 	 * @param {number} radius the arc's radius. Must be positive.
 	 */
 	Path2D.prototype.arcTo = function arcTo (x1, y1, x2, y2, radius) {
@@ -32891,10 +32901,10 @@
 	     * this can be overridden by the plugin
 	     * @public
 	     * @type {string}
-	     * @default "10.11.0"
+	     * @default "10.12.0"
 	     * @name plugin.Base#version
 	     */
-	    this.version = "10.11.0";
+	    this.version = "10.12.0";
 	};
 
 	/**
@@ -34176,11 +34186,14 @@
 	var toPX = [12, 24, 0.75, 1];
 
 	// return a valid 2d context for Text rendering/styling
-	var getContext2d = function (renderer, text) {
+	var getContext2d = function (renderer$1, text) {
 	    if (text.offScreenCanvas === true) {
 	        return text.canvasTexture.context;
 	    } else {
-	        return renderer.getFontContext();
+	        if (typeof renderer$1 === "undefined") {
+	            renderer$1 = renderer;
+	        }
+	        return renderer$1.getFontContext();
 	    }
 	};
 
@@ -34477,15 +34490,14 @@
 
 	    /**
 	     * measure the given text size in pixels
-	     * @param {CanvasRenderer|WebGLRenderer} [renderer] reference to the active renderer
+	     * @param {CanvasRenderer|WebGLRenderer} renderer reference to the active renderer
 	     * @param {string} [text] the text to be measured
 	     * @returns {TextMetrics} a TextMetrics object defining the dimensions of the given piece of text
 	     */
-	    Text.prototype.measureText = function measureText (renderer$1, text) {
-	        if ( renderer$1 === void 0 ) renderer$1 = renderer;
+	    Text.prototype.measureText = function measureText (renderer, text) {
 	        if ( text === void 0 ) text = this._text;
 
-	        return this.metrics.measureText(text, getContext2d(renderer$1, this));
+	        return this.metrics.measureText(text, getContext2d(renderer, this));
 	    };
 
 
@@ -34498,6 +34510,10 @@
 	     * @param {boolean} [stroke=false] draw stroke the the text if true
 	     */
 	    Text.prototype.draw = function draw (renderer, text, x, y, stroke) {
+	        if ( x === void 0 ) x = this.pos.x;
+	        if ( y === void 0 ) y = this.pos.y;
+	        if ( stroke === void 0 ) stroke = false;
+
 	        // "hacky patch" for backward compatibilty
 	        if (typeof this.ancestor === "undefined") {
 
@@ -35191,15 +35207,18 @@
 	    };
 
 	    /**
-	     * draw the color layer
-	     * @ignore
+	     * draw this color layer (automatically called by melonJS)
+	     * @name draw
+	     * @memberof ColorLayer
+	     * @protected
+	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+	     * @param {Camera2d} [viewport] the viewport to (re)draw
 	     */
-	    ColorLayer.prototype.draw = function draw (renderer, rect) {
-	        var vpos = viewport.pos;
+	    ColorLayer.prototype.draw = function draw (renderer, viewport) {
 	        renderer.save();
 	        renderer.clipRect(
-	            rect.left - vpos.x, rect.top - vpos.y,
-	            rect.width, rect.height
+	            0, 0,
+	            viewport.width, viewport.height
 	        );
 	        renderer.clearColor(this.color);
 	        renderer.restore();
@@ -35367,7 +35386,7 @@
 	     * @param {number} h new height
 	     */
 	    ImageLayer.prototype.resize = function resize (w, h) {
-	        Sprite.prototype.resize.call(
+	        return Sprite.prototype.resize.call(
 	            this, this.repeatX ? Infinity : w,
 	            this.repeatY ? Infinity : h
 	        );
@@ -35446,14 +35465,14 @@
 	    };
 
 	    /**
-	     * draw the ImageLayer. <br>
-	     * automatically called by the game manager {@link game}
+	     * draw this ImageLayer (automatically called by melonJS)
 	     * @name draw
 	     * @memberof ImageLayer
 	     * @protected
-	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+	     * @param {Camera2d} [viewport] the viewport to (re)draw
 	     */
-	    ImageLayer.prototype.draw = function draw (renderer) {
+	    ImageLayer.prototype.draw = function draw (renderer, viewport) {
 	        var width = this.width,
 	            height = this.height,
 	            bw = viewport.bounds.width,
@@ -35785,7 +35804,7 @@
 	     * @param {Pointer} event the event object
 	     * @returns {boolean} return false if we need to stop propagating the event
 	     */
-	    GUI_Object.prototype.onClick = function onClick (/* event */) {
+	    GUI_Object.prototype.onClick = function onClick (event) { // eslint-disable-line no-unused-vars
 	        return false;
 	    };
 
@@ -35806,7 +35825,9 @@
 	     * @public
 	     * @param {Pointer} event the event object
 	     */
-	    GUI_Object.prototype.onOver = function onOver (/* event */) {};
+	    GUI_Object.prototype.onOver = function onOver (event) { // eslint-disable-line no-unused-vars
+	        // to be extended
+	    };
 
 	    /**
 	     * function callback for the pointerLeave event
@@ -35826,8 +35847,8 @@
 	     * @public
 	     * @param {Pointer} event the event object
 	     */
-	    GUI_Object.prototype.onOut = function onOut (/* event */) {
-
+	    GUI_Object.prototype.onOut = function onOut (event) { // eslint-disable-line no-unused-vars
+	        // to be extended
 	    };
 
 	    /**
@@ -36056,8 +36077,15 @@
 	        }
 	    };
 
-	    /** @ignore */
-	    Trigger.prototype.onCollision = function onCollision () {
+	    /**
+	     * 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)
+	     */
+	    Trigger.prototype.onCollision = function onCollision (response, other) { // eslint-disable-line no-unused-vars
 	        if (this.name === "Trigger") {
 	            this.triggerEvent.apply(this);
 	        }
@@ -36156,10 +36184,14 @@
 	    };
 
 	    /**
-	     * object draw (Called internally by the engine).
-	     * @ignore
+	     * 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
 	     */
-	    Light2d.prototype.draw = function draw (renderer) {
+	    Light2d.prototype.draw = function draw (renderer, viewport) {   // eslint-disable-line no-unused-vars
 	        renderer.drawImage(this.texture.canvas, this.getBounds().x, this.getBounds().y);
 	    };
 
@@ -36374,7 +36406,7 @@
 	     * @memberof DropTarget
 	     * @param {Draggable} draggable the draggable object that is dropped
 	     */
-	    DropTarget.prototype.drop = function drop () {
+	    DropTarget.prototype.drop = function drop (draggable) {  // eslint-disable-line no-unused-vars
 
 	    };
 
@@ -37286,23 +37318,21 @@
 	    };
 
 	    /**
-	     * object draw<br>
-	     * not to be called by the end user<br>
-	     * called by the game manager on each game loop
+	     * draw this entity (automatically called by melonJS)
 	     * @name draw
 	     * @memberof Entity
 	     * @protected
-	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
-	     * @param {Rect} rect region to draw
+	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+	     * @param {Camera2d} [viewport] the viewport to (re)draw
 	     */
-	    Entity.prototype.draw = function draw (renderer, rect) {
+	    Entity.prototype.draw = function draw (renderer, viewport) {
 	        var renderable = this.renderable;
 	        if (renderable instanceof Renderable) {
 	            // predraw (apply transforms)
 	            renderable.preDraw(renderer);
 
 	            // draw the object
-	            renderable.draw(renderer, rect);
+	            renderable.draw(renderer, viewport);
 
 	            // postdraw (clean-up);
 	            renderable.postDraw(renderer);
@@ -37478,7 +37508,7 @@
 	 * @name version
 	 * @type {string}
 	 */
-	var version = "10.11.0";
+	var version = "10.12.0";
 
 
 	/**