How to make Animated Textures

A Tutorial for Source Engine

A full tutorial on creating animated textures

In this tutorial I will walk you through making animated textures which can be used in any source game. This method will also work for sprays, skins, ext; pretty much anything that uses a VTF file can be animated by following this tutorial (note that sprays must be less than 512kb). For the sake of beginners I wrote this as I would to someone who has never made a custom texture before, so bare with me and lets get started.
Required ProgramsYou will need a photo editor of some sort. I will be using GIMP, but all you really need to do in it is make and save a few images as tga files. I will assume you are using a program that supports layers and that you know how to use them and the program fairly well.

You will also need to have VTFEdit installed. If you have never used this program before dont worry, it's pretty simple on the surface and I'll try to be very clear about what to do in it.
Step 1: The ImageMake or find the image you want to have as an animated texture. If you are comfortable with making images and having multiple layers, just know that you will need to save a separate image for every 'frame', and skip down to step 2.

  • If you are making a image
    Animation as we will be doing it is basically telling the source engine to cycle through a series of images, each which is slightly different, giving the appearance of movement. This means you will want to make/have a 'base' image, duplicate and change it a little, and repeat until you are to the point that the cycle restarts.

    If we were making a sign which has a blinking arrow for example, we would first make the sign with the arrow in one state then duplicate the image onto a new layer. On this new layer we would edit the sign so the arrow is in the next state. The result is 2 layers of 2 identical images except for the part we want to be animated, the arrow.

  • If you are turning a animated gif as a texture
    First, you should be hesitant to use animated a gif as it is very common for them to be compressed which pretty much ruins them for our purposes. Second, the Photoshop version I used to test this (CS4) would not open gifs with their layers intact, which makes it impossible to save the layers out one by one. I'm sure there's a way to do it, I just haven't used PS enough to figure it out.

    GIMP doesn't have any problem opening a gif with its layers intact, and it's free (see link under 'Required Programs'). To tell whether the gif has been compressed or not, open it in GIMP (or Photoshop if you know how) and it will immediately be apparent: parts of the layers will be cut out and missing. If you open a gif and the layers appear clean and solid, with no missing parts, you should be fine. Sometimes by showing and hiding layers in GIMP you can work around compression.
Step 2: SavingThis is pretty straight forward, but you have to follow a specific naming convention for it to work. Following the naming convention explained below, what you want to do here is hide all but the first layer and save the image on your desktop / in a convenient location. Next hide all but the second layer and save it. Repeat this as many times as is needed to save all the frames/layers for your image, and remember that if yoiu are making a spray the fewer frames the better.

  • The naming convention
    Save your files like this: texturename000.tga. Replace 'texturename' with the name of your texture, number them in sequence starting with 000 (000, 001,002, and so on). The format they SHOULD be saved as is .tga. In GIMP, uncheck RLE Compression. In Photoshop, select the 'Targa' format and make sure RLE Compression is not checked when saving. 24bit should be fine, if you have problems try changing this option.

You should end up with 2 or more images on your desktop / in a convenient place when you're finished.
Step 3: Making the VTFThis is where VTFEdit comes in. Launch VTFEdit and go to File > Import. Browse to your desktop and select all of the images you just saved, starting with the first in the series (hold the Ctrl key down to select multiple items in order). Once they are all selected click OK, and VTFEdit will throw a bunch of options at you. Advanced users may want to poke around, but the program is setup properly by default for what we'er doing so just click ok.

Once VTFEdit has finished importing the frames, you should find yourself staring at the first frame in the animation. Make sure that your in the Image tab, and click the play button. The image will animate ridiculously fast, but as long as you see it animating you know you did everything right up to this point.

Now click File>Save As, and save it to your desktop / in a convenient location. There is no specific naming convention here other than that you should not use spaces in the name (use an underscore to separate words).
Step 4: Making the VMFThis is where things can get a little trickier. Now that you have the VTF made and have verified that it works, you need to make a vmf for it so hammer and the source engine recognize that there's more than one image saved in it. I'll show you the easy way to do this, but be aware that you can manually do all of this too.

First, browse to the main folder for the game you want to use this texture in (for example, C:\Program Files (x86)\Steam\steamapps\common\Team Fortress 2). In this folder there will be a folder named with the initials of the game (tf, css, dod, etc); open that folder and create a new folder named 'materials' inside it, if there isn't already one. Open the materials folder and copy the vtf file we made into it. You can create sub-folders in the materials folder, for example you can have a folder for animated textures named 'animated' to place all of your animated texture in. (any folders in the materials folder will be searchable in hammer, IE searching for 'animated' will display all the textures inside the animated folder)(again, use underscores to separate words)

With the vtf file copied into the right folder open it in VTFEdit (should be able to just double-click it) and click on the Tools menu, and select Create VMF File. Again, there are a lot of options here for advanced users to play with, but for our purposes just click ok and save the file on your desktop / where it's easy to find. This vmf file will need to be copied into the same folder as the vtf file once we edit it a bit.

Open the VMT you just made by either double clicking on the desktop or File>Open in VTFEdit and replace this:
"LightmappedGeneric"
{
"$basetexture" "animated/texture_name"
"$translucent" 1
}
With this:
"LightMappedGeneric"
{
"$baseTexture" "animated/texture_name"
"$surfaceprop" "Default"
"Proxies"
{
"AnimatedTexture"
{
"animatedTextureVar" "$basetexture"
"animatedTextureFrameNumVar" "$frame"
"animatedTextureFrameRate" "1"
}
}
}
Those of you with sharp eye's will have noticed yellow 'texture_name' in there, and probably guessed correctly that you want to replace that with what you named your vtf file when you saved it (do not include the vtf extension). With the above code copied in, select File > Save. Copy the vmf file we just made into the same folder as the vtf file and we're done.
Step 5: Testing Launch Hammer and select the texture browser, and just type the name of the texture into the 'Filter' box and your texture should pop right up. If it doesn't, skip down to the troubleshooting section.

If it seems to be working, do a quick compile and check out your new animated texture!
Fine Tuning If you got to this point and everything is working, yay. However, I'm sure you would like to change a few more things...
  • Animation Speed Open up the vmt file, and find this line:
    "animatedTextureFrameRate" "1"
    This is a bit counter-intuitive to mess with, but try 2 and 0.2 on your texture and observe the results. You do NOT have to recompile the map this texture is in to test different speeds, just edit and save the vmf file and relaunch the game.

  • Material Type Open the vmt file and find this line:
    "$surfaceprop" "Default"
    In this line, the word "Default" represents the material type. So, change it to "Glass" and the texture will behave like glass ingame (this sets how it takes damage, what the bullet holes look like, the sound it makes when bullets hit it, ext). To view the list of available material types, launch VTFEdit and go to Tools>Create VMT File and click on the 'Options' tab. All the material types are listed in the Surface 1 dropdown menu.
Trouble Shooting If your texture does not work here are a few common things the check for:
  • Are both the files in the same location?
  • Does the vmt have errors or typos in it?
  • Do the files have the same name?

Remeber, when using custom textures in source maps you need to pack them into the map.bsp for other people to see them! Pakrat is one of the most common programs to use for this, if you need help feel free to PM me.
That's all there is to it!
Sign up to access this!
1-10 of 19
1
Pages
  • 1
  • 2
Go to page:
  • Fab10 avatar
    Fab10 Joined 5y ago
    Offline
    5y
    Hi, I've made a VTF file which worked in the editor but, once imported into CSS and sprayed, doesn't appear at all, although the spray sound does play. Any suggestions to troubleshoot this? Thanks.
    Bananite
    URL to post:
  • islandboy198 avatar
    islandboy198 Joined 6y ago
    Offline
    661 points Ranked 7826th
    5y
    I do not know if you still watch comments here, but I am trying to create an animated weapon, and trying to do this after the "Steam Pipe Update" and I cannot seem to get an animation going. When putting all the files into the correct folder paths inside the custom folder, I can take away the .vmt file from the folder and the model shows up just fine, but when adding back the .vmt file the model turns invisible in game. I am pretty sure it is a problem with the file path within the vmt file. I have tried everything, but not sure what to put. If you can give me any guidance on this I would be greatful. I am also sorry if I am in the wrong tutorial for animating weapons, this does seem mostly aimed towards map parts but I was hoping weapons would work the same way. Thank you for any help.
    Imdabes
    URL to post:
  • kin37ik avatar
    kin37ik Joined 6y ago
    Offline
    6y
    the link to the image for the VTFEdit settings on image shake is broken, do you have fresh link?
    Rooty tooty point n shooty
    URL to post:
  • Burnfingers avatar
    Burnfingers username pic Joined 11y ago
    Offline
    128,146 points Ranked 21st
    23 medals 1 legendary 3 rare
    • 10 years a member Medal icon
    • Reached 75,000 Points Medal icon
    • 6 years a member Medal icon
    • Submitted 20 Gamefiles Medal icon
    • Became a Studio Leader Medal icon
    • Reached 1,000 Points Medal icon
    6y
    > **Posted by Rogue.Vixen** > Still no change in speed... =C PM me the texture files (vtf and vmf) and i'll take a look lol
    aka [-B-] avatar
    Mantra
    aka [-B-]
    URL to post:
  • Still no change in speed... =C
    A Fox with Socks
    URL to post:
  • Burnfingers avatar
    Burnfingers username pic Joined 11y ago
    Offline
    128,146 points Ranked 21st
    23 medals 1 legendary 3 rare
    • 10 years a member Medal icon
    • Reached 75,000 Points Medal icon
    • 6 years a member Medal icon
    • Submitted 20 Gamefiles Medal icon
    • Became a Studio Leader Medal icon
    • Reached 1,000 Points Medal icon
    6y
    > **Posted by Rogue.Vixen** > I've tried changing the fps to several different values, ranging from 5 to 60 and it still plays at the same speed... > > "UnlitGeneric" > { > "$basetexture" "vgui\logos\noeyes" > "$vertexcolor" "1" > "$vertexalpha" "1" > "$nolod" "1" > "$translucent" "1" > "Proxies" > { > "AnimatedTexture" > { > "animatedtexturevar" "$basetexture" > "animatedtextureframenumvar" "$frame" > "animatedtextureframerate" "25" > } > } > } try smaller numbers; .8, .5, ext.
    aka [-B-] avatar
    Mantra
    aka [-B-]
    URL to post:
  • I've tried changing the fps to several different values, ranging from 5 to 60 and it still plays at the same speed... "UnlitGeneric" { "$basetexture" "vgui\logos\noeyes" "$vertexcolor" "1" "$vertexalpha" "1" "$nolod" "1" "$translucent" "1" "Proxies" { "AnimatedTexture" { "animatedtexturevar" "$basetexture" "animatedtextureframenumvar" "$frame" "animatedtextureframerate" "25" } } }
    A Fox with Socks
    URL to post:
  • Burnfingers avatar
    Burnfingers username pic Joined 11y ago
    Offline
    128,146 points Ranked 21st
    23 medals 1 legendary 3 rare
    • 10 years a member Medal icon
    • Reached 75,000 Points Medal icon
    • 6 years a member Medal icon
    • Submitted 20 Gamefiles Medal icon
    • Became a Studio Leader Medal icon
    • Reached 1,000 Points Medal icon
    6y
    > **Posted by Omnislash** > It says: > > "$surfaceprop" "Default" "Proxies" { "AnimatedTexture" { > > I´m way off? :) looks right to me. pm me the files (texture and vmf) and i'll take a look =)
    aka [-B-] avatar
    Mantra
    aka [-B-]
    URL to post:
  • Omnislash avatar
    Omnislash Joined 11y ago
    Offline
    1,076 points Ranked 4982nd
    6y
    It says: "$surfaceprop" "Default" "Proxies" { "AnimatedTexture" { I´m way off? :)
    Bananite
    URL to post:
  • Burnfingers avatar
    Burnfingers username pic Joined 11y ago
    Offline
    128,146 points Ranked 21st
    23 medals 1 legendary 3 rare
    • 10 years a member Medal icon
    • Reached 75,000 Points Medal icon
    • 6 years a member Medal icon
    • Submitted 20 Gamefiles Medal icon
    • Became a Studio Leader Medal icon
    • Reached 1,000 Points Medal icon
    6y
    looks like somewhere in line 2 of your vmf there is something it doesnt like, are there any missing ; marks or anything like that?
    aka [-B-] avatar
    Mantra
    aka [-B-]
    URL to post:

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Studio

Sign up to access this!

Credits

Key Authors
Burnfingers
Author

Submitter

Burnfingers avatar
Burnfingers username pic Joined 11y ago
Offline
128,146 points Ranked 21st
23 medals 1 legendary 3 rare
  • 10 years a member Medal icon
  • Reached 75,000 Points Medal icon
  • 6 years a member Medal icon
  • Submitted 20 Gamefiles Medal icon
  • Became a Studio Leader Medal icon
  • Reached 1,000 Points Medal icon

Burnfingers avatar
Burnfingers

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Details

Difficulty Level
Intermediate

Attributes

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+
  • 42.5k Views
  • 19 Posts
  • 9ySubmitted
  • 5yModified

Scores

88 bScore
9.8 Rating

2 voters

Sign up to access this!

More from Submitter

WiPs by Submitter

More from Studio

WiPs by Studio

More Mapping Tutorials

bcp.crwdcntrl.net tracking pixel