【CEDEC 23】《寶可夢 朱/紫》以擬真世界為目標 徹底解說帕底亞地區的繪製方法

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

  在以遊戲開發者為主的講座「CEDEC 2023」當中,由 GAME FREAK 的前澤圭一帶來了以「《寶可夢 朱/紫》繪出帕底亞地區 —— 徹底解說視覺表現的機制!(【ポケットモンスター スカーレット・バイオレット】 パルデア地方を描き出す――見た目の仕組みを徹底解説!)」為題的演講,講述以「從美術風格就可以知道是哪部作品」這個觀念為前提開發的《寶可夢》系列,是如何打造《寶可夢 朱/紫》的寶可夢、主角、整個世界的各種構成,從著色器處理到資源建造,徹底解說其中的奧妙。
 
  • image
  • image
 
  根據前澤所述,《寶可夢 朱/紫》設定的美術概念為「擬真與變形(リアルとデフォルメ)」,也就是讓背景的質感與形狀接近現實做為目標。但是由於寶可夢與人物角色等會簡化,所以必須要找出將它們統整放在一起時會出現破綻的地方才行。
 
  • image

 

美術概念

 
現實與簡化
  • 希望背景的質感與形狀等,要比前作更接近現實
  • 但是,由於寶可夢與人物角色並不會弄成完全真實風格,因此必須要找出在背景與角色統一放在一起時會產生的破綻
 
質感
  • 基本上接近現實就好
  • 必須要思考如何調整輪廓與背景融合
 
  • image
 

素材

  • BaseColorMap
  • NormalMap
  • MetallicMap
  • RoughnessMap
  • EmissionColorMap
  • AOMap
 
  • image
 

使用 Gbuffer

  • 利用 Flags 使處理分歧(也收入在模板)
  • 以 Mesh ID 為基礎並抽出追加情報
 
  • image
 

可使用的光

  • 定向光源(太陽光等)
  • 點光源、聚光光源
  • IBL
    • DiffuseProbe / SpecularProbe
    • IrradianceVolume
      • 用在前作(《阿爾宙斯》)
      • 在本作不使用
  • image
 

點光源

  • 使用在城鎮的燈光等
 
  • image
 

IBL

  • 由於時間帶的變化,要以作出灰階影像 DiffuseProbe 並另外疊上顏色。
 
  • image
 

打燈光

  • BRDF(基本呈現)
    • 鏡面反射:GGX
    • 擴散反射:Lambert
  • 半透明放在最上層
 
  在演講首先展示了素材的構成與光源等,並且在介紹整個作品中基本的表現方法時,也順便解說了使用在寶可夢身上的特殊手法。
 
  而提到寶可夢主要的外觀就先提到的便是 SSS(Subsurface Scattering)的陰影呈現。這套陰影系統會根據寶可夢的身體大小與密度等進行配合,套用各式各樣的設定,對寶可夢的造型個性造成巨大的影響。
 
  • image
 

SSS

  • 使用接近 Pre-Integrated Skin 的手法,在陰影部分使用散亂色滲出的效果
  • 避免使用 LUT texture,並使用 Spherical Gaussian 進行近似計算
 
  • image
 
  • 根據身體大小變化數值
 
  • image

 

  • 左圖:厚度跟密度等較薄的部位數值調到偏亮
  • 右圖:眷戀雲「白色」的地方也會因應頭部的毛跟雲而利用數值設定區分

 

  • image
 

膠狀物

  • 只在輪廓附近適用 SSS 呈現質感,表現出只有外側呈現出透光的效果以模擬質地
  • 輪廓部分,單純以視角跟法線的角度為基準抽出
 
  • image
 

構造色

  • simulation base 的手法,因為表現的自由度等觀點而放棄採用
  • 以視角與法線的角度為基礎再加上三色漸層,使用簡單的功能進行
 
  • image
 

粒子

  • 左:粒子的 texture 種類動畫(4*4=16 種類)
  • 右:指定深邃感(視差的強弱)的 texture
 
  • image
 

火焰(頭頂的動態物件)

  • 在 Displacement Map(左)用頂點色(右)乘算,用來控制影響程度
 
  其他也有介紹如何表現出凝膠般的質感、構造色的呈現,還有悖論寶可夢的粒子呈現等各式各樣的手法,並且提到了《寶可夢 朱/紫》最大特徵「太晶化」的相關表現。
 
  當寶可夢太晶化,便是將本體(也就是寶可夢)的部分保持原本的模組並更換素材,配合 Normal Map、Color Map 與雜訊紋理,就可以呈現出寶石的質感。不過,如果將所有物件都寶石化的話,反而變得不美觀,所以也做出了能夠指定「不要」太晶化的 Mesh。
 
  另外,在太晶化的時候出現在寶可夢頭頂的太晶寶石,其實是將表面的 Mesh 設成半透明,而裏面的 Mesh 設成不透明,藉此產生出深度並呈現立體感。
 
  • image
  • image
 

太晶化(本體)

  • 左:用在表現質感的 Normal map
  • 右:從左邊開始為
    • 用在表現分散光的 Color map
    • 讓邊緣(エッジ)發光的 Normal map
    • 放在邊緣(エッジ)上的雜訊紋理
 
  • image
 
  • 可以指定「不要」太晶化的 Mesh
 
  • image
 
  • 裏側與表面還有 Sphere Map
 
  • image

太晶化(完成)

 
  接著則是展示關於主角(人物)角色相關的呈現手法。首先從在遊戲一開始可自定義的主角「造型」是如何呈現的。
 
  《寶可夢 朱/紫》在創角的時候能夠選擇的各種眼眶與眼睛大小等,其實是使用 Maya 的 Lattice 功能製作的。使用這個功能就可以控制眼尾的上下或眼睛、嘴巴的大小、嘴唇的厚度等。不過,如果全部的細節都可以調整的話會變得太過繁雜,所以事先準備了配合各種變形值組合的預設值。
 
  另一方面,雖然眉毛基本上是以 texture 描繪,不過藉由在前端使用 α 做出階層,就可以做出眉毛長度的不同版本。
 
  • image
 

眼簾、嘴巴的自定義

  • makeup_all
  自定義角色用的 Lattice 本體。能直接把 Mesh 變形
  • makeup_eye
  控制眼簾的 Lattice。控制 makeup_all
  • makeup_mouth
  控制嘴巴的 Lattice。控制 makeup_all
 
  • image
 

眼瞼的 Lattice 種類

  • 可以設定各種眼睛大小和形狀
 
  • image
 

嘴巴的 Lattice 種類

  • 可以設定嘴巴大小和嘴唇的厚度
 
  • image
 

混和以上種類

  • 定義預設值
 
  • image
 

眉毛、睫毛的種類

  • 基本的種類以 texture 製作
  • 根據各種類,以設定 α 增加版本
 
  另外,表情則是將臉分成五個部分之後以變形目標(Morph target)製作。最一開始套用變形目標,接著再用剛才提到的 Lattice 功能進行演算,就可以實現實際角色的臉的形狀。
 
  • image
 
表情
  • 拆開各部位後以變形目標製作
    • 眉毛周圍變形
    • 右眼變形
    • 左眼變形
    • 嘴巴變形
    • 加算至整體
 
  • image
 

表情與臉部妝容

  • 依照下列順序處理。
  1. 將各部位的變形圖像合併後,製作變形用的 Mesh
  2. 混和至 BaseMesh(反映表情)
  3. Lattice 變形(反映臉部妝容)
 
  • image
 

眼球

  • 使用非統一比例,讓直長型的眼睛也可以轉動
 
  而在表現肌膚的部分,則是先做出假的法線,並與實際法線混合。接著,依照臉或視角的角度、光源的方向等各種情況,調整哪個角度才是最為美觀,再控制光的反射度,不斷重複嘗試,才終於達到開發團隊希望的美術概念。
 
  • image
 

shade(偽裝法線)

  • 偽裝法線 N0 = normailze (P0 - O)
  • 把基準點 O 跟 "head"joint 連動
 
  • image

 

shade(風格調整)

  • 以條件跟參數,跟實際的法線進行混合
    • 臉跟攝影機的角度
    • 順光或逆光
  • 下方圖片:根據參數產生變化的結果
 
  • image
 

光的反射調整

  • 和模型的風格不符,看起來完全不像「皮膚」
 
  • image
 
  • 將 dot (normal, light) 的結果補正得更滑順
 
  最後則是講解在打造帕底亞地區的世界時,如何呈現各種環境的相關手法。
 
  首先是大地(地圖)的製作方法。帕底亞地區的大地,是以 Maya 的 Mesh 為基礎,再利用 Houdini 追加細節,然後選擇 High tMap 與質感,或是輸出長出花花草草的 Mask。然而,光只用這樣的方式也有無法完整呈現的地形,所以會在之後利用 Houdini 進行程序建模弄出懸崖或岩石等再配置於地圖上,慢慢打造出想要的地形。
 
  • image
 

大地的製作方式 1/3

  • 以 Maya 的 Mesh 為基礎,再利用 Houdini 追加細節
 
  • image
 

大地的製作方式 2/3

  • 從 Houdini 輸出 HightMap 與 Mask
 
  • image
 

大地的製作方式 3/3

  • 用 SplatMask 選擇質感
  • 用 DetailMask 長出花草
  • 把懸崖或岩石從上面放置
 
  • image
 

懸崖&岩石

  • 利用 Houdini 進行程序建模
  • 加上形狀、輸出素材混合等參數的 Mask
 
  • image
 
  • 將產生的 Mesh 利用 Maya 加工等情況,就使用只再生 Mask 的工具
 
  接著是關於海、河川等水邊的呈現。這部分會根據頂點動態的動作、流型圖的流動,還有依照水深的透明度變化、螢幕畫面空間的折射表現等而配合,進行基本的處理。甚至也特地準備了浪潮拍打岸邊時白色波紋的專用模型,讓其越靠近陸地時就有越大變化,以強調「拍浪感」。
 
  • image
 

海&河川

  • 以 Gerstner Wave 為基礎的頂點動態
  • 根據 Flow map 表現出流動
  • 因應水深改變透明度
  • ScreenSpace 的折射表現
 
  • image
 
  • Normal Map 與 Flow Map
  • SpecularProbe 的 texture 以手繪製作
 
  • image

開發成員還說「我們在這真的下了很多工夫,請一定要介紹這部分」

  • 利用專用的模型追加白色波紋
 
  接著是天空,為了要從水平線延伸出顏色的漸層,則是以 Precomputed Atmospheric Scattering 等新技術為基礎呈現。在雲層的表現上,先將在建模完成的雲上從六種方向打光後的結果壓製成兩張 texture,並且以真實世界的光為原型計算描繪色。
 
  • image
 

天空

  • 以 Precomputed Atmospheric Scattering 等技術為基礎,然後再加上特定的漸層處理
 
  • image
 

雲朵

  • 在 Houdini 將一團雲用離線彩現
 
  • image
 
  • 把從六方向(±xyz)打光後的結果,再壓製成兩張 texture
  • 貼上 Billboard 並以光源向量為基礎計算描繪色
 
  • image
  • image

建築物內則是簡單用光線映射表現出來

 

室內

  • 建築物裡面使用光線映射表現
  • 根據晝夜變換有各自的資料
  • 乘算至 Base color
 
  以上就是本次「《寶可夢 朱/紫》繪出帕底亞地區 —— 徹底解說外觀的構造!」的演講內容了。在本次的演講中,可以感受到開發團隊是如何用盡了各式各樣的表現手法,進而呈現出《寶可夢 朱/紫》裡帕底亞地區光鮮亮麗的一面。
 
  • image
  • image
  • image
  • image
  • image
 

 

(C)2022 Pokémon. (C)1995-2022 Nintendo/Creatures Inc. /GAME FREAK inc. ポケットモンスター・ポケモン・Pokémon は任天堂・クリーチャーズ・ゲームフリークの登録商標です。 Nintendo Switch のロゴ・Nintendo Switch は任天堂の商標です。

新聞評語

載入中...

延伸報導

涉嫌販賣修改過的寶可夢 日本 36 歲男性為賺 1.3 萬日圓而被逮補
花絮 | 寶可夢 朱 / 寶可夢 紫
52
「Pokémon Play Lab」台灣首店將於台南開幕 結合購物、遊玩與比賽訴求
宅物 | 寶可夢 朱 / 寶可夢 紫
13
TOYOTA 打造等比例「密勒頓」摩托車 以大人的認真實現孩子的夢想!
花絮 | 寶可夢 朱 / 寶可夢 紫
98
御三家集合!歷代搭檔寶可夢「POKÉDANCE」跳舞動畫 MV 釋出
花絮 | 寶可夢 朱 / 寶可夢 紫
10
純白奢華!寶可夢「紀念球」3D 造型悠遊卡 3 月 6 日開賣
宅物 | 寶可夢 朱 / 寶可夢 紫
65
全新形態「太晶化」揭曉!《寶可夢 朱/紫》「帕底亞地區」新要素大統整
Switch | 寶可夢 朱 / 寶可夢 紫
282
想去哪做什麼都由你決定!《寶可夢 朱/紫》揭曉在帕底亞地區展開的三篇故事
Switch | 寶可夢 朱 / 寶可夢 紫
213
《寶可夢 朱/紫》公開帕底亞地區神秘攝影作品 揭露毒猴寶可夢「塗標客」生態
Switch | 寶可夢 朱 / 寶可夢 紫
98
《寶可夢 朱/紫》動畫《帕底亞的課後時光》9 月初登場 只屬於自己的寶物究竟是什麼?
多平台 | 寶可夢 朱 / 寶可夢 紫
46
《寶可夢戰鬥卡 Live》公開上市時間 將與「寶可夢朱 / 紫 帕底亞進化擴充包」同步推出
手機 | 寶可夢戰鬥卡 Live
104
紀念《寶可夢 朱/紫》發售!台北 101 以跨年規格連三天於外牆投放特別影片
花絮 | 寶可夢 朱 / 寶可夢 紫
249
白白長長又很眼熟⋯⋯?《寶可夢 朱/紫》以虛擬線上會議方式揭露最新寶可夢
Switch | 寶可夢 朱 / 寶可夢 紫
78
【速報】騎乘傳說寶可夢上山下海!《寶可夢 朱/紫》最新宣傳影片曝光
Switch | 寶可夢 朱 / 寶可夢 紫
284
《寶可夢 朱/紫》直播主兼道館館主「奇樹」現身 猜猜她的搭檔寶可夢是誰?
Switch | 寶可夢 朱 / 寶可夢 紫
288
《寶可夢 朱/紫》公布上市前最終宣傳影片 「朱之書/紫之書」裡描繪的神秘怪物是?
Switch | 寶可夢 朱 / 寶可夢 紫
158
《寶可夢 朱/紫》發售三天全球銷量突破千萬套 創下任天堂平台史上最高紀錄
花絮 | 寶可夢 朱 / 寶可夢 紫
604
《寶可夢 朱/紫》封面神獸曝光!最多四人同樂 兩位博士將分版本登場
Switch | 寶可夢 朱 / 寶可夢 紫
392
幫寶可夢洗澡澡!《寶可夢 朱/紫》公開「野餐」等交流要素 揭曉新寶可夢「奇麒麟」
Switch | 寶可夢 朱 / 寶可夢 紫
157
歷代御三家齊聚一堂!《寶可夢 朱/紫 零之秘寶》揭曉第 19 種「太晶屬性」?
Switch | 寶可夢 朱 / 寶可夢 紫
240
《寶可夢 朱/紫》公開 YOASOBI 合作樂曲「Biri-Biri」特別 MV
人物 | 寶可夢 朱 / 寶可夢 紫
36

來層愛透不透的性感

看更多

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

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