当前位置:首页 >教程首页 > 游戏设计 > 游戏特效大师班 >《公主连结》交互设计师技术分享!如何用TV画手法制作2D技能动画

《公主连结》交互设计师技术分享!如何用TV画手法制作2D技能动画

发布时间:2020-10-20 09:31:35

上个月,日本CEDEC开发者大会上,Cygames交互设计师小组工藤瑛子女士以“TV动画与游戏2D技能动画的结合”为题,针对《公主连结Re:Dive》中用到的制作手法进行了演讲分享。

1.webp.jpg

工藤瑛子于2016年加入Cygames,参与开发《公主连结Re:Dive》(后文简称《公主连结》),她擅长SD角色动画制作,也因部件动画的制作经验丰富,而负责游戏特写动画的制作,目前她正在这两个方向进行制作。

2.webp.jpg

一、TV动画与游戏结合的难点

《公主连结》的一大特色是 “连结爆发(UB)”系统中,角色释放出的动画特写。在小巧的SD角色混战的时候插入特写动画,能产生十分戏剧化的视觉效果。

3.webp.jpg

要将动画与游戏深度结合,制作时所面临的最大问题,就是两者之间的制作体制存在巨大差异。动画的制作需要在数月至半年之前提前完成,因此会按照既定的设计进行制作。而游戏制作过程中则需要频繁地增加新的演出,同时为了迎合玩家们的需求,时常需要对演出做出调整,所以会产生做好的动画不符要求打回重做的情况。

《公主连结》在加入动画演出时所采用的三种制作法,分别是“在游戏中加入动画产生的问题和解决办法”;“将手绘动画和部件动画结合制作的手法和流程”;“如何制作有统一感的动画演出和SD角色的演出(以下略称SD演出)”。

二、何为《公主连结》的特写动画

《公主连结》中所使用的特写动画,主要有3种功能。第一种是“最大限度地呈现角色魅力”。由于角色的SD形象下看不清表情和肢体动作,通过特写则可以做到,通过这种方式可以让玩家们更好地喜欢上自己拥有的角色。

4.webp.jpg

第二种是“用‘2秒’时间来炒热战斗气氛”。每支特写动画时长约为2秒,在SD角色进行动作时,通过掌握插入特写动画的时机,可以做到炒热战斗气氛的作用。因此,特写动画也可以说是“2秒时长的角色专属PV”。

5.webp.jpg

第三种是“将动画和游戏紧密连结”。通过在战斗过程中播放动画这一形式,可以起到强调本作的核心——“动画RPG”的作用。另外,通过将剧情动画和SD演出相结合,可以把剧情(动画)和系统(游戏)紧密联系在一起,更好地展现了《公主连结》的世界观。

6.webp.jpg

为了实现这3种功能,《公主连结》在特写动画的制作上下了很大的功夫。其一就是“部件动画”。所谓“部件动画”,就是将立绘拆分成各种部件,通过运用动画制作工具来达到与手绘动画相同的演出效果。

7-1.webp.jpg7-2.webp.jpg

最初的预定是采用手绘来制作特写动画,但是在测试特写动画和游戏的SD演出配合时,始终无法达到良好的节奏感。由于战斗时爽快的节奏感也是《公主连结》的重要卖点之一,于是这个问题成为了制作组无论如何都要克服的难题。

8.webp.jpg

首先想到的就是前作《公主连结!》(《プリンセスコネクト!》)中的连结爆发(UB)。这是一款由Adobe Flash开发的网页游戏,特写动画和SD演出都是部件动画,战斗的节奏感非常好。更重要的是,由于需要的作画张数更少,制作的速度和质量也有望提高。

而实际采用了部件动画制作的特写动画在配合SD演出时的节奏感也更好,完全不用担心降低游戏体验。

9.webp.jpg

另外,由于减少了作画张数,而公司内部也对部件动画的制作有一定的经验,这部分的动画制作可以完全由公司自己制作(不用外包)。由此,在方向性的意见交流上也变得更有效率,成品反馈与返工也变得更简单。

除此以外,由于制作体制的变化,游戏制作组增加了对于动画的制作体制理解。在部件动画的制作水平上也有更进一步的增长。

10-1.webp.jpg10-2.webp.jpg

三、特写动画的制作流程与经验

接下来分享的是特写动画制作的制作流程,和其中使用的制作工具软件。

11-1.webp.jpg11-2.webp.jpg

下面以《公主连结》半周年纪念角色 “似似花”的制作举例。

在分镜脚本制作前的讨论会上,首先由游戏策划师给出演出的策划案,然后由全体人员来讨论诸如“特写动画从哪里开始在哪里结束”;“特写动画和SD演出要怎样关联在一起”;“连结爆发的整体上的色调和方向性如何”等一系列问题,最终达成一致。

以“似似花”为例,策划师给出的演出策划案内容是“通过制造自身的全息投影,将其实体化并复制之后投入战斗”。特写动画的部分选在制造复制体之前的过程。在此之上,为了忠于策划案内容,决定了“似似花”的演出主要特色是“数字化的表现”和“制造复制体”。之后再决定整段动画的整体色调,之后才进入分镜脚本的具体制作。

12.webp.jpg

特写动画的分镜采用视频分镜。这样做的优点在于,制作时比较容易想象完成品的尺寸和动作,同时也不容易破坏演出的整体感觉。

13.webp.jpg

在制作分镜脚本时,需要制作3种以上的方案,在其中选择最能体现角色特点的一种。以“似似花”为例,当初实际上有相当多的方案,但在演讲中只选择讲解了A、B、C三种方案。

最终选择了C方案,理由如下:“让人感到开挂一样的数字化特效符合主题”;“由似似花立绘中的水晶得到灵感,而制作出的类似万花筒效果”;“对SD演出部分的期待感很高”。

14.webp.jpg

“类似万花筒的演出效果”最初是在制作分镜时由导演提出的。诸如此类,对于制作方针和演出效果的建议,不仅仅由一线制作者提出,像是策划师和导演等人的反馈也能提供一定帮助。

而通过在SD演出时也加上万花筒的效果,也能与特写动画产生关联性。此外,由于《公主连结》的游戏流程是从左至右的,特写动画的最终画面几乎也都是要向右走的。

15-1.webp.jpg15-2.webp.jpg

制作分镜脚本的流程称为:“通过确立全体一致的认识,将连结爆发的演出统一在同一个世界观之下”。

在制作原画的过程中,首先要针对在整个特写动画中核心人物进行作画。如上所述,由于特写动画运用的是部件动画,原画之间可以通过工具软件进行补充完成。因此,原画张数为4~7张,比一般的TV动画要少。这样也使得制作时能兼顾细节上的追求和完成速度。

16-1.webp.jpg16-2.webp.jpg

在原画制作过程中,既能由多人分工完成截至上色的所有流程,也能由单人完成。像这样,营造让员工们能够自由工作的环境,也关系到游戏开发的速度。

17.webp.jpg

作画监修则采用了TV动画的制作流程。为了能尽力还原角色的魅力,需要一边参考《公主连结》剧情动画的设定资料,一边确认“角色的表情是否符合性格”,“人物设计是否有失误”等问题。

本作的角色五花八门,在作画时,诸如眼线的线条宽度,眼部高光的画法等等细节,都需要时刻注意。

18.webp.jpg

之后,就是在后续工作中极为重要的部件拆分。部件拆分需要根据分镜,把原画拆分成10~20个部件。在人物进行动作时,原本被手遮挡的身体部分也需要补画出来,否则会出现身体缺少一部分的情况,为了使类似错误不至于无法挽回,必须格外注意。

19.webp.jpg

通过这种原画流程,可以达到“在节约作画张数的同时,保持高品质的量产”的效果。

在动画制作过程中,特效和背景层的制作也必须配合进行。为此,出于“网格功能优秀且可以进行灵活的动画制作”,“在摄影流程时有用到,为了免于转换时有画质损失”等理由,采用“Adobe After Effects”软件。

在这个过程中,首先要对完成的原画部件进行动作设定。具体做法是把原画进行组合,再使用平拉推移等运镜方式,逐步增加部件的动作。

20.webp.jpg

在动作设定的过程中,尤其需要注意的一点是进行视线诱导。由于特写动画只有短短2秒,如果速度太快会使得动作不明所以。因此,需要针对比较显眼的脸部和武器部分进行调整。

此外,为了防止部件移动时产生机械运动的感觉,动作的变化和幅度,要尽量模仿普通动画的感觉。

21-1.webp.jpg21-2.webp.jpg

接下来,进行特效的制作。以“似似花”为例,制作的主题“有数字化感觉的纹理”和“万花筒”,因此需要在Adobe After Effects中寻找这种感觉的素材。

由于在角色立绘中有散落到各处的水晶碎片,因此为背景加上了碎裂的动画效果;考虑到角色的特性,又制作了全息投影的效果和制造复制体的特效。

22.webp.jpg

《公主连结》的特写动画中,也使用了很多手绘的特效。为了实现类似普通动画的效果,主要的特效贴图是由手绘完成的,3D的粒子效果的运用只取其部分精髓。

特别是武器特效,为了能给人留下更深的印象而采用了区分度更高的作画。特效的消失效果也并不是单纯的淡出,而是碎成一片一片,越来越小。通过这种表现可以使整体看上去更华丽。

23-1.webp.jpg23-2.webp.jpg

总结下来,动画制作过程中最重要的有3点:“重视直观性和联系性”;“演出效果尽量贴近TV动画”;“演出整体要凸显人物特色”。

最后的步骤是摄影。在这个阶段需要对动画整体进行调色和特效调整,同时也要改进人物的线稿,做出接近TV动画的感觉。另外,有时会在摄影过程中加入特殊的表现手法,例如,在有海的场景加上逆光的表现和镜头光晕;配合角色的运动加上圆形或三角等几何图形的运动的运动图形设计(Motion Graphic)。

24-1.webp.jpg24-2.webp.jpg24-3.webp.jpg

四、在特写动画里的全新尝试

在《公主连结》中,在“公主形态下”发动连结爆发(UB)时加入了特殊的特写动画。企划设计公主形态时的方针,是“比以往的特写动画更豪华!更像TV动画!”。对此,也许将在游戏系统层面上对特写动画进行全面改动。

为了将公主形态的特写动画与过去的特写动画作出区别,首先被提出的方案是消除SD演出和特写动画之间的界限。通过实现两者间切换的无缝化,增加了前所未有的特别感,实现更具沉浸感的游戏体验。

25.webp.jpg

这带来的难题是,在以往的游戏系统上进行SD演出和特写动画的来回切换会对手机性能造成极大负担,进而影响游戏体验。但是,通过把所有演出都合并成一支动画,问题就迎刃而解,甚至连以往的演出限制也没有了。

26.webp.jpg

此外,为了展现出超越以往的特写动画的华丽程度,在动画制作时,增加了包括背景在内的可动要素,使场面规模变得空前宏大。镜头的移动也扩展到各个方向,展现出前无古人的动作性。

27.webp.jpg

同时,为了使特写镜头和剧情动画产生一体感,特写镜头也采用了与剧情动画相同的演出和摄影效果。由此,两者紧密结合,产生了游戏重现了剧情动画,剧情动画也同时重现了剧情的效果。

28.webp.jpg

像这样全新的尝试也给整个公司带来了影响。以往的SD演出和特写动画的分镜都是分别制作的,但是公主形态的分镜却是同一个,两者的制作也是并行的。

29.webp.jpg

这种制作方式带来的最大区别就是,SD的动作和特写动画和动作通过Adobe After Effects相互结合,再加上手绘的特效与编辑,使得两者的演出效果没有任何违和感。

30.webp.jpg

但是,这种新的尝试,也带来了诸如“如何找到战斗的速度感与动画长度之间的平衡”,“游戏系统上的各种不便”等问题。

前者通过在Adobe After Effects上对重视速度感的分镜进行细节调整可以解决。例如,在公主可可萝的动画演出中,SD演出和特写动画的连接部分,通过用一棵树横穿画面的镜头实现了镜头间的自然切换。

31.webp.jpg

在游戏系统上的不便,包括“无法使用关闭特写动画功能”,“对于影子敌人的特写动画是否关闭”等问题。对于这些问题,分别采用了截选动画中最精彩部分播放,和另外制作影子角色的动画等手段加以解决。

32-1.webp.jpg32-2.webp.jpg

总体来看,“《公主连结》的最终目标,是为玩家们呈现富有魅力的角色们”。

33.webp.jpg

本文由日媒4Gamer发布,游戏葡萄编译整理

学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

专业问题咨询

你担心的问题,火星帮你解答

微信扫码入群领福利

扫码领福利最新AI资讯

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

×

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定