melonjs 9.0.2 → 9.1.0

package/dist/melonjs.module.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v9.0.2
+ * melonJS Game Engine - v9.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -66,7 +66,7 @@ function trimRight(str) {
     return str.replace(/\s+$/, "");
 }
 /**
- * returns true if the given string contains a numeric (integer) value
+ * returns true if the given string contains a numeric integer or float value
  * @public
  * @function
  * @memberOf me.utils.string
@@ -78,7 +78,7 @@ function isNumeric(str) {
     if (typeof str === "string") {
         str = str.trim();
     }
-    return !isNaN(str) && /^\d+$/.test(str);
+    return !isNaN(str) && /[+-]?([0-9]*[.])?[0-9]+/.test(str);
 }
 /**
  * returns true if the given string contains a true or false
@@ -13429,7 +13429,8 @@ var Renderable = Rect.extend({
          * <img src="images/anchor_point.png"/><br>
          * a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.<br>
          * <br>
-         * <i><b>Note:</b> Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation</i>
+         * <i><b>Note:</b> Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation.
+         * To specify a value through Tiled, use a json expression like `json:{"x":0.5,"y":0.5}`. </i>
          * @public
          * @type me.ObservableVector2d
          * @default <0.5,0.5>
@@ -21035,6 +21036,15 @@ var Sprite = Renderable.extend({
             this.textureAtlas = this.source.getAtlas();
         }
 
+        // throw an error if image ends up being null/undefined
+        if (!this.image) {
+            throw new Error((
+                (typeof(settings.image) === "string") ?
+                "'" + settings.image + "'" :
+                "Image"
+            ) + " file for Image Layer '" + this.name + "' not found!");
+        }
+
         // store/reset the current atlas information if specified
         if (typeof(settings.atlas) !== "undefined") {
             this.textureAtlas = settings.atlas;
@@ -21073,6 +21083,10 @@ var Sprite = Renderable.extend({
             this.name = settings.name;
         }
 
+        // displaying order
+        if (typeof settings.z !== "undefined") {
+            this.pos.z = settings.z;
+        }
         // for sprite, addAnimation will return !=0
         if (this.addAnimation("default", null) !== 0) {
             // set as default
@@ -25805,10 +25819,14 @@ function readImageLayer(map, data, z) {
         Object.assign({
             name: data.name,
             image: data.image,
+            ratio : pool.pull("Vector2d", +data.parallaxx || 1.0, +data.parallaxy || 1.0),
+            // convert to melonJS color format (note: this should be done earlier when parsing data)
+            tint : typeof (data.tintcolor) !== "undefined" ? (pool.pull("Color")).parseHex(data.tintcolor, true) : undefined,
             z: z
         }, data.properties)
     );
 
+
     // set some additional flags
     var visible = typeof(data.visible) !== "undefined" ? data.visible : true;
     imageLayer.setOpacity(visible ? +data.opacity : 0);
@@ -32355,10 +32373,10 @@ var plugin = {
              * this can be overridden by the plugin
              * @public
              * @type String
-             * @default "9.0.2"
+             * @default "9.1.0"
              * @name me.plugin.Base#version
              */
-            this.version = "9.0.2";
+            this.version = "9.1.0";
         }
     }),
 
@@ -34556,41 +34574,19 @@ var ColorLayer = Renderable.extend({
  *     repeat :"repeat-x"
  * }), 1);
  */
-var ImageLayer = Renderable.extend({
+var ImageLayer = Sprite.extend({
     /**
      * @ignore
      */
     init: function (x, y, settings) {
         // call the constructor
-        this._super(Renderable, "init", [x, y, Infinity, Infinity]);
-
-        // get the corresponding image
-        this.image = (typeof settings.image === "object") ? settings.image : loader$1.getImage(settings.image);
-
-        // throw an error if image is null/undefined
-        if (!this.image) {
-            throw new Error((
-                (typeof(settings.image) === "string") ?
-                "'" + settings.image + "'" :
-                "Image"
-            ) + " file for Image Layer '" + this.name + "' not found!");
-        }
-
-        this.imagewidth = this.image.width;
-        this.imageheight = this.image.height;
-
-        // set the sprite name if specified
-        if (typeof (settings.name) === "string") {
-            this.name = settings.name;
-        }
+        this._super(Sprite, "init", [x, y, settings]);
 
         // render in screen coordinates
         this.floating = true;
 
-        // displaying order
-        this.pos.z = settings.z || 0;
-
-        this.offset = pool.pull("Vector2d", x, y);
+        // image drawing offset
+        this.offset.set(x, y);
 
         /**
          * Define the image scrolling ratio<br>
@@ -34608,8 +34604,8 @@ var ImageLayer = Renderable.extend({
 
         if (typeof(settings.ratio) !== "undefined") {
             // little hack for backward compatiblity
-            if (typeof(settings.ratio) === "number") {
-                this.ratio.set(settings.ratio, settings.ratio);
+            if (utils$1.string.isNumeric(settings.ratio)) {
+                this.ratio.set(settings.ratio, +settings.ratio);
             } else /* vector */ {
                 this.ratio.setV(settings.ratio);
             }
@@ -34725,7 +34721,7 @@ var ImageLayer = Renderable.extend({
      * @param {Number} h new height
     */
     resize : function (w, h) {
-        this._super(Renderable, "resize", [
+        this._super(Sprite, "resize", [
             this.repeatX ? Infinity : w,
             this.repeatY ? Infinity : h
         ]);
@@ -34755,8 +34751,8 @@ var ImageLayer = Renderable.extend({
         }
 
         var viewport = game$1.viewport,
-            width = this.imagewidth,
-            height = this.imageheight,
+            width = this.width,
+            height = this.height,
             bw = viewport.bounds.width,
             bh = viewport.bounds.height,
             ax = this.anchorPoint.x,
@@ -34799,6 +34795,9 @@ var ImageLayer = Renderable.extend({
         renderer.save();
         // apply the defined alpha value
         renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
+
+        // apply the defined tint, if any
+        renderer.setTint(this.tint);
     },
 
     /**
@@ -34807,8 +34806,8 @@ var ImageLayer = Renderable.extend({
      */
     draw : function (renderer) {
         var viewport = game$1.viewport,
-            width = this.imagewidth,
-            height = this.imageheight,
+            width = this.width,
+            height = this.height,
             bw = viewport.bounds.width,
             bh = viewport.bounds.height,
             ax = this.anchorPoint.x,
@@ -34845,11 +34844,9 @@ var ImageLayer = Renderable.extend({
      * @ignore
      */
     destroy : function () {
-        pool.push(this.offset);
-        this.offset = undefined;
         pool.push(this.ratio);
         this.ratio = undefined;
-        this._super(Renderable, "destroy");
+        this._super(Sprite, "destroy");
     }
 });
 
@@ -36631,7 +36628,7 @@ var Jay = window.Jay;
  * @name version
  * @type {string}
  */
-const version = "9.0.2";
+const version = "9.1.0";
 
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "keywords": [
@@ -60,7 +60,7 @@
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-replace": "^3.0.0",
-    "cheerio": "^1.0.0-rc.5",
+    "cheerio": "^1.0.0-rc.10",
     "del-cli": "^4.0.1",
     "eslint": "^7.32.0",
     "ghpages": "0.0.10",
@@ -73,7 +73,7 @@
     "karma-jasmine": "^4.0.1",
     "karma-nyan-reporter": "0.2.5",
     "qs": "^6.10.1",
-    "rollup": "^2.56.3",
+    "rollup": "^2.57.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
     "terser": "^5.8.0"

package/src/level/tiled/TMXTileMap.js

@@ -71,10 +71,14 @@ function readImageLayer(map, data, z) {
         Object.assign({
             name: data.name,
             image: data.image,
+            ratio : pool.pull("Vector2d", +data.parallaxx || 1.0, +data.parallaxy || 1.0),
+            // convert to melonJS color format (note: this should be done earlier when parsing data)
+            tint : typeof (data.tintcolor) !== "undefined" ? (pool.pull("Color")).parseHex(data.tintcolor, true) : undefined,
             z: z
         }, data.properties)
     );
 
+
     // set some additional flags
     var visible = typeof(data.visible) !== "undefined" ? data.visible : true;
     imageLayer.setOpacity(visible ? +data.opacity : 0);

package/src/renderable/imagelayer.js

@@ -1,9 +1,9 @@
 import video from "./../video/video.js";
 import event from "./../system/event.js";
 import pool from "./../system/pooling.js";
-import loader from "./../loader/loader.js";
 import game from "./../game.js";
-import Renderable from "./renderable.js";
+import Sprite from "./sprite.js";
+import utils from "./../utils/utils.js";
 
 
 /**
@@ -29,41 +29,19 @@ import Renderable from "./renderable.js";
  *     repeat :"repeat-x"
  * }), 1);
  */
-var ImageLayer = Renderable.extend({
+var ImageLayer = Sprite.extend({
     /**
      * @ignore
      */
     init: function (x, y, settings) {
         // call the constructor
-        this._super(Renderable, "init", [x, y, Infinity, Infinity]);
-
-        // get the corresponding image
-        this.image = (typeof settings.image === "object") ? settings.image : loader.getImage(settings.image);
-
-        // throw an error if image is null/undefined
-        if (!this.image) {
-            throw new Error((
-                (typeof(settings.image) === "string") ?
-                "'" + settings.image + "'" :
-                "Image"
-            ) + " file for Image Layer '" + this.name + "' not found!");
-        }
-
-        this.imagewidth = this.image.width;
-        this.imageheight = this.image.height;
-
-        // set the sprite name if specified
-        if (typeof (settings.name) === "string") {
-            this.name = settings.name;
-        }
+        this._super(Sprite, "init", [x, y, settings]);
 
         // render in screen coordinates
         this.floating = true;
 
-        // displaying order
-        this.pos.z = settings.z || 0;
-
-        this.offset = pool.pull("Vector2d", x, y);
+        // image drawing offset
+        this.offset.set(x, y);
 
         /**
          * Define the image scrolling ratio<br>
@@ -81,8 +59,8 @@ var ImageLayer = Renderable.extend({
 
         if (typeof(settings.ratio) !== "undefined") {
             // little hack for backward compatiblity
-            if (typeof(settings.ratio) === "number") {
-                this.ratio.set(settings.ratio, settings.ratio);
+            if (utils.string.isNumeric(settings.ratio)) {
+                this.ratio.set(settings.ratio, +settings.ratio);
             } else /* vector */ {
                 this.ratio.setV(settings.ratio);
             }
@@ -198,7 +176,7 @@ var ImageLayer = Renderable.extend({
      * @param {Number} h new height
     */
     resize : function (w, h) {
-        this._super(Renderable, "resize", [
+        this._super(Sprite, "resize", [
             this.repeatX ? Infinity : w,
             this.repeatY ? Infinity : h
         ]);
@@ -228,8 +206,8 @@ var ImageLayer = Renderable.extend({
         }
 
         var viewport = game.viewport,
-            width = this.imagewidth,
-            height = this.imageheight,
+            width = this.width,
+            height = this.height,
             bw = viewport.bounds.width,
             bh = viewport.bounds.height,
             ax = this.anchorPoint.x,
@@ -272,6 +250,9 @@ var ImageLayer = Renderable.extend({
         renderer.save();
         // apply the defined alpha value
         renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
+
+        // apply the defined tint, if any
+        renderer.setTint(this.tint);
     },
 
     /**
@@ -280,8 +261,8 @@ var ImageLayer = Renderable.extend({
      */
     draw : function (renderer) {
         var viewport = game.viewport,
-            width = this.imagewidth,
-            height = this.imageheight,
+            width = this.width,
+            height = this.height,
             bw = viewport.bounds.width,
             bh = viewport.bounds.height,
             ax = this.anchorPoint.x,
@@ -318,11 +299,9 @@ var ImageLayer = Renderable.extend({
      * @ignore
      */
     destroy : function () {
-        pool.push(this.offset);
-        this.offset = undefined;
         pool.push(this.ratio);
         this.ratio = undefined;
-        this._super(Renderable, "destroy");
+        this._super(Sprite, "destroy");
     }
 });
 

package/src/renderable/renderable.js

@@ -169,7 +169,8 @@ var Renderable = Rect.extend({
          * <img src="images/anchor_point.png"/><br>
          * a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.<br>
          * <br>
-         * <i><b>Note:</b> Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation</i>
+         * <i><b>Note:</b> Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation.
+         * To specify a value through Tiled, use a json expression like `json:{"x":0.5,"y":0.5}`. </i>
          * @public
          * @type me.ObservableVector2d
          * @default <0.5,0.5>

package/src/renderable/sprite.js

@@ -154,6 +154,15 @@ var Sprite = Renderable.extend({
             this.textureAtlas = this.source.getAtlas();
         }
 
+        // throw an error if image ends up being null/undefined
+        if (!this.image) {
+            throw new Error((
+                (typeof(settings.image) === "string") ?
+                "'" + settings.image + "'" :
+                "Image"
+            ) + " file for Image Layer '" + this.name + "' not found!");
+        }
+
         // store/reset the current atlas information if specified
         if (typeof(settings.atlas) !== "undefined") {
             this.textureAtlas = settings.atlas;
@@ -192,6 +201,11 @@ var Sprite = Renderable.extend({
             this.name = settings.name;
         }
 
+        // displaying order
+        if (typeof settings.z !== "undefined") {
+            this.pos.z = settings.z;
+        };
+
         // for sprite, addAnimation will return !=0
         if (this.addAnimation("default", null) !== 0) {
             // set as default

package/src/utils/string.js

@@ -45,7 +45,7 @@ export function trimRight(str) {
 };
 
 /**
- * returns true if the given string contains a numeric (integer) value
+ * returns true if the given string contains a numeric integer or float value
  * @public
  * @function
  * @memberOf me.utils.string
@@ -57,7 +57,7 @@ export function isNumeric(str) {
     if (typeof str === "string") {
         str = str.trim();
     }
-    return !isNaN(str) && /^\d+$/.test(str);
+    return !isNaN(str) && /[+-]?([0-9]*[.])?[0-9]+/.test(str);
 };
 
 /**