melonjs 9.0.1 → 9.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "9.0.1",
+  "version": "9.1.2",
   "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"
@@ -86,7 +86,7 @@
     "test": "npm run build && karma start tests/karma.conf.js",
     "doc": "mkdirp docs && jsdoc -c jsdoc_conf.json",
     "publishdoc": "npm run doc && ghpages melonjs/melonJS -p docs",
-    "release": "npm run dist && npm publish --access public && npm run publishdoc",
+    "release": "npm run dist && npm publish --access public",
     "clean": "del-cli --force build/*.js docs"
   }
 }

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

@@ -147,6 +147,10 @@ var Sprite = Renderable.extend({
         } else {
             // HTMLImageElement/Canvas or String
             this.image = (typeof settings.image === "object") ? settings.image : loader.getImage(settings.image);
+            // throw an error if image ends up being null/undefined
+            if (!this.image) {
+                throw new Error("me.Sprite: '" + settings.image + "' image/texture not found!");
+            }
             // update the default "current" frame size
             this.current.width = settings.framewidth = settings.framewidth || this.image.width;
             this.current.height = settings.frameheight = settings.frameheight || this.image.height;
@@ -192,6 +196,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/shapes/poly.js

@@ -330,6 +330,37 @@ var Polygon = window.Jay.extend({
         return this;
     },
 
+    /**
+     * Shifts the Polygon to the given position vector.
+     * @name shift
+     * @memberOf me.Polygon
+     * @function
+     * @param {me.Vector2d} position
+     */
+    /**
+     * Shifts the Polygon to the given x, y position.
+     * @name shift
+     * @memberOf me.Polygon
+     * @function
+     * @param {Number} x
+     * @param {Number} y
+     */
+    shift() {
+        var _x, _y;
+        if (arguments.length === 2) {
+            // x, y
+            _x = arguments[0];
+            _y = arguments[1];
+        } else {
+            // vector
+            _x = arguments[0].x;
+            _y = arguments[0].y;
+        }
+        this.pos.x = _x;
+        this.pos.y = _y;
+        this.updateBounds();
+    },
+
     /**
      * Returns true if the polygon contains the given point.
      * (Note: it is highly recommended to first do a hit test on the corresponding <br>

package/src/shapes/rectangle.js

@@ -113,67 +113,6 @@ var Rect = Polygon.extend({
         return this.setShape(rect.pos.x, rect.pos.y, rect.width, rect.height);
     },
 
-    /**
-     * translate the rect by the specified offset
-     * @name translate
-     * @memberOf me.Rect.prototype
-     * @function
-     * @param {Number} x x offset
-     * @param {Number} y y offset
-     * @return {me.Rect} this rectangle
-     */
-    /**
-     * translate the rect by the specified vector
-     * @name translate
-     * @memberOf me.Rect.prototype
-     * @function
-     * @param {me.Vector2d} v vector offset
-     * @return {me.Rect} this rectangle
-     */
-    translate : function () {
-        var _x, _y;
-
-        if (arguments.length === 2) {
-            // x, y
-            _x = arguments[0];
-            _y = arguments[1];
-        } else {
-            // vector
-            _x = arguments[0].x;
-            _y = arguments[0].y;
-        }
-
-        this.pos.x += _x;
-        this.pos.y += _y;
-
-        return this;
-    },
-
-    /**
-     * Shifts the rect to the given position vector.
-     * @name shift
-     * @memberOf me.Rect
-     * @function
-     * @param {me.Vector2d} position
-     */
-    /**
-     * Shifts the rect to the given x, y position.
-     * @name shift
-     * @memberOf me.Rect
-     * @function
-     * @param {Number} x
-     * @param {Number} y
-     */
-    shift : function () {
-        if (arguments.length === 2) {
-            // x, y
-            this.pos.set(arguments[0], arguments[1]);
-        } else {
-            // vector
-            this.pos.setV(arguments[0]);
-        }
-    },
-
     /**
      * merge this rectangle with another one
      * @name union

package/src/system/device.js

@@ -142,16 +142,16 @@ let device = {
         }
 
         // set pause/stop action on losing focus
-        window.addEventListener("blur", function () {
+        window.addEventListener("blur", (function () {
             if (this.stopOnBlur) {
                 state.stop(true);
             }
             if (this.pauseOnBlur) {
                 state.pause(true);
             }
-        }, false);
+        }).bind(this), false);
         // set restart/resume action on gaining focus
-        window.addEventListener("focus", function () {
+        window.addEventListener("focus", (function () {
             if (this.stopOnBlur) {
                 state.restart(true);
             }
@@ -162,7 +162,7 @@ let device = {
             if (this.autoFocus) {
                 this.focus();
             }
-        }, false);
+        }).bind(this), false);
 
 
         // Set the name of the hidden property and the change event for visibility
@@ -186,7 +186,7 @@ let device = {
         if (typeof (visibilityChange) === "string") {
             // add the corresponding event listener
             document.addEventListener(visibilityChange,
-                function () {
+                (function () {
                     if (document[hidden]) {
                         if (this.stopOnBlur) {
                             state.stop(true);
@@ -202,7 +202,7 @@ let device = {
                             state.resume(true);
                         }
                     }
-                }, false
+                }).bind(this), false
             );
         }
     },

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);
 };
 
 /**