melonjs 10.7.1 → 10.10.0

package/src/renderable/light2d.js

@@ -0,0 +1,115 @@
+import pool from "./../system/pooling.js";
+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);
+
+    light.texture.clear();
+
+    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();
+}
+
+/**
+ * @classdesc
+ * A 2D point light.
+ * Note: this is a very experimental and work in progress feature, that provides a simple spot light effect.
+ * The light effect is best rendered in WebGL, as they are few limitations when using the Canvas Renderer
+ * (multiple lights are not supported, alpha component of the ambient light is ignored)
+ * @see stage.lights
+ */
+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 {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) {
+        // call the parent constructor
+        super(x, y, radius * 2, radius * 2);
+
+        /**
+         * the color of the light
+         * @type {Color}
+         * @default "#FFF"
+         */
+        this.color = pool.pull("Color").parseCSS(color);
+
+        /**
+         * The radius of the light
+         * @type {number}
+         */
+        this.radius = radius;
+
+        /**
+         * The intensity of the light
+         * @type {number}
+         * @default 0.7
+         */
+        this.intensity = intensity;
+
+        /**
+         * the default blend mode to be applied when rendering this light
+         * @type {string}
+         * @default "lighter"
+         * @see CanvasRenderer#setBlendMode
+         * @see WebGLRenderer#setBlendMode
+         */
+        this.blendMode = "lighter";
+
+        /** @ignore */
+        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.anchorPoint.set(0, 0);
+
+        createGradient(this);
+    }
+
+    /**
+     * returns a geometry representing the visible area of this light
+     * @name getVisibleArea
+     * @memberof Light2d
+     * @function
+     * @returns {Ellipse} the light visible mask
+     */
+    getVisibleArea() {
+        return this.visibleArea.setShape(this.getBounds().centerX, this.getBounds().centerY, this.width, this.height);
+    }
+
+    /**
+     * object draw (Called internally by the engine).
+     * @ignore
+     */
+    draw(renderer) {
+        renderer.drawImage(this.texture.canvas, this.getBounds().x, this.getBounds().y);
+    }
+
+    /**
+     * Destroy function<br>
+     * @ignore
+     */
+    destroy() {
+        pool.push(this.color);
+        this.color = undefined;
+        pool.push(this.texture);
+        this.texture = undefined;
+        pool.push(this.visibleArea);
+        this.visibleArea = undefined;
+        super.destroy();
+    }
+};
+export default Light2d;

package/src/renderable/renderable.js

@@ -2,7 +2,7 @@ import ObservableVector2d from "./../math/observable_vector2.js";
 import ObservableVector3d from "./../math/observable_vector3.js";
 import Rect from "./../geometries/rectangle.js";
 import Container from "./container.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import { releaseAllPointerEvents } from "./../input/input.js";
 import { clamp } from "./../math/math.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,7 +380,7 @@ class Renderable extends Rect {
     /**
      * returns the bounding box for this renderable
      * @name getBounds
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @returns {Bounds} bounding box Rectangle object
      */
@@ -401,7 +401,7 @@ class Renderable extends Rect {
     /**
      * get the renderable alpha channel value<br>
      * @name getOpacity
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @returns {number} current opacity value between 0 and 1
      */
@@ -412,7 +412,7 @@ class Renderable extends Rect {
     /**
      * set the renderable alpha channel value<br>
      * @name setOpacity
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @param {number} alpha opacity value between 0.0 and 1.0
      */
@@ -431,7 +431,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
+     * @memberof Renderable
      * @function
      * @param {boolean} [flip=true] `true` to flip this renderable.
      * @returns {Renderable} Reference to this object for method chaining
@@ -446,7 +446,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
+     * @memberof Renderable
      * @function
      * @param {boolean} [flip=true] `true` to flip this renderable.
      * @returns {Renderable} Reference to this object for method chaining
@@ -460,7 +460,7 @@ 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
@@ -525,7 +525,7 @@ class Renderable extends Rect {
     /**
      * Rotate this renderable towards the given target.
      * @name lookAt
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @param {Renderable|Vector2d|Vector3d} target the renderable or position to look at
      * @returns {Renderable} Reference to this object for method chaining
@@ -549,7 +549,7 @@ class Renderable extends Rect {
     /**
      * Rotate this renderable by the specified angle (in radians).
      * @name rotate
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @param {number} angle The angle to rotate (in radians)
      * @param {Vector2d|ObservableVector2d} [v] an optional point to rotate around
@@ -571,7 +571,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
+     * @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.
@@ -587,7 +587,7 @@ class Renderable extends Rect {
     /**
      * scale the renderable around his anchor point
      * @name scaleV
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @param {Vector2d} v scaling vector
      * @returns {Renderable} Reference to this object for method chaining
@@ -601,7 +601,7 @@ class Renderable extends Rect {
      * update function. <br>
      * automatically called by the game manager {@link game}
      * @name update
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @protected
      * @param {number} dt time since the last update in milliseconds.
@@ -615,7 +615,7 @@ class Renderable extends Rect {
      * update the bounding box for this shape.
      * @ignore
      * @name updateBounds
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @returns {Bounds} this shape bounding box Rectangle object
      */
@@ -629,7 +629,7 @@ class Renderable extends Rect {
      * update the renderable's bounding rect (private)
      * @ignore
      * @name updateBoundsPos
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      */
      updateBoundsPos(newX, newY) {
@@ -655,13 +655,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
+      * @memberof Renderable
       * @function
       * @returns {Vector2d}
       */
@@ -681,7 +682,7 @@ class Renderable extends Rect {
      * called when the anchor point value is changed
      * @private
      * @name onAnchorUpdate
-     * @memberof Renderable.prototype
+     * @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
@@ -699,7 +700,7 @@ class Renderable extends Rect {
      * (apply defined transforms, anchor point). <br>
      * automatically called by the game manager {@link game}
      * @name preDraw
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
@@ -755,7 +756,7 @@ class Renderable extends Rect {
      * object draw. <br>
      * automatically called by the game manager {@link game}
      * @name draw
-     * @memberof Renderable.prototype
+     * @memberof Renderable
      * @function
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
@@ -768,7 +769,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
+     * @memberof Renderable
      * @function
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
@@ -793,7 +794,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
+     * @memberof Renderable
      * @function
      * @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)

package/src/renderable/sprite.js

@@ -1,8 +1,7 @@
-import Vector2d from "./../math/vector2.js";
 import { renderer } from "./../video/video.js";
-import * as pool from "./../system/pooling.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";
 
 /**
@@ -99,7 +98,7 @@ class Sprite extends Renderable {
             // length of the current animation name
             length : 0,
             //current frame texture offset
-            offset : new Vector2d(),
+            offset : pool.pull("Vector2d"),
             // current frame size
             width : 0,
             height : 0,
@@ -210,7 +209,7 @@ class Sprite extends Renderable {
     /**
      * return the flickering state of the object
      * @name isFlickering
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @returns {boolean}
      */
@@ -221,7 +220,7 @@ class Sprite extends Renderable {
     /**
      * make the object flicker
      * @name flicker
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @param {number} duration expressed in milliseconds
      * @param {Function} callback Function to call when flickering ends
@@ -252,7 +251,7 @@ class Sprite extends Renderable {
      * logic as per the following example :<br>
      * <img src="images/spritesheet_grid.png"/>
      * @name addAnimation
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @param {string} name animation id
      * @param {number[]|string[]|object[]} index list of sprite index or name
@@ -352,7 +351,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
+     * @memberof Sprite
      * @function
      * @param {string} name animation id
      * @param {string|Function} [resetAnim] animation id to switch to when complete, or callback
@@ -413,7 +412,7 @@ class Sprite extends Renderable {
     /**
      * reverse the given or current animation if none is specified
      * @name reverseAnimation
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @param {string} [name] animation id
      * @returns {Sprite} Reference to this object for method chaining
@@ -432,7 +431,7 @@ class Sprite extends Renderable {
     /**
      * return true if the specified animation is the current one.
      * @name isCurrentAnimation
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @param {string} name animation id
      * @returns {boolean}
@@ -449,7 +448,7 @@ class Sprite extends Renderable {
      * change the current texture atlas region for this sprite
      * @see Texture.getRegion
      * @name setRegion
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @param {object} region typically returned through me.Texture.getRegion()
      * @returns {Sprite} Reference to this object for method chaining
@@ -481,7 +480,7 @@ class Sprite extends Renderable {
     /**
      * force the current animation frame index.
      * @name setAnimationFrame
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @param {number} [idx=0] animation frame index
      * @returns {Sprite} Reference to this object for method chaining
@@ -497,7 +496,7 @@ class Sprite extends Renderable {
     /**
      * return the current animation frame index.
      * @name getCurrentAnimationFrame
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @returns {number} current animation frame index
      */
@@ -508,7 +507,7 @@ class Sprite extends Renderable {
     /**
      * Returns the frame object by the index.
      * @name getAnimationFrameObjectByIndex
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @ignore
      * @param {number} id the frame id
@@ -522,7 +521,7 @@ class Sprite extends Renderable {
      * update function. <br>
      * automatically called by the game manager {@link game}
      * @name update
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @protected
      * @param {number} dt time since the last update in milliseconds.
@@ -601,7 +600,7 @@ class Sprite extends Renderable {
      * sprite draw. <br>
      * automatically called by the game manager {@link game}
      * @name draw
-     * @memberof Sprite.prototype
+     * @memberof Sprite
      * @function
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object

package/src/renderable/trigger.js

@@ -1,7 +1,6 @@
 import Renderable from "./renderable.js";
 import collision from "./../physics/collision.js";
 import Body from "./../physics/body.js";
-import Rect from "./../geometries/rectangle.js";
 import level from "./../level/level.js";
 import { world, viewport } from "./../game.js";
 
@@ -66,9 +65,16 @@ class Trigger extends Renderable {
             }
         }.bind(this));
 
-
-        // physic body to check for collision against
-        this.body = new Body(this, settings.shapes || new Rect(0, 0, this.width, this.height));
+        // add and configure the physic body
+        var shape = settings.shapes;
+        if (typeof shape === "undefined") {
+            shape = pool.pull("Polygon", 0, 0, [
+                pool.pull("Vector2d", 0,          0),
+                pool.pull("Vector2d", this.width, 0),
+                pool.pull("Vector2d", this.width, this.height)
+            ]);
+        }
+        this.body = new Body(this, shape);
         this.body.collisionType = collision.types.ACTION_OBJECT;
         // by default only collides with PLAYER_OBJECT
         this.body.setCollisionMask(collision.types.PLAYER_OBJECT);

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;
@@ -31,12 +32,46 @@ class Stage {
          * Cameras will be renderered based on this order defined in this list.
          * Only the "default" camera will be resized when the window or canvas is resized.
          * @public
-         * @type {Map}
+         * @type {Map<Camera2d>}
          * @name cameras
          * @memberof 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
@@ -92,7 +127,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;
             };
         });
@@ -110,9 +152,32 @@ class Stage {
      */
     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 +188,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);
     }

package/src/state/state.js

@@ -512,7 +512,7 @@ var state = {
             // if fading effect
             if (_fade.duration && _stages[state].transition) {
                 /** @ignore */
-                _onSwitchComplete = function() {
+                _onSwitchComplete = () => {
                     game.viewport.fadeOut(_fade.color, _fade.duration);
                 };
                 game.viewport.fadeIn(

package/src/system/device.js

@@ -112,12 +112,6 @@ function _checkCapabilities() {
     // detect device type/platform
     _detectDevice();
 
-    // Mobile browser hacks
-    if (device.isMobile) {
-        // Prevent the webview from moving on a swipe
-        device.enableSwipe(false);
-    }
-
     // Touch/Gesture Event feature detection
     device.TouchEvent = !!("ontouchstart" in globalThis);
     device.PointerEvent = !!globalThis.PointerEvent;
@@ -239,6 +233,13 @@ function _checkCapabilities() {
             );
         }
     }
+
+    // Mobile browser hacks
+    if (device.isMobile) {
+        // Prevent the webview from moving on a swipe
+        device.enableSwipe(false);
+    }
+
 };
 
 
@@ -676,13 +677,14 @@ let device = {
      * @param {boolean} [enable=true] enable or disable swipe.
      */
     enableSwipe(enable) {
+        var moveEvent = device.PointerEvent ? "pointermove" : (device.TouchEvent ? "touchmove" : "mousemove");
         if (enable !== false) {
             if (swipeEnabled === false) {
-                globalThis.document.removeEventListener("touchmove", _disableSwipeFn, false);
+                globalThis.document.removeEventListener(moveEvent, _disableSwipeFn);
                 swipeEnabled = true;
             }
         } else if (swipeEnabled === true) {
-            globalThis.document.addEventListener("touchmove", _disableSwipeFn, false);
+            globalThis.document.addEventListener(moveEvent, _disableSwipeFn, { passive: false });
             swipeEnabled = false;
         }
     },