Sprite Animation Tutorial

Welcome to the Funkipedia Mods Wiki. So, you want to help contribute to the wiki by providing sprites? Then you've come to the right place. For those who have experience in sprite animation or any form of frame-by-frame animation, most of this may be familiar to you. For those who don't know about picture editing or not even know what a GIF is, this may be complicated.

We're going to start from the beginning, but we'll be delving into the hard parts first since that will make things easier in the long run. It may be hard to understand and may take some time, but take it easy and don't put too much pressure on yourself.

(And if anyone has a problem with any 'imperfection' you present, tell them to do it themselves. That'll make them shutup.)

This guide has two versions: A "For Dummies" one, and a TL;DR for people who don't want to read or are familiar with the basics. If you just want to jump in, go to Step 3.

Programs
Before we begin, please note that this tutorial is based on PC for Windows. Macintosh and/or any OS may vary the steps or may be obsolete for this.

In order to get our feet wet, we need programs in order to get things done. Bigger does not always mean better, and you don't have to pay hundreds-hell, anything to get an animation to work.

While the traditional programs provided could help, it can make things complicated in the long run. So what should we use?

In order to get the frames (plain pictures that are combined to animate) from the sprite sheet (picture containing all the frames for animations) in order to animate, we'll need a simple paint program.

Paint.net is a widely popular and free program. This will give us the ability to easily grab and modify the frames we'll need to animate. It will also include helpful tools such as rulers and layers (top to bottom parts of a picture to display as one) to help position and see the frames.

Next, we'll need a program to animate. There are various programs out there. LibreSprite is a free animation program that can be used to animate the frames needed. Asesprite is the same, but a paid program with a different license. The difference between the two is that LibreSprite is the old, outdated version of Asesprite, while Asesprite is an up-to-date version. If you already have Asesprite, you can go ahead and use that. Otherwise, LibreSprite is all you need as it gets the job done.

TL;DR: Programs needed: paint.net LibreSprite/Asesprite

Paint.net and LibreSprite/Asesprite interface
Now let's get to the interface of Paint.net for those using it for the first time.

Paint.net has a lot of uses and tools, but we only need a few of them to grab what we need. Here, we'll be focusing mainly on the following:

Rectangle Select: This allows us to select an area at an even aspect ratio (where width is the same as height). With it, we can select the individual frames needed from the sprite sheet.

Move Selection: Note that I am going over "Move Selection" here, not "Move Selected Pixels." We'll get to that next. This is a useful feature that'll help us fine-tune the frame we want selected. The frame you select will not always be at an even aspect ratio. With the "Move Selection," we can get the exact size and the exact location needed easily without any need to keep using "Rectangle Select" over and over until we hit that sweet spot.

Copy, Cut, and Paste: Now that we know what we want, we'll need to copy it of course. This can be done two ways. On PC, you can just do the keyboard shortcut (ctrl+c) to "Copy," or select "Edit" from the drop down menu in the top left and select "Copy." This will add it to your clipboard (copy of the selection). If you're running any other programs that has a clipboard with multiple selections, this can get complicated, so it's best to close those programs or assume that you have only one thing to copy and paste.

Instead of "Copy," and if you're comfortable with modifying the sprite sheet, you can use "Cut" instead. This copies the selection, but removes it as well. On PC, you can do the keyboard shortcut (ctrl+x) to cut, or select "Edit" from the drop down menu and select "Cut." This can be useful if a sprite has a lot of frames, and you're having trouble keeping up with it. Just use caution.

Now for "Paste." Again, there are two ways to do this. On PC, you can use the keyboard shortcut (ctrl+v) to "Paste," or select "Edit" and select "Paste."

There are three types of paste. You can simply paste on the picture, on a new layer, or a brand new image.

When you paste on the picture, it's a flat out paste, meaning it's right on the picture and overwriting any pixel-whether it's empty or not.

When you paste as layer on the picture, it creates a new layer over the picture. Same size, same position, but you can toggle it to display on or off. Think of it as an individual selection within the same picture.

When you "Paste as a new image," it creates an entirely new image. We will mainly use this one for our empty frame needs.

Move Selected Pixels: Now we get to the "Move Selected Pixels." Same as the "Move Selection," but different. Instead of just the selection being moved, the pixels within the selection are being moved as well. When you paste into a new image, "Move Selected Pixels" is automatically on for the new image. Moving the selected pixels with a mouse can be tough sometimes, but you can move it pixel-by-pixel using the arrow keys on the keyboard.

TL;DR for Paint.net: We're only focused on the following tools below: Rectangle select is used to select an area on the sprite sheet. Move Selection can be used to change the size of the selection. Cut or Copy (remove and copy or just copy respectively). Pasting on the picture overrides whatever was on it. Pasting as a layer on the picture pastes into the picture, but as a separate entity. Pasting as a new image creates a new, individual image of the picture. Move Selected Pixels moves the pixels that are selected. You can use the arrow keys to move it bit by bit. Remember, "Move Selection" is for selecting the area, "Move Selected Pixels" moves the actual pixels.

Now let's get to LibreSprite/Aseprite.

The good news is that there isn't much we need to do or learn for this program, as the majority of it will be automated for us. Once we open it up, we are met with a simple homescreen of recent files and such. We need to make sure some things are set up, however, before we get back into that program. First, let's get a new sprite started. Just go to "File" then "New," and select "Ok" on the window. Right now, the size and specifications don't matter. We are focused on the interface at the moment.

Once that new file is up, select "View" and then select "Timeline." This is the main aspect of what gets our animation to...well, animate. In the Timeline section, right click on the "1," which is our first frame of the animation, and select "New" or "New Empty Frame." Repeat that step again until we have three frames "1, 2, 3" shown.

Drag the mouse over the frames until you have all of them selected. Right click, then select "Properties."

This is the duration of the selected frames. By default, each frame is 100 milliseconds. It's highly recommended that the milliseconds for each frame stays consistent and the same. The more milliseconds you increase it by, the slower. The less you decrease it by, the faster. So if you double all the frame durations to 200, then it will be much slower. If you half it to 50, it will be much faster.

If you're doing a different animation program, please at least have the duration in milliseconds. Other measurements such as "FPS" (Frames Per Second) may not turn out accurate.

A special thing to note is that the more frames you have, the less milliseconds you should put on for each frame. The less frames you have, the more milliseconds you should put on for each frame. Also, not every sprite is the same as it can animate differently on different mods. At that point, we would have to eyeball it (measure by what we see).

Now that we are familiar with the basics, let's finish this. Go to "File" then Select "Save as..."

The "+"s on the file explorer are folders. The filenames are the type of files in the folder. In the drop down menu on the same window, select the arrow near "All Formats." After that, select "gif files."

Press "Ok" and another window will pop up. Be sure "interlaced" is unchecked and "Animation Loop" is checked. If this is not checked, then the animation will not repeat.

So now we are familiar with the interfaces of two programs, let's get started on getting our first animation going.

TL;DR for LibreSprite/Aseprite: Be sure that the animation timeline is open by selecting "View" and then "Timeline." Create new frames by right clicking "New" or "New Empty Frame." Highlight the frame numbers, right click, select "Properties" in order to change the frame duration. Frame duration for each frame should stay the same. By default, they are all 100 milliseconds. The higher the millisecond duration, the longer and slower the frame lasts. The lower the millisecond duration, the faster and shorter the frame is. The more frames you have, the less millisecond each frame should have. The less frames you have, the higher millisecond each frame should be. Not all sprite animations are the same, so you may have to go by what you see. Save the animation by going to "File," then "Save as...," select the box with "All Formats," select "gif files," and select "Ok." "Interlaced" should be unchecked, "Animation Loop" should be checked.

The Works
Let's start with an easy one as the example. Let's look at the Mommy Mearest spritesheet.

Let's open up the MomCar Sprite Sheet with paint.net, which should be a PNG file. Because there are various mods and engines, the location will vary, so download the mod and familiarize with the location of the files.

Alternatively, use this file: https://i.imgur.com/ODxTOh0.png

Alongside the Sprite Sheet, there should be an XML file with the same name. Open that with your notepad program.

Alternatively, you can use this: https://drive.google.com/file/d/1DqD8otQfBp9MgRJZ9CJLC8_mlHyciEv1/view?usp=sharing

Preview: https://i.imgur.com/c7jdRBQ.png

There are many lines for this, so this can be confusing. Right now, we want to do the idle stance of Mommy Mearest. On the Sprite Sheet we can pinpoint what we need by looking at it and finding the label for the idle stance. Most of the time they can be found with the name containing "Idle."

Now that we found out lines of text and we have the sprite sheet open, let's take a look at our interface. https://i.imgur.com/VAACUAv.png



Here we see that the first frame will always start with the number 0, then 1, 2, etc. We see the x location of the first sprite, and the y location of the sprite. X is how far right the sprite is, and Y is how high up it is on it.

Let's start by selecting rectangle select in any location. https://i.imgur.com/1qKtpBj.png

Notice on the bottom left there is more information. This will be key in getting our frames. Currently, our selection is beginning at x-2447, and y-854.

According to the lines, what we are looking for right now is x-2728, y-0. So we can assume first that the sprite is on the very top. Using rectangle select, try your best to get the first idle frame. This does not have to be in one shot.

After you have it selected, change your tool to "Move Selection." Make sure the top rectangle line is in the y-0 location, and the left rectangle line in x-2728 location.

Let's take a look at the bottom left location. We are familiar with the x and y locations. Now we get to the selection size of it.

On the lines of text, we notice the width is 467 and the height is 811.

So in translation, our selection starts at x-2728, y-0, with the size of 467 width and 811 height.

Right now, this should be your selection and what you should have at the moment. You may have to zoom in the picture a bit (bottom right) in order to get the exact measurements. https://i.imgur.com/KUw0UnS.png

Now the last measurement is the frame width and frame height. These measurements should stay consistent in each type of animation in the xml file. The width is 479 and the height is 814. Let's create a new picture file by going to File, then New. https://i.imgur.com/NiTdaVl.png https://i.imgur.com/gMHBHZX.png

We need to make it transparent, so let's do that real quick by selecting "Edit" then "Select All." Select "Edit" again then "Erase Selection." https://i.imgur.com/IhQVIrr.png

We're going to need more than one frame of this. According to the lines of text, there are 14 frames to this. Remember, the first frame always starts with 0, so think of it as 13 frames plus 1.

Let's go to "Edit" again then "Select All." Select "Edit" again then "Copy." "Edit" again, then "Paste Into New Image." Do this 13 times until you have 14 empty frames. https://i.imgur.com/xvHQkRm.png

Now we can get started. Let's go back to the sprite sheet where our sprite is still selected, then copy it. After that, "Paste" into the new empty image. (If the empty image is in selection mode, just press ESC on the keyboard to get rid of it before pasting it.) https://i.imgur.com/YPrtgaP.png

Keep that sprite selected on the new image as we are not done yet. If you deselected it, just go to "Edit" then select "Undo." That will get it selected again.

Let's look at our final piece of the text. We see "frameX" as 0 and "frameY" as -2. This is the direction we have to move that sprite that is already selected on the picture. We have to make sure the location of our frame is, according to the bottom left, at the location of x-0 and y-2. Ignore the negative signs on "frameX" and "frameY." We are focusing on the positive numbers.

Let's move our frame as stated above: to x-0 and y-2. It will be pretty easy to do this using our arrow keys. https://i.imgur.com/QIqsmxE.png

Now we can deselect it. Congratulations! You got your first frame done! Now it's time to save.

Go to "File," "Save As..."

Since this is our first frame, we will name the file "f0" and save it as PNG file. This is important as other normal file formats do not support transparency. Just select "Ok" to save the file. We don't need any special settings for it.

I know you're tempted to name it "f1." While it is not wrong, it can be confusing to keep up with the xml file, so I HIGHLY recommend to name it "f0."

You can do m0, t0, d0, etc etc-as long as there is a number at the end of each frame in order. This will make things easier when we animate it.

This is going to take a while, so repeat the steps for the next xml lines until you have all frames. You can press enter if you like to separate the lines you're done with. Take your time too! This will take some time to get used to it. For fun, with your saved frame files open, you can toggle them to see how they look when they animate.

Now you'll come across one that will be complicated.



We have to pay attention to the x and y coordinates this time. Remember, left side is the location of x, and the top line is the location of y. The size of the selection is 460 width and 814 height. https://i.imgur.com/26RDbhm.png

So, let's copy that and paste it into our next empty image. Don't forget to keep it selected when you do! Pay attention to the "frameX" and "frameY" locations, so we move the image to x-4 and y-0.

And the last piece of text for the sprite. Since this uses all of the requirements, let's go through it one last time.



The selection begins at x-955 and y-824 on top. The width of the selection is 471 and the height of the selection is 812. https://i.imgur.com/NzWsMGr.png

Let's paste that into our final empty image. The location we need to move it to is x-4, y-2. https://i.imgur.com/5QMZF2K.png

And we finally have our frames for Mommy Mearest!

TL;DR: In order to get his done, you will need two files: the sprite sheet file and the xml file of the same name. Open the sprite sheet with paint.net and xml file with notepad. The bottom left are the measurements of the selection. x is how far left the selection is, y is how far top the selection is. The width and height are the size of the selection. Width is how far right the selection is, height is how far down the selection is. "frameWidth" and "frameHeight" at the end are consistent for the frame sizes, so be sure to paste them in an empty image at that exact same dimension. "frameX" and "frameY" are the locations of the selection when you paste it on the empty image. Ignore the negative symbols and focus on the number. "frameX" is how far you move it to the left or right, and "frameY" is how far you move it to top or bottom. Each frame should be saved in PNG format. Be sure to save them as a letter and number file. For example, "f0," "f1," "f2," etc.

The Animation
With our frames completed with the exact dimensions and locations, we can now open up LibreSprite/Asesprite. Once we have the program open, let's open up one of the frame files. Once we try to open it, we are greeted with this message. https://i.imgur.com/IhqBPXB.png

Select "Agree" and voila! Our frames are all placed in one area! Press play and enjoy the fruits of your labor! https://i.imgur.com/4kZNOiZ.png

The animation seems slow, of course. The rule we went through previously is the more frames it has, the less each frame should last. The less frames it has, the more each frame should last.

Let's select all our frames, right click, and select "Properties."

This is the point where we are "eyeballing" it for now, so set the time to 40 milliseconds.

Now press play to test it out!

Let's save the animation. Go to "File" then "Save As..."

Make sure you select to save as a "gif" file.

Now the way we name files may vary, but one rule of thumb is charactername first, then pose type. So we have Mommy Mearest in Idle pose. Let's name it "MommyMearestIdle.gif".

A message will pop up. I will go over this in a bit. For now, select "Yes." https://i.imgur.com/RtM2yad.png

Make sure "Interlaced" is unchecked, and "Animation Loop" is checked.

Notes to remember: Gifs cannot have a transparent color (or alpha channel in other words). If it has any transparent color, it translates it to that color. If there is no color, it translates to as an empty pixel. When you zoom in or out on viewing the sprite. It looks like the quality has lessened. The quality has not lessened at all except for what I described in the line above. Note that if you use a different program, results and conversion may vary, so it's highly recommended to use these programs shown in this tutorial. If you know what you're doing, then go ahead.

TL;DR: Open up LibreSprite/Asesprite and open up one of the frame files. Select Agree to open them all at once. Press play to see if the animation plays correctly. Finding the speed is "eyeballing" it, so select all frames, then properties, and select the time the frames last. Remember, the higher the millisecond, the longer the frame lasts. The lower the millisecond, the shorter the frame lasts. More frames means less frame time. Less frames mean more frame time. Gifs cannot have transparent color (or alpha channel). The quality of the gif has not degraded except for above. The best way to name the gif file is the character and type of pose it is in.

https://i.imgur.com/virpoMs.gifv

And we're finally done with our first sprite animation! If you want to share your results from this tutorial, go ahead (but please upload your results to another location, not the wiki!). If you have any questions, feel free to post. If you feel like I didn't cover something accurately or completely, let me know. -JillOfTrades