《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

譯/手殘志堅,整理/依光流

上個月,日本CEDEC開發者大會上,Cygames互動設計師小組工藤瑛子女士以「TV動畫與遊戲2D技能動畫的結合」為題,針對《公主連結Re:Dive》中用到的製作手法進行了演講分享。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

工藤瑛子於2016年加入Cygames,參與開發《公主連結Re:Dive》(後文簡稱《公主連結》),她擅長SD角色動畫製作,也因部件動畫的製作經驗豐富,而負責遊戲特寫動畫的製作,目前她正在這兩個方向進行製作。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

本文由日媒4Gamer發佈,遊戲葡萄編譯整理。

TV動畫與遊戲結合的難點

《公主連結》的一大特色是 「連結爆發(UB)」系統中,角色釋放出的動畫特寫。在小巧的SD角色混戰的時候插入特寫動畫,能產生十分戲劇化的視覺效果。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

「要將動畫與遊戲深度結合,製作時所面臨的最大問題,就是兩者之間的製作體制存在巨大差異。動畫的製作需要在數月至半年之前提前完成,因此會按照既定的設計進行製作。而遊戲製作過程中則需要頻繁地增加新的演出,同時為了迎合玩家們的需求,時常需要對演出做出調整,所以會產生做好的動畫不符要求打回重做的情況。

「《公主連結》在加入動畫演出時所採用的三種製作法,分別是「在遊戲中加入動畫產生的問題和解決辦法」;「將手繪動畫和部件動畫結合製作的手法和流程」;「如何製作有統一感的動畫演出和SD角色的演出(以下略稱SD演出)」。

何為《公主連結》的特寫動畫?

《公主連結》中所使用的特寫動畫,主要有3種功能。第一種是「最大限度地呈現角色魅力」。由於角色的SD形象下看不清表情和肢體動作,通過特寫則可以做到,通過這種方式可以讓玩家們更好地喜歡上自己擁有的角色。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

第二種是「用『2秒』時間來炒熱戰鬥氣氛」。每支特寫動畫時長約為2秒,在SD角色進行動作時,通過掌握插入特寫動畫的時機,可以做到炒熱戰鬥氣氛的作用。因此,特寫動畫也可以說是「2秒時長的角色專屬PV」。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

第三種是「將動畫和遊戲緊密連結」。通過在戰鬥過程中播放動畫這一形式,可以起到強調本作的核心——「動畫RPG」的作用。另外,通過將劇情動畫和SD演出相結合,可以把劇情(動畫)和系統(遊戲)緊密聯繫在一起,更好地展現了《公主連結》的世界觀。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

為了實現這3種功能,《公主連結》在特寫動畫的製作上下了很大的功夫。其一就是「部件動畫」。所謂「部件動畫」,就是將立繪拆分成各種部件,通過運用動畫製作工具來達到與手繪動畫相同的演出效果。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

最初的預定是採用手繪來製作特寫動畫,但是在測試特寫動畫和遊戲的SD演出配合時,始終無法達到良好的節奏感。由於戰鬥時爽快的節奏感也是《公主連結》的重要賣點之一,於是這個問題成為了製作組無論如何都要克服的難題。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

首先想到的就是前作《公主連結!》(《プリンセスコネクト!》)中的連結爆發(UB)。這是一款由Adobe Flash開發的網頁遊戲,特寫動畫和SD演出都是部件動畫,戰鬥的節奏感非常好。更重要的是,由於需要的作畫張數更少,製作的速度和質量也有望提高。

而實際採用了部件動畫製作的特寫動畫在配合SD演出時的節奏感也更好,完全不用擔心降低遊戲體驗。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

另外,由於減少了作畫張數,而公司內部也對部件動畫的製作有一定的經驗,這部分的動畫製作可以完全由公司自己製作(不用外包)。由此,在方向性的意見交流上也變得更有效率,成品反饋與返工也變得更簡單。

除此以外,由於製作體制的變化,遊戲製作組增加了對於動畫的製作體制理解。在部件動畫的製作水平上也有更進一步的增長。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

特寫動畫的製作流程與經驗

接下來分享的是特寫動畫製作的製作流程,和其中使用的製作工具軟體。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

下面以《公主連結》半週年紀念角色 「似似花」的製作舉例。

在分鏡腳本製作前的討論會上,首先由遊戲策劃師給出演出的策劃案,然後由全體人員來討論諸如「特寫動畫從哪里開始在哪里結束」;「特寫動畫和SD演出要怎樣關聯在一起」;「連結爆發的整體上的色調和方向性如何」等一系列問題,最終達成一致。

以「似似花」為例,策劃師給出的演出策劃案內容是「通過製造自身的全息投影,將其實體化並複製之後投入戰鬥」。特寫動畫的部分選在製造複製體之前的過程。在此之上,為了忠於策劃案內容,決定了「似似花」的演出主要特色是「數字化的表現」和「製造複製體」。之後再決定整段動畫的整體色調,之後才進入分鏡腳本的具體製作。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

特寫動畫的分鏡採用視頻分鏡。這樣做的優點在於,製作時比較容易想像完成品的尺寸和動作,同時也不容易破壞演出的整體感覺。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

在製作分鏡腳本時,需要製作3種以上的方案,在其中選擇最能體現角色特點的一種。以「似似花」為例,當初實際上有相當多的方案,但在演講中只選擇講解了A、B、C三種方案。

最終選擇了C方案,理由如下:「讓人感到開掛一樣的數字化特效符合主題」;「由似似花立繪中的水晶得到靈感,而製作出的類似萬花筒效果」;「對SD演出部分的期待感很高」。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

「類似萬花筒的演出效果」最初是在製作分鏡時由導演提出的。諸如此類,對於製作方針和演出效果的建議,不僅僅由一線製作者提出,像是策劃師和導演等人的反饋也能提供一定幫助。

而通過在SD演出時也加上萬花筒的效果,也能與特寫動畫產生關聯性。此外,由於《公主連結》的遊戲流程是從左至右的,特寫動畫的最終畫面幾乎也都是要向右走的。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

製作分鏡腳本的流程稱為:「通過確立全體一致的認識,將連結爆發的演出統一在同一個世界觀之下」。

在製作原畫的過程中,首先要針對在整個特寫動畫中核心人物進行作畫。如上所述,由於特寫動畫運用的是部件動畫,原畫之間可以通過工具軟體進行補充完成。因此,原畫張數為4~7張,比一般的TV動畫要少。這樣也使得製作時能兼顧細節上的追求和完成速度。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

在原畫製作過程中,既能由多人分工完成截至上色的所有流程,也能由單人完成。像這樣,營造讓員工們能夠自由工作的環境,也關係到遊戲開發的速度。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

作畫監修則採用了TV動畫的製作流程。為了能盡力還原角色的魅力,需要一邊參考《公主連結》劇情動畫的設定資料,一邊確認「角色的表情是否符合性格」,「人物設計是否有失誤」等問題。

本作的角色五花八門,在作畫時,諸如眼線的線條寬度,眼部高光的畫法等等細節,都需要時刻注意。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

之後,就是在後續工作中極為重要的部件拆分。部件拆分需要根據分鏡,把原畫拆分成10~20個部件。在人物進行動作時,原本被手遮擋的身體部分也需要補畫出來,否則會出現身體缺少一部分的情況,為了使類似錯誤不至於無法挽回,必須格外注意。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

通過這種原畫流程,可以達到「在節約作畫張數的同時,保持高品質的量產」的效果。

在動畫製作過程中,特效和背景層的製作也必須配合進行。為此,出於「網格功能優秀且可以進行靈活的動畫製作」,「在攝影流程時有用到,為了免於轉換時有畫質損失」等理由,採用「Adobe After Effects」軟體。

在這個過程中,首先要對完成的原畫部件進行動作設定。具體做法是把原畫進行組合,再使用平拉推移等運鏡方式,逐步增加部件的動作。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

在動作設定的過程中,尤其需要注意的一點是進行視線誘導。由於特寫動畫只有短短2秒,如果速度太快會使得動作不明所以。因此,需要針對比較顯眼的臉部和武器部分進行調整。

此外,為了防止部件移動時產生機械運動的感覺,動作的變化和幅度,要儘量模仿普通動畫的感覺。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

接下來,進行特效的製作。以「似似花」為例,製作的主題「有數字化感覺的紋理」和「萬花筒」,因此需要在Adobe After Effects中尋找這種感覺的素材。

由於在角色立繪中有散落到各處的水晶碎片,因此為背景加上了碎裂的動畫效果;考慮到角色的特性,又製作了全息投影的效果和製造複製體的特效。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》的特寫動畫中,也使用了很多手繪的特效。為了實現類似普通動畫的效果,主要的特效貼圖是由手繪完成的,3D的粒子效果的運用只取其部分精髓。

特別是武器特效,為了能給人留下更深的印象而採用了區分度更高的作畫。特效的消失效果也並不是單純的淡出,而是碎成一片一片,越來越小。通過這種表現可以使整體看上去更華麗。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

總結下來,動畫製作過程中最重要的有3點:「重視直觀性和聯繫性」;「演出效果儘量貼近TV動畫」;「演出整體要凸顯人物特色」。

最後的步驟是攝影。在這個階段需要對動畫整體進行調色和特效調整,同時也要改進人物的線稿,做出接近TV動畫的感覺。另外,有時會在攝影過程中加入特殊的表現手法,例如,在有海的場景加上逆光的表現和鏡頭光暈;配合角色的運動加上圓形或三角等幾何圖形的運動的運動圖形設計(Motion Graphic)。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

在特寫動畫里的全新嘗試

在《公主連結》中,在「公主形態下」發動連結爆發(UB)時加入了特殊的特寫動畫。企劃設計公主形態時的方針,是「比以往的特寫動畫更豪華!更像TV動畫!」。對此,也許將在遊戲系統層面上對特寫動畫進行全面改動。

為了將公主形態的特寫動畫與過去的特寫動畫作出區別,首先被提出的方案是消除SD演出和特寫動畫之間的界限。通過實現兩者間切換的無縫化,增加了前所未有的特別感,實現更具沉浸感的遊戲體驗。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

這帶來的難題是,在以往的遊戲系統上進行SD演出和特寫動畫的來回切換會對手機性能造成極大負擔,進而影響遊戲體驗。但是,通過把所有演出都合併成一支動畫,問題就迎刃而解,甚至連以往的演出限制也沒有了。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

此外,為了展現出超越以往的特寫動畫的華麗程度,在動畫製作時,增加了包括背景在內的可動要素,使場面規模變得空前宏大。鏡頭的移動也擴展到各個方向,展現出前無古人的動作性。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

同時,為了使特寫鏡頭和劇情動畫產生一體感,特寫鏡頭也採用了與劇情動畫相同的演出和攝影效果。由此,兩者緊密結合,產生了遊戲重現了劇情動畫,劇情動畫也同時重現了劇情的效果。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

像這樣全新的嘗試也給整個公司帶來了影響。以往的SD演出和特寫動畫的分鏡都是分別製作的,但是公主形態的分鏡卻是同一個,兩者的製作也是並行的。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

這種製作方式帶來的最大區別就是,SD的動作和特寫動畫和動作通過Adobe After Effects相互結合,再加上手繪的特效與編輯,使得兩者的演出效果沒有任何違和感。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

但是,這種新的嘗試,也帶來了諸如「如何找到戰鬥的速度感與動畫長度之間的平衡」,「遊戲系統上的各種不便」等問題。

前者通過在Adobe After Effects上對重視速度感的分鏡進行細節調整可以解決。例如,在公主可可蘿的動畫演出中,SD演出和特寫動畫的連接部分,通過用一棵樹橫穿畫面的鏡頭實現了鏡頭間的自然切換。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

在遊戲系統上的不便,包括「無法使用關閉特寫動畫功能」,「對於影子敵人的特寫動畫是否關閉」等問題。對於這些問題,分別採用了截選動畫中最精彩部分播放,和另外製作影子角色的動畫等手段加以解決。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

總體來看,「《公主連結》的最終目標,是為玩家們呈現富有魅力的角色們」。

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫

文章來源:

https://www.4gamer.net/games/387/G038749/20200905006/

遊戲葡萄編譯整理

原神|我們把公司做死了|萬國覺醒拒絕聯運

技術中台|黑神話:悟空|二次元遊戲困局|發行大困局

《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫來源:kknews《公主連結》互動設計師:如何用TV畫手法製作2D技能動畫