二之國 白色聖灰的女王
走向RPG的王道 日本製造的視覺效果
本作用CG再現了吉卜力工作室的溫暖世界觀。
作為把以前只能在電影作品中看到的世界積極運作的傑作，成為一個大話題。
這次因為在Level5的開發組中打聽到了本作中加入的思路，所以想介紹一下。
TEXT_久代忠史
翻譯 Trace
譯者注：二之國之前翻譯過一篇4P的文章，這次CGW合訂本裡增加到了50頁，除了字數提高了一倍多，有8000+外，也增加了大量的圖例。 由於圖形技術本身沒有難點加上時間有限，一些文字上的錯誤和圖片尺寸等小細節還請見諒
根據現有主機的性能而再構築的吉卜力形的表現
本作的導演，Level5的本村健先生回顧最初製作的思路說[正是因為和吉卜力工作室(以下簡稱吉卜力)的人一起工作，才想到“嘗試走入吉卜力的世界一次”。如果是用PS3，吉卜力柔和的世界觀和幻想顏色的強烈視覺大概就可以表現出來了吧。於是就抱著一定要試著挑戰一下的心情開始了開發]。會這樣說是因為之前公司開發的數個遊戲，積累了對輪廓線和Cel-Shading繪製的大量經驗。這些技術的集成可以說是本作的開發是否能夠接近吉卜力世界的前提。
但是，開發的時候並不是像現在看到的這樣簡單。在製作初期使用了在現在主機上廣泛利用的技術，也有摸索出要有PS3風格的吉卜力外觀的時期。例如，加入角色的動畫外觀(Cel look)上的漸變效果，在背景使用法線貼圖來強調立體感等等，可以說是進行了各種嘗試。但是，這些都達不到期望中的效果。最後，角色還是使用了簡單的輪廓線(Outline)和Shading。背景要反覆考慮顏色和品質再進行描畫，重新確認了迴歸原點的開發方針。
另外，藝術指導梁井信之認為，不僅只是單純的返回原點就是完成了模仿，還要把進一步實現刺激感官的圖形作為目標來進行藝術取向。梁井先生說[這個雖然在某種精神的部分上也許有很大的負擔，但如果即使畫面上看不到太陽也可以感受到日光，感受到風那樣，我很想做出一款在視覺和聽覺以外，玩家也可以感受到什麼的作品]。為了實現這些，公司的藝術家致力於理解吉卜力的手繪特點，進行了謹慎和踏實的製作，完成了把吉卜力的世界用CG再造的課題。開發組希望玩家在玩遊戲時，可以感受到開發組的用心良苦。
前排從右開始
3D Event Director： 圖師直嗣
Effect Director： 幸谷賢明
Director： 本村健
程序員： 橋本佑介
後排從右開始
角色3D模型和動作： 佐佐木康吉
Art Director： 梁井信之
特效圖形： 小林諒
關卡設計Director： 舛屋匡浩
角色圖形： 富田晃介
(以上都是Level5的職員)
從2D的吉卜力角色到3D的二之國角色
既然是用多邊形為基礎的3DCG製作的，對於在模型上經常會看到鋸齒的負面問題，在本作中是**才克服那些問題的呢？
角色模型的基本
本作的模型，雖然是以接近吉卜力工作室描繪出的設定畫所擁有氣氛作為最優先進行製作，但因為要用賽璐珞風格表現，多邊形的分配影響輪廓影和陰影出現的難易。
為此，要試圖儘可能的做出漂亮的模型，主人公Oliver（圖A）有7640多邊形，指導Oliver的妖精Shizuku (雫，圖B)有著簡單的輪廓曲線，主體設計上是用2326多邊形做成的。還有，圖CD是Oliver和Shizuku 的紋理，因為是賽璐珞風格，所以非常的質樸
A Oliver的模型
B Shizuku的模型
C Oliver的紋理
D Shizuku的紋理
怪物的模型和紋理
BOSS戰中登場的怪物，和主要角色比起來，雖然體型相當大，但多邊形數不會更多，圖A的惡靈騎士用了9276多邊形，圖D的森林之主是用了4238多邊形，和Shizuku相比只用了不到2倍的多邊形作成。
A 惡靈騎士的模型
B 惡靈騎士
C 惡靈騎士的紋理
D 森林之主的模型
E 森林之主
F 森林之主的紋理
G 熔岩巨獸的模型
H 熔岩巨獸
I 熔岩巨獸的紋理
調整過的動畫風格的陰影表現
動畫的特徵，是簡略化的圖案。圖A是Imargen的Lucci模型沒有特殊處理渲染的圖，沿著面部的細節計算出了正確的陰影，成了信息過多的雜亂的圖。
為此，在本作中，為了表現出如圖C那樣只出現必要的陰影，要用優化過的法線用模型來製作法線貼圖，再把他分配就就可以實現所需要的質樸的影子了（圖B）。
順便說一句，對於Lucci，因為下巴處不想要影子，從脖子開始是把頭部直接連在身體上的，所以就成了這樣的輪廓。
同樣，圖D是Oliver的圖例，要是拿渲染用模型計算影子，眉毛下的眼窩就有了影子，並且，從太陽穴到下巴影子會向內側深入，會有粗俗的印象。
所以，Oliver的法線用模型F，在抑制臉的起伏同時下部要鼓起一些，為了整潔印象的影子，做了用心的調整（圖E）。
A 應用前
B 應用後
C 法線用模型
D 應用前
E 應用後
F 法線用模型
卡通的色調變化
本作的角色的色調基本上是用紋理決定的。但是，因為在Shader上配備了能夠改變卡通色調的機能，可以用在受到傷害的表現上。還有，這個Shader和輪廓（Outline）同樣，是隻在實機上實現的原創東西。
輪廓（Outline）的生成手法
角色的輪廓，是由Post Effect來表現的。程序員橋本佑介先生說，這個是為了接近吉卜力作品的品質而採用的手法。具體上的順序是：首先，要進行取得輪廓線的渲染，把輪廓的內側含有的輪廓線抽出的Post。然後，就是和最終的角色渲染結果合成的流程。使用這個方法，就算是披風的褶皺那樣細小的部分，也可以加入線條，更可以對輪廓線加上柔和模糊的處理，使和多邊形方面無關的平滑線條表現成為可能(A)。還有，輪廓的顏色可以變更(B，C)，在有雪的場景上把輪廓做成灰色，讓角色不那麼明顯，使用配合周圍環境的繪製。
A 輪廓的表示
B 輪廓的顏色變更
C 雪場景的例子
D 沒有輪廓
E 有輪廓
調整過的動畫風格的陰影表現
動畫的特徵，是簡略化的圖案。圖A是Imargen的Lucci模型沒有特殊處理渲染的圖，沿著面部的細節計算出了正確的陰影，成了信息過多的雜亂的圖。
為此，在本作中，為了表現出如圖C那樣只出現必要的陰影，要用優化過的法線用模型來製作法線貼圖，再把他分配就就可以實現所需要的質樸的影子了（圖B）。
順便說一句，對於Lucci，因為下巴處不想要影子，從脖子開始是把頭部直接連在身體上的，所以就成了這樣的輪廓。
同樣，圖D是Oliver的圖例，要是拿渲染用模型計算影子，眉毛下的眼窩就有了影子，並且，從太陽穴到下巴影子會向內側深入，會有粗俗的印象。
所以，Oliver的法線用模型F，在抑制臉的起伏同時下部要鼓起一些，為了整潔印象的影子，做了用心的調整（圖E）。
A 應用前
B 應用後
C 法線用模型
D 應用前
E 應用後
F 法線用模型
卡通的色調變化
本作的角色的色調基本上是用紋理決定的。但是，因為在Shader上配備了能夠改變卡通色調的機能，可以用在受到傷害的表現上。還有，這個Shader和輪廓（Outline）同樣，是隻在實機上實現的原創東西。
輪廓（Outline）的生成手法
角色的輪廓，是由Post Effect來表現的。程序員橋本佑介先生說，這個是為了接近吉卜力作品的品質而採用的手法。具體上的順序是：首先，要進行取得輪廓線的渲染，把輪廓的內側含有的輪廓線抽出的Post。然後，就是和最終的角色渲染結果合成的流程。使用這個方法，就算是披風的褶皺那樣細小的部分，也可以加入線條，更可以對輪廓線加上柔和模糊的處理，使和多邊形方面無關的平滑線條表現成為可能(A)。還有，輪廓的顏色可以變更(B，C)，在有雪的場景上把輪廓做成灰色，讓角色不那麼明顯，使用配合周圍環境的繪製。
A 輪廓的表示
B 輪廓的顏色變更
C 雪場景的例子
D 沒有輪廓
E 有輪廓
有意識的進行吉卜力風格的動畫製作
負責角色圖形的富田晃介先生，在關於吉卜力作品中的人物奔跑方面說到[沒有身體浮到空中的幀，要做出特有的奔跑方式]。但是，把那個奔跑再現到遊戲上時，因為可以看到好像是
缺幀的，所以一邊要把動作接近自然的奔跑，一邊還要做出沒有跳躍印象的調整。另外，吉卜力作品的奔跑並非經常把同樣的動作做重複，作為模仿，本作也像圖中一樣準備了3種奔跑
的模板，把這3種隨機混合的播放，就製作出了手繪動畫那樣的動作。。
符合狀況的多彩的動畫模式
本作中必須要特別寫出的是，準備出的對應各種狀況的動畫種類有很多。
圖是奔跑的圖例，從左上開始，通常，疲勞，涉水，移動環境差，平衡，吊橋，雪上，冰上，熱，冷，漂浮，全部11種。還有，這11個種都設定有站立和走，以及走上樓梯和走下樓梯
等在地形上的不同反應，今後會分的更細緻來製作動畫。還有，關於跑的這11個種類的也有各自如前述的3個模式的動畫。
事件場景製作的基本
在事件場景的製作中也全面的使用了Softimage，這樣美術師用在動畫製作上時間也稍微多了一些做出了很多可以自動化的工具（圖A）。關於面部動畫，如前述那樣，讓控制器（圖B）
和動畫庫（圖C）充實起來，這樣才能把作業的速度提高。把最終的細微調整直接對骨骼做動畫，這樣，就可以進行符合場景的細緻表情製作了。還有，事件裡做成了參考模型，角色和
地圖的更新也可以靈活的對應（圖D）。順便說一句，本作中因為採用了原創的卡通算法，所以有必要在實機上進行最終確認。因此，把做出的時間場景的遊戲數據轉換，可以不需要程
序介入，而是美術師用Softimage上準備的出一個按鈕就可以進行處理的工具（圖E）還有，這個工具也對應網絡工作，用進行分散轉換來壓縮處理時間，為減少美術師的等待時間做出
了貢獻。
A 自動化工具
B 控制器
C 動畫庫
D 事件
E 轉換用工具
吉卜力世界觀的再現
本作的背景美術製作，吃從公司內部培育描繪吉卜力水準的繪畫人才開始的。(A)是吉卜力提供來的美術樣板。首先，是讓所有的背景職員花費4到5天對這個畫進行臨摹，選拔出能夠忠實再現吉卜力作風的職員。這個職員要對全部職員描畫的紋理，最後加上修正，實現高品質的統一化（圖B）。還有，背景的製作中，在職員的周圍配置了顯示器，經常不斷的播放吉卜力的影像，像沐浴一樣用身體感受影像，進行著能夠把吉卜力的世界觀變成自己的觀念的環境製作。由於這樣鍛煉出來的背景職員，可以製作出全體大約9成的背景美術資源，就如圖A那樣，比魚雕塑的頭部更靠近視點部分的背景也是在公司內部獨**作出來的（圖C）。
A 吉卜力提供的美術板
B 紋理
C 追加的魚對象
背景的製作流程
背景的製作可以大體分成一下的步驟。首先，用BOX等級的模型進行臨時的佈局來決定尺寸，然後進行建模，但也要在這時考慮UV的展開或佈局，並不做最終的加入（圖A），然後對臨時模型進行簡單的上色，決定全體的色彩平衡（圖B）。對比的，是加入模型的細節並描繪了紋理（圖C）。這時，為了不讓人有多邊形感，要多加註意最好不做成直線形的模型（圖D）。加入細節後，再把陰影信息寫入到頂點顏色裡（圖E）。地圖主管舛屋匡浩先生說，根據燈光數據來計算的影子，因為通常都是單色，所以有很多有意識上色的陰影都沒有加上。因此，要靠人眼一邊收集周圍的顏色信息，一邊手工的給頂點塗色，這樣可以做出柔和的表現。順便說一句，如果硬要試讓邊緣發光，有時會試著描畫出印象形的畫作。這樣，最後烘培陰影到光照貼圖就完成了。（圖F）。
A 臨時佈局
B 簡單的色彩
C 紋理繪製
D 沒有直線感的建築物
E 追加陰影
F 完成
自然的背景質感
如圖A那樣，本做的場景就好像可以和吉卜力工作室的背景美術看混一樣的豐富（就是場景跟人家背景畫看起來差不多的意思）。正如前面提到的，加入了使用頂點顏色有意識來製作的環境光陰影。還有，頂點顏色alpha值，寫入了紋理混合用的信息，讓多個紋理配合使用，做出了自然的質感。圖C是石頭組成的房子牆壁的Shader，可以看出草的紋理和作為基礎的牆壁紋理做了混合。還有D是石頭鋪的路的Shader，在地面石頭和地面草的紋理混合上面乘算了光照貼圖，為建築物增加了陰影表現。
A 場景
B 頂點顏色的陰影
C 石頭組成的房子牆壁的Shader
D 石頭鋪的道路的Shader
搖動的樹葉
被風搖動的樹木的葉子，是在Shader上加入了風的參數，配合這個強弱，就可以作出以網格的中心做為起點來活動的設定。還有，半透明柔軟質感的樹木葉子的表現是用繪畫來實現的，使用在樹木的枝條紋理上插入葉子的設置
A 模型
B 紋理
Fur shader製作的草原表現
由於草的隨風飄動，草原的場景每一刻的表現都在變化，這個表現使用了應用Parallax Mapping的技術的fur shader，對每一張草原，根據色彩和視差移動fur texture的UV，草的活動就可以表現出來。圖A是沒有fur設定，圖B是有fur設定。相對圖A的平靜風景，圖B的畫就可以感到有很大的風吹過。
A 沒有fur設定
B 有fur設定
草原的質感
Oliver他們旅行的場地（field），是以像航拍那樣把信息緊密裝入的真實系視覺為目標，同時也要考慮和角色的融合，要加入少量的動畫風格來平衡製作（圖A）。關於草原，質感的手法是，和場景一樣使用頂點顏色的alpha來做紋理混合，另外也使用了光照貼圖的乘算，而且bloom處理時繪製亮度信息的感度值寫入到R通道里，把高光的Mask設定到G通道的紋理也有準備，來追求真實度。圖BC是field各部分的shader設定表示。另外，都是以前述的fur shader為基礎的，圖B中唄選擇的部分是地面草和地面草的亮度&高光紋理，把他們在圖C裡，和地面土以及地面土的亮度&高光紋理混合，做出變化豐富的草原
A 草原的場地
B Shader設定
C Shader設定
地下城的倒映
本作雖然把動畫風格的外觀作為基調，但有著特別重要的地下城的白色宮殿在地板上的倒映等，要進行真實的表現。這個要像畫像裡一樣的以地面為軸，然後配置出反
轉的模型就實現了(注：IOS上的無盡之劍似乎也是這樣做的)。用這個方法，與加上的角色輪廓線的生成方法很好的搭配，因為能做出整理過信息後的畫像，所以也有效
的維持了動畫的風格。
高光(highlight)的表現
除了白色宮殿的地下城倒映外，為了表現出金屬上的閃光感，加入了高光的表現(圖A)。圖B是實現這種配置的圖示，圖C是貼在板型多邊形的高光紋理。並且在正對鏡頭時最亮，可以散發出華麗的氣氛。
A 白色宮殿的地下城
B 高光的配置
C 高光的紋理
柔和度的照明
本作為了能把描繪的紋理變的活靈活現而進行的照張，在陰影的表現上用了原創的方法
腳影的表現
通常遊戲的光照設定，在陽光處就可以看到角色的影子，但要是進入陰影中，影子就會同化變得難以看到。這樣接點感會變沒，所以在本作中另外準備了動畫那樣的圓形影子，配置在角色腳下。這樣，即使站在陰影裡也可以進一步描述影子，這樣就不會再看到角色浮起來的影子，感覺到安定的重量感。
A 沒有腳影
B 有腳影
場地（filed）上的影子
場地上落下的雲影是由動態光生成的。這樣，不會和角色的影子同化，表演出不損害角色接地感的畫面。
A 沒有云影
B 有云影
烘培的靜態影子和生成的動態影子
投到背景地面的影子用了兩種方法
第一,是烘培生成的靜態型的影子,這個由於施加了複雜的照明,也可以一邊產生描入的材質紋理風格,一邊做出符合晝夜時刻變化的最適合的卡通形影子
另外，是根據照明而生成的影子，也適用於樹木的葉子等有活動的影子上。
圖BC，是沒有動態形影子和有動態形影子的樣子。
A 烘培的靜態影子
B 生成的動態影子（沒有）
C 生成的動態影子（有）
根據點光源的色調（Toon）變化
本作的角色是用兩個階調作為基本的賽璐珞風格表現。但是，本做也在照明上下了功夫，據說在開發途中為了反映新的點光源的影響而改良了Shader。畫像就是一個例子，可以看到當Oliver接近蠟燭就會在通常亮部的色調上增加紅色。這是因為蠟燭加入了紅色點光源。因為也設定了距離衰減，所以會變的根據距離而緩慢得改變明亮度。
柔和畫面的製作方法
本作，是把動畫的背景那樣的柔和畫面作為目標，實踐了各種方法。圖片裡顯示的是本作場景的光照工程。相對只使用紋理和頂點來上色（圖A），首先，為了增加大氣感表現增加縱深和高度的霧（圖B）。霧分別在縱深和上下層分別加上了2個階段，由於這樣，就可以讓畫面柔和的融入了。並且，在這個狀態中，會進一步的有意識加入自然光，進行HDR和周圍減光濾鏡的處理。這個濾鏡是讓畫面外圍的亮度和色調變化的Post Effect。結構上是，如圖C的概念圖一樣，把對應畫面的紋理做乘算合成。具體的，把畫面的上半部分開，準備出上畫面天空用（nd_f01a），上畫面陸地用（nd_f01ｂ），下畫面陸地用（nd_f0２）三張圖，讓上畫面的天空用和陸地用紋理符合攝像機的仰角變化的同時，對alpha的fade進行切替，就可以進行平滑的連接了。還有，每個濾鏡的紋理，為了符合場景的環境變化，要設定各自的顏色進行fade切換，下畫面陸地用和上畫面陸地用的情況，是在畫面上進行6點採樣，點數比率變化時，要讓各區域的佔有點比率符合，這樣就可以和區域的基本顏色進行混合來應用顏色了（圖E）。由於使用了這些方法，可以在每個區域都表現出空氣感和太陽的溫暖陽光，同時也會讓畫面中央的更加體現出來（圖F）。還有，這時要把遠景部分融入天球的色彩，也要施加把最遠景做成半透明的方法。
A 只用紋理和頂點顏色進行上色
B 增加縱深和高度的霧
C 紋理的概念圖
D 濾鏡的設定
E 濾鏡顏色的變化
F 完成
有意識的製作動畫風格的特效
本作的特效在把動畫風格定為目標的同時，也要力圖背景和角色的協調，在這裡可以看到2D和3D的融合，
動畫風格的爆炸
像動畫的畫風一樣的爆炸特效是在紋理處理上表現的。特效指導幸谷賢明先生說，在繪製紋理時為了產生手繪感，要加入抖動效果，注意不要描繪的過於詳細（圖A）。由於使用這種方法，做出了到處都有柔和氣氛的特效。還有，應用了煙紋理的板形多邊形(圖B)一直要正對著攝像機的設定。這樣，即使鏡頭移動，也可以維持最好的外觀。
A 紋理
B 板型多邊形
C 爆炸的特效
獨特的火焰表現裹著火焰粒子襲擊Oliver他們的燃燒巨人岩漿巨獸(Magmadron 圖A)，這個火焰的表現上使用了專用的著色器。具體上是使用了基本(圖B)，第二層(圖C)，外側(圖C)三種顏色紋理來形成階段性的顏色分層（圖E），要製作出為了表現進一步向外擴展的Scroll用Mask(D)和為了決定晃動範圍的Mask(圖G)來做出輪廓。使用這個方法，就可以表現出了沒有重複的隨機感的火焰(F)。據說特效圖形負責人小林諒先生為了考慮在本作中，表現出火焰向上被扯碎消失的樣子，進行了各種各樣的調查後確定了這個方法。還有，這個著色器，由於可以改變紋理的圖案（圖H），所以像火把（圖I）那樣的其他火焰的表現上也可以使用，要是改變顏色風格本身，動畫風格的破碎散落的水或魔法的光的表現等，也可以應用上，在各種各樣的場合中都非常的有用。
A 岩漿巨獸
B C D Mask(Scroll用)
E B-D形成的顏色層
G Mask（默認的搖動範圍）
H 紋理（火把）
I 火把
使用粒子做出的火焰氣息的表現
岩漿怪吐出的火焰氣息（圖A），是使用了粒子編輯器來做成的，把16個圖案的火焰紋理的動畫（圖B）貼在了分配在粒子的板形多邊形上，是由這個方法來表現的。
順便說一句，板形多邊形的每一張雖然要向鏡頭視角對正，但作為整體，要根據鏡頭視角的轉動等角度來改變。
A 火焰氣息
B 火焰紋理
漂浮在場地上的雲
漂浮在場地上空的雲作為特效來處理，每一個都在單獨的板形多邊形上，設定流動的方向，時間，循環等參數。使用這個方法，就實現了好像雲的隨機活動。
軟粒子消除邊緣
在戰鬥時，覆蓋Imargend的半透明field，接觸地面的部分就會漂亮的消失掉。對歌是對圓形多邊形設置了軟粒子，這種場合，當地面的Z值和圓的Z值越來越接近要在alpha上施加提高透明度的處理。
Jabo的伸長觸手
圖A是在事件情景中，漆黑的魔道士Jabo放出的觸手，這並不是骨骼或縮放的動畫，而是用一張紋理滾動（Scroll）來表現的。
具體上，要預先製作觸手的形狀和軌道（圖B），把觸手的紋理（圖C）的UV收縮後再貼上（圖D），用這個方法讓人在實際延長可以看到具體內容。還有，這時，要把UV的邊緣並非等間隔的，而是有意圖的做隨機，根據這個方法來做出動作的緩急。
還有，事件情景因為要決定鏡頭視角的角度，採用了畫面製作優先，各素材容易配置的那種簡單的方法。
A Jabo觸手
B 觸手的模型
C 紋理1
D 紋理2
閱讀更多 遊聚網 的文章
