【CEDEC 23】《緋染天空 Heaven Burns Red》1.5 周年演唱會場景製作講座

(本新聞經日本 4Gamer.net 同意授權轉載) 2023-09-03 10:00:01 原文出處

  2023 年 8 月 24 日開始的遊戲開發者會議「CEDEC 2023」,舉辦了一場名為「Heaven Burns Red - 展望未来的視覺開發 -」的課題講座,由 WFS 的竹俣太樹上野 亮,Graphinica 的小宮彬広堀内 隆佐佐木達朗等 5 名成員解說關於《緋染天空 Heaven Burns Red》(iOS / Android / PC,以下 HBR),WFS 與 Graphinica 從開始共同研發直到日前迎接 1.5 周年公開的演唱會場景「再見的速度(さよならの速度)」,各種在製作過程中採用的技巧與原理。
 
  • image
  • image
 

最好的影音品質就是對玩家最佳的回饋,發起終極演唱會製作的來龍去脈

 
  演講首先由竹俣講解 WFS 與 Graphinica 雙方是如何走到合作的經過,並且決定開始製作這次極致製作效能的演唱會場景。
 
  竹俣認為「HBR」最具優勢的武器便是麻枝 准筆下創作的劇情體驗,在此基礎之上創作出各具魅力的角色,精緻的遊戲美術,以及麻枝獨有的音樂風格都是不可或缺的項目。在這其中特別以「美術」和「音樂」作為本次製作的焦點。
 
  從過去竹俣個人就相信一種可能性,就是當「HBR」指標性的美術與音樂結合適當方法包裝後推出,就能從中看出其他作品中找不到的獨特視聽體驗。並且從商業的角度來看,音樂和美術散發出的魅力正是本 IP 的優勢所在,倘若利用 MV 與演唱會影片的方式順勢進行媒體方面的宣傳,可望持續獲得更高的關注度。
 
  如上所說,他不僅認為劇情方面是堅若磐石的競爭優勢,也必須透過製作演唱會影片的方式更加推動多媒體社群的關注度。竹俣個人的希望就是將麻枝樂曲的魅力分享給更多人知道,否則就太可惜了。
 
  • image
    由於自己深受 90 年代的音樂元素影響,竹俣相信故事、音樂、影片都能帶給一個人的人生與價值觀相當程度的影響
 
  為了將能夠深印人心的演唱會影片在「HBR」獲得實現,從遊戲推出之前的數個月前便開始著手製作,當時的成品已經是以 2D 元素為主的演唱會影片,此時與 Graphinica 的協商便是現在一切的開端。
 
  在製作當中,有人不禁擔心這類演唱會影片,在大多數遊戲的地位通常是以一種回饋的方式提供玩家觀賞,可能有成效不彰的隱憂。對此疑慮竹俣則認為「那就把這個影片打造成最佳的回饋吧」並以此為目標。
 
  • image
  • image
  • image
 
  努力運用主線劇情背後有限的資源,傾全力進行製作的結果,現在甚至還發展出可遊玩樂曲的演唱會模式(節奏遊戲),還有定期舉辦歌曲的人氣投票活動。這些都可視為讓廣大的玩家認同這不只是一部宣傳影片,確實發展成一個具代表性的遊戲要素了。
 
  • image
  • image
  • image
  • image
  • 這些表演都是在 2D 美術的基礎上加入特效和動畫演出,成為融合本作美術與音樂主要兩大特色的遊戲要素
 
  值得一提的是遊戲内的表演「She is Legend」是以樂團的方式演奏,其影響力不僅是在遊戲內,甚至還發展成實體演唱會的巡迴演出,獲取了廣大粉絲的支持。
 
  • image
 
  但是官方此刻便開始思考,如果能用 3D 製作成 3D 藝術品的話那更是求之不得了。可是,要將樂團具有的特性製作成 3D 演出首先就得面對眾多的課題,從動畫師的角度來說包括樂器的干涉與演奏的細節,要處理的問題可說是不勝枚舉。就在感覺找不到擁有共同製作理念的公司逐漸想要放棄的時候,Graphinica 便成為了打破這一困境的救星。
 
  • image
  • image
  • image
    雙方就在這樣的互動下,開始製作「HBR」終極演唱會的影片內容
  • image
    竹俣當初所描繪的關係圖如上所示。不論是真人演出的那種臨場才能感受到的體驗,還是過去 2D 演出當中
    所秉持的泛用性與美術魅力。本次的終極演唱會都要兼顧這些品質與情感表現,針對各方面進行挑戰
 
  在此當中,本次聚焦在「終極演唱會」製作之際,WFS 與 Graphinica 便在中途發覺應該以「像是觀看圖片會動的表現,提升動畫表現的觀賞價值」作為主要目標。
 
  這點聽在素人耳裡都能感覺是一個相當嚴峻的門檻。竹俣則認為若能成功實現,將成為投下業界的一枚震撼彈,並且將製作範圍敲定為 1.5 周年所釋出的活動。
 
  • image
  • image
 
  結合 1.5 周年為前瞻的終極演唱會所準備的 PoC(Proof of Concept:意指為了確認技術與發想是否能夠實現,所準備的一連串檢驗作業),並且也嘗試從主線第四章前篇・後篇的影片當中找出能夠打動觀眾的概念。看著作業項目來回進行反饋與最佳化(ブラッシュアップ)的過程,的確發現把握到了正確的製作方向。
 
  • image
 

將 2D 美術提升到 3D 動畫階段上的不斷嘗試

 
  接下來由上野來解說,此時是如何將原有的 2D 美術提升到 3D 動畫的階段。製作上的大前提,便是承襲角色設計上的細部特徴,只要有符合該畫面最合適的表達方式,即使產生不完整的結構也好,不需要太執著使用常識性的表現。主要的描寫重點都會擺在,是否能讓看到這一幕的玩家都對此直接有了情感上的變化。
 
  • image
 
  在這時上野就以一張遊戲美術作為解說範例。即使是以清淡的水彩筆觸作為基調的作品,由於是夕陽的時間帶因此拉高了光影的比例,並以更高一階的描寫將視線誘導至每個角色的身上。
 
  • image
 
  從背後的手法從色彩和光影的面向開始分析。色彩上盡量不直接使用白色與黑色,而是讓光影的顏色都維持既有的色調。並且光影的部分將景中圍欄的明亮度下降作為緩衝,強調逆向夕陽而行的動作,加強角色明暗的對比。
 
  畫面上還加上了不是來自光源方向的隨機陰影,企圖表現出一種奇趣性(也可說是幫助觀眾找到情緒)。
 
  • image
  • image
    兩者都有背後想表達的重點,並且連同所使用的色塊都一併解說
  • image
  • image
    特別注重立體感的臉部輪廓與柔軟的陰影形狀、邊緣的水彩境界、經常同時使用暖色系與寒色系、
    使用色差的目的、通過稜鏡的光線折射,都是各種實務上使用的 2D 美術要素
  • image
  • image
    實作例子裡面也介紹了這方面的順序與內容。製作中必須在每一個工程和編劇或企劃進行溝通,
    互相交流彼此對成品的預期樣貌謹慎進行製作
 
  上野表示,把細節講究到極致才能製作出 1 張「HBR」遊戲插圖,也代表每 1 張的製作上都要花費相當的工時。如果想呈現出角色不易被人發現的細膩之處,勢必得準備更多張數的美術圖,隨之而來的時間成本也變高了。
 
  就在理想與現實的妥協當中掙扎之際,他們想到的對策是只要製作有 2D 視覺效果的 3D 模組,使其成功運行就能得到接近 2D 美術表達出的演出效果。在與 Graphinica 洽談、委託之下開始了這部分的製作。
 
  • image
 
  首先著眼的部分,是從既有的 3D 模組重新製作後得出的 3D 製作成品。從髪色與陰影的上色方式等大部件開始更改,並以加入注釋的方式傳遞每個環節必須掌握的細節。人眼在觀看 3D 上會得到與 2D 美術不同的視覺平衡,起初上野也認為「我們在這方面追求 2D 美術特質的這種白日夢想法,確實對合作方提出了相當無理的請求」
 
  針對每個部分進行縝密交流,不斷作出調整以後,逐漸有了接近 2D 視覺的初步效果。講求角色神韻的部分是在螢幕截圖上直接修改,麻煩對方按此回到上一步再度修正的傳接球方式來做交流。
 
  • image
  • image
  • image
  • image
 
  在模組持續最佳化的過程裡面,也另外開會檢討關於角色動作(motion)的可動範圍,影片也是根據每個分鏡來作調整。只不過,製作影片的情況下即使在特定分鏡進行塗改,也只是讓 3D 模組在單獨分鏡有了想要的視覺效果。舉例來說,像是頭部傾斜與當時會產生頭部向下的動作,視線觀看旁邊時所呈現的眼睛外觀,都必須逐個完成符合意境上的調整,才能將這些平行分工的所有工程順利融合,成為最終決定的動畫成品。
 
  • image
  • image
 
  在 3D 模組上實現了想要的 2D 效果,便開始正式進入 3D 開發的作業。在這之前先以一張 2D 靜畫(第四章前篇的一幕)作為基礎,首先就是將其進行影像化,並且在從中篩選出哪些部分正是構成「HBR」主要美術所需的核心要點。
 
  • image
  • image
  • image
  • image
  • image
 
  接下來則是由小宮來解説 Graphinica 方面對此不斷嘗試除錯的過程。小宮在開頭表示,想要將 2D 的視覺感觸以 3D 的方式實現絕非簡單的事情,必須經過相當漫長的努力,並介紹了本次開發中挺力相助的 2 名創作家。 
 
  • image
    Ignacio・Mullor・Vich 是負責視覺合成(composite)到渲染(rendering)中間的構築,
    Remy・Torre 則是負責開發著色器(shader)的部分
 
  首先小宮便講述,自己與 Ignacio 共同使用 V-Ray for 3dsMax 來檢視遊戲模組,並使用 Fusion 這個視覺合成軟體進行測試。使用 Fusion 的理由因為這是以節點為基礎的合成軟體,能夠更順利實現想挑戰的內容。
 
  • image
  • image
  • image
 
  如範例圖片上所看到的,大家會發現這部分的轉換與原圖存在一定的差異。從這裡就是竹俣與上野方才解説過的部分,雙方對此展開細節調整的反饋與最佳化。
 
  像是必須找出哪些才能引出「空靈的氣質」。以及「玩家心中所認為的『HBR』」是一款什麼樣的作品。談及具體的作法就是調整光與影的色調和投射位置,筆觸的感覺來找到存在本作裡面的感官標準,也曾經將上野創作過的每個圖層逐一分解進行研究。
 
  • image
  • image
  • image
  • image
 
  在工程中盡可能去找出心中最接近遊戲主美術圖的表現方法,最終到達的成品便是以下圖像(講座中是以動畫來介紹)。
 
  • image
  • image
  • image
    以補色與色的渲染,高光的感覺做為主要調整項目
  • image
  • image
    這部份便是忠實呈現「HBR」作品色調,修正後的檔案。確實有了讓人直接目視出「HBR」遊戲插圖一般的美術特色
  • image
    前後比較以後,也就能區隔出每一件作品背後的美術意義
 
  在雙方取得共識後開始預訂模組的製作,並在此時進入更加修飾作品視覺的著色器(shader)開發工程。據說此時想先完成的挑戰課題便是「表現出如同手繪筆法的高光表現」。小高表示,在 3D 所提供的擬真高光無法貼近 2D 美術的意境,因此試過了許多方法。首先想到的就是「先直接轉換手繪的材質試試看」。為實現此目的所採用的技術便是「Parallax Occlusion Mapping」。實際使用過後,雖然成功將材質轉移到模組上,然而也就只是將材質完成了嫁接處理,看起來仍有待加強的部分。
 
  • image
  • image
  • image
  • image
  • image
 
  重新調查 2D 美術所具有的特質,小宮察覺到頭髮的每一片邊緣高光都要加長,並希望能夠成功實現這個目標。也因此加入了新的任務項目。
 
  • image
 
  為了成功完成這項任務所使用的便是 edge distortion(エッジディストーション)功能。目前公開的動畫已經成功將邊緣部分的高光拉長。關於内部情況具體如何,就是將白黑的 distortion map 直接塗在邊際部分的 UV,並在此插入材質就能使其順利實現加長的效果。並且根據 RGB 遮罩的劃分上讓合成上也能更加順利調整色彩。就這樣順利完成了這項課題。
 
  • image
  • image
  • Parallax Occlusion Mapping 的軟體開發目的似乎是為了調整眼睛的項目
 
  接著小宮進一步挑戰的課題便是「想要控制動畫臉部的陰影表現」。小宮表示,建模成品(建模化的 3DCG)想表現出如同動畫般的陰影是非常難的技術,並且在實務上也就只能辦到把每個分鏡逐一用後製的方式來切割這些遮罩。
 
  面對這項課題,小宮首先嘗試了「根據預定的角度切換材質,讓陰影本身以動畫的方式移動」。但是以動畫的角度來說這無法成立,另外起草了新的任務希望實行「以切換素材的方式進行疊放」的點子。然而這個嘗試也是以失敗告終。
 
  • image
    首先實驗只要變成上述字母的角度陰影也會自動切換的方式,
    測試階段是以簡要的旋轉茶壺,在茶壺經過字母的設定角度便會自動切換材質
  • image
    使用圖層疊放的手法,雖然能夠比起前者的切換材質看起來更加平順,但也會看到相當不自然的感覺
  • image
    結果上來說兩者都以失敗告終,必須從頭來過
 
  在波折不斷的航行下尋找到控制陰影的手段,便是在網上找到的「Distance field interpolation」。這個手法是將陰影以多段描繪的方式收束在同一個材質以後完成 Blending 的產物,團隊也為此挑戰使用「2D Morph Distance field interpolation」進行製作。
 
  • image
  • image
  • image
  • image
    利用「2D Morph Distance field interpolation」製作出的成果,確實可以只靠單一材質
    就完成不只是左右變化,還有上下變化的控制。並且這個作法的另一特色是可不依靠光源在任何環境下採用
  • image
  • image
  • image
    所有努力融合後誕生的人物模組
  • image
  • image
    在柔白的濾鏡加持之下,散發出令人歎為觀止的「HBR」氣息
  • image
    據說這種空靈美感的濾鏡,真面目就是特殊形狀的 7 色稜鏡所呈現的相機效果。是在「HBR」作中隨處可見的視覺效果
 
  採用 2D 美術與 3D 開發技術,終極演唱會影片製作過程的中繼站,也就是第四章後半所播出的影片,則是由竹俣出面解說。
 
  • image
  • image
  • image
  • image
  • 第四章後半的開頭動畫冒頭。這個動畫並沒有任何台詞,而是一種進行中的場景描述
 
  竹俣認為,這種行進間卻沒有任何台詞的場景,為何是以這種方式表現,不外乎是想將重點放在角色擁有的苦惱與脆弱,人類如同糾葛般複雑的心情。若要進一步宣傳,這種將純粹的靈魂以抒情並且有機物一般美麗描寫的手法正是「HBR 影像表現的存在證明」。為了將這股靈魂也注入今後製作的終極演唱會畫面,這裡的確是他們亟欲獲取補給的中繼站。
 
  • image
 

實際與設置舞台和照明設備的專家交流,打造出真實畫面演出的終極演唱會

 
  播放本次的演唱會影片成品以後,竹俣表示想要透過本次的演唱會「孕育出 HBR 全新擁有的強處」,為此目標嘗試的項目就是「追求 HBR 的作品風格」與「和音樂愛好家接軌」。
 
  • image
  • image
  • image
 
  竹俣對於「追求 HBR 的作品風格」,除了認為必須嚴守以纖細筆觸和清淡色彩的作品原則,同時也要將其繼續打磨光亮,創造出更進階的獨創性。「和音樂愛好家接軌」,則是希望能夠將客層打進平常不玩遊戲,喜歡音樂的人也有機會接觸本作。考量至此,追求真實性是不可或缺的重點,也因此本次取得了芬達樂器的許可,在本次製作的演唱會影片中使用該公司的吉他與貝斯。
 
  • image
  • image
  • image
  • 今後也希望能夠爭取獲得鼓的使用許可
 
  只要滿足這些必須講究的要點,就可望讓本作昇華成更上一層樓的 IP。也因此需要徹底堅持製作理念與原則,製作出本次的終極演唱會。
 
  從這裡開始,便是堀内與佐佐木共同針對終極演唱會,畫面製作的過程來進行解說。
 
  • image
    首先以簡單的層級圖介紹演唱會的場景製作內容。大致可分成整體設計,DCC(角色動畫),
    使用 UE5 進行 BG 與舞台照明等製作,將這些平行製作的專案統整過後進入最終調整
 
  這裡就由堀内來講解舞台、照明、音響等整體設計上的內容。Graphinica 方面為了講求真實性,特別找來了實際籌畫舞台活動的製作人進行合作。
 
  製作上採取和一般動畫製作上相同的概念,先收集參考圖,接著運用 3D 來做出暫定的樣品(Mock),接著便請到有實務經驗的舞台設備、音響、照明等各種專業人員參加,進行更加接近現實舞台表演的修正工程。
 
  • image
  • image
    據說製作中是和舞台設備的專家共同研討,同時在軟體上進行位置和尺寸的調整,
    同時也根據音響器材的專家意見設置相關物件
  • image
  • image
    從製作好的草稿模組中取出實際比例的三面圖為標準,接受照明專家的修正
  • image
  • image
  • image
  • image
    將監製給出的照明圖面為基準,使用 UE5 進行照明配置。本次並不會因為每個分鏡特別強調照明,而是以實際演唱會規格,
    按照每首歌的不同來設計、操作照明。隔著一定距離觀賞,就會發現和真的演唱會是相同的照明方式
 
  接著進入製作 Pre Visualization(以下,Previz)的部分。本次使用的是 Unreal Engine 5(以下,UE5),選擇 UE5 的理由,是可以在現實時間內實現時間軸與空間的同時編輯,並且與 DMX 之間有一定的親和性因此選擇使用。
 
  • image
  • image
  • 使用 UE5 的好處,就是能夠在動作捕捉收錄過後馬上進入 Previz 的作業,而且隨時都能加入新的鏡頭。還可以按照藍圖
    實現大量配置的可能,只要使用為了本次所製作的鏡頭寫出工具,便可以在 Previz 完成 FIX 後直接分享所有的鏡頭資料
 
  佐佐木表示,使用了 UE5 便能在 Previz 完成後進入動畫工程作業的部分,也組織了更有效率的層級分工。
 
  接下來,由佐佐木針對動畫工程的部分來補充說明。動畫工程收到來自 Previz 的鏡頭以後開始配置 DCC 的 layout,本次為了強調運鏡上的臨場感,整體希望帶給觀眾的是一種沒有作假的視覺框架,並重視真實性。
 
  • image
    從 Previz 到 layout 中間的工程相當穩定,即使是在 3D 作業的過程中也能夠按照監督的要求來控制鏡頭
  • image
    特別講求歌詞與角色表情之間的連結,與歌曲整體情緒的表現相互映襯的面部變化更是不可妥協的堅持
  • image
  • image
  • image
    演奏的部分也根據現實預演時拍攝的樂器拿法,彈撥和指法都與現實一致。
    從整體演技到手部的演奏細節,都是品質把關的重點
 
  為了讓通過嚴格要求後的動畫成品與方才先的舞台和照明背景順利融合,接著要進入合成 / 編輯作業。順序上來說是將舞台照明素材輸入進去,並且與 DCC 方面輸出的素材來作融合。
 
  • image
    為確保每個素材的輸出都能平順進行還去開發了相關工具。透過工具的幫助下
    讀取已經完成 DCC 動畫處理的角色資料,以及製作 UE5 的音序器,輸出重要素材等相關工程
  • image
    比較 Previz(上段)與正式版本(下段)之間的時間線進行最終的編輯作業。
    據說在這個時候所有分鏡幾乎都在此受過再調整,以及畫面效果的調整
 
  經歷這些努力,就是呈現在各位玩家眼前的終極演場會場景。講座的最後是由竹俣總結,列舉出「追求執著的信念」、「致敬真實衍生出的偕同效應」這 2 個重點,認為「在目前以量產為前提的諸多要素當中,能夠以這麼嚴格的標準追求成品作工是非常寶貴的經驗」,對於本次大力相助的 Graphinica 也相當感激,「非常感激對方能夠超越工作的範疇,共同愉快地完成這些挑戰,實在非常感謝」。
 
  • image
  • image
 
  這項成果不僅對「HBR」帶來未來效益,也象徵取得了空前的成功。然而,目前也還有許多尚未克服的難題,希望今後也能在「HBR」上挑戰實現更多的影音要素,帶給玩家更上一層的視聽體驗。

 

(C)VISUAL ARTS/Key(C)WFS

載入中...

延伸報導

《緋染天空 Heaven Burns Red》英語版展開服務 公開發布紀念預告影片
多平台 | 緋染天空 Heaven Burns Red
0
《緋染天空 Heaven Burns Red》舉辦水瀨李會有活躍表現的故事活動「滿載祈願的圓圓幸福」
多平台 | 緋染天空 Heaven Burns Red
3
《緋染天空 Heaven Burns Red》實施慶祝開服 1000 日「緋染天空 1000 日感謝祭」
多平台 | 緋染天空 Heaven Burns Red
10
《緋染天空 Heaven Burns Red》舉辦 1000 日登入獎勵活動 新服裝 SS 卡羅爾・利帕登場
多平台 | 緋染天空 Heaven Burns Red
8
《緋染天空 Heaven Burns Red》首次於日本舉辦展覽 展出等身大模型並重現世界觀
宅物 | 緋染天空 Heaven Burns Red
26
《緋染天空 Heaven Burns Red》將於日本遊樂場推出「國見玉」「和泉由希」的兩種模型
宅物 | 緋染天空 Heaven Burns Red
23
《緋染天空 Heaven Burns Red》簡中服《熾焰天穹》開放事前預約 首度曝光宣傳影片
多平台 | 緋染天空 Heaven Burns Red
63
《緋染天空 Heaven Burns Red》1.5 周年慶典報導 回顧活動現場展示及特別演唱會
活動 | 緋染天空 Heaven Burns Red
48
《緋染天空 Heaven Burns Red》×「animate cafe」報導 首次在台灣舉辦合作咖啡廳
宅物 | 緋染天空 Heaven Burns Red
17
《緋染天空 Heaven Burns Red》「CITY NO.1 城市一族」聯名活動今日展開
宅物 | 緋染天空 Heaven Burns Red
12
《緋染天空 Heaven Burns Red》新服裝 SS 神崎阿黛爾海德、SS 李映夏登場
多平台 | 緋染天空 Heaven Burns Red
9
《緋染天空 Heaven Burns Red》舉辦故事活動「Peace of Cradle」 新服裝室伏理沙、天音巫呼登場
手機 | 緋染天空 Heaven Burns Red
10
《緋染天空 Heaven Burns Red》舉辦新故事活動「孤高的善變者們」
多平台 | 緋染天空 Heaven Burns Red
21
《緋染天空 Heaven Burns Red》西裝造型新戰術型態登場
手機 | 緋染天空 Heaven Burns Red
21
《緋染天空 Heaven Burns Red》全新「夢想清單戰型探索」登場
多平台 | 緋染天空 Heaven Burns Red
11
【模型】FuRyu《緋染天空 Heaven Burns Red》逢川惠、國見玉 1/7 比例模型開放預約
宅物 | 緋染天空 Heaven Burns Red
6
《緋染天空 Heaven Burns Red》推出精選故事活動「夏天!泳裝!熱帶慶典!」
手機 | 緋染天空 Heaven Burns Red
18
《緋染天空 Heaven Burns Red》東京秋葉原 2 天活動報導 第 31A 部隊聲優全員到齊
人物 | 緋染天空 Heaven Burns Red
7
《緋染天空 Heaven Burns Red》舉辦「結凍的氣息和爆發的感情」新章開幕豪華特別活動
手機 | 緋染天空 Heaven Burns Red
16
《緋染天空 Heaven Burns Red》「2 週年前夕!特別直播」1/20 於 YouTube 播出
多平台 | 緋染天空 Heaven Burns Red
8