Archived Boards > Mjn.Mixael's Render Boutique

Anim Creation Tutorial


So, I often get PMs about ANI creation. I know there are a couple tutorials around already, but I intend to keep this one updated. This will also strive to give an understanding of WHY things must be certain ways in order to work. (though that is mostly, because FSO is just picky).

Let's get down to it, shall we? Here's what we'll cover.

* Acceptable Formats
* Tools
* The Meat of the Anim
* Creation of .ani
* Creation of .eff
* Special Cases for .ani
Acceptable Formats

There are two formats you can use for anims. Both are image sequence formats, meaning don't render any .h26 encoded stuff because it won't work. Simply put, the FSO interface is still pretty hard-coded and because of some technical code stuff beyond my comprehension, movie formats won't work.


You can use .ani. The advantage to .ani is that you end up with a single contained file that is easily viewable. Now is as good a time as any to note that some FS anims must be in a very specific .ani format. They can't even be in .eff (yet). This includes briefing icons and HUD message anims. We'll talk about these in the Special Cases for .ani section. The problem with the .ani format is that it is very limited color wise. It can only have up to 256 colors and they must be the same 256 colors across every frame of the anim. This often causes color banding and artifacting. See these two images to compare.



However, this can be avoided by simply limiting the color design of your actual animation. In the above, for example, it would look much nicer as an ANI, if the background had no nebula, a redish nebula, or a blueish nebula. Those two colors will work because the engines and weapons of the fighters are those colors. There is also a yellow planet in this anim, removing that or changing it to fit into a simpler color scheme will also help. So to break it down, if you mentally categorize the color wheel into Black, White, Red, Yellow, Orange, Blue, Green, Violet... and you keep your anim limited to about 4 of them, then your anim can be made into .ani with little noticeable quality reduction.

This is a screen from cb_flail.ani

This works, essentially, because using fewer major colors leaves more room in the 256 color limitation for more SHADES of colors.


Another option is the .eff format. The major advantage of .eff is that you can have an unlimited color palette. The downside is that this format is not easily viewable and it is not in a container, meaning your 'data/cbanims' could be littered with literally thousands of images even if you only have a small number of anims. File size in this format is really up to you depending on how you create it. We'll get to this a bit later.


There are several tools you will need to create anims. This will be a simple list.

* A 3D App. You'll need this if you want to create anything using FS models. It's also handy from a graphics standpoint. (Think Logos) I would recommend Blender as it is useful for both modelling and animation.
* A Post-processing App. I recommend After Effects, but it's expensive. This isn't required, but it is incredibly useful. Try CineFX.
* An Image Editor. A popular free one is GIMP. I use Photoshop. Doesn't really matter.
* ANI Builder V1.0 Beta 2. The "Beta 2" is VERY important. This is included in the download link below.
* ANI Viewer. Self-explanitory. This is included in the download link below.
* IRFANVIEW. Batch image processor. It's awesome. This is included in the download link below.
* Bright. A scripted batch image processor. Also awesome. This is included in the download link below.
Mixael's ANI Creation Kit (Takes you to a new thread. Open in a new window.)

When you install this kit, I recommend keeping a folder somewhere near your FS Install that keeps all your FS related tools. I keep mine in E:\DMTOOLS. Set up of these tools is pretty straightforward. READ THE README. I will not offer support to someone who has not followed the setup instructions in the ReadMe!

Watch this tutorial on the toolkit to see how it all works.

Video Tutorial using MixaelANITools Part 1
Video Tutorial using MixaelANITools Part 2

The Meat of the Anim

I'm not going to put much here because you can do literally anything you want. It's basically video production at this point. Animate some ships flying around, creation a techy looking motion interface.. whatever. This is where the bulk of your work will be in the 3D App and/or Post-processing App. Things to keep in mind... your frame size. FSO currently cannot scale anims. For command brief anims, I recommend 660x300 pixels. That's what I use because it fits the briefing window quite well. Your Frames-Per-Second (FPS) is another thing to consider. I stick to 15 FPS because it's a good compromise for quality and file-size. For other types of anims, I would recommend opening up one of the retail versions and, depending on the circumstances, simply doubling its resolution.

Creation of .ani

So here we are. You have your anim all ready to go, it just needs to be put into it's final format. First off. Render it out of your 3D App, Post-processing App, or whatever as an image sequence. Your goal here is to get a .bmp sequence. After Effects won't render a straight .bmp sequence, so I render out .jpg or .png and batch convert them to .bmp with Photoshop.

Before you render, you should name your files appropriately so you aren't stuck with hundreds of images that need to be renamed! I use this format for cb anims because it's good.


Let's explain that. The 'cb_description' part can be whatever you want. It does not matter at all. The '####' is obviously the numbers for the image sequence frames. Using 4 digits starting with 0000 is a must here because that is how ANI Builder wants it. 'EXT' is your extension.  Remember that .bmp is your goal.

Once you have your anim rendered as a .bmp image sequence, drop them all into their own folder. This will help for the next few steps. We are going to use Bright for this part. You can get it in the Mixael's ANI Creation Kit above. Copy the script called bright.cmd from the Bright installation and paste it in the same folder as all the .bmp files. Then double click to run. It should pop up a DOS prompt and start running through the images. When it is finished, you will find that it created a .pcx image sequence for you in the same folder with the .bmp sequence.

Let's talk about what this did. As I mentioned earlier, .ani requires a limited 256 color palette across all the images. Bright browses through each image in the folder and indexes the colors. When it has sufficient data, it merges all the color data to a unified 256 color palette. It does a pretty good job of it too. Then it spits out the new image sequence as .pcx which is exactly what we need for the next step. At this point I usually move the .pcx sequence to a new folder, but it's not necessary.

Open ANI Builder. It has a few options, most of which we won't need for the general anim. I'll discuss some of those other options in the "Special Cases for .ani" section later. Right up front you have a 'select' button. Click that and browse to where your .pcx sequence is. Ani Builder will only show the frame labeled 'NAME0000.pcx' in the view. Select that one and some info will pop up below showing the number of frames and whatnot. If you did everything right up to this point, it should not pop up with any warnings. If you are making a mainhall animation, a ship/weapon select animation, or something more specific, you may need keyframes, we'll discuss this in "Special Cases for .ani". If you changed your FPS to something other than 15, click "Advanced ANI settings" and change that number to match. You can change where it saves the .ani, but by default it will save it in the same folder as the .pcx sequence. When you are ready, click Start and you should have your finished .ani!

Good work!

EDIT: The new version of MixaelANITools will do all of this for you if you have it set up correctly.

Creation of .eff

It is very, very simply to make .eff anims. So let's break it down. An .eff is actually just a text file, but that text file tells FSO which frames are part of the animation and some other important data. What you will end up with in your 'data/cbanims' folder is an .eff file named for your anim... CB_SHIVAN.eff, for example. Along side it you will have all of the frames associated with that .eff as image files. Here is something people often miss. The individual frames must be labeled NAME_####.EXT starting with 0000. So in the example given they would be CB_SHIVAN_0000.PNG, CB_SHIVAN_0001.PNG, etc. You will notice that there is an underscore between the name and the number, this is different from the .ani format and is absolutely required.

Now that you have a basic understanding of how .eff files work, you will understand why the creation of one is so easy. We'll start with the image sequence. When you render out your animation from your 3D App or Post-processing App, render it as an image sequence in any of the following file types... .png, .jpg* .bmp .pcx .tga .dds

Remember how I earlier stated that in .eff the file-size is up to you? This is why. You can choose whichever format gives you your desired quality to file-size ratio. I've starred .jpg because there have been reports that using .jpg results in FSO displaying offset colors. When you render, make sure you use the naming scheme I talked about just above or you'll end up having to rename all your frames.

Take all those frames and put them in a separate folder (organization is good!) Now open Notepad or whatever simple text editor you choose. If you've ever done any tabling, this part will feel right at home to you. Basically you need to write the .eff's flags so FSO knows what to do with it. The flags are '$Type', '$Frames', '$FPS', and optionally '$keyframe'. It's pretty straightforward and each flag goes on its own line.

$Type - here you need to denote what file type you used for your image sequence. Just type the extension. Should something like "$Type: PNG"
$Frames - here is the total number of frames for your animation. This includes frame 0. So if your last frame is 300, you will have 301 frames. Written like so "$Frames: 301"
$FPS - your Frames Per Second. I use 15 so it looks like "$FPS: 15"
$Keyframe - this is for keyframe use for anims like weapon select. You just write the frame number for the keyframe like so "$Keyframe: 150"

NOTE: $Keyframe does not seem necessary for mainhall animations in the .eff format.

So you should end up with something like this.

--- Code: ---$Type: PNG
$Frames: 320
$FPS: 15
--- End code ---

Finally save the file with the proper name (see first paragraph of this section) as .eff. So using the same example, CB_SHIVAN.eff. Please make sure your text editor didn't add a hidden .txt extension to the file!

Good work!

EDIT: The new version of MixaelANITools will do all of this for you if you have it set up correctly.

Put all those files in 'data/cbanims' and it should work just fine!

Special Cases for .ani

There are some anims that require special palettes or keyframes. I'll go over that here.

Special Palettes

There are still a few types of anims that cannot use anything other than .ani. These are message head anims, briefing icons, etc. In most cases these anims require a very specific palette to work. You will know this when you test your anim and you see just random pixels all over the place! Don't freak out though, because if you downloaded Mixael's Anim Creation Kit, you are prepared!

But first, here is what is going on. I don't understand the code reasons for it, but in these cases, FSO will only display pixels that match a specialized palette which seems totally arbitrary to me. That's why it looks like jumbled pixels if you do it wrong. Do you remember how Bright works? It browses all the frames in the anim and comes up with a unified palette to work from, then it rewrites all the frames. Well, in this case, what we want to do is tell Bright to use a predefined palette... the one that matches FSO's requirements. You can tell Bright to use a predefined palette from an image you specify in its command line tools. I've simplified the process and included an image in the Bright install called 'sourcecolor.bmp' that has the proper palette. BrightIndexedColor.cmd references that file and uses its palette to redraw your anim.

It's quite easy! You will make the .ani exactly as you did before with one exception, which is the Bright script you use. Remember when you installed, I had you change the paths in Bright.cmd & BrightIndexedColor.cmd? They both do pretty much the same thing. But in the case where you need the special palette use BrightindexedColor.cmd instead and it will do all the work for you!


Keyframes are pretty simple and I'm going to write this section assuming that you have a basic understanding of what keyframes are in the world of animation. FSO uses keyframes in special cases where the anim needs to do more than play through and repeat. Examples are the mainhall doors where the anim plays forward and backward or the ship select anims where it plays from the start and then loops only a part of the animation.

If you are creating .ani files, this is super easy. When you are about to build the .ani with ANI Builder, go to Advanced Settings. There is a selection called 'Type of Animation' which is where you will select which type you are creating. For mainhall doors, select mainhall and it will do the rest for you. For weapon or ship select choose the ship/weapon animation option. When you hit Start to create the .ani it will ask you for a frame number. That frame is the loop point, or where FSO will go back to instead of frame 0 to play the anim again. You should know your loop point if you are building this type of anim.

If you are creating .eff files it's even easier. Mainhall door anims do not seem to require a $Keyframe flag at all, so just make those like usual. The ship/weapon select anims will need the $Keyframe flag. Just type in the frame number of your loop point.

There you have it! That should be everything you ever needed to know about anim creation. If other topics arise, I'll add them.


[0] Message Index

Go to full version