Я создаю 2d игру в холсте HTML5. Это изометрический мир, так что на самом деле это тоже 3d. Вы всегда видите, что изометрические игры используют плитки, и я думаю, что причина - только для логики глубины. Моя цель - создать игру, не используя плитку. Каждый элемент может быть размещен пользователем, поэтому позиции позиций, такие как стены, деревья и т. Д., Имеют переменные позиции. Положения являются изометрическими координатами x, y, z. Если игра была только черепицей, вы можете определить фиксированную площадь плитки для каждого элемента. (Я имею в виду: элемент из одной плитки или стену длиной 10 плиток). Но в моей игре я использую areaX и areaY номер, который используется на земле. И я использую высоту , чтобы сохранить высоту элемента, что является значением z. (z axiz в моем мире, ось y на экране).Изометрический рендеринг без плиток, является ли эта цель достижимой?
Проблема трудно объяснить. Речь идет о сортировке глубины. Смотрите следующее изображение:
Коричневый бар на верхней части другой панели должны быть после того, как серый столб. Теперь я использую простейшую форму алгоритма художника, которая сравнивает только координаты x, y, z каждого элемента. Я знаю, что этот неправильный перевод является известной проблемой алгоритма художника. Если это была черепичная игра, бары можно было разделить на две плитки рядом друг с другом. Затем плитки можно нарисовать в порядке их глубины.
Но поскольку я пытаюсь создать его без плиток, я ищу действительно сложную логику.
Элементы должны отображаться так, как если бы они были трехмерными объектами. Я даже хотел бы иметь следующее поведение: Если несколько элементов пересекались бы, то видимые пиксели каждого элемента должны быть сделаны, как на этом снимке:
Основная проблема не в том, что нет информации определить, какие части изображения должны быть видны, и как их нужно разрезать. Я мог бы создать маску глубины для каждого изображения, например:
Он работает немного как z-буфер.
Но это невозможно из-за производительности холста, потому что вы должны перебирать буквально по каждому пикселю каждого изображения на карте. И второй большой недостаток заключается в том, что вам приходится загружать вдвое больше ресурсов с сервера ...
Другим решением может быть разрезание всех изображений на вертикальные полосы шириной 1 пиксель. Затем обрабатывайте каждую полосу так, как будто это плитка размером 1x1 пиксель. Затем я все еще создаю черепичную игру, покупаю плитки настолько маленькими, что я до сих пор достигаю своей цели. Но и это решение имеет недостаток производительности ... Поскольку каждое изображение будет разделено на сотни полос, которые являются новыми отдельными изображениями.
Так что я ищу сложное решение. Кто может помочь мне найти способ определить глубину (или области глубины) для изображений таким образом, чтобы правильный рендеринг был возможен для выполнения холста?
дерева с использованием three.js или WebGL – mike510a
я должен был бы согласиться. Попробуйте трехпротонов. Пример: http://jeromeetienne.github.io/threex.colliders/examples/basic.html – rassar
Вы можете получить разумную производительность из 2D-холста для истинной 3D-изометрии, но вы застряли в сортировке глубины, которая может быть болью , Сортировка стандартного массива javascript может сделать разумную сортировку, если вы являетесь клипером в том, как вы упорядочиваете объекты (сортировать группы отсортированных полигонов). Чтобы разрешить перекрывающиеся полигоны, вам нужно срезать многоугольники, где они перехватывают. Этот тест может быть медленным, но опять же, регионы группировки помогут. Вы получите в реальном времени, если ваши полины выровнены по оси. Как только вы уходите с оси, он замедляется. Я дал в пользу webGL, что это для 3D – Blindman67