• Welcome to Final Fantasy Hacktics. Please login or sign up.
 
March 29, 2024, 09:33:58 am

News:

Please use .png instead of .bmp when uploading unfinished sprites to the forum!


SpriteAnimator Tutorial by Choto

Started by 3lric, September 09, 2012, 12:35:44 pm

3lric

Since this is such an awesome program, I decided to move Choto's tutorial for it over here.  -Elric

This will be a tutorial about learning the basics of how the Sprite Animator works. It can be quirky as it's still a work in progress, but once you know what to do it's off to the races. One thing to note as you work the the animator, if something appears with an extremely small window, just resize it to view everything.

Step 1: Create your Effect-Sheet

To begin, you must have all frames and graphics on one Effect-Sheet. It seems to take pretty large files, so I usually start with a 500x500 pixel sheet so that you can put whatever you want in the sheet. Here's an example:



Step 2: Begin new format

Once Sprite Animator is open, go to File-->Formats-->Begin new format.


Here is a description of each Line:

File Type - The Sprite Animator loads a format by reading the name of the effects-sheet you open. This line assigns an extension that will define your animation. Ex:  Name.Meteor.bmp

File Description - This is what will appear in the dropdown menu when you go to ViewAvailable Formats... For simplicity I usually name them the same name. If this causes your animator to crash, download the latest version.

Format Status - Self explanatory. I usually set it to new and forget it, but It can be useful for organization.

Frame Width/Height - These define how big the scene will be for the animation.

Rows/Columns - These define how many frames will be loaded into the main screen. They are arranged in rows and columns so that's pretty self-explanatory.

Start/End Frame - This sets the default length of the animation. This can be changed pretty easily on the main screen as well.

Target MS - This is the length of your animation in milliseconds(?). Less makes it go faster and more makes it go slower.

On Load, Zoom - Upon opening the effects-sheet, this will change the zoom by the shown amount. This is good for larger scenes as it will zoom out for you to view things easier. 1.00 is normal size, .50 is half-size, 2.00 is twice size.

Source Image - Click Browse and load your effects sheet. This defines where we will cut our frames from.

Use No Image Sampling - Just uncheck this.

So fill all that out. Now there are 5 sections of display-area. Clicking on the headliner will collapse the viewable area. Basically this is where you define everything that you're gonna use when you make your animation frames. To start, lets cut our frames out of our effects-sheet. Right-Click in the viewable area under "Frames---------------". Click Add new frame.


Click and drag the box over what you want to cut out. The numbers will fill in the fields on the left. Give it an ID number and click Save. Note: You cannot put anything but a number as an ID.


Repeat until you have all of your frames cut out.

Click Save on the begin new format screen.

Go to File-->Load Image... Navigate to your effects-sheet and you can edit the name in this window. If the sprite animator simply loads the effects sheet into the main window, the file is not named correctly. If you need to, reference what it should be in the View-->Available Fomats dropdown menu.



If the Sprite animator gets really small, resize it. Look for the "Display" headliner on the left. Under that headliner should be a box called "Keep aspect Ratio on Resize". Make sure that's unchecked.


Now we can start editing our animation. In the main window, navigate the frame marker to the first frame. Right-click it and select "Edit Selected Frame".


Resize the window that pops up so that you can see the whole Big white square. If you right-click you will see a list of things you can do to edit the picture. For now, just go to add new frame and select the ID number of the frame you want. It should appear in the upper left corner of the white square. If it's above the white square, its bugged out and you have to start over.


Now with the frame on the page, you can press "S" and move the mouse around to change the scale. You can press "R" and move the mouse around to rotate the frame. You can move the frame by clicking and dragging it. Once your finished adding/editing the frames you want, right click and select "Update Frame".

With the frame selected you can right click and go to Change Selected Blending. There is a list of blending options to choose from. Try them in different effects to understand what they do a bit better, as they all are very useful at different things. Blending things well can help you achieve the effect that you desire a bit better, so try to play with them.

X out the window and you'll see the changes reflected in the Main window. Navigate the frame marker to the next frame, right-click and select "Use previous frame". This will make a duplicate of the previous frame so that you don't have to start from scratch again. Thanks Lirm!

To Add Color/Opacity:

With your format/Image loaded, go to File-->formats-->Edit Loaded Format. In the Display area on the bottom, right click in the area under "Available Colors and Guides" (left side is colors, right side is guides). Select add new color and a window will pop up. Create your color and opacity and save. Then right click the area under "Color and Motion Tweens" and add new tween. Name it the same name as your color. Right Click under Color Name and add entry. Name it the same name as your color.



Save in the edit format window and X it out.

Now, when you're editing an animation frame, select the object you want to color and right click. Mouse over Change Selected Tween, and select the color.


That's pretty much the basic info to get started. Once you feel comfortable with how to do what you want, things get much faster and easier... and a lot more fun. You may experience some crashes, but try to document exactly what's causing it to crash if you can so that it can be fixed or avoided. Hope this helped!
  • Modding version: PSX

MiKeMiTchi

I was just wondering, could we actually use these stuffs? There has been a lot of progress with animations lately but I don't see how they are implemented in Tethical. If these effects are compatible with FFT, then these would be nice additions, but if they're not, I don't see any use of them at the moment besides visual demonstration. Just saying because if others create something from this tutorial, then would it be more of a waste than a gem?
Jot5 GFX Designer :: Spriter :: Mitchi

3lric

Well i personally use it with monster sheets because unlike with Shshi you can see their animations without having to put them into a iso and test them.

But it seems to have many other uses as well.
Hopefully Choto will know more
  • Modding version: PSX

RavenOfRazgriz

Spell Effects made in SpriteAnimator can't be used in an actual copy of FFT.  They're only compatible with Tethical.  Spell Effect Animations are .BIN files that contain animation logic, camera commands, etc.  For your average FFT modder as things stand right now though - the SpriteAnimator is really only good for previewing MON Sprites and Type1 Human Sprites.  Once Tethical gets into its more complete phases you'll probably be able to do a lot more with these, but until then, nope.

Lijj

Actually, thanks to Sir Lirmont, there was a recent update for those interested in using the program for more than just Type 1 and monsters. This now includes Type 2, Chocobo, Altima and the other tall sheet.
And great post Choto!
  • Modding version: PSX

lirmont

Short answer, there is a reason I do not post Tethical's stuff outside of Tethical's sub-forum.

If you don't benefit from it, don't use it. I've said several times in Sprite Animator's one and only thread that I will not be doing the work required to make it helpful for FFT modders only. It's not meant to just be useful for Tethical, either. It's meant to be a general purpose sprite animation tool which is easy to write an implementation for in real-world situations. What's your real-world situation? You have a game (FFT) that has an effects implementation (TIM binaries). You could write a program that converts the human-readable, easy to understand XML files my program creates and generate binary files out of them. Because my program is general purpose and modding FFT is obviously a very specific purpose, you would have to do that work if you want that feature, and it would probably not take that long if the binary format for FFT's TIM binaries is known. If you wrote that tool, though, you'd have an effective spell effects/item effects design program without having to lift a finger. That will probably never happen though, because it's expected to have things handed out without work.

That said, there are a lot of things that have been handed out to you, since the formats for fft-type1, fft-type2, fft-cyoko, fft-arute, and fft-kanzen are all directly pulled out of Shishi's code. The program automatically reloads your image (by default) when it changes to help you see changes in animations; if you saved it in Graphics Gale with it open in Sprite Animator, you would not need to reload the file in Sprite Animator. The program can overlay your sprite sheet on top of a reference image so that you can see what things are named (I only used numbers for mine, but you could use names). You can also change how fast the stuff animates. Most of all, you can export it quickly to a GIF format that is easy to show off to others. Instead of having to say, "Here's my sprite sheet," without a lot of work (because it's work to create a GIF out of a sprite sheet), you can say, "Here's my character," without a lot of work (because the work to create a GIF out of a sprite sheet is done for you). And you can have GIF's of any arbitrary set of animation frames you want, because, once again, my program is general purpose.

All of this stuff is posted already in Tethical's forum here: http://ffhacktics.com/smf/index.php?topic=7409.0