Как рисовать тайлы в фотошопе
Andrew Harrington показывает процесс создания стилизованной тайловой текстуры при помощи ZBrush, Photoshop, и Substance Painter.
Эй, всем привет! Меня зовут Эндрю Харрингтон, и я ведущий художник по окружению. За время проведенное в индустрии я успел проработал во многих студиях. Учился и находился под влиянием у сотен людей. В этой статье я надеюсь поделиться некоторыми своими знаниями и процессом создания стилизованных текстур для окружения. В частности, я шаг за шагом разберу процесс создания следующей бесшовной текстуры.
Мой первый шаг при создании любой текстуры окружения — это либо нарисовать ее в Photoshop, либо сделать плоский блокинг геометрии в 3ds Max или Maya. Если я рисую текстуру в Photoshop, то обязательно позабочусь о том, чтобы она была бесшовной.А затем использую ее в качестве ориентира, чтобы сделать плоский блокинг. Обычно я работаю на плоскости 8m х 8m, потому что в большинстве случаев она обеспечивает соответствующую плотность текселей для использования в игре. Это разрешение позволяет лучше судить о детализации в текстуре в сравнении с размером персонажа.
После блокинга я решаю, какие части будут перекрываться, для обеспечения бесшовности. Обычно я работаю справа налево, а затем сверху вниз. Правый верхний кусок становится «краеугольным».
Теперь, когда я разобрался с тайлом, пришло время экструдить края каждого блока, чтобы у меня были фаски для скульпта. Важно отметить, что я не делаю экструд края ровно под углом в 90 градусов, а «раздуваю» их, чтобы они перекрывали края блоков. Это гарантирует, что я не получу никакого негативного пространства при добавлении деталей на фаски, и лучше буду контролировать края.
В конце я создаю плоскость размером 8m х 8m и центрирую ее позади моего блокинга. Это будет низкополигональная плоскость, на которую я проецирую свою высокополигональную сетку при запекании текстуры. Это также поможет мне в ZBrush, когда будет нужно сделать тайл сабтулов.
Наконец, все, включая плоскость 8×8, экспортируется в ZBrush одним .obj.
Базовая модель, экспортируемая в Zbrush – один целый кусок. Я хочу, чтобы каждый элемент был разбит на отдельный сабтул, чтобы я мог работать индивидуально над каждым из них и добавлять сабдивы без ущерба для производительности.
Сначала я использую функцию «Auto Group» на вкладке «Polygroup». Каждый элемент получает свою собственную Group ID, что позволит разделить их на сабтулы.
Во вкладке «Subtool» нажимаю «Groups Split» для разделения на отдельные сабтулы. Затем я применяю DynaMesh для ретопологии сабтулов,делаю 4-5 дивайдов. Это должно обеспечить достаточное разрешение для добавления хорошей детализации.
Существует много способов добавления детализации на поверхности, которые придадут им стилизованный вид. Основная цель, которую я преследую при добавлении деталей — дать достаточно информации, для понимания из какого материала сделан объект, но не слишком много, чтобы избежать лишнего «шума». Как говорил мне один из моих арт-директоров: «Иногда меньше значит больше». В данном случае я использовал метод добавления множества деталей, с дальнейшим удалением лишнего. Я начал с кисти ClayBuildup, чтобы добавить детали, а затем использовал Planer Brush, чтобы убрать их.
Примечание: использование квадратной альфы с Planer Brush даст вам хорошие острые края. Затем используется кисть TrimSmoothBorder для большей конкретизации.
Этот метод хорошо работает, поскольку дает чистую поверхность с намеками на детали. Я повторяю этот метод для остальных сабтулов. Как только вы сделаете это несколько раз, процесс пойдет довольно быстро. Я обязательно уделяю особое внимание краям блоков, чтобы у них было много углов, и они давали больше глубины. Без них текстура будет выглядеть довольно плоско. Также постоянно стоит проверять общий вид текстуры под прямым углом к камере, так как она будет выглядеть при запекании.
После того, как сделан скульпт всех сабтулов, я хочу добавить немного вариаций их вращения и глубины, чтобы придать текстуре дополнительный слой. Я делаю это лишь для некоторых сабтулов. Если бы я сделал это для всех элементов, это выглядело бы довольно неорганизованно. Изменения помогают уменьшить эффект повторяющихся элементов, когда текстура тайловая.
На этом этапе я готов выложить свою текстуру в ZBrush в плоскости 2.5D.
Первое, что я делаю, когда готовлюсь сделать бесшовной геометрию в ZBrush — проверяю, чтобы размер моего документа соответствовал размеру будущей текстуры. Я делаю это для карты высот с корректным размером в 2.5D. В разделе «Document» я установил размер 2048 × 2048.
Затем я рисую Ztool на холсте и выбираю сабтул с плоскостью 8×8, который я экспортировал из Max с базовой геометрией. Выбрав его, я проверяю, чтобы Dynamic Perspective была выключена и размещаю сабтул в кадре. ZBrush будет кадрироваться в соответствии с любым выбранным вами сабтулом, поэтому я использовал плоскость. Таким образом, мой Ztool идеально вписывается в размер документа.
С кадрированным Ztool я теперь могу дублировать сабтулы по краям, а затем сделать офсет по сторонам. Если смещения не идеальны по пикселям, это нормально, я исправлю швы на следующем шаге.
Затем я перехожу в режим 2.5D. Вы можете прокрутить текстуру, удерживая тильду (`). Либо можете более точно сместить холст, перейдя на вкладку «Layer» и отрегулировав ползунки «Displace Н» и «Displace V».
Так как я знаю, что мой холст имеет размер 2048 × 2048, то если я смещу H и V на 1024 × 1024, все швы будут в центре холста.
Когда шов размещен посередине я «захватываю» карту высот холста с помощью инструмента «RGBZGrabber» в разделе «SimpleBrush», а затем очищаю холст, нажав «Ctrl + N».
Базовая плоскость 8х8 будет использована как высокополигональный мэш для дисплейса геометрии на основе только что полученной карты высот. Разрешение базовой плоскости увеличено до примерно до 4 миллионов точек при помощи дивайдов, но без сглаживания.
Карта высот назначается как «Current Alpha», в параметрах маскирования применяется «Mask by Alpha». Альфа-маска проецируется на мою плоскость 8х8m.
Во вкладке Deformation Options настраивается офсет геометрии. Обычно я корректирую смещение только до 5 или 6, поскольку не хочу сверхсильного смещения.
Теперь я могу очистить маску и отполировать швы. Я буду повторять шаги в режиме 2.5D, пока швы не будут полностью удалены. Как только это будет сделано, я экспортирую геометрию в качестве моей высокополигональной модели и буду использовать исходную плоскость 8mx8m в качестве моей низкополигональной для запекания.
Для меня процесс текстурирования — это этап, на котором я, вероятно, трачу наименьшее количество времени. Мне нравится сохранять вещи довольно простыми при работе со стилизованными формами, так как я считаю, что это делает их более читабельными в игре.
В ходе текстурирования я предпочитаю сохранять все упорядоченным и для этого использую устаревший плагин DDO для Photoshop для организации слоев. Я загружаю только базовую карту нормалей в плагин и заменяю карты AO и Curvature.
Когда все базовые слои настроены с помощью запеченных текстур, я заполняю различные элементы моей текстуры сплошным цветом, близким к цвету, который я ищу.
Крайне важно то, что я устанавливаю все свои значения цвета для работы с Linear Rendering (Unreal Engine 4, CryEngine, Marmoset и т. Д.). В Liner Rendering среднее значение серого цвета (в RGB — пер.) не 127/127/127, а больше похоже на 187/187/187. Слишком часто я вижу слишком темные текстуры, которые нужно компенсировать, подавляя освещение в сцене. Темная текстура плохо воспринимает свет, поэтому окажите себе услугу и сохраняйте цветовые диапазоны в верхних значениях.
Пришло время наложить несколько мазков и тонких цветовых вариаций. Для этого я беру простую кисть с узором. В свойствах кисти я включаю настройки Color Dynamics, отключаю «Apply Per Tip» и задаю небольшие значения для оттенка, насыщенности и яркости. Теперь каждый раз, когда я делаю мазок кисти, он выбирает цвет в пределах диапазона.
Еще одна вещь, которую стоит отметить — я проверяю, чтобы flow и opacity кисти были установлены на 50%. Таким образом, я могу получать разные цвета.
Затем я накладываю некоторые более мелкие детали и играю с различными цветовыми вариациями, используя настройки слоя.
Последний шаг — использовать полученный результат в качестве текстуры основного цвета в Substance Painter, наложить некоторые эффекты и сгенерировать карты «Metall/ Roughness». В Painter я стараюсь все делать просто, так как я не хочу добавлять «шумы». Мне нужно лишь добавить немного гранжа и слегка детализировать карту Roughness. Мне нравится использовать «Bone Stylized» для этой цели, а затем добавлять немного цвета на карту грязи AO, чтобы поиграть с ней. Вот, наверно, и все. Как я уже говорил, иногда меньше значит больше.
Я использую довольно простые настройки рендера в Marmoset. Используется трехточечный источник света, настроенный с помощью Child Lights на одной из Enviornment-карт. Поскольку при текстурировании я использовал высокие диапазоны в значениях цвета, я могу получить гораздо больше от освещения, не увеличивая его. Как уже было сказано, очень важно использовать правильные значения цвета.
"Дизайн уровней – не совсем моя специальность, и у каждого свои взгляды на данную тему, но вот вам несколько мыслей, которыми я обычно руководствуюсь. Это никоим образом не правила, всего лишь идеи.
Для меня, самое веселое в игре – это Обучение. Поэтому каждый раз, когда я добавлю что-то в свои уровни, я спрашиваю себя «Чему я хочу обучить игрока?» и «Что я требую от игрока?».
Еще один важный аспект – это Темп. Я стараюсь создавать безопасные зоны или давать игроку мощные улучшения после сложных фрагментов игры, чтобы у игрока было время перевести дыхание и испытать новые штуки. На рисунке это обозначено ложбинкой, и она очень помогает создать ощущение «усложнения» игры, хотя на самом деле игра становится не так уж и труднее." - Saint11.
Разблокирован новый персонаж художник: Henk Nieborg!
Он немногословен, его руководства напоминают обучение рисованию совы, а количество "й" в конечном тексте сводит меня с ума, но его работы выглядят чертовски красиво, и сам он работал в WayForward над серией Shantae (и не только), поэтому почему бы не представить его честному люду?
Pixel art
1.3K поста 4.6K подписчиков
Правила сообщества
Запрещено оскорбление пользователей.
привет, а ты сам рисуешь пиксельарт или только переводишь ? и как с тобой можно связаться ?
Краб у костра на берегу
Pixel-art концепт для игры, которую я делал последний год. 24 цвета.
Вот как он выглядит в игре:
Краб - 12 цветов, девочка с ушками - 42. Анимированный вариант:
Мы разрабатываем игру в сеттинге Дизельпанк уже три года и хотим ею поделиться
День Добрый, Жители Пикабу.
Хотим поделиться с вами проектом мечты — Erra: Exordium. Это 2D Экшн-Адвенчура в сеттинге Дизельпанка и основанная на шумеро-аккадской мифологии. Ниже вы можете увидеть наш первый трейлер.
Противники это одна из самых важных игровых составляющих, поэтому им мы уделяем достаточно большое количество времени. То что представлено ниже это наша основная артиллерия, но во время прохождения вы увидите больше интересных видов.
Уничтожать армию Мехатронов вам придется с помощью холодного и огнестрельного оружия. Которое вы будете находить, по ходу прохождения. Вас ждут пистолеты, дробовики и винтовки. Как говорится: "Палка делает бум".
Как вы можете наблюдать ниже, игра претерпела значительные изменения в плане анимаций и подвижности персонажей. Хотя нашу игру все еще нельзя назвать супер-подвижной и стремительной, как многих других представителей жанра Action Adventure.
Мы уже публиковали на различных ресурсах статьи о разработке архитектур и прочего. Здесь предлагаем вам ознакомиться с некоторыми особенностями нашей игры. Может заинтересует наша страничка в Steam.
Когда мы были на игровой выставке самый первый раз, то главный вопрос звучал так: "А у вас Метроидвания?". Нет, у нас классическая 2D сюжетно-ориентированная игра. В первую очередь, потому что мы сами скучаем по таким играм.
В нашем мире Шумерская цивилизация достигла технологических высот и на основе древних артефактов сумела построить армию Мехатронов. Роботов, созданных помогать и облегчать жизнь человечества. Но однажды произошел катаклизм, который изменил жизнь Телмуна. Люди заболели неизвестной хворью, а железная армия обернулись против своих создателей.
Вы играете за ученого, который сумел побороть смерть и перенести собственное сознание в искусственное тело. По ходу сюжета, вам предстоит узнать, что же все-таки произошло с островом и какая тайна стоит за смертью цивилизации.
За эти три года мы создали значительное количество контента, которое, по итогу, вылилось в проект, которым мы гордимся. Уместить всю игру в один пост у нас, увы, не получится, но надеемся на ваш интерес и поддержку.
Ознакомиться со страничкой на Steam.
Подписаться на наш Twitter.
Локации так же не ограничатся какой-то одной цветовой палитрой. Вас ожидают разные уголки города Телмуна, которые порадуют вас крайне прорисованными деталями. Надеемся, что у нас получится создать для вас уникальный визуальный опыт, навеянный шумерской культурой.
Таверна
Маленькая уютная таверна для Witchcrafty
Крошки рыцари. Подведение итогов за год разработки
Привет, инди - разработчик! В этом посте я поведаю о том, что усвоил за год разработки в соло. Собранно. Кратко. Без воды.
КРАНЧИ
Данные приведены с учётом основной работы с ненормированным графиком, не связанной с геймдевом.
— Общее время с момента начала разработки: 11 месяцев.
Из которых:
— 1-2 месяца кранчи по 50-70 ч/в неделю;
— 3-4 месяца застои;
— 6 месяцев средняя занятость проектом по 10 ч/в неделю;
Общее время на разработку: 80 рабочих дней.
Из которых:
— 60 раб/дней ушло на проектирование и работу над ошибками.
— 20 раб/дней составляют основную работу над проектом.
Маленький вывод: Не смотря на застои и выгорание после кранчей, они окупились прибавкой в целый месяц высокопродуктивной работы и предоставили пассивное время для до/ и переосмысления проекта.
ЗАСТОИ
Помимо основных причин, вроде выгорания, главной причиной стало отсутствие опыта и навыков. Об этом я подробнее расскажу абзаце про ошибки.
РЕЛИЗ
Так близко и так далеко одновременно. Не могу назвать себя идеалистом. Просто хочется, чтобы было хорошо. Только начав разработку этого проекта, я определил для себя главное правило: готовая игра должна нравится именно мне, и расходящиеся с моим, мнения окружающих, учитываться будут лишь во вторую очередь. Однако, при этом, подавляющему большинству игроков, в финальном тестировании, должно быть удобно и весело играть. Все это также сказалось на растягивании сроков и работе в холостую.
Маленький совет: У меня имеется четко сформулированная система меры и оценки качества всех основных составляющих игры. И если вопрос встаёт о том, а нужно ли это улучшать, я просто обращаюсь к ней и трезво принимаю нужное решение.
Пример можно скачать тут ДОКУМЕНТ
ПРОКАЧКА СКИЛЛОВ
Имея за плечами 2 года каждодневной практики и 1 год работы с пиксельной анимацией и работы с графическим редактором, уделяя при разработке примерно одинаковое количество времени на код и дизайн, могу сделать следующие выводы:
— я научился не забрасывать проекты один за другим, пусть и приходится много всего переделывать.
— теперь, при написании игровой логики, моей базы и навыков полностью достаточно, чтобы не замедлять разработку. А с периодичностью раз в три-четыре месяца, хватает двух дней, чтобы произвести полный рефакторинг кода и освежить его в памяти (на конкретном проекте).
— навыки рисовальщика, юишника и дизайнера тоже не остались в стороне. Приведу пример ниже, в котором покажу прототипы меню в начале разработки и на текущий момент.
Не учитывал кратковременные периоды (до нескольких месяцев), потому что не считаю их достаточно продуктивными. В моем случае, ощутимые результаты в росте навыков появляются лишь при каждодневной работе на протяжении от полугода и выше. А без постоянной практики, навыки заметно проседают.
ОШИБКИ, ВОЗНИКШИЕ СЛОЖНОСТИ И ПУТИ ИХ РЕШЕНИЯ
— Уход единственного художника с проекта. Разработка затянулась, а отсутствие рабочих концептов приводило к задержке задач для художника. Как итог, редкая разовая работа, параллельные заказы, повышение уровня мастерства и отсутствие интереса к мелким задачкам. Выводы из этой ситуации для себя каждый сможет сделать сам, дабы обезопасить себя в дальнейшем. (Кстати, я в поиске художника по фонам. Актуально в течение 2 недель, с момента публикации статьи).
— Отсутствие опыта в проектировании UI/UX интерфейсов. В прототипировании мне не приходилось с этим сталкиваться, а отдельный экран не должен был сочетаться со всей игровой стилистикой. Решение банальное, просто набивать руку. Наличие референсов мне никак не помогло. Но не брать их во внимание тоже не стоит. В интернете масса интересных решений, которые порой в десятки раз лучше тех, чем те, которые мы только можем себе представить.
— Отсутствие опыта в планировании игрового цикла и игровых меню. Также, все просто. Ни один проект дальше прототипирования основной механики не доходил.
— Отсутствие опыта в работе с хранилищами и базами данных, при проектировании магазина торговли и вывода информации. Наверное, единственное место в проекте, где предварительная работа с диздоком действительно принесла бы свои плоды.
— Отсутствие готового прототипа игровых меню и невозможность демонстрации проекта/ невозможность продолжать разработку. Так уж получилось, что проект включает 2 главные механики, замечательно уживающиеся друг без друга, такие как бой на арене и менеджмент в главном меню. Вот только уживание это происходит не долго. Все работает, но ничего нельзя протестировать, из-за сильного переплетения и зависимости одной части от другой.
ПРИШЛОСЬ ПЕРЕДЕЛАТЬ
Все игровые меню и интерфейсы перерабатывались, без преувеличения, десятки раз, и что-то до сих пор нуждается в доработке. Но даже основная игровая механика, бой на арене, прототип который был сделан ещё 3 марта 2021 года, также неоднократно подвергалась модификациям. Однако тут, кардинальных изменений не было. В основном различные дополнения и улучшения. Изначально система получилась не очень гибкой, но неоднократный рефакторинг это исправил.
ПЛАНЫ НА БУДУЩЕЕ
Как ни странно, за последний год совсем ничего не изменилось. Что это, постоянство, как признак мастерства, или ленивое ковыряние в носу. В любом случае, в моих планах остается также, сведение боевки с менеджментом и покорение Стима. Когда релиз, гадать не буду. Предварительно, через пол года. Ровно столько я себе рассчитал, только начав разработку. Ну а там уже, как получится.
Маленький совет: Вы можете стать мастером прототипирования игровых механик. Но это вам никак не поможет, при полном цикле создании игры от идеи и до релиза.
Спасибо, что дочитали до конца. Всем интересных игр и успешных релизов!
Если хотите меня поддержать или вам просто интересно следить за проектом, заглядывайте в паблик ВКОНТАКТЕ.
Этот обучающий материал посвящён тайловому текстурированию: как создаются и применяются тайлы и почему это одна из важных основ в геймдеве — акцент будет на применение в разработке игр.
Не стану детально описывать пайплайн в конкретных программах, а сосредоточимся на общих принципах работы и ответах на возможные вопросы.
В одном из своих обучающих материалов я уже упоминал метод тайлового текстурирования, но рассказал о нём поверхностно — тогда основная тема касалась оптимизации UV-развертки.
Tile — произносится как «тайл», переводится как «плитка», а означает повторение. Повторяющуюся текстуру используют для текстурирования больших поверхностей: грунта, стен, домов, модулей и иногда мелких объектов. Такой вид текстур позволяет добиться высокого качества и при этом уменьшить количество применяемых материалов в игровой сцене.
Бесшовные текстуры — это и есть тайлы, но иногда их так называют. Паттерны на краях текстуры продолжают друг друга, чтобы избавиться от швов и сделать повторяемость менее заметной.
Trim Sheet или тримы , в какой-то степени — это тоже тайлы, однако они бесшовные лишь по одной оси и применяются к вытянутым объектам: балкам, перилам, плинтусам, узорам на стенах и многим другим. Наглядные примеры таких текстур ниже.
Tile Atlas или атлас тайлов — несколько тайлов на одной текстуре. При использовании атласов приходится жертвовать числом полигонов, чтобы использовать оверлапинг — наложение UV-островов на один участок текстуры. Атласы создают ради того, чтобы снизить количество материалов, чаще всего используются в мобильных играх, где требования к оптимизации более высокие.
Tileset или тайл сет — подразумевается сет модулей, из которых делают уровни. Эти модули используют общие тайловые материалы или тримы, поэтому их можно назвать сетом одного тайла.
Оптимизация. Известно, что файлы игр состоят примерно на 60-80% из текстур, а возможно и на 95% — всё зависит от конкретного проекта. Однотипные, бесшовные текстуры часто используются повторно на различных моделях, тем самым позволяя экономить место на жёстком диске, снижать время загрузки и обращение к видеопамяти. Повторное использование материала в сцене вместо создания нового снижает количество Draw Calls — вызовов отрисовки.
Сокращение времени на разработку. Опытный левелдизайнер может создавать новые и уникальные локации, используя одни и те же модели и текстуры. Разумеется, это занимает меньше времени нежели создание каждой сцены с нуля.
Повторяемость ассетов. Если в игре часто использовать ассеты повторно, то через несколько часов геймплея визуально игра станет скучной. Этим особенно страдают игры с большим миром, например TESO, да и вообще вся серия «Свитков». После нескольких походов по пещерами можно увидеть все возможные тайлсеты, и новые локации не вызовут никаких впечатлений, так как они почти идентичны во всём, кроме проектировки уровня.
Зато большая часть Тамриеля (Мира вселенной The Elder Scrolls) умещается в 95 гигабайт, что по сравнению с новыми играми не так уж и много.
Сложный пайплайн для инди и новичков. При создании своего примера, я потратил больше дня на подбор скачанных текстур для одной очень простой модельки, при этом получилось так себе.
Основная трудность для меня была в том, что я не знал, что хочу визуализировать, не хватало предварительных артов или референсов, а если я и знал, что мне нужно, то нужных текстур не находил. Потратить ещё кучу времени на создание своих текстур исключительно для примера я не решился.
А теперь представьте те же сложности в масштабах игрового проекта или большого ассета. Для реализации качественных тайл сетов понадобится хоть какой-то опыт, время или деньги на покупку готовых.
Обработка фотографий в 2D редакторе — в Photoshop или в специализированных программах. Для создания полноценного PBR-материала не достаточно одной текстуры цвета — необходимы маски метала, шероховатости и карта рельефа (Metallic, Roughness, Normal Map). Всё это нужно либо рисовать вручную, либо генерировать из той же фотографии, что, конечно, даст результат, но не лучшего качества. По этой причине способ считается устаревшим.
Для генерации существуют отдельные программы — например бесплатный materialize или Bitmap2Material — который по сути является набором нод из Substance Designer. Ещё есть онлайн-сервис NormalMap-Online, он может создать Normal, AO, Sepcular из любого изображения. У всех этих генераторов похожий принцип, цвет используется как маска, карта нормалей получается вдавленной в тёмных местах и выдавленной на светлых, в некоторых случаях из этого можно получить приемлемое качество.
Моделирование и запекание. Художник создаёт геометрию на прямой плоскости при помощи скульптинга или моделирования. Геометрию окрашивают ID-материалами или через Vertex Paint. Далее это запекается на обычный плейн в текстуры: Normal, ID map, Curvature, Ambient Occlusion.
Остальное создаётся вручную. ID Map помогает отделять друг от друга элементы на плоской текстуре. Metallic, roughness и базовый цвет можно создать в Substance painter, в Blender через нодовый редактор, в Photoshop или даже внутри игрового движка, смешивая текстуры по ID-маске.
Hand Paint — создание текстур вручную, рисование в Photoshop или в других 2D-редакторах. Как правило, этот метод подходит для стилизованной графики, так как добиться реализма мазками кисти крайне сложно, если вообще возможно. Для создания стилизованной графики с PBR можно комбинировать с методом запекания.
Процедурные редакторы. Благодаря нодовым редакторам можно создать, а затем в любой момент отредактировать, что угодно, изменять не только цвета, но и каждый паттерн в отдельности, создавать множество вариаций одного материала.
Ноды — это что-то вроде визуального программирования. В каждой программе они реализованы по-разному, но суть везде похожая: первая нода создает простой паттерн или шум, вторая нода его редактирует, а третья — добавляет цвета. Конечно, при создании реалистичного материала тремя-четырьмя нодами не обойтись.
Лучшей нодовой программой для создания тайлов и не только, считается Substance Designer, так как она, её инструментарий и библиотека нодов были созданы для этой задачи.
Я единственный художник в нашей игровой студии, а это значит, что мне приходится заниматься анимацией, UI, рекламными материалами, ресурсами для соцсетей, персонажами, предметами и окружениями. Всё, в чём нужно хотя бы немного искусства, ложится на мои плечи. Я часто ощущаю всю лежащую на мне нагрузку, поэтому задаюсь вопросом:
В этой статье я расскажу о том, как мы разрабатываем тайлы 2D-окружений для таких игр, как Levelhead и Crashlands, и покажу методику, позволяющую нам сэкономить немного времени и повысить универсальность графических ресурсов окружений. Этот метод также упрощает создание органически выглядящих типов рельефа, хорошо сочетающихся друг с другом. Я не предлагаю при создании тайлсетов окружений пользоваться только этим способом, но он станет хорошим пополнением набора инструментов для любого художника.
Этот способ называется SPLATTER TILE!
Я всегда ищу способы работать быстрее и с большей гибкостью. Я работаю с традиционными методами тайлинга наподобие 9-slices и тайловых карт, и часто обнаруживаю, что результаты оказываются слишком жёсткими. Мы получаем сетку, которая приклеивается к окружению таким образом, что я ничего не могу изменить.
Теперь при создании уровня дизайнер может выбирать из 57 отдельных тайлов. С точки зрения создания графики, если удалить все дубликаты и отзеркаленные тайлы, то получится примерно 17 уникальных тайлов.
Поработав в таком стиле, я обнаружил, что мне нужно внести изменение в один из этих тайлсетов и начал рвать на себе волосы, потому что пришлось менять все эти 17 тайлов. Это заставило меня задуматься!
Как создавать тайлы, выглядящие в мире естественно и не похожие на сетку? И есть ли какой-то способ сделать это без монотонного процесса преобразования этих тайлов в бесшовные со всеми разрезанными на части вариациями?
Оказалось, что эти два вопроса связаны. Если вкратце, то для создания очень органических тайлсетов нужно или рисовать большое количество традиционных тайловых ресурсов, или полностью менять методику.
В основе этой методики лежит разница между фактической границей тайла и самой графикой, и именно это является фундаментом Splatter Tiles. Давайте рассмотрим их изнутри.
- Пространство тайла (TILE). Это фактическое пространство сетки, которое использует компьютер. Если вы создаёте тайлы, останавливающиеся на этих границах, то у художника получатся традиционные ресурсы с чётко заметной структурой решётки.
- Органическая полоса (ORGANIC SPILL)! Именно здесь происходит магия. Расширим тайл в это пространство, чтобы создать формы, напоминающие тот тайл, который мы хотим представить — если это камень, сделаем его «глыбистым» по краям. Земля рельефна и пятниста, трава острая и имеет множество острых краёв, и т.д. (ниже мы всё это рассмотрим).
- Граничная линия (BOUNDARY LINE)! Это граница тайла с точки зрения художника. Если пересечь эту линию, то части текущего тайла будут отрисовываться при рендеринге соседнего тайла, что выглядит некрасиво. Весь тайл должен находиться внутри.
Можно заметить, что splatter tiles позволяют очень быстро и без особого труда получить ощущение органического хаоса. Хотя сетчатость окружения всё равно заметна, слияние фигур благодаря их размытой природе делает её намного живее.
Если сделать ещё один шаг вперёд, то набор splatter tiles, как и в случае с традиционным тайлсетом, можно использовать для создания разнообразных органических форм, которые ещё меньше напоминают сетку. В нашей последней игре Levelhead, которая пока находится в раннем доступе в Steam, мы используем набор splatter tiles для каждого биома и для каждого эстетического тайлсета, который могут применять игроки. Например, вот splatter tiles джунглей:
А вот как они выглядят в игре:
А вот грибной биом Asteroids и соответствующие ему splatter tiles:
А вот пример из нашей RPG с крафтингом в открытом мире Crashlands:
- Создавайте дикие базовые формы для тайлов. Именно так можно уйти от ощущения «сетки».
- Используйте все цвета рядом с границами тайла. Затенение в разных точках границы должно быть высоким и низким, чтобы когда граница соединяется с другим splatter tile, они могли в отдельных точках смешиваться бесшовно.
- Тестируйте! Разберитесь, как быстро замечать изменения, вносимые в правильном контексте. Можно использовать клоны, горячую перезагрузку или какую-нибудь систему шаблонов — этот этап, вне зависимости от методологии, всегда самый важный при работе с окружениями.
- Выбирайте цвета заранее. Splatter tiles будут накладываться друг на друга, поэтому нужно сделать так, чтобы цвета гармонично сочетались и не раздражали глаз.
- Задайте глубину тайла. Например, земля всегда находится под травой. Камень находится между ними. Это позволяет создавать интересные паттерны, в которых разные тайлы накладываются друг на друга.
И здесь мы снова сталкиваемся с жестокой реальностью: для создания интересного и динамичного 2D-окружения требуется приличный объём графики. Предложенная мной методика просто быстрее позволяет добиться органического ощущения, поэтому её стоит исследовать наряду с разработкой традиционных тайлов.
Чтобы уравновесить кислотно-щелочной баланс после моей предыдущей, скорей всего неудачной, с точки зрения зрительских симпатий, публикации и чтобы принести ресурсу больше пользы, чем вреда – я публикую новый туториал. В отличие от всех предыдущих уроков он будет короче и будет напоминать по длине вот эту статью. Скажу даже более, он будет ей вторить, словно подпевая вполголоса. Надеюсь нам удастся спеться и вместе мы выдадим слаженный дует. Там речь шла о блендинге тайлов – здесь же речь пойдет о самих тайлах. О создании тайлящейся текстуры на базе любой фотографии. Это базовые знания, еще базовей чем это может быть только изучение интерфейса пакета Photoshop. В случае если мой тенор будет фальшивить — гоните его долой.
Итак, главный вопрос сегодняшней ночи – как сделать качественную тайл-текстуру за 5 минут? Хороший вопрос я думаю, и на него вполне можно потратить 5-10 минут вашего времени. Возможно после этого для ваших собственных прототипов вы будете использовать оригинальные тайлы, созданные вашими руками, не тратя времени на поиск художника или текстурщика, который смог бы вам помочь. Заманчиво?
Первым делом находим удовлетворяющую вас фотографию из тех, что не имеет копирайта (как правило на полях или по центру изображения). Внимательно следите за этим, потому что игровая индустрия богата курьезными ситуациями и эта далеко не последняя из могущих произойти с вами. Хотя. Что может быть веселее забыть в пред-релизной версии текстурной даты текстуру от игры Unreal Tournament? И такое случалось. Правда я не видел на лицах людей улыбок и не слышал их радостного смеха.
Приступим. 5 минут. Все по честному. Ваш процесс обучения займет немногим больше. Вы получите из фотографии слева — тайловую текстуру справа. Уже классически все это будет подано с соусом из юмора и маленькими мини-индустриальными-историями.
Я взял эту фотографию из реферата Ольги Васильевны Кузьминой. Не слишком большая и содержит все грядущие проблемы с которыми может столкнуться человек изготовляющий тайл-текстуры (или тайловые текстуры, или просто «тайлы»). Во-первых, она маленькая. Во-вторых – есть небо. В третьих, фактура не равномерна, что может привести к возникновению периодического рисунка при многократном повторе.
Нормализация текстуры (Texture Normalize)
И если с первым – мы смиримся, то второе требует некоего разрешения. Давайте приведем будущий тайл к удобоваримому виду. Хотя бы избавимся от неба, чтобы почва была более или менее равномерной. Это можно сделать двумя способами. Классическим выделением через рамку с помощью инструмента Rectangular Marquee Tool (M) или с помощью клавиши М. После того как вы выделили нужный объем, нажмите стандартную для большинства пакетов операцию копирования-вставки – Ctrl + C и Ctrl + V. Полученный лоскуток перетащите в нужное место (с помощью мыши) и повторите операцию, чтобы больше никогда в жизни этого тайла не видеть неба. Если что-то не заладилось и вы не доверяете вашим рукам – переключитесь в режим Move Tool (V) и перетащите объекты с помощью курсорных клавиш (стрелочек). Такой способ бывает важен при необходимости точного позиционирования элемента.
Примечание: Небо моего тайла на иллюстрации красное. И это не потому, что я сделал хитрое или применил «маску», а потому что я хотел явно выразить проблему. Повторив тоже что и я — вы получите такой же результат. Никаких хитростей.
Также операция клонирования может быть выполнена с зажатой клавишей Alt при включенном инструменте Move Tool (V), он используется для перемещения любых объектов (слои, группы). То есть вы выделяете нужный вам объем, зажимаете клавишу Alt и тащите выделенное куда вам нужно. Выделение может быть любым. Сделанным с помощью Magic Wand, Lasso Tool – словом так можно копировать все возможные выделения и их содержимое. Если при этом зажать Shift, то ваш объект-клон будет двигаться по прямой, либо налево, либо направо, либо вверх, либо вниз, не сбиваясь при этом с выбранного направления.
Первые швы (Patсh Tool)
— У нас проблема кэп. Появились Швы! Свистать мистера Патча на мостик!
Иными словами вызываем инструмент Patсh Tool (J) с той же панели инструментов (слева от рабочего полотна).
Важное примечание: По умолчанию этот инструмент может быть закрыт другими. В Фотошопе под одной иконкой может скрывать и три. Появятся они если нажать на иконку, что для махрового новичка (нас с вами) может быть не очевидно. Если вам лень тащить до них указатель мыши – пощелкайте на клавиатуре комбинацией Shift + J. Практически все важные операции, как и в стратегиях реального времени зашиты на short-cat'ы. Прошивок как в StarCraft вы здесь не увидите, но ускорить рабочий процесс на порядки – будет можно. Со временем это дойдет до автоматизма.
С помощь Patсh Tool (J) мы выделяем проблемную зону шва, для того чтобы потом ее перетащить на то место откуда будет снята та фактура которая не содержит дефектов и других артефактов. По мне сравнение с пластическим хирургом – гораздо интереснее. Если считать, что швы это опаленная кожа, ну… или морщины, то чистой, хорошей кожей будет фактура не содержащая проблем находящаяся по соседству. Ее-то мы и берем за сэмпл.
Итого… уже получилась неплохая текстурка. За то время пока я писал этот текст (см. выше) можно было бы протайлить десяток подобных текстур. Если не более. Однако нас сейчас не интересует скорость моего набора, а в большей степени интересует что делать с краями этой фотографии. Этого нашего тайла.
В давние времена…
…в общем я мог бы рассказать вам байки о том, что когда-то нужных инструментов не было и мы проходили через ад. А потом привыкнув проходить через ад я еще пару лет как макака это проделывал, игнорируя удобный инструмент Offset.
Корчуем швы со сдвигом (Filter Offset)
Этот чудесный фильтр позволяет избавить вас от рутинных операций. Нужно открыть проблемную текстуру, желательно после всех операций пост-обработки, выбрать пункт Filter/Other/Offset и задать в пикселях необходимое смещение. Если ваша текстура, как в нашем случае 512х512 то наиболее удобный Offset составит 256 пикселей. Таким образом мы не ставим крест на этой текстуре, но убираем его с помощью уже знакомого инструмента Path Tool (J).
Далее снова возвращаем значения Offset обратно. И… текстура готова. Если попробовать выложить ее словно плитку станет заметно, что возникает некий периодический рисунок в определенных местах. Ваша задача – быстро его устранить.
На следующем рисунке я указал зону этих неприятностей белесым цветом. Именно на эти зоны мы и поставим заплатки. Заодно сделаем это не с помощью Patсh Tool (J), а с помощью Lasso Tool (L). Почему так, а не наоборот я расскажу в советах, в конце урока.
Ловим багги лассо (Lasso Tool)
Берем лассо Lasso Tool (L) и выделяем землю, которая ляжет поверх прессованной земли, которая чертовски нам мешает. Потом через Ctrl + C и Ctrl + V переносим их в нужные места. Задача примерно на глаз избавиться от явных теней и явных элементов текстуры которые присутствуют в едином числе и при повторении будут заметными. Да, безусловно, это сделает текстуру менее уникальной. Но нам тут надо целый овраг покрыть, и никуда не годиться повторяющееся по всему периметру какое-либо черное пятно.
Теперь наша текстура выглядит так.
А при выкладывании ее в виде плитки – выглядит много лучше. В наше время используются такие вещи как бленды, декали, детальные текстуры и бог знает что еще. Но до сих пор основной фактурой является фото-текстура. И до тех пор, пока это будет происходить – мы будем работать с растровыми изображениями.
Что можно добавить? Вроде как ничего, но… постойте. Вам не надоело выкладывать ваши текстуры плиткой в файле большего разрешения? Если надоело прошу проследовать в предпоследний раздел нашего скоростного урока.
Делаем паттерн (Define Patern)
Выделите текстуру с помощью Rectangular Marquee Tool (M) или с помощью искрометной комбинации Ctrl + A. Затем перейдите во вкладку Edit. Вторая вкладка после пункта File. Выберете там Define Pattern. Напишите для паттерна любое удобное вам имя.
Теперь, при создании любого файла любого размера вы можете воспользоваться операцией Fill из того же подпункта Edit, либо нажав комбинацию клавиш Shift + F5. Выбрав там свой паттерн вы сможете залить им любую поверхность избавив тем самым себя от рутинных операций проверки файлов.
Эпилог
Сложно поверить, но каждое из этих микро-знаний приходило постепенно. К примеру вы узнали это за 5 минут. Я узнал за 5 месяцев потому, что копался самостоятельно, и потому что когда-то давно никто не любил делиться. Чтобы с вами случилось, если бы вы узнали, что весь процесс обучения этой простейшей операции пришелся на отрезок в 5 лет? Я не так далек от истины. Потому что каждым элементом этого маленького уравнения я занимался в разные годы. И фильтр Offset в нем стал последним неизвестным.
Бонус для терпеливых
Для тех кто смог выдержать пять минут чтения и еще две на эпилог. Существует очень важный фильтр. Который может превратить ваше изображение в как бы рисованное. Это секрет, и никому его не открывайте. Т.к. грамотное использование этого фильтра позволяет добиться удивительных результатов. Но тут как и в любом кулинарном процессе нужна очень точная рецептура. Маслин должно быть не более десяти, кружочков лука диаметром семи сантиметров можно положить побольше, не забывая про толщину нарезки… чувствуете? Ну… наверное ничего кроме слез. Если отвлечься от лука — пропорции, проценты, и очередность наложения изображений — очень важна. Дойти до этого сразу не может никто. Все это путь экспериментов. Для многих зачастую многолетних. Причем Level Up'ы будут случаться и по прошествии десятка лет. Я серьезно. Не только у такого лодыря как я.
Так вот. Наша цель — фильтр Filter/Atistic/Cutout. Посмотрите что он сделает с текстурой.
Теперь еще один важный пункт. Всему важна своя мера. Просто как фильтр — он не нужен никому. Но если изменить уровень процентности слоя с ним лежащий поверх нашей оригинальной текстуры на 37%, то будет видна и та текстура что снизу (сохраняя нам фото-текстуру), и та текстура что сверху (нивелируя черные фрагменты фото-текстуры). Вместе они дополняют друг друга. Текстура уже не такая фото, и как бы с легкой претензией на артовость. Чувствуете как я говорю о них? Как о вкусе вина.
Признаться я никогда не понимал вин, и не понимал все богатство их вкуса. Увы, в этом деле я не образован. Но меня всегда трогали фильмы о виноделах влюбленных в свое дело. То как они описывали напиток. Его вкус. То как он впитывает эмоции. Не думайте что текстура чем-то отличается. Во все что мы делаем — мы вкладываем толику своих эмоций. Что мы получили с нашими процентами?
А теперь добавим нашу текстуру еще раз сверху. В стиле на авось. С уровнем процента прозрачности 37% но изменив наложение текстуры на Overlay. Методы наложения это свойства слоя с которыми текстура (или изображение на нем, или маска) накладывается на тот слой, что лежит под ним. Можно было бы сделать это десятком других способов — но я предпочитаю этот. Быстрая цвето-коррекция и усиление контраста. Одним лишь продублированным слоем.
Вы знаете. Скорее всего вам трудно будет в это поверить, и возможно вы сочтете меня сумасшедшим, но я верю в две вещи. То что какая-то толика нашей души переходит в душевно сделанный объект. И в то что существует магия цифр. Эти значения для себя я подбирал давным давно. Кое-какие прохвосты врачи усмотрели у меня… как это бишь называется? Да, ограниченный дальтонизм. У нас, мужиков, это часто бывает. И так уж получилось что я вижу мир чуть иначе. Мне удалось подобрать такие цифры которые позволяют мне рисовать в привычном для меня контрасте и даже в привычной гамме. А затем я подкручиваю изображение. Частенько это не спасает от ядерных цветов, но решает ряд других проблем.
Маленький GIF пример. Это незначительные на первый взгляд изменения. Пустяковые. Но в комплексе они могут дать удивительный результат. Все в этом мире состоит из мелочей.
При дополнительной получасовой работе с текстурой из нее может получиться конфетка. Но я не располагаю этими 20-30 минутами. Нам нужно было быстро.
Ну и конечно если вдуматься это хохма. Дальтоник работает коцепт-артистом в индустрии, главным художником и бог знает кем еще. Правда и врачи сказали — ограниченный. Так что… все относительно. Пусть те кто смеются — смеются и дальше. Главное что и вы теперь знаете что есть некие числа и некая магия. И возможно я не одинок в своих мыслях.
Теперь я думаю любой программист, да и вообще кто угодно сможет быстро изготовить себе тестовый материал не прибегая при этом к помощи художника… кто бы меня так научил программировать.
Наблюдения
Идеальный растровый тайл. Идеального растрового тайла на базе фотографий в природе не существует. Он как «неуловимый Джо», помните о таком? Не пытайтесь его отыскать. Идеальный тайл — это цветовая заливка, фрактальный тайл, программно генерируемый тайл, и вряд ли они устроят ваше начальство.
Всегда будут какие-то огрехи, и что-то будет не нравится. Подобных вещей можно избегнуть в случае pixel-art'а или полностью рисованных текстур. Там периодические элементы будут сведены к минимуму за счет мастерства и опыта художника. Частенько «идеальный» тайл будучи идеальным совсем не радует глаз, т.к. многие элементы превращаются в некую «шахматную доску» от которой либо рябит в глазах, либо она не привлекает.
Время работы. Да, я сделал его за пять минут. Но в случае других, более сложных тайлов время может сильно растягиваться. Иные текстуры можно обрабатывать часами. Так и скажите вашему начальству, которое прочитав этот микро-урок, предложит вам «протайлить» 12 текстур за час. Это не конвейер, даже в этой рутинной работе есть творческое звено. Необходимо минимальное чувство вкуса. Ну и сноровка конечно же.
Забавный факт. Помимо того что тайл — это плиточная или «кафельная» структура состоящая из повторяющихся фрагментов изображения, тайлом же называют периодичный рисунок возникающий при многократном повторении тайла. «Мне не нравится явный тайл» — фраза говорящая о возникновении хорошо читающегося периодического рисунка, а не о качестве проработки тайла. Говоря кратко и понятно — «то чертово пятно видно и повторяется повсюду, когда ты его, наконец, уберешь?».
Читайте также: