Pixonic
15 222

Проработка окружения в геймдеве: собираем первую игровую сцену

Финальная статья из цикла «Арт» для начинающих разработчиков — наполняем деталями локации и полируем сцены.

В закладки

Автор: Александр Новиков. По образованию программист, но в геймдев попал как концепт-художник. Потом переучился на 3D-художника и пришел в Pixonic. Работал над War Robots и другими проектами компании. Стал техлидом, и сейчас занимается прототипами игр.

В предыдущей статье о 3D-моделировании мы учились создавать уникальные внутриигровые объекты. Разобравшись с принципами создания арта, можно заменять им «серые кубики» из прототипа, чтобы потихоньку готовиться к первому релизу. Следующий этап — объединить объекты в одну сцену.

В конце статьи — последнее в этом цикле домашнее задание для конкурса работ. Выполните его, чтобы выиграть лимитированное издание Kingdom Hearts III PS4 Pro Bundle и прокачать скилл геймдизайнера.

Один из концептов карты для War Robots

Чего хочет любой (ну почти) игрок от новой игры? Увидеть неизведанный мир, изучить его, проникнуться атмосферой. При этом атмосфера складывается из массы деталей, некоторые из которых в процессе игры мы даже не осознаем.

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

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

Rise of the Tomb Raider

Пройдитесь по сцене — нет ли там слишком длинных и однообразных маршрутов, не кажется ли сцена слишком «пустой» местами?

Проработка окружения. Обратите внимание, какими предметами заполнены сцены в хорроре Alien Isolation. Трубы, решётки, дым, который отбрасывает пугающие тени от правильно расположенного источника света — всё это создаёт атмосферу страха, даже когда рядом нет противника.

Alien Isolation

Можно было бы поставить вместо решеток обычные стены, а источник света повесить под потолок. Или просто убрать все трубы и решетки. Окружающее пространство стало бы свободнее и лучше освещалось. Но страшно бы не было.

Ещё раз вернитесь к сеттингу и жанру игры, к мудбордам и референсам — обратите внимание на мелкие детали. Задумайтесь, передаёт ли ваша локация нужную атмосферу.

Акценты. Ещё одна задача при разработке игры — расставить акценты. Ключевые элементы геймплея должны быть выделены, а фон не должен отвлекать внимание от процесса.

Например, важнее сначала разглядеть цель и противников, а не лежащий на полу лут. А факелы в подземелье, которые можно зажечь, должны быть видны даже в темноте. Всё это — акценты, чтобы визуальная информация помогала лучше ориентировался в мире игры.

Titanfall 2

Может показаться, что все элементы и объекты на скриншоте выше расставлены незамысловато. Но присмотритесь — маркер цели отлично читается на общем фоне, хотя это просто элемент UI. Общий фон не забирает на себя много внимания — он приглушен туманом и имеет минимальную контрастность. Ближний фон, наоборот, весьма контрастный. А ёлки, камни и платформа показывают понятный игроку путь до цели.

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

Свет. Он должен гармонично подчёркивать интерактивные детали на сцене. Кроме того, в играх свет часто устанавливается так, чтобы показывать дальнейший путь главного героя, как бы намекая куда двигаться дальше. Это работает, даже если игрок не осознаёт этого.

Uncharted 4: A Thief's End. Прожектор «удачно» освещает открытое окно, куда можно залезть

Ещё одна хорошая практика — детальнее продумывать светлые участки на уровне. Их стоит внимательно детализировать, наполняя интересными объектами. Участки в тени не требуют такой глубокой проработки и это может быть хорошим лайфхаком для инди-проекта с ограниченными ресурсами.

Inside. Пример минимализма в графике с потрясающей атмосферой

Обратите внимание на все интерактивные объекты на сцене — они должны быть отличимы от остальных. Стоит также прикинуть, что будет, если игрок не заметит их и просто пройдёт мимо.

Лаконичность. Не менее сложным бывает вовремя остановиться и не перегружать игровую сцену деталями. Когда объектов слишком много, игрок быстро устает от картинки.

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

Где брать вдохновение

Осталось понять, чем наполнить сцену, чтобы создать правильное настроение. Во-первых, есть общие рекомендации использования цветов. Во-вторых, вдохновение можно черпать из фильмов и других игр этого жанра.

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

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

Alien Isolation

Для закрепления атмосферы и дополнительного акцентирования внимания на коридоре тут использованы жёлтые лампочки, которые хорошо сочетаются с общим зелёным оттенком. Лампы на потолке задают направление взгляда игрока, а затемнение по углам, так называемый эффект виньетки (vignette), придаёт сцене кинематографический вид.

Плейтест и полировка

Тестировать сцены и левел-дизайн так же важно, как идеи, механики и визуал. Для независимых разработчиков варианты собрать фидбек остаются теми же, что и в прошлых статьях: дать поиграть билд друзьям; завести свой YouTube-канал или странички в соцсетях, чтобы делиться ходом разработки и собирать комментарии; создать Discord-канал (или поискать чужие — там сидит много энтузиастов). Много фидбека можно собрать на Reddit, если не пугает английский, или на DTF.

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

Также стоит проверить коллизии на всех объектах, чтобы игрок не смог попасть за пределы сцены. Коллизия — это упрощённая геометрия объекта, которая позволяет взаимодействовать с другими объектами: столкновения, выстрелы, навигация ИИ (противники должны обходить объекты с коллизией) и прочее. Например, если отключить коллизию в 3D-шутере, игрок просто провалится под землю — персонаж и поверхность не будут взаимодействовать, то есть сталкиваться.

Если в игре не используется освещение в реальном времени, обратите внимание на оптимизацию лайтмэпов — текстур, в которых хранится информация по освещению на сцене. Любой объект на сцене занимает в лайтмэпе своё UV-пространство, и совсем не круто, если незаметный камень заполнит четверть всей текстуры. Чем меньше места останется на лайтмэпе для значимых объектов, тем хуже на них запечётся освещение. Количество лайтмэп-текстур в игре ограничено, так что их надо использовать аккуратно.

Чтобы настроить лайтмэпы в Unity, раскройте вкладку Lightmaps в инспекторе объекта и нажмите на текстуре Open Preview. Откроется окно с общим лайтмэпом сцены, где жёлтым будет обозначен ваш пропс. Сразу видно, сколько места он занимает относительно других объектов.

Если встречаются артефакты в освещении или тенях, обязательно проверьте, что у объектов достаточно разрешения в лайтмэп-текстуре. В Unity за это отвечает параметр Scale In Lightmap. Дефолтное значение 1, а для малозаметных объектов можно поставить значение 0.5. Иногда, наоборот, приходится увеличивать это значение, когда свет запекается некорректно.

Здесь, подняв значение Scale In Lightmap c 1 до 1,6, мне удалось избавиться от «чёрного» камня после перепекания лайтмэпа.

После оптимизации ассетов, обратите внимание, чтобы не осталось белых засветов и полностью черных теней — это первые признаки несбалансированной картинки. В большинстве случаев объекты должны «читаться» даже в тени. Если какое-то пространство просто «залито» чёрным цветом, глаз воспринимает это как «провал» в окружении, как на примере с камнем выше.

Конечно, бывают исключения, особенно в 2D и инди-проектах. Всё зависит от вашего замысла.

Unepic. Темно, но тут своя атмосфера

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

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

Подготовка к релизу

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

Настраивать билды для мобильных платформ внутри движка лучше в начале или середине разработки, чтобы ошибки с компрессией текстур всплывали на ранних тестах. Но в процессе разработки не всегда получается настроить всё вовремя, поэтому перед финальным релизом необходимо пробежаться по контенту и всё проверить. Будет плохо, если где-то заваляется текстура маленького кристалла в разрешении 2k, а размер билда при этом вырастет на 5–10 Мбайт.

Конкурс

Итак, финальное задание на этот цикл, а приз — лимитированное издание Kingdom Hearts III PS4 Pro Bundle. Если вы уже выполнили задания из предыдущих статей, то будет совсем просто. Нужно вспомнить всё, что мы уже проходили, и собрать выполненные задания в одном письме:

  1. Опишите визуальную стилистику своего проекта и перечислите ваших ближайших «конкурентов». Сделайте мудборд. Здесь поможет первая статья цикла.
  2. Добавьте к письму уникальный концепт-арт или простой скетч любого объекта, персонажа или локации из игры. К концепту приложите ТЗ, по которому он рисовался. Это тема второй статьи.
  3. Покажите законченный 2D или 3D-объект, сделанный по концепту (можно скриншотами или роликом на YouTube). Говорили об этом в третьей статье.
  4. Дополнительный балл за собранную игровую сцену со своими оригинальными объектами. Тоже можно записать видеоролик.

Приём работ закроется 7 апреля в 23:00 по МСК — присылайте их на kojima@pixonic.com. В середине апреля выпустим материал с итогами, подарим консоль и пойдём дальше — впереди цикл про маркетинг для инди-разработчиков. Будет интересно.

Эта статья — часть нашего большого проекта с vc.ru. Если выполнять все задания, можно — ни много ни мало — научиться делать видеоигры. И выиграть PS4 Pro в конце каждого цикла статей.

Узнать правила
{ "author_name": "Pixonic", "author_type": "editor", "tags": [], "comments": 4, "likes": 23, "favorites": 17, "is_advertisement": false, "subsite_label": "pixonic", "id": 62343, "is_wide": true, "is_ugc": false, "date": "Tue, 26 Mar 2019 14:31:48 +0300" }
{ "id": 62343, "author_id": 181238, "diff_limit": 1000, "urls": {"diff":"\/comments\/62343\/get","add":"\/comments\/62343\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/62343"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 181238, "last_count_and_date": null }

4 комментария 4 комм.

Популярные

По порядку

5

Сразу и не понял что попал не на дтф

Ответить
3

Точно VC подходит для такой статьи?

Ответить
0

а что по конкурсу с прототипом игры? приз дошел до победителя?)
я про вот этот - https://vc.ru/pixonic/51306-ue4-guide

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }