Тайлинг от А до Я

Добавлен , опубликован
Раздел:
Ландшафт

Тайлинг от А до Я

Сегодня я расскажу вам об очень важном элементе LVL-дизайна - тайлсете, а точнее - о том, как его создать с нуля. Что ж, приступим к делу.
Давайте разберемся, какое ПО нам понадобится:
  • Adobe Photoshop
  • BLP Lab (советую именно эту программу, так как она позволяет очень сильно сжимать текстуры, что, соответственно, экономит такие важные килобайты)
  • War3ModelEditor (подойдет любая программа, работающая с .mpq)

Теория или «Строим из себя Эйнштейна»

Прежде чем приступить к созданию тайлсета, давайте разберемся, что это такое и как с ним работает WarCraft 3.
Тайлceт (Tileset – набор плиток) – это набор изображений (тайлов), при соединении которых в любых вариациях получается полноценное бесшовное изображение. WarCraft 3 работает с тайлсетами размером 256х256 (и больше) при размере тайла (далее - «ячейка») 64х64. Если размер тайлсета меньше 256х256, это приведет к неожиданным последствиям и неправильному считыванию ячеек.
Теперь проведем экскурсию по миру WarCraft 3 в отделе «Работа с тайлсетами».
Для этого нам понадобится готовый тайлсет. Идем в гости к War3ModelEditor (в моем случае), заходим в Окно>>Браузер MPQ-архивов (горячая клавиша “B”) и экспортируем оттуда готовый тайлсет, например, war3.mpq >> “TerrainArt\Dalaran\Dalaran_BrickTiles.blp”. С помощью BLP Lab конвертируем его в формат .TGA и открываем в Photoshop.

Теперь разберемся, каким образом WarCraft 3 читает тайлсет и какую ячейку в каком случае использует. Для этого давайте возьмем и перекрасим наш тайлсет.
Так будет гораздо проще понять, какая именно ячейка использовалась. Сохраняем наш тайлсет в формате .TGA и с помощью BLP Lab снова конвертируем в .blp. Фотошоп и наш «разукрашенный» тайлсет не закрываем.
Теперь стучимся в гости к WorldEditor'у. Создаем новую карту (в настройках выберем Тип Ландшафта – «Ашенваль») и импортируем наш конвертированный в .blp тайлсет (путь прописываем «TerrainArt\Ashenvale\Ashen_Rock.blp»).
Сохраняем карту и перезапускаем редактор.
Теперь новосозданный тайлсет должен появиться на панели «Рельеф» вместо тайлсета Ashen_Rocks.blp.
Тут советую включить отображение сетки (средняя) – будет проще анализировать. Выберем наш тайлсет и выполним одиночный клик на карте.
Как видите, WarCraft использует не одну ячейку, а сразу четыре. Смотрим в тайлсете местонахождение цветов, которые использовались (в фотошопе у нас есть открытый тайлсет, не забыли?) и запоминаем их.
Повторяем эксперимент, только теперь нажимаем на карте дважды (рядом). Видим что к нашей картине добавилось еще два цвета, опять ищем и на тайлсете и запоминаем.
Повторяем наши эксперименты до тех пор, пока не увидим все случаи использования определенной ячейки в тайлсете.
Сделав это, я понял, что «красный», «зеленый», «голубой» и «темно-синий» цвета используются для, так сказать, «сглаживания» углов в тайлсете; «синий», «оранжевый», «темно-красный» и «сине-зеленый» - для создания боков в тайлсете, «белый» цвет – для наполнения «внутренности» тайлсета, остальные же цвета – для наполнения одно- и двуклеточных диагоналей. На основе этого я составил таблицу, в которой указано назначение каждой из ячеек.

Практика или "От простого к сложному"

Теперь, когда мы знаем как WarCraft3 обрабатывает тайлсеты, мы можем приступить к непосредственному созданию.
Для начала нам нужен материал, с которым мы будем работать. Покопавшись в интернете, я выбрал вот такую картинку.
Теперь нам нужно отредактировать ее, а именно: уменьшить, разделить на блоки и т.п. Вообщем, сейчас мы с вами все будем делать вместе.
Заходим в фотошоп (наш тайлсет можно закрыть, он нам не понадобится) и готовим все к работе: открываем изображение и создаем три новых файла, размерами 256х256, 64х64 и 500х500. Первый файл нужен для самого тайлсета, второй – для ячейки, третий – экспериментальный: в нем мы будем соединять наши ячейки и смотреть на наличие швов и прочих багов.
Теперь начнем редактировать изображение, из которого мы собираемся сделать тайлсет. В моем случае я просто обрезал его и уменьшил в размере. Сделаем первую ячейку: для этого выделяем на изображении кусок размером 64х64 и копируем в файл такого же размера.
Из этого кусочка нам нужно сделать целостную ячейку. Для этого включаем отображение сетки с помощью CTRL+' (Просмотр – Показать - Сетку) и копируем нижнюю часть изображения (CTRL+C, CTRL+V), затем повторяем это же действие и перемещаем скопированный кусочек в верхнюю часть изображения, отразив его по вертикали (Редактирование – Трансформирование - Отразить по вертикали). Затем повторяем эти две операции и для правой стороны, только отражаем по горизонтали. В результате у нас должна получиться вот такая рамка.

Включаем отображение нашего изображения и убираем швы. Должно получиться так:
Поздравляю, вы сделали первую ячейку. Переносим еще на файл 500х500. Теперь берем на нашем основном изображении еще несколько кусков (размера 64х64) и повторяем действия выше (это нужно для создания на тайлсете разнообразия).
Сделав все и переместив наши новосозданные ячейки на файл 500х500, проверяем их на наличие швов. Здесь я советую использовать мою таблицу. Смотрим, в каких вариациях могут соединяться ячейки и проверяем все на файле 500х500.
Устраняем все погрешности, размазанности и т.п. (я использовал инструменты «штамп» и «Восстанавливающая кисть») и переносим на наш будущий тайлсет (файл 256х256). Тут выставляем ячейки в произвольном порядке - это влияет только на порядок отображения в WarCraft, но не на результат.
Теперь переходим на вкладку «каналы» и создаем 2 альфа-канала. На нижнем делаем сетку. Для этого переходим к файлу размером 64х64, удаляем оттуда все, затем выделяем все на пустом слое и применяем эффект «Выполнить обводку» (размер 1 пиксель, цвет «черный», способ отображения – «по центру». Копируем созданную клетку на альфа-канал и размещаем по всей поверхности.
Идем дальше. Переходим на основной альфа-канал и начинаем рисовать его (не забываем сверяться с таблицей, чтобы не получилось разбежностей. Для тех, кому этот способ не удобен, можете, нарисовав одну ячейку, сверять ее с другой путем перетаскивания). Если у вас текстура не объемная, как у меня, советую сделать края полупрозрачными. В этом случае тайлсет будет выглядеть более аккуратным.
Закончив с основным каналом, удаляем «клеточный».
Наконец, последние штрихи. Убираем на самом изображении лишнее, сверяясь с альфой, и убираем последние погрешности.
Теперь сохраняем наш тайлсет в формате .Tga (разрешение – 32 бит/пиксель). Конвертируем в формат .Blp, с помощью BLP Lab и импортируем в игру, прописав при этом путь замены, например, «TerrainArt\Ashenvale\Ashen_Rock.blp».
Наслаждаемся результатом.

Всем Спасибо за внимание. Статья написана в рамках программы Сообщества св.Механики и Пиратской Партии


Показан только небольшой набор комментариев вокруг указанного. Перейти к актуальным.
0
26
14 лет назад
0
Чтобы мы смогли поместить статью у нас. Т.е. статья абсолютно полностью наша.
0
17
14 лет назад
0
Всё, все перезалил =)
0
37
14 лет назад
0
получилась треш-трава ) это и дураку понятно, а вот самому нарисовать объем как в варике для тайла это новичок сам должен понять?)
0
17
14 лет назад
0
Рисовать то и не обязательно, достаточно найти нужную картинку. Зачем морочить себе задницу 4-5 часов, чтобы придать изображению объема, если достаточно просто взять объемное изображение и сделать все гораздо быстрее
0
25
14 лет назад
0
Эм, да; на примере трава какая-то однообразная и некрасивая. Стандартные выглядят приятнее. Хотя бы потому, что там на тайлах бывают проплешины, камешки, цветочки всякие итп.
0
17
14 лет назад
0
на тайлсете, что я приложил есть две вариации: с цветочками и без. Но ведь это все можно еще больше разнообразить, если сделать тайл 512х256, тогда разнообразие увеличивается в 16 раз
0
6
14 лет назад
0
Попробуйте Photo Impact, дабы не мудиться с альфой. (поглядите статью на хелпере)
0
37
14 лет назад
0
и где ты найдешь объемную траву именно для разметки твоего тайла?
0
17
14 лет назад
0
Цифровик и гугл в помощь. А вобще я сейчас дорабатываю статью, скоро добавится способ придания тайлсету объемности и еще несколько способов обработки изображения
2 комментария удалено
Показан только небольшой набор комментариев вокруг указанного. Перейти к актуальным.
Чтобы оставить комментарий, пожалуйста, войдите на сайт.