Как бы я управлял рисованием объектов в массиве на основе позиции? - PullRequest
0 голосов
/ 08 марта 2020

Решение: Каждый раз, когда генерируется новое дерево, оно сортирует деревья по позиции Y

trees.sort(function(a, b) {
 return parseFloat(a.Y) - parseFloat(b.Y);
});

Итак, допустим, у меня есть этот пустой массив:

trees[];

И у меня есть таймер, генерирующий эти деревья со случайными позициями.

function generateTrees() {
if(tick % 50 === 0) {
  trees.push({
   X: randomNumber,
   Y: randomNumber,
   H: 60,
   W: 30,
   image: treeImage
});
 }
}

Так что он генерирует деревья, и все идет хорошо. Но иногда деревья перекрывают друг друга при рисовании, и я в порядке с этим. Но проблема в том, что деревья, сгенерированные над другими деревьями на оси Y, иногда рисуют поверх тех, что ниже, Вот пример. Я пытаюсь смоделировать с высоты птичьего полета 3D-i sh поэтому я хотел бы нарисовать эти объекты за объектами, расположенными ниже по оси Y.

У меня есть этот код для рисования, и я пробовал операторы if, но я не уверен, как бы это сделать с массивами и одним числом 'i':

function draw() {
 for(i = 0; i < trees.length; i++) {
  ctx.drawImage(trees[i].X,trees[i].Y,trees[i].W,trees[i].H);
 }
}

Может ли кто-нибудь указать мне правильное направление на то, как я могу реализовать это решение? Пожалуйста и заранее спасибо.

1 Ответ

0 голосов
/ 08 марта 2020

По сути, вы хотите визуализировать деревья в порядке их y-координаты. Звучит так, как будто ваша ось y направлена ​​вверх, поэтому сначала вам нужно будет визуализировать деревья с самой высокой координатой y. Таким образом, деревья внизу экрана будут отображаться сверху.

Один простой способ сделать это - отсортировать массив деревьев. Вы можете сделать это каждый кадр (приемлемо, если у вас очень мало деревьев), или поддерживать отсортированный массив с течением времени. В последнем случае, есть несколько методов для вставки новых деревьев:

  1. Поиск в массиве линейно, пока вы не найдете правильный индекс
  2. Выполните двоичный поиск, чтобы найти правильное index

Вместо того, чтобы каждый раз вставлять новые деревья в конец массива, вы хотите найти правильное «отсортированное» местоположение. В интернете много информации об этих методах. Я могу отослать вас к этому другому посту с отличным ответом, который может вас заинтересовать:

Как я могу поместить sh элемент в массив в отсортированной позиции индекса?

...