上個(gè)月，日本CEDEC開(kāi)發(fā)者大會(huì)上，Cygames交互設(shè)計(jì)師小組工藤瑛子女士以“TV動(dòng)畫與游戲2D技能動(dòng)畫的結(jié)合”為題，針對(duì)《公主連結(jié)Re：Dive》中用到的制作手法進(jìn)行了演講分享。
?

工藤瑛子于2016年加入Cygames，參與開(kāi)發(fā)《公主連結(jié)Re：Dive》（后文簡(jiǎn)稱《公主連結(jié)》），她擅長(zhǎng)SD角色動(dòng)畫制作，也因部件動(dòng)畫的制作經(jīng)驗(yàn)豐富，而負(fù)責(zé)游戲特寫動(dòng)畫的制作，目前她正在這兩個(gè)方向進(jìn)行制作。
?

本文由日媒4Gamer發(fā)布，游戲葡萄編譯整理。

TV動(dòng)畫與游戲結(jié)合的難點(diǎn)

《公主連結(jié)》的一大特色是 “連結(jié)爆發(fā)（UB）”系統(tǒng)中，角色釋放出的動(dòng)畫特寫。在小巧的SD角色混戰(zhàn)的時(shí)候插入特寫動(dòng)畫，能產(chǎn)生十分戲劇化的視覺(jué)效果。
?

“要將動(dòng)畫與游戲深度結(jié)合，制作時(shí)所面臨的最大問(wèn)題，就是兩者之間的制作體制存在巨大差異。動(dòng)畫的制作需要在數(shù)月至半年之前提前完成，因此會(huì)按照既定的設(shè)計(jì)進(jìn)行制作。而游戲制作過(guò)程中則需要頻繁地增加新的演出，同時(shí)為了迎合玩家們的需求，時(shí)常需要對(duì)演出做出調(diào)整，所以會(huì)產(chǎn)生做好的動(dòng)畫不符要求打回重做的情況。

“《公主連結(jié)》在加入動(dòng)畫演出時(shí)所采用的三種制作法，分別是“在游戲中加入動(dòng)畫產(chǎn)生的問(wèn)題和解決辦法”；“將手繪動(dòng)畫和部件動(dòng)畫結(jié)合制作的手法和流程”；“如何制作有統(tǒng)一感的動(dòng)畫演出和SD角色的演出（以下略稱SD演出）”。

何為《公主連結(jié)》的特寫動(dòng)畫？

《公主連結(jié)》中所使用的特寫動(dòng)畫，主要有3種功能。第一種是“最大限度地呈現(xiàn)角色魅力”。由于角色的SD形象下看不清表情和肢體動(dòng)作，通過(guò)特寫則可以做到，通過(guò)這種方式可以讓玩家們更好地喜歡上自己擁有的角色。
?

第二種是“用‘2秒’時(shí)間來(lái)炒熱戰(zhàn)斗氣氛”。每支特寫動(dòng)畫時(shí)長(zhǎng)約為2秒，在SD角色進(jìn)行動(dòng)作時(shí)，通過(guò)掌握插入特寫動(dòng)畫的時(shí)機(jī)，可以做到炒熱戰(zhàn)斗氣氛的作用。因此，特寫動(dòng)畫也可以說(shuō)是“2秒時(shí)長(zhǎng)的角色專屬PV”。
?

第三種是“將動(dòng)畫和游戲緊密連結(jié)”。通過(guò)在戰(zhàn)斗過(guò)程中播放動(dòng)畫這一形式，可以起到強(qiáng)調(diào)本作的核心——“動(dòng)畫RPG”的作用。另外，通過(guò)將劇情動(dòng)畫和SD演出相結(jié)合，可以把劇情（動(dòng)畫）和系統(tǒng)（游戲）緊密聯(lián)系在一起，更好地展現(xiàn)了《公主連結(jié)》的世界觀。
?

為了實(shí)現(xiàn)這3種功能，《公主連結(jié)》在特寫動(dòng)畫的制作上下了很大的功夫。其一就是“部件動(dòng)畫”。所謂“部件動(dòng)畫”，就是將立繪拆分成各種部件，通過(guò)運(yùn)用動(dòng)畫制作工具來(lái)達(dá)到與手繪動(dòng)畫相同的演出效果。
?

?

?

最初的預(yù)定是采用手繪來(lái)制作特寫動(dòng)畫，但是在測(cè)試特寫動(dòng)畫和游戲的SD演出配合時(shí)，始終無(wú)法達(dá)到良好的節(jié)奏感。由于戰(zhàn)斗時(shí)爽快的節(jié)奏感也是《公主連結(jié)》的重要賣點(diǎn)之一，于是這個(gè)問(wèn)題成為了制作組無(wú)論如何都要克服的難題。
?

首先想到的就是前作《公主連結(jié)！》（《プリンセスコネクト！》）中的連結(jié)爆發(fā)（UB）。這是一款由Adobe Flash開(kāi)發(fā)的網(wǎng)頁(yè)游戲，特寫動(dòng)畫和SD演出都是部件動(dòng)畫，戰(zhàn)斗的節(jié)奏感非常好。更重要的是，由于需要的作畫張數(shù)更少，制作的速度和質(zhì)量也有望提高。

而實(shí)際采用了部件動(dòng)畫制作的特寫動(dòng)畫在配合SD演出時(shí)的節(jié)奏感也更好，完全不用擔(dān)心降低游戲體驗(yàn)。
?

?

另外，由于減少了作畫張數(shù)，而公司內(nèi)部也對(duì)部件動(dòng)畫的制作有一定的經(jīng)驗(yàn)，這部分的動(dòng)畫制作可以完全由公司自己制作（不用外包）。由此，在方向性的意見(jiàn)交流上也變得更有效率，成品反饋與返工也變得更簡(jiǎn)單。

除此以外，由于制作體制的變化，游戲制作組增加了對(duì)于動(dòng)畫的制作體制理解。在部件動(dòng)畫的制作水平上也有更進(jìn)一步的增長(zhǎng)。
?

?

?

特寫動(dòng)畫的制作流程與經(jīng)驗(yàn)

接下來(lái)分享的是特寫動(dòng)畫制作的制作流程，和其中使用的制作工具軟件。
?

?

?

下面以《公主連結(jié)》半周年紀(jì)念角色 “似似花”的制作舉例。

在分鏡腳本制作前的討論會(huì)上，首先由游戲策劃師給出演出的策劃案，然后由全體人員來(lái)討論諸如“特寫動(dòng)畫從哪里開(kāi)始在哪里結(jié)束”；“特寫動(dòng)畫和SD演出要怎樣關(guān)聯(lián)在一起”；“連結(jié)爆發(fā)的整體上的色調(diào)和方向性如何”等一系列問(wèn)題，最終達(dá)成一致。

以“似似花”為例，策劃師給出的演出策劃案內(nèi)容是“通過(guò)制造自身的全息投影，將其實(shí)體化并復(fù)制之后投入戰(zhàn)斗”。特寫動(dòng)畫的部分選在制造復(fù)制體之前的過(guò)程。在此之上，為了忠于策劃案內(nèi)容，決定了“似似花”的演出主要特色是“數(shù)字化的表現(xiàn)”和“制造復(fù)制體”。之后再?zèng)Q定整段動(dòng)畫的整體色調(diào)，之后才進(jìn)入分鏡腳本的具體制作。
?

特寫動(dòng)畫的分鏡采用視頻分鏡。這樣做的優(yōu)點(diǎn)在于，制作時(shí)比較容易想象完成品的尺寸和動(dòng)作，同時(shí)也不容易破壞演出的整體感覺(jué)。
?

在制作分鏡腳本時(shí)，需要制作3種以上的方案，在其中選擇最能體現(xiàn)角色特點(diǎn)的一種。以“似似花”為例，當(dāng)初實(shí)際上有相當(dāng)多的方案，但在演講中只選擇講解了A、B、C三種方案。

最終選擇了C方案，理由如下：“讓人感到開(kāi)掛一樣的數(shù)字化特效符合主題”；“由似似花立繪中的水晶得到靈感，而制作出的類似萬(wàn)花筒效果”；“對(duì)SD演出部分的期待感很高”。
?

“類似萬(wàn)花筒的演出效果”最初是在制作分鏡時(shí)由導(dǎo)演提出的。諸如此類，對(duì)于制作方針和演出效果的建議，不僅僅由一線制作者提出，像是策劃師和導(dǎo)演等人的反饋也能提供一定幫助。

而通過(guò)在SD演出時(shí)也加上萬(wàn)花筒的效果，也能與特寫動(dòng)畫產(chǎn)生關(guān)聯(lián)性。此外，由于《公主連結(jié)》的游戲流程是從左至右的，特寫動(dòng)畫的最終畫面幾乎也都是要向右走的。
?

?

制作分鏡腳本的流程稱為：“通過(guò)確立全體一致的認(rèn)識(shí)，將連結(jié)爆發(fā)的演出統(tǒng)一在同一個(gè)世界觀之下”。

在制作原畫的過(guò)程中，首先要針對(duì)在整個(gè)特寫動(dòng)畫中核心人物進(jìn)行作畫。如上所述，由于特寫動(dòng)畫運(yùn)用的是部件動(dòng)畫，原畫之間可以通過(guò)工具軟件進(jìn)行補(bǔ)充完成。因此，原畫張數(shù)為4~7張，比一般的TV動(dòng)畫要少。這樣也使得制作時(shí)能兼顧細(xì)節(jié)上的追求和完成速度。
?

?

在原畫制作過(guò)程中，既能由多人分工完成截至上色的所有流程，也能由單人完成。像這樣，營(yíng)造讓員工們能夠自由工作的環(huán)境，也關(guān)系到游戲開(kāi)發(fā)的速度。
?

作畫監(jiān)修則采用了TV動(dòng)畫的制作流程。為了能盡力還原角色的魅力，需要一邊參考《公主連結(jié)》劇情動(dòng)畫的設(shè)定資料，一邊確認(rèn)“角色的表情是否符合性格”，“人物設(shè)計(jì)是否有失誤”等問(wèn)題。

本作的角色五花八門，在作畫時(shí)，諸如眼線的線條寬度，眼部高光的畫法等等細(xì)節(jié)，都需要時(shí)刻注意。
?

之后，就是在后續(xù)工作中極為重要的部件拆分。部件拆分需要根據(jù)分鏡，把原畫拆分成10~20個(gè)部件。在人物進(jìn)行動(dòng)作時(shí)，原本被手遮擋的身體部分也需要補(bǔ)畫出來(lái)，否則會(huì)出現(xiàn)身體缺少一部分的情況，為了使類似錯(cuò)誤不至于無(wú)法挽回，必須格外注意。
?

通過(guò)這種原畫流程，可以達(dá)到“在節(jié)約作畫張數(shù)的同時(shí)，保持高品質(zhì)的量產(chǎn)”的效果。

在動(dòng)畫制作過(guò)程中，特效和背景層的制作也必須配合進(jìn)行。為此，出于“網(wǎng)格功能優(yōu)秀且可以進(jìn)行靈活的動(dòng)畫制作”，“在攝影流程時(shí)有用到，QQ號(hào)碼拍賣平臺(tái)為了免于轉(zhuǎn)換時(shí)有畫質(zhì)損失”等理由，采用“Adobe After Effects”軟件。

在這個(gè)過(guò)程中，首先要對(duì)完成的原畫部件進(jìn)行動(dòng)作設(shè)定。具體做法是把原畫進(jìn)行組合，再使用平拉推移等運(yùn)鏡方式，逐步增加部件的動(dòng)作。

在動(dòng)作設(shè)定的過(guò)程中，尤其需要注意的一點(diǎn)是進(jìn)行視線誘導(dǎo)。由于特寫動(dòng)畫只有短短2秒，如果速度太快會(huì)使得動(dòng)作不明所以。因此，需要針對(duì)比較顯眼的臉部和武器部分進(jìn)行調(diào)整。

此外，為了防止部件移動(dòng)時(shí)產(chǎn)生機(jī)械運(yùn)動(dòng)的感覺(jué)，動(dòng)作的變化和幅度，要盡量模仿普通動(dòng)畫的感覺(jué)。
?

接下來(lái)，進(jìn)行特效的制作。以“似似花”為例，制作的主題“有數(shù)字化感覺(jué)的紋理”和“萬(wàn)花筒”，因此需要在Adobe After Effects中尋找這種感覺(jué)的素材。

由于在角色立繪中有散落到各處的水晶碎片，因此為背景加上了碎裂的動(dòng)畫效果；考慮到角色的特性，又制作了全息投影的效果和制造復(fù)制體的特效。
?

?

《公主連結(jié)》的特寫動(dòng)畫中，也使用了很多手繪的特效。為了實(shí)現(xiàn)類似普通動(dòng)畫的效果，主要的特效貼圖是由手繪完成的，3D的粒子效果的運(yùn)用只取其部分精髓。

特別是武器特效，為了能給人留下更深的印象而采用了區(qū)分度更高的作畫。特效的消失效果也并不是單純的淡出，而是碎成一片一片，越來(lái)越小。通過(guò)這種表現(xiàn)可以使整體看上去更華麗。
?

總結(jié)下來(lái)，動(dòng)畫制作過(guò)程中最重要的有3點(diǎn)：“重視直觀性和聯(lián)系性”；“演出效果盡量貼近TV動(dòng)畫”；“演出整體要凸顯人物特色”。

最后的步驟是攝影。在這個(gè)階段需要對(duì)動(dòng)畫整體進(jìn)行調(diào)色和特效調(diào)整，同時(shí)也要改進(jìn)人物的線稿，做出接近TV動(dòng)畫的感覺(jué)。另外，有時(shí)會(huì)在攝影過(guò)程中加入特殊的表現(xiàn)手法，例如，在有海的場(chǎng)景加上逆光的表現(xiàn)和鏡頭光暈；配合角色的運(yùn)動(dòng)加上圓形或三角等幾何圖形的運(yùn)動(dòng)的運(yùn)動(dòng)圖形設(shè)計(jì)（Motion Graphic）。
?

在特寫動(dòng)畫里的全新嘗試

在《公主連結(jié)》中，在“公主形態(tài)下”發(fā)動(dòng)連結(jié)爆發(fā)（UB）時(shí)加入了特殊的特寫動(dòng)畫。企劃設(shè)計(jì)公主形態(tài)時(shí)的方針，是“比以往的特寫動(dòng)畫更豪華！更像TV動(dòng)畫！”。對(duì)此，也許將在游戲系統(tǒng)層面上對(duì)特寫動(dòng)畫進(jìn)行全面改動(dòng)。

為了將公主形態(tài)的特寫動(dòng)畫與過(guò)去的特寫動(dòng)畫作出區(qū)別，首先被提出的方案是消除SD演出和特寫動(dòng)畫之間的界限。通過(guò)實(shí)現(xiàn)兩者間切換的無(wú)縫化，增加了前所未有的特別感，實(shí)現(xiàn)更具沉浸感的游戲體驗(yàn)。
?

這帶來(lái)的難題是，在以往的游戲系統(tǒng)上進(jìn)行SD演出和特寫動(dòng)畫的來(lái)回切換會(huì)對(duì)手機(jī)性能造成極大負(fù)擔(dān)，進(jìn)而影響游戲體驗(yàn)。但是，通過(guò)把所有演出都合并成一支動(dòng)畫，問(wèn)題就迎刃而解，甚至連以往的演出限制也沒(méi)有了。
?

此外，為了展現(xiàn)出超越以往的特寫動(dòng)畫的華麗程度，在動(dòng)畫制作時(shí)，增加了包括背景在內(nèi)的可動(dòng)要素，使場(chǎng)面規(guī)模變得空前宏大。鏡頭的移動(dòng)也擴(kuò)展到各個(gè)方向，展現(xiàn)出前無(wú)古人的動(dòng)作性。
?

同時(shí)，為了使特寫鏡頭和劇情動(dòng)畫產(chǎn)生一體感，特寫鏡頭也采用了與劇情動(dòng)畫相同的演出和攝影效果。由此，兩者緊密結(jié)合，產(chǎn)生了游戲重現(xiàn)了劇情動(dòng)畫，劇情動(dòng)畫也同時(shí)重現(xiàn)了劇情的效果。
?

像這樣全新的嘗試也給整個(gè)公司帶來(lái)了影響。以往的SD演出和特寫動(dòng)畫的分鏡都是分別制作的，但是公主形態(tài)的分鏡卻是同一個(gè)，兩者的制作也是并行的。
?

這種制作方式帶來(lái)的最大區(qū)別就是，SD的動(dòng)作和特寫動(dòng)畫和動(dòng)作通過(guò)Adobe After Effects相互結(jié)合，再加上手繪的特效與編輯，使得兩者的演出效果沒(méi)有任何違和感。
?

但是，這種新的嘗試，也帶來(lái)了諸如“如何找到戰(zhàn)斗的速度感與動(dòng)畫長(zhǎng)度之間的平衡”，“游戲系統(tǒng)上的各種不便”等問(wèn)題。

前者通過(guò)在Adobe After Effects上對(duì)重視速度感的分鏡進(jìn)行細(xì)節(jié)調(diào)整可以解決。例如，在公主可可蘿的動(dòng)畫演出中，SD演出和特寫動(dòng)畫的連接部分，通過(guò)用一棵樹橫穿畫面的鏡頭實(shí)現(xiàn)了鏡頭間的自然切換。
?

在游戲系統(tǒng)上的不便，包括“無(wú)法使用關(guān)閉特寫動(dòng)畫功能”，“對(duì)于影子敵人的特寫動(dòng)畫是否關(guān)閉”等問(wèn)題。對(duì)于這些問(wèn)題，分別采用了截選動(dòng)畫中最精彩部分播放，和另外制作影子角色的動(dòng)畫等手段加以解決。
?

總體來(lái)看，“《公主連結(jié)》的最終目標(biāo)，是為玩家們呈現(xiàn)富有魅力的角色們”。
?

總結(jié)

以上是生活随笔為你收集整理的《公主连结》交互设计师：如何用TV画手法制作2D技能动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。