Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

В этом руководстве я опишу базовый метод создания анимрованной текстуры или спрея для игры. Для сего нам с вами понадобится всего лишь 1 программа — VTF Edit.

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Даже при помощи приложения VTF Edit можно создать анимированную текстуру при этом не использовать редакторы типа Paint.NET, Photoshop и другие.

1. Подготовьте изображения, которые будут использоваться в качестве анимации и отложите их в отдельную папку. При желании вы можете пронумеровать каждый файл, как у меня:

2. Запустите VTF Edit, нажмите File → Import:

3. Через открывшийся программой проводник выберите файлы из вашей папки и импортируйте их в программу:

После выбора файлов для импортирования перед вам появится окошко настройки свойств вашей текстуры или спрея. Всё, что вам нужно — это указать тип текстуры: Animated Texture, и выбрать размер холста текстуры для отображения в игре.

4. Проверьте анимацию вашего спрея или текстуры:

А затем нажмите: File → Export и сохраните вашу анимированную текстуру или спрей.

Последний шаг: Вам осталось создать VMT файл и прописать туда параметры для вашей текстуры или спрея.

Откройте базовый блокнот или текстовый редактор Windows и скопируйте туда этот код:

Не забудьте изменить вот эту строчку:
«$baseTexture» «animated/название_вашей_текстуры»

Параметр: «animatedTextureFrameRate» «1» — Отвечает за скорость кадров в секунду. Чтобы подобрать нужную скорость, вам придётся поиграться с этим параметром. Однако могу сказать, что обычно многие пользователи ставят 150 или 300. Если вам нужно чуть-чуть медленно, то в районе от 30

. Проверить всё равно придётся, не всегда и не у многих с 1 раза получается настроить нормальную частоту кадров в секунду.

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

General:
Normal Format — Формат сжатия текстуры.
Alpha Format — Формат альфа канала (зависит от TGA или PNG изображения).

Texture type:
Animated Texture — Параметр работает только если текстура содержит не более 2 кадров.
Environment Texture — Текстура env_map, создание текстуры пользовательского отражения.
Volume Texture — Текстура по умолчанию [базовая].

Resize — Размер текстуры. Например: 64×64 — 128×128 — 256×256 — 1024×1024

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

Generate MipMaps — Этот параметр влияет на нагрузку текстуры на видео, память и так далее.

Источник

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

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

Ежели вы уже с этим работали и владеете навыком создания, то приятного вам чтения.

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

В этом руководстве мы будем использовать такие программы как:

— Фотошоп (версия CS5 или выше)
— Всё тот же GIMP
— Paint.NET
— VTF Edit (как же без него)

Обратите внимание, что даже Paint.NET способен на создание таких текстур, но, как и в предыдущей статье покажу вам пример в Фотошоп.

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

Я же попробую сделать из этой анимационной картинки — спрей.

Имейте в виду, вам придётся разбить картинки на несколько кадров, чтобы получить анимированный спрей.

Чтобы сделать анимированный спрей, нужно знать, что картинка должна соответствовать ограничениям размера. Полноценное изображение с анимацией не может превышать 512 КБ, поэтому это означает, что файл, который мы используем, будет слишком большим. Это также должно быть:

512 на 512 пикселей (этот размер не рекомендуется для анимированных спреев)
256 на 256 пикселей
128 на 128 пикселей

Так, как мне нужно преобразовать изображение как можно меньше, я возьму размер 128 на 128 пикселей.

Запускаем Фотошоп и нажимаем «Файл» → «Открыть», а затем выбираем своё анимационное изображение.

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

При открытии размер картинки составляет: 499 на 281 пиксель. Чтобы он работал в TF2, нам нужно будет изменить его на один из перечисленных выше размеров. Увидев, что весь интерес к изображению находится на пингвине, я создам новый холст, нажав File → New и задам высоту и ширину холста на 128 на 128 пикселей.

Откройте анимированные изображение и новый маленький холст. Выберите все слои изображения и перетащите их на холст, который мы создали размером 128 на 128.

После переноса выберите инструмент «Move tool» в русской версии это: «Перенос» и убедитесь, что вы включили «Show Transform Control», расположенные на верхней панели.

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

Уменьшаем изображение до примерно нужно нам размера, у меня же получилось вот так:

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

В настоящее время наш образ имеет 18 кадров, в пределах этих 18 фреймов бутылки три раза соскальзывают, а рот и глаза открываются один раз. Это означает, что у нас есть место, когда дело доходит до удаления кадров, чтобы сделать цикл короче.

Вы можете поиграть с кадрами, показывая и скрывая их, используя иконку глаза, расположенную с левой стороны слоя. Я выделил это на изображении ниже, смотрите на желтый цвет:

В моем примере я удалил всё, кроме четырех слоев. Это создает цикл с четырьмя кадрами, что означает, что размер будет довольно небольшим. Цикл не будет идеальным, но это характер зверя.

Попробую сказать проще: Вам нужно сохранить каждый кадр отдельно. То есть, выбираете первый кадр и сохраняете его назвав «frame1», затем выбираете второй и сохраняете его с названием «frame2», и так далее со всеми кадрами.

У меня их получится 4 штуки. У вас должно получится примерно вот так:

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

Как и в предыдущей статье, я на всякий случай укажу ссылку на скачивание программы VTF Edit, если вы читаете это руководство первый раз переходите по ссылке и скачайте его на ваш ПК:

http://nemesis.thewavelength.net/files/files/vtfedit125-11.exe
————————————————————————————————————————————
Запустите VTF Edit и нажмите File → Import, выберите все файлы, возможно на некоторых операционных системах потребуется удерживать клавишу Shift при выборе нескольких изображений.

После того как вы откроете ваши *.tga файлы, вас встретит меню VTF Options. Ниже приведены настройки, которые я использовал. Я изменил свой зажим на 128 на 128, так как это размер изображений, но все остальное установлено на значения по умолчанию.

Теперь ваша анимация загружена в VTFEdit. Если вы хотите просмотреть его, вы можете сделать это, нажав кнопку Play, расположенную с левой стороны в боковом меню.

Последнее, что нам нужно сделать в этой программе — это проверить два параметра под флажками слева. Убедитесь, что No Mipmap и No Level Of Detail не проверены, это гарантирует, что спрей будет казаться качественным в игре независимо от того, кто его просматривает. Я выделил эти настройки ниже.

Всё готово, нажимаем: File → Save as. и сохраняем ваше анимационный спрей. Чтобы создать *.vmt файл к вашему спрею, вам нужно нажать: Tools → Create VMT — С помощью этого окошка вы сможете создать *.vmt файл для вашего спрея.

Заключительный этап, вам нужно закинуть спрей в папку с игрой. Откройте директорию игры Team Fortress 2 и установите ваш спрей:

Затем зайдите в игру, откройте Настройки → Сетевой режим и импортируйте ваш спрей.

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

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

Источник

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Как сделать спрей vtf

Для тех, кто не хочет делать все вручную, существует веб-приложение: https://mishcatt.github.io/VTF-Editor/

Примерно так можно вычислить вес в КБ для форматов DXT3 и DXT5:

Можно заранее вычислить это значение и проверить превысит ли размер спрея 512КБ.

На протяжении всего руководства я буду делать спрей и отсылаться на свой вариант в качестве примера. Исходная гифка из примера:

Я пытался написать это руководство так, чтобы по нему можно было создать спрей с любой комбинацией свойств: анимированный, прозрачный, переливающийся, поэтому в некоторых местах могут возникать ответвления и дополнительные пометки.

Для создания спрея нам понадобятся программы VTFEdit, VIDE и какой-нибудь растровый графический редактор.

Это первая программа, которая нужна для создания файла текстуры нашего спрея

Теперь давайте разберёмся какой спрей мы хотим.

Можно нарисовать все кадры и мипмапы [ru.wikipedia.org] в графическом редакторе. В этом случае можно пропустить этапы разбиения гифки на кадры и подгонку размеров к степеням двойки и нарисовать всё уже в правильных размерах.

На этой странице перед разбиением на кадры так же можно подогнать размеры, удалить кадры, изменить скорость или добавить текст или эффекты. Для этого можно после загрузки гифки на сайт нажать на одну из этих кнопок:

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

Изменение размеров изображения или холста в Paint NET

В моём случае ширина кадра уже была равна 128 (т.е степень двойки 2^7), а вот высота была равна 96 пикселям. я решил увеличить её до 128.

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

Так как в гифке было всего два кадра, можно увеличить разрешение изображения и уместиться в 512 КБ. Более высокое разрешение важно в моём случае, т.к. при низком разрешении пиксельное изображение в игре превратится в размазню.
Следующей по величине степенью двойки идём 2^8 = 256, такой размер и сделаем

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

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

Те же действия проделаем с оставшимися кадрами.

Чтобы наш спрей переливался и выглядел с разных расстояний по-разному нам нужны разные кадры для разных расстояний. Можно выбрать другую гифку, в которой такое же количество кадров (и проделать с ней те же операции), а можно каким-нибудь образом изменить текущие кадры (например изменить цветовой тон).

Стоит так же учитывать, что, кадры предназначенные для дальних расстояний должны быть меньшего размера, по сравнению с теми, что предназначены для ближних. Например Исходный размер всех кадров, которые будут видны при ближнем рассмотрении спрея, 256×256, следующий набор кадров должен быть размера 128×128, то есть в два раза меньше. И так далее, чем больше наборов кадров, тем красивее, но, как правило, для того, чтобы был заметен эффект переливания, больше двух наборов кадров не требуется.

Для красоты я решил сделать еще один набор кадров уже размера 64×64 и опять изменил оттенок на 120 (а потом можно будет зациклить, то есть использовать для 32×32 изображение из 256×256)

Теперь у меня есть три набора кадров, по 2 кадра в каждом.

Приступим к созданию текстуры спрея.

Откроется окно параметров текстуры. Ниже я привел скриншоты моих параметров. Там, где помечено красным, нужно установить такое же значение, за исключением Aplha format (здесь можно выбрать тот формат, который вам нужен), остальное можно оставить без изменений.
Если вам не нужен эффект переливания, то можно убрать галочку Generate Mipmaps и сократить вес файла примерно в 2 раза.

После установки параметров текстуры можно нажать на кнопку Ок

На вкладке Image можно (но не в моём примере) установить флаг Point sampling, если не важен эффект переливания и нужно, чтобы границы пикселей чётко прорисовывались.

На вкладке Info показывается вес файла текстуры (Size). Тут можно проверить не превышает ли он 512 КB. Если так получилось, что вес выше 512КБ, еще не поздно Сделать Import заново, выбрать меньше кадров или указать другой формат текстуры. Если по прежнему не получается уложиться, придётся уменьшать размер изображений (в два раза). Проще всего это сделать при установке параметров текстуры на первой вкладке General поставить галочки Resize и Clamp и указать нужный размер.

Следующие действия можно не выполнять, если вам НЕ нужен эффект переливания.

Разворачиваем второй снизу набор кадров, нажимаем правой кнопкой мыши на первый кадр (Frame 0) в развёрнутом списке и выбираем пункт From file.
В открывшемся окне выбираем подготовленный нами заранее первый кадр второго набора

Таким же образом подменяем второй кадр второго набора на свой.
У меня есть ещё третий набор кадров, и мне его тоже нужно подменить (розовый слайм).

В списке осталось еще несколько наборов кадров вплоть до размера 1×1. Там можно воспользоваться пунктом From Image. и, так сказать, зациклить наборы кадров. То есть четвёртый набор кадров будет уменьшенной в 8 раз (2^3, т.к. «циклятся» три набора кадров) копией первого набора

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

Чтобы игра увидела наш файл текстуры спрея, нужно создать файл материала (VMT), создадим его!

Осталось только зайти в игру, в главном меню зайти в настройки, на вкладке Other выбрать из списка свой новый спрей и нажать OK.

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

Возможно, в пути к VIDE.exe есть пробелы или нелатинские символы (русские буквы например) или программа запущена прямо из архива. Распакуйте из архива папку с программой в нормальное место (не рабочий стол) куда-нибудь в корень жесткого диска, например, чтобы вышло как-нибудь так «D:/MySprays/VIDE/VIDE.exe».

Скорее всего текущим игровым режимом или сервером выключена возможность ставить спреи. Зайдите в другой режим, например в песочницу.

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

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

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

Если сильно нужно, могу попытаться записать видео по этому руководству, может кто-то так лучше понимает и усваивает.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *