melonjs 10.10.0 → 11.0.0

package/src/renderable/light2d.js

@@ -4,19 +4,41 @@ import Renderable from "./renderable.js";
 /** @ignore */
 function createGradient(light) {
     var context = light.texture.context;
-    var x1 = light.texture.width / 2;
-    var y1 = light.texture.height / 2;
-    var gradient = context.createRadialGradient(x1, y1, 0, x1, y1, light.radius);
+
+    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.beginPath();
     context.fillStyle = gradient;
-    context.arc(x1, y1, light.radius, 0, Math.PI * 2, false);
-    context.fill();
+
+    context.setTransform(scaleX, 0, 0, scaleY, 0, 0);
+    context.fillRect(0, 0, light.texture.width * invScaleX, light.texture.height * invScaleY);
 }
 
 /**
@@ -31,13 +53,14 @@ class Light2d extends Renderable {
    /**
     * @param {number} x - The horizontal position of the light.
     * @param {number} y - The vertical position of the light.
-    * @param {number} radius - The radius 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, radius, color = "#FFF", intensity = 0.7) {
+    constructor(x, y, radiusX, radiusY = radiusX, color = "#FFF", intensity = 0.7) {
         // call the parent constructor
-        super(x, y, radius * 2, radius * 2);
+        super(x, y, radiusX * 2, radiusY * 2);
 
         /**
          * the color of the light
@@ -47,10 +70,16 @@ class Light2d extends Renderable {
         this.color = pool.pull("Color").parseCSS(color);
 
         /**
-         * The radius of the light
+         * The horizontal radius of the light
          * @type {number}
          */
-        this.radius = radius;
+        this.radiusX = radiusX;
+
+        /**
+         * The vertical radius of the light
+         * @type {number}
+         */
+        this.radiusY = radiusY;
 
         /**
          * The intensity of the light
@@ -72,7 +101,7 @@ class Light2d extends Renderable {
         this.visibleArea = pool.pull("Ellipse", this.centerX, this.centerY, this.width, this.height);
 
         /** @ignore */
-        this.texture = pool.pull("CanvasTexture", this.width, this.height, false);
+        this.texture = pool.pull("CanvasTexture", this.width, this.height, { offscreenCanvas: false });
 
         this.anchorPoint.set(0, 0);
 
@@ -83,7 +112,6 @@ class Light2d extends Renderable {
      * returns a geometry representing the visible area of this light
      * @name getVisibleArea
      * @memberof Light2d
-     * @function
      * @returns {Ellipse} the light visible mask
      */
     getVisibleArea() {
@@ -91,10 +119,14 @@ class Light2d extends Renderable {
     }
 
     /**
-     * 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
      */
-    draw(renderer) {
+    draw(renderer, viewport) {   // eslint-disable-line no-unused-vars
         renderer.drawImage(this.texture.canvas, this.getBounds().x, this.getBounds().y);
     }
 

package/src/renderable/renderable.js

@@ -381,7 +381,6 @@ class Renderable extends Rect {
      * returns the bounding box for this renderable
      * @name getBounds
      * @memberof Renderable
-     * @function
      * @returns {Bounds} bounding box Rectangle object
      */
     getBounds() {
@@ -402,7 +401,6 @@ class Renderable extends Rect {
      * get the renderable alpha channel value<br>
      * @name getOpacity
      * @memberof Renderable
-     * @function
      * @returns {number} current opacity value between 0 and 1
      */
     getOpacity() {
@@ -413,7 +411,6 @@ class Renderable extends Rect {
      * set the renderable alpha channel value<br>
      * @name setOpacity
      * @memberof Renderable
-     * @function
      * @param {number} alpha opacity value between 0.0 and 1.0
      */
     setOpacity(alpha) {
@@ -432,7 +429,6 @@ class Renderable extends Rect {
      * @see Matrix2d#scaleX
      * @name flipX
      * @memberof Renderable
-     * @function
      * @param {boolean} [flip=true] `true` to flip this renderable.
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -447,7 +443,6 @@ class Renderable extends Rect {
      * @see Matrix2d#scaleY
      * @name flipY
      * @memberof Renderable
-     * @function
      * @param {boolean} [flip=true] `true` to flip this renderable.
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -462,7 +457,6 @@ class Renderable extends Rect {
      * @name transform
      * @memberof Renderable
      * @see Renderable#currentTransform
-     * @function
      * @param {Matrix2d} m the transformation matrix
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -478,7 +472,6 @@ class Renderable extends Rect {
      * return the angle to the specified target
      * @name angleTo
      * @memberof Renderable
-     * @function
      * @param {Renderable|Vector2d|Vector3d} target
      * @returns {number} angle in radians
      */
@@ -502,7 +495,6 @@ class Renderable extends Rect {
      * return the distance to the specified target
      * @name distanceTo
      * @memberof Renderable
-     * @function
      * @param {Renderable|Vector2d|Vector3d} target
      * @returns {number} distance
      */
@@ -526,7 +518,6 @@ class Renderable extends Rect {
      * Rotate this renderable towards the given target.
      * @name lookAt
      * @memberof Renderable
-     * @function
      * @param {Renderable|Vector2d|Vector3d} target the renderable or position to look at
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -550,7 +541,6 @@ class Renderable extends Rect {
      * Rotate this renderable by the specified angle (in radians).
      * @name rotate
      * @memberof Renderable
-     * @function
      * @param {number} angle The angle to rotate (in radians)
      * @param {Vector2d|ObservableVector2d} [v] an optional point to rotate around
      * @returns {Renderable} Reference to this object for method chaining
@@ -572,7 +562,6 @@ class Renderable extends Rect {
      * member will be changed.
      * @name scale
      * @memberof Renderable
-     * @function
      * @param {number} x a number representing the abscissa of the scaling vector.
      * @param {number} [y=x] a number representing the ordinate of the scaling vector.
      * @returns {Renderable} Reference to this object for method chaining
@@ -588,7 +577,6 @@ class Renderable extends Rect {
      * scale the renderable around his anchor point
      * @name scaleV
      * @memberof Renderable
-     * @function
      * @param {Vector2d} v scaling vector
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -602,7 +590,6 @@ class Renderable extends Rect {
      * automatically called by the game manager {@link game}
      * @name update
      * @memberof Renderable
-     * @function
      * @protected
      * @param {number} dt time since the last update in milliseconds.
      * @returns {boolean} true if the renderable is dirty
@@ -616,7 +603,6 @@ class Renderable extends Rect {
      * @ignore
      * @name updateBounds
      * @memberof Renderable
-     * @function
      * @returns {Bounds} this shape bounding box Rectangle object
      */
     updateBounds() {
@@ -630,7 +616,6 @@ class Renderable extends Rect {
      * @ignore
      * @name updateBoundsPos
      * @memberof Renderable
-     * @function
      */
      updateBoundsPos(newX, newY) {
          var bounds = this.getBounds();
@@ -663,7 +648,6 @@ class Renderable extends Rect {
       * return the renderable absolute position in the game world
       * @name getAbsolutePosition
       * @memberof Renderable
-      * @function
       * @returns {Vector2d}
       */
       getAbsolutePosition() {
@@ -683,7 +667,6 @@ class Renderable extends Rect {
      * @private
      * @name onAnchorUpdate
      * @memberof Renderable
-     * @function
      * @param {number} x the new X value to be set for the anchor
      * @param {number} y the new Y value to be set for the anchor
      */
@@ -701,7 +684,6 @@ class Renderable extends Rect {
      * automatically called by the game manager {@link game}
      * @name preDraw
      * @memberof Renderable
-     * @function
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
@@ -753,15 +735,14 @@ class Renderable extends Rect {
     }
 
     /**
-     * object draw. <br>
-     * automatically called by the game manager {@link game}
+     * draw this renderable (automatically called by melonJS)
      * @name draw
      * @memberof Renderable
-     * @function
      * @protected
-     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer) {  // eslint-disable-line no-unused-vars
+    draw(renderer, viewport) {  // eslint-disable-line no-unused-vars
         // empty one !
     }
 
@@ -770,7 +751,6 @@ class Renderable extends Rect {
      * automatically called by the game manager {@link game}
      * @name postDraw
      * @memberof Renderable
-     * @function
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
@@ -795,8 +775,7 @@ class Renderable extends Rect {
      * when this renderable body is colliding with another one
      * @name onCollision
      * @memberof Renderable
-     * @function
-     * @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
@@ -813,7 +792,7 @@ class Renderable extends Rect {
      *     return true;
      * },
      */
-    onCollision() {
+    onCollision(response, other) { // eslint-disable-line no-unused-vars
         return false;
     }
 
@@ -872,7 +851,6 @@ class Renderable extends Rect {
      * Called by engine before deleting the object
      * @name onDestroyEvent
      * @memberof Renderable
-     * @function
      */
     onDestroyEvent() {
         // to be extended !

package/src/renderable/sprite.js

@@ -210,7 +210,6 @@ class Sprite extends Renderable {
      * return the flickering state of the object
      * @name isFlickering
      * @memberof Sprite
-     * @function
      * @returns {boolean}
      */
     isFlickering() {
@@ -221,7 +220,6 @@ class Sprite extends Renderable {
      * make the object flicker
      * @name flicker
      * @memberof Sprite
-     * @function
      * @param {number} duration expressed in milliseconds
      * @param {Function} callback Function to call when flickering ends
      * @returns {Sprite} Reference to this object for method chaining
@@ -252,7 +250,6 @@ class Sprite extends Renderable {
      * <img src="images/spritesheet_grid.png"/>
      * @name addAnimation
      * @memberof Sprite
-     * @function
      * @param {string} name animation id
      * @param {number[]|string[]|object[]} index list of sprite index or name
      * defining the animation. Can also use objects to specify delay for each frame, see below
@@ -352,7 +349,6 @@ class Sprite extends Renderable {
      * this will always change the animation & set the frame to zero
      * @name setCurrentAnimation
      * @memberof Sprite
-     * @function
      * @param {string} name animation id
      * @param {string|Function} [resetAnim] animation id to switch to when complete, or callback
      * @param {boolean} [preserve_dt=false] if false will reset the elapsed time counter since last frame
@@ -413,7 +409,6 @@ class Sprite extends Renderable {
      * reverse the given or current animation if none is specified
      * @name reverseAnimation
      * @memberof Sprite
-     * @function
      * @param {string} [name] animation id
      * @returns {Sprite} Reference to this object for method chaining
      * @see Sprite#animationspeed
@@ -432,7 +427,6 @@ class Sprite extends Renderable {
      * return true if the specified animation is the current one.
      * @name isCurrentAnimation
      * @memberof Sprite
-     * @function
      * @param {string} name animation id
      * @returns {boolean}
      * @example
@@ -449,7 +443,6 @@ class Sprite extends Renderable {
      * @see Texture.getRegion
      * @name setRegion
      * @memberof Sprite
-     * @function
      * @param {object} region typically returned through me.Texture.getRegion()
      * @returns {Sprite} Reference to this object for method chaining
      * @example
@@ -481,7 +474,6 @@ class Sprite extends Renderable {
      * force the current animation frame index.
      * @name setAnimationFrame
      * @memberof Sprite
-     * @function
      * @param {number} [idx=0] animation frame index
      * @returns {Sprite} Reference to this object for method chaining
      * @example
@@ -497,7 +489,6 @@ class Sprite extends Renderable {
      * return the current animation frame index.
      * @name getCurrentAnimationFrame
      * @memberof Sprite
-     * @function
      * @returns {number} current animation frame index
      */
     getCurrentAnimationFrame() {
@@ -508,7 +499,6 @@ class Sprite extends Renderable {
      * Returns the frame object by the index.
      * @name getAnimationFrameObjectByIndex
      * @memberof Sprite
-     * @function
      * @ignore
      * @param {number} id the frame id
      * @returns {number} if using number indices. Returns {object} containing frame data if using texture atlas
@@ -522,7 +512,6 @@ class Sprite extends Renderable {
      * automatically called by the game manager {@link game}
      * @name update
      * @memberof Sprite
-     * @function
      * @protected
      * @param {number} dt time since the last update in milliseconds.
      * @returns {boolean} true if the Sprite is dirty
@@ -597,15 +586,14 @@ class Sprite extends Renderable {
     }
 
     /**
-     * sprite draw. <br>
-     * automatically called by the game manager {@link game}
+     * draw this srite (automatically called by melonJS)
      * @name draw
      * @memberof Sprite
-     * @function
      * @protected
-     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer) {
+    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;

package/src/renderable/trigger.js

@@ -3,6 +3,7 @@ import collision from "./../physics/collision.js";
 import Body from "./../physics/body.js";
 import level from "./../level/level.js";
 import { world, viewport } from "./../game.js";
+import pool from "./../system/pooling.js";
 
 /**
  * @classdesc
@@ -105,7 +106,6 @@ class Trigger extends Renderable {
      * trigger this event
      * @name triggerEvent
      * @memberof Trigger
-     * @function
      * @protected
      */
     triggerEvent() {
@@ -129,8 +129,15 @@ class Trigger extends Renderable {
         }
     }
 
-    /** @ignore */
-    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)
+     */
+    onCollision(response, other) { // eslint-disable-line no-unused-vars
         if (this.name === "Trigger") {
             this.triggerEvent.apply(this);
         }

package/src/state/stage.js

@@ -116,7 +116,6 @@ class Stage {
      * @name update
      * @memberof Stage
      * @ignore
-     * @function
      * @param {number} dt time since the last update in milliseconds.
      * @returns {boolean}
      */
@@ -147,7 +146,6 @@ class Stage {
      * @name draw
      * @memberof Stage
      * @ignore
-     * @function
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
     draw(renderer) {
@@ -203,7 +201,6 @@ class Stage {
      * this is typically where you will load a level, add renderables, etc...
      * @name onResetEvent
      * @memberof Stage
-     * @function
      * @param {object} [...arguments] optional arguments passed when switching state
      * @see state#change
      */
@@ -220,7 +217,6 @@ class Stage {
      * called by the state manager before switching to another state
      * @name onDestroyEvent
      * @memberof Stage
-     * @function
      */
     onDestroyEvent() {
         // execute onDestroyEvent function if given through the constructor

package/src/state/state.js

@@ -1,7 +1,6 @@
 import { pauseTrack, resumeTrack } from "./../audio/audio.js";
 import * as fctUtil from "./../utils/function.js";
 import * as event from "./../system/event.js";
-import timer from "./../system/timer.js";
 import * as game from "./../game.js";
 import Stage from "./../state/stage.js";
 import DefaultLoadingScreen from "./../loader/loadingscreen.js";
@@ -41,9 +40,6 @@ var _pauseTime = 0;
 function _startRunLoop() {
     // ensure nothing is running first and in valid state
     if ((_animFrameId === -1) && (_state !== -1)) {
-        // reset the timer
-        timer.reset();
-
         // start the main loop
         _animFrameId = globalThis.requestAnimationFrame(_renderFrame);
     }
@@ -56,9 +52,6 @@ function _startRunLoop() {
 function _resumeRunLoop() {
     // ensure game is actually paused and in valid state
     if (_isPaused && (_state !== -1)) {
-        // reset the timer
-        timer.reset();
-
         _isPaused = false;
     }
 }
@@ -124,6 +117,9 @@ function _switchState(state) {
         // new requested state
         _startRunLoop();
 
+        // publish the pause event
+        event.emit(event.STATE_CHANGE);
+
         // execute callback if defined
         if (_onSwitchComplete) {
             _onSwitchComplete();
@@ -253,7 +249,6 @@ var state = {
      * @name stop
      * @memberof state
      * @public
-     * @function
      * @param {boolean} [pauseTrack=false] pause current track on screen stop.
      */
     stop(pauseTrack=false) {
@@ -280,7 +275,6 @@ var state = {
      * @name pause
      * @memberof state
      * @public
-     * @function
      * @param {boolean} [music=false] pause current music track on screen pause
      */
     pause(music=false) {
@@ -306,7 +300,6 @@ var state = {
      * @name restart
      * @memberof state
      * @public
-     * @function
      * @param {boolean} [music=false] resume current music track on screen resume
      */
     restart(music=false) {
@@ -334,7 +327,6 @@ var state = {
      * @name resume
      * @memberof state
      * @public
-     * @function
      * @param {boolean} [music=false] resume current music track on screen resume
      */
     resume(music=false) {
@@ -359,7 +351,6 @@ var state = {
      * @name isRunning
      * @memberof state
      * @public
-     * @function
      * @returns {boolean} true if a "process is running"
      */
     isRunning() {
@@ -371,7 +362,6 @@ var state = {
      * @name isPaused
      * @memberof state
      * @public
-     * @function
      * @returns {boolean} true if the game is paused
      */
     isPaused() {
@@ -383,7 +373,6 @@ var state = {
      * @name set
      * @memberof state
      * @public
-     * @function
      * @param {number} state State ID (see constants)
      * @param {Stage} stage Instantiated Stage to associate with state ID
      * @param {boolean} [start = false] if true the state will be changed immediately after adding it.
@@ -437,19 +426,34 @@ var state = {
         }
     },
 
+    /**
+     * 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(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
      * @name current
      * @memberof state
      * @public
-     * @function
      * @returns {Stage}
      */
     current() {
-        if (typeof _stages[_state] !== "undefined") {
-            return _stages[_state].stage;
-        }
+        return this.get();
     },
 
     /**
@@ -457,7 +461,6 @@ var state = {
      * @name transition
      * @memberof state
      * @public
-     * @function
      * @param {string} effect (only "fade" is supported for now)
      * @param {Color|string} color a CSS color value
      * @param {number} [duration=1000] expressed in milliseconds
@@ -474,7 +477,6 @@ var state = {
      * @name setTransition
      * @memberof state
      * @public
-     * @function
      * @param {number} state State ID (see constants)
      * @param {boolean} enable
      */
@@ -487,7 +489,6 @@ var state = {
      * @name change
      * @memberof state
      * @public
-     * @function
      * @param {number} state State ID (see constants)
      * @param {boolean} forceChange if true the state will be changed immediately
      * @param {object} [...arguments] extra arguments to be passed to the reset functions
@@ -511,7 +512,6 @@ var state = {
             }
             // if fading effect
             if (_fade.duration && _stages[state].transition) {
-                /** @ignore */
                 _onSwitchComplete = () => {
                     game.viewport.fadeOut(_fade.color, _fade.duration);
                 };
@@ -542,7 +542,6 @@ var state = {
      * @name isCurrent
      * @memberof state
      * @public
-     * @function
      * @param {number} state State ID (see constants)
      * @returns {boolean} true if the specified state is the current one
      */