melonjs 10.12.0 → 13.0.0

package/src/physics/body.js

@@ -7,8 +7,6 @@ import collision from "./collision.js";
 import * as arrayUtil from "./../utils/array.js";
 import timer from "./../system/timer.js";
 import { clamp } from "./../math/math.js";
-import { world } from "./../game.js";
-
 
 /**
  * @classdesc
@@ -74,7 +72,9 @@ class Body {
 
         if (typeof this.vel === "undefined") {
             /**
-             * body velocity
+             * The current velocity of the body.
+             * See to apply a force if you need to modify a body velocity
+             * @see Body.force
              * @public
              * @type {Vector2d}
              * @default <0,0>
@@ -85,15 +85,15 @@ class Body {
 
         if (typeof this.force === "undefined") {
             /**
-             * body force or acceleration (automatically) applied to the body.
-             * when defining a force, user should also define a max velocity
+             * body force to apply to this the body in the current step.
+             * (any positive or negative force will be cancelled after every world/body update cycle)
              * @public
              * @type {Vector2d}
              * @default <0,0>
              * @see Body.setMaxVelocity
              * @example
              * // define a default maximum acceleration, initial force and friction
-             * this.body.force.set(0, 0);
+             * this.body.force.set(1, 0);
              * this.body.friction.set(0.4, 0);
              * this.body.setMaxVelocity(3, 15);
              *
@@ -103,8 +103,6 @@ class Body {
              *          this.body.force.x = -this.body.maxVel.x;
              *      } else if (me.input.isKeyPressed("right")) {
              *         this.body.force.x = this.body.maxVel.x;
-             *     } else {
-             *         this.body.force.x = 0;
              *     }
              * }
              */
@@ -463,10 +461,12 @@ class Body {
                 this.vel.y *= -this.bounce;
             }
 
-            // cancel the falling an jumping flags if necessary
-            var dir = Math.sign(world.gravity.y * this.gravityScale) || 1;
-            this.falling = overlap.y >= dir;
-            this.jumping = overlap.y <= -dir;
+            if (!this.ignoreGravity) {
+                // cancel the falling an jumping flags if necessary
+                var dir = this.falling === true ? 1 : this.jumping === true ? -1 : 0;
+                this.falling = overlap.y >= dir;
+                this.jumping = overlap.y <= -dir;
+            }
         }
     }
 
@@ -507,14 +507,12 @@ class Body {
         }
     }
 
-
     /**
      * Returns true if the any of the shape composing the body contains the given point.
      * @method Body#contains
      * @param {Vector2d} point
      * @returns {boolean} true if contains
      */
-
     /**
      * Returns true if the any of the shape composing the body contains the given point.
      * @param  {number} x x coordinate
@@ -591,27 +589,23 @@ class Body {
     }
 
     /**
-     * compute the new velocity value
-     * @ignore
+     * Updates the parent's position as well as computes the new body's velocity based
+     * on the values of force/friction.  Velocity chages are proportional to the
+     * me.timer.tick value (which can be used to scale velocities).  The approach to moving the
+     * parent renderable is to compute new values of the Body.vel property then add them to
+     * the parent.pos value thus changing the postion the amount of Body.vel each time the
+     * update call is made. <br>
+     * Updates to Body.vel are bounded by maxVel (which defaults to viewport size if not set) <br>
+     * At this time a call to Body.Update does not call the onBodyUpdate callback that is listed in the constructor arguments.
+     * @protected
+     * @param {number} dt time since the last update in milliseconds.
+     * @returns {boolean} true if resulting velocity is different than 0
      */
-    computeVelocity(/* dt */) {
+    update(dt) { // eslint-disable-line no-unused-vars
         // apply timer.tick to delta time for linear interpolation (when enabled)
         // #761 add delta time in body update
         var deltaTime = /* dt * */ timer.tick;
 
-        // apply gravity to the current velocity
-        if (!this.ignoreGravity) {
-            var worldGravity = world.gravity;
-
-            // apply gravity if defined
-            this.vel.x += worldGravity.x * this.gravityScale * deltaTime;
-            this.vel.y += worldGravity.y * this.gravityScale * deltaTime;
-
-            // check if falling / jumping
-            this.falling = (this.vel.y * Math.sign(worldGravity.y * this.gravityScale)) > 0;
-            this.jumping = (this.falling ? false : this.jumping);
-        }
-
         // apply force if defined
         if (this.force.x !== 0) {
             this.vel.x += this.force.x * deltaTime;
@@ -649,28 +643,10 @@ class Body {
         if (this.vel.x !== 0) {
             this.vel.x = clamp(this.vel.x, -this.maxVel.x, this.maxVel.x);
         }
-    }
 
-    /**
-     * Updates the parent's position as well as computes the new body's velocity based
-     * on the values of force/friction/gravity.  Velocity chages are proportional to the
-     * me.timer.tick value (which can be used to scale velocities).  The approach to moving the
-     * parent renderable is to compute new values of the Body.vel property then add them to
-     * the parent.pos value thus changing the postion the amount of Body.vel each time the
-     * update call is made. <br>
-     * Updates to Body.vel are bounded by maxVel (which defaults to viewport size if not set) <br>
-     *
-     * In addition, when the gravity calcuation is made, if the Body.vel.y > 0 then the Body.falling
-     * property is set to true and Body.jumping is set to !Body.falling.
-     *
-     * At this time a call to Body.Update does not call the onBodyUpdate callback that is listed in the constructor arguments.
-     * @protected
-     * @param {number} dt time since the last update in milliseconds.
-     * @returns {boolean} true if resulting velocity is different than 0
-     */
-    update(dt) {
-        // update the velocity
-        this.computeVelocity(dt);
+        // check if falling / jumping
+        this.falling = (this.vel.y * Math.sign(this.force.y)) > 0;
+        this.jumping = (this.falling ? false : this.jumping);
 
         // update the body ancestor position
         this.ancestor.pos.add(this.vel);

package/src/physics/detector.js

@@ -1,7 +1,7 @@
 import * as SAT from "./sat.js";
 import ResponseObject from "./response.js";
 import Vector2d from "./../math/vector2.js";
-import { world } from "./../game.js";
+import game from "./../game.js";
 
 // a dummy object when using Line for raycasting
 let dummyObj = {
@@ -50,7 +50,7 @@ function shouldCollide(a, b) {
 export function collisionCheck(objA, response = globalResponse) {
     var collisionCounter = 0;
     // retreive a list of potential colliding objects from the game world
-    var candidates = world.broadphase.retrieve(objA);
+    var candidates = game.world.broadphase.retrieve(objA);
 
     for (var i = candidates.length, objB; i--, (objB = candidates[i]);) {
 
@@ -139,7 +139,7 @@ export function rayCast(line, result = []) {
     var collisionCounter = 0;
 
     // retrieve a list of potential colliding objects from the game world
-    var candidates = world.broadphase.retrieve(line);
+    var candidates = game.world.broadphase.retrieve(line);
 
     for (var i = candidates.length, objB; i--, (objB = candidates[i]);) {
 

package/src/physics/quadtree.js

@@ -1,7 +1,6 @@
 import Vector2d from "./../math/vector2.js";
 import Container from "./../renderable/container.js";
 import * as arrayUtil from "./../utils/array.js";
-import { viewport } from "./../game.js";
 
 /*
  * A QuadTree implementation in JavaScript, a 2d spatial subdivision algorithm.
@@ -21,16 +20,17 @@ var QT_ARRAY = [];
  * or create a new one if the array is empty
  * @ignore
  */
-function QT_ARRAY_POP(bounds, max_objects = 4, max_levels = 4, level = 0) {
+function QT_ARRAY_POP(world, bounds, max_objects = 4, max_levels = 4, level = 0) {
     if (QT_ARRAY.length > 0) {
         var _qt =  QT_ARRAY.pop();
+        _qt.world = world;
         _qt.bounds = bounds;
         _qt.max_objects = max_objects;
         _qt.max_levels  = max_levels;
         _qt.level = level;
         return _qt;
     } else {
-        return new QuadTree(bounds, max_objects, max_levels, level);
+        return new QuadTree(world, bounds, max_objects, max_levels, level);
     }
 };
 
@@ -55,12 +55,17 @@ var QT_VECTOR = new Vector2d();
  */
 class QuadTree {
     /**
+     * @param {World} world the physic world this QuadTree belongs to
      * @param {Bounds} bounds bounds of the node
      * @param {number} [max_objects=4] max objects a node can hold before splitting into 4 subnodes
      * @param {number} [max_levels=4] total max levels inside root Quadtree
      * @param {number} [level] deepth level, required for subnodes
      */
-    constructor(bounds, max_objects = 4, max_levels = 4, level = 0) {
+    constructor(world, bounds, max_objects = 4, max_levels = 4, level = 0) {
+
+        this.world = world;
+        this.bounds = bounds;
+
         this.max_objects = max_objects;
         this.max_levels  = max_levels;
 
@@ -82,36 +87,60 @@ class QuadTree {
             top = this.bounds.top;
 
          //top right node
-        this.nodes[0] = QT_ARRAY_POP({
-            left : left + subWidth,
-            top : top,
-            width : subWidth,
-            height : subHeight
-        }, this.max_objects, this.max_levels, nextLevel);
+        this.nodes[0] = QT_ARRAY_POP(
+            this.world,
+            this.bounds, {
+                left : left + subWidth,
+                top : top,
+                width : subWidth,
+                height : subHeight
+            },
+            this.max_objects,
+            this.max_levels,
+            nextLevel
+        );
 
         //top left node
-        this.nodes[1] = QT_ARRAY_POP({
-            left : left,
-            top: top,
-            width : subWidth,
-            height : subHeight
-        }, this.max_objects, this.max_levels, nextLevel);
+        this.nodes[1] = QT_ARRAY_POP(
+            this.world,
+            this.bounds, {
+                left : left,
+                top: top,
+                width : subWidth,
+                height : subHeight
+            },
+            this.max_objects,
+            this.max_levels,
+            nextLevel
+        );
 
         //bottom left node
-        this.nodes[2] = QT_ARRAY_POP({
-            left : left,
-            top : top + subHeight,
-            width : subWidth,
-            height : subHeight
-        }, this.max_objects, this.max_levels, nextLevel);
+        this.nodes[2] = QT_ARRAY_POP(
+            this.world,
+            this.bounds, {
+                left : left,
+                top : top + subHeight,
+                width : subWidth,
+                height : subHeight
+            },
+            this.max_objects,
+            this.max_levels,
+            nextLevel
+        );
 
         //bottom right node
-        this.nodes[3] = QT_ARRAY_POP({
-            left : left + subWidth,
-            top : top + subHeight,
-            width : subWidth,
-            height : subHeight
-        }, this.max_objects, this.max_levels, nextLevel);
+        this.nodes[3] = QT_ARRAY_POP(
+            this.world,
+            this.bounds, {
+                left : left + subWidth,
+                top : top + subHeight,
+                width : subWidth,
+                height : subHeight
+            },
+            this.max_objects,
+            this.max_levels,
+            nextLevel
+        );
     }
 
     /*
@@ -125,7 +154,7 @@ class QuadTree {
 
         // use game world coordinates for floating items
         if (item.isFloating === true) {
-            pos = viewport.localToWorld(bounds.left, bounds.top, QT_VECTOR);
+            pos = this.world.app.viewport.localToWorld(bounds.left, bounds.top, QT_VECTOR);
         } else {
             pos = QT_VECTOR.set(item.left, item.top);
         }

package/src/physics/world.js

@@ -28,6 +28,13 @@ class World extends Container {
         // to mimic the previous behavior
         this.anchorPoint.set(0, 0);
 
+        /**
+         * the application (game) this physic world belong to
+         * @public
+         * @type {Application}
+         */
+        this.app = null;
+
         /**
          * the rate at which the game world is updated,
          * may be greater than or lower than the display fps
@@ -80,7 +87,7 @@ class World extends Container {
          * @public
          * @type {QuadTree}
          */
-        this.broadphase = new QuadTree(this.getBounds().clone(), collision.maxChildren, collision.maxDepth);
+        this.broadphase = new QuadTree(this, this.getBounds().clone(), collision.maxChildren, collision.maxDepth);
 
         // reset the world container on the game reset signal
         event.on(event.GAME_RESET, this.reset, this);
@@ -140,6 +147,24 @@ class World extends Container {
         return this;
     }
 
+    /**
+     * Apply gravity to the given body
+     * @name bodyApplyVelocity
+     * @memberof World
+     * @private
+     * @param {Body} body
+     */
+    bodyApplyGravity(body) {
+        // apply gravity to the current velocity
+        if (!body.ignoreGravity && body.gravityScale !== 0) {
+            var gravity = this.gravity;
+
+            // apply gravity if defined
+            body.force.x += (body.mass * gravity.x) * body.gravityScale;
+            body.force.y += (body.mass * gravity.y) * body.gravityScale;
+        }
+    }
+
     /**
      * update the game world
      * @name reset
@@ -147,7 +172,7 @@ class World extends Container {
      * @param {number} dt the time passed since the last frame update
      * @returns {boolean} true if the word is dirty
      */
-    update (dt) {
+    update(dt) {
         var isPaused = state.isPaused();
 
         // clear the quadtree
@@ -163,13 +188,17 @@ class World extends Container {
                 // if the game is not paused, and ancestor can be updated
                 if (!(isPaused && (!ancestor.updateWhenPaused)) &&
                    (ancestor.inViewport || ancestor.alwaysUpdate)) {
-                    // apply physics to the body (this moves it)
+                    // apply gravity to this body
+                    this.bodyApplyGravity(body);
+                    // body update function (this moves it)
                     if (body.update(dt) === true) {
                         // mark ancestor as dirty
                         ancestor.isDirty = true;
                     };
                     // handle collisions against other objects
                     collisionCheck(ancestor);
+                    // clear body force
+                    body.force.set(0, 0);
                 }
             }
         });

package/src/polyfill/index.js

@@ -1,6 +1,10 @@
 // https://github.com/melonjs/melonJS/issues/1092
 import "core-js/proposals/global-this";
 
+// es10 string trim functions
+import "core-js/es/string/trim-left";
+import "core-js/es/string/trim-right";
+
 // "built-in" polyfills
 import "./console.js";
 import "./performance.js";

package/src/renderable/container.js

@@ -1,5 +1,5 @@
 import utils from "./../utils/utils.js";
-import * as game from "./../game.js";
+import game from "./../game.js";
 import * as event from "./../system/event.js";
 import pool from "./../system/pooling.js";
 import state from "./../state/state.js";
@@ -638,7 +638,7 @@ class Container extends Renderable {
      * @memberof Container
      * @public
      * @param {Renderable} child
-     * @param {boolean} [keepalive=False] True to prevent calling child.destroy()
+     * @param {boolean} [keepalive=false] true to prevent calling child.destroy()
      */
     removeChild(child, keepalive) {
         if (this.hasChild(child)) {

package/src/renderable/imagelayer.js

@@ -1,7 +1,7 @@
 import { renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
 import pool from "./../system/pooling.js";
-import { viewport } from "./../game.js";
+import game from "./../game.js";
 import Sprite from "./sprite.js";
 import * as stringUtil from "./../utils/string.js";
 
@@ -134,7 +134,7 @@ class ImageLayer extends Sprite {
                 this.repeatY = true;
                 break;
         }
-        this.resize(viewport.width, viewport.height);
+        this.resize(game.viewport.width, game.viewport.height);
         this.createPattern();
     }
 
@@ -146,13 +146,13 @@ class ImageLayer extends Sprite {
         event.on(event.VIEWPORT_ONRESIZE, this.resize, this);
         // force a first refresh when the level is loaded
         event.once(event.LEVEL_LOADED, () => {
-            this.updateLayer(viewport.pos);
+            this.updateLayer(game.viewport.pos);
         });
         // in case the level is not added to the root container,
         // the onActivateEvent call happens after the LEVEL_LOADED event
         // so we need to force a first update
         if (this.ancestor.root !== true) {
-            this.updateLayer(viewport.pos);
+            this.updateLayer(game.viewport.pos);
         }
     }
 
@@ -193,8 +193,8 @@ class ImageLayer extends Sprite {
 
         var width = this.width,
             height = this.height,
-            bw = viewport.bounds.width,
-            bh = viewport.bounds.height,
+            bw = game.viewport.bounds.width,
+            bh = game.viewport.bounds.height,
             ax = this.anchorPoint.x,
             ay = this.anchorPoint.y,
 
@@ -204,8 +204,8 @@ class ImageLayer extends Sprite {
              * See https://github.com/melonjs/melonJS/issues/741#issuecomment-138431532
              * for a thorough description of how this works.
              */
-            x = ax * (rx - 1) * (bw - viewport.width) + this.offset.x - rx * vpos.x,
-            y = ay * (ry - 1) * (bh - viewport.height) + this.offset.y - ry * vpos.y;
+            x = ax * (rx - 1) * (bw - game.viewport.width) + this.offset.x - rx * vpos.x,
+            y = ay * (ry - 1) * (bh - game.viewport.height) + this.offset.y - ry * vpos.y;
 
 
         // Repeat horizontally; start drawing from left boundary

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.radiusX = radiusX;
+
+        /**
+         * The vertical radius of the light
          * @type {number}
          */
-        this.radius = radius;
+        this.radiusY = radiusY;
 
         /**
          * The intensity of the light

package/src/renderable/trigger.js

@@ -2,7 +2,7 @@ import Renderable from "./renderable.js";
 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 game from "./../game.js";
 import pool from "./../system/pooling.js";
 
 /**
@@ -89,7 +89,7 @@ class Trigger extends Renderable {
      getTriggerSettings() {
          // Lookup for the container instance
          if (typeof(this.triggerSettings.container) === "string") {
-             this.triggerSettings.container = world.getChildByName(this.triggerSettings.container)[0];
+             this.triggerSettings.container = game.world.getChildByName(this.triggerSettings.container)[0];
          }
          return this.triggerSettings;
      }
@@ -99,7 +99,7 @@ class Trigger extends Renderable {
      */
     onFadeComplete() {
         level.load(this.gotolevel, this.getTriggerSettings());
-        viewport.fadeOut(this.fade, this.duration);
+        game.viewport.fadeOut(this.fade, this.duration);
     }
 
     /**
@@ -118,7 +118,7 @@ class Trigger extends Renderable {
             if (this.fade && this.duration) {
                 if (!this.fading) {
                     this.fading = true;
-                    viewport.fadeIn(this.fade, this.duration,
+                    game.viewport.fadeIn(this.fade, this.duration,
                             this.onFadeComplete.bind(this));
                 }
             } else {

package/src/state/stage.js

@@ -1,5 +1,5 @@
 import { renderer } from "./../video/video.js";
-import * as  game from "./../game.js";
+import game from "./../game.js";
 import Camera2d from "./../camera/camera2d.js";
 import Color from "./../math/color.js";
 

package/src/state/state.js

@@ -1,7 +1,8 @@
 import { pauseTrack, resumeTrack } from "./../audio/audio.js";
 import * as fctUtil from "./../utils/function.js";
 import * as event from "./../system/event.js";
-import * as game from "./../game.js";
+import game from "./../game.js";
+import * as device from "./../system/device.js";
 import Stage from "./../state/stage.js";
 import DefaultLoadingScreen from "./../loader/loadingscreen.js";
 
@@ -140,14 +141,60 @@ event.on(event.BOOT, () => {
     event.on(event.VIDEO_INIT, () => {
         state.change(state.DEFAULT, true);
     });
-});
 
+    if (typeof globalThis.addEventListener === "function") {
+        // set pause/stop action on losing focus
+        globalThis.addEventListener("blur", () => {
+            if (device.stopOnBlur) {
+                state.stop(true);
+            }
+            if (device.pauseOnBlur) {
+                state.pause(true);
+            }
+        }, false);
+        // set restart/resume action on gaining focus
+        globalThis.addEventListener("focus", () => {
+            if (device.stopOnBlur) {
+                state.restart(true);
+            }
+            if (device.resumeOnFocus) {
+                state.resume(true);
+            }
+            // force focus if autofocus is on
+            if (device.autoFocus) {
+                device.focus();
+            }
+        }, false);
+    }
+
+    if (typeof globalThis.document !== "undefined") {
+        if (typeof globalThis.document.addEventListener === "function") {
+            // register on the visibilitychange event if supported
+            globalThis.document.addEventListener("visibilitychange", () => {
+                if (globalThis.document.visibilityState === "visible") {
+                    if (device.stopOnBlur) {
+                        state.restart(true);
+                    }
+                    if (device.resumeOnFocus) {
+                        state.resume(true);
+                    }
+                } else {
+                    if (device.stopOnBlur) {
+                        state.stop(true);
+                    }
+                    if (device.pauseOnBlur) {
+                        state.pause(true);
+                    }
+                }
+            }, false );
+        }
+    }
+});
 
 /**
  * a State Manager (state machine)
  * @namespace state
  */
-
 var state = {
 
     /**