Как рисовать пиксельные тайлы
Обновлено: 06.07.2024
Этот обучающий материал посвящён тайловому текстурированию: как создаются и применяются тайлы и почему это одна из важных основ в геймдеве — акцент будет на применение в разработке игр.
Не стану детально описывать пайплайн в конкретных программах, а сосредоточимся на общих принципах работы и ответах на возможные вопросы.
В одном из своих обучающих материалов я уже упоминал метод тайлового текстурирования, но рассказал о нём поверхностно — тогда основная тема касалась оптимизации 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-окружения требуется приличный объём графики. Предложенная мной методика просто быстрее позволяет добиться органического ощущения, поэтому её стоит исследовать наряду с разработкой традиционных тайлов.
Ну да, тайл травы. Обычно это первый тайл, который рисует любой, потому что, если вы работаете над ролевой игрой, действие которой происходит на Земле, вам, скорее всего, потребуется нарисовать траву.
Давайте рассмотрим различные методы изображения травы. Во многих играх вы наверняка встречали нечто подобное:
Это, конечно, не все варианты, но самые популярные - точно. Забавно, но некоторые считают, что раз трава зелёная, то любой зелёный квадрат будет похож на траву. При этом обычно рисуется зелёный фрагмент с несколькими редкими точками. Они действительно считают, что это напоминает траву, раз вокруг зелено и есть деревья. Но на самом деле это выглядит как сплошной лист зелёного металла с некоторыми вмятинами и выпуклостями или лист зелёного стекла. Или, возможно, как большая ровная зелёная скала. У всех вышеперечисленных объектов есть общее свойство - они ПЛОСКИЕ, и грустно, когда к таким плоским предметам относят и траву. Настоящая трава - это миллион крошечных листиков, беспорядочно растущих под различными восходящими углами, если, конечно, их не примяли. Так зачем же изображать её ровной?
Таким образом, мы решили рисовать "более сложные" шаблоны травы. Те, которые состоят из ста тыщ мильёнов точек. Проще всего воспользоваться инструментом "аэрозоль" программы Paint. Разбрызгайте пиксели различных оттенков зелёного и вырежьте квадратик размером 16x16. Это сработает, но могут получиться большие участки одного цвета, как в верхнем правом углу на третьем примере. Такая клякса не улучшит общий вид травы, когда мы начнём использовать шаблон, о чем будет сказано немного позже.
Другой метод заключается в рисовании вытянутых листиков разными оттенками зелёного. Это занятие может оказаться очень нудным. Чтобы не зацикливаться на процессе, достаточно просто черкать случайные линии длиной до 4 пикселей. Можно нарисовать несколько травинок, а потом скопировать (copy and paste) их вокруг и повторить то же самое в остальных местах. Так гораздо быстрее. Лично я использую именно этот способ, потому что мне нравится видеть сразу, какой получается трава, а при использовании "аэрозоля" всё равно приходится исправлять некоторые пиксели. Такой прием хорошо подходит для рисования лесной нетоптаной травы. Впрочем, если повернуть фрагмент на 90 градусов, чтобы линии шли горизонтально, получится вытоптанная трава. Заметьте - лёгкие вариации вроде изменения угла наклона могут полностью изменить внешний вид результата.
Отныне вы можете рисовать тем способом, который вам понравился больше остальных, а есть, конечно, и другие. Помните главное: трава не должна выглядеть совершенно плоской, к тому же, однотипные шаблоны, отличающиеся только цветом, смотрятся ужасно:
Не делайте, подчеркиваю, не делайте этого. Думаю, мне стоит объяснить, почему. если слов, что это ужасно, недостаточно. Повторяющаяся текстура - это серьёзная проблема. Это однообразный дизайн с различными цветами. Вспомните старые времена, когда движок игры прокручивал изображение не на один пиксель, а на весь шаблон. Что происходило на экране, когда вы продвинулись? Фрагменты не скроллировались, а просто заменялись. В этом и заключается проблема: при движении вперёд самое лучшее, что могло с вами случиться, - шаблон другого цвета. Неизменяющиеся текстуры наводят тоску, в итоге глаза сильно устают искать различия между практически идентичными изображениями. Представьте, что вы перемещаетесь по большому участку с травой, которая всё время выглядит одинаково. Вы бы часами бродили, не зная, идёте ли вы вперед или натолкнулись на край карты и уже никуда не идёте, - потому что вокруг ничего не меняется. Конечно, при современном попиксельном скроллинге дела обстоят получше, но похожие фрагменты всё так же сбивают игроков с толку.
Создание тайлов: рисуем траву
Небольшое руководство по созданию тайлов основной травы, земли и высокой травы.
[на примере тайлов для RPG Maker 2000, RPG Maker 2003, EasyRPG]
Начиная рисовать свой тайлсет многие в первую очередь рисуют траву. И это весьма разумно и обоснованно, ведь она будет почти везде и весь верхний слой в идеале должен хорошо с ней совмещаться.
Одна из самых простых схем создания подобного тайла следующая:
1) сначала заливаем весь квадратик тайла основным цветом. Я выбрала тёмный зелёный;
2) добавляем вторым цветом небольшой паттерн. Например, галочки из трёх пикселей;
3) в случайном порядке добавляем пару пикселей, можно другого цвета.
Всегда следует проверять, нормально ли стыкуются края тайлов. Полезно и взглянуть на получившуюся картинку с разным увеличением.
Землю можно нарисовать по тому же принципу, что и основную траву, изменив при этом цвет и паттерн.
Далее рассмотрим густую высокую траву.
Для хорошей сочетаемости предлагаю бать в палитру хотябы пару цветов, используемых в тайле низкой травы (я позаимствовала с прошлого тайла два цвета и добавила два новых: самый тёмный и самый яркий).
1) на основном цвете рисуем нужные нам кустики.
Предлагаю сразу рисовать не в квадратике размером с тайл (у меня 16х16), а вылезти за его пределы сверху и слева. Таким образом повторяющийся рисунок будет не прямо по центру клетки, а чуть с краю. Это в свою очередь поможет сгладить не очень хороший эффект поклеточного размещения тайлов и ивентов на карте (то есть, кустики будут расти между клетками)
2) вырезаем верхнюю честь травы, которая не влезла в квадратик тайла, и переносим её в нижнюю часть рабочего врадрата (попутно удаляя основной цвет, чтобы не закрыть имеющуюся нарисованную часть.
Аналогично переносим не влезший кусочек, расположенный слева от тайла, в вравую часть.
3) проверяем, как будет выглядеть карта, залитая только нашей новой травой.
В моём примере в первой попытке трава получилась не такой густой, как я хотела. Поэтому я для себя выделила белыйм кружочком проблемную проплешинку. Затем нарисовала на её месте кустик травы (который чуть вылез за границы тайла справа и снизу). Затащила "вылезшие" части кустика в квадратик тайла. Ещё раз проверила, как будет смотреться.
Итого у нас есть три тайла:
Для использования их в игре нам нужны переходы между ними.
Переходы от одного тайла к другому:
1) берём квадратик из девяти клеток, залитых нашим тайлом, и художественно обрезаем края;
2) накладываем полученную картинку на клетки,залитые вторым тайлом;
3) немного редактируем нижний слой (в моём случае это клетки с низкой травой. Я добавила пару светлых пикселей по краям);
4) редактируем верхний слой (добавило тёмную окантовку земле на стыке с травой, чтобы придать объём)
Для создания автотайла нужна ещё графика при изгибах.
Мы просто моделируем ситуацию (достаточно крестика из автотайла):
У нас готов один автотайл с переходом от основной травы к земле!
Аналогично рисуем и другие переходы и проверяем на карте, как это всё смотрится.
PS. Если общая картинка вышла немного не та, которую очень хотелось, то не нужно бояться переделывать. Очень важную роль играет цветовая гамма.
Увидев эту мрачную карту, я начала экспериментировать с цветами. Рекомендую перекрашивать до того момента, пока карта не понравится. Лично мне помог советом Alexb, предложив сделать высокую траву более сочной.
Как-никак, из этих эти тайлов будут состоять карты. А тайлы, которые хочется использовать, повышают желание маппить
Привет, друзья!
В этой статье, я хочу вас познакомить с некоторыми хитростями, как быстро рисовать тайлы, при этом, имея минимум опыта в Пиксель Арте.
Кое-что я взял из этой статьи и переделал на свой лад.
Ну что, вы готовы рисовать? Если да, тогда поехали!
В большинстве 2D платформеров, присутствует тайл земли, который и будет основой нашего Тайл Сетa.
Вот с него и начнём, только для начала выберим палитру и размер тайла.
Палитра земли может быть любой, но обычно для почвы берут коричневые и серые цвета.
Если у вас не получается выбрать палитру или сама палитра ни какая, то всегда можно взять палитру из чужих изображении.
После выбора палитры, можно приступить к рисованию!
Но прежде, обратите внимание, как я подготовился к самому рисованию.
В левом углу у меня находится палитра, также заранее подготовлены белые квадраты под размер тайлов.
Размер моих тайлов 32 на 32 пикселей.
И да, самое важное, соблюдайте, чтобы ваши камни могли соединяться с такими же камнями из соседних тайлов, смотрите на рисунки, синие точки показывают, где должны соединяться с противоположной стороны тайла камни.
Погрешность может быть только в один пиксель, иначе получите уродливую сцену.
Теперь можете рисовать. Рандомно рисуем камни и после закрашиваем тайл.
Вот что получилось у меня и получится у вас.
У нас есть целый один тайл, но для игры этого мало, поэтому мы сейчас будет рисовать тайлы!
Берём наш шаблон с белыми квадратами и как на рисунке раставляем наш готовый тайл на квадраты.
В этот раз нам будет легче нарисовать новый тайл, так как не нужно помечать соединения камней.
Всё просто, смотрите на соседние тайлы. Рисуем второй тайл, рандомно раставляем камни и закрашиваем тайл.
И вот, уже готов второй тайл!
Таким макаром можно и не один десяток тайлов сделать. Чем больше разных тайлов, тем разнообразнее сцена.
Итак, почву мы нарисовали, теперь можно рисовать траву.
Возьмём наши тайлы с почвой и спрайт главного героя игры.
Поставим спрайт так, как будто, герой игры идёт по траве.
Выделим красными линиями границу плоскости поверхности по которой будет идти наш герой.
Убираем спрайт персонажа, после этого берём первый тайл почвы выделенными красными линиями и закрашиваем зелёном цветом линии и их промежуток.
Верхную часть почвы, которая выше травы закрашиваем белым цветом.
Теперь мы подбираем палитру для травы.
И после этого, можно приступать к рисованию, начинаем с верхней части тайла.
Рисуем как бы холмы или волны, плавно переходящие с одной волны на другую.
А в нижней части от зелени мы рисуем как бы зубчики, но с разными размерами и без острых углов.
При этом не заходим на территорию зелённого цвета и не забываем, что этот тайл будет соединяться с другими тайлами травы, тут тоже самое, как в самом начале с камнями.
Вот теперь, закрашиваем нашу травку, отделяем одну плоскость от другой при помощи палитры.
В итоге получилось вот такое:
Но что то в этом тайле не так, интересно, что?
Не хватает тени от травы.
Берём палитру почвы и затемняем её.
Также на глаз определяем высоту и сдвиг тени.
Я не стал сдвигать тень влево или вправо, тень каждого зубчика строго под своим зубчиком, а высоту тени взял в четыре пикселя.
Короче, у нас получается, вот такой не плохой тайл травы.
Теперь берём шаблон, копируем в него нашу палитру.
Слева и справа ставим наш первый тайл травы, а в центр второй тайл земли.
Далее, повторяем всё то, что делали до этого с первым тайлом травы и таким образом, получаем второй тайл травы.
Всё! Работа закончена!
Можно отдохнуть и полюбоваться что получилось.
Вот так выглядит мой Тайл Сет:
А так выглядит общая сцена:
Скорее всего, общая сцена покажется скудной, ибо нет заднего фона, кустов и деревьев.
Но всё это оставим для следующих статей.
Возможно, у вас не получится с первого раза, не отчаивайтесь, друзья, повторите несколько раз и обязательно, что-то и получится.
Не сдавайтесь и не ленитесь, верьте в себя и в свои силы.
С вами был Magatino!
Увидимся в следующей статье
Читайте также: