How to use frame-by-frame texture animation

This article is an Island. It cannot be linked to using wiki BB-codes.
This is a tutorial for making animated textures. The mesh I provide as an example is a weapon, but this same method can be used for props as well (and while I haven't been brave enough to try it on a character or monster texture, I wouldn't be surprised if it turned out to work in those contexts as well).

This tutorial is fairly specific in scope and is intended for people who already have at least some expertise in Torchlight mod making, so I will be glossing over certain details that might not be familiar to newer modders. If you find yourself getting confused, I would highly recommend reading over the other tutorials here on RGF first, as they will provide a good introduction to the more general ways, hows, whys, dos, and don'ts of Torchlight modding.

[top]Making the textures

So, let's get started.
Things to take care of first:
1) Your weapon (or prop, or whatever else) should be modeled and UV unwrapped.
2) In most cases, the animated elements are only going to be a portion of the texture changing. Hence, it would be wise to finish up a "base" texture of all the parts that are not going to change during the animation.

For the purposes of keeping this tutorial straightforward, elements 1 and 2 are taken care of since I am providing the model and base texture; but keep them in mind when you are making your own assets.

Download sample model here

First off, go ahead and import the tut_scythe_base_tx.png and tut_scythe_uvs.png files into Photoshop, Gimp, or whatever layer-capable art program of choice you use. Put the UVs over the texture and set them to a Multiply blending mode (or, my preference, invert them and set them to Screen). This should get you set up for painting whatever elements you want to be a part of the animation.

Within the spoiler tag below are thumbnails of an example animation I made (basically a bunch of glowing yellow runes on the blank area on the flat of the blade, plus making the blade pulsate with a red color). This is a fairly simple example, just to make the results of the instructions clearer, but you don't have to follow this exact example artistically. You can make whatever you wish -- if you'd prefer to do pulsing jewels, or make the hilt turn funny colors, or have a Soul Calibur-esque eyeball looking around frantically, have at it. Go for whatever floats your boat.

Note the filenames below each thumbnail. You will want to name your files the same way (tut_scythe_#.png, starting from 0 and not from 1) for reasons that will be made clear further in the tutorial. Note also that you certainly do not have to do an animation that is 22 frames long. Again, determining how many you do need is something that will be better explained later on, but for now I will say that 12 to 16 frames is usually sufficient for most simple animations.

[top]Editing the material file

Once you are done making the frames of the animation and saving them as PNG files with the proper filenames, open the tut_scythe.material file in a text editor. (Notepad, Wordpad, and Notepad++ are all perfectly acceptable.)

Note that the texture declaration line currently reads "texture tut_scythe_base_tx.png" -- this is the part we need to change. First things first: change texture to anim_texture. The regular texture declaration is replaced with anim_texture to tell the engine that this texture will play through multiple textures instead of just displaying one texture statically.

Also change the filename to tut_scythe.png. The filename is slightly deceptive here: as we know by now, there is no texture file we have made named "tut_scythe.png". Rather, this tells the engine to look for a sequence of files named tut_scythe_0.png, tut_scythe_1.png, tut_scythe_2.png, and to keep looking until it gets to the last one in the sequence (more on that part below). Naming the files this way (meaning, ending with "underscore+number") has to be done exactly, specifically this way, starting with _0 and moving upwards, in order for it to work. The final frame's number should be one less than the actual total number of frames there are, since you are counting from zero.

So far so good, but there's still two numbers we have to put at the end of this line. The first number tells it how many frames to cycle through before looping back to the first one; the second number tells you the number of seconds it takes to play the animation once.

In the case of my own texture, there are 22 frames total that I want to play over the course of 1 second. So, in my case the changed line, in total, needs to read anim_texture tut_scythe.png 22 1. If you made 12 frames that you wanted to play over the course of a half-second, you would want the line to read anim_texture tut_scythe.png 12 .5.

You can set this second number to anything in order to alter the speed at which the animation plays. A lower number will speed up the animation and a higher number will slow it down; however, when slowing down an animation made up of a limited number of frames, the rate the frames are played back will inherently slow down as well, which can start to look bad and stagger-y if your animation is supposed to look like a smooth transition from frame to frame. Keep this in mind when determining what your framerate should be like -- it's worth it to do the math and calculate out an animation length and rate that translates to something more or less between 20 to 30 frames per second to keep the texture animation looking nice and smooth. Shorter animations are almost always easier to deal with -- a 10-frame long animation that plays for half a second will still be the equivalent of a full 20 frames per second.
This is, of course, the issue one has to think about and deal with before they even begin a project like this, since you have to decide how many frames you want the total animation to be.

[top]Wrapping up

In any case, we now have everything we need. You can add the files to the TorchED folder structure if you want to create a new weapon in there, or create a new mod folder in your Torchlight mods directory if you'd prefer to create the new item that way (see one of the other tutorials on creating a new item if you haven't already). As with any other mod make sure that your mesh, material, and texture files are all in the same folder. Once there is a new .DAT file that links to the scythe, you can spawn the new weapon in via the console to try it out and watch the animation play. Enjoy!

(Additional note: for this tutorial, I essentially used the whole texture as the animated element, but this is not necessarily the only way to do it, nor the best way to do it. Another way might be to assign different materials to different parts of the mesh, so one material -- say, the hilt -- might have a static texture on it while the other -- perhaps the blade -- would have the animated texture.)

Posting Permissions

Posting Permissions

  • You may not post new pages
  • You may not post comments
  • You may not post attachments
  • You may not edit your posts