55 - 俯视角角色动画
待润色
Pixelblog - 55 - Top Down Character Animation — SLYNYRD
引言
俯视视角完美融合了功能性和美观性，是像素艺术游戏中最常用的视角之一。具体来说，我指的是四分之三俯视投影，它能展现物体正面的大部分以及顶部，常用于角色扮演游戏（RPG），例如《超时空之轮》。俯视视角是我个人最喜欢的创作风格，Pixelblog 上也多次出现过相关的素材，但俯视视角仍然有很多挑战需要克服，尤其是在动画领域。拿起你选择的武器，加入我们的冒险之旅，一起挑战令人头疼的八方向俯视角色吧！
示例精灵
早在 Pixelblog 22 期，我就展示了我的第一个俯视角色模型。虽然我仍然认为这个精灵的基本设计质量很高，但行走/奔跑动画只能说勉强够用，而且略显僵硬。此外，我当时只设计了支持四个方向移动的帧。就性价比而言，四方向移动仍然是一种值得称道的设计方案，因为虽然可以实现八方向移动，但角色朝向却受到限制。这种限制实际上催生了一些有趣的设计方案，例如《塞尔达传说：众神的三角力量》。林克可以斜向行走，但他只能面向上下左右。为了弥补这一限制，他拥有宽广的挥剑弧线，蓄力时可以横向移动，并且可以使用回旋镖等副武器进行斜向攻击。这种有限的动作组合使得设计师能够在不设计过于复杂的地牢布局和敌人行为的情况下，创造出有趣的游戏挑战。另一方面，如果玩家可以向八个方向攻击，那么关卡和敌人设计就需要更加精妙，才能提供真正有意义的挑战，充分利用增加的攻击范围。为了满足现代玩家的需求，并保持像素艺术在游戏设计中的地位——而不仅仅是怀旧——这是一个值得克服的问题。
在设计时，我特别注重形式、功能和经济性的平衡，因此这个模型没有参考任何特定的素材。为了保持尺寸小巧，正面中立人物的尺寸为 26x32 像素。与我之前提到的角色模型一样，这个尺寸大致符合 1x2 的 16x16 像素图块。即使你没有在场景中使用实际的图块，将素材尺寸统一到图块网格中也能使关卡设计和美感更加协调。
虽然这个模型仍然带有一些 Q 版的风格，但它比我之前的模型更加纤细，四肢的比例也更长。这使得角色能够做出流畅的动作，而无需过度拉伸或挤压。它比传统的 Q 版更加写实，但又足够变形以展现人物个性。
我先制作了正面人物，然后制作了仰视和侧视版本。最后，我把那些棘手的角度留到了最后处理。幸运的是，由于这个图形是对称的，侧面和角度的版本可以互换，因此只需要五个方向就能完成一个完整的圆。
至于工作流程，我首先在一个场景中粗略地绘制了每个方向的版本，并进行对比测量以确定人体结构的大小和位置。所有角度都绘制完成后，我将它们放置在画布上的统一位置，并按顺序制作成旋转动画。这揭示了许多我之前并排查看时无法发现的错误和问题。动画设置完成后，我可以逐帧进行微调，直到旋转不再生硬，从而改善了所有方向的形态和一致性。关键在于保持肢体的粗细和长度一致。在如此小的尺寸下，一个像素的差异都可能造成巨大的影响。
所有方向的基础图形确定后，我创建了待机动画——同样是从正面开始，最终扩展到各个角度。待机动画的制作过程，图片已经足够清晰地展示了。帧时序/播放速度对表现力影响很大，最终取决于个人喜好。无论如何，匀速播放对我来说感觉有点机械，所以我采用了偏移时序，让动作两端的帧保持比中间帧更长的时间，从而营造出更自然逼真的感觉。
对于跑步动画，我首先完成了正面朝前版本的完整6帧循环。然后，我将动作转换到侧面版本，接着是仰视版本。同样，我把角度的动画留到最后。侧面和角度的动画会进行翻转以涵盖所有方向，从而将工作量减少到5个不同的动画。
在完成所有方向的粗略动画后，我将它们排列成一个圆圈并同步运动。这使我能够研究动作并有效地比较相关帧。在此基础上，我可以对动画的整体质量和一致性进行许多改进。我会逐帧地检查，一次检查一个身体部位，确保它们在逻辑上遵循相同的运动循环，并在所有位置保持一致的比例。例如，头部摆动、肩部旋转和四肢最大摆动幅度都是需要重点观察的区域。
对于这样一个身体结构紧凑的小精灵来说，6帧动画就能完美地兼顾简洁性和流畅性。动作的核心表现来自头部的摆动。捕捉自然流畅感的关键在于变化的弹跳动作，而非略显机械的恒定正弦波运动。例如，在这个6帧循环中，每一步相对于前一帧的动作是：下落1像素，再下落1像素，然后上移2像素。这种动作顺序在相反的一步重复，从而完成一个6帧循环。此外，上移的动作速度比下移的动作速度更快，这体现在双腿在躯干下方汇合的“过门”帧中。当然，每个人的起跑动作都有其独特的细微差别。尝试调整动作幅度以及它们在帧间的分布。如需更详细地了解跑步循环的基本原理，请参阅Pixelblog 8。
角色设计
我们不能带着假人去冒险——是时候打造一个真正的角色了。
这张图展示了我角色设计过程中的主要迭代版本。请注意，一些修改是基于对八个方向其他位置的测试，以及尝试制作待机动画而得出的。在某个静态位置看起来最好的设计，在动画的其他帧中可能就变成了模糊不清的噪点。换句话说，静态图像和动画角色的设计理念有所不同，为了保证动作的清晰度，应该优先考虑妥协和简化。
-
我已经确定了头发的形状和装备。颜色需要改进，缺乏协调性。明暗平衡很奇怪，所有对比度都集中在中心区域，显得杂乱无章，而边缘的中间色调又模糊了整体轮廓。整体感觉有点普通。
-
明暗平衡有所改善，但某些区域仍然缺乏清晰度。明亮的头发赋予了角色个性和辨识度，但也分散了太多注意力。披风兜帽增添了角色特色，并将盾牌与角色融为一体。头发、兜帽、盾牌和剑的颜色搭配和谐统一。
-
移除盔甲裙摆减少了画面噪点。明暗平衡更加均衡，同时仍然保持了良好的对比度，更好地勾勒出人物轮廓。棕色皮靴和臂环很有意思，但有些地方颜色过于相近，显得杂乱。
-
我喜欢耀眼的金发，但考虑到角色在动作中的状态，我担心在某些情况下，金发会与剑的颜色重叠，从而分散人们对攻击时劈砍效果的注意力。深蓝色头发使角色整体更加协调，整体明暗平衡也更好，同时靴子的颜色也进行了调整。更换脚部装备也提升了人物的轮廓，增加了垂直感，使角色看起来更高。调整手部和前臂的颜色，使其在各种姿势下都清晰可见。
角色设计占据了大部分前期工作，绝对不能马虎。过于复杂的设计会让动画制作变得异常棘手。而糟糕的设计，即使动起来也依然糟糕。我建议从简单的入手，逐步完善细节。分层设计能带来灵活的实验性。例如，我将披风和装备放在一个单独的图层上，可以叠加在基础服装之上。如果你的游戏需要多种装备和服装选项，这种方法也能满足需求。在这种情况下，我甚至可以更细致地划分，将盔甲和靴子也分开。
角色设计一旦确定，真正的乐趣就开始了。将设计转化为所有帧需要大量的观察和比较，以保持整体的一致性。在这个过程中，你可能会发现一些设计问题，需要进行修改以保持人体结构的清晰度。
和制作模型一样，我首先在一个场景中创建了所有方向的画面。由于头发和装备的不对称性，我必须为所有八个方向分别创建独特的帧。在游戏玩法中，或许可以简单地翻转物体，比如根据玩家朝向切换持剑和持盾的方向，但如果原地不动也做出旋转动作，那就显得很奇怪了。
头发的弹跳效果毫不费力地增添了活力。头发在第 2 帧和第 4 帧会发生移动，其余帧则保持不变。如果头发高光在任何方向上都保持固定位置，看起来会很奇怪；但如果跳动幅度过大，又会显得杂乱无章，令人分心。我发现让头发以稳定的节奏小幅度移动效果最佳。
最后感想
在制作写实人体系列动画时，我使用了相对较大的精灵图，所以现在来制作一个更简洁的模型动画，感觉很轻松。当然，这并不意味着制作起来很容易，因为每个像素都可能产生显著的变化，但我非常享受处理小型精灵图抽象概念所带来的挑战。我计划在这个模型的基础上添加更多实用的动画。这是一个良好的开端，但还有很多工作要做。我肯定要完成角色设计的跑步循环动画。攻击、格挡和闪避动画也肯定很有价值。除此之外，我还可以考虑敌人设计，以及一些新的场景概念。看来我又要开始写一个系列博客了。下次见！