Menu

2D character animation with sprites

In the last blog post I was talking a bit about pixel art. In that tutorial I went through some basic steps how to create pixel art with Photoshop and now I want to tell a little about character animation and show you the sprite sheets that I made. I will also talk a little about how I made them and show you how they look when animated.

I really like doing animation and it's fun to see how the little things add a lot to the animation. Sometimes it can be fustrating, but I always find myself wanting to try it again.

A bit on animation

In games, there are usually two kinds of 2D animation techniques used: sprite animation and cut-out animation.

In sprite animation you will have to create a sprite sheet that has all the frames you need for your animations. The more frames or pictures you have per animation, the smoother the animation is. However, adding more frames means that it will need more memory. It is usually good to do graphics in a memory efficient way, so that the games will load faster and the game won't need too much storage space.

In cut-out animation you will create a sprite sheet that has all the character's parts, which will be "cut out" from the sheet by the program you are using. Then you can build the character from the parts and start animating it within the program.

In this post, I will be talking about sprite sheet animation and I will use graphics from the pixel game project. These characters and their animations are work-in-progress, and they might not be the same when the game is done. The animations will change and some animations are still missing. So keep in mind that the animations shown here were made in a short time and only represent the first iteration.

Creating the frames

For this game, there's a need for a bunch of different animations. There must be animations for walking/running, jumping, climbing and dying. From these, the death animations are still missing and the jump animations still need some work.

The Hero

Hero

First, I made the hero character's standing pose, which I would duplicate and make modifications to it. I found that for a walk animation, the minimum amount of frames is three, but with four it's even better. I wanted to use as few frames as possible, but enough to keep the movement looking "smooth".

Two frames

Walk2FramesWalk2FramesGif

As you can see the frames are almost the same; only the coloured leg changes from back to front. I made this by modifying the character's legs to be as they are in the first frame. Then I duplicated the frame and coloured the legs so that the nearest leg is in front. The problem is, that with only two frames the movement doesn't really work. The animation needs a third frame, where you can see that the leg is moving forward a bit. 

Four frames

Walk4FramesWalk4FramesGif

This could have been done with three frames but I ended up using four. Now it looks more like the character is actually taking a step. This is achieved by making the characters stance higher on the added first and third frames. Again, I duplicated the first frame and made small changes to get the third frame.

I might have to modify this after I have seen it in the game. You can have an even more natural and fluent animation by adding more frames. If I were to add new frames, they would be in between of the current ones. They would be in the middle in "height", since I already have the highest and lowest point of the movement in the animation.

If you want to study character animation, I would recommend a book called "The Animator's Survival Kit" by Richard Williams. It has a lot more stuff than just how to make walking cycles, so if you are into animation you should read it.


We can still make it look better by adding more movement into the existing frames and without adding any new ones. When people walk, they move their arms, so by modifying the second and the fourth frame we can add that movement to the animation. Also, we can add movement to the crest on his helmet (the thing attached to his helmet, not really sure what it's called). Adding small details will make the whole animation look a lot nicer.

The final four frames

Walk4FramesFinalWalk4FramesFinalGif

Now the walking animation actually looks quite good and it is a lot livelier than the earlier versions.

When you create the frames, remember that you can always use copy and paste. This will make life easier, since you don't always have to draw your character from scratch. This way, you will save a lot of time.

Layers are also useful, if you have something you want to test on the character, like a piece of clothing, but don't want to draw it "permanently" on the character. Remember that you can also change the colours a bit by using adjustment layers.

A character with items

The hero character was quite simple, as he didn't have any gear or markings on him. So when used in-game, he can just be flipped, so you can use the the same animation for walking to the left or to the right. You might want to add some weapons or markings on the armor, which will mean you will have to draw two walking cycles, one for him walking left and one for walking right. Otherwise, it will look odd when his shield and sword change hands when turning left or right.

For now, the hero won't get any weapons, but the wizard guy who will be acting as the villain will have a staff, so he can do wizardly stuff with it. So, we will have to make twice as many frames for him. The creation of the frames will happen the same way as they did for the hero, with a lot of copying and pasting.

The Wizard a.k.a. The Necromancer

Wizard

This time, I started with the front view, after which I created a side view of him. Then I duplicated those frames and created the rest, the same way as I did with the hero.

The walking cycle

These are the current frames for the wizard's walking cycle. It has six frames, rather than four like the hero. I ended up using six, because it felt better and it worked better with the staff.

WizardWalk

I created the first row and after testing it, I thought it was OK. Again, I first made the legs, and after the walking was looking alright, I added the movement to the hands and the staff. Lastly, I added movement to the small parts of the character, like his belt and moustache. I duplicated the whole row and then flipped it. Then, I modified the duplicated row by darkening the staff and doing other modifications, to make it look like it's on his right hand.

When making sprites, it would be good to have same amount of sprites on all of the characters. If the character moves faster you can have less and if they are slower, you should have more frames. It's not a good idea to just play the frames slower or faster.

All current character frames

Here at the end, I decided to show you all the frames together, so you can see how many frames there actually are.

The Hero

Hero Sheet

The Wizard a.k.a. The Necromancer

Wizard Sheet

The goblin minion

Goblin Sheet

Now you can imagine how many more frames are needed to have all animations you might need. Yup, that's a lot.

Character animations

Here are the animations made with the sprites. All of the sprites might not have been used, but they might be useful in the future. I might also create new frames and modify the current frames.

hero gifWizad gifGoblin gif

If you look closely at the goblin's animation, you can see that it's a bit different than the other two. The pixels are moving oddly while the animation plays and the nose gets longer and shorter during the animation. This is from an error while resizing, which doesn't happen often, but it still happens when you least expect it. I talked about resizing in the post about pixel art. So go and have a read to find out what you can do in this kind of situation.

Conclusion

If I use a lot of time on something, I won't change it too easily since it already feels "ready". However, these characters were made in a short time and they aren't flawless. They might (and probably will) change during the game's development, so this way it is easier to come back and alter them.

I must say, I really like doing pixel art. For some reason, it feels like it's easy to do and to animate. I hope this post gave some kind of picture of how I worked with these characters. If you would like to have a more detailed step-by-step post about character creation, or about doing walking cycles for characters, let me know!


Share this:
Category: Graphics   


comments powered by Disqus