Получение координат X и Y из идентификатора тайла

Question

Я озадачен тем, что, вероятно, довольно простая математика.Мне нужно получить координаты X и Y из каждого идентификатора, на который ссылаются плитки.Сетка ниже показывает порядок, в котором генерируются идентификаторы. Каждая плитка имеет ширину и высоту 32. Числовые единицы x & y будут равны (0,0).Это для игры, которую я начинаю делать с canvas, используя tileset.

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

Answer 1

Если 1 равно (0,0), а каждая клетка 32*32, то найти ваше горизонтальное положение просто 32*(t-1), где t - это номер вашей плитки.t-1 потому что ваши плитки начинаются с 1 вместо 0.Теперь у вас есть 3 плиток в строке, поэтому вы хотите сбросить каждые 3, поэтому окончательная формула для вашего x будет 32*((t-1)%3).

Для вертикальной позиции это почти то же самое, но вы хотитеувеличить вашу позицию на 32 только один раз каждые 3 плиток, так что это ваше y: 32*floor((t-1)/3).

floor((t-1)/3) - это просто целочисленное деление, поскольку числа всегда положительны.

Answer 2

Если я правильно понимаю, вы хотите, чтобы значения 1 | 2 | 3 основывались на x, y, правильно?Вы можете сделать что-то вроде этого:

((y * total # of rows) + x) + 1

Это приведет к преобразованию двумерного индекса x, y в один индекс, который, как вы сказали, равен 1 | 2 | 3.Эта формула основана на вашем примере, где счет начинается с 1, а не с 0. Если вы хотите преобразовать его в 0, просто удалите + 1.

Если у вас есть ширина и высота или, возможно, расположениеввод / символ, вы можете иметь GetX (int posX) и GetY (int posY), чтобы получить x и y на основе позиции.Как только вы преобразовали положение в значения x, y, используйте формулу выше.

int GetX(int posX)
{
    return (posX / 32);
}

int GetY(int posY)
{
    return (posY / 32);
}

int GetIndex(int posX, int posY)
{
    return ((GetY(posY) / totalRows) + GetX(posX)) + 1;
}