[材质贴图] AngerForce幕后故事:2D动画的3D体积感

查看:1333 |回复:3 | 2020-6-8 11:42:46

您需要 登录 才可以下载或查看,没有账号?注册

x
本帖最后由 raymotton 于 2020-6-8 11:47 编辑

前言

本篇文章将主要讲述游戏中的 Boss 恐惧破坏者(Terror Cracker)设计和迭代的过程。这个 Boss 是2016年重制 AngerForce 时,我们尝试制作的第一个新追加 Boss,希望以此测试新工具和制作流程。我们在早期做了一个巨屎的版本,根本没法忍,经过了一次制作流程的迭代后,才有了最终的样子。


1.gif


传统2D 骨骼动画

Spine 最近几年非常流行,有许多便捷的功能:曲线调整动画节奏、网格形变动画、允许混合动画播放等等,对主流引擎的支持也很好。


4.jpg


AngerForce: Reloaded 虽然叫重装(下文就都以《重装》来称呼),但是我们打算再追加些新的敌人、Boss 和关卡,这些都要使用新的工具来制作了。我们尝试使用手绘素材制作了一些动作比较简单的小型敌人,还都比较顺利,接下来就打算试试去制作一个全新的 Boss。


我们很快完成了设计方案:



根据我们的设想,这个 Boss 将完全使用2D 手绘的纹理,动画采用骨骼动画和关节原件替换的形式来实现。然后我们就做出了一开始提到的那个巨屎的版本……


看着让人尴尬的脸酸…… (;¬_¬)


其实我们对自己的设计方案还是有信心的,但纯2D 方案制作有很多局限性,制作出的效果非常廉价,对于2D 动画方案我有一些总结:

  • 无关节变化的2D 纹理只适合做简单动画。
  • 单纯靠转动、缩放和位移没办法表现出复杂、震撼的大幅度动作,制作精良动画需要引入关节替换。
  • 纹理的绘制的细节越多,制作这张纹理的其他透视关节就越困难,工作量也就越大——越细越难画准。
  • 多关节的复杂骨骼动画能制作出非常有表现力的动画效果,但制作调试比较耗时,最适合应用在主角这种登场频率较高的单位身上。
  • 利用前后层遮蔽有一些“偷懒”技巧,不用考虑动作时模型穿透一类的问题。

涉及到项目中的这个 Boss,在绘制纹理上我们有很大的矛盾——画太细不好做关节,细节少做出来又觉得作为 Boss 效果不行。

最后,我们决定用3D 来辅助。

Boss 恐惧破坏者


解决老问题

AngerForce 项目早期的动画使用3转2帧序列,当时受客观条件限制 Boss 动画优化很差,全部动画的帧序列打包完毕有3张2048x2048大小的图册(Atlas)。

2012年的主流移动设备甚至都不支持加载如此大的纹理,拆解为1024x1024大小的纹理是大概是12张,若使用32位图片存储,加载后图册单像素占用32位是4字节*1024*1024*12=48M 内存占用!

原始版本3转2图册


Boss 的一个形态就占这么多内存,这没法忍。虽说《重装》计划在 PC 和主机平台发布,但我们也不打算再用帧序列了。

我们这次计划全部用2D 工艺——使用自由网格形变、关节替换配合骨骼动画来制作。


优化后的动画图册



手绘关节太痛苦了,我们给单位建了模,想要各个透视角度的关节直接单独渲出来,精细纹理下的关节绘制问题就解决了。


FFD 减少关键帧

建模后,渲染关键帧很方便了,但我们也不打算滥用。对于大多数平常的小幅度动画,我们都尝试使用 FFD 来制作。



FFD 是最近几年比较流行的技术,原理是在一张2D 的纹理上定义网格,然后通过改变网格顶点的位置来变形这张纹理。使用这个技术,可以通过形变来得到单张纹理近似的其他透视角度,从而达到减少关键帧的效果。



这里简单摆个3D 模型来说明:Boss 的造型简单概括就是一个易拉罐后面背俩柱子,在我们的眼睛由摄像机位置①到③的过程中,关节透视如图中的样子来变化的。

我们根据这种透视变化的规律,用 FFD 形变就得到了 Boss 躯干关节的其他透视角度了:



使用 FFD 还有个好处就是,在形变的时候你可以得到平滑的过渡动画,合理的使用能产生神奇的效果,欺骗玩家的眼睛。



GIF 中的动画没有使用任何其他的关键帧,只是使用同样的纹理,似乎有了3D 的效果。这里面应用 FFD 的只有躯干和肩甲两个关节,其他关节只有缩放、旋转和位移。

比如躯干后的两个火箭包,只是通过简单的位移加小角度旋转,却让人感觉似乎和躯干一起侧转了起来。



其实这个动画体积感最强的地方是在头部和肩膀的区域,这里有一个小技巧:利用2D 动画的不同关节的遮蔽关系,适当的设计一些小的结构,在关节位移的时候显露出来,能让人感觉内部似乎隐藏着复杂的结构和体积。



替换关节完成大幅度动画

FFD 在小幅度的动画里能发挥神奇的效果,但想要做出幅度大表现力强的动作,还需要配合使用关节替换。



这个 GIF 得动作幅度就比较大了,躯干部分基本做了一个接近90度的转体,角度太大 FFD 就不好使了,但仍可以替换一些关键关节,再组合使用 FFD、位移、旋转和缩放用很少的纹理作出很好的效果。



这里面状态1到状态2,躯干的大幅转动使用关节替换加 FFD 完成。在状态2到状态3的时候,陆续将远端的手臂和肩甲两个关键关节替换为合适的角度,而主躯干使用 FFD 再配合其他关节的旋转和位移——搞定。这个动画所用纹理都已经列在上面了。


总结

这个 Boss 的整个制作让我们大致了解到了,自己用各种方案实现动画效果能达到的“天花板”:

  • 纯2D 工艺能达到的效果确实有限。
  • FFD+关节替换能制作出惊人的效果。
  • 2D 方案需要衡量好投入和产出——花费30分的力气能达到70分的效果;但如果想达到90分的效果可能要付出100分的努力,所以某些细节尽力而为就好。
  • 复杂的2D 动画投入精力很大,适宜用在出场时间多和获得关注较高的单位上。
  • 适当用3D 辅助可以减少工作量。
  • 2D 动画追求的还是2D 的特性,如果更希望追求3D 的效果请用3D 制作。



2.jpg

评分

参与人数 5元素币 +50 活跃度 +85 展开 理由
首席游骑兵 + 20 【给力】阅贴无数,楼主最强!
微凉. + 15 【给力】阅贴无数,楼主最强!
恋の雪 + 10 【点赞】这很有大网气质!
慕先灵因铭世界 + 20 【感谢】楼主分享的内容!很棒!
元素界王神 + 50 + 20 非常的棒!

查看全部评分

2020-6-8 11:42:46  
 赞 赞 0

使用道具 登录

3个回答,把该问题分享到群,邀请大神一起回答。
2#
很棒!!!
回复 收起回复
2021-3-3 14:40:06   回复
 赞 赞 0

使用道具 登录

3#
厉害!!
回复 收起回复
2021-9-26 10:29:12   回复
 赞 赞 0

使用道具 登录

4#
回复 收起回复
2023-11-28 20:09:37   回复
 赞 赞 0

使用道具 登录

CG 游戏行业专业问题

3D建模技术文章教学modeling
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表