作者：Chris Hildenbrand

经过前面四个部分的学习，我们已经掌握了基本的角色制作技术，接下来我们将学习如何给角色添加动画效果。（请点击此处阅读本教程第一、第二、第三、第四、第六部分内容）

在前面的四部分教程中，角色的上下肢的两部分是组合在一起的，这次我打算有所改变，即用所有独立的部分组合成一个完整的角色。

我声明，这只是制作动画的方法之一。这种方法非常类似于老式剪切动画，虽然不如手绘动画或3D动画那么流畅，但更为直观，更容易掌握，且非常适合小尺寸的画面。

制作野人（动画对象）

除了面部上增加了些许复杂的特征以外，制作方法与教程三中所示的方法完全相同。

教程图1(from gamasutra)

教程图2(from gamasutra))

注：在上图中，四肢部分是水平翻转过的，显示了其分解步骤。如果你把这些部分呈侧视角（双足应指向同一个方向）使用，则不必如此处理。

教程图3(from gamasutra)

教程图4(from gamasutra)

注：多次使用后，我渐渐喜欢上CorelDraw文件的多重页面设置。不必把动画放在分离的层上制作，然后逐一浏览进程，该软件允许用户以单独一层位图文件的形式输出页，以保持层和页之间的分离。

动画

在制作动画以前，如果你能先看看其他比较基础的动画就更好了。

不要把事情复杂化，想些能运用到游戏中的东西，这样你才能有动力、有目的地进行下去。

注：

多找些参考、动画或教程材料总是有益处的。大量的参考材料可以简化结构组织，免去凭空想象和从经验出发的困难。

第一步

教程图5(from gamasutra)

教程图6(from gamasutra)

注：

如果你使用过Adobe Flash或其他类似的时间轴类工具，那么你对这个制作方法应该非常熟悉。使用inkscape制作图形就相当于Flash中的“影片剪辑”或“图像”。你要做的就是给中间帧添加动画，相当于在Flash中制作“补间动画”。

变体

这里的变体就是指改变和尝试不同的动作、位置、旋转角度等。在“野人”的基础上，我又设计出三个角色，作为启发：

教程图7(from gamaustra)

教程图8(from gamasutra)

教程图9(from gamasutra)

希望各位从我的教程中能有所收获，学习愉快！（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

2D Game Art For Programmers – Part 5

by Chris Hildenbrand

Having covered the basics in [part 1], [part 2] and [part 3] and getting a little sidetracked in [part 4] I finally worked on the animation tutorial.

I decided to alter the approach and use a slightly more complex character with all the parts that make up a human [rather than join legs and arms into one object the way I set up the character in part 3].

I should state that this is just one way of doing animations. It’s very similar to old school cut out animations. It’s not as fluid as hand drawn animations or 3D work but it’s a straight forward and somewhat easy to follow approach. It works quite well with small size sprites.

Creating the [soon to be animated] caveman

It’s pretty much the same process used in the tutorial’s 3rd part with some added complexity in the facial features.

Note:

I mirrored the limbs in the image above just to show the ‘exploded’ body setup. There is no need for that when you use the elements in a side on view [both feet should point in the same direction].

Note:

Working with CorelDraw a lot I come to appreciate the multiple page setup of CorelDraw documents. Instead of layering animations you just place them on separate pages and flick through them to check your progress. The program even allows you export the pages in one layered bitmap file keeping layers and pages separated.

Animating:

If you start out animating it’s helpful to go with some more basic animations first – there is nothing wrong with the ‘mad-kung-fu-360-tiger-meets-dragon-in-mid-air-move’ but it might be a little frustrating to start with.

Think simple and create something you can use in your game. This way you keep motivated and focused.

Note:

It’s always helpful to check out references, poses, animations and other tutorials. A lot of the reference will show you a simplyfied setup that makes it a little easier than working off memory and your own experiences.
First steps (quite literally)

And this is what it looks like scaled down to a 64×64 bitmap:

Note:

This setup will seem very familiar to those of you using Adobe Flash or similar timeline based tools. The groups of object created in inkscape are similar to symbols either as ‘movieclips’ or ‘graphics’ used in flash. All you have to do though is animate the bits inbetween which Flash handles for you with ‘tweening’.

Variations

It’s all about changing and trying different poses, placements, rotations and flows. Based on the setup of the caveman I created three more characters as inspiration:

I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.（source:gamasutra）