β

2D 动画优化的技巧:AngerForce 幕后故事 2

前言

AngerForce: Reloaded 是我们制作的一款九十年代街机风格的 STG 游戏,目前已经发布,可以在 Steam 中下载到。你没有玩过这款游戏也没有关系,这并不影响你阅读后面的内容。

本篇文章还是用我们游戏项目里的例子,说说动画制作和优化时的一些小把戏。相关内容的 前文在此。

这篇应该是最后一篇关于 AngerForce 的动画的文章了,在此也插播个广告:AngerForce 的 Switch、PS4和 Xbox 版本也基本移植完毕了,近期将会发布,喜欢 STG 的同学请奔走 相告,千万别错过。

ヽ(∀゚ )人(゚∀゚)人( ゚∀)人(∀゚ )人(゚∀゚)人( ゚∀)ノ

引子

2013 年,我第一次看到《龙之皇冠》的2D 动画时彻底惊呆了。

当时我还是个菜逼,刚刚和小伙伴们组了个票友班子开始做游戏。我们的动画工具是自己开发的,功能十分有限。看到龙之皇冠的动画,我完全没有头绪应该怎么去实现,更不要想有一天能用 FFD 等动画技术制作自己的游戏了。

(扯得有点远,工具我就不安利了......)

这次作为例子的 Boss 拥有 4 个阶段形态,每个形态的各个动画加起来一共有 40多个动画。这个 Boss 体型巨大,但所有动画所用纹理只有下面这张 1024x1024 大小的纹理。

之前的文章中提到了一些常用的制作2D 动画的技巧:网格形变、关节替换、遮蔽物。

在开始之前,我想特别说明的一点是:上述所有技巧得应用有一个前提——合理的设计方案。

设计是动画实现的天花板

一个机体能够做出怎样的动作在设计时就已经决定了,实现动画只是演出这个 机体的设计。机甲想要做出比较帅的动作和变形,需要有结构上的支持。设计 OK,动画实现就水到渠成。

设定阶段得想清楚很多细节:这单位是如何行动的,攻击方式是怎样的,他如 何展开武器结构等等。下图是这个 Boss 最终决定时的设计图:

我们确定设计可行的话,就会为这个单位制作模型,渲染出这个机甲在游戏中最终的样子,确定他在场景中的效果。

优化的细节

动画优化的技巧,在之前的文章中其实都有提到过,在此我再总结一下:

  1. 部件关节充分拆解。
  2. 利用镜像翻转减少素材。
  3. 小幅动作使用网格形变。
  4. 关节替换配合位移制造整体效果。
  5. 特定关节采用低精度素材。

合理地应用这些技巧,让这个 Boss 复杂的动画得以使用非常少的素材完成。

充分拆解

接下来进入制作动画的阶段,我们会拆解所用的关节,单独渲染某些关节所需的透视角度,然后将这些关节导入动画工具。

这是这个单位在动画编辑器里的工程:

充分拆解为了两点:

  1. 最大化复用关节;
  2. 动画处理操作起来更容易处理前后层关系,产生更好的动态立体效果。

不过拆解比较细也会造成动画制作的额外难点——在骨骼绑定的时候工作量比 较大,你需要思考清楚各个关节在绑定骨骼时的父子关系。所以,在实现中,究竟要 拆解到何种程度,需要各位自己来权衡。

利用镜像减少素材

一些特定的关节,如果是对称的,那么我们全可以用镜像来缩减素材量。

镜像的话,纹理的阴影会不正确,可能会影响单位的体积感,这点请注意。这部分我们处理的比较“偷”——根本没渲影子。

小幅动作使用 FFD

FFD 在之前的文章中已经介绍过了,这个技术应用合理就是神技。

机甲题材配合网格形变有非常大的优势——机甲单位有很多规整的几何图形, 在定义网格时是很好的参照,形变时更容易操作,也会制造更出色的视觉效果。

这个 Boss 很多关键帧都是通过网格形变得到的,这让复杂的动画得以使用非常少的素材完成。

网格形变在小幅度的透视变化下,效果非常出色,但想提醒一点就是,不要滥用。有些动画师非常执着与追求应用这个技术制作类似3D 效果的平滑动画,比如侧转之后补个面啊一类的。

对于这点我想说,如果你特别在意 3D 的效果就应该用 3D 来实现,这才是最经济的。2D 技术刻意去模拟这个得不偿失。

使用低精度素材

部分关节,如果无伤大雅,完全可以使用低精度的素材。比如说:被其他纹理所覆盖的关节;不影响动画观感的关节,像光芒、带有模糊效果的纹理;在动画中出 现时间较短的纹理。

下面这个动画中,旋转的炮轮是使用同一张纹理进行镜像并放大得到的,你能看出它的像素精度只有其他纹理的一半吗:

总结

上述就是我们在制作 AngerForce 这个游戏时的一些优化的一些技巧和总结,这 些技巧具体如何应用,或者应用到何种程度还是需要根据情况来。一些技巧应用的优劣我也写了出来,如果你也正在制作一款 2D 游戏,希望这个文章能对你有帮助。

结语和安利

最近一直在忙着制作新的游戏,这篇文章也是拖了很久了。之后暂时不写 AngerForce 了,陆续整理一些新游戏里面有意思的东西写写吧。这里也放一个我们新作的海报,喜欢的话可以拿去当手机壁纸。

我们近期会在微博上陆续发一些素材和内容,感兴趣的话,请关注我们: http://weibo.com/thescreambox

作者:indienova 独立游戏新闻,评测,开发教学
你的独立游戏第一站
原文地址:2D 动画优化的技巧:AngerForce 幕后故事 2, 感谢原作者分享。

发表评论