melonjs 12.0.0 → 13.1.1

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/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/nineslicesprite.js

@@ -47,7 +47,7 @@ class NineSliceSprite extends Sprite {
         this.width = Math.floor(settings.width);
         this.height = Math.floor(settings.height);
 
-        // nine slice sprite specific local variables
+        // nine slice sprite specific internal variables
         this.nss_width = this.width;
         this.nss_height = this.height;
 
@@ -55,6 +55,32 @@ class NineSliceSprite extends Sprite {
         this.insety = settings.insety;
     }
 
+    /**
+     * width of the NineSliceSprite
+     * @public
+     * @type {number}
+     * @name width
+     */
+    get width() {
+        return super.width;
+    }
+    set width(value) {
+        super.width = this.nss_width = value;
+    }
+
+    /**
+     * height of the NineSliceSprite
+     * @public
+     * @type {number}
+     * @name height
+     */
+    get height() {
+        return super.height;
+    }
+    set height(value) {
+        super.height = this.nss_height = value;
+    }
+
     /**
      * @ignore
      */

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 = {
 
     /**