Animation


Sprite Process

Example, since I can’t embed youtube clips for some reason.

It’s a sprite process by Ahruon, and using Character Maker (I use it too)!

http://forums.tigsource.com/index.php?topic=10612.0

This program can be used to preview your animations! It can make the gif into a strip or a strip into a gif, and loop an image too for it. It seems like it could be an interesting tool, so if you’re curious, go give it a look!

This list is from a list of sprite tutorials given to me. I looked through it and am posting a few here:

Creating a sprite from a drawing by Wayfarer

Spriting terms

Marks Pixel art tutorials. I actually have this up on the sidebar, but I linked to the shading tutorial and there are more present here.

drububus pixel art tutorials. Greyscale, focused more on isometric, but still worth checking out!

Pixelation discussion on color theory.

Sprite Animation by Manning Krull, covering 2 frames, 4 frames and 8 frames.

Youtube

Bikini girl sprite for no other reason than that it is a bikini girl sprite.

Pyramid statue video is actually 4 parts, check it out if you’d like.

Creating a sprite character from scratch

Cirno sprite by 8bit. I posted it before I believe, but it deserves another repost. Check out the other one too.

Sprite tutorial by FrankieSmileShow.

There were others but they were resized by photobucket.

4533218

(Shown at 50% size)

This is from Kou, you can see the image here along with the gallery. You may need a pixiv account, but you can find some nice images there so I’d suggest it.

Shiki

Smaller size pic, you can see the original here.

Visit their gallery, Kou has wonderful sprites and images. I love the style.

You can look here to see the general work in progress for how the animations are done for Vanguard Princess. Each sprite is redrawn, but the general animation is worked on first.

You can also download the game from there if you want. Here’s a screenshot of how the graphics look like:

I know I haven’t been updating this for a while, I’ve been busy with my own pixel projects.

I think it’s pretty interesting to see how they do the King of Fighters XII sprites.

It is not necessary to do the animations/characters in 3D first, this is just their method so they can get bigger sprites and standardize animations more.  They have a big section in yellow about the use of 3D.

AnimationSimple

Here is an animation sheet I did for Skie’s character, Zuleika from Sacred Earth bonds.

I will mention this in advance, this was a 2-3 hour animation job and I don’t have a massive amount of animation experience so I cannot show you how to make awesome animations. I would probably refer to fighting game sprites for that and looking up pictures on animation. I’m sure there’s a bunch of stuff out there, I’ll try to get a few when I go out looking for them.

Sacred Earth Bonds- Zuleika Attack

Not perfect, but here’s the resulting animation. I did not use all the frames in the sheet, some of them are newer after I got feedback. The top left corner and the bottom right corner sections are the frames I used. Some animation frames are small enough of a change so that you can just edit the existing sprite. A simple soft breathing pose would fall into that. For the attack, I redrew the character for when she goes forward to strike in the 3rd frame. Depending on how complex you want your attack you may need to do a lot more redrawing instead of editting. I built in the sword slash effect onto the sprite, I’ve seen some where it’s an outside battle animation.

I would do the frames unshaded first. You shouldn’t make the initial sprite, shade that and then try to edit it and get all the animation frames out of that shaded sprite. If you look at a fair amount of fighting game sprites, they have few colors but they’re very high contrasted.

t01324

Here’s a Guilty Gear sprite. May! If you check it out, they don’t use tons of shades. Each color probably has 3 variations of it. A dominant light color, a noticeable dark color, and a small amount of a midtone. You don’t have to copy this style, but having a nice simpler shading style can help it be less difficult to shade all the frames you do for an attack.

Tsugumo has a tutorial on this too. You can check it out here.

0091

I have Vanguard princess sprites as well. Save it and zoom in on it. It has a few tones, but it’s pretty much simple shades. I don’t know if there’s some non-manual rotation or something done because some have shades that seem too soft to be noticeable but for the most part there’s the high contrasted shades and a few for each color type.

The rest is just practice, seeing commercial quality sprites, learning more on animation, and getting the feel for the human body and how it moves and the various poses. Fighting game sprites take a long time to come out, and then when you have 300+ frames of it…

Character Maker doesn’t create animations for you. I think it makes it really easy to test out your animations for you. I know other programs have onion skinning which is helpful too, this program does not.

First, what you want to do is save all of your frames in one PNG or BMP. I use PNG because it saves space. Remember the character size tutorial? If you don’t then maybe I didn’t write it in the first place, but I think I did. So, make the character size so that each frame fits in that selection. I’ll post this sprite I did a while ago as an example:

birdsprite

Each frame is 64×80 pixels. Go ahead and download this to try. Open this in Character Maker, then set the Character size to 64×80. Right click each of the 3 frames. You’ll see both the editting window and the small previous box change according to which frame you right clicked.

If they were not aligned correctly, when you right click a frame, you would notice that it’s not correct. It may jump over too far, be moved a pixel to the side when it shouldn’t be, and things like that. That’s when you would have to edit the frame.

What I wanted for this animation is for it to start on the 1st frame, go to the 2nd frame, then the 3rd frame, then back to the 2nd frame. If you cycle that, then it will loop from 1 to 3 and back to 1. You would have to check what program you are using to see what animation cycles they use and how many frames you’re allowed.

Now, if you don’t feel like right clicking to test the animation, there is a tool you can use. Before you do that though, right click, hold, and drag it out until ALL of the sprite frames are selected. If you are still using the bird sprites, make sure that the red and yellow marching ants are around all 3 frames. Click the running guy on the toolbar.

Then, you should get this:

animatecartoon1

Yeah great Ocean, it’s all weird, what do I do?

See the bird sprites on the top part? Left click it to add it to the animation cycle. You’ll see the X=0 Y=0 line appear on the side. If you clicked more than once, you can just click the line and press delete to get rid of it. The 200 ms is milliseconds I assume, but it’s the passing of time from one frame to the next. You can change it, I usually keep it at 200 ms.

So go ahead and complete the animation cycle. It starts from the 1st bird sprite, to the 2nd, to the 3rd, and ends at the 2nd. If done correctly, it should look like this:

animatecartoon2

I’ll explain whatever’s left of this before I stop. The (X=0, Y=0) part refers to the frames position on the top bar. Doesn’t matter where in the document you got it, and it’s not going to “place” it anywhere afterwards. So if there were a second row, the Y there would be 1. That’s really all it means.

“Delete all” just removes all the lines there, good if you did too much. Save turn will save each frame individually to a folder. I’m pretty sure the “File->Set backup folder” is where you can set where they save to.

OK, please let me know if you have any questions on this.

I got a comment about how to animate the doors, so I figured I’d do one on that.


The yellow numbers are the steps that we’ll keep for animation frames. The green numbers are the steps to getting the next one. You could use #8 also if the number of frames isn’t an issue.

The green background you see for the doors will be replaced by the dark background later. It’s just to help you see how I’m manipulating the door. For step 2, I moved the door up every few pixels, so it’s on a diagonal. For step 3, I reduced the width by a few pixels. For step 4, I just darkened the part of the door that would be furthest from the player.

Conveyor! This will be an animated tile, so I need 4 tiles. And also for both directions, but we’ll take care of that when we get there. The first row is the process of making one. Now for animating it, the light source is where the rollers are highest, so they will remain in the same general position. So that’s why I recommend you put something like holes or some other thing so you can tell it’s rolling and not staying in place. Those holes will move for each tile. Since there are 4 tiles, you’ll want the 4th one to show the hole just before the 1st one so it can loop.

The vertical ones were easy, I flipped over the horizontal ones.

Now, doing the fence. I highly recommend you both work with the whole border and not just one section of it, and also that you test it constantly on the background to make sure it stands out enough.

The resulting chipset. I used the top part near the water for the conveyor as it’ll be an animated tile. It goes 1,2,3,4 and goes back to 1.

Map:

Time for water tiles. There are actually 2 ways to go about this, I’ll go over the first method before I do the second.

Method 1:

We’ll need to go to the upper left corner of the tileset, where the blues are. Those sections are the same size as auto-tiles, but for method 1, they do not work exactly the same as auto-tiles. The lightest blue section is for one terrain meeting the water, the one next to it is for another terrain meeting the water. The darkest blue section is for varying the types of water tiles, so you can go from light to dark.

First, let’s ignore terrain and just concentrate on making a water tile. Now, what you’re probably thinking of is BLUE. Well, you very well could use blue. However, consider what type of world your game takes place in. A more realistic world may use more browns and dull blues or greens in it rather than a bright blue.

For puddles, I recommend you use a dirt tile and make a transparent layer above it, and color it in a slight blueish or brownish. It should be darker than the original tile, though. (For reference, check out the Rudra forest chip). Photoshop or Graphics Gale are good for those layers, just make sure you first put it on RGB mode first, put a transparent layer above it, merge the layers, then put it on indexed (8 bit) mode.

For the Ocean, it tends to be more blue. Google up some pics of the Ocean. Here’s an example one: http://www.bigfoto.com/sites/galery/photos14/croatia-ai5_primosten.JPG
See the area with light lines on the bottom right side of the picture? That’s generally what’s use as a reference when making water tiles. Let’s start here:

Quite honestly, for some games you can get away with having a flat blue that doesn’t animate for a water tile, or maybe one that just has a sparkle animation on only a few of the water tiles. Other tiles have a very simple animation that consists of moving some pixels slightly. Try out the tiles in RPG Maker to see if they flow well.

However, I’ll do a water tile kind of like the RTP one. The RTP water tile is the only one I know of that has the water go brighter when it animates, so usually I’ll just have the water move and not change color. I’ll go with 2 blues for now, when I need more I’ll add some more. Put down the base color (Which should probably be the darkest) first and leave it as a flat color.

We have to treat the water tile like a tile. So when placed together, they should fit together right without looking odd. So, I made a first pass water tile with only 2 colors. I mainly made circles within the tile, so use the circle tool if you’d like. Here’s the tile, the zoomed in version, and an example of how it tiles on the bottom, I recommend you do something like that to test how a tile tiles, and pay attention to the edges of the tiles too. The lines on the bottom of the tile should match up to the ones on top, the top left corner should match up to the bottom right corner, etc.

I’ll place some highlights to make it look bright. Try not to make it too bright as you don’t want the water to stand out that much.

Now to animate it. You have one tile already, you need 2 more. The animation works like this (Unless you specifically tell it not to in the RM2K3 tileset section): 1st tile, 2nd tile, 3rd tile, 2nd tile, and back to first tile where it can repeat. You could try redrawing them so it looks like it moves. There’s 2 shortcut methods you can use also, though they might not always give the best results. First one is to flip the water tile vertically for the 2nd tile, flip it vertically again but then flip it horizontally for the 3rd tile.

The second method is to move it either up and right/left a few pixels for each tile, or down and right/left for a few pixels. This will make it look like it’s flowing in a certain direction. I don’t have a gif maker here, so I just made a sheet with all 3 methods here:

You can take the darker water tile, use the circle tool, take a transparent color, and get rid of the middle of it. Take a look at the image so you see what I mean.

So the first row in that section is the lightest water, the second row is the dark water with the light water in a circle in the middle, the third row is light water with the dark water in a circle in the middle, and the 4th row is for dark water.

Method 2 of making water tiles:

Now that we covered animating water tiles, and we covered auto-tiles, we can combine them. This has the benefit of making a more natural looking water boundaries, plus you can it animate for however many frames you’d like. Do not post all the frames of the animated water in the auto-tile, you only need one water tile.

We’ll do the animation by making multiple tilesets that are exactly the same, except for this water auto-tile. Make as many tilesets as you want frames of animation. So if you have enough for 6 frames, then make 6 tilesets.

Use a parallel process event to change the tileset, and a wait command of about 0.1 seconds, with maybe another 0.0 seconds or so. Have it cycle through all the frames of animation so that it loops correctly.