StMechanus
Дух сети
offline
Опыт:
11,608Активность: |
Тайлинг от А до Я
Тайлинг от А до Я Всем привет. Сегодня я расскажу вам об очень важной вещи в 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Закончив с основным каналом, удаляем «клеточный».
|
13.08.2010, 12:21 | #1
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
WebSter
Товарищ Mechanicus
offline
Опыт:
86,111Активность: |
Хорошая, в целом, статья, но стоило бы описать возможности избавления от "тайловости", т. е. очевидного повторения одного и того же элемнета; как сделать правильную светотень на границах и прочие немаловажные мелочи. Также в статье упущено описание тайлов формата 512x256. И один вопрос: каков вклад ПП в работу? Отредактировано WebSter, 13.08.2010 в 14:18. |
13.08.2010, 14:04 | #2
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
reALien
offline
Опыт:
29,211Активность: |
Ну вот теперь это похоже на обучающую статью. Структурная таблица ставит все точки над Ё. Молодец, видно что постарался при подготовке материала. Теперь, я думаю, каждый сможет разобраться что в этом к чему. |
13.08.2010, 14:04 | #3
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
StMechanus
Дух сети
offline
Опыт:
11,608Активность: |
Цитата:
ничего не упущено =) посмотрит таблицу. Там с правой стороны идет ответвление, которое поясняет, что все остальные тайлы, тоесть еще 256х256 из тех 512х256 равносильны тайлам 1,0, что значит что они используются в одном и том же случае. |
|
13.08.2010, 14:18 | #4
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
WebSter
Товарищ Mechanicus
offline
Опыт:
86,111Активность: |
Djok, а что, в тексте об этом говорить не надо? И о том, что вообще бывают такие тайлы. |
13.08.2010, 14:18 | #5
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
StMechanus
Дух сети
offline
Опыт:
11,608Активность: |
Цитата:
Это тоже не упущено. Читай: Цитата:
насчет этого. Цитата:
к сожалению, универсального способа нет, все зависит от того какой материал используется. Я пытался разобраться и вывести уневерсальный способ редактирования, но все сводилось к тому, что при создании 8 тайлсетов, пришлось использовать 8 разных способов редактирования =/, что не удобно, к сожалению. Возможно мне удастся найти решение, хотя это врятли, тогда статью дополню ;) Djok добавил: Цитата:
чесно сказать думал это и из изображения понятно... =( Djok добавил: + в начале статьи я упомянул, что тайлсеты в Варе должны быть 256х256 и больше, что наводит на вывод, что большие тайлы создать можно =), ну ничего поправим =) это не проблема... |
||||
13.08.2010, 14:23 | #6
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
Batisto
offline
Опыт:
13,217Активность: |
Статья отличная, все рассписанно и содержательная. В базу! |
13.08.2010, 14:24 | #7
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
WebSter
Товарищ Mechanicus
offline
Опыт:
86,111Активность: |
Djok, раз уж это статья, то всё в ней нужно описывать точно и явно, без намёков и догадок, чтобы избежать любых недоразумений. Тайловость нужно описать отдельно, там можно потратить немало текста, а не пару слов в скобках. Аналогично и про 512х256. Читатель должен понимать всё с первого раза, а не вчитываться и всматриваться, думая о том, не упустил ли чего из виду. Djok: напиши хотя бы с какой стороны на каждой ячейке должен падать свет, как в варовсеих стандартных тайлах) |
13.08.2010, 14:29 | #8
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
StMechanus
Дух сети
offline
Опыт:
11,608Активность: |
Цитата:
Спасибо, приятно слышать. |
|
13.08.2010, 14:29 | #9
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
Batisto
offline
Опыт:
13,217Активность: |
Хотя можно было б поподробнее "нубам" в этом деле рассказать об альфа канале...
Jonny_Dillinger добавил:
Тоесть сделать все попунктно чтоле.
Я про ето. Расписать подробнее чтобы еще проще и легче было)) |
13.08.2010, 14:31 | #10
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
StMechanus
Дух сети
offline
Опыт:
11,608Активность: |
Цитата:
ок, дополним Цитата:
добавил примечание, перед таблицей Цитата:
ну не знаю, постараюсь написать по понятней, ибо тут геморой внеземной =) Djok добавил: Цитата:
в принципе для нубов есть статья об редактировании, где вся соль в простой замене изображения, без каких либо вмешательств в структуру. Ну коль народ просит, сегодня буду учить брата (он ни разу редактор не открывал) как это делать, так сказать буду дописывать в живую |
||||
13.08.2010, 14:34 | #11
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
ZiDI
0-Hedgehog =0
offline
Опыт:
1,726Активность: |
Отличная статья. Меня как раз интересовала структура тайлсета |
13.08.2010, 18:37 | #12
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
PUVer
За GW!
online
Опыт:
130,808Активность: |
Цитата:
Лишняя трата времени и слишком неудобно.Легче использовать Warcraft 3 Viewer.С помощью его можно сразу вытащить тайслет в формате TGA. |
|
13.08.2010, 22:21 | #13
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
WebSter
Товарищ Mechanicus
offline
Опыт:
86,111Активность: |
PUVer:
ну автор пользуется этим способом, кто ж тебе мешает делать так, как хочется? |
13.08.2010, 22:27 | #14
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
PUVer
За GW!
online
Опыт:
130,808Активность: |
Цитата:
Ну если он пользуется этим способом, то зачем морочить голову читателям?или это реклама прог? Согласитесь нубу будет гораздо легче воспользоваться Warcraft 3 Viewer, нежели юзать кучу прог. |
|
13.08.2010, 22:36 | #15
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|
StMechanus
Дух сети
offline
Опыт:
11,608Активность: |
Никакая это не реклама, просто я привык пользоваться данным набором программ вот и все |
14.08.2010, 02:40 | #16
+0/−0
Профиль |
Приват |
Поиск |
IP: Записан
|