XGM Forum
Сайт - Статьи - Проекты - Ресурсы - Блоги

Форуме в режиме ТОЛЬКО ЧТЕНИЕ. Вы можете задать вопросы в Q/A на сайте, либо создать свой проект или ресурс.
Вернуться   XGM Forum > Warcraft> Академия: форум для вопросов> Желтая пресса: обучающие статьи
Ник
Пароль
Войти через VK в один клик
Сайт использует только имя.

 
StMechanus
Дух сети
offline
Опыт: 11,458
Активность:
Тайлинг от А до Я
Тайлинг от А до Я


Всем привет. Сегодня я расскажу вам об очень важной вещи в LVL-дизайне: об тайлсете, точнее о том, как его создать с нуля.
Что ж, приступим к делу. Давайте разберемся, какое ПО нам понадобится:

AdobePhotoshop
BLP Lab ( советую именно эту программу, так как она позволяет очень сильно сжимать текстуры, что соответственно, экономит такие важные килобайтики)
War3ModelEditor ( подойдет любая программа, работающая с .mpq)

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


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

DEAD URLDEAD URLDEAD URL



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

DEAD URL



Так гораздо легче, будет просто понять, какая именно ячейка использовалась. Сохраняем наш тайлсет в формате .TGA и, с помощью BLP Lab, снова конвертируем в .blp. Фотошоп и наш «разукрашенный» тайлсет не закрываем.
Теперь стучимся в гости к WorldEditor'у. Создаем новую карту (в настройках берем Тип Ландшафта – «Ашенваль») и импортируем наш, конвертированный в .blp, тайлсет (путь прописываем «TerrainArt\Ashenvale\Ashen_Rock.blp»).

DEAD URLDEAD URL



Сохраняем карту и перезапускаем редактор.
Теперь наш тайлсет должен появиться на панели «Рельеф» вместо тайлсета Ashen_Rocks.blp.
Тут советую включить отображение сетки (средняя) – будет проще анализировать. Берем наш тайлсет (ручками ;) ) и делаем одиночный клик на карте.

DEAD URL



Как видите WarCraft использует не одну ячейку а сразу четыре. Смотрим в тайлсете местонахождение цветов, которые использовались (в фотошопе у нас есть открытый тайлсет, не забыли?) и запоминаем их.

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

DEAD URL



Так мы повторяем наши эксперименты, до тех пор, пока не увидим все случаи использования определенной ячейки в тайлсете.

DEAD URL



Сделав это, я понял что, «красный», «зеленый», «голубой» и «темно-синий» цвета используются для, так сказать, «сглаживания» углов в тайлсете, «синий», «оранжевый», «темно-красный» и «сине-зеленый» - для создания боков в тайлсете, «белый» цвет – для наполнения «внутренности» тайлсета, остальные цвета – для наполнения 2-клеточных и 1-клеточных диагоналей.

На основе этого я составил таблицу, в которой показано, какая ячейка, в каком случае используется и для чего предназначена.

Примечание: если вы создаете тайлсет размером 512х256, вторая его часть равносильна ячейкам 1,0 в таблице

DEAD URL



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


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

DEAD URL



Теперь нам нужно отредактировать ее, а именно: уменьшить ее, разделить на блоки и т.д. В общем, сейчас мы с вами все будем делать вместе.
Заходим в фотошоп (наш тайлсет можно закрыть, он нам не понадобится) и готовим все к работе: открываем наше изображение и создаем три новых файла, размерами 256х256, 64х64 и 500х500. Первый файл, думаю понятно, нужен для самого тайлсета, второй – для ячейки, третий – это экспериментальный, в нем мы будем соединять наши ячейки и смотреть на наличие швов и прочих багов.

DEAD URL



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

DEAD URL



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

DEAD URL



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

DEAD URL



Поздравляю, вы сделали первую ячейку. Переносим еще на файл 500х500. Теперь берем на нашем основном изображении еще несколько кусков (размер 64х64, думаю понятно ;) ) и повторяем действия выше (это нужно для создания на тайлсете разнообразия).

DEAD URL



Сделав все и переместив наши новосозданные ячейки на файл 500х500, проверяем их на наличие швов. Здесь я советую использовать мою таблицу. Смотрим по ней в каких вариациях могут соединять ячейки и проверяем все на файле 500х500.

DEAD URL



Устраняем все погрешности, размазанности и т.п. (я использовал инструменты «штамп» и «Восстанавливающая кисть») и переносим на наш будущий тайлсет (файл 256х256). Тут выставляем ячейки как вам угодно - на результат не влияет, только на порядок отображения в WarCraft.

DEAD URL



Теперь идем на вкладку «каналы» и создаем там два альфа-канала. На нижнем делаем сетку. Для этого переходим на файл 64х64, удаляем оттуда все, затем делаем выделение всего на пустом слое и стучимся к «Выполнить обводку» (размер 1 пиксель, цвет «черный», способ отображения – «по центру». Копируем созданную клетку на альфа-канал и размещаем по всей поверхности.

DEAD URL



Идем дальше. Переходим на основной альфа-канал и начинаем рисовать его (не забываем сверяться с таблицей, чтобы не получилось разбежностей. Для тех, кому этот способ не удобен, можете, нарисовав одну ячейку, сверять ее с другой путем перетаскивания). Если у вас текстура не объемная, как у меня, советую сделать края полупрозрачными. Так тайлсет будет выглядеть более аккуратным.

DEAD URL



Закончив с основным каналом, удаляем «клеточный».


DEAD URL



Ну и последние штрихи. Убираем на самом изображении лишнее, сверяясь с альфой, и убираем последние погрешности.

DEAD URL



Теперь сохраняем наш тайлсет в формате .Tga (Разрешение – 32 бит/пиксель). Конвертируем в формат .Blp, с помощью BLP Lab и импортируем в игру, прописав при этом путь замены, например, «TerrainArt\Ashenvale\Ashen_Rock.blp».
Наслаждаемся результатом.

DEAD URL




Смотрите также
Тайлинг от А до Я. Редактирование готовых тайлсетов



Всем Спасибо за внимание. Статья написана в рамках программы Сообщества св.Механики и Пиратской Партии
Прикрепленные файлы
Тип файла: blp Test.blp (104.7 Кбайт, 132 просмотров )

Отредактировано Djok, 14.08.2010 в 16:43.
Старый 13.08.2010, 12:21
WebSter
Товарищ Mechanicus
offline
Опыт: 86,111
Активность:
Хорошая, в целом, статья, но стоило бы описать возможности избавления от "тайловости", т. е. очевидного повторения одного и того же элемнета; как сделать правильную светотень на границах и прочие немаловажные мелочи. Также в статье упущено описание тайлов формата 512x256.
И один вопрос: каков вклад ПП в работу?

Отредактировано WebSter, 13.08.2010 в 14:18.
Старый 13.08.2010, 14:04
reALien

offline
Опыт: 29,211
Активность:
Ну вот теперь это похоже на обучающую статью.
Структурная таблица ставит все точки над Ё.
Молодец, видно что постарался при подготовке материала.
Теперь, я думаю, каждый сможет разобраться что в этом к чему.
Старый 13.08.2010, 14:04
StMechanus
Дух сети
offline
Опыт: 11,458
Активность:
Цитата:
Также в статье упущено описание тайлов формата 512x256.


ничего не упущено =) посмотрит таблицу. Там с правой стороны идет ответвление, которое поясняет, что все остальные тайлы, тоесть еще 256х256 из тех 512х256 равносильны тайлам 1,0, что значит что они используются в одном и том же случае.
Старый 13.08.2010, 14:18
WebSter
Товарищ Mechanicus
offline
Опыт: 86,111
Активность:
Djok, а что, в тексте об этом говорить не надо? И о том, что вообще бывают такие тайлы.
Старый 13.08.2010, 14:18
StMechanus
Дух сети
offline
Опыт: 11,458
Активность:
Цитата:
но стоило бы описать возможности избавления от "тайловости", т. е. очевидного повторения одного и того же элемнета;


Это тоже не упущено. Читай:

Цитата:
Поздравляю, вы сделали первую ячейку. Переносим еще на файл 500х500. Теперь берем на нашем основном изображении еще несколько кусков (размер 64х64, думаю понятно ;) ) и повторяем действия выше (это нужно для создания на тайлсете разнообразия).


насчет этого.
Цитата:
как сделать правильную светотень на границах


к сожалению, универсального способа нет, все зависит от того какой материал используется. Я пытался разобраться и вывести уневерсальный способ редактирования, но все сводилось к тому, что при создании 8 тайлсетов, пришлось использовать 8 разных способов редактирования =/, что не удобно, к сожалению. Возможно мне удастся найти решение, хотя это врятли, тогда статью дополню ;)

Djok добавил:
Цитата:
Djok, а что, в тексте об этом говорить не надо? И о том, что вообще бывают такие тайлы.


чесно сказать думал это и из изображения понятно... =(

Djok добавил:
+ в начале статьи я упомянул, что тайлсеты в Варе должны быть 256х256 и больше, что наводит на вывод, что большие тайлы создать можно =), ну ничего поправим =) это не проблема...
Старый 13.08.2010, 14:23
Batisto

offline
Опыт: 13,217
Активность:
Статья отличная, все рассписанно и содержательная. В базу!
Старый 13.08.2010, 14:24
WebSter
Товарищ Mechanicus
offline
Опыт: 86,111
Активность:
Djok, раз уж это статья, то всё в ней нужно описывать точно и явно, без намёков и догадок, чтобы избежать любых недоразумений. Тайловость нужно описать отдельно, там можно потратить немало текста, а не пару слов в скобках. Аналогично и про 512х256. Читатель должен понимать всё с первого раза, а не вчитываться и всматриваться, думая о том, не упустил ли чего из виду.
Djok:
к сожалению, универсального способа нет, все зависит от того какой материал используется. Я пытался разобраться и вывести уневерсальный способ редактирования, но все сводилось к тому, что при создании 8 тайлсетов, пришлось использовать 8 разных способов редактирования =/, что не удобно, к сожалению. Возможно мне удастся найти решение, хотя это врятли, тогда статью дополню ;)
напиши хотя бы с какой стороны на каждой ячейке должен падать свет, как в варовсеих стандартных тайлах)
Старый 13.08.2010, 14:29
StMechanus
Дух сети
offline
Опыт: 11,458
Активность:
Цитата:
Статья отличная, все рассписанно и содержательная. В базу!


Спасибо, приятно слышать.
Старый 13.08.2010, 14:29
Batisto

offline
Опыт: 13,217
Активность:
Хотя можно было б поподробнее "нубам" в этом деле рассказать об альфа канале...
Jonny_Dillinger добавил:
Тоесть сделать все попунктно чтоле.
  1. Заходим в кладку Альфа канал идем туда то и то....
Я про ето. Расписать подробнее чтобы еще проще и легче было))
Старый 13.08.2010, 14:31
StMechanus
Дух сети
offline
Опыт: 11,458
Активность:
Цитата:
Djok, раз уж это статья, то всё в ней нужно описывать точно и явно, без намёков и догадок, чтобы избежать любых недоразумений. Тайловость нужно описать отдельно


ок, дополним

Цитата:
Аналогично и про 512х256.

добавил примечание, перед таблицей

Цитата:
напиши хотя бы с какой стороны на каждой ячейке должен падать свет)


ну не знаю, постараюсь написать по понятней, ибо тут геморой внеземной =)

Djok добавил:
Цитата:
Хотя можно было б поподробнее "нубам" в этом деле рассказать об альфа канале


в принципе для нубов есть статья об редактировании, где вся соль в простой замене изображения, без каких либо вмешательств в структуру. Ну коль народ просит, сегодня буду учить брата (он ни разу редактор не открывал) как это делать, так сказать буду дописывать в живую
Старый 13.08.2010, 14:34
ZiDI
0-Hedgehog =0
offline
Опыт: 1,726
Активность:
Отличная статья. Меня как раз интересовала структура тайлсета
Старый 13.08.2010, 18:37
PUVer
За GW!
offline
Опыт: 114,313
Активность:
Цитата:
Сообщение от Djok
Идем в гости к War3ModelEditor (в моем случае), заходим в Окно>>Браузер MPQ-архивов (или г.к. “B”) и экспортируем оттуда готовый тайлсет, например, war3.mpq >> “TerrainArt\Dalaran\Dalaran_BrickTiles.blp”. С помощью BLP Lab конвертируем его в формат .TGA и открываем в фотошопе.

Лишняя трата времени и слишком неудобно.Легче использовать Warcraft 3 Viewer.С помощью его можно сразу вытащить тайслет в формате TGA.
Старый 13.08.2010, 22:21
WebSter
Товарищ Mechanicus
offline
Опыт: 86,111
Активность:
PUVer:
Лишняя трата времени и слишком неудобно.Легче использовать Warcraft 3 Viewer.С помощью его можно сразу вытащить тайслет в формате TGA.
ну автор пользуется этим способом, кто ж тебе мешает делать так, как хочется?
Старый 13.08.2010, 22:27
PUVer
За GW!
offline
Опыт: 114,313
Активность:
Цитата:
Сообщение от WebSter
ну автор пользуется этим способом, кто ж тебе мешает делать так, как хочется?

Ну если он пользуется этим способом, то зачем морочить голову читателям?или это реклама прог?
Согласитесь нубу будет гораздо легче воспользоваться Warcraft 3 Viewer, нежели юзать кучу прог.
Старый 13.08.2010, 22:36
StMechanus
Дух сети
offline
Опыт: 11,458
Активность:
Никакая это не реклама, просто я привык пользоваться данным набором программ вот и все
Старый 14.08.2010, 02:40

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы можете скачивать файлы

BB-коды Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход



Часовой пояс GMT +3, время: 01:00.