[情报] CY讲解如何制作公主连结的CUT IN大招动画
楼主: KotoriCute (Lovelive!) 2020-09-08 13:48:19
《超异域公主连结☆Re:Dive》所追求的目标 动画 RPG 的游戏演出制作事例线上讲座纪
录
https://gnn.gamer.com.tw/detail.php?sn=202825
日本最大规模电脑娱乐开发者会议“CEDEC 2020”的第 3 天，2020 年 9 月 4 日特别
举办了“《超异域公主连结☆Re:Dive》所追求的目标，动画 RPG 的游戏演出制作事例
～将电视动画与游戏演出，融合两种制作手法诞生的切入动画演出～”为主题的讲座。
主讲者是来自 Cygames 互动设计团队的工藤瑛子，分享了时下知名手机游戏《超异域
公主连结☆Re:Dive》（以下简称《公主连结 R》）游戏里切入动画演出所使用的制作手
法。
https://p2.bahamut.com.tw/B/2KU/60/ad9fb029f672c96183da61897119si45.JPG
工藤表示，类似《公主连结 R》这种兼具动画与游戏的多媒体混合作品，都会面临动画与
游戏制作上的体制不同这项主要课题。动画通常在数个月～半年前确保制作上的行程，根
据最初决定好的样式持续制作完毕。另一方面，游戏则必须用到各种短期与不定时出现的
新演出，或者按照玩家回馈针对演出内容作出适当调整，会产生回顾制作样式以后进行重
制作业的情况。
工藤接着说明，因此他们在为《公主连结 R》导入切入动画演出的时候，采用 3 种
途径克服作业上的困难之处，同时也是接下来讲述的 3 个主题。分别是“将动画演出置
入游戏中面临的课题与解决方法”、“采纳手绘与部件动画，混合 2 种手法的制作方式
与流程”、“将动画演出与 SD 角色的演出（以下，SD 演出）之间协调出统一性的相关
知识”。
《公主连结 R》的切入动画是指？
工藤提到，《公主连结 R》切入动画主要负责 3 种不同的职责。第 1 点就是“将角色魅
力以最大限度呈现出来”，把原本娇小的 SD 角色无法分辨的表情与肢体表现以全画面的
方式显示，借此让玩家能够喜欢上这些角色。
https://p2.bahamut.com.tw/B/2KU/61/00e2cab6ee1b7b641d48c8349719si55.JPG
第 2 点是“在 “2 秒” 的时间内炒热战斗场面”，每个切入动画完成的进行时间大都
是 2 秒左右。SD 角色交战的过程中，在适当的节奏下出现切入动画演出，配合该名角色
固有的行动与 SD 演出丰富整个战斗体验。因此这些切入动画，都特别以“2 秒内的角色
PV”作为制作上的重点意识。
https://p2.bahamut.com.tw/B/2KU/62/9fd4c460f499d60d7a0250e7b219si65.JPG
第 3 点是“将游戏与动画串联起来”。在激战之中能够看到动画播放，是为了强调本作
属于一款“动画 RPG”的特性。因此，这些能够呼应主线剧情的 SD 演出，都可说是忠实
连结了剧情（动画）与系统（游戏），背负著展现《公主连结 R》世界观的重要使命。
https://p2.bahamut.com.tw/B/2KU/63/3729b6b9b97d535ad7d0067ef719si75.JPG
为了顺利达成这 3 个目标，《公主连结 R》的切入动画制作上充满了相当多元的技术应
用，其中 1 项就是“配件动画（パーツアニメ）”。透过配件动画，将插图里面的每个
部位予以配件化，再利用相关工具移动每个配件，是一种能够展现出宛如手绘动画成效的
手法。
https://p2.bahamut.com.tw/B/2KU/64/a4258c290a04874c3902ad8c2319si85.JPG
https://p2.bahamut.com.tw/B/2KU/66/bb49ea782785510eb6613d923419sia5.JPG
据说在当初，《公主连结 R》预定是要使用手绘的切入动画。但是在对照试作后的切入动
画与游戏的 SD 演出，发现了令人感觉节奏感不合的问题。让玩家感受舒适的战斗节奏，
是《公主连结 R》最为不可或缺的游戏要素，也因此无论如何都必须克服这项课题。
https://p2.bahamut.com.tw/B/2KU/67/25ccd2b05ed9cb305ceb71076a19sib5.JPG
在当时所找到的解决方法，就是本作前身《公主连结！（Princess Connect！，プリンセ
スコネクト！）》的“Union Burst”。由于《公主连结！》是透过 Adobe Flash 进行开
发的网页游戏，切入动画与 SD 演出全部都是由上述的配件动画来让角色动作，也不会影
响到战斗上的节奏感。这项作法同时还拥有能够以少量的作画张数完成作业，可望拥有更
佳的制作速度与品质提升等优点。
最后《公主连结 R》的切入动画演出决定以配件动画的方式来呈现，也就能够制作出
与 SD 演出的节奏互相契合，且不妨碍游戏进行的愉快观赏体验。
https://p2.bahamut.com.tw/B/2KU/68/58345d2dd75957bda58d2f1d2f19sic5.JPG
此外，由于所需的作画张数减少，公司对于配件动画制作上的相关知识与所见所闻累积到
一定程度以后，得以将原先委外的这项作业改为公司内部进行制作。因此在制作方向性的
分享与意见疏通都变得更加容易，之后发行或是重新调整等动作都可以更有时间效率的方
式实现。
同时由于制作体制上的变化，让公司进一步提升对于整个动画制作体制的理解，并且
拥有配件动画应用在游戏制作上的相关知识获得完善普及等诸多优点。
https://p2.bahamut.com.tw/B/2KU/71/74a873b813e0d25651c2864c4c19sif5.JPG
https://p2.bahamut.com.tw/B/2KU/74/c28537b3d51e69b35bf9ff9c1d19sii5.JPG
切入动画制作的作业工程与相关知识
接着工藤介绍了切入动画制作上的作业工程与使用工具。
https://p2.bahamut.com.tw/B/2KU/75/fa0b710b80f87416526afc488619sij5.JPG
https://p2.bahamut.com.tw/B/2KU/77/765d877b4b8101306cf13a109419sil5.JPG
具体的作业工程是以《公主连结 R》半周年纪念活动登场的角色“似似花”作为实例介绍
。
分镜制作前的开会中，首先从设计者展示的设计原案里面进行讨论，针对“哪里到哪
里可以放入切入动画”“与 SD 演出之间呈现什么样的关联性”“Union Burst 整体，决
定使用何种色调・方向性”协调出整体想要的共通形象。
以似似花的情况来说，设计者所提出的设计原案内容为“产生一个自己的全像投影，
实体化以后成为自己的分身作战”，所以决定在全像投影变成分身以前的过程都以切入动
画的方式呈现。并且以原案所提出的“数位感视觉表现”与“产生分身”作为主题，加入
了似似花单独的演出。接着决定演出开始到切入动画结束的整体色调，整体形象成型以后
进入分镜制作的环节。
https://p2.bahamut.com.tw/B/2KU/80/98103f5c92eff5de15f5f3575919sio5.JPG
切入动画的分镜是以动画分镜的方式进行制作。据说使用这种方式，能够更加容易掌握实
际的时间长度与动画完成样貌，相当有助于让动画制作控制在预期的方向。
https://p2.bahamut.com.tw/B/2KU/82/a90f48a9e27d5223dbc4e943ee19siq5.JPG
分镜的制作上会提出 3 个以上的原案，最后从中选择出最能够展现角色个性的方案。以
似似花为例，在当时提出了非常多的原案，本次讲座则从中介绍 A 案，B 案，C 案等 3
种不同的发想。
最终则是以“让人感受作弊能力的数位化特效与素材”、“从似似花立绘的水晶获得
启发，类似万花筒的动画演出”、“让人拥有想看到回归 SD 演出时的期待感”等原因作
为理由，选择了 C 案。
https://p2.bahamut.com.tw/B/2KU/83/ea327266cf3ade1a0fa209451219sir5.JPG
据说 “万花筒的动画演出”，是从制作分镜的时候由总监方面提案的点子实现的内容。
类似这样，制作整体上的题材与动画演出的发想由作业方提出架构，并根据设计者与监制
方面的反馈取得更进一步的补充。
并且，在角色的 SD 演出也加入了万花筒相关的要素，营造出能够呼应切入动画的关
联性。另外，由于《公主连结 R》是从左到右进行的游戏，切入动画的最后环节基本上都
是以向右方收尾的形式为主。
https://p2.bahamut.com.tw/B/2KU/84/411101c86fef8066c9db6e3cc619sis5.JPG
https://p2.bahamut.com.tw/B/2KU/85/0f58fcaac646491ee70e2c9db419sit5.JPG
工藤将分镜工程所扮演的职责，归纳为“为了确立整体的共通形象，将 Union Burst 收
纳进同 1 个世界观”。
原画制作过程中，首先会根据分镜绘制出整个切入动画精髓的角色部分。如同前面所
提到的，切入动画的制作会用到部件动画这个手法，在每个原画与原画之间都能透过相关
工具进行填补。也因此原画通常为 4～7 张，比正常的电视动画张数还少。还能够维护细
部的品质坚持与制作速度，取得两全其美的成效。
https://p2.bahamut.com.tw/B/2KU/86/24d31f9ec5c30feb8f059ede7f19siu5.JPG
https://p2.bahamut.com.tw/B/2KU/87/d12245868fc1e805da80cd1c5819siv5.JPG
原画的作业流程有时是由同 1 人负责到底，偶尔也有可能是其他人负责最后的完成阶段
。打造出让职员能够以灵活的身段从业的环境，也是影响游戏开发速度感的一大主因。
https://p2.bahamut.com.tw/B/2KU/88/c9f41b8849ebc13cb18695bd2b19siw5.JPG
作画监修的部分，则是应用了电视动画制作上的相关知识。以《公主连结 R》主线剧情动
画的设定资料做为参考，逐步完成“是否拥有符合角色形象的表情”“设计上是否有落差
”等确认事项，确保角色的既有魅力不会因此受到影响。
本作的每个角色外型都相当不同，仅只是数毫米差距的眼睑大小或强调表现的方式，
都要细心注意是否符合正确的作画。
https://p2.bahamut.com.tw/B/2KU/89/66d06a9efc69c609b528a4699619six5.JPG
接着进行后续作业上最重要的部件分配。部件分配以分镜为参考，将原画分割成 10～20
个部件，并要确认在部件移动的时候，是否会发生隐藏在手腕的肢体没有画到这类无法重
新修正的事态。
https://p2.bahamut.com.tw/B/2KU/90/bf359a1b17e6d809f7ddd1313419siy5.JPG
完成原画作业所带来的成效，可归纳为“能够节省原画张数，并且以保持品质的方式进行
量产”。
进入动画工程的部分，同步进行特效与背景的制作。在此环节基于“细分（mesh）功
能相当优秀，能够制作出柔软的动画质感”、“后续进入拍摄程序仍会继续使用，减少工
具转换中间的资源遗失”等理由，选择“Adobe After Effects”作为使用工具。
在作业过程，首先为完成的原画部件赋予动态途径。具体上的流程为汇入原画，架设
顶部或远景，左右移动等整体相机视角，再追加部件动画。
https://p2.bahamut.com.tw/B/2KU/91/80b731ba3a1f6f3df2a0b4c3e419siz5.JPG
动态化作业的过程中，特别需要注意的是视线的诱导。切入动画演出仅只有 2 秒的时间
，如果动作太快会让观看的人摸不著头绪。为此必须特别另下功夫，针对脸部或武器等较
容易注目的部分，将动作变得更加直观好懂。
此外，为避免部件呈现出机械性移动的不自然感，也在动作变化上增加幅度，借此呈
现出更接近动画演出的表现。
https://p2.bahamut.com.tw/B/2KU/92/2092c0faab490e27b25f73950d19sj05.JPG
https://p2.bahamut.com.tw/B/2KU/93/f1ed71f2a15cb5e7d91b6ee43f19sj15.JPG
接着进行特效的制作。似似花的例子中，是以“数位化的材质感”与“万花筒”作为制作
主题，根据这项目标利用 Adobe After Effects 制作所需的素材。
以角色立绘中散落周遭的水晶碎片为灵感，做出背景出现碎裂的特效，以及全像摄影
的演出中产生自己的分身等，考虑角色的特性过后着手制作这些特效。
https://p2.bahamut.com.tw/B/2KU/94/c10278f57c52811ed87a76a53119sj25.JPG
《公主连结 R》的切入动画采用了大量的手绘动画特效。这么做的主因还是为了追求动画
应有的感觉，主要的特效都尽可能以手绘的方式制作，至于 3D 动画的粒子表现，则大多
当作添加风味的配料运用。
特别是武器的特效，作画上特别讲究拥有长期停留在玩家视线的识别性。特效的消失
方式也不只是单纯的透明化淡出，而是采取细微飘散，碎裂变小的特效丰富视觉体验。
https://p2.bahamut.com.tw/B/2KU/95/c89dcc61af41d0d2adb99ce0d719sj35.JPG
https://p2.bahamut.com.tw/B/2KU/96/b9358ff969e383a545754ad03619sj45.JPG
工藤综合以上所述，指出动画工程中最重要的 3 个重点分别是“重视简单易懂的识别性
与关联性”、“力求电视动画般的演出内容”、“重视每个角色特性的演出内容”。
最后进行的就是实际拍摄了。作业中会进行色调或画面整体的特效调整，角色线条上
的润饰，目标制作出电视动画般的影像感。此外，也能够在拍摄之中尝试加入一些特殊表
现。举例来说，海边的场景可以加上剪影表现与镜头眩光（Lens Flare），也可以配合角
色动作加入圆形或三角形等，让特定图形移动的动态素材（Motion graphics）。
https://p2.bahamut.com.tw/B/2KU/97/4c54eb1c8980241c9376a93dc519sj55.JPG
https://p2.bahamut.com.tw/B/2KU/98/e60a4edad63d53f7e1573daa8419sj65.JPG
https://p2.bahamut.com.tw/B/2KU/99/aa57d9a827b985666e947f240619sj75.JPG
进行崭新尝试的切入动画表现
《公主连结 R》里面，在“公主型态”发动“Union Burst”的时候会有特殊的切入动画
演出。关于公主型态的演出与企划，当初是以“比起以往的切入动画都要更加豪华！更像
动画！”作为制作概念，据说因此曾经从系统层面大幅度重新审视切入动画的制作方法。
公主型态的切入动画为了与以往的成品作出差别，首先提案的是彻底打造出 SD 演出
与切入动画的无痕转换境界。这两个部分若能以无缝接轨的方式互相切换，可以带给玩家
更加独特的感受与投入感。
https://p2.bahamut.com.tw/B/2KU/00/89a1eaad442e1af520693d912819sj85.JPG
另一方面也存在必须克服的课题。若是按照以往的系统，将 SD 演出与切入动画演出交互
播放会增加用户端的负担，也会与原本追求游戏流畅度这项目标有所出入。因此最后的决
定是将切入演出全部整合在同 1 个动画里面，也能免除目前为止所有演出存在的限制。
https://p2.bahamut.com.tw/B/2KU/01/b7404f15ada8964ac17662529a19sj95.JPG
再加上与过往的切入动画相比，更加提升了演出层面的豪华程度，连背景都包含在动画演
出里面，呈现更大格局的制作范畴。相机视角也能够在空间内纵横无尽地自由移动，诞生
出过往所没有的动作感。
https://p2.bahamut.com.tw/B/2KU/05/853b4b69eacfb6782fc14f707719sjd5.JPG
并且，为了让切入动画能够与剧情动画互相呼应，演出或拍摄效果都特地采用与剧情动画
相同的方法。借此让两者之间产生一定的连结，打造出让玩家在游戏中看到剧情动画的再
现，观看剧情动画的时候也能联想起战斗过程的游戏环境。
https://p2.bahamut.com.tw/B/2KU/02/5dd11b2e1f6acd12539d08123619sja5.JPG
这样崭新的尝试，同时也为公司内部的制作体制带来影响。在这之前，SD 演出与切入动
画是以不同的分镜进行制作，开始制作公主型态以后都是采取相同的分镜，接近同步进行
制作。
https://p2.bahamut.com.tw/B/2KU/03/2cb8ae92839eca4f55938f9c2a19sjb5.JPG
另外则是，制作上与过往感受最不同的地方，就是 SD 人物的动作与切入动画的动作必须
以 Adobe After Effects 进行结合，为了让两者的演出完成接近天衣无缝的连接，必须
加入手绘特效进行编辑这点。
https://p2.bahamut.com.tw/B/2KU/04/957f50b5b121b46d513b11c95e19sjc5.JPG
只不过，全新的尝试同时也面临到“战斗的速度感与切入演出长度的调和折衷”、“系统
与性能面的障碍”等问题挑战。
前者的部分，是投入重视节奏感的场景转换，利用 Adobe After Effects 完成细部
调整获得解决。例如在公主可可萝的演出中，在 SD 演出与切入动画的转换过程中添加横
向穿越树木阴影的过程，实现自然的场景转换。
https://p2.bahamut.com.tw/B/2KU/06/52c27f5bbd459b05df46f6348f19sje5.JPG
系统与性能方面的困难之处在于无法使用关闭切入动画的功能，或是角色以闇影型态（シ
ャドウ）作为敌方登场的切入动画该怎么办。这部分的处理方式，前者是从演出中最适当
或最热烈的部分开始播放，后者则另外准备作为敌方登场时的动画。
https://p2.bahamut.com.tw/B/2KU/07/8c6fb5d669364e85ddf6fa586219sjf5.JPG
https://p2.bahamut.com.tw/B/2KU/08/a1af8fe9abf30b8a23d5bdf88819sjg5.JPG
主讲者工藤最后回顾开头所述，提及切入动画演出在游戏中扮演的 3 个重要职责，并以
“《公主连结 R》制作切入动画的目标，是希望让角色魅力能够确实传达到各位玩家心里
”为本次讲座作结。
https://p2.bahamut.com.tw/B/2KU/09/7bf0d2a1747678f7c61dcd989f19sjh5.JPG
录
https://gnn.gamer.com.tw/detail.php?sn=202825
日本最大规模电脑娱乐开发者会议“CEDEC 2020”的第 3 天，2020 年 9 月 4 日特别
举办了“《超异域公主连结☆Re:Dive》所追求的目标，动画 RPG 的游戏演出制作事例
～将电视动画与游戏演出，融合两种制作手法诞生的切入动画演出～”为主题的讲座。
主讲者是来自 Cygames 互动设计团队的工藤瑛子，分享了时下知名手机游戏《超异域
公主连结☆Re:Dive》（以下简称《公主连结 R》）游戏里切入动画演出所使用的制作手
法。
https://p2.bahamut.com.tw/B/2KU/60/ad9fb029f672c96183da61897119si45.JPG
工藤表示，类似《公主连结 R》这种兼具动画与游戏的多媒体混合作品，都会面临动画与
游戏制作上的体制不同这项主要课题。动画通常在数个月～半年前确保制作上的行程，根
据最初决定好的样式持续制作完毕。另一方面，游戏则必须用到各种短期与不定时出现的
新演出，或者按照玩家回馈针对演出内容作出适当调整，会产生回顾制作样式以后进行重
制作业的情况。
工藤接着说明，因此他们在为《公主连结 R》导入切入动画演出的时候，采用 3 种
途径克服作业上的困难之处，同时也是接下来讲述的 3 个主题。分别是“将动画演出置
入游戏中面临的课题与解决方法”、“采纳手绘与部件动画，混合 2 种手法的制作方式
与流程”、“将动画演出与 SD 角色的演出（以下，SD 演出）之间协调出统一性的相关
知识”。
《公主连结 R》的切入动画是指？
工藤提到，《公主连结 R》切入动画主要负责 3 种不同的职责。第 1 点就是“将角色魅
力以最大限度呈现出来”，把原本娇小的 SD 角色无法分辨的表情与肢体表现以全画面的
方式显示，借此让玩家能够喜欢上这些角色。
https://p2.bahamut.com.tw/B/2KU/61/00e2cab6ee1b7b641d48c8349719si55.JPG
第 2 点是“在 “2 秒” 的时间内炒热战斗场面”，每个切入动画完成的进行时间大都
是 2 秒左右。SD 角色交战的过程中，在适当的节奏下出现切入动画演出，配合该名角色
固有的行动与 SD 演出丰富整个战斗体验。因此这些切入动画，都特别以“2 秒内的角色
PV”作为制作上的重点意识。
https://p2.bahamut.com.tw/B/2KU/62/9fd4c460f499d60d7a0250e7b219si65.JPG
第 3 点是“将游戏与动画串联起来”。在激战之中能够看到动画播放，是为了强调本作
属于一款“动画 RPG”的特性。因此，这些能够呼应主线剧情的 SD 演出，都可说是忠实
连结了剧情（动画）与系统（游戏），背负著展现《公主连结 R》世界观的重要使命。
https://p2.bahamut.com.tw/B/2KU/63/3729b6b9b97d535ad7d0067ef719si75.JPG
为了顺利达成这 3 个目标，《公主连结 R》的切入动画制作上充满了相当多元的技术应
用，其中 1 项就是“配件动画（パーツアニメ）”。透过配件动画，将插图里面的每个
部位予以配件化，再利用相关工具移动每个配件，是一种能够展现出宛如手绘动画成效的
手法。
https://p2.bahamut.com.tw/B/2KU/64/a4258c290a04874c3902ad8c2319si85.JPG
https://p2.bahamut.com.tw/B/2KU/66/bb49ea782785510eb6613d923419sia5.JPG
据说在当初，《公主连结 R》预定是要使用手绘的切入动画。但是在对照试作后的切入动
画与游戏的 SD 演出，发现了令人感觉节奏感不合的问题。让玩家感受舒适的战斗节奏，
是《公主连结 R》最为不可或缺的游戏要素，也因此无论如何都必须克服这项课题。
https://p2.bahamut.com.tw/B/2KU/67/25ccd2b05ed9cb305ceb71076a19sib5.JPG
在当时所找到的解决方法，就是本作前身《公主连结！（Princess Connect！，プリンセ
スコネクト！）》的“Union Burst”。由于《公主连结！》是透过 Adobe Flash 进行开
发的网页游戏，切入动画与 SD 演出全部都是由上述的配件动画来让角色动作，也不会影
响到战斗上的节奏感。这项作法同时还拥有能够以少量的作画张数完成作业，可望拥有更
佳的制作速度与品质提升等优点。
最后《公主连结 R》的切入动画演出决定以配件动画的方式来呈现，也就能够制作出
与 SD 演出的节奏互相契合，且不妨碍游戏进行的愉快观赏体验。
https://p2.bahamut.com.tw/B/2KU/68/58345d2dd75957bda58d2f1d2f19sic5.JPG
此外，由于所需的作画张数减少，公司对于配件动画制作上的相关知识与所见所闻累积到
一定程度以后，得以将原先委外的这项作业改为公司内部进行制作。因此在制作方向性的
分享与意见疏通都变得更加容易，之后发行或是重新调整等动作都可以更有时间效率的方
式实现。
同时由于制作体制上的变化，让公司进一步提升对于整个动画制作体制的理解，并且
拥有配件动画应用在游戏制作上的相关知识获得完善普及等诸多优点。
https://p2.bahamut.com.tw/B/2KU/71/74a873b813e0d25651c2864c4c19sif5.JPG
https://p2.bahamut.com.tw/B/2KU/74/c28537b3d51e69b35bf9ff9c1d19sii5.JPG
切入动画制作的作业工程与相关知识
接着工藤介绍了切入动画制作上的作业工程与使用工具。
https://p2.bahamut.com.tw/B/2KU/75/fa0b710b80f87416526afc488619sij5.JPG
https://p2.bahamut.com.tw/B/2KU/77/765d877b4b8101306cf13a109419sil5.JPG
具体的作业工程是以《公主连结 R》半周年纪念活动登场的角色“似似花”作为实例介绍
。
分镜制作前的开会中，首先从设计者展示的设计原案里面进行讨论，针对“哪里到哪
里可以放入切入动画”“与 SD 演出之间呈现什么样的关联性”“Union Burst 整体，决
定使用何种色调・方向性”协调出整体想要的共通形象。
以似似花的情况来说，设计者所提出的设计原案内容为“产生一个自己的全像投影，
实体化以后成为自己的分身作战”，所以决定在全像投影变成分身以前的过程都以切入动
画的方式呈现。并且以原案所提出的“数位感视觉表现”与“产生分身”作为主题，加入
了似似花单独的演出。接着决定演出开始到切入动画结束的整体色调，整体形象成型以后
进入分镜制作的环节。
https://p2.bahamut.com.tw/B/2KU/80/98103f5c92eff5de15f5f3575919sio5.JPG
切入动画的分镜是以动画分镜的方式进行制作。据说使用这种方式，能够更加容易掌握实
际的时间长度与动画完成样貌，相当有助于让动画制作控制在预期的方向。
https://p2.bahamut.com.tw/B/2KU/82/a90f48a9e27d5223dbc4e943ee19siq5.JPG
分镜的制作上会提出 3 个以上的原案，最后从中选择出最能够展现角色个性的方案。以
似似花为例，在当时提出了非常多的原案，本次讲座则从中介绍 A 案，B 案，C 案等 3
种不同的发想。
最终则是以“让人感受作弊能力的数位化特效与素材”、“从似似花立绘的水晶获得
启发，类似万花筒的动画演出”、“让人拥有想看到回归 SD 演出时的期待感”等原因作
为理由，选择了 C 案。
https://p2.bahamut.com.tw/B/2KU/83/ea327266cf3ade1a0fa209451219sir5.JPG
据说 “万花筒的动画演出”，是从制作分镜的时候由总监方面提案的点子实现的内容。
类似这样，制作整体上的题材与动画演出的发想由作业方提出架构，并根据设计者与监制
方面的反馈取得更进一步的补充。
并且，在角色的 SD 演出也加入了万花筒相关的要素，营造出能够呼应切入动画的关
联性。另外，由于《公主连结 R》是从左到右进行的游戏，切入动画的最后环节基本上都
是以向右方收尾的形式为主。
https://p2.bahamut.com.tw/B/2KU/84/411101c86fef8066c9db6e3cc619sis5.JPG
https://p2.bahamut.com.tw/B/2KU/85/0f58fcaac646491ee70e2c9db419sit5.JPG
工藤将分镜工程所扮演的职责，归纳为“为了确立整体的共通形象，将 Union Burst 收
纳进同 1 个世界观”。
原画制作过程中，首先会根据分镜绘制出整个切入动画精髓的角色部分。如同前面所
提到的，切入动画的制作会用到部件动画这个手法，在每个原画与原画之间都能透过相关
工具进行填补。也因此原画通常为 4～7 张，比正常的电视动画张数还少。还能够维护细
部的品质坚持与制作速度，取得两全其美的成效。
https://p2.bahamut.com.tw/B/2KU/86/24d31f9ec5c30feb8f059ede7f19siu5.JPG
https://p2.bahamut.com.tw/B/2KU/87/d12245868fc1e805da80cd1c5819siv5.JPG
原画的作业流程有时是由同 1 人负责到底，偶尔也有可能是其他人负责最后的完成阶段
。打造出让职员能够以灵活的身段从业的环境，也是影响游戏开发速度感的一大主因。
https://p2.bahamut.com.tw/B/2KU/88/c9f41b8849ebc13cb18695bd2b19siw5.JPG
作画监修的部分，则是应用了电视动画制作上的相关知识。以《公主连结 R》主线剧情动
画的设定资料做为参考，逐步完成“是否拥有符合角色形象的表情”“设计上是否有落差
”等确认事项，确保角色的既有魅力不会因此受到影响。
本作的每个角色外型都相当不同，仅只是数毫米差距的眼睑大小或强调表现的方式，
都要细心注意是否符合正确的作画。
https://p2.bahamut.com.tw/B/2KU/89/66d06a9efc69c609b528a4699619six5.JPG
接着进行后续作业上最重要的部件分配。部件分配以分镜为参考，将原画分割成 10～20
个部件，并要确认在部件移动的时候，是否会发生隐藏在手腕的肢体没有画到这类无法重
新修正的事态。
https://p2.bahamut.com.tw/B/2KU/90/bf359a1b17e6d809f7ddd1313419siy5.JPG
完成原画作业所带来的成效，可归纳为“能够节省原画张数，并且以保持品质的方式进行
量产”。
进入动画工程的部分，同步进行特效与背景的制作。在此环节基于“细分（mesh）功
能相当优秀，能够制作出柔软的动画质感”、“后续进入拍摄程序仍会继续使用，减少工
具转换中间的资源遗失”等理由，选择“Adobe After Effects”作为使用工具。
在作业过程，首先为完成的原画部件赋予动态途径。具体上的流程为汇入原画，架设
顶部或远景，左右移动等整体相机视角，再追加部件动画。
https://p2.bahamut.com.tw/B/2KU/91/80b731ba3a1f6f3df2a0b4c3e419siz5.JPG
动态化作业的过程中，特别需要注意的是视线的诱导。切入动画演出仅只有 2 秒的时间
，如果动作太快会让观看的人摸不著头绪。为此必须特别另下功夫，针对脸部或武器等较
容易注目的部分，将动作变得更加直观好懂。
此外，为避免部件呈现出机械性移动的不自然感，也在动作变化上增加幅度，借此呈
现出更接近动画演出的表现。
https://p2.bahamut.com.tw/B/2KU/92/2092c0faab490e27b25f73950d19sj05.JPG
https://p2.bahamut.com.tw/B/2KU/93/f1ed71f2a15cb5e7d91b6ee43f19sj15.JPG
接着进行特效的制作。似似花的例子中，是以“数位化的材质感”与“万花筒”作为制作
主题，根据这项目标利用 Adobe After Effects 制作所需的素材。
以角色立绘中散落周遭的水晶碎片为灵感，做出背景出现碎裂的特效，以及全像摄影
的演出中产生自己的分身等，考虑角色的特性过后着手制作这些特效。
https://p2.bahamut.com.tw/B/2KU/94/c10278f57c52811ed87a76a53119sj25.JPG
《公主连结 R》的切入动画采用了大量的手绘动画特效。这么做的主因还是为了追求动画
应有的感觉，主要的特效都尽可能以手绘的方式制作，至于 3D 动画的粒子表现，则大多
当作添加风味的配料运用。
特别是武器的特效，作画上特别讲究拥有长期停留在玩家视线的识别性。特效的消失
方式也不只是单纯的透明化淡出，而是采取细微飘散，碎裂变小的特效丰富视觉体验。
https://p2.bahamut.com.tw/B/2KU/95/c89dcc61af41d0d2adb99ce0d719sj35.JPG
https://p2.bahamut.com.tw/B/2KU/96/b9358ff969e383a545754ad03619sj45.JPG
工藤综合以上所述，指出动画工程中最重要的 3 个重点分别是“重视简单易懂的识别性
与关联性”、“力求电视动画般的演出内容”、“重视每个角色特性的演出内容”。
最后进行的就是实际拍摄了。作业中会进行色调或画面整体的特效调整，角色线条上
的润饰，目标制作出电视动画般的影像感。此外，也能够在拍摄之中尝试加入一些特殊表
现。举例来说，海边的场景可以加上剪影表现与镜头眩光（Lens Flare），也可以配合角
色动作加入圆形或三角形等，让特定图形移动的动态素材（Motion graphics）。
https://p2.bahamut.com.tw/B/2KU/97/4c54eb1c8980241c9376a93dc519sj55.JPG
https://p2.bahamut.com.tw/B/2KU/98/e60a4edad63d53f7e1573daa8419sj65.JPG
https://p2.bahamut.com.tw/B/2KU/99/aa57d9a827b985666e947f240619sj75.JPG
进行崭新尝试的切入动画表现
《公主连结 R》里面，在“公主型态”发动“Union Burst”的时候会有特殊的切入动画
演出。关于公主型态的演出与企划，当初是以“比起以往的切入动画都要更加豪华！更像
动画！”作为制作概念，据说因此曾经从系统层面大幅度重新审视切入动画的制作方法。
公主型态的切入动画为了与以往的成品作出差别，首先提案的是彻底打造出 SD 演出
与切入动画的无痕转换境界。这两个部分若能以无缝接轨的方式互相切换，可以带给玩家
更加独特的感受与投入感。
https://p2.bahamut.com.tw/B/2KU/00/89a1eaad442e1af520693d912819sj85.JPG
另一方面也存在必须克服的课题。若是按照以往的系统，将 SD 演出与切入动画演出交互
播放会增加用户端的负担，也会与原本追求游戏流畅度这项目标有所出入。因此最后的决
定是将切入演出全部整合在同 1 个动画里面，也能免除目前为止所有演出存在的限制。
https://p2.bahamut.com.tw/B/2KU/01/b7404f15ada8964ac17662529a19sj95.JPG
再加上与过往的切入动画相比，更加提升了演出层面的豪华程度，连背景都包含在动画演
出里面，呈现更大格局的制作范畴。相机视角也能够在空间内纵横无尽地自由移动，诞生
出过往所没有的动作感。
https://p2.bahamut.com.tw/B/2KU/05/853b4b69eacfb6782fc14f707719sjd5.JPG
并且，为了让切入动画能够与剧情动画互相呼应，演出或拍摄效果都特地采用与剧情动画
相同的方法。借此让两者之间产生一定的连结，打造出让玩家在游戏中看到剧情动画的再
现，观看剧情动画的时候也能联想起战斗过程的游戏环境。
https://p2.bahamut.com.tw/B/2KU/02/5dd11b2e1f6acd12539d08123619sja5.JPG
这样崭新的尝试，同时也为公司内部的制作体制带来影响。在这之前，SD 演出与切入动
画是以不同的分镜进行制作，开始制作公主型态以后都是采取相同的分镜，接近同步进行
制作。
https://p2.bahamut.com.tw/B/2KU/03/2cb8ae92839eca4f55938f9c2a19sjb5.JPG
另外则是，制作上与过往感受最不同的地方，就是 SD 人物的动作与切入动画的动作必须
以 Adobe After Effects 进行结合，为了让两者的演出完成接近天衣无缝的连接，必须
加入手绘特效进行编辑这点。
https://p2.bahamut.com.tw/B/2KU/04/957f50b5b121b46d513b11c95e19sjc5.JPG
只不过，全新的尝试同时也面临到“战斗的速度感与切入演出长度的调和折衷”、“系统
与性能面的障碍”等问题挑战。
前者的部分，是投入重视节奏感的场景转换，利用 Adobe After Effects 完成细部
调整获得解决。例如在公主可可萝的演出中，在 SD 演出与切入动画的转换过程中添加横
向穿越树木阴影的过程，实现自然的场景转换。
https://p2.bahamut.com.tw/B/2KU/06/52c27f5bbd459b05df46f6348f19sje5.JPG
系统与性能方面的困难之处在于无法使用关闭切入动画的功能，或是角色以闇影型态（シ
ャドウ）作为敌方登场的切入动画该怎么办。这部分的处理方式，前者是从演出中最适当
或最热烈的部分开始播放，后者则另外准备作为敌方登场时的动画。
https://p2.bahamut.com.tw/B/2KU/07/8c6fb5d669364e85ddf6fa586219sjf5.JPG
https://p2.bahamut.com.tw/B/2KU/08/a1af8fe9abf30b8a23d5bdf88819sjg5.JPG
主讲者工藤最后回顾开头所述，提及切入动画演出在游戏中扮演的 3 个重要职责，并以
“《公主连结 R》制作切入动画的目标，是希望让角色魅力能够确实传达到各位玩家心里
”为本次讲座作结。
https://p2.bahamut.com.tw/B/2KU/09/7bf0d2a1747678f7c61dcd989f19sjh5.JPG
作者: andy86tw (MSYG) 2020-09-08 13:50:00
干 14页有够长!
作者: openbestbook (吃萝卜不吐萝卜皮) 2020-09-08 13:50:00
结果我载下来第一件事就是把动画调成OFF...
作者: shinobunodok (R-Hong) 2020-09-08 13:50:00
用心做游戏 我课
作者: Yadsmood (反转冲动) 2020-09-08 13:51:00
皮影戏一个角色要做半年 屌虐
作者: furbyyeh (萤火虫的夜晚) 2020-09-08 13:51:00
立害了 原来是连结是连结这个
作者: xo45527788 2020-09-08 13:51:00
教学文
作者: lcw33242976 (干嘛抢我暱称) 2020-09-08 13:51:00
推，我都不调的，放大招的动画真的蛮帅的
作者: haseyo25 2020-09-08 13:51:00
就跟GBF老鼠奥义动画超棒然而还是会偶尔skip一样
作者: yukari8 (林檎) 2020-09-08 13:52:00
先推再看
作者: amsmsk (449) 2020-09-08 13:52:00
最重要的功能是可以SKIP
作者: forsakesheep (家裡蹲é¯å»¢è‚¥å®…) 2020-09-08 13:52:00
FGO：作这些干麻？卖得过我吗？
作者: haseyo25 2020-09-08 13:53:00
FGO有盐川出书教大家怎么做出营收上亿游戏喔
作者: YaLingYin (泠) 2020-09-08 13:54:00
专业文
作者: waitan (微糖儿>////<) 2020-09-08 13:54:00
难怪cy要自己搞一个动画公司
作者: coon182 (微笑å°ç©ºç©ºâ™¥) 2020-09-08 13:56:00
可是出刀的时候关起来比较好
作者: cat05joy (CATHER520) 2020-09-08 13:57:00
第七史诗放招衔接也不错 不过分辨率只有720P
作者: arrenwu (键盘的战鬼) 2020-09-08 13:57:00
我也都会看这些动画XD
作者: shinobunodok (R-Hong) 2020-09-08 13:58:00
公会战在测轴或练习的时候我会关掉 特别是新黑刀因为要频繁开UB但平常都开着
作者: FrogStar (蛙星) 2020-09-08 13:59:00
我都设定一天只看一次
作者: catvvine (catvvine) 2020-09-08 13:59:00
CY爸爸真的很用心在做游戏，可惜代理只会出礼包，课金记得课日版，台版我想不到任何课的理由
作者: linceass (ギリギリ爱 ~キリキリ舞~) 2020-09-08 14:00:00
希望多个功能取消大招动画 现在一场都打超久 UB狂开
作者: shinobunodok (R-Hong) 2020-09-08 14:00:00
台版超棒的 课爆
作者: ShibaTatsuya (司波达也) 2020-09-08 14:01:00
推
作者: j8508241 2020-09-08 14:02:00
总之 香
作者: qaz223gy (亚阿相界) 2020-09-08 14:03:00
推
作者: klaynaruto (影分身K汤) 2020-09-08 14:03:00
做这么认真 玩家如果都skip不是太可惜了吗 学学人家FGO
作者: zxc8787 (摸斗哈压库) 2020-09-08 14:03:00
打那么多谁他妈看得完. jpg
作者: r30307 (RPG) 2020-09-08 14:03:00
隔壁棚有一个因为大家都skip大招 干脆不做大招差分的游戏
作者: BSpowerx (B.S) 2020-09-08 14:03:00
通常至少会看个一两次吧XD
作者: iamnotgm (ä¼½è—之黑) 2020-09-08 14:04:00
有够长
作者: vincentwg (懒得想@_@) 2020-09-08 14:04:00
某楼云爆还在礼包 现在想买都没得买了
作者: MoonSkyFish (月天鱼) 2020-09-08 14:04:00
公连算蛮新的IP CY能经营到这程度也还行了
作者: shinobunodok (R-Hong) 2020-09-08 14:04:00
部分礼包还在 但是已经被严重nerf了
作者: LIONDOGs (LIONDOG) 2020-09-08 14:05:00
反观FGO，一直不敢出SKIP怕人家不看宝具动画
作者: arrenwu (键盘的战鬼) 2020-09-08 14:05:00
这已经不是还行，根本就是强。
作者: MoonSkyFish (月天鱼) 2020-09-08 14:05:00
忘记前作活多久 估计这IP到目前也就3~4岁吧
作者: WAVEHzen (The Wave 海波浪) 2020-09-08 14:06:00
礼包超赞的好吗…，一堆礼包都比日版还超值，要不是B服
作者: arrenwu (键盘的战鬼) 2020-09-08 14:07:00
超值礼包我猜是CY不准 XD
作者: arcanite (不问岁月任风歌) 2020-09-08 14:07:00
反观某宝具不skip游戏
作者: s50189 (咕噜米) 2020-09-08 14:08:00
GBF都在F5比快 最近BOSS动画做太长会让玩家感到烦
作者: shinobunodok (R-Hong) 2020-09-08 14:09:00
那个公主包 买六包（八包）直接送角再给你相对应金额的宝石 真的有要课的这个超划算
作者: arrenwu (键盘的战鬼) 2020-09-08 14:10:00
我记得应该是CY来台之后超值礼包才整个不见的
作者: bbc0217 (渡) 2020-09-08 14:12:00
酉告
作者: sai007788 (九条寺サイ) 2020-09-08 14:13:00
只能推了
作者: pearnidca (熊猫船长) 2020-09-08 14:17:00
出新黑刀开动画的话一刀不知道要打多久
作者: cloud7515 (殿) 2020-09-08 14:18:00
这就跟FGO一样的做法啊
作者: shane24156 (喷水绅士) 2020-09-08 14:18:00
我记得重装战姬也有同样手法 不过超级崩 可怜呢
作者: simpleclean (million ) 2020-09-08 14:20:00
反观fgo,还有低能粉丝在那边主张说不看宝具就是没爱
作者: shinobunodok (R-Hong) 2020-09-08 14:21:00
其实这就是和机器人大战一样 第一次看放招动画会很潮 看一百次后你只会想骂干你娘
作者: youngnpig (Young Pig) 2020-09-08 14:22:00
dmm有款还在事前的18r网游、有一部分员工是公连团队~
作者: waitan (微糖儿>////<) 2020-09-08 14:22:00
一天至少看一次就好
作者: winiS (维尼桑) 2020-09-08 14:23:00
平平是大脸，老公就是尊爵不凡
作者: fenix220 (菲) 2020-09-08 14:23:00
机器人大战玩到后面战斗动画也是关掉XD打王大招会开而已
作者: KiSeigi (Kuroda.K.Masamura) 2020-09-08 14:24:00
最重要的是记得开放SKIP功能 反观(RY
作者: safy (Ty) 2020-09-08 14:25:00
FGO前一阵子是有提到小达文西怎么制作拉, 但也只有小达文西
作者: andy86tw (MSYG) 2020-09-08 14:25:00
反观
作者: smart0eddie (smart0eddie) 2020-09-08 14:27:00
被游戏耽误的动画公司
作者: js850604 (jack0604) 2020-09-08 14:27:00
公连刷关可以扫荡，UB不开UB SKIP打活动都没啥差
作者: TrueTears (真实之泪) 2020-09-08 14:31:00
我都开一天看一次新黑: 妞依阿巴斯偷 妞依阿巴斯偷 妞依阿巴斯偷
作者: rockmanx52 (ゴミ丼 わがんりんにゃれ) 2020-09-08 14:38:00
其实就汲取前作缺点改进后的结果啊
作者: hiphopboy7 2020-09-08 14:40:00
公连的cut in比fgo的舒服多了
作者: shinobunodok (R-Hong) 2020-09-08 14:42:00
不 这不是改前作缺点的等级而已 而是整个回炉重铸
作者: rabbithouse (智乃的欧尼酱) 2020-09-08 14:45:00
推超长文 我也只有公会战抢刀会关 其他时候都看好看满
作者: haseyo25 2020-09-08 14:55:00
可是小文西的宝具正面脸在老早就有了就宝具变化来说并没有特别多
作者: jabi825 (微波海波我是小波) 2020-09-08 14:56:00
反观F
作者: allanbrook (翔) 2020-09-08 14:57:00
现在就正在做这种工作...其实看完没有太特殊的流程是品质特别好而已不过分享的真的很仔细
作者: EEWH (白马) 2020-09-08 15:01:00
推推
作者: Issarc0721 (萧瑟风月) 2020-09-08 15:06:00
推推
作者: goldman0204 (goldman) 2020-09-08 15:23:00
推~~~
作者: Hazelburn (廉价酒) 2020-09-08 15:26:00
放UB真的蛮吸睛的
作者: b325019 (望月) 2020-09-08 15:29:00
难就难在订一个标准流程啊
作者: h182182h (Oligo) 2020-09-08 15:29:00
推 关于游戏内的动画真的很用心
作者: roc074 (安安) 2020-09-08 15:35:00
我真的很喜欢公连的UB基本上除了公会战之外都是看好看满。
作者: xkiller1900 (cerberus) 2020-09-08 15:38:00
总之推，虽然我不懂
作者: YasyajinAi (天衣可爱) 2020-09-08 15:41:00
公连的UB都做得不错，三不五时都会去水管上找有字幕的合集来看XD
作者: wcp59478 (真是邪门) 2020-09-08 15:49:00
公连最可怕的应该是主页面的切换速度 跟鬼一样
作者: SeijyaKijin (代时上克下的鬼邪天opeop) 2020-09-08 15:49:00
都是课长的血泪
作者: bollseven (噜噜子) 2020-09-08 15:56:00
虽然没玩 但感觉很猛 流程有一套
作者: alen82515 (猛哥神信) 2020-09-08 15:56:00
两秒内就把镜华抱到床上
作者: lav1147 (檸檬æ±åŠç³–多冰) 2020-09-08 16:00:00
推认真
作者: cities516 (安安路过) 2020-09-08 16:09:00
推 但是公主UB真的很吃硬件规格Orz
作者: killuaz (从前的从前从没变过) 2020-09-08 16:11:00
认真做游戏推
作者: x6858168 2020-09-08 16:14:00
认真推
作者: YandereLove (Rem) 2020-09-08 16:40:00
赞啦
作者: dnek (哪啊哪啊的合气道) 2020-09-08 16:46:00
这篇文也一样skip
作者: nightmare012 (虫虫) 2020-09-08 16:58:00
公主型态增加用户的负担还是没改善啊
作者: aegis91086 (xo91086) 2020-09-08 17:10:00
推
作者: connell12654 (牳薚) 2020-09-08 17:20:00
近期看起来 好像UB动作有点突兀的就是泳装纯了吧后面动作像是卡住了一样
作者: anumber (Everlasting GuiltyCrown) 2020-09-08 17:38:00
反观皮影戏f
作者: lunadrop (天月) 2020-09-08 18:15:00
f制作很阳春哪敢公开怕被笑
作者: bn5566 (陈小肥) 2020-09-08 19:02:00
动画超棒 没关过
作者: r901700216 (LS) 2020-09-08 19:29:00
2秒是蛮好的概念 有些游戏真的太长 还不能跳过
作者: tonsin2976 (米迦勒我è€å©†) 2020-09-08 19:40:00
反观 宇宙神游 笑死
作者: www8787 (进击derLoser®) 2020-09-08 19:57:00
看久就不会想看 想关掉省时间
作者: abb123456 (abb123456) 2020-09-08 19:58:00
推
继续阅读
[vTuber] 宝钟マリン:演习遇到hololive舰队hn9480412[问题] 找一部跟动物有关的卡通vm3bp4t6[闲聊] NBA球员重现灌篮高手清田信长的手指火锅basala5417[闲聊] 如果486开局是到剑圣阵营iceyo4343[Vtuber] 彩虹社的皇女リゼ本业是律师吗？Yuiwa1996[闲聊] 水影跟土影在木叶强度排的上前十吗？tw689Re: [闲聊] 课本不教三国了 小朋友会从哪认识三国？ya01234[讨论] 哈利波特如果给中国人改写会怎样?openbestbookRe: [TCG ] WS五等分的花嫁 x Re hololive produbattlecat[闲聊] 萧峰小便会不会很可观？Manaku
