melonjs 14.0.2 → 14.1.0

package/dist/melonjs.mjs/level/tiled/renderer/TMXIsometricRenderer.js

@@ -0,0 +1,220 @@
+/*!
+ * melonJS Game Engine - v14.1.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import Vector2d from '../../../math/vector2.js';
+import pool from '../../../system/pooling.js';
+import TMXRenderer from './TMXRenderer.js';
+import TMXLayer from '../TMXLayer.js';
+
+/**
+ * @classdesc
+ * an Isometric Map Renderder
+ * @augments TMXRenderer
+ */
+class TMXIsometricRenderer extends TMXRenderer {
+    /**
+     * @param {TMXTileMap} map - the TMX map
+     */
+    constructor(map) {
+        super(
+            map.cols,
+            map.rows,
+            map.tilewidth,
+            map.tileheight
+        );
+
+        this.hTilewidth = this.tilewidth / 2;
+        this.hTileheight = this.tileheight / 2;
+        this.originX = this.rows * this.hTilewidth;
+    }
+
+    /**
+     * return true if the renderer can render the specified layer
+     * @ignore
+     */
+    canRender(layer) {
+        return (
+            (layer.orientation === "isometric") &&
+            super.canRender(layer)
+        );
+    }
+
+    /**
+     * 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}
+     */
+    getBounds(layer) {
+        var bounds = layer instanceof TMXLayer ? pool.pull("Bounds") : this.bounds;
+        bounds.setMinMax(
+            0, 0,
+            (this.cols + this.rows) * (this.tilewidth / 2),
+            (this.cols + this.rows) * (this.tileheight / 2)
+        );
+        return bounds;
+    }
+
+    /**
+     * return the tile position corresponding to the specified pixel
+     * @ignore
+     */
+    pixelToTileCoords(x, y, v) {
+        var ret = v || new Vector2d();
+        return ret.set(
+            (y / this.tileheight) + ((x - this.originX) / this.tilewidth),
+            (y / this.tileheight) - ((x - this.originX) / this.tilewidth)
+        );
+    }
+
+    /**
+     * return the pixel position corresponding of the specified tile
+     * @ignore
+     */
+    tileToPixelCoords(x, y, v) {
+        var ret = v || new Vector2d();
+        return ret.set(
+            (x - y) * this.hTilewidth + this.originX,
+            (x + y) * this.hTileheight
+        );
+    }
+
+    /**
+     * fix the position of Objects to match
+     * the way Tiled places them
+     * @ignore
+     */
+    adjustPosition(obj) {
+        var tileX = obj.x / this.hTilewidth;
+        var tileY = obj.y / this.tileheight;
+        var isoPos = pool.pull("Vector2d");
+
+        this.tileToPixelCoords(tileX, tileY, isoPos);
+
+        obj.x = isoPos.x;
+        obj.y = isoPos.y;
+
+        pool.push(isoPos);
+    }
+
+    /**
+     * draw the tile map
+     * @ignore
+     */
+    drawTile(renderer, x, y, tmxTile) {
+        var tileset = tmxTile.tileset;
+        // draw the tile
+        tileset.drawTile(
+            renderer,
+            ((this.cols - 1) * tileset.tilewidth + (x - y) * tileset.tilewidth >> 1),
+            (-tileset.tilewidth + (x + y) * tileset.tileheight >> 2),
+            tmxTile
+        );
+    }
+
+    /**
+     * draw the tile map
+     * @ignore
+     */
+    drawTileLayer(renderer, layer, rect) {
+        // cache a couple of useful references
+        var tileset = layer.tileset;
+
+        // get top-left and bottom-right tile position
+        var rowItr = this.pixelToTileCoords(
+            rect.pos.x - tileset.tilewidth,
+            rect.pos.y - tileset.tileheight,
+            pool.pull("Vector2d")
+        ).floorSelf();
+        var tileEnd = this.pixelToTileCoords(
+            rect.pos.x + rect.width + tileset.tilewidth,
+            rect.pos.y + rect.height + tileset.tileheight,
+            pool.pull("Vector2d")
+        ).ceilSelf();
+
+        var rectEnd = this.tileToPixelCoords(tileEnd.x, tileEnd.y, pool.pull("Vector2d"));
+
+        // Determine the tile and pixel coordinates to start at
+        var startPos = this.tileToPixelCoords(rowItr.x, rowItr.y, pool.pull("Vector2d"));
+        startPos.x -= this.hTilewidth;
+        startPos.y += this.tileheight;
+
+        /* Determine in which half of the tile the top-left corner of the area we
+         * need to draw is. If we're in the upper half, we need to start one row
+         * up due to those tiles being visible as well. How we go up one row
+         * depends on whether we're in the left or right half of the tile.
+         */
+        var inUpperHalf = startPos.y - rect.pos.y > this.hTileheight;
+        var inLeftHalf  = rect.pos.x - startPos.x < this.hTilewidth;
+
+        if (inUpperHalf) {
+            if (inLeftHalf) {
+                rowItr.x--;
+                startPos.x -= this.hTilewidth;
+            }
+            else {
+                rowItr.y--;
+                startPos.x += this.hTilewidth;
+            }
+            startPos.y -= this.hTileheight;
+        }
+
+        // Determine whether the current row is shifted half a tile to the right
+        var shifted = inUpperHalf ^ inLeftHalf;
+
+        // initialize the columItr vector
+        var columnItr = rowItr.clone();
+
+        // main drawing loop
+        for (var y = startPos.y * 2; y - this.tileheight * 2 < rectEnd.y * 2; y += this.tileheight) {
+            columnItr.setV(rowItr);
+            for (var x = startPos.x; x < rectEnd.x; x += this.tilewidth) {
+                var tmxTile = layer.cellAt(columnItr.x, columnItr.y);
+                // render if a valid tile position
+                if (tmxTile) {
+                    tileset = tmxTile.tileset;
+                    // offset could be different per tileset
+                    var offset  = tileset.tileoffset;
+                    // draw our tile
+                    tileset.drawTile(
+                        renderer,
+                        offset.x + x,
+                        offset.y + y / 2 - tileset.tileheight,
+                        tmxTile
+                    );
+                }
+
+                // Advance to the next column
+                columnItr.x++;
+                columnItr.y--;
+            }
+
+            // Advance to the next row
+            if (!shifted) {
+                rowItr.x++;
+                startPos.x += this.hTilewidth;
+                shifted = true;
+            }
+            else {
+                rowItr.y++;
+                startPos.x -= this.hTilewidth;
+                shifted = false;
+            }
+        }
+
+        pool.push(columnItr);
+        pool.push(rowItr);
+        pool.push(tileEnd);
+        pool.push(rectEnd);
+        pool.push(startPos);
+    }
+}
+
+var TMXIsometricRenderer$1 = TMXIsometricRenderer;
+
+export { TMXIsometricRenderer$1 as default };

package/dist/melonjs.mjs/level/tiled/renderer/TMXOrthogonalRenderer.js

@@ -0,0 +1,157 @@
+/*!
+ * melonJS Game Engine - v14.1.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import Vector2d from '../../../math/vector2.js';
+import pool from '../../../system/pooling.js';
+import TMXRenderer from './TMXRenderer.js';
+
+/**
+ * @classdesc
+ * an Orthogonal Map Renderder
+ * @augments TMXRenderer
+ */
+class TMXOrthogonalRenderer extends TMXRenderer {
+    /**
+     * @param {TMXTileMap} map - the TMX map
+     */
+    constructor(map) {
+        super(
+            map.cols,
+            map.rows,
+            map.tilewidth,
+            map.tileheight
+        );
+    }
+
+    /**
+     * return true if the renderer can render the specified layer
+     * @ignore
+     */
+    canRender(layer) {
+        return (
+            (layer.orientation === "orthogonal") &&
+            super.canRender(layer)
+        );
+    }
+
+    /**
+     * return the tile position corresponding to the specified pixel
+     * @ignore
+     */
+    pixelToTileCoords(x, y, v) {
+        var ret = v || new Vector2d();
+        return ret.set(
+            x / this.tilewidth,
+            y / this.tileheight
+        );
+    }
+
+
+    /**
+     * return the pixel position corresponding of the specified tile
+     * @ignore
+     */
+    tileToPixelCoords(x, y, v) {
+        var ret = v || new Vector2d();
+        return ret.set(
+            x * this.tilewidth,
+            y * this.tileheight
+        );
+    }
+
+    /**
+     * fix the position of Objects to match
+     * the way Tiled places them
+     * @ignore
+     */
+    adjustPosition(obj) {
+        // only adjust position if obj.gid is defined
+        if (typeof(obj.gid) === "number") {
+            // Tiled objects origin point is "bottom-left" in Tiled,
+            // "top-left" in melonJS)
+            obj.y -= obj.height;
+        }
+    }
+
+    /**
+     * draw the tile map
+     * @ignore
+     */
+    drawTile(renderer, x, y, tmxTile) {
+        var tileset = tmxTile.tileset;
+        // draw the tile
+        tileset.drawTile(
+            renderer,
+            tileset.tileoffset.x + x * this.tilewidth,
+            tileset.tileoffset.y + (y + 1) * this.tileheight - tileset.tileheight,
+            tmxTile
+        );
+    }
+
+    /**
+     * draw the tile map
+     * @ignore
+     */
+    drawTileLayer(renderer, layer, rect) {
+        var incX = 1, incY = 1;
+
+        // get top-left and bottom-right tile position
+        var start = this.pixelToTileCoords(
+            Math.max(rect.pos.x - (layer.maxTileSize.width - layer.tilewidth), 0),
+            Math.max(rect.pos.y - (layer.maxTileSize.height - layer.tileheight), 0),
+            pool.pull("Vector2d")
+        ).floorSelf();
+
+        var end = this.pixelToTileCoords(
+            rect.pos.x + rect.width + this.tilewidth,
+            rect.pos.y + rect.height + this.tileheight,
+            pool.pull("Vector2d")
+        ).ceilSelf();
+
+        //ensure we are in the valid tile range
+        end.x = end.x > this.cols ? this.cols : end.x;
+        end.y = end.y > this.rows ? this.rows : end.y;
+
+        switch (layer.renderorder) {
+            case "right-up" :
+                // swapping start.y and end.y
+                end.y = start.y + (start.y = end.y) - end.y;
+                incY = -1;
+                break;
+            case "left-down" :
+                // swapping start.x and end.x
+                end.x = start.x + (start.x = end.x) - end.x;
+                incX = -1;
+                break;
+            case "left-up" :
+                // swapping start.x and end.x
+                end.x = start.x + (start.x = end.x) - end.x;
+                // swapping start.y and end.y
+                end.y = start.y + (start.y = end.y) - end.y;
+                incX = -1;
+                incY = -1;
+                break;
+        }
+
+        // main drawing loop
+        for (var y = start.y; y !== end.y; y+= incY) {
+            for (var x = start.x; x !== end.x; x+= incX) {
+                var tmxTile = layer.cellAt(x, y, false);
+                if (tmxTile) {
+                    this.drawTile(renderer, x, y, tmxTile);
+                }
+            }
+        }
+
+        pool.push(start);
+        pool.push(end);
+    }
+}
+
+var TMXOrthogonalRenderer$1 = TMXOrthogonalRenderer;
+
+export { TMXOrthogonalRenderer$1 as default };

package/dist/melonjs.mjs/level/tiled/renderer/TMXRenderer.js

@@ -0,0 +1,125 @@
+/*!
+ * melonJS Game Engine - v14.1.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import pool from '../../../system/pooling.js';
+import TMXLayer from '../TMXLayer.js';
+import Bounds from '../../../physics/bounds.js';
+
+/* eslint-disable no-unused-vars */
+
+/**
+ * @classdesc
+ * The map renderer base class
+ */
+class TMXRenderer {
+    /**
+     * @param {number} cols - width of the tilemap in tiles
+     * @param {number} rows - height of the tilemap in tiles
+     * @param {number} tilewidth - width of each tile in pixels
+     * @param {number} tileheight - height of each tile in pixels
+     */
+    constructor(cols, rows, tilewidth, tileheight) {
+        this.cols = cols;
+        this.rows = rows;
+        this.tilewidth = tilewidth;
+        this.tileheight = tileheight;
+        this.bounds = new Bounds();
+    }
+
+    /**
+     * 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}
+     */
+    canRender(component) {
+        return (
+            /*
+            // layers can have different size within
+            // the same maps, so commenting these two lines
+            (this.cols === component.cols) &&
+            (this.rows === component.rows) &&
+            */
+            (this.tilewidth === component.tilewidth) &&
+            (this.tileheight === component.tileheight)
+        );
+    }
+
+    /**
+     * 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}
+     */
+    getBounds(layer) {
+        var bounds = layer instanceof TMXLayer ? pool.pull("Bounds") : this.bounds;
+        bounds.setMinMax(
+            0, 0,
+            this.cols * this.tilewidth,
+            this.rows * this.tileheight
+        );
+        return bounds;
+    }
+
+    /**
+     * 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
+     * @returns {Vector2d}
+     */
+    pixelToTileCoords(x, y, v) {
+        return v;
+    }
+
+    /**
+     * 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
+     * @returns {Vector2d}
+     */
+    tileToPixelCoords(col, row, v) {
+        return v;
+    }
+
+    /**
+     * 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
+     * @param {Tile} tile - the tile object to draw
+     */
+    drawTile(renderer, x, y, tile) {
+    }
+
+    /**
+     * 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
+     */
+    drawTileLayer(renderer, layer, rect) {
+    }
+
+}
+
+var TMXRenderer$1 = TMXRenderer;
+
+/* eslint-enable no-unused-vars */
+
+export { TMXRenderer$1 as default };

package/dist/melonjs.mjs/level/tiled/renderer/TMXStaggeredRenderer.js

@@ -0,0 +1,109 @@
+/*!
+ * melonJS Game Engine - v14.1.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import Vector2d from '../../../math/vector2.js';
+import pool from '../../../system/pooling.js';
+import TMXHexagonalRenderer from './TMXHexagonalRenderer.js';
+import { degToRad } from '../../../math/math.js';
+
+/**
+ * @classdesc
+ * a Staggered Map Renderder
+ * @augments TMXHexagonalRenderer
+ */
+class TMXStaggeredRenderer extends TMXHexagonalRenderer {
+
+    /**
+     * return true if the renderer can render the specified layer
+     * @ignore
+     */
+    canRender(layer) {
+        return (
+            (layer.orientation === "staggered") &&
+            super.canRender(layer)
+        );
+    }
+
+    /**
+     * return the tile position corresponding to the specified pixel
+     * @ignore
+     */
+    pixelToTileCoords(x, y, v) {
+        var ret = v || new Vector2d();
+
+        var alignedX = x,
+            alignedY = y;
+
+        if (this.staggerX) {
+            alignedX -= this.staggerEven ? this.sideoffsetx : 0;
+        } else {
+            alignedY -= this.staggerEven ? this.sideoffsety : 0;
+        }
+
+        // Start with the coordinates of a grid-aligned tile
+        var referencePoint = pool.pull("Vector2d",
+            Math.floor(alignedX / this.tilewidth),
+            Math.floor(alignedY / this.tileheight)
+        );
+
+        // Adjust the reference point to the correct tile coordinates
+        if (this.staggerX) {
+            referencePoint.x = referencePoint.x * 2;
+            if (this.staggerEven) {
+                ++referencePoint.x;
+            }
+        } else {
+            referencePoint.y = referencePoint.y * 2;
+            if (this.staggerEven) {
+                ++referencePoint.y;
+            }
+        }
+
+        // Relative x and y position on the base square of the grid-aligned tile
+        var rel = pool.pull("Vector2d",
+            alignedX - referencePoint.x * this.tilewidth,
+            alignedY - referencePoint.y * this.tileheight
+        );
+
+        // Check whether the cursor is in any of the corners (neighboring tiles)
+        var y_pos = rel.x * (this.tileheight / this.tilewidth);
+
+        if (this.sideoffsety - y_pos > rel.y) {
+            referencePoint = this.topLeft(referencePoint.x, referencePoint.y, referencePoint);
+        }
+        if (-this.sideoffsety + y_pos > rel.y) {
+            referencePoint = this.topRight(referencePoint.x, referencePoint.y, referencePoint);
+        }
+        if (this.sideoffsety + y_pos < rel.y) {
+            referencePoint = this.bottomLeft(referencePoint.x, referencePoint.y, referencePoint);
+        }
+        if (this.sideoffsety * 3 - y_pos < rel.y) {
+            referencePoint = this.bottomRight(referencePoint.x, referencePoint.y, referencePoint);
+        }
+
+        ret = this.tileToPixelCoords(referencePoint.x, referencePoint.y, ret);
+
+        ret.set(x - ret.x, y - ret.y);
+
+        // Start with the coordinates of a grid-aligned tile
+        ret.set(
+            ret.x - (this.tilewidth / 2),
+            ret.y * (this.tilewidth / this.tileheight)
+        );
+
+        ret.div(this.tilewidth / Math.sqrt(2)).rotate(degToRad(-45)).add(referencePoint);
+
+        pool.push(referencePoint);
+        pool.push(rel);
+
+        return ret;
+    }
+}
+
+var TMXStaggeredRenderer$1 = TMXStaggeredRenderer;
+
+export { TMXStaggeredRenderer$1 as default };