View source for User:VectorFluxion/Sprites

[[Sprites]], in the Source engine, are fixed, two dimensional, flat [[texture|images]] that always appear facing the observer (player) in-game. Creating your own custom sprites is a very easy task; like regular textures, sprites also have a VTF file, for the sprite image/texture itself, and a VMT file to allow it to be used in [[Hammer]].

As sprites are custom textures, they must be packed into the level with [[VIDE]]; otherwise, players will receive a [[missing content|missing texture]] error in place of the sprite (that only you see), when loading your map. Sprites must be placed in the materials folder in the directory of the respective game you're mapping for.

==Creating a custom sprite==

This tutorial will show you how to create a custom "glow" sprite. The game we will be using is [[TF2]].

Things you'll need:

#[https://www.getpaint.net/ Paint.NET] and [http://nemesis.thewavelength.net/index.php?p=50 Nem's VTF file type plugin]. You'll also need [https://forums.getpaint.net/topic/8375-drop-shadow-and-other-effects-krisvdms-plugin-pack-updated-2010-10-26/ this plugin] to center images.
#[https://notepad-plus-plus.org/ Notepad++]. This one is optional, but I '''strongly''' recommend you use it.

===Step 1: The Sprite Image===
Open Paint.NET. Go to Image > Canvas Size and make an image with the dimensions 128x128.

Use the paint can, or the shape tool with the "Draw Filled Shape" option selected from the drop-down on the top left, and make the background completely black. '''Do not use a transparent alpha channel.'''

Next, mouse over the "Colors" window, hold down the shift key, and drag the color picker horizontally all the way to the right. Your color should now be pure <font color="red">'''red.'''</font> You can also select this color from the predefined colors palette. 

Set the Brush Size to 75, and the Hardness to 0%. Create a new layer (ctrl+shift+n), and click once roughly in the center of the image. Go to Effects > Object Align > Center Both to ensure that the brush stroke you just made is truly in the center. Chances are, you may not see a difference, but this is a good safety measure. Then double click on the layer with the red brush stroke and set the transparency/opacity to 180.

Create a new layer, set the hardness to 100% and the brush size to 4. Click roughly in the center of the image and use the "Center Both" command again in the Effects menu. In Paint.NET Ctrl+F repeats the last used effect, along with the same settings previously used in the effect.

Ctrl+Shift+F to flatten the image down to one layer. The resulting image should resemble HAL 9000's camera eye from ''2001: A Space Odyssey.''

===Step 2: Exporting the image to VTF===

Go to File > Save. Name the file whatever you want and press enter.

The VTF file configuration should pop up. Click on the "Defaults" button. There are a few configurations needed here before we complete the save. First, go to the "Mipmaps" tab, and uncheck "Generate Mipmaps". Then go to the "Flags" tab and scroll down to the bottom of the flags list, and check "Clamp All". Clamping prevents the texture from tiling. Finally, go to the "Advanced" tab, and change the version from 7.2 to 7.4. Save the file in the game's materials folder.

===Step 3: Creating the VMT===
The Valve Material Type (VMT) invokes the texture image (VTF) to be used in Hammer. Think of the VMT as the conduit of communication between the texture file itself, and the Source engine.

Generally, the code for the VMT file of a sprite is as follows:

<pre>
"Sprite" //Shader. (DO NOT USE "LightmappedGeneric")
{
"$basetexture" "" //What texture will be used for our sprite?
"$spriteorientation" "vp_parallel" //The sprite will always face the observer (player).
"$spriteorigin" "[.5 .5]"
"%keywords" "" //What keywords will be associated with the texture?
}
</pre>

This will be the syntax we will use for our sprite.

==Using the newly created sprite in Hammer==

In progress...