melonjs 14.3.0 → 14.5.0

package/src/level/tiled/TMXTile.js

@@ -1,12 +1,7 @@
 import Matrix2d from "./../../math/matrix2.js";
 import Sprite from "./../../renderable/sprite.js";
 import Bounds from "./../../physics/bounds.js";
-
-// bitmask constants to check for flipped & rotated tiles
-const TMX_FLIP_H          = 0x80000000,
-      TMX_FLIP_V          = 0x40000000,
-      TMX_FLIP_AD         = 0x20000000,
-      TMX_CLEAR_BIT_MASK  = ~(0x80000000 | 0x40000000 | 0x20000000);
+import { TMX_FLIP_V, TMX_FLIP_H, TMX_FLIP_AD, TMX_CLEAR_BIT_MASK } from "./constants.js";
 
 /**
  * @classdesc
@@ -40,9 +35,7 @@ const TMX_FLIP_H          = 0x80000000,
 
         /**
          * tileset
-         * @public
          * @type {TMXTileset}
-         * @name Tile#tileset
          */
         this.tileset = tileset;
 
@@ -58,38 +51,31 @@ const TMX_FLIP_H          = 0x80000000,
 
         /**
          * tileId
-         * @public
          * @type {number}
-         * @name Tile#tileId
          */
         this.tileId = gid;
+
         /**
-         * True if the tile is flipped horizontally<br>
-         * @public
+         * True if the tile is flipped horizontally
          * @type {boolean}
-         * @name Tile#flipX
          */
         this.flippedX  = (this.tileId & TMX_FLIP_H) !== 0;
+
         /**
-         * True if the tile is flipped vertically<br>
-         * @public
+         * True if the tile is flipped vertically
          * @type {boolean}
-         * @name Tile#flippedY
          */
         this.flippedY  = (this.tileId & TMX_FLIP_V) !== 0;
+
         /**
-         * True if the tile is flipped anti-diagonally<br>
-         * @public
+         * True if the tile is flipped anti-diagonally
          * @type {boolean}
-         * @name Tile#flippedAD
          */
         this.flippedAD = (this.tileId & TMX_FLIP_AD) !== 0;
 
         /**
-         * Global flag that indicates if the tile is flipped<br>
-         * @public
+         * Global flag that indicates if the tile is flipped
          * @type {boolean}
-         * @name Tile#flipped
          */
         this.flipped = this.flippedX || this.flippedY || this.flippedAD;
 
@@ -130,8 +116,6 @@ const TMX_FLIP_H          = 0x80000000,
 
     /**
      * return a renderable object for this Tile object
-     * @name Tile#getRenderable
-     * @public
      * @param {object} [settings] - see {@link Sprite}
      * @returns {Renderable} a me.Sprite object
      */

package/src/level/tiled/TMXTileMap.js

@@ -1,46 +1,18 @@
 import pool from "./../../system/pooling.js";
 import * as event from "./../../system/event.js";
 import { game } from "../../index.js";
+import utils from "./../../utils/utils.js";
 import collision from "./../../physics/collision.js";
 import Body from "./../../physics/body.js";
-import TMXOrthogonalRenderer from "./renderer/TMXOrthogonalRenderer.js";
-import TMXIsometricRenderer from "./renderer/TMXIsometricRenderer.js";
-import TMXHexagonalRenderer from "./renderer/TMXHexagonalRenderer.js";
-import TMXStaggeredRenderer from "./renderer/TMXStaggeredRenderer.js";
 import TMXTileset from "./TMXTileset.js";
 import TMXTilesetGroup from "./TMXTilesetGroup.js";
 import TMXGroup from "./TMXGroup.js";
 import TMXLayer from "./TMXLayer.js";
 import { applyTMXProperties } from "./TMXUtils.js";
 import Container from "../../renderable/container.js";
-
-// constant to identify the collision object layer
-const COLLISION_GROUP = "collision";
-
-/**
- * set a compatible renderer object
- * for the specified map
- * @ignore
- */
-function getNewDefaultRenderer(map) {
-    switch (map.orientation) {
-        case "orthogonal":
-            return new TMXOrthogonalRenderer(map);
-
-        case "isometric":
-            return new TMXIsometricRenderer(map);
-
-        case "hexagonal":
-            return new TMXHexagonalRenderer(map);
-
-        case "staggered":
-            return new TMXStaggeredRenderer(map);
-
-        // if none found, throw an exception
-        default:
-            throw new Error(map.orientation + " type TMX Tile Map not supported!");
-    }
-}
+import { COLLISION_GROUP } from "./constants.js";
+import { getNewTMXRenderer } from "./renderer/autodetect.js";
+import { warning } from "../../lang/console.js";
 
 /**
  * read the layer Data
@@ -122,96 +94,73 @@ function readObjectGroup(map, data, z) {
 
         /**
          * name of the tilemap
-         * @public
          * @type {string}
-         * @name TMXTileMap#name
          */
         this.name = levelId;
 
         /**
          * width of the tilemap in tiles
-         * @public
          * @type {number}
-         * @name TMXTileMap#cols
          */
         this.cols = +data.width;
+
         /**
          * height of the tilemap in tiles
-         * @public
          * @type {number}
-         * @name TMXTileMap#rows
          */
         this.rows = +data.height;
 
         /**
          * Tile width
-         * @public
          * @type {number}
-         * @name TMXTileMap#tilewidth
          */
         this.tilewidth = +data.tilewidth;
 
         /**
          * Tile height
-         * @public
          * @type {number}
-         * @name TMXTileMap#tileheight
          */
         this.tileheight = +data.tileheight;
 
         /**
          * is the map an infinite map
-         * @public
          * @type {number}
          * @default 0
-         * @name TMXTileMap#infinite
          */
-        this.infinite = +data.infinite;
+        this.infinite = +data.infinite || 0;
 
         /**
          * the map orientation type. melonJS supports “orthogonal”, “isometric”, “staggered” and “hexagonal”.
-         * @public
          * @type {string}
          * @default "orthogonal"
-         * @name TMXTileMap#orientation
          */
         this.orientation = data.orientation;
 
         /**
          * the order in which tiles on orthogonal tile layers are rendered.
          * (valid values are "left-down", "left-up", "right-down", "right-up")
-         * @public
          * @type {string}
          * @default "right-down"
-         * @name TMXTileMap#renderorder
          */
         this.renderorder = data.renderorder || "right-down";
 
         /**
          * the TMX format version
-         * @public
          * @type {string}
-         * @name TMXTileMap#version
          */
-        this.version = data.version;
+        this.version = "" + data.version;
 
         /**
          * The Tiled version used to save the file (since Tiled 1.0.1).
-         * @public
          * @type {string}
-         * @name TMXTileMap#tiledversion
          */
-        this.tiledversion = data.tiledversion;
-
+        this.tiledversion = "" + data.tiledversion;
 
         /**
          * The map class.
-         * @public
          * @type {string}
-         * @name TMXTileMap#class
          */
-         this.class = data.class;
-
+        this.class = data.class;
 
         // tilesets for this map
         this.tilesets = null;
@@ -228,7 +177,6 @@ function readObjectGroup(map, data, z) {
         // Check if map is from melon editor
         this.isEditor = data.editor === "melon-editor";
 
-
         // object id
         this.nextobjectid = +data.nextobjectid || undefined;
 
@@ -247,37 +195,35 @@ function readObjectGroup(map, data, z) {
         // background color
         this.backgroundcolor = data.backgroundcolor;
 
+        // if version is undefined or empty it usually means the map was not created with Tiled
+        if (this.version !== "undefined" && this.version !== "") {
+            // deprecation warning if map tiled version is older than 1.5
+            if (utils.checkVersion(this.version, "1.5") < 0) {
+                warning("("+this.name+") Tiled Map format version 1.4 and below", "format 1.5 or higher", "10.4.4");
+            }
+        }
+
+
         // set additional map properties (if any)
         applyTMXProperties(this, data);
 
         // internal flag
         this.initialized = false;
-
-        if (this.infinite === 1) {
-            // #956 Support for Infinite map
-            // see as well in me.TMXUtils
-            throw new Error("Tiled Infinite Map not supported!");
-        }
     }
 
     /**
      * Return the map default renderer
-     * @name getRenderer
-     * @memberof TMXTileMap
-     * @public
      * @returns {TMXRenderer} a TMX renderer
      */
     getRenderer() {
         if ((typeof(this.renderer) === "undefined") || (!this.renderer.canRender(this))) {
-            this.renderer = getNewDefaultRenderer(this);
+            this.renderer = getNewTMXRenderer(this);
         }
         return this.renderer;
     }
 
     /**
      * return the map bounding rect
-     * @name TMXRenderer#getBounds
-     * @public
      * @returns {Bounds}
      */
     getBounds() {
@@ -358,8 +304,6 @@ function readObjectGroup(map, data, z) {
     /**
      * add all the map layers and objects to the given container.
      * note : this will not automatically update the camera viewport
-     * @name TMXTileMap#addTo
-     * @public
      * @param {Container} container - target container
      * @param {boolean} [flatten=true] - if true, flatten all objects into the given container, else a `me.Container` object will be created for each corresponding groups
      * @param {boolean} [setViewportBounds=false] - if true, set the viewport bounds to the map size, this should be set to true especially if adding a level to the game world container.
@@ -434,8 +378,6 @@ function readObjectGroup(map, data, z) {
 
     /**
      * return an Array of instantiated objects, based on the map object definition
-     * @name TMXTileMap#getObjects
-     * @public
      * @param {boolean} [flatten=true] - if true, flatten all objects into the returned array.
      * when false, a `me.Container` object will be created for each corresponding groups
      * @returns {Renderable[]} Array of Objects
@@ -606,8 +548,6 @@ function readObjectGroup(map, data, z) {
 
     /**
      * return all the existing layers
-     * @name TMXTileMap#getLayers
-     * @public
      * @returns {TMXLayer[]} Array of Layers
      */
     getLayers() {
@@ -618,8 +558,6 @@ function readObjectGroup(map, data, z) {
 
     /**
      * destroy function, clean all allocated objects
-     * @name TMXTileMap#destroy
-     * @public
      */
     destroy() {
         this.tilesets = undefined;

package/src/level/tiled/TMXTileset.js

@@ -2,7 +2,7 @@ import Vector2d from "./../../math/vector2.js";
 import { renderer } from "./../../video/video.js";
 import * as fileUtil from "./../../utils/file.js";
 import timer from "./../../system/timer.js";
-import loader from "./../../loader/loader.js";
+import { getTMX, getImage } from "./../../loader/loader.js";
 
 /**
  * @classdesc
@@ -30,7 +30,7 @@ import loader from "./../../loader/loader.js";
             var ext = fileUtil.getExtension(src);
             if (ext === "tsx" || ext === "json") {
                 // load the external tileset (TSX/JSON)
-                tileset = loader.getTMX(fileUtil.getBasename(src));
+                tileset = getTMX(fileUtil.getBasename(src));
                 if (!tileset) {
                     throw new Error(src + " external TSX/JSON tileset not found");
                 }
@@ -48,25 +48,19 @@ import loader from "./../../loader/loader.js";
 
         /**
          * Tileset contains animated tiles
-         * @public
          * @type {boolean}
-         * @name TMXTileset#isAnimated
          */
         this.isAnimated = false;
 
         /**
          * true if the tileset is a "Collection of Image" Tileset
-         * @public
          * @type {boolean}
-         * @name TMXTileset#isCollection
          */
         this.isCollection = false;
 
         /**
          * the tileset class
-         * @public
          * @type {boolean}
-         * @name TMXTileset#class
          */
         this.class = tileset.class;
 
@@ -107,7 +101,7 @@ import loader from "./../../loader/loader.js";
                     }
                 }
                 if ("image" in tiles[i]) {
-                    var image = loader.getImage(tiles[i].image);
+                    var image = getImage(tiles[i].image);
                     if (!image) {
                         throw new Error("melonJS: '" + tiles[i].image + "' file for tile '" + (+i + this.firstgid) + "' not found!");
                     }
@@ -138,7 +132,7 @@ import loader from "./../../loader/loader.js";
         if (this.isCollection === false) {
 
             // get the global tileset texture
-            this.image = loader.getImage(tileset.image);
+            this.image = getImage(tileset.image);
 
             if (!this.image) {
                 throw new Error("melonJS: '" + tileset.image + "' file for tileset '" + this.name + "' not found!");
@@ -172,8 +166,6 @@ import loader from "./../../loader/loader.js";
 
     /**
      * return the tile image from a "Collection of Image" tileset
-     * @name TMXTileset#getTileImage
-     * @public
      * @param {number} gid
      * @returns {Image} corresponding image or undefined
      */
@@ -193,8 +185,6 @@ import loader from "./../../loader/loader.js";
 
     /**
      * return true if the gid belongs to the tileset
-     * @name TMXTileset#contains
-     * @public
      * @param {number} gid
      * @returns {boolean}
      */
@@ -204,8 +194,6 @@ import loader from "./../../loader/loader.js";
 
     /**
      * Get the view (local) tile ID from a GID, with animations applied
-     * @name TMXTileset#getViewTileId
-     * @public
      * @param {number} gid - Global tile ID
      * @returns {number} View tile ID
      */
@@ -222,8 +210,6 @@ import loader from "./../../loader/loader.js";
 
     /**
      * return the properties of the specified tile
-     * @name TMXTileset#getTileProperties
-     * @public
      * @param {number} tileId
      * @returns {object}
      */

package/src/level/tiled/TMXTilesetGroup.js

@@ -1,6 +1,4 @@
-
-// bitmask constants to check for flipped & rotated tiles
-const TMX_CLEAR_BIT_MASK = ~(0x80000000 | 0x40000000 | 0x20000000);
+import { TMX_CLEAR_BIT_MASK } from "./constants";
 
 /**
  * @classdesc
@@ -15,8 +13,6 @@ const TMX_CLEAR_BIT_MASK = ~(0x80000000 | 0x40000000 | 0x20000000);
 
     /**
      * add a tileset to the tileset group
-     * @name TMXTilesetGroup#add
-     * @public
      * @param {TMXTileset} tileset
      */
     add(tileset) {
@@ -26,8 +22,6 @@ const TMX_CLEAR_BIT_MASK = ~(0x80000000 | 0x40000000 | 0x20000000);
 
     /**
      * return the tileset at the specified index
-     * @name TMXTilesetGroup#getTilesetByIndex
-     * @public
      * @param {number} i
      * @returns {TMXTileset} corresponding tileset
      */
@@ -38,8 +32,6 @@ const TMX_CLEAR_BIT_MASK = ~(0x80000000 | 0x40000000 | 0x20000000);
     /**
      * return the tileset corresponding to the specified id <br>
      * will throw an exception if no matching tileset is found
-     * @name TMXTilesetGroup#getTilesetByGid
-     * @public
      * @param {number} gid
      * @returns {TMXTileset} corresponding tileset
      */

package/src/level/tiled/TMXUtils.js

@@ -1,4 +1,4 @@
-import * as stringUtil from "./../../utils/string.js";
+import { isBoolean, isNumeric } from "../../utils/string";
 
 /**
  * set and interpret a TMX property value
@@ -25,11 +25,11 @@ function setTMXValue(name, type, value) {
 
         default :
             // try to parse it anyway
-            if (!value || stringUtil.isBoolean(value)) {
+            if (!value || isBoolean(value)) {
                 // if value not defined or boolean
                 value = value ? (value === "true") : true;
             }
-            else if (stringUtil.isNumeric(value)) {
+            else if (isNumeric(value)) {
                 // check if numeric
                 value = Number(value);
             }
@@ -188,13 +188,37 @@ export function normalize(obj, item) {
     switch (nodeName) {
         case "data":
             var data = parse(item);
-            // #956 Support for Infinite map
-            // workaround to prevent the parsing code from crashing
-            data.text = data.text || data.chunk.text;
-            // When no encoding is given, the tiles are stored as individual XML tile elements.
+
             data.encoding = data.encoding || "xml";
-            obj.data = decode(data.text, data.encoding, data.compression);
-            obj.encoding = "none";
+
+            // decode chunks for infinite maps
+            if (typeof data.chunks !== "undefined") {
+                obj.chunks = obj.chunks || [];
+                // infinite maps containing chunk data
+                data.chunks.forEach((chunk) => {
+                    obj.chunks.push({
+                        x: +chunk.x,
+                        y: +chunk.y,
+                        // chunk width is in tiles
+                        width: +chunk.width,
+                        // chunk height is in tiles
+                        height: +chunk.height,
+                        data: decode(chunk.text, data.encoding, data.compression)
+                    });
+                });
+                obj.encoding = "none";
+            }
+            // Bug on if condition: when parsing data, data.text is sometimes defined when chunks are present
+            if (typeof data.text !== "undefined" && typeof obj.chunks === "undefined") {
+                // Finite maps
+                obj.data = decode(data.text, data.encoding, data.compression);
+                obj.encoding = "none";
+            }
+            break;
+
+        case "chunk":
+            obj.chunks = obj.chunks || [];
+            obj.chunks.push(parse(item));
             break;
 
         case "imagelayer":
@@ -303,16 +327,15 @@ export function parse(xml) {
 
     // do children
     if (xml.hasChildNodes()) {
-        for (var i = 0; i < xml.childNodes.length; i++) {
-            var item = xml.childNodes.item(i);
-
-            switch (item.nodeType) {
+        let children = xml.childNodes;
+        for (const node of children) {
+            switch (node.nodeType) {
                 case 1:
-                    normalize(obj, item);
+                    normalize(obj, node);
                     break;
 
                 case 3:
-                    text += item.nodeValue.trim();
+                    text += node.nodeValue.trim();
                     break;
             }
         }

package/src/level/tiled/constants.js

@@ -0,0 +1,8 @@
+// bitmask constants to check for flipped & rotated tiles
+export const TMX_FLIP_H          = 0x80000000;
+export const TMX_FLIP_V          = 0x40000000;
+export const TMX_FLIP_AD         = 0x20000000;
+export const TMX_CLEAR_BIT_MASK  = ~(TMX_FLIP_H | TMX_FLIP_V  | TMX_FLIP_AD);
+
+// constant to identify the collision object layer
+export const COLLISION_GROUP     = "collision";

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

@@ -79,10 +79,7 @@ const offsetsStaggerY = [
 
     /**
      * return the bounding rect for this map renderer
-     * @name TMXHexagonalRenderer#getBounds
-     * @public
-     * @param {TMXLayer} [layer] - calculate the bounding rect for a specific layer (will return a new bounds object)
-     * @returns {Bounds}
+     * @ignore
      */
     getBounds(layer) {
         var bounds = layer instanceof TMXLayer ? pool.pull("Bounds") : this.bounds;
@@ -418,7 +415,8 @@ const offsetsStaggerY = [
 
             startPos = this.tileToPixelCoords(
                 startTile.x + layer.pos.x,
-                startTile.y + layer.pos.y
+                startTile.y + layer.pos.y,
+                startPos
             );
 
             var staggeredRow = this.doStaggerX(startTile.x + layer.pos.x);
@@ -460,7 +458,8 @@ const offsetsStaggerY = [
 
             startPos = this.tileToPixelCoords(
                 startTile.x + layer.pos.x,
-                startTile.y + layer.pos.y
+                startTile.y + layer.pos.y,
+                startPos
             );
 
             // Odd row shifting is applied in the rendering loop, so un-apply it here

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

@@ -39,10 +39,7 @@ import TMXLayer from "./../TMXLayer.js";
 
     /**
      * return the bounding rect for this map renderer
-     * @name TMXIsometricRenderer#getBounds
-     * @public
-     * @param {TMXLayer} [layer] - calculate the bounding rect for a specific layer (will return a new bounds object)
-     * @returns {Bounds}
+     * @ignore
      */
     getBounds(layer) {
         var bounds = layer instanceof TMXLayer ? pool.pull("Bounds") : this.bounds;

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

@@ -25,8 +25,6 @@ import Bounds from "./../../../physics/bounds.js";
 
     /**
      * return true if the renderer can render the specified map or layer
-     * @name TMXRenderer#canRender
-     * @public
      * @param {TMXTileMap|TMXLayer} component - TMX Map or Layer
      * @returns {boolean}
      */
@@ -45,8 +43,6 @@ import Bounds from "./../../../physics/bounds.js";
 
     /**
      * return the bounding rect for this map renderer
-     * @name TMXRenderer#getBounds
-     * @public
      * @param {TMXLayer} [layer] - calculate the bounding rect for a specific layer (will return a new bounds object)
      * @returns {Bounds}
      */
@@ -62,8 +58,6 @@ import Bounds from "./../../../physics/bounds.js";
 
     /**
      * return the tile position corresponding to the specified pixel
-     * @name TMXRenderer#pixelToTileCoords
-     * @public
      * @param {number} x - X coordinate
      * @param {number} y - Y coordinate
      * @param {Vector2d} [v] - an optional vector object where to put the return values
@@ -75,8 +69,6 @@ import Bounds from "./../../../physics/bounds.js";
 
     /**
      * return the pixel position corresponding of the specified tile
-     * @name TMXRenderer#tileToPixelCoords
-     * @public
      * @param {number} col - tile horizontal position
      * @param {number} row - tile vertical position
      * @param {Vector2d} [v] - an optional vector object where to put the return values
@@ -88,8 +80,6 @@ import Bounds from "./../../../physics/bounds.js";
 
     /**
      * draw the given tile at the specified layer
-     * @name TMXRenderer#drawTile
-     * @public
      * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer object
      * @param {number} x - X coordinate where to draw the tile
      * @param {number} y - Y coordinate where to draw the tile
@@ -100,8 +90,6 @@ import Bounds from "./../../../physics/bounds.js";
 
     /**
      * draw the given TMX Layer for the given area
-     * @name TMXRenderer#drawTileLayer
-     * @public
      * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer object
      * @param {TMXLayer} layer - a TMX Layer object
      * @param {Rect} rect - the area of the layer to draw

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

@@ -0,0 +1,29 @@
+import TMXOrthogonalRenderer from "./TMXOrthogonalRenderer.js";
+import TMXIsometricRenderer from "./TMXIsometricRenderer.js";
+import TMXHexagonalRenderer from "./TMXHexagonalRenderer.js";
+import TMXStaggeredRenderer from "./TMXStaggeredRenderer.js";
+
+/**
+ * return a compatible renderer object for the given map
+ * @param {TMXTileMap} map
+ * @ignore
+ */
+export function getNewTMXRenderer(map) {
+    switch (map.orientation) {
+        case "orthogonal":
+            return new TMXOrthogonalRenderer(map);
+
+        case "isometric":
+            return new TMXIsometricRenderer(map);
+
+        case "hexagonal":
+            return new TMXHexagonalRenderer(map);
+
+        case "staggered":
+            return new TMXStaggeredRenderer(map);
+
+        // if none found, throw an exception
+        default:
+            throw new Error(map.orientation + " type TMX Tile Map not supported!");
+    }
+}