Pixonic
11 112

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

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

В закладки

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

Два из четырех циклов совместного с vc.ru проекта «Пора создать свою первую игру» закончились — сегодня стартует третий, который посвящен арту. Мы говорили о геймдизайне, бумажном прототипировании и первых шагах в написании кода для игры, а теперь поработаем над визуальным обликом прототипа.

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

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

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

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

Стилистика

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

  1. Стиль. Например, реализм, мультяшность или примитивизм.
  2. Сеттинг. Фэнтези, милитари, sci-fi и так далее.
Overwatch — мультяшность в sci-fi сеттинге

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

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

Также полезным будет собрать референсы из игр и фильмов, а также цветовые гаммы. Ещё это называется мудборд (moodboard), его цель — передать общее настроение и цвета стилистики.

Случайный мудборд из интернета

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

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

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

Следующий приём часто применяется в инди-проектах: если прототип имеет выраженную идею синглплеера с упором на атмосферу и историю, подойдёт контрастное сочетание цветов.

Обратите внимание, как черно-белый арт в платформере Limbo создаёт тревожное настроение

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

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

«Поиски» облика Подрывника из Team Fortress 2. Только последний в итоге попал в игру

Ассеты

Контент любой стилистики широко представлен на маркетплейсах популярных движков, к примеру, UE4 Marketplace и Unity Asset Store. После того, как подходящие ассеты найдены, разделите их на три категории: пропсы (от англ. props — небольшие объекты для наполнения локации: бочки, камни, стулья и так далее), персонажи и эффекты.

Нужна физика? Загляните в соответствующие паки, что сильно сократит время на разработку. Часто качество контента из магазинов ниже среднего, поэтому заранее выделите время на оптимизацию и доработку ассетов.

Если говорить о 3D-моделях, первым делом нужно проверить плотность сетки (количество треугольников в модели) и разрешение текстур, чтобы понять, что из этого придётся оптимизировать.

Текстуры можно сжать сразу, а геометрией заняться позже, так это занимает больше времени. Например, на ПК в сингплеере текстуры могут быть в разрешении 4K, но для мобильных игр больше 1024 (а еще чаще 512) не требуется, поэтому можно смело жать вдвое. Это, кстати, делается при помощи action в Photoshop сразу на всю папку с текстурами. Там всё просто, найти туториал не составит труда.

Покупать стоит только самый необходимый контент. Достаточно узнаваемых объектов в одной стилистике — это поможет создать визуальную атмосферу.

Один из платных ассетов для Unity — целый набор готового low-poly-оружия. Вместе с ним можно найти и другие низкополигональные модели персонажей, транспорта и окружения

Кстати, на днях на сайте 80 level опубликовали подборку свежих и очень крутых ассетов для Unity, взгляните.

Моделлинг

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

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

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

В основном это касается настройки террейна в движке, освещения и технических характеристик мешей, материалов и текстур, отслеживание полигонажа на сцене.

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

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

Свет

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

Драма в освещении, красивые свет и тени — всё это создаёт атмосферу, на которую игрок обратит внимание в первую очередь. От этого очень зависит первое впечатление. Карта, собранная из кубов, но с настроенным освещением уже может смотреться хорошо — это видно на примере игры Q.U.B.E: Director's Cut.

Интерфейс

UI прототипа должен быть предельно понятным и читаемым, с минимальным количество переходов по экранам. Чем быстрее игрок попадает в игру, тем лучше.

Hearthstone для мобильных платформ. Сразу хочется нажать Play, но видно, что это не единственная опция

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

Фейковая мета

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

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

Домашнее задание

Всё как всегда — выполняете задания в конце каждой статьи, а по окончанию цикла показываете результат, чтобы выиграть PS4 Pro. Задание на сегодня:

  • Определите стилистику проекта. Изучите «конкурентов» и референсы. Вспомните, кто ваша ЦА. Подумайте, какие цвета наилучшим образом передадут атмосферу игры.
  • Сделайте мудборд. Включите туда цветовую палитру (пригодится инструмент «пипетка»), фотографии, кадры из фильмов и скриншоты из игр, формирующие целостное впечатление о стилистике. Соберите всё это в одно изображение.
Мудборд для стратегии. В целом отражает направление — яркие насыщенные цвета и мягкое спокойное освещение, выраженный sci-fi сеттинг, футуризм

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

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

{ "author_name": "Pixonic", "author_type": "editor", "tags": [], "comments": 11, "likes": 33, "favorites": 50, "is_advertisement": false, "subsite_label": "pixonic", "id": 55673, "is_wide": true, "is_ugc": false, "date": "Thu, 17 Jan 2019 11:51:37 +0300", "is_special": false }
Объявление на vc.ru
Торговля
Как мы вместе с «Магнитом» перевели 2200 работников на «удалёнку»
Рассказ о самом крупном внедрении на мобильной платформе «1С» в российской рознице.
0
{ "id": 55673, "author_id": 181238, "diff_limit": 1000, "urls": {"diff":"\/comments\/55673\/get","add":"\/comments\/55673\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/55673"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 181238, "last_count_and_date": null }
11 комментариев
Популярные
По порядку
Написать комментарий...
2

Отличная статья, спасибо.

Ответить
0

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

Ответить
0

Спасибо за рекомендацию! Я читаю по подписке в майбуке, в тг скину ссылку

Ответить
0

Вот мы выполняем каждое задание из цикла, а куда их выкладывать, как вам продемонстрировать наработки и таким образом поучаствовать в конкурсе?

Ответить
0

Привет! В последней статье каждого цикла мы публикуем итоговое задание и почту, на которую присылать работы)

Ответить

Комментарий удален

0

Выглядит занятно. Будем заценивать. )

Ответить
0

Полезная статья, почерпнул для себя пару интересных моментов, о которых ранее не задумывался.

Ответить
0

"Если разработка ведётся на мобильных платформах, у всех кнопок должна быть достаточно большая зона чувствительности, чтобы по ним можно было попасть пальцем." - Да ты что, чувак?! )) А кто у вас там UI для War Robots пилил? Игре 5 лет, а до сих пор по кнопкам приходится тыкать по 10 раз.. Ощущение, что там коллайдер еще меньше кнопки.

Ответить
0

"Карта, собранная из кубов, но с настроенным освещением уже может смотреться хорошо — это видно на примере игры Q.U.B.E: Director's Cut."
Свет это хорошо, но только в примере кроме света проведена работа с материалами, добавлены отражения, постэффекты.

Ответить
{ "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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }