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

» Раздел: Ландшафт

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

Сегодня я расскажу вам об очень важном элементе 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».
Наслаждаемся результатом.

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


Просмотров: 12 403

Batisto #1 - 9 лет назад 0
Молодчина так держать!
Дай ссылку на траву
StMechanus #2 - 9 лет назад 0
Сейчас поправлю =).
....
Во вложениях стоит
Это сообщение удалено
WebSter #4 - 9 лет назад 0
Хорошая, в целом, статья, но стоило бы описать возможности избавления от "тайловости", т. е. очевидного повторения одного и того же элемнета; как сделать правильную светотень на границах и прочие немаловажные мелочи. Также в статье упущено описание тайлов формата 512x256.
Тег подзаголовка практики посмотр.и
И один вопрос: каков вклад ПП в работу?
Rewenger #5 - 9 лет назад 0
Скриншоты надо перезалить на хгм.
StMechanus #6 - 9 лет назад 0
>> И один вопрос: каков вклад ПП в работу?
Большой =)
>> Скриншоты надо перезалить на хгм.
Зачем?
Lazdakon #7 - 9 лет назад 0
Чтобы мы смогли поместить статью у нас. Т.е. статья абсолютно полностью наша.
StMechanus #8 - 9 лет назад 0
Всё, все перезалил =)
ScorpioT1000 #9 - 9 лет назад 0
получилась треш-трава ) это и дураку понятно, а вот самому нарисовать объем как в варике для тайла это новичок сам должен понять?)
StMechanus #10 - 9 лет назад 0
Рисовать то и не обязательно, достаточно найти нужную картинку. Зачем морочить себе задницу 4-5 часов, чтобы придать изображению объема, если достаточно просто взять объемное изображение и сделать все гораздо быстрее
Rewenger #11 - 9 лет назад 0
Эм, да; на примере трава какая-то однообразная и некрасивая. Стандартные выглядят приятнее. Хотя бы потому, что там на тайлах бывают проплешины, камешки, цветочки всякие итп.
StMechanus #12 - 9 лет назад 0
на тайлсете, что я приложил есть две вариации: с цветочками и без. Но ведь это все можно еще больше разнообразить, если сделать тайл 512х256, тогда разнообразие увеличивается в 16 раз
БМК #13 - 9 лет назад 0
Попробуйте Photo Impact, дабы не мудиться с альфой. (поглядите статью на хелпере)
ScorpioT1000 #14 - 9 лет назад 0
и где ты найдешь объемную траву именно для разметки твоего тайла?
StMechanus #15 - 9 лет назад 0
Цифровик и гугл в помощь. А вобще я сейчас дорабатываю статью, скоро добавится способ придания тайлсету объемности и еще несколько способов обработки изображения
3 комментария удалено
Steal nerves #19 - 8 месяцев назад (отредактировано ) 0
как я понял. Есть набор тайлсетов (почвы, керамики и плиток, травки и др) 256х256 типа Даларана. размер плитки 64х64. как описано выше автором.
И есть набор тайлсетов 512х256. типа Лордерона. размер плитки 64х64. тоже самое 256х256, только у этих добавляется справа доп набор (теперь может добавить не 2 как раньше, а 18 видов травок. с камушками, грязь и цветочки и так далее)
есть еще тайлсеты 512х512 и 1024х512 с размерами плиток 128х128 (так понял чем больше размер тайлсета, тем больше плитка)

ну и карты, если хотите посмотреть как соединяются (не забудьте включить сетку. Вид > Сетка > Средняя)
карта 256х256
карта 512х256

хотя уже выше описано как подобрать и избавиться от швов (хотя немного сложнее это сделать). Тут зависит от задач. Если нужно целый пак тайлсетов ланда (можете как хотите задавать). Или если нужно изменить только один тайлсет (придется как-то собирать по правилам. почти повторить обводку)
прикреплены файлы
8gabriel8 #20 - 8 месяцев назад 0
Steal nerves:
есть еще тайлсеты 512х512 и 1024х512 с размерами плиток 128х128 (так понял чем больше размер тайлсета, тем больше плитка)
Разве они не масштабируются просто до 256х256 и 512х256?
Steal nerves #21 - 8 месяцев назад (отредактировано ) 0
8gabriel8, смотрел импортные. xgm.guru/p/wc3/tilesets там размеры большие, а вот масштабируются внутри игры - этого я не знаю. по идее масштаб должны сжать до нужных 256х256 и 512х256. так понимаю, чем больше картинка, тем качество выше. но весит дохера. 1.5 мб. выглядит классно.
с ландом мало дел имел. мне просто надо было почву на триггерную переделать и все.
8gabriel8 #22 - 8 месяцев назад 0
По мне они сжимаются отвратительно. Качество, конечно, высокое, но старый движок игры не обрабатывает такое изображение полностью. В итоге получаем более детализированную текстуру, но смотрящуюся гораздо хуже, чем если бы открыли эту текстуру в графическом редакторе.
Но некоторые текстуры как бы рассчитаны на то, что их сожмут, поэтому смотрятся хорошо.
Steal nerves #23 - 8 месяцев назад (отредактировано ) 0
8gabriel8, xgm.guru/p/wc3/schq-terrainart <= мало заметно просто с первого (хотя разницы не замечаю по скринам). будет видно что линии травинок, щелей и прочее лучше прорисовывается. Если взять песок, а я брал как раз такую почву один раз. то там плохо видна зерна песка, разманы. интересна будет лучше, если возьмем большую картинку?
8gabriel8, чем хуже?
8gabriel8 #24 - 8 месяцев назад 0
Steal nerves:
8gabriel8, чем хуже?
Надо не скрины, а в игре смотреть. Летая над текстурой, она словно слегка меняется. Конечно, может просто у меня так видеокарта обрабатывает, но сомневаюсь, скорее движок варика вносит оптимизацию. Например, возьмём Skyrim, он рассчитан на ультра-графику, и его большие текстуры отлично выглядят. А у варика место в ОЗУ 1 Гб, он старый, в его молодости актуальны были проблемы нехватки памяти как у оперативки, так и у видюхи, ему полегче пищу надо.
Если много декора на карте будет, то можешь и не заметить, но если голая поверхность, изогнутая разными способами, при этом текстура будет 100% качества без сжатия, то скорее всего.