Struggeling переводят положение мыши в расположение плиток в моей сетке. Когда все это плоское, математика выглядит так:
this.position.x = Math.floor(((pos.y - 240) / 24) + ((pos.x - 320) / 48));
this.position.y = Math.floor(((pos.y - 240) / 24) - ((pos.x - 320) / 48));
где pos.x
и pos.y
- позиция мыши, 240 и 320 - смещение, 24 и 48 - размер плитки. Затем позиция содержит координату сетки плитки, над которой я нависаю. Это хорошо работает на плоской поверхности.
Теперь я добавляю высоту, которую математика не учитывает.
Эта сетка представляет собой 2D-сетку, содержащую шум, которая переводится на высоту и тип плитки. Высота - это просто корректировка положения "Y" плитки, так что две плитки можно нарисовать в одном месте.
Я не знаю, как определить, какая плитка я вишу.
изменить
Сделал некоторый прогресс... Раньше я зависел от события mouseover, чтобы вычислить положение сетки. Я просто изменил это, чтобы выполнить вычисление в самом ничьем, и проверить, находятся ли координаты в пределах плитки, которая в настоящее время нарисована. создает некоторые накладные расходы, не уверен, что я очень доволен этим, но я подтвержу, работает ли он.
изменить 2018:
У меня нет ответа, но поскольку это ха [sd] открытая щедрость, помогите себе с кодом и демо
Сама сетка упрощена;
let grid = [[10,15],[12,23]];
что приводит к рисунку, подобному:
for (var i = 0; i < grid.length; i++) {
for (var j = 0; j < grid[0].length; j++) {
let x = (j - i) * resourceWidth;
let y = ((i + j) * resourceHeight) + (grid[i][j] * -resourceHeight);
// the "+" bit is the adjustment for height according to perlin noise values
}
}
изменить post-bounty:
См. GIF. Принятый ответ работает. Задержка - это моя ошибка, экран не обновляется на mousemove (пока), а частота кадров низкая. Это явно возвращает правильную черепицу.