melonjs 10.9.0 → 10.12.0

package/src/renderable/renderable.js

@@ -380,8 +380,7 @@ class Renderable extends Rect {
     /**
      * returns the bounding box for this renderable
      * @name getBounds
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @returns {Bounds} bounding box Rectangle object
      */
     getBounds() {
@@ -401,8 +400,7 @@ class Renderable extends Rect {
     /**
      * get the renderable alpha channel value<br>
      * @name getOpacity
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @returns {number} current opacity value between 0 and 1
      */
     getOpacity() {
@@ -412,8 +410,7 @@ class Renderable extends Rect {
     /**
      * set the renderable alpha channel value<br>
      * @name setOpacity
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @param {number} alpha opacity value between 0.0 and 1.0
      */
     setOpacity(alpha) {
@@ -431,8 +428,7 @@ class Renderable extends Rect {
      * flip the renderable on the horizontal axis (around the center of the renderable)
      * @see Matrix2d#scaleX
      * @name flipX
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @param {boolean} [flip=true] `true` to flip this renderable.
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -446,8 +442,7 @@ class Renderable extends Rect {
      * flip the renderable on the vertical axis (around the center of the renderable)
      * @see Matrix2d#scaleY
      * @name flipY
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @param {boolean} [flip=true] `true` to flip this renderable.
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -460,9 +455,8 @@ class Renderable extends Rect {
     /**
      * multiply the renderable currentTransform with the given matrix
      * @name transform
-     * @memberof Renderable.prototype
+     * @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
      */
@@ -525,8 +517,7 @@ class Renderable extends Rect {
     /**
      * Rotate this renderable towards the given target.
      * @name lookAt
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @param {Renderable|Vector2d|Vector3d} target the renderable or position to look at
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -549,8 +540,7 @@ class Renderable extends Rect {
     /**
      * Rotate this renderable by the specified angle (in radians).
      * @name rotate
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @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
@@ -571,8 +561,7 @@ class Renderable extends Rect {
      * is an image, the image.width and image.height properties are unaltered but the currentTransform
      * member will be changed.
      * @name scale
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @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
@@ -587,8 +576,7 @@ class Renderable extends Rect {
     /**
      * scale the renderable around his anchor point
      * @name scaleV
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @param {Vector2d} v scaling vector
      * @returns {Renderable} Reference to this object for method chaining
      */
@@ -601,8 +589,7 @@ class Renderable extends Rect {
      * update function. <br>
      * automatically called by the game manager {@link game}
      * @name update
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @protected
      * @param {number} dt time since the last update in milliseconds.
      * @returns {boolean} true if the renderable is dirty
@@ -615,8 +602,7 @@ class Renderable extends Rect {
      * update the bounding box for this shape.
      * @ignore
      * @name updateBounds
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @returns {Bounds} this shape bounding box Rectangle object
      */
     updateBounds() {
@@ -629,8 +615,7 @@ class Renderable extends Rect {
      * update the renderable's bounding rect (private)
      * @ignore
      * @name updateBoundsPos
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      */
      updateBoundsPos(newX, newY) {
          var bounds = this.getBounds();
@@ -655,14 +640,14 @@ class Renderable extends Rect {
          if (this.ancestor instanceof Container && this.floating !== true) {
              bounds.translate(this.ancestor.getAbsolutePosition());
          }
-         //return bounds;
+
+         this.isDirty = true;
      }
 
      /**
       * return the renderable absolute position in the game world
       * @name getAbsolutePosition
-      * @memberof Renderable.prototype
-      * @function
+      * @memberof Renderable
       * @returns {Vector2d}
       */
       getAbsolutePosition() {
@@ -681,8 +666,7 @@ class Renderable extends Rect {
      * called when the anchor point value is changed
      * @private
      * @name onAnchorUpdate
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @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
      */
@@ -699,8 +683,7 @@ class Renderable extends Rect {
      * (apply defined transforms, anchor point). <br>
      * automatically called by the game manager {@link game}
      * @name preDraw
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
@@ -752,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.prototype
-     * @function
+     * @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
      */
-    draw(renderer) {  // eslint-disable-line no-unused-vars
+    draw(renderer, viewport) {  // eslint-disable-line no-unused-vars
         // empty one !
     }
 
@@ -768,8 +750,7 @@ class Renderable extends Rect {
      * restore the rendering context after drawing. <br>
      * automatically called by the game manager {@link game}
      * @name postDraw
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
@@ -793,9 +774,8 @@ class Renderable extends Rect {
      * onCollision callback, triggered in case of collision,
      * when this renderable body is colliding with another one
      * @name onCollision
-     * @memberof Renderable.prototype
-     * @function
-     * @param {collision.ResponseObject} response the collision response object
+     * @memberof Renderable
+     * @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
@@ -812,7 +792,7 @@ class Renderable extends Rect {
      *     return true;
      * },
      */
-    onCollision() {
+    onCollision(response, other) { // eslint-disable-line no-unused-vars
         return false;
     }
 
@@ -871,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

@@ -1,7 +1,7 @@
 import { renderer } from "./../video/video.js";
 import pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
-import { TextureAtlas } from "./../video/texture.js";
+import { TextureAtlas } from "./../video/texture/atlas.js";
 import Renderable from "./renderable.js";
 
 /**
@@ -209,8 +209,7 @@ class Sprite extends Renderable {
     /**
      * return the flickering state of the object
      * @name isFlickering
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @returns {boolean}
      */
     isFlickering() {
@@ -220,8 +219,7 @@ class Sprite extends Renderable {
     /**
      * make the object flicker
      * @name flicker
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @param {number} duration expressed in milliseconds
      * @param {Function} callback Function to call when flickering ends
      * @returns {Sprite} Reference to this object for method chaining
@@ -251,8 +249,7 @@ class Sprite extends Renderable {
      * logic as per the following example :<br>
      * <img src="images/spritesheet_grid.png"/>
      * @name addAnimation
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @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
@@ -351,8 +348,7 @@ class Sprite extends Renderable {
      * set the current animation
      * this will always change the animation & set the frame to zero
      * @name setCurrentAnimation
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @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
@@ -412,8 +408,7 @@ class Sprite extends Renderable {
     /**
      * reverse the given or current animation if none is specified
      * @name reverseAnimation
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @param {string} [name] animation id
      * @returns {Sprite} Reference to this object for method chaining
      * @see Sprite#animationspeed
@@ -431,8 +426,7 @@ class Sprite extends Renderable {
     /**
      * return true if the specified animation is the current one.
      * @name isCurrentAnimation
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @param {string} name animation id
      * @returns {boolean}
      * @example
@@ -448,8 +442,7 @@ class Sprite extends Renderable {
      * change the current texture atlas region for this sprite
      * @see Texture.getRegion
      * @name setRegion
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @param {object} region typically returned through me.Texture.getRegion()
      * @returns {Sprite} Reference to this object for method chaining
      * @example
@@ -480,8 +473,7 @@ class Sprite extends Renderable {
     /**
      * force the current animation frame index.
      * @name setAnimationFrame
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @param {number} [idx=0] animation frame index
      * @returns {Sprite} Reference to this object for method chaining
      * @example
@@ -496,8 +488,7 @@ class Sprite extends Renderable {
     /**
      * return the current animation frame index.
      * @name getCurrentAnimationFrame
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @returns {number} current animation frame index
      */
     getCurrentAnimationFrame() {
@@ -507,8 +498,7 @@ class Sprite extends Renderable {
     /**
      * Returns the frame object by the index.
      * @name getAnimationFrameObjectByIndex
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @ignore
      * @param {number} id the frame id
      * @returns {number} if using number indices. Returns {object} containing frame data if using texture atlas
@@ -521,8 +511,7 @@ class Sprite extends Renderable {
      * update function. <br>
      * automatically called by the game manager {@link game}
      * @name update
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @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.prototype
-     * @function
+     * @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
      */
-    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

@@ -1,6 +1,7 @@
 import { renderer } from "./../video/video.js";
 import * as  game from "./../game.js";
 import Camera2d from "./../camera/camera2d.js";
+import Color from "./../math/color.js";
 
 // a default camera instance to use across all stages
 var default_camera;
@@ -37,6 +38,40 @@ class Stage {
          */
         this.cameras = new Map();
 
+        /**
+         * The list of active lights in this stage.
+         * (Note: Canvas Renderering mode will only properly support one light per stage)
+         * @public
+         * @type {Map<Light2d>}
+         * @name lights
+         * @memberof Stage
+         * @see Light2d
+         * @see Stage.ambientLight
+         * @example
+         * // create a white spot light
+         * var whiteLight = new me.Light2d(0, 0, 140, "#fff", 0.7);
+         * // and add the light to this current stage
+         * this.lights.set("whiteLight", whiteLight);
+         * // set a dark ambient light
+         * this.ambientLight.parseCSS("#1117");
+         * // make the light follow the mouse
+         * me.input.registerPointerEvent("pointermove", me.game.viewport, (event) => {
+         *    whiteLight.centerOn(event.gameX, event.gameY);
+         * });
+         */
+        this.lights = new Map();
+
+        /**
+         * an ambient light that will be added to the stage rendering
+         * @public
+         * @type {Color}
+         * @name ambientLight
+         * @memberof Stage
+         * @default "#000000"
+         * @see Light2d
+         */
+        this.ambientLight = new Color(0, 0, 0, 0);
+
         /**
          * The given constructor options
          * @public
@@ -81,7 +116,6 @@ class Stage {
      * @name update
      * @memberof Stage
      * @ignore
-     * @function
      * @param {number} dt time since the last update in milliseconds.
      * @returns {boolean}
      */
@@ -92,7 +126,14 @@ class Stage {
         // update the camera/viewport
         // iterate through all cameras
         this.cameras.forEach(function(camera) {
-            if (camera.update(dt)) {
+            if (camera.update(dt) === true) {
+                isDirty = true;
+            };
+        });
+
+        // update all lights
+        this.lights.forEach((light) => {
+            if (light.update(dt) === true) {
                 isDirty = true;
             };
         });
@@ -105,14 +146,36 @@ class Stage {
      * @name draw
      * @memberof Stage
      * @ignore
-     * @function
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
     draw(renderer) {
         // iterate through all cameras
-        this.cameras.forEach(function(camera) {
+        this.cameras.forEach((camera) => {
             // render the root container
             camera.draw(renderer, game.world);
+
+            // render the ambient light
+            if (this.ambientLight.alpha !== 0) {
+                renderer.save();
+                // iterate through all lights
+                this.lights.forEach((light) => {
+                    // cut out all lights visible areas
+                    renderer.setMask(light.getVisibleArea(), true);
+                });
+                // fill the screen with the ambient color
+                renderer.setColor(this.ambientLight);
+                renderer.fillRect(0, 0, camera.width, camera.height);
+                // clear all masks
+                renderer.clearMask();
+                renderer.restore();
+            }
+
+            // render all lights
+            this.lights.forEach((light) => {
+                light.preDraw(renderer, game.world);
+                light.draw(renderer, game.world);
+                light.postDraw(renderer, game.world);
+            });
         });
     }
 
@@ -123,6 +186,11 @@ class Stage {
     destroy() {
         // clear all cameras
         this.cameras.clear();
+        // clear all lights
+        this.lights.forEach((light) => {
+            light.destroy();
+        });
+        this.lights.clear();
         // notify the object
         this.onDestroyEvent.apply(this, arguments);
     }
@@ -133,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
      */
@@ -150,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