Как сделать спрей vtfedit
Как сделать спрей vtfedit
В этом руководстве я опишу базовый метод создания анимрованной текстуры или спрея для игры. Для сего нам с вами понадобится всего лишь 1 программа — VTF Edit.
Даже при помощи приложения 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 — Этот параметр влияет на нагрузку текстуры на видео, память и так далее.
Как сделать спрей vtfedit
Перед началом, как и большинство авторов других руководств, я хотел бы порекомендовать вам ознакомится с моим предыдущим руководством созданным на тему создания дистанционного спрея.
Ежели вы уже с этим работали и владеете навыком создания, то приятного вам чтения.
Как вы могли обратить внимание, в каждом руководстве я стараюсь разнообразить список программ, чтобы вы попробовали себя в работе с новыми для вас программами и получили новые для себя навыки.
В этом руководстве мы будем использовать такие программы как:
— Фотошоп (версия 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 и установите ваш спрей:
Затем зайдите в игру, откройте Настройки → Сетевой режим и импортируйте ваш спрей.
Теперь давайте проверим то, что мы только что сделали — в игре. Найдите любой сервер, зайдите на него и попробуйте нарисовать спрей в любом месте на карте, вот что должно получится:
Если у вас что-то не получилось, перечитайте руководство, возможно вы что-то пропустили.
Как сделать спрей vtfedit
Обычно новички используют встроенную в саму игру возможность использовать свою картинку в качестве спрея. Однако игра делает это дело скверно. Не верите?
Для начала, попытаемся понять, что делает TF2 с нашими картинками. Создадим тестовую картинку без прозрачности размером 512х512 пикселей, и «скормим» её игре. После этого поищем свежий файл spray.vtf в каталоге Steam’а. Нашли? Окей. Его размер около 40 кб; откроем его в утилите VTFEdit.
Смотрим, что написано во вкладке «info». А написано там такое – тип сжатия DXT1, размер 256х256 пикселей. То есть, игра мало того, что уменьшила размер картинки, так еще и отчасти испортила её специфическим текстурным сжатием. Теперь подсунем игре картинку в формате tga, с прозрачными областями. Повторяем процедуру, и видим, что используется сжатие DXT5, размер картинки 256х256, размер файла 87 кб.
Закроем VTFEdit, и запустим его заново. Опять пытаемся импортировать нашу картинку. Но на этот раз выберем сжатие DXT5. Еще стоит обратить внимание на вот что: снять галочки с Resize и Generate Normal Maps, а еще лучше включить галочку Generate Mipmaps, и там выбрать Mipmap filter: Box (upd: нет, только не Box: у него в vtfedit кривая реализация, уж лучше Blackman или «Кайзер») и Sharpen filter: none.
Типичные настройки импорта в VTFEdit:
Кроме того, после импорта, в левой панели стоит взвести два флажка: «anisotropic filtering» и «no level of details». Фактически, это означает «игнорировать настройки детализации игры и показывать спрей всегда с максимальным качеством.
Записываем спрей. Размер файла – 340 кб. Ура! Наш высококачественный спрей готов. Конечно, сжатие DXT5 немного испортило картинку, но выглядит она в своих 512х512 все равно лучше, чем, например, та же картинка в 256х256 без сжатия.
А реально используются лишь RGBA8888, DXT5, DXT3 и DXT1.
Цифры для сравнения: картинка 512х512 без сжатия – 1 Мб (не годится по размеру для спрея), в DXT5 – 256 Кб, в DXT1 – 128 Кб.
«Прозрачность» (и полупрозрачность) хранится в отдельном слое «A» (alpha-канал). И, соответственно, занимает место. до 1/4 в режиме без сжатия и до 1/2 второй в режиме со сжатием DXT3 и DXT5.
Если взвести галочку «Generate Mipmaps», файл спрея резко начнёт занимать примерно на треть больше места.
Почему? Да потому, что эта галочка позволяет сохранить в теле файла спрея его уменьшенные со сглаживанием копии. Они показываются игре, когда игрок отдаляется от текстуры. Чем дальше точка зрения, тем меньший кадр достается из обоймы и предъявляется усталому взору игрока. Это нужно для того, чтобы картинка в отдалении неприятно не мерцала муаром – который видеокарта просто не может устранить; видеоакселераторы умеют растягивать текстуры, но не умеют уменьшать их. Поэтому уменьшение производится заранее, еще на этапе подготовки любой текстуры в игре.
Выглядит это внутри нашего спрея примерно так:
Обратите внимание, картинка уменьшается вплоть до размера одной точки.
Что до подготовки мипмап в VTFEdit’е, на мой взгляд, лучший фильтр для мипмапов – «Box» c резкостью «none» или «sharpen soft». Дело в том, что алгоритм «Box» создан как раз для уменьшения картинки в кратное число раз, а именно так мипмапы и генерируются: каждая текстурка в них – уменьшенная вдвое копия предыдущей. UPD: Практика показала, что по-настоящему высококачественных алгоритмов изменения размера в составе VTFEdit-а увы, нет. Теперь я обычно пользуюсь для создания мипмап алгоритмом Blackman’а, c резкостью None. В таком случае резкости бывает маловато. Компенсировать этот эффект не выходит. Даже самый слабый алгоритм наведения резкости (sharpen soft) даёт слишком много резкости. Выходом могла бы служить выгрузка текстуры в DDS-формате (как при создании спреев-переливачек), и ручное составление мипмап, но увы, это слишком кропотливая работа, одна из тех, про которую говорят, что «игра не стоит свеч».
Кроме того, мипмапы используются в создании спреев-переливачек, но об этом дальше.
Ничего сложного. Просто отметьте несколько файлов при импорте в VTFEdit – и получите свою анимацию.
⅓ размера файла). Можно избавится и от прозрачности, чтобы получить вполтора раза больше места, если это уместно на конкретной картинке, разумеется. Или уменьшить размер кадра с 512х512 до 256х256 или даже еще ниже.
Вот некоторые цифры, полученные опытным путем, они помогут в создании анимации:
Темп анимации – 5 кадров в секунду. Кажется, это число изменить нельзя. (?)
Вы должно быть видели такие спреи – подходишь к ним ближе, и картинка изменяется.
Как это работает? В мипмапе, во всех её «кадрах», картинка должна быть одна и та же – только разного размера. Но если мы заменим один из кадров – получим именно то, что хотели.
Здесь нам потребуются некоторые специальные утилиты.
Я позже напишу инструкцию подробную инструкцию, а пока пусть будет черновичок:
Где-то мне попадался еще другой способ формирования мип-мап; и тот, второй способ мне нравился больше; состав инструментов был почти таким же, но, кажется без directx sdk, а замена картинки производилась прямо в Фотошопе. Но что-то не могу это воспроизвести. Упоминаю я здесь потому, что взялся описывать качественные техпроцессы, так вот, этот способ был менее удобным, но качество на выходе давал лучше, потому что качество сжатия dxt у nvidia-вского плагина выше, чем у тулзы из микрософтовского сдк.
Коротко: взводите эти флажки, если хотите получить спрей максимального качества.
Как сделать спрей vtfedit
Important thing to note when it comes to making sprays is that they cannot exceed 512 KB in file size. If a spray does not stay under that limit then it cannot unfortunately be used as a spray. This is a limit for sprays in all Source games made by Valve.
In order to ensure that the spray does not exceed the 512 KB limit it is important to know how many frames you can afford to use depending on the chosen image format (compression) and resolution.
The DXT formats (DXT1 and DXT5) are compressed formats. This means that they will be the best options to use if you want to have the most amount of frames or the biggest resolution. The downside is that the colour depth is slightly decreased, but the compression does a good job hiding it for the most part. The limited colour depth is more noticeable on certain colours.
The BGR888, BGRA8888 and BGR565 formats are uncompressed formats, giving you the best looking spray quality. However, using these formats will increase your spray file size by a lot so it is not suitable for sprays with many frames or with big texture resolutions.
BGR565 is similar to BGR888 except it has a limited colour depth. It serves a great purpose for sprays and can help keep the file size lower without causing compression artifacts to the colours. Consider using it for pixel-art sprays where you need the extra frames, like this guide’s avatar.
Here are some tables I have made which will go through the five common image compression formats. They show just how many frames you can afford to use depending on the used resolution and compression. «(Alpha)» means that they have transparency support for transparent images. You should not use alpha supported image formats if your spray does not need it, as it only increases the file size with no visual improvement.
Please be aware that the following specifications does not include mipmaps! It is not advised to use mipmaps because that is going to cause your spray to increase in file size even more than necessary.
First time using GIMP? You may want to click on «Windows» and make sure «Single-Windowed Mode» is selected before continuing with the guide.
Some GIFs may be «optimized» causing each layer to be rendered on top of each other every frame, this is a technique done to reduce the file size of animated GIFs. This is a bad thing and will cause the layers to look like the image below:
Unoptimize the layers by going to Filters > Animation > Unoptimize.
After unoptimizing the layers it should no longer have any weird optimization issues, like the image below:
Make sure the image size is a power of 2 (64×64, 128×128, 256×256, 512×512).
Sinc (Lanczos3) is best used for pixel art featuring pixels and aliased edges, like the spray used in the guide avatar. If you use it, divide/multiply the source material’s size by 2/3/4 etc so all pixels stay the same size. Count the pixel size so you do not accidentally mess up and make the pixel-size inconsistent/distorted.
Go to File > Export Layers. and select the destination where you wish to export the layers, then click on Export Layers.
Make sure the image size is a power of 2 (64×64, 128×128, 256×256, 512×512).
Bilinear is what I personally use the most when it comes to resizing images. There are times when I may want to use the other resampling options however, as it depends on the images used. For a good summary of what they all mean, look at the parentheses.
Nearest Neighbor is best used for pixel art featuring pixels and aliased edges, like the spray used in the guide avatar. If you use it, divide/multiply the source material’s size by 2/3/4 etc so all pixels stay the same size. Count the pixel size so you do not accidentally mess up and make the pixel-size inconsistent/distorted.
Before you do that though, you may have to reverse the layers so they will be exported in the correct order. Images are sorted based on their names in VTFEdit once you’re adding them, so if the numeric order is incorrect it will play in reverse.
To reverse all layers, select all layers by going to Select > All Layers and then go to Layer > Arrange > Reverse.
Go to File > Scripts > Export Layers to Files. and browse to the destination where you wish to export the layers. Give them a file name prefix and select PNG-24 as the file type. The following options like the image below should be fine:
Transparency should only be used if your image contains any transparency (alpha channel).
Now that you are done with either the GIMP walkthrough or the Photoshop walkthrough, it is time to guide you through VTFEdit. We will be going through the entire process in one go.
The Image tab allows you to click on Play to see the animation in motion, although it will play a lot faster than in-game. In-game sprays are unfortunately restricted to a framerate of 5 frames per second. You can also go through every frame in the Frame list manually.
The Info tab shows you the file size of your spray, how many frames it has and what image format it uses.
To the left in the Image tab there is a Flags section with different checkboxes. Each flag gives the spray a different property where most of them change the way the spray looks. A couple of flags that you may want to be aware of for your sprays are:
No Mipmap (we skipped including mipmaps so this can be enabled)
No Level of Detail (spray quality is not affected by players’ texture quality setting)
Clamp S (often used for sprays that are transparent, clamps S coordinates)
Clamp T (often used for sprays that are transparent, clamps T coordinates)
Point Sample («pixel art» texture filtering, works great for sprites and pixelated art)
Click on File >Save As. and give the spray a name and save it wherever you want.
Now that you have the VTF texture file, it is time to import it to TF2. If you already know how to import sprays to TF2 manually then you can ignore this section of the guide.
Importing is done very easily. The game requires a VMT file for the spray, which is necessary to have in order for the game to find your texture. The easiest option for most people to generate it is to:
After that is done, the spray should now be in the list of selectable sprays.
You can also use VTFEdit to generate the VMT file manually by opening the VTF file and clicking on Tools > Create VMT File. Just be to sure to open the VTF after placing it in your game folder first (typically tf/materials/vgui/logos) or the path it generates in the VMT file will be incorrect. The VMT file can be edited in VTFEdit or by using a text editor if necessary.
Congratulations, you should now have a fully functional animated spray! You deserve a pat on your back!
Examples of animated sprays I have made:
Curious how this spray was made?
128×128, BGRA8888, 3 frames. File size: 192 KB
Flags: Point Sample, Clamp S, Clamp T, No Mipmap, No Level of Detail
Curious how this spray was made?
128×128, BGR565, 15 frames. File size: 480 KB
Flags: Point Sample, Clamp S, Clamp T, No Mipmap, No Level of Detail
In-game it looks like this: https://i.imgur.com/a8CXUGG.gif
As shown, the Point Sample flag works great with pixel art. It does not turn blurry no matter how far or close you approach the spray.
If anything in the guide is confusing for you, let me know in the comments. I will try to update the guide every now and then if I find things that are inaccurate or not explained well.