Войти
ПрограммированиеФорум2D графика и изометрия

[2.5D изометрия] Постепенное скрытие объектов, выходящих за границы поля

#0
0:01, 27 сен. 2016

Здравствуйте.

Столкнулся со следующей проблемой, нужна помощь опытных разработчиков игр.

Tile-border | [2.5D изометрия] Постепенное скрытие объектов, выходящих за границы поля

Имеется изометрическое поле состоящие из одного большого тайла на экране пользователя и некий объект(ы), которые движутся по этому полю.
При пересечении границы тайла, объект начитает скрываться настолько, насколько он вышел за границу игрового поля.

Т.к. это только закос под 3d, то на самом деле объект представляет из себя (в данном случае) шестиугольник, который "режется" плоскостью границы видимости которая на самом деле, двухмерная фигура по форме напоминающая знак "<", и которая накладывается на этот самый шестиугольник и при движении, с каждым тиком расчитывающаяся с новыми размерами, создавая тем самым иллюзию трехмерного скрытия объекта.

Вопрос как рассчитывать вот эту самую режущую плоскость, но для сложных объектов (например здание, или дерево), учитывая что это скорее всего будут 3d модели сконвертированные в 2d спрайт с изометрической точки зрения.
Объекты на игровом поле будут примерно как на картинке ниже (да, я знаю, что это 3d модель).
Изображение

На ум только приходит при подготовке спрайта из модели заранее обсчитывать все возможные плоскости "срезов" модели, а при пересечении границы при движении просто включать нужную маску-срез для спрайта, чтобы создать иллюзию трехмерно появляющегося из-за границы видимости объекта.

Буду благодарен за ссылки где можно почитать про расчеты по данной теме, возможно все уже придумали до меня, а я просто называю вещи не теми именами.


#1
1:36, 27 сен. 2016

NXTaar
> заранее обсчитывать все возможные плоскости "срезов" модели
А по другому никак. Замени в своей картинке куб на цилиндр, сферу, пирамиду - форма пересечения с границей зависит только от 3d формы, информации о которой рендеру взять негде.
Как вариант создать не 100500 масок на один объект, а одну, где насыщеность цвета показывает уровень среза на текущем шаге. Или, если для спрайтов используется rgba8888, то стащить по биту у каждого канала - так можно 16 сечений сохранить, цвета практически не пострадают и дополнительных масок не надо.

#2
2:59, 27 сен. 2016

Olaf85
> Как вариант создать не 100500 масок на один объект, а одну, где насыщеность
> цвета показывает уровень среза на текущем шаге.
Уровень среза = глубина пикселя.
Т.е. при рендеренге 3д объекта кроме RGBA нужно ещё Z-buffer утащить в отдельный файл.
И при выводе уже использовать его значения как маску

но если не все спрайты их 3д делаются, то придёться руками поработать.

Olaf85
> Или, если для спрайтов используется rgba8888, то стащить по биту у каждого
> канала - так можно 16 сечений сохранить, цвета практически не пострадают и
> дополнительных масок не надо.
жалко краски! :)

#3
17:58, 29 сен. 2016

Olaf85, skalogryz, спасибо большое за советы.

skalogryz
> Уровень среза = глубина пикселя.
> Т.е. при рендеренге 3д объекта кроме RGBA нужно ещё Z-buffer утащить в
> отдельный файл.
> И при выводе уже использовать его значения как маску

Здесь хочется понять по-подробней, что имеется ввиду, ввиду особенности платформы.
Игра будет на html5 (WebGL/canvas) с фреймворком pixi.js, поэтому насколько я знаю, прямого доступа к работе с цветами, у меня не будет.

#4
19:17, 29 сен. 2016

Используй Z-Buffer в своей игре, даже если ты используешь спрайты. То есть рендери не только спрайт, но и его глубину, а затем рисуй эту глубину на буффере глубины в игре. Так ты сможешь добиться объемности. Я даже видел где-то видос на ютубе, где человек со своим РПГ-движком такое делал. Интересный метод, на самом деле. Больше ничего порекомендовать на этот счет не могу.

#5
19:58, 29 сен. 2016

Задача для 2д нетривиальная. Либо бросить страдать ерундой, либо делать все в настоящем 3д.

#6
2:17, 30 сен. 2016

Можно в дополнение к каждому спрайту ещё сгенерить картинку, где RGB будут кодировать позиции пикселя в пространстве модели, а потом в шейдере по ней считать альфу.
По-моему, это проще, чем тащить туда z-буфер.

#7
2:36, 30 сен. 2016

BUzer
ну не для каждого пикселя а для спрайта генерить отдельный слой текстурных координат xyz в пределах (0..1) по которым будет считаться маска - выходя за пределы будет прозрачной.
Вообще проще сделать 3D в ортогональной проекции, а в шейдере вычислять маску по координатам вершин.

#8
2:43, 30 сен. 2016

foxes
Ну мы, наверное, об одном и том же, только разными словами.

> Вообще проще сделать 3D в ортогональной проекции
Может быть и проще, но не красивее. На спрайтах-то и антиальязинг сразу будет, и пререндеренное освещение с АО и прочими в 3д пакете получится лучше.

#9
9:31, 28 ноя. 2016

1. Завести текстуру1 размером с окно, в которую нарисовать маску отсечения.
2. Отрендерить сцену в текстуру2.
3. Отрендерить на экран текстура1 * текстура2.

#10
9:36, 28 ноя. 2016

youtube я жму на твой ник и не вижу кина !
Ютуб сломался ?! :)

#11
11:18, 28 ноя. 2016

ronniko
У тебя с головой хорошо всё?

ПрограммированиеФорум2D графика и изометрия

Тема в архиве.