melonjs 10.5.2 → 10.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "10.5.2",
+  "version": "10.6.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "keywords": [
@@ -60,28 +60,28 @@
   },
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^21.0.2",
-    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-replace": "^4.0.0",
     "@types/offscreencanvas": "^2019.6.4",
     "cheerio": "^1.0.0-rc.10",
     "del-cli": "^4.0.1",
-    "eslint": "^8.11.0",
-    "eslint-plugin-jsdoc": "^38.0.4",
-    "jasmine-core": "^4.0.1",
+    "eslint": "^8.14.0",
+    "eslint-plugin-jsdoc": "^39.2.8",
+    "jasmine-core": "^4.1.0",
     "jsdoc": "^3.6.10",
-    "karma": "^6.3.17",
+    "karma": "^6.3.19",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-html-detailed-reporter": "^2.1.0",
-    "karma-jasmine": "^4.0.1",
+    "karma-jasmine": "^5.0.0",
     "karma-nyan-reporter": "0.2.5",
     "qs": "^6.10.3",
-    "rollup": "^2.70.1",
+    "rollup": "^2.70.2",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
     "terser": "^5.12.1",
-    "typescript": "^4.6.2"
+    "typescript": "^4.6.3"
   },
   "scripts": {
     "build": "npm run lint && rollup -c --silent",

package/src/camera/camera2d.js

@@ -7,7 +7,7 @@ import Matrix3d from "./../math/matrix3.js";
 import Rect from "./../geometries/rectangle.js";
 import { renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import {clamp, toBeCloseTo} from "./../math/math.js";
 import { world } from "./../game.js";
@@ -408,7 +408,7 @@ class Camera2d extends Renderable {
 
         //publish the VIEWPORT_ONCHANGE event if necessary
         if (_x !== this.pos.x || _y !== this.pos.y) {
-            event.emit(event.VIEWPORT_ONCHANGE, this.pos);
+            this.isDirty = true;
         }
     }
 
@@ -447,22 +447,22 @@ class Camera2d extends Renderable {
                     if (toBeCloseTo(targetV.x, this.pos.x, 2) &&
                         toBeCloseTo(targetV.y, this.pos.y, 2)) {
                         this.pos.setV(targetV);
-                        return false;
+                        return;
                     } else {
                         this.pos.lerp(targetV, this.damping);
                     }
                 } else {
                     this.pos.setV(targetV);
                 }
-                return true;
+                this.isDirty = true;
             }
         }
-        return false;
     }
 
     /** @ignore */
     update(dt) {
-        var updated = this.updateTarget(dt);
+        // update the camera position
+        this.updateTarget(dt);
 
         if (this._shake.duration > 0) {
             this._shake.duration -= dt;
@@ -484,17 +484,17 @@ class Camera2d extends Renderable {
                 }
             }
             // updated!
-            updated = true;
+            this.isDirty = true;
         }
 
-        if (updated === true) {
+        if (this.isDirty === true) {
             //publish the corresponding message
             event.emit(event.VIEWPORT_ONCHANGE, this.pos);
         }
 
         // check for fade/flash effect
         if ((this._fadeIn.tween != null) || (this._fadeOut.tween != null)) {
-            updated = true;
+            this.isDirty = true;
         }
 
         if (!this.currentTransform.isIdentity()) {
@@ -503,7 +503,8 @@ class Camera2d extends Renderable {
             // reset to default
             this.invCurrentTransform.identity();
         }
-        return updated;
+
+        return super.update(dt);
     }
 
     /**

package/src/geometries/ellipse.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../math/vector2.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 
 /**
  * @classdesc

package/src/geometries/poly.js

@@ -1,6 +1,6 @@
 import earcut from "earcut";
 import Vector2d from "./../math/vector2.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 
 /**
  * @classdesc

package/src/index.js

@@ -16,7 +16,7 @@ import { plugin, plugins } from "./plugin/plugin.js";
 import * as video from "./video/video.js";
 import save from "./system/save.js";
 import timer from "./system/timer.js";
-import pool from "./system/pooling.js";
+import * as pool from "./system/pooling.js";
 import state from "./state/state.js";
 import level from "./level/level.js";
 

package/src/input/pointerevent.js

@@ -5,7 +5,7 @@ import { throttle } from "./../utils/function.js";
 import { remove } from "./../utils/array.js";
 import * as event from "./../system/event.js";
 import timer from "./../system/timer.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import device from "./../system/device.js";
 import Pointer from "./pointer.js";
 import Rect from "./../geometries/rectangle.js";

package/src/level/tiled/TMXLayer.js

@@ -1,5 +1,5 @@
 import { createCanvas } from "./../../video/video.js";
-import pool from "./../../system/pooling.js";
+import * as pool from "./../../system/pooling.js";
 import * as TMXUtils from "./TMXUtils.js";
 import Tile from "./TMXTile.js";
 import Renderable from "./../../renderable/renderable.js";

package/src/level/tiled/TMXTileMap.js

@@ -1,4 +1,4 @@
-import pool from "./../../system/pooling.js";
+import * as pool from "./../../system/pooling.js";
 import * as event from "./../../system/event.js";
 import { viewport } from "./../../game.js";
 import collision from "./../../physics/collision.js";

package/src/level/tiled/renderer/TMXHexagonalRenderer.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../../../math/vector2.js";
-import pool from "./../../../system/pooling.js";
+import * as pool from "./../../../system/pooling.js";
 import TMXRenderer from "./TMXRenderer.js";
 import TMXLayer from "./../TMXLayer.js";
 

package/src/level/tiled/renderer/TMXIsometricRenderer.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../../../math/vector2.js";
-import pool from "./../../../system/pooling.js";
+import * as pool from "./../../../system/pooling.js";
 import TMXRenderer from "./TMXRenderer.js";
 import TMXLayer from "./../TMXLayer.js";
 

package/src/level/tiled/renderer/TMXOrthogonalRenderer.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../../../math/vector2.js";
-import pool from "./../../../system/pooling.js";
+import * as pool from "./../../../system/pooling.js";
 import TMXRenderer from "./TMXRenderer.js";
 
 /**

package/src/level/tiled/renderer/TMXRenderer.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 
-import pool from "./../../../system/pooling.js";
+import * as pool from "./../../../system/pooling.js";
 import TMXLayer from "./../TMXLayer.js";
 import Bounds from "./../../../physics/Bounds.js";
 

package/src/level/tiled/renderer/TMXStaggeredRenderer.js

@@ -1,5 +1,5 @@
 import Vector2d from "./../../../math/vector2.js";
-import pool from "./../../../system/pooling.js";
+import * as pool from "./../../../system/pooling.js";
 import TMXHexagonalRenderer from "./TMXHexagonalRenderer.js";
 import { degToRad } from "./../../../math/math.js";
 

package/src/loader/loadingscreen.js

@@ -2,7 +2,7 @@ import { world, viewport } from "./../game.js";
 import { createCanvas, renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
 import {nextPowerOfTwo} from "./../math/math.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import Stage from "./../state/stage.js";
 

package/src/math/color.js

@@ -1,5 +1,5 @@
 import { clamp, random } from "./math.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 
 // convert a give color component to it hexadecimal value
 var toHex = function (component) {

package/src/math/matrix2.js

@@ -1,4 +1,4 @@
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import Matrix3d from "./matrix3.js";
 
 /**
@@ -9,7 +9,7 @@ import Matrix3d from "./matrix3.js";
  */
 class Matrix2d {
     /**
-     * @param {(Matrix2d|Matrix3d|...number)} args an instance of me.Matrix2d or me.Matrix3d to copy from, or individual matrix components (See {@link Matrix2d.setTransform}). If not arguments are given, the matrix will be set to Identity. 
+     * @param {(Matrix2d|Matrix3d|...number)} args an instance of me.Matrix2d or me.Matrix3d to copy from, or individual matrix components (See {@link Matrix2d.setTransform}). If not arguments are given, the matrix will be set to Identity.
      */
     constructor(...args) {
         this.onResetEvent(...args);

package/src/math/matrix3.js

@@ -1,4 +1,4 @@
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import { EPSILON } from "./math.js";
 
 /**

package/src/math/observable_vector2.js

@@ -1,4 +1,4 @@
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import Vector2d from "./vector2.js";
 import {clamp} from "./math.js";
 

package/src/math/observable_vector3.js

@@ -1,6 +1,6 @@
 import Vector3d from "./vector3.js";
 import {clamp} from "./math.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 
 /**
  * @classdesc

package/src/math/vector2.js

@@ -1,5 +1,5 @@
 import {clamp} from "./math.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 
 /**
  * @classdesc

package/src/math/vector3.js

@@ -1,5 +1,5 @@
 import {clamp} from "./math.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 
 /**
  * @classdesc

package/src/particles/emitter.js

@@ -1,5 +1,5 @@
 import { createCanvas } from "./../video/video.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import ParticleContainer from "./particlecontainer.js";
 import { randomFloat } from "./../math/math.js";

package/src/physics/body.js

@@ -67,7 +67,7 @@ class Body {
          * @see collision.types
          * @example
          * // set the body collision type
-         * myEntity.body.collisionType = me.collision.types.PLAYER_OBJECT;
+         * body.collisionType = me.collision.types.PLAYER_OBJECT;
          */
         this.collisionType = collision.types.ENEMY_OBJECT;
 
@@ -404,17 +404,17 @@ class Body {
     }
 
     /**
-     * By default all entities are able to collide with all other entities, <br>
+     * By default all physic bodies are able to collide with all other bodies, <br>
      * but it's also possible to specify 'collision filters' to provide a finer <br>
-     * control over which entities can collide with each other.
+     * control over which body can collide with each other.
      * @see collision.types
      * @param {number} [bitmask = collision.types.ALL_OBJECT] the collision mask
      * @example
      * // filter collision detection with collision shapes, enemies and collectables
-     * myEntity.body.setCollisionMask(me.collision.types.WORLD_SHAPE | me.collision.types.ENEMY_OBJECT | me.collision.types.COLLECTABLE_OBJECT);
+     * body.setCollisionMask(me.collision.types.WORLD_SHAPE | me.collision.types.ENEMY_OBJECT | me.collision.types.COLLECTABLE_OBJECT);
      * ...
      * // disable collision detection with all other objects
-     * myEntity.body.setCollisionMask(me.collision.types.NO_OBJECT);
+     * body.setCollisionMask(me.collision.types.NO_OBJECT);
      */
     setCollisionMask(bitmask = collision.types.ALL_OBJECT) {
         this.collisionMask = bitmask;
@@ -426,7 +426,7 @@ class Body {
      * @param {number} type the collision type
      * @example
      * // set the body collision type
-     * myEntity.body.collisionType = me.collision.types.PLAYER_OBJECT;
+     * body.collisionType = me.collision.types.PLAYER_OBJECT;
      */
     setCollisionType(type) {
         if (typeof type !== "undefined") {
@@ -657,7 +657,7 @@ class Body {
      * 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 Entity is to compute new values of the Body.vel property then add them to
+     * 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>

package/src/renderable/colorlayer.js

@@ -1,4 +1,4 @@
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import { viewport } from "./../game.js";
 import Renderable from "./renderable.js";
 

package/src/renderable/container.js

@@ -1,7 +1,7 @@
 import utils from "./../utils/utils.js";
 import * as game from "./../game.js";
 import * as event from "./../system/event.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import state from "./../state/state.js";
 import Renderable from "./renderable.js";
 import Body from "./../physics/body.js";
@@ -369,6 +369,8 @@ class Container extends Renderable {
             // swap the positions..
             this.getChildren()[index] = child2;
             this.getChildren()[index2] = child;
+            // mark the container as dirty
+            this.isDirty = true;
         }
         else {
             throw new Error(child + " Both the supplied childs must be a child of the caller " + this);
@@ -748,6 +750,8 @@ class Container extends Renderable {
         if (childIndex - 1 >= 0) {
             // note : we use an inverted loop
             this.swapChildren(child, this.getChildAt(childIndex - 1));
+            // mark the container as dirty
+            this.isDirty = true;
         }
     }
 
@@ -763,6 +767,8 @@ class Container extends Renderable {
         if (childIndex >= 0 && (childIndex + 1) < this.getChildren().length) {
             // note : we use an inverted loop
             this.swapChildren(child, this.getChildAt(childIndex + 1));
+            // mark the container as dirty
+            this.isDirty = true;
         }
     }
 
@@ -781,6 +787,8 @@ class Container extends Renderable {
             children.splice(0, 0, children.splice(childIndex, 1)[0]);
             // increment our child z value based on the previous child depth
             child.pos.z = children[1].pos.z + 1;
+            // mark the container as dirty
+            this.isDirty = true;
         }
     }
 
@@ -799,6 +807,8 @@ class Container extends Renderable {
             children.splice((children.length - 1), 0, children.splice(childIndex, 1)[0]);
             // increment our child z value based on the next child depth
             child.pos.z = children[(children.length - 2)].pos.z - 1;
+            // mark the container as dirty
+            this.isDirty = true;
         }
     }
 

package/src/renderable/imagelayer.js

@@ -1,6 +1,6 @@
 import { renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import { viewport } from "./../game.js";
 import Sprite from "./sprite.js";
 import * as stringUtil from "./../utils/string.js";

package/src/renderable/nineslicesprite.js

@@ -43,13 +43,16 @@ class NineSliceSprite extends Sprite {
             throw new Error("height and width properties are mandatory");
         }
 
+        // adjust the nss sprite size accordingly to the target "expanded" size
+        this.width = Math.floor(settings.width);
+        this.height = Math.floor(settings.height);
+
         // nine slice sprite specific local variables
-        this.nss_width = Math.floor(settings.width);
-        this.nss_height = Math.floor(settings.height);
+        this.nss_width = this.width;
+        this.nss_height = this.height;
 
         this.insetx = settings.insetx;
         this.insety = settings.insety;
-
     }
 
     /**

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 pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import { releaseAllPointerEvents } from "./../input/input.js";
 import { clamp } from "./../math/math.js";
 
@@ -264,6 +264,18 @@ class Renderable extends Rect {
          */
         this.tint = pool.pull("Color", 255, 255, 255, 1.0);
 
+        /**
+         * the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)
+         * @public
+         * @type {string}
+         * @name blendMode
+         * @default "normal"
+         * @see CanvasRenderer#setBlendMode
+         * @see WebGLRenderer#setBlendMode
+         * @memberof Renderable#
+         */
+        this.blendMode = "normal";
+
         /**
          * The name of the renderable
          * @public
@@ -732,6 +744,11 @@ class Renderable extends Rect {
 
         // apply the current tint and opacity
         renderer.setTint(this.tint, this.getOpacity());
+
+        // apply blending if different from "normal"
+        if (this.blendMode !== renderer.getBlendMode()) {
+            renderer.setBlendMode(this.blendMode);
+        }
     }
 
     /**

package/src/renderable/sprite.js

@@ -1,6 +1,6 @@
 import Vector2d from "./../math/vector2.js";
 import { renderer } from "./../video/video.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
 import { TextureAtlas } from "./../video/texture.js";
 import Renderable from "./renderable.js";
@@ -584,7 +584,7 @@ class Sprite extends Renderable {
             this.isDirty = true;
         }
 
-        return this.isDirty;
+        return super.update(dt);
     }
 
     /**

package/src/state/state.js

@@ -64,7 +64,7 @@ function _resumeRunLoop() {
 }
 
 /**
- * Pause the loop for most screen objects.
+ * Pause the loop for most stage objects.
  * @ignore
  */
 function _pauseRunLoop() {
@@ -249,7 +249,7 @@ var state = {
     USER : 100,
 
     /**
-     * Stop the current screen object.
+     * Stop the current stage.
      * @name stop
      * @memberof state
      * @public
@@ -276,7 +276,7 @@ var state = {
     },
 
     /**
-     * pause the current screen object
+     * pause the current stage
      * @name pause
      * @memberof state
      * @public
@@ -302,7 +302,7 @@ var state = {
     },
 
     /**
-     * Restart the screen object from a full stop.
+     * Restart the current stage from a full stop.
      * @name restart
      * @memberof state
      * @public
@@ -330,7 +330,7 @@ var state = {
     },
 
     /**
-     * resume the screen object
+     * resume the current stage
      * @name resume
      * @memberof state
      * @public
@@ -438,7 +438,7 @@ var state = {
     },
 
     /**
-     * return a reference to the current screen object<br>
+     * return a reference to the current stage<br>
      * useful to call a object specific method
      * @name current
      * @memberof state