《超異域公主連結☆Re:Dive》所追求的目標 動畫 RPG 的遊戲演出製作事例線上講座紀錄

(本新聞經日本 4Gamer.net 同意授權轉載) 2020-09-07 16:23:27 原文出處

  日本最大規模電腦娛樂開發者會議「CEDEC 2020」的第 3 天,2020 年 9 月 4 日特別舉辦了「《超異域公主連結☆Re:Dive》所追求的目標,動畫 RPG 的遊戲演出製作事例 ~將電視動畫與遊戲演出,融合兩種製作手法誕生的切入動畫演出~」為主題的講座。
 
  • image
 
  主講者是來自 Cygames 互動設計團隊的工藤瑛子,分享了時下知名手機遊戲《超異域公主連結☆Re:Dive》(以下簡稱《公主連結 R》)遊戲裡切入動畫演出所使用的製作手法。
 
  • image
 

動畫與遊戲的多媒體混合作品必須面對的課題

 
  《公主連結 R》的其中一大特徴,就是伴隨角色使用必殺技「Union Burst」出現的切入動畫演出。在這些嬌小的 SD 角色亂戰過程中切入的動畫演出,讓戰鬥上有稍作喘息的空間與更多視覺上的衝擊感。
 
  • image
 
  工藤表示,類似《公主連結 R》這種兼具動畫與遊戲的多媒體混合作品,都會面臨動畫與遊戲製作上的體制不同這項主要課題。動畫通常在數個月~半年前確保製作上的行程,根據最初決定好的樣式持續製作完畢。另一方面,遊戲則必須用到各種短期與不定時出現的新演出,或者按照玩家回饋針對演出內容作出適當調整,會產生回顧製作樣式以後進行重製作業的情況。
 
  工藤接著說明,因此他們在為《公主連結 R》導入切入動畫演出的時候,採用 3 種途徑克服作業上的困難之處,同時也是接下來講述的 3 個主題。分別是「將動畫演出置入遊戲中面臨的課題與解決方法」、「採納手繪與部件動畫,混合 2 種手法的製作方式與流程」、「將動畫演出與 SD 角色的演出(以下,SD 演出)之間協調出統一性的相關知識」。
 

《公主連結 R》的切入動畫是指?

 
  工藤提到,《公主連結 R》切入動畫主要負責 3 種不同的職責。第 1 點就是「將角色魅力以最大限度呈現出來」,把原本嬌小的 SD 角色無法分辨的表情與肢體表現以全畫面的方式顯示,藉此讓玩家能夠喜歡上這些角色。
 
  • image
 
  第 2 點是「在 “2 秒” 的時間內炒熱戰鬥場面」,每個切入動畫完成的進行時間大都是 2 秒左右。SD 角色交戰的過程中,在適當的節奏下出現切入動畫演出,配合該名角色固有的行動與 SD 演出豐富整個戰鬥體驗。因此這些切入動畫,都特別以「2 秒內的角色 PV」作為製作上的重點意識。
 
  • image
 
  第 3 點是「將遊戲與動畫串聯起來」。在激戰之中能夠看到動畫播放,是為了強調本作屬於一款「動畫 RPG」的特性。因此,這些能夠呼應主線劇情的 SD 演出,都可說是忠實連結了劇情(動畫)與系統(遊戲),背負著展現《公主連結 R》世界觀的重要使命。
 
  • image
 
  為了順利達成這 3 個目標,《公主連結 R》的切入動畫製作上充滿了相當多元的技術應用,其中 1 項就是「配件動畫(パーツアニメ)」。透過配件動畫,將插圖裡面的每個部位予以配件化,再利用相關工具移動每個配件,是一種能夠展現出宛如手繪動畫成效的手法。
 
  • image
  • image
 
  據說在當初,《公主連結 R》預定是要使用手繪的切入動畫。但是在對照試作後的切入動畫與遊戲的 SD 演出,發現了令人感覺節奏感不合的問題。讓玩家感受舒適的戰鬥節奏,是《公主連結 R》最為不可或缺的遊戲要素,也因此無論如何都必須克服這項課題。
 
  • image
 
  在當時所找到的解決方法,就是本作前身《公主連結!(Princess Connect!,プリンセスコネクト!)》的「Union Burst」。由於《公主連結!》是透過 Adobe Flash 進行開發的網頁遊戲,切入動畫與 SD 演出全部都是由上述的配件動畫來讓角色動作,也不會影響到戰鬥上的節奏感。這項作法同時還擁有能夠以少量的作畫張數完成作業,可望擁有更佳的製作速度與品質提升等優點。
 
  最後《公主連結 R》的切入動畫演出決定以配件動畫的方式來呈現,也就能夠製作出與 SD 演出的節奏互相契合,且不妨礙遊戲進行的愉快觀賞體驗。
 
  • image
 
  此外,由於所需的作畫張數減少,公司對於配件動畫製作上的相關知識與所見所聞累積到一定程度以後,得以將原先委外的這項作業改為公司內部進行製作。因此在製作方向性的分享與意見疏通都變得更加容易,之後發行或是重新調整等動作都可以更有時間效率的方式實現。
 
  同時由於製作體制上的變化,讓公司進一步提升對於整個動畫製作體制的理解,並且擁有配件動畫應用在遊戲製作上的相關知識獲得完善普及等諸多優點。
 
  • image
  • image
 

切入動畫製作的作業工程與相關知識

 
  接著工藤介紹了切入動畫製作上的作業工程與使用工具。
 
  • image
  • image
 
  具體的作業工程是以《公主連結 R》半周年紀念活動登場的角色「似似花」作為實例介紹。
 
  分鏡製作前的開會中,首先從設計者展示的設計原案裡面進行討論,針對「哪裡到哪裡可以放入切入動畫」「與 SD 演出之間呈現什麼樣的關聯性」「Union Burst 整體,決定使用何種色調・方向性」協調出整體想要的共通形象。
 
  以似似花的情況來說,設計者所提出的設計原案內容為「產生一個自己的全像投影,實體化以後成為自己的分身作戰」,所以決定在全像投影變成分身以前的過程都以切入動畫的方式呈現。並且以原案所提出的「數位感視覺表現」與「產生分身」作為主題,加入了似似花單獨的演出。接著決定演出開始到切入動畫結束的整體色調,整體形象成型以後進入分鏡製作的環節。
 
  • image
 
  切入動畫的分鏡是以動畫分鏡的方式進行製作。據說使用這種方式,能夠更加容易掌握實際的時間長度與動畫完成樣貌,相當有助於讓動畫製作控制在預期的方向。
 
  • image
 
  分鏡的製作上會提出 3 個以上的原案,最後從中選擇出最能夠展現角色個性的方案。以似似花為例,在當時提出了非常多的原案,本次講座則從中介紹 A 案,B 案,C 案等 3 種不同的發想。
 
  最終則是以「讓人感受作弊能力的數位化特效與素材」、「從似似花立繪的水晶獲得啟發,類似萬花筒的動畫演出」、「讓人擁有想看到回歸 SD 演出時的期待感」等原因作為理由,選擇了 C 案。
 
  • image
 
  據說 “萬花筒的動畫演出”,是從製作分鏡的時候由總監方面提案的點子實現的內容。類似這樣,製作整體上的題材與動畫演出的發想由作業方提出架構,並根據設計者與監製方面的反饋取得更進一步的補充。
 
  並且,在角色的 SD 演出也加入了萬花筒相關的要素,營造出能夠呼應切入動畫的關聯性。另外,由於《公主連結 R》是從左到右進行的遊戲,切入動畫的最後環節基本上都是以向右方收尾的形式為主。
 
  • image
  • image
 
  工藤將分鏡工程所扮演的職責,歸納為「為了確立整體的共通形象,將 Union Burst 收納進同 1 個世界觀」。
 
  原畫製作過程中,首先會根據分鏡繪製出整個切入動畫精髓的角色部分。如同前面所提到的,切入動畫的製作會用到部件動畫這個手法,在每個原畫與原畫之間都能透過相關工具進行填補。也因此原畫通常為 4~7 張,比正常的電視動畫張數還少。還能夠維護細部的品質堅持與製作速度,取得兩全其美的成效。
 
  • image
  • image
 
  原畫的作業流程有時是由同 1 人負責到底,偶爾也有可能是其他人負責最後的完成階段。打造出讓職員能夠以靈活的身段從業的環境,也是影響遊戲開發速度感的一大主因。
 
  • image
 
  作畫監修的部分,則是應用了電視動畫製作上的相關知識。以《公主連結 R》主線劇情動畫的設定資料做為參考,逐步完成「是否擁有符合角色形象的表情」「設計上是否有落差」等確認事項,確保角色的既有魅力不會因此受到影響。
 
  本作的每個角色外型都相當不同,僅只是數毫米差距的眼瞼大小或強調表現的方式,都要細心注意是否符合正確的作畫。
 
  • image
 
  接著進行後續作業上最重要的部件分配。部件分配以分鏡為參考,將原畫分割成 10~20 個部件,並要確認在部件移動的時候,是否會發生隱藏在手腕的肢體沒有畫到這類無法重新修正的事態。
 
  • image
 
  完成原畫作業所帶來的成效,可歸納為「能夠節省原畫張數,並且以保持品質的方式進行量產」。
 
  進入動畫工程的部分,同步進行特效與背景的製作。在此環節基於「細分(mesh)功能相當優秀,能夠製作出柔軟的動畫質感」、「後續進入拍攝程序仍會繼續使用,減少工具轉換中間的資源遺失」等理由,選擇「Adobe After Effects」作為使用工具。
 
  在作業過程,首先為完成的原畫部件賦予動態途徑。具體上的流程為匯入原畫,架設頂部或遠景,左右移動等整體相機視角,再追加部件動畫。
 
  • image
 
  動態化作業的過程中,特別需要注意的是視線的誘導。切入動畫演出僅只有 2 秒的時間,如果動作太快會讓觀看的人摸不著頭緒。為此必須特別另下功夫,針對臉部或武器等較容易注目的部分,將動作變得更加直觀好懂。
 
  此外,為避免部件呈現出機械性移動的不自然感,也在動作變化上增加幅度,藉此呈現出更接近動畫演出的表現。
 
  • image
  • image
 
  接著進行特效的製作。似似花的例子中,是以「數位化的材質感」與「萬花筒」作為製作主題,根據這項目標利用 Adobe After Effects 製作所需的素材。
 
  以角色立繪中散落周遭的水晶碎片為靈感,做出背景出現碎裂的特效,以及全像攝影的演出中產生自己的分身等,考慮角色的特性過後著手製作這些特效。
 
  • image
 
  《公主連結 R》的切入動畫採用了大量的手繪動畫特效。這麼做的主因還是為了追求動畫應有的感覺,主要的特效都盡可能以手繪的方式製作,至於 3D 動畫的粒子表現,則大多當作添加風味的配料運用。
 
  特別是武器的特效,作畫上特別講究擁有長期停留在玩家視線的識別性。特效的消失方式也不只是單純的透明化淡出,而是採取細微飄散,碎裂變小的特效豐富視覺體驗。
 
  • image
  • image
 
  工藤綜合以上所述,指出動畫工程中最重要的 3 個重點分別是「重視簡單易懂的識別性與關聯性」、「力求電視動畫般的演出內容」、「重視每個角色特性的演出內容」。
 
  最後進行的就是實際拍攝了。作業中會進行色調或畫面整體的特效調整,角色線條上的潤飾,目標製作出電視動畫般的影像感。此外,也能夠在拍攝之中嘗試加入一些特殊表現。舉例來說,海邊的場景可以加上剪影表現與鏡頭眩光(Lens Flare),也可以配合角色動作加入圓形或三角形等,讓特定圖形移動的動態素材(Motion graphics)。
 
  • image
  • image
  • image
 

進行嶄新嘗試的切入動畫表現

 
  《公主連結 R》裡面,在「公主型態」發動「Union Burst」的時候會有特殊的切入動畫演出。關於公主型態的演出與企劃,當初是以「比起以往的切入動畫都要更加豪華!更像動畫!」作為製作概念,據說因此曾經從系統層面大幅度重新審視切入動畫的製作方法。
 
  公主型態的切入動畫為了與以往的成品作出差別,首先提案的是徹底打造出 SD 演出與切入動畫的無痕轉換境界。這兩個部分若能以無縫接軌的方式互相切換,可以帶給玩家更加獨特的感受與投入感。
 
  • image
 
  另一方面也存在必須克服的課題。若是按照以往的系統,將 SD 演出與切入動畫演出交互播放會增加用戶端的負擔,也會與原本追求遊戲流暢度這項目標有所出入。因此最後的決定是將切入演出全部整合在同 1 個動畫裡面,也能免除目前為止所有演出存在的限制。
 
  • image
 
  再加上與過往的切入動畫相比,更加提升了演出層面的豪華程度,連背景都包含在動畫演出裡面,呈現更大格局的製作範疇。相機視角也能夠在空間內縱橫無盡地自由移動,誕生出過往所沒有的動作感。
 
  • image
 
  並且,為了讓切入動畫能夠與劇情動畫互相呼應,演出或拍攝效果都特地採用與劇情動畫相同的方法。藉此讓兩者之間產生一定的連結,打造出讓玩家在遊戲中看到劇情動畫的再現,觀看劇情動畫的時候也能聯想起戰鬥過程的遊戲環境。
 
  • image
 
  這樣嶄新的嘗試,同時也為公司內部的製作體制帶來影響。在這之前,SD 演出與切入動畫是以不同的分鏡進行製作,開始製作公主型態以後都是採取相同的分鏡,接近同步進行製作。
 
  • image
 
  另外則是,製作上與過往感受最不同的地方,就是 SD 人物的動作與切入動畫的動作必須以 Adobe After Effects 進行結合,為了讓兩者的演出完成接近天衣無縫的連接,必須加入手繪特效進行編輯這點。
 
  • image
 
  只不過,全新的嘗試同時也面臨到「戰鬥的速度感與切入演出長度的調和折衷」、「系統與性能面的障礙」等問題挑戰。
 
  前者的部分,是投入重視節奏感的場景轉換,利用 Adobe After Effects 完成細部調整獲得解決。例如在公主可可蘿的演出中,在 SD 演出與切入動畫的轉換過程中添加橫向穿越樹木陰影的過程,實現自然的場景轉換。
 
  • image
 
  系統與性能方面的困難之處在於無法使用關閉切入動畫的功能,或是角色以闇影型態(シャドウ)作為敵方登場的切入動畫該怎麼辦。這部分的處理方式,前者是從演出中最適當或最熱烈的部分開始播放,後者則另外準備作為敵方登場時的動畫。
 
  • image
  • image
 
  主講者工藤最後回顧開頭所述,提及切入動畫演出在遊戲中扮演的 3 個重要職責,並以「《公主連結 R》製作切入動畫的目標,是希望讓角色魅力能夠確實傳達到各位玩家心裡」為本次講座作結。
 
  • image
 

 

(C) Cygames, Inc.

新聞評語

載入中...

相關新聞


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】