Splatter tiles: как без особой возни создавать тайлы для игр

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

Можно ли всё это как-то ускорить?!

В этой статье я расскажу о том, как мы разрабатываем тайлы 2D-окружений для таких игр, как Levelhead и Crashlands, и покажу методику, позволяющую нам сэкономить немного времени и повысить универсальность графических ресурсов окружений. Этот метод также упрощает создание органически выглядящих типов рельефа, хорошо сочетающихся друг с другом. Я не предлагаю при создании тайлсетов окружений пользоваться только этим способом, но он станет хорошим пополнением набора инструментов для любого художника.

Этот способ называется SPLATTER TILE!

Проблема традиционного тайлинга

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

Углубившись в создание таких тайловых окружений, я выяснил, что наилучшим способом создания более живых и органичных тайлсетов не изменение техники, а увеличение количества рисуемых тайлов. Я быстро перешёл от простых 9-slice ко всё более и более широким тайлсетам, передававшим все повороты и изгибы рельефа. Чтобы на примере увидеть, сколько тайлов требуется для создания ощущения живости и гибкости, посмотрите на этот пример с craftpix.net ^[1]:

Теперь при создании уровня дизайнер может выбирать из 57 отдельных тайлов. С точки зрения создания графики, если удалить все дубликаты и отзеркаленные тайлы, то получится примерно 17 уникальных тайлов.

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

Как создавать тайлы, выглядящие в мире естественно и не похожие на сетку? И есть ли какой-то способ сделать это без монотонного процесса преобразования этих тайлов в бесшовные со всеми разрезанными на части вариациями?

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

В основе этой методики лежит разница между фактической границей тайла и самой графикой, и именно это является фундаментом Splatter Tiles. Давайте рассмотрим их изнутри.

Анатомия Splatter Tile

• Пространство тайла (TILE). Это фактическое пространство сетки, которое использует компьютер. Если вы создаёте тайлы, останавливающиеся на этих границах, то у художника получатся традиционные ресурсы с чётко заметной структурой решётки.
• Органическая полоса (ORGANIC SPILL)! Именно здесь происходит магия. Расширим тайл в это пространство, чтобы создать формы, напоминающие тот тайл, который мы хотим представить — если это камень, сделаем его «глыбистым» по краям. Земля рельефна и пятниста, трава острая и имеет множество острых краёв, и т.д. (ниже мы всё это рассмотрим).
• Граничная линия (BOUNDARY LINE)! Это граница тайла с точки зрения художника. Если пересечь эту линию, то части текущего тайла будут отрисовываться при рендеринге соседнего тайла, что выглядит некрасиво. Весь тайл должен находиться внутри.

Краткий пример

Можно заметить, что splatter tiles позволяют очень быстро и без особого труда получить ощущение органического хаоса. Хотя сетчатость окружения всё равно заметна, слияние фигур благодаря их размытой природе делает её намного живее.

Более подробный пример

Если сделать ещё один шаг вперёд, то набор splatter tiles, как и в случае с традиционным тайлсетом, можно использовать для создания разнообразных органических форм, которые ещё меньше напоминают сетку. В нашей последней игре Levelhead ^[2], которая пока находится в раннем доступе в Steam, мы используем набор splatter tiles для каждого биома и для каждого эстетического тайлсета, который могут применять игроки. Например, вот splatter tiles джунглей:

А вот как они выглядят в игре:

А вот грибной биом Asteroids и соответствующие ему splatter tiles:

А вот пример из нашей RPG с крафтингом в открытом мире Crashlands:

Советы по эффективному созданию splatter tiles

• Создавайте дикие базовые формы для тайлов. Именно так можно уйти от ощущения «сетки».
• Используйте все цвета рядом с границами тайла. Затенение в разных точках границы должно быть высоким и низким, чтобы когда граница соединяется с другим splatter tile, они могли в отдельных точках смешиваться бесшовно.
• Тестируйте! Разберитесь, как быстро замечать изменения, вносимые в правильном контексте. Можно использовать клоны, горячую перезагрузку или какую-нибудь систему шаблонов — этот этап, вне зависимости от методологии, всегда самый важный при работе с окружениями.
• Выбирайте цвета заранее. Splatter tiles будут накладываться друг на друга, поэтому нужно сделать так, чтобы цвета гармонично сочетались и не раздражали глаз.
• Задайте глубину тайла. Например, земля всегда находится под травой. Камень находится между ними. Это позволяет создавать интересные паттерны, в которых разные тайлы накладываются друг на друга.

Splatter tiles обычно лучше всего подходят для игр с видом сверху, где от точного края тайла не зависит жизнь или смерть игрока. Однако если вы освоитесь с ними, то можете адаптировать их под широкий диапазон различных жанров, в том числе и под такой активный платформер, как Levelhead!

«Но Сэм! Разве тебе не приходится всё равно рисовать кучу тайлов?»

… чёрт!

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

Автор: PatientZero

Источник ^[3]