※ [本文轉錄自 C_Chat 看板 #1XUDLb9d ]
作者: dogluckyno1 (lucky) 看板: C_Chat
標題: [閒聊] OPUS：龍脈常歌 遊戲開發—遊戲插圖設計
時間: Wed Oct 27 12:28:18 2021
原文標題：《OPUS：龍脈常歌》遊戲美術開發—遊戲插圖設計
原文網址：https://bit.ly/3nwbFaL
https://medium.com/@sigono/opus-%E9%BE%8D%E8%84%88%E5%B8%B8%E6%AD%8C-%E9%81%8A
%E6%88%B2%E7%BE%8E%E8%A1%93%E9%96%8B%E7%99%BC-%E9%81%8A%E6%88%B2%E6%8F%92%E5%
9C%96%E8%A8%AD%E8%A8%88-e7e3a5aa3d7b
嗨大家好，我們是 SIGONO 的美術設計團隊，龍脈常歌作為一款著重劇情與敘事的遊戲，
在遊戲中的關鍵劇情等時間點會出現遊戲插圖來協助營造沉浸感、推動劇情。
閱讀本文，你會學到插畫設計師如何與團隊協作，製作出栩栩如生的遊戲插畫！
https://i.imgur.com/AeeJHf0.png
事情是這樣開始的…
| 製作人：（丟）
| ＭＥ：這個有 17MB、厚達兩百頁、有一堆字的文件是‥‥
| 製作人：這是劇本初稿，作畫前要全部看過一遍喔。
| ＭＥ：(‧-‧)
事前準備：閱讀劇本
為了做到準確傳達遊戲氛圍，事前研讀劇本是必要的。
除了台詞之外，場景的大致外觀、場景配置、情境與角色情緒等在劇本裡都有標註。
以故事中，女配角駕駛太空船「紅樓」，接走眾人的這一張插圖為例，它在劇本上的描述
是這樣的：
https://i.imgur.com/rrn3Thq.png
繪製草圖
這邊描寫的是太空船第一次在男主眾人前登場時的景象，想營造出一種在巨大的風暴與灰
塵後看清來者的視角，所以一開始採用了仰視角構圖。
https://i.imgur.com/lszok58.png
下面的黑影是女主角，還有揹著受傷的男配角的主角，超明顯的吧（？
| 製作人：…
| ＭＥ：好，我會測試效果
| 製作人：我什麼都還沒說啊XD
接下來我們要進入一個團隊成員們都很熟悉的環節
原型測試
是的！有了草圖之後，我們就可以馬上放進遊戲引擎中，與台詞、頭像、遊戲流程、音樂
等串接在一起測試效果。這時候，所有素材都還是很粗糙的草案，但經過整合測試之後，
可以早期發現許多在完成之前需要改進的地方，並立刻進行修正。
https://i.imgur.com/SRrFr39.gif
把各部門製作的草案素材放到遊戲引擎裡面兜起來進行測試
這張草稿我們測試後發現以下幾個缺點：
．只能看到眾角色的後腦，無法呈現逃亡的慌亂情緒與張力
．仰望的視角與前一幕遊戲視角有些類似，運鏡顯得單調
經過討論後決定調整構圖，變成這樣：
https://i.imgur.com/im1TPgx.png
第二版的草圖，也就是玩家現在在遊戲中可以看到的構圖
我們把構圖改成從菈米亞的視點俯瞰停機坪，這麼做有以下好處：
．能清楚看到逃亡三人的身影與表情，彰顯落難、弱勢的感覺
．鏡頭上從遊戲的仰望轉換到俯瞰視角，視覺上更加豐富
正式完稿
好的，上一個草稿我們同樣在引擎中進行確認，一切看似都沒問題後馬上開始進行完稿：
https://i.imgur.com/dWdZYCg.gif
看，很簡單吧？一下就畫好了呢（？
等等，好像哪裡不對！
https://i.imgur.com/2ZOaYOK.png
看看場景模擬圖的顏色，好像不太一樣？
由於進行測試的插圖還是黑白草稿，所以千萬別忘了參考模擬圖與測試場景的色彩，對整
體顏色進行調整。色調與光線必須要與關卡有連貫性，才能讓玩家更能夠帶入整體的氛圍
之中，簡單的說就是要「連戲」。
比對概念圖之後發現整體火光的亮度不足，因此在各處加了一些火焰的環境光。
https://i.imgur.com/LOilZkf.gif
（左邊）原始版本光影偏灰色接不起來（右邊）色調與關卡的燈光較為一致
到這邊，就算完成了吧？
| 製作人：插圖如果動起來，一定更代入吧。
| ＭＥ：嗯，圖層如果分清楚，動起來會滿漂亮的
| 製作人：妳都這麼說了，應該都有整理吧？
| ＭＥ：…(‧︶‧)
| 製作人：…妳有好好整理吧？
| ＭＥ：……(‧︶‧)
於是乎，團隊還有下一個階段要進行
為插圖加上動態效果
圖層管理
圖層管理在協作上是非常重要的一環，因為插圖並不是畫完就完成了，後續可能會經過各
種調整、再利用、交接，沒有經過整理的話這些過程將會變得非常困難重重。
https://i.imgur.com/AsBsTUL.png
未經整理的圖層檔案在交接時會產生不少困擾
錯位（Parallax）
錯位是遊戲開發很常用的一個技巧，簡單的說就是利用不同層次的捲動速度差異營造出遠
近的錯覺，進而型塑空間的立體感。首先我們將插圖分為三層：
．前景：菈米亞，捲動速度快
．中景：艾妲，捲動速度中等
．遠景：李莫＆大魁，捲動速度慢
https://i.imgur.com/TaRA4Xh.gif
在這個案例中我們在根據要錯位的原件分為前、中、後景，特效的部分獨立拆出來，並設
定不同的位移速度
接著只要把各層設定好遠近距離的參數，就能透過我們自家開發的工具自動套用事先設計
好的公式，呈現出各種不同的視差效果。
https://i.imgur.com/45Q7VCy.gif
動起來大概像這個樣子，除了平移以外，相同原理也可以套用在縮放上，模擬鏡頭拉遠拉
近的效果。
\最後再加上特效就大功告成啦/
插圖在繪製的時候會先將煙塵、燈光等等特效分開繪製，最後再由 3D 美術在遊戲引擎中
製作出更有動感的特殊效果，讓畫面更加生動。
https://i.imgur.com/uAnWNTi.gif
整段遊戲流程的演示，在這邊企劃還加上了對話框、轉場、上下黑邊等效果，讓整段演出
更加完善
附帶一提，相信眼尖的玩家應該有發現遊戲中部分插圖角色的眼睛是會閃動的。這些其實
也是特效的一部分。
https://i.imgur.com/TVGXxlu.gif
瞳孔與睫毛的抖動效果
如果拿掉特效的話就會變成這樣
https://i.imgur.com/sGWEglO.png
！？
還有這樣
https://i.imgur.com/ibKIssm.png
啊啊啊啊啊啊啊啊啊啊啊啊！
嗯，總之謝謝大家的觀賞，看了上述的介紹相信你會發現，要完成遊戲中的插圖不只是畫
出一張美麗的圖片就完成了，它同時也包括了：
．理解劇本並反覆在遊戲中測試，使其融入遊戲情境與氛圍
．確保圖片符合規格，能順利交棒給其他夥伴增添更多效果
本文由 SIGONO 的美術設計團隊多人共同撰寫。對於插畫有興趣的話，你還可以到
DeviantArt、ArtStation 看看好作品；關於錯位（Parallax）想了解更多的話，可以參
考以下影片：
The Beauty of Parallax
https://www.youtube.com/watch?v=z9tBce8eFqE
關於 OPUS：龍脈常歌
一個結合太空探索與冒險解謎的敘事遊戲。未知的小行星「龍脈」由於其礦藏蘊藏的巨大
能量，成為眾人爭奪的目標，能唱出龍脈之歌的少女——艾妲，將與立志探索龍脈的少年
一同冒險，揭露宇宙的遠古神話。
如果有興趣，歡迎看看我們的遊戲
https://store.steampowered.com/app/1504500/OPUS/
SIGONO 講堂
關於遊戲開發還想了解更多嗎？歡迎閱讀其他 SIGONO 講堂的文章：
《OPUS: 龍脈常歌》遊戲美術開發 — 角色設計
https://bit.ly/3nLNo2b
《OPUS: 龍脈常歌》遊戲開發精華 — 關卡設計
https://bit.ly/2YasdfT
《OPUS: 龍脈常歌》遊戲美術開發 — 機械設計
https://bit.ly/3ACofcL