Fw: [閒聊] OPUS：龍脈常歌 遊戲開發—遊戲插圖設計

※ [本文轉錄自 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

--
清廉正直射命丸文，世界第一可愛
https://i.imgur.com/XqOptr2.jpg

https://i.imgur.com/zGCOdHq.jpg
https://i.imgur.com/SJR03hx.jpg
https://i.imgur.com/nUbq2HQ.jpg
https://i.imgur.com/0yn2DP5.jpg

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.27.243.59 (臺灣)
※ 文章網址: https://www.ptt.cc/C_Chat/M.1635308901.A.267

※ 發信站: 批踢踢實業坊(ptt.cc) ※ 轉錄者: dogluckyno1 (114.27.243.59 臺灣), 10/27/2021 12:29:41