获取 tileset 上的 tile 的 X 和 Y

Question

我正在尝试编写 returns 一个图块在图块集中的位置的函数。

我为此编写了一些代码，但这似乎不必要地复杂。

每个方块如何有一个数字：

// My old code:

    function getXPosByNumber(width, height, tilesize, tilenumber) {
    if ((tilenumber % (width / tilesize) - 1) < 0) {
        return width - tilesize;
    } else {
        return (tilenumber % (width / tilesize) - 1) * tilesize;
    }
}

function getYPosByNumber(width, height, tilesize, tilenumber) {
    return (Math.ceil(tilenumber / (width / tilesize)) - 1) * tilesize;
}

如何使用 cleaner/simpler 代码访问任何坐标的图块？

谢谢。

Answer 1

如果这个 tileset 总是相同的，我建议创建一种查找 table。将存储每个图块编号的预先计算位置的对象。由于您只需要访问对象的属性。

，它将变得更加简单和快速

Answer 2

以下是我想到的要简化的内容。我发现高度与计算 X 或 Y 无关。这里的重要因素是它水平分布的程度。

然后，由于特定的 tileset 更可能始终具有相同的宽度和 tilesize，我建议使用更 "Object" 化的方法，这样您就不必经常记住它的配置。就个人而言，我喜欢包装常量和配置，这样我可以在之后编写轻量级代码：

var tileset = function(width, tilesize) {
    this.width = width;
    this.tilesize = tilesize;
};

// calculate X by tilenumber
tileset.prototype.getX = function(tilenumber) {
    return (tilenumber % this.width - 1) * this.tilesize;
};

// calculate Y by tilenumber
tileset.prototype.getY = function(tilenumber) {
    return Math.floor(tilenumber / this.width) * this.tilesize;
};

这允许您像这样使用它：

var mySet = new tileset(6, 10); // width=6, tilesize=10
var x = mySet.getX(16); // tilenumber=16
var y = mySet.getY(16); // tilenumber=16

要查看实际效果，请选中此 FIDDLE。

请注意，它计算的是左上角的位置。如有需要，可另行调整。

希望对您有所帮助！

获取 tileset 上的 tile 的 X 和 Y

get X and Y of a tile on a tileset

javascript

math

canvas

game-engine

tile