《公主连结》交互设计师：如何用TV画手法制作2D技能动画
上个月，日本CEDEC开发者大会上，Cygames交互设计师小组工藤瑛子女士以“TV动画与游戏2D技能动画的结合”为题，针对《公主连结Re：Dive》中用到的制作手法进行了演讲分享。
工藤瑛子于2016年加入Cygames，参与开发《公主连结Re：Dive》（后文简称《公主连结》），她擅长SD角色动画制作，也因部件动画的制作经验丰富，而负责游戏特写动画的制作，目前她正在这两个方向进行制作。
本文由日媒4Gamer发布，游戏葡萄编译整理。
TV动画与游戏结合的难点
《公主连结》的一大特色是 “连结爆发（UB）”系统中，角色释放出的动画特写。在小巧的SD角色混战的时候插入特写动画，能产生十分戏剧化的视觉效果。
“要将动画与游戏深度结合，制作时所面临的最大问题，就是两者之间的制作体制存在巨大差异。动画的制作需要在数月至半年之前提前完成，因此会按照既定的设计进行制作。而游戏制作过程中则需要频繁地增加新的演出，同时为了迎合玩家们的需求，时常需要对演出做出调整，所以会产生做好的动画不符要求打回重做的情况。
“《公主连结》在加入动画演出时所采用的三种制作法，分别是“在游戏中加入动画产生的问题和解决办法”；“将手绘动画和部件动画结合制作的手法和流程”；“如何制作有统一感的动画演出和SD角色的演出（以下略称SD演出）”。
何为《公主连结》的特写动画？
《公主连结》中所使用的特写动画，主要有3种功能。第一种是“最大限度地呈现角色魅力”。由于角色的SD形象下看不清表情和肢体动作，通过特写则可以做到，通过这种方式可以让玩家们更好地喜欢上自己拥有的角色。
第二种是“用‘2秒’时间来炒热战斗气氛”。每支特写动画时长约为2秒，在SD角色进行动作时，通过掌握插入特写动画的时机，可以做到炒热战斗气氛的作用。因此，特写动画也可以说是“2秒时长的角色专属PV”。
第三种是“将动画和游戏紧密连结”。通过在战斗过程中播放动画这一形式，可以起到强调本作的核心——“动画RPG”的作用。另外，通过将剧情动画和SD演出相结合，可以把剧情（动画）和系统（游戏）紧密联系在一起，更好地展现了《公主连结》的世界观。
为了实现这3种功能，《公主连结》在特写动画的制作上下了很大的功夫。其一就是“部件动画”。所谓“部件动画”，就是将立绘拆分成各种部件，通过运用动画制作工具来达到与手绘动画相同的演出效果。
最初的预定是采用手绘来制作特写动画，但是在测试特写动画和游戏的SD演出配合时，始终无法达到良好的节奏感。由于战斗时爽快的节奏感也是《公主连结》的重要卖点之一，于是这个问题成为了制作组无论如何都要克服的难题。
首先想到的就是前作《公主连结！》（《プリンセスコネクト！》）中的连结爆发（UB）。这是一款由Adobe Flash开发的网页游戏，特写动画和SD演出都是部件动画，战斗的节奏感非常好。更重要的是，由于需要的作画张数更少，制作的速度和质量也有望提高。
而实际采用了部件动画制作的特写动画在配合SD演出时的节奏感也更好，完全不用担心降低游戏体验。
另外，由于减少了作画张数，而公司内部也对部件动画的制作有一定的经验，这部分的动画制作可以完全由公司自己制作（不用外包）。由此，在方向性的意见交流上也变得更有效率，成品反馈与返工也变得更简单。
除此以外，由于制作体制的变化，游戏制作组增加了对于动画的制作体制理解。在部件动画的制作水平上也有更进一步的增长。
特写动画的制作流程与经验
接下来分享的是特写动画制作的制作流程，和其中使用的制作工具软件。
下面以《公主连结》半周年纪念角色 “似似花”的制作举例。
在分镜脚本制作前的讨论会上，首先由游戏策划师给出演出的策划案，然后由全体人员来讨论诸如“特写动画从哪里开始在哪里结束”；“特写动画和SD演出要怎样关联在一起”；“连结爆发的整体上的色调和方向性如何”等一系列问题，最终达成一致。
以“似似花”为例，策划师给出的演出策划案内容是“通过制造自身的全息投影，将其实体化并复制之后投入战斗”。特写动画的部分选在制造复制体之前的过程。在此之上，为了忠于策划案内容，决定了“似似花”的演出主要特色是“数字化的表现”和“制造复制体”。之后再决定整段动画的整体色调，之后才进入分镜脚本的具体制作。
特写动画的分镜采用视频分镜。这样做的优点在于，制作时比较容易想象完成品的尺寸和动作，同时也不容易破坏演出的整体感觉。
在制作分镜脚本时，需要制作3种以上的方案，在其中选择最能体现角色特点的一种。以“似似花”为例，当初实际上有相当多的方案，但在演讲中只选择讲解了A、B、C三种方案。
最终选择了C方案，理由如下：“让人感到开挂一样的数字化特效符合主题”；“由似似花立绘中的水晶得到灵感，而制作出的类似万花筒效果”；“对SD演出部分的期待感很高”。
“类似万花筒的演出效果”最初是在制作分镜时由导演提出的。诸如此类，对于制作方针和演出效果的建议，不仅仅由一线制作者提出，像是策划师和导演等人的反馈也能提供一定帮助。
而通过在SD演出时也加上万花筒的效果，也能与特写动画产生关联性。此外，由于《公主连结》的游戏流程是从左至右的，特写动画的最终画面几乎也都是要向右走的。
制作分镜脚本的流程称为：“通过确立全体一致的认识，将连结爆发的演出统一在同一个世界观之下”。
在制作原画的过程中，首先要针对在整个特写动画中核心人物进行作画。如上所述，由于特写动画运用的是部件动画，原画之间可以通过工具软件进行补充完成。因此，原画张数为4~7张，比一般的TV动画要少。这样也使得制作时能兼顾细节上的追求和完成速度。
在原画制作过程中，既能由多人分工完成截至上色的所有流程，也能由单人完成。像这样，营造让员工们能够自由工作的环境，也关系到游戏开发的速度。
作画监修则采用了TV动画的制作流程。为了能尽力还原角色的魅力，需要一边参考《公主连结》剧情动画的设定资料，一边确认“角色的表情是否符合性格”，“人物设计是否有失误”等问题。
本作的角色五花八门，在作画时，诸如眼线的线条宽度，眼部高光的画法等等细节，都需要时刻注意。
之后，就是在后续工作中极为重要的部件拆分。部件拆分需要根据分镜，把原画拆分成10~20个部件。在人物进行动作时，原本被手遮挡的身体部分也需要补画出来，否则会出现身体缺少一部分的情况，为了使类似错误不至于无法挽回，必须格外注意。
通过这种原画流程，可以达到“在节约作画张数的同时，保持高品质的量产”的效果。
在动画制作过程中，特效和背景层的制作也必须配合进行。为此，出于“网格功能优秀且可以进行灵活的动画制作”，“在摄影流程时有用到，QQ号码拍卖平台为了免于转换时有画质损失”等理由，采用“Adobe After Effects”软件。
在这个过程中，首先要对完成的原画部件进行动作设定。具体做法是把原画进行组合，再使用平拉推移等运镜方式，逐步增加部件的动作。
在动作设定的过程中，尤其需要注意的一点是进行视线诱导。由于特写动画只有短短2秒，如果速度太快会使得动作不明所以。因此，需要针对比较显眼的脸部和武器部分进行调整。
此外，为了防止部件移动时产生机械运动的感觉，动作的变化和幅度，要尽量模仿普通动画的感觉。
接下来，进行特效的制作。以“似似花”为例，制作的主题“有数字化感觉的纹理”和“万花筒”，因此需要在Adobe After Effects中寻找这种感觉的素材。
由于在角色立绘中有散落到各处的水晶碎片，因此为背景加上了碎裂的动画效果；考虑到角色的特性，又制作了全息投影的效果和制造复制体的特效。
《公主连结》的特写动画中，也使用了很多手绘的特效。为了实现类似普通动画的效果，主要的特效贴图是由手绘完成的，3D的粒子效果的运用只取其部分精髓。
特别是武器特效，为了能给人留下更深的印象而采用了区分度更高的作画。特效的消失效果也并不是单纯的淡出，而是碎成一片一片，越来越小。通过这种表现可以使整体看上去更华丽。
总结下来，动画制作过程中最重要的有3点：“重视直观性和联系性”；“演出效果尽量贴近TV动画”；“演出整体要凸显人物特色”。
最后的步骤是摄影。在这个阶段需要对动画整体进行调色和特效调整，同时也要改进人物的线稿，做出接近TV动画的感觉。另外，有时会在摄影过程中加入特殊的表现手法，例如，在有海的场景加上逆光的表现和镜头光晕；配合角色的运动加上圆形或三角等几何图形的运动的运动图形设计（Motion Graphic）。
在特写动画里的全新尝试
在《公主连结》中，在“公主形态下”发动连结爆发（UB）时加入了特殊的特写动画。企划设计公主形态时的方针，是“比以往的特写动画更豪华！更像TV动画！”。对此，也许将在游戏系统层面上对特写动画进行全面改动。
为了将公主形态的特写动画与过去的特写动画作出区别，首先被提出的方案是消除SD演出和特写动画之间的界限。通过实现两者间切换的无缝化，增加了前所未有的特别感，实现更具沉浸感的游戏体验。
这带来的难题是，在以往的游戏系统上进行SD演出和特写动画的来回切换会对手机性能造成极大负担，进而影响游戏体验。但是，通过把所有演出都合并成一支动画，问题就迎刃而解，甚至连以往的演出限制也没有了。
此外，为了展现出超越以往的特写动画的华丽程度，在动画制作时，增加了包括背景在内的可动要素，使场面规模变得空前宏大。镜头的移动也扩展到各个方向，展现出前无古人的动作性。
同时，为了使特写镜头和剧情动画产生一体感，特写镜头也采用了与剧情动画相同的演出和摄影效果。由此，两者紧密结合，产生了游戏重现了剧情动画，剧情动画也同时重现了剧情的效果。
像这样全新的尝试也给整个公司带来了影响。以往的SD演出和特写动画的分镜都是分别制作的，但是公主形态的分镜却是同一个，两者的制作也是并行的。
这种制作方式带来的最大区别就是，SD的动作和特写动画和动作通过Adobe After Effects相互结合，再加上手绘的特效与编辑，使得两者的演出效果没有任何违和感。
但是，这种新的尝试，也带来了诸如“如何找到战斗的速度感与动画长度之间的平衡”，“游戏系统上的各种不便”等问题。
前者通过在Adobe After Effects上对重视速度感的分镜进行细节调整可以解决。例如，在公主可可萝的动画演出中，SD演出和特写动画的连接部分，通过用一棵树横穿画面的镜头实现了镜头间的自然切换。
在游戏系统上的不便，包括“无法使用关闭特写动画功能”，“对于影子敌人的特写动画是否关闭”等问题。对于这些问题，分别采用了截选动画中最精彩部分播放，和另外制作影子角色的动画等手段加以解决。
总体来看，“《公主连结》的最终目标，是为玩家们呈现富有魅力的角色们”。
《公主连结》交互设计师：如何用TV画手法制作2D技能动画相关推荐
- 产品经理与交互设计师的区别是什么？
原创: Kevin改变世界的点滴 Kevin改变世界的点滴 昨天 在从事产品经理的我们都在说如果不考虑需求的意义,我们就是一个只会画原型的人. 那恰好有一个职位交互设计师是只需要画原型即可,每天沉迷于 ...
- axure按钮切换颜色_如何用Axure画出Web产品的列表组件：基础画法
Web产品的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应的原型画法. 除了通过表格来画出简单列表之外,我们还可以通过中继器来画出列表,相应的原型效果请查看https:/ ...
- 新人与三年经验的交互设计师有多大的差距？
刚开始实习的时候,师兄告诉我成长最快的方式就是:偷学其他前辈的本领--这不用说我也知道啦,当然不能说偷这么难听,仔细观察平时前辈的工作方式和状态,就会有莫大的收获. 首先,让我不要脸地先把自己定义成一 ...
- 《UCD火花集2：有效的互联网产品设计 交互/信息设计 用户研究讨论》一2.3 交互设计师容易犯的错误：把自己禁锢在解决方案之中...
本节书摘来自异步社区<UCD火花集2:有效的互联网产品设计 交互/信息设计 用户研究讨论>一书中的第2章,第2.3节,作者 UCDChina,更多章节内容可以访问云栖社区"异步社 ...
- 树型列表结构宽度调整_如何用Axure画出Web产品的列表组件：基础画法
Web产品的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应的原型画法. 除了通过表格来画出简单列表之外,我们还可以通过中继器来画出列表,相应的原型效果请查看https:/ ...
- 交互设计师为什么需要具备产品思维
@Daidai丶呆 :每当提到产品的用户体验,我们通常会认为一款拥有优秀用户体验的产品应该是「美观且易用」的.但事实上,这些特性在产品设计中并不是最重要的,它们只是提升用户方便使用这个功能的一些设计原 ...
- 交互设计师怎样理解信息架构？
这篇适合交互设计或者对交互设计感兴趣的小伙伴们看.所以我就不解释信息架构是什么了.今天写一下产品信息架构的思考. 任何产品都有信息架构,或繁杂或简单.在文中讨论的时候,我大致把信息架构分为两种来例证. ...
- 访谈：腾讯高级交互设计师C7210的十年设计路（上）
人物专访介绍: 艺名C7210,2005年毕业于东华大学信息管理与信息系统专业: 2006至2008年于博客大巴(blogbus.com)任网页设计师: 2009至2010年于Tom集团任前端工程师: ...
- 你适不适合做UE交互设计师
你适不适合做UE交互设计师?由于现在市场上APP都比较成熟,在UI设计中的排版.布局.风格等在本质上没有什么太大的区别,因此很多产品开始注重于UE交互设计,想在交互设计中提升用户体验.很多小伙伴们萌发 ...
最新文章
- StarlingMVC简介，原理解说及示例源码
- MyBatis批量增删改的另外一种思路（推荐）
- 激烈竞争的时代，哪些能力可以帮你脱颖而出？
- php xml 格式化,PHP实现浏览器格式化显示XML的方法示例
- Asp.Net MVC 模型(使用Entity Framework创建模型类)
- 你的个人信息是如何被盗走的？MySQL脱库，脱库的原理，怎么脱库，脱库的步骤，一库三表六字段
- C++类型转换运算符 static_cast，dynamic_cast，reinterpret_cast，const_cast
- java 不刷新页面_java – 更新jsp页面的内容而不刷新
- “OSPF” Router-ID
- SWT中嵌入Swing的JTextFeild却不能编辑
- MyBatis自学(5)：延迟加载
- paip.wmv的无损分割与截取
- C#身份证号码验证器(检验格式是否正确)
- 【音频】音频文件格式以及相关参数
- VelocityTracker 使用
- 照明中的微波感应是什么？
- robots.txt存放的位置robots.txt文件的作用及写法 (搜索引擎)
- 三星j7出现android,三星J7配置曝光 配骁龙625/运行安卓7.0
- Leco题目：整数反转
- 从零入门机器学习之开宗明义：编程与数据思维