Хитрости в разработке игрового арта #2 Окна

Учитывая результаты последнего опроса, публикую продолжение рубрики "Хитрости в разработке игрового арта".

Поговорим о создании фейковых интерьеров в играх.

Другие части:

Приятного чтения!

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Не сочтите за странность, но я очень люблю окна, так что позвольте мне показать вам самые классные экземпляры, которые я когда либо видел в играх.

Я уже разбирал ранее то, как создали эффект присутствия помещений за окном в Assassins Creed 3 в прошлой статье, но я всё таки напомню вам основные моменты. Вот так это выглядит в игре:

Интерьер тут создается с помощью размытой текстуры, которая тайлится и двигается с помощью Bump Offset Mapping, чтобы зафейкать параллакс..по крайней мере я так думаю.

Этот способ хорошо подходит для Assassins Creed 3, он придает стеклу матово молочный вид, что соответствует тому времени, в котором происходит игра, но существует ещё много других способов достичь лучшего результата и именно о них речь пойдет в этой статье.

Saints Row - безумная игра. В ней даже окна безумные(в хорошем смысле). В них используется схожая с Assassins Creed 3 техника, но в данном случае вместо мыльных текстур используются четкие. Я и подумать не мог, что это может работать так хорошо:

Давайте разберемся. Что вы видите в ночной версии текстуры парикмахерской? Вам не кажется что что-то пропало? Точно, плакаты!

Они накладываются отдельно поверх окон. Ниже вы можете видеть текстуру плакатов:

Какие-то подозрения появляются только если посмотреть на всё это дело под определенным углом:

Также хорошо то, как незаметно тайлится текстура, создавая в месте перехода тайла угол комнаты. Выглядит вполне правдоподобно. Ниже вы можете видеть демонстрацию этого эффекта:

Вот тоже самое в самой игре:

С Saints Row пока что всё, давайте посетим Bioshock.

Как по мне, так это самый продвинутый способ создание окон в играх. Что вы видите тут?:

На первый взгляд это простая деревянная комнатка, в которую поставили парочку объектов для создания лучшего параллакс эффекта, верно? Но давайте посмотрим внимательней:

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

Если бы это место создали таким образом, который я описал выше, получили бы мы такой эффект? Нет.

Если кратко, то это ещё один безумный трюк с использованием шейдеров. Я порылся в файлах игры и нашел ту самую текстуру, которую использовали для создания этой витрины:

Я не уверен насчет предназначения каналов(для создания карты нормалей вроде этой нужно всего два канала, так что остальные, похоже, отвечают за эффект искажение для стекла), но красный канал выделяет зону, в которой находится фигурка орла, которая выполнена с помощью спрайта. Вот так выглядит фактическая текстура, которая регулируется с помощью тех каналов выше:

Постойте, но ведь область с орлом движется быстрее, чем те игрушки на фоне, разве не должно быть какого-то разрыва между ними? Это ведь тоже самое, как когда ты вырезаешь и перетаскиваешь какой-то объект в фотошопе, на его месте остается пустое место, которое нужно чем-то заполнить...именно для это существует вторая текстура:

Кроме того, что мы уже разобрали, можно обратить внимание ещё на две интересные вещи:

1. Если посмотреть на гифку ниже, можно заметить, что у стекла есть что-то вроде общего отражения(если попробовать рассмотреть стекло под определенным углом, то можно заметить, что это просто какое-то голубоватое отражение). По-моему это хороший способ чтобы:

а) сделать стекло более реалистичным

б) избежать всех этих искажений, которые мы могли видеть в SR3

2.Ниже можно увидеть как спрайты игрушек поворачиваются вслед за нами:

Итак, мы только что увидели очень классный шейдер, который создали волшебниками в области кода...но зачем вся эта морока? Почему нельзя было использовать обычный шейдер для стекла, а всё остальное создать с помощью геометрии? Я уверен, что правильных ответов больше, но вот две главные причины по моему мнению:

Создание такого шейдера с помощью кода экономит очень много времени в сравнении с созданием того же самого с помощью более традиционных м��тодов, особенно если речь зайдет о внесении каких-то глобальных изменений в готовый ассет.
Прозрачность. Если вы используете обычный шейдер стекла, то нужно учитывать, что на его рендер будет уходить много ресурсов, а также, в местах использования прозрачности могут возникнуть артефакты(особенно при взаимодействии с туманом, примеры можно найти тут). Я не знаю насколько дешевле вышел шейдер в Bioshock, но, по крайней мере, при его использовании не нужно решать типичные для шейдера стекла проблемы.

Если вы хотите высказать свои домыслы автору оригинальной стать, вот его мыло и Twitter.

Оригинал тут

Доп материалы:

Можете посмотреть тред на Polycount про шейдер интерьеров для Unity.

2. Техника создания интерьеров, которая использовалась в SimCity 5

3. А ещё вот такая штука:

Советую заглянуть на страницу оригинальной статьи, там немного больше информации.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Чтобы видеть переводы раньше всех - подписывайтесь на телеграм канал - https://t.me/CGTranslate

Все советы, предложения и критику пишите в мою личку телеграма @DenisNik или на почту [email protected]

Перевод был подготовлен в рамках проекта CgTranslate.

Спасибо за внимание и удачи!