How To Make Your Own Animated Textures!

[Grea$eMonkey]

[b]I haven't seen many tutorials about making animated textures, and I've worked with them for a while, so I thought that I should write a tutorial so everyone else can make maps with their own animated textures![/b]

Okay, first thing's first. Basic material making!

[b][u]Basic Material Making[/u][/b]

The textures/materials in the maps you make consist of two separate files. A VTF file, and a VMT file.

Before you start to think, "this is way to complicated", think again. It is really quite simple.
First off, a VMT is quite literally a text file, just with a different file extension at the end so that the games can recognize it.

You won't need to do much typing because there is a nifty little program called [b][url=http://nemesis.thewavelength.net/index.php?p=41]VTFEdit[/url][/b].

Once you have VTFEdit installed, you will probably figure out how it works. In case you don't, it's simple.

[list]First open VTFEdit.

[img]http://img408.imageshack.us/img408/6963/vtfeditpic1rk7.png[/img][/list]

[list]Now you go to File>Import and then choose a JPEG, TGA, PNG, or whatever. TGA's and PNG's are preferable, because they support more channels than a JPEG. It should then take it into VTFEdit.

[img]http://img176.imageshack.us/img176/1103/vtfeditpic2sk7.png[/img][/list]

[img]http://img221.imageshack.us/img221/2636/vtfeditpic3vv9.png[/img]

[list]Now you save it.

[img]http://img300.imageshack.us/img300/9839/vtfeditpic5mh8.png[/img][/list]

[list]Now go to Tools>Create VMT File and it will give you VMT options.[/list]

[list]By this time, it's pretty self explanatory.[/list]

You can recreate the VMT and/or open it up with notpad to edit it later on if you wish. That will be necessary for this because VTFEdit doesn't know anything about making animated texture VMT's even though there's a VTF format specifically for it.

[b][u]The VTF File.[/u][/b]

Lets move on to animating shall we?

Here, we have to directions we can go. If you made a animated GIF and still have all of it's frames, then we can move right on to that.
If not, then we will be downloading another application called [url=http://www.pcworld.com/downloads/file/fid,7652-order,1-page,1-c,alldownloads/description.html][b]Jasc Animation Shop 3.[/b][/url]
This software can be bought for about $40 USD and the trial lasts for a while anyway.
You can also use Irfanview and XnView as suggested by Terrenteller. I don't have those, so their use won't be explained here for the time being.

If there's some animated GIF image you found online that you want to make into an animated texture, do the following:
[list]Open Animation Shop.

[img]http://img242.imageshack.us/img242/7317/jascpic1xz8.png[/img][/list]
[list]Go to File>Open, and open a GIF file.

[img]http://img221.imageshack.us/img221/8391/jascpic2ep9.png[/img]

[img]http://img162.imageshack.us/img162/6470/jascpic3db1.png[/img][/list]
[list]The frames will appear in a film line. Click on one, and press Ctrl+A to make it select all frames.

[img]http://img384.imageshack.us/img384/1904/jascpic4lb2.png[/img][/list]
[list]Now right click on one of the frames and select the Save Frames As option.

[img]http://img367.imageshack.us/img367/1760/jascpic5hj9.png[/img][/list]
[list]Now tell it to save them as TGA's or PNG's. If you want a good alpha channel, I recommend PNG's because TGA's have not always been reliable for me as far as transparency goes.

[img]http://img108.imageshack.us/img108/3599/jascpic6hu1.png[/img][/list]

Now it will have saved all of your frames. They will be numbered in the original order they were in. Conveniently, VTFEdit accepts frames in alphabetical order so this is exactly what you will need.

Now to import them into VTFEdit. Here's what you need to do:
[list]Open VTFEdit.[/list]
[list]Go to File>Import as shown earlier.[/list]
[list]Find the TGA or PNG files you saved and select them all by either doing a Ctrl+Click, or a drag/drop selection to select multiple images.

[img]http://img300.imageshack.us/img300/4681/vtfeditpic12ed3.png[/img]

[img]http://img242.imageshack.us/img242/703/vtfeditpic22yo8.png[/img][/list]
[list]Now open those and a screen will open up with VTF options. The first ones should be labeled Normal Format, Alpha Format, and Texture Type. Leave the first two alone and change Texture Type to "Animated Texture".

[img]http://img385.imageshack.us/img385/7558/vtfeditpic32xg6.png[/img][/list]
[list]Every other default value should be left alone for now.[/list]
[list]Click OK and they will automatically be put together into an animated image in alphabetical order.

[img]http://img114.imageshack.us/img114/3286/vtfeditpic42rc6.png[/img][/list]
[list]Now save your file![/list]

[b]Note: There will be a Play option for the animated texture. It will play at an extremely fast framerate so don't freak out and think you did something wrong.[/b]

Unfortunately, you won't get to see your animation play at your designated speed until tested in your map. It will always look fast in VTFEdit. You can however, predict the speed by understanding framerates. This will be discussed next.

[b][u]The VMT File[/u][/b]

The VMT file will seem a little complicated. This is why I have a template VMT for you to work from. You can just copy and paste this.

Don't feel guilty, because there really isn't any other way to do this. ;)

Here is the VMT file:

"LightmappedGeneric"
{
   "$basetexture" "foldername/filename"
   "Proxies"
   {
      "AnimatedTexture"
      {
         "animatedtexturevar" "$basetexture"
         "animatedtextureframenumvar" "$frame"
         "animatedtextureframerate" "5"
      }
   }
}

[b]Please Note: The base texture is the file path to your texture.[/b]

If the file is in your base materials folder, and not some sub-folder of your materials folder, then don't have the folder name in there. The file name is the name of both the VTF and VMT without their file extensions. This lets them recognize one another so the VMT properties are applied to the VTF.

[b]So Remember: Only specify a folder in basetexture is the material is in a folder other than the materials folder or is in a sub-folder of the materials folder.[/b]

So, if my texture was in my garrysmod/garrysmod/materials/foldername, and the texture was named filename, then the above "$basetexture" would be correct. I think you can figure this out.

[b]IMPORTANT: If you ever decide to move your texture into a different folder, make sure you edit the file path in your VMT! Otherwise, it will not work![/b]

The only thing you will be editing for now is the "animatedtextureframerate" variable. Replace the "5" with whatever number you want the framerate to be. I said earlier that I'd explain this so I will do that now. Here, the framerate is in frames per second. This mean that if I had 25 frames here with a framerate of 5, the entire animation would play from start to finish in 5 seconds. Basically, the duration of your animation is the amount of frames divided by your selected framerate.

[b]Another Note: LightmappedGeneric is not the only kind of texture that can be animated. Things like UnlitGeneric(which is can be used for sprites) can also be animated.[/b]

"UnlitGeneric"
{
   "$basetexture" "foldername/filename"
   "$vertexcolor" 		1 
   "$vertexalpha" 		1 
   "$nolod" 			1
   "$translucent" 1
   "Proxies"
   {
      "AnimatedTexture"
      {
         "animatedtexturevar" "$basetexture"
         "animatedtextureframenumvar" "$frame"
         "animatedtextureframerate" "5"
      }
   }
}

As you can see, it's exactly the same besides for a few extra properties. This is basically what I use as my animated sprite template. Some of those properties probably aren't necessary though.

That's pretty much all you need to know. You can add the surface type, but be careful with those. Old animated textures that use that in the VMT have crashed Hammer for me. Try it out though.
On a side note, you can also set a start frame and an end frame for animations that need a different frame order. But if you name your images accordingly, then the startframe and endframe properties will not be needed and you're probably better off that way.
If you really want to know more about those then go to [url=http://www.editlife.net/tutorial.php?tutid=43][b]This Site.[/b][/url] It's where I first learned about animated textures.

[b]If anyone has any questions then feel free to ask. Also, if there's anything here that doesn't seem clear, then please tell me so I can change it.[/b]

[Terrenteller]

Just a recommendation, instead of using a trial of Jasc Animation Shop 3 (or paying $40 for it) Irfanview and XnView can do the same as needed for free.

[Grea$eMonkey]

[QUOTE=Terrenteller]Just a recommendation, instead of using a trial of Jasc Animation Shop 3 (or paying $40 for it) Irfanview and XnView can do the same as needed for free.[/QUOTE]
Thank you. I'll add that. But just for the record, the trial is pretty long.

[pakadots]

Nice tut, have a mapping king :D

[nater]

Thanks, this helps me alot.

[b]Edit:[/b]

Hmm...can't get mine to work. Shows up animated in the preview for VTFEdit. My VMF is:

"LightmappedGeneric"
{
   "$basetexture" "NearlyTameCritters/SignGif"
   "Proxies"
   {
      "AnimatedTexture"
      {
         "animatedtexturevar" "$basetexture"
         "animatedtextureframenumvar" "$frame"
         "animatedtextureframerate" "5"
      }
   }
}

[Grea$eMonkey]

[QUOTE=nater]Thanks, this helps me alot.

[b]Edit:[/b]

Hmm...can't get mine to work. Shows up animated in the preview for VTFEdit. My VMF is:

"LightmappedGeneric"
{
   "$basetexture" "NearlyTameCritters/SignGif"
   "Proxies"
   {
      "AnimatedTexture"
      {
         "animatedtexturevar" "$basetexture"
         "animatedtextureframenumvar" "$frame"
         "animatedtextureframerate" "5"
      }
   }
}

[/QUOTE]
Is the NearlyTameCritters folder in your materials folder? Also, is the VTF called SignGif.vtf?
If both of those are true, then it should work fine. What about it isn't working?

[nater]

It's just not animating...And yes to both of your questions.

[Grea$eMonkey]

[QUOTE=nater]It's just not animating...And yes to both of your questions.[/QUOTE]
Did you import a whole GIF, or a bunch of selected images?

[Pj The Dj]

Instead of dragging (which can be annoying on multiple lines) or ctrl-clicking all of the frames, just click the first one then hold ctrl and shift at the same time and click on the last one. You can also split it by doing your first ctrl shift, then just doing regular ctrl on one further down and ctrl shift again. If that makes sense.

[the cactus]

[QUOTE=Pj The Dj]Instead of dragging (which can be annoying on multiple lines) or ctrl-clicking all of the frames, just click the first one then hold ctrl and shift at the same time and click on the last one. You can also split it by doing your first ctrl shift, then just doing regular ctrl on one further down and ctrl shift again. If that makes sense.[/QUOTE]

[quote=lulzor] The frames will appear in a film line. Click on one, and press Ctrl+A to make it select all frames.[/quote]

he said how to select all slides.

[Pj The Dj]

Hmm i didn't catch that.

[Grea$eMonkey]

It's fine. Was there anything else I may have missed?

[nater]

I imported multiple PNG's.

[Grea$eMonkey]

[QUOTE=nater]I imported multiple PNG's.[/QUOTE]
How many pictures are in it?

[nater]

14 I believe.

[b]Edit:[/b]

Do you have to do anything special during compile? My texture animates in VTFEdit. My material is in both my Gmod and EP2 (for the orange box config) in a folder named NearlyTameCritters. File is named SignGif.

[b]Edit:[/b]

Not sure what it was, but I remade it using TGA's, and it now works.

[Grea$eMonkey]

[QUOTE=nater]14 I believe.

[b]Edit:[/b]

Do you have to do anything special during compile? My texture animates in VTFEdit. My material is in both my Gmod and EP2 (for the orange box config) in a folder named NearlyTameCritters. File is named SignGif.

[b]Edit:[/b]

Not sure what it was, but I remade it using TGA's, and it now works.[/QUOTE]
Whatever works. ;)
I've made animated textures using PNG's many times though.

[nater]

:dance: Sign says Welcome to your local Pet Shop, Nearly Tame Critters.

[b]Edit:[/b]

Weird chunk of wall missing there.

[b]Edit:[/b]

[media]http://www.youtube.com/watch?v=gE9IyOxbaSQ[/media]
Newer Video

[Grea$eMonkey]

[QUOTE=nater]:dance: Sign says Welcome to your local Pet Shop, Nearly Tame Critters.

[b]Edit:[/b]

Weird chunk of wall missing there.

[b]Edit:[/b]

[media]http://www.youtube.com/watch?v=gE9IyOxbaSQ[/media]
Newer Video[/QUOTE]
Very good for a first one! Very good!

[halomodder]

YES! I've been looking for this kind of a tutorial forever,thank you!

[Grea$eMonkey]

[QUOTE=halomodder]YES! I've been looking for this kind of a tutorial forever,thank you![/QUOTE]
No problem. :D

[bastian-07]

I just found out that this works for sprays too. I have been looking for such a great tutorial. Very well done, grea$e. Have a mapping king :4chan:

[Grea$eMonkey]

[QUOTE=bastian-07]I just found out that this works for sprays too. I have been looking for such a great tutorial. Very well done, grea$e. Have a mapping king :4chan:[/QUOTE]
It works on all textures(as far as I know). I've used it in sprays and sprites also.

[Smashmaster]

What if we don't want to use VTFedit, does the VTF photoshop plugin automatically do this?

[Terrenteller]

Do it the old school way with VTEX.

[TBot_Alpha]

How do you make textures scroll? I've heard of it being something that you put in the .vmt file, but I can't find the thread where someone else asked this same question. :(

[b]Edit:[/b]

Never mind, I found it.

[Grea$eMonkey]

[QUOTE=Smashmaster]What if we don't want to use VTFedit, does the VTF photoshop plugin automatically do this?[/QUOTE]
I don't think so. The plugins aren't reliable in that respect. If you want good quality textures made right, stick to VTFEdit. ;)

[afriendlycow]

In game console:
--- Missing Vgui material vgui/resource/icon_newfolder
couldn't exec userconfig.cfg
Host_WriteConfiguration: Wrote cfg/config.cfg
couldn't exec userconfig.cfg
Host_WriteConfiguration: Wrote cfg/config.cfg

[IMG]http://i72.photobucket.com/albums/i171/darkcow77/help.jpg[/IMG]
Is the free cookies which is in my materials folder? Yes its in \materials\VGUI\logos. Also, is the VTF called free cookies.vtf? Yes.
Both of these are true, then it should work fine that I am guessing. But nothing shows up, what I do wrong?
VMT of VTFedit:
"LightmappedGeneric"
{
"$basetexture" "VGUI/logos/free cookies"
"Proxies"
{
"AnimatedTexture"
{
"animatedtexturevar" "$basetexture"
"animatedtextureframenumvar" "$frame"
"animatedtextureframerate" "1"
}
}
}

--------------------------------------------------------------------------------------------------------------------------
I am just confuse about the last part about VMT Thing, That's all.

The image is to look like this:
[IMG]http://i72.photobucket.com/albums/i171/darkcow77/FREECOOKIES1.gif[/IMG]

[Grea$eMonkey]

Where does it not appear?

[Ard Patrinel]

[QUOTE=afriendlycow;18628413][media]http://i72.photobucket.com/albums/i171/darkcow77/FREECOOKIES1.gif[/media][/QUOTE]

*seizure*

Seriously, for the sake of anyone who comes here with epilepsy, please media tag that.

[b]Edit:[/b]

Never mind, media tags don't like .gif images (wtf?).

[TH89]

hey grea$emonkey, I want to do a static texture with an animated selfillummask, for a blinking light on a camera. Is that possible? What would the VMT look like?