RPG Graphic Tutorials part 2

RPG Move (walk) Animation Tutorial

Hello and welcome to another tutorial,

If you have already read my first RPG character template tutorial then you can now proceed on this one.

Today’s tut is all about animating RPG characters walking front (walking towards you).

So lets begin by showing you a RPG char template.
tut_img4.png

For this tutorial I am going to make a character out of this template, although it is much better if you do the animation on the template itself. In fact, its not advisable to do the animation sequence to a newly defined character, you will lose the purpose of having templates

Ok, first i have to clear something about the template… he’s standing with its feet 45 degrees angled. well, take a look at this
tut_rpg_anim2.png

The first feet above represents someone standing… now standing is different from walking, so the likely pair of foot for walking or running is the other one. Now… this is my character:
tut_rpg_anim0.png

And this is its walking animation:
tut_32x64_rpg_walkanim.gif

So how do you do that? Here’s 2x zoom of the sprite:
tut_rpg_anim4.png

Look at each of them one by one, notice that frames 1,2, and 3 is almost an exact copy of frames 6,5,4 respectively, they are just flipped horizontally. so its seems you can cut half the time working on a move animation by flipping the first half of animation horizontally. Also look at the arms, when we’re walking we swing our arms back and forth right?

So how would you draw an animation that will effectively show a convincingly swinging arms in the frontal view.
tut_rpg_anim1.png

The first arm (hand) show that the arm is swinging back, the second shows the arm is on the middle , and the third one shows that the arm is at front. Now, notice the angle, proportion and the shading… you must be able to master the depth of things that moves.

Also, because RPG view is almost like top-down.. the arms that swinging back should look shorter and darker (darker, that is if the light source is above the object). While the front arm looked a bit short too (but not as short as the other arm) and is more likely be lighter.

Now let’s move on to the lower part, like the arms, the legs also follow the same method. Consider the following image:
tut_rpg_anim3.png

Let’s observe the sequence of a leg (right-leg) doing some movement (running)

  • The first leg, is stands on the ground
  • The second one, its foot lifts up a bit
  • Third one, its foot lift up higher, now notice the shading, the upper part of the leg is totally exposed to the light source so it will look brighter.
  • Fourth, the foot finally lands back on the ground. notice that it is swinged front so the whole leg is exposed to the light source.
  • Fifth, ok now the leg will swing back… it lifts its feet backward.. the shading on the lower leg is darker because the light source no longer hits it.
  • Sixth, the foot lifted higher backward…the leg is completely moved backward.. and is fully darkly-shaded.

Ok, so by observing the shading you can tell if a leg is swinging back or front.

Now lets try to copy the legs and flip them horizontally to make two legs running:
tut_rpg_anim4.gif

It looked a bit odd though, but anyway, it still creates an animation of a running legs.

And also do not forget… that when your left arm is swings front, the left leg should be at the back, that is pretty basic for walking eh!

Lastly, always remember that when the two legs are far from each other, the height of the character should decrease.

Ok, that’s a wrap, i hope you’ve learned something today.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *