我对可能是一些非常简单的数学运算感到困惑。我需要从每个引用 ID 的图 block 中获取 X 和 Y 坐标。下面的网格显示了生成 ID 的顺序。每个图 block 的宽度和高度均为 32。数字 x 和 y 将等于 (0,0)。这是我开始使用 tileset 用 Canvas 制作的游戏。
1|2|3
4|5|6
7|8|9
到目前为止,对于 X,我已经想出了...
(n % 3) * 32 - 32
//3 是源图像的宽度除以 32
对于 Y...
(n/3) * 32
这显然是错误的,但这是我最接近的,而且我认为我与实际公式相差不远。
到目前为止,这是我的实际代码:
function startGame() {
const canvas = document.getElementById("rpg");
const ctx = canvas.getContext("2d");
const tileSet = new Image();
tileSet.src = "dungeon_tiles.png";
let map = {
cols: 10,
rows: 10,
tsize: 32,
getTileX: function(counter, tiles) {
return ((tiles[counter] - 1) % 64) * 32;
},
getTileY: function(counter, tiles) {
return ((tiles[counter] - 1) / 64) * 32;
}
};
let counter = 0;
tileSet.onload = function() {
for (let c = 0; c < map.cols; c++) {
for (let r = 0; r < map.rows; r++) {
let x = map.getTileX(counter, mapObj.layers[0].data); // mapObj.layers[0].data is the array of values
let y = map.getTileY(counter, mapObj.layers[0].data);
counter += 1;
ctx.drawImage(
tileSet, // image
x, // source x
y, // source y
map.tsize, // source width
map.tsize, // source height
r * map.tsize, // target x
c * map.tsize, // target y
map.tsize, // target width
map.tsize // target height
);
}
}
};
}
最佳答案
如果 1
是 (0,0)
并且每个图 block 是 32*32
,那么找到你的水平位置很简单 32*(t-1)
其中 t
是您的图 block 编号。 t-1
因为您的图 block 从 1
而不是 0
开始。现在,每行有 3
个图 block ,因此您希望每 3 个图 block 重置一次,因此 x
的最终公式为 32*((t-1)% 3)
。
对于垂直位置,它几乎是相同的,但是您只想每 3
个图 block 将您的位置增加一次 32
,所以这是您的 y
: 32*floor((t-1)/3)
。
floor((t-1)/3)
只是整数除法,因为数字总是正数。
关于javascript - 从图 block ID 获取 X 和 Y 坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52825969/