Туториал. Тайлинг текстур

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

В этом туториале я расскажу как сам изготавливаю бесшовные текстуры, касаемо пиксель арта.

Палитра, материал, сетка

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

Самым темным цветом я набрасываю "сетку" — будущее расположение элементов текстуры на тайле.
Выделяем область сетки, равную размерам будущего тайла — в данном случае это 50x50 пикселей и вырезаем этот фрагмент. Затем открываем новый документ (размер должен равняться размеру планируемого тайла) и вставляем фрагмент нарисованной сетки туда.

(Да, размеры тайлов должны быть определены еще на стадии задумки игры, а при рисовании очень помогает такой инструмент, как Grid, он должен быть включен, а привязка кисти выключена. Туториал по настройке фотошопа для пиксельарта был ранее выложен ЗДЕСЬ)

Фильтр Offset

Заходим во вкладку filters > Others > Offset и применяем смещение на нашем документе. Параметры задаем так: (размер тайла)/2. В нашем случае 50/2=25 пикселей. Смотрим что вышло.
Когда сетка затайлена — можем еще раз применить offset, а можем продолжить работать и так — тайлится текстура будет в любом случае.

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

Отрисовка

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

Рисуем текстуру булыжников, не забывая о выбранном направлении освещения и применяя offset, если нужно уточнить не нарушена ли бесшовность. (в принципе с опытом это можно проделывать без фильтра смещения, а просто на глаз)

Доводка и коррекция

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

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

Теперь последний штрих — цветокоррекция. (Я обычно применяю корректирующие слои) В Ajustment layers выбираем Selective colors и настраиваем необходимые оттенки, после этого можно применить слой Color ballance.

Изометрия

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

Примеры изометрических тайлов, которые я делал этим способом.
(делались для одного заброшенного на данный момент проекта)

Полезные советы:

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

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

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

Да, кстати, трюк со смещением на половину размера тайла отлично подходит не только для пиксель арта, но и для создания обычных рисованных текстур для 2д и 3д игр.

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

На этом у меня всё, надеюсь этот урок окажется полезным.