melonjs 10.8.0 → 10.11.0

package/src/renderable/renderable.js

@@ -227,7 +227,7 @@ class Renderable extends Rect {
          * A mask limits rendering elements to the shape and position of the given mask object.
          * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
          * @public
-         * @type {Rect|Polygon|Line|Ellipse}
+         * @type {Rect|RoundRect|Polygon|Line|Ellipse}
          * @name mask
          * @default undefined
          * @memberof Renderable#
@@ -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
      */
@@ -755,8 +738,7 @@ class Renderable extends Rect {
      * object draw. <br>
      * automatically called by the game manager {@link game}
      * @name draw
-     * @memberof Renderable.prototype
-     * @function
+     * @memberof Renderable
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
@@ -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,8 +774,7 @@ 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
+     * @memberof Renderable
      * @param {collision.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)
@@ -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
@@ -600,8 +589,7 @@ class Sprite extends Renderable {
      * sprite draw. <br>
      * automatically called by the game manager {@link game}
      * @name draw
-     * @memberof Sprite.prototype
-     * @function
+     * @memberof Sprite
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */

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() {

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

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.
@@ -443,7 +432,6 @@ var state = {
      * @name current
      * @memberof state
      * @public
-     * @function
      * @returns {Stage}
      */
     current() {
@@ -457,7 +445,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 +461,6 @@ var state = {
      * @name setTransition
      * @memberof state
      * @public
-     * @function
      * @param {number} state State ID (see constants)
      * @param {boolean} enable
      */
@@ -487,7 +473,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 +496,6 @@ var state = {
             }
             // if fading effect
             if (_fade.duration && _stages[state].transition) {
-                /** @ignore */
                 _onSwitchComplete = () => {
                     game.viewport.fadeOut(_fade.color, _fade.duration);
                 };
@@ -542,7 +526,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
      */