[閒聊] OPUS：龍脈常歌 遊戲美術開發－角色設計

原文標題：《OPUS：龍脈常歌》遊戲美術開發—角色設計

原文網址：https://bit.ly/3nLNo2b

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-%E8%A7%92%E8%89%B2%E8%A8%AD%E8%A8%88-4da30d80d04c

大家好，我是鸚鵡，在 SIGONO 擔任主美術。

以下是一段進行角色設計時不斷踩雷與試錯與掙扎的紀錄，希望分享這些紀錄過程，可以作為有類似開發需求的人避雷參考，抑或是單純的茶餘飯後閒談內容。

閱讀本文，你會學到：

如何從無到有設計遊戲角色，並將他整合到遊戲環境中

就可以從左邊，變成右邊→

https://miro.medium.com/max/875/1*B3Z6cm4bpAo3pZyF2rgu9w.png

你也可以做得到（大概

好！那我們開始吧，首先是…

從思考設定開始…

開始時要跟劇本家討論，依大綱劇本給出的角色人物性格與特點，去設計角色的特徵與外觀，這階段多半是找參考圖而已，不會真正去實作。

https://miro.medium.com/max/725/1*3z0ZRPbiP4bgYaQzf7UsCw.png

早期的人物設計文件

因為主軸是東方+科幻，主要參考圖的找尋著重在東方服裝，東方裝飾，與現代的剪裁、科幻元素，cyberpunk 這幾個方向。

https://miro.medium.com/max/875/1*pSqCbJLXKpWjY8bDLPUTEg.png

開始設計角色的剪影

依據研究的資料發想，因為人類視覺上第一時間認知到的是角色的輪廓，因此先依據東方感，科幻感繪製剪影，找出靈感。

https://miro.medium.com/max/875/1*ICIT5YIxikYDGDSqHiLwRQ.png

艾妲初期第一個版本，人物體態剪影的差異較少，沒有找出什麼可能性

https://miro.medium.com/max/875/1*L5scQGF50Q6W_6YMvHlDkA.png

製作艾妲第二版，這時已經讓剪影彼此差距很大，順利找出幾個設計方向

細化角色外觀

有了候選的剪影後，就可以開始繪製角色正式的服裝了，此時收到的需求是希望有科幻感，並強調女主角的獨立性，畢竟是駕駛太空船的旅行家。

https://miro.medium.com/max/875/1*fxJYcebnghgi5qru-tdsIA.png

|製作人：覺得應該要是黑長直
|ＭＥ：這是你個人喜好吧？
|製作人：不是
|ＭＥ：…好ㄛ

https://miro.medium.com/max/875/1*zFo5u6cd10sp1EcI6VFw7w.png

於是挑了幾個造型直接轉長髮，因為女主角的個性是屬於內心話不說的類型，覺得長髮比較適合

https://miro.medium.com/max/400/1*kBcnEUxlkBtpPMkdyZfVsA.jpeg

後來大致定好的外觀版本，因為設計的更動，女主不太需要跟東方感有太強烈的關聯，因此放棄了一些飄逸的長擺設計，聚焦在冒險、輕便，獨立的女性感受

找出最適合角色的主色調

開始進行角色配色，由於角色的個性是獨立，渴望被需要，內心自卑，我們認為好像不能用太亮的顏色，挑了些低飽和的顏色測試

https://miro.medium.com/max/875/1*6-2JQI1_7kt9udDBQ8ZD7w.png

尋找靈感中，配合敘述，這時認為藍色、紫色比較符合形象

|製作人：欸，好像有點危險，找個背景丟進去看看
|ＭＥ：好ㄛ

進行環境模擬測試

我們將角色試著放進場景概念圖，模擬跟場景結合的感覺，發現角色完全跟背景的顏色混在一起了，不太能用低飽和的顏色。

https://miro.medium.com/max/875/1*3tr6golEreuIqyThDITGJQ.png

角色在場景中幾乎看不太到…

https://miro.medium.com/max/875/1*VbF-MrqqjcDefAgGXx6WCQ.png

試著用鮮艷的顏色讓她顯眼，但跟角色個性不太合

https://miro.medium.com/max/729/1*urTA0QDJrjO1jkQTYi_7XQ.png

最後選擇了明亮，但實際上灰藍色的艾妲

https://miro.medium.com/max/670/1*qdhA0IWNgNi1fX7zBT279Q.png

灰藍色的艾妲，感覺比較叛逆，內心多了一點秘密的感覺，在場景中也有一定的辨識度

以上，主要角色確定後，就開始設計其他角色…

設計不同文化的角色

故事主要發生的舞台在群山，是一個多樣文化融合的地區，來自各方的旅人在此交匯，為了能在角色登場時，就讓人一眼看出他所來自的地區勢力，在這階段依設定先為各勢力訂個大致的外觀基調。

https://miro.medium.com/max/875/1*AnAczt_9BO3AaXOgXvWJLQ.jpeg

群山：複雜的口袋與低飽和的色彩，較零碎的外觀，種族（？）更多元

https://miro.medium.com/max/875/1*aIhTOpgMUmPXnZVS5HIFnQ.jpeg

礦聯：深藍，方形直角，幾何的外觀

https://miro.medium.com/max/875/1*SuoGKWp8YGW4Z4AJMZfc8A.jpeg

瀛海：紅、白、黑為主基調，帶東方感的剪裁服裝與亞裔外觀

https://miro.medium.com/max/875/1*GjK1Kwii94zxCreXNVAvLQ.png

男主角則是瀛海的逃亡者，需要有點瀛海的特性，以及隱密的特性

https://miro.medium.com/max/875/1*Bmr-pjzzQpmQQpWLapv71g.png

太空船紅樓的制服，同時跟巫塔的女巫衣服類似，但卻有點叛逆的剪裁，去傳達背離巫塔的概念

試著用角色身高表統整

經過幾輪測試定調各方人物後，為了確保不同人都有各自特色，最後是整理成一張所有角色的外觀身高表，這樣有幾個好處：

．提供明確的尺規
．去檢查當角色們站在一起時，彼此的特色夠不夠明顯

https://miro.medium.com/max/875/1*BShrN1sX-3mTHWnaxu280A.png

身高表第一版

https://miro.medium.com/max/875/1*vHsSmGQyXykRhmstcZHA0w.png

依據身高丟到場景測試看看，發現排排站看不太出來體型的差異

https://miro.medium.com/max/875/1*6s3uPjWP3YlJAw6ONrTS-A.png

改良後的身高表

https://miro.medium.com/max/875/1*jHJFhm4MrV3HF9AI-MjzhQ.png

喔喔，這樣清楚多了！

到這階段後，2D 角色已經發展得差不多了，剩下就是要正式的跟場景合成。

開始前，你得有一位 3D 模型師幫忙…

系統訊息：你得到了 3D 的角色

https://miro.medium.com/max/875/1*OFLRmUgdyoCMUiQEN2MjgQ.png

這邊就不多說了，做好設計的訣竅，是常去跟 3D 喝咖啡

接下來就是將角色放到環境中…

系統訊息：你得到了 3D 場景

https://miro.medium.com/max/875/1*U6vHgPtoxUUPBtg90gvcMA.png

hmmmm…

|製作人：嗯…好像哪裡怪怪 der
|3D 美術：好像角色跳不太出來背景
|ＭＥ：好ㄛ

實際研究後，發現主要問題是：角色靜止時，視線無法明確聚焦在角色身上，而我們遊戲動態不多，會讓角色有點沉到背景，想到了幾個解決方案：

．讓人物細節的比例略高於場景，讓視覺集中
．適度加入反光，讓角色在顏色相近的場景也能跳出
．材質加入自發光，確保角色在黑暗的場景，也能有一定的亮度

https://miro.medium.com/max/875/1*4UYdsTj8ZLFuD3JtyusrVg.png

提高人物的細節，讓他更容易在畫面中被凸顯出來

https://miro.medium.com/max/875/1*_oCGCXWt9MCVD8xtd3HOPQ.png

除此之外，角色實際在遊戲中也可能因為環境與燈光的影響而造成便是困難

https://miro.medium.com/max/875/1*KJzRzjNnBU7m8AO1MFFUTg.png

我們利用 Shader 幫角色增加了背光，並稍微增加了一些自發光的效果

完成，我們稍微看一下他動起來時，以前跟現在的差別

https://miro.medium.com/max/875/1*ZgPCeh6k2NACkOpoJuC4QQ.gif

鐺鐺，MAGIC！！

以上雖然輕描淡寫，但實際流程約一年半（吐血），接下來會跟大家介紹角色設計中的另一大重點，就是角色表情的整合過程。

|讓我們進入下一階段，人物頭像整合

繪製初版頭像

開發初期時，最早要找出色塊的分配方法，切出輪廓，定義弧線畫法、陰影顏色面積等。

https://miro.medium.com/max/875/1*_XeosxsiNJarOqb5Nla2RA.png

這階段看起來特別 creepy 不知道為什麼

https://miro.medium.com/max/375/1*PYGSSu74WXU0WYQA7Yi1uQ.png

最後決定的光影方向，完成！

|製作人：妳測試過了嗎？
|ＭＥ：好…好ㄛ

整合測試

為了提早發現問題，這時會拿頭像與其他美術素材進行整合測試，模擬使用於遊戲中的情境。

https://miro.medium.com/max/875/1*XB8NtK07Mo9lfmU-iiTffA.png

早期開發畫面：此時發現角色沒有反光的話，無法從對話跳出，又做了些整理

https://miro.medium.com/max/596/1*3HofpXZwaxRpdotb8PX9Kw.png

早期開發畫面：加入高對比的背光，讓它可以從任何環境中跳出來

https://miro.medium.com/max/875/1*g4nEM0EKMhx55A2aowBP2A.png

早期開發畫面：除確保與其他美術素材風格統一外，放進演出畫面與遊戲場景出現時無違和

最後定案的版本

根據測試結果調正角色的神韻、用色、反光

https://miro.medium.com/max/640/1*ZqvFfAddPrRx1De_-eTbMQ.png

頭像量產

風格確認後進行量產

https://miro.medium.com/max/875/1*C3aTdKEaSMXLGkKNDNsoFg.png

幾個出場比較多的角色們

製作不同表情

表情製作不是分成一次做完，而是先做好喜怒哀樂，丟到遊戲中遊玩；再依序擴大製作量，慢慢填滿現在的世界

https://miro.medium.com/max/875/1*a527-35lFOPGM_qOKUe83g.png

第一批繪製的表情：牙籤人四個表情

https://miro.medium.com/max/875/1*ovAt65YeVIgAsxd4fHDHYA.png

第二批繪製的表情：有角色外觀的四個表情

https://miro.medium.com/max/875/1*MZ8T_QKrM6Z1yp2_h0Zkow.png

第三批繪製的表情：隨實作慢慢增加，而不是想到什麼做什麼

https://miro.medium.com/max/875/1*A8oLTX_o2OogYCwSu4VP2A.png

畫完感到意識模糊的我（咳血）

人物模型加入表情

表情確定後，就是建立角色的表情對應圖，讓角色不會臉白白的很可怕，因對應塊面風格，先採用簡化風的五官

https://miro.medium.com/max/875/1*RUoVh-P7sQhzNZMKAcIvpA.png

開發前期，其實角色是沒有五官的

https://miro.medium.com/max/875/1*1B6iRw-dUtNWzTv2Xs6AYQ.png

期間也有嘗試過比較簡約的五官風格，但驗證後發現表情的辨識度以及情緒比較難以傳達

這段其實是在遊戲幾乎完成時才做的，因為此時已經不會新增表情，我們簡單統計一下各種表情被使用的數量，每個角色挑出幾個重點製作

https://miro.medium.com/max/875/1*4Fm8WKvlg7npOS0Vc_gLhQ.png

只選出最頻繁使用的幾種進行製作

https://miro.medium.com/max/875/1*3Lv_lGS2TYJk-MjwHU3BoA.png

3D 角色的表情可以直接與對話框的頭像連動，及時作業出變化

https://miro.medium.com/max/875/1*TlQv5LYYr16YNL0OoIG1dw.gif

|此時約是專案尾聲
|製作人：嗯…我說你們是不是做太細惹啊
|3D 美術：快要沒東西做了呀
|ＭＥ：好ㄛ（？？？？）

總之，這就是最後完成所有角色的樣子！

https://miro.medium.com/max/1400/1*JqlgVH6-DYFoJE8y3aBdfw.png

看看這個帥氣的站姿

https://miro.medium.com/max/1400/1*IiG4fZyE1_4_ix9XNO9UMQ.png

看看他們的奔跑

https://miro.medium.com/max/1400/1*Jb4dgUsBUU2xy8I6hlBJ1A.png

看看他們的 bug（？

https://miro.medium.com/max/1400/1*Gej2rA_h1aHK3B53ozzf-w.png

看看大家都活著，真好真好

＼完成／

謝謝大家的觀賞，其實過程會發現，不論在 2D 角色發想，還是跟 3D 整合的階段，原則都是一樣，大致有兩點：

．切分工作階段，一步一步往前堆疊
．建立可測試的流程，提早發現問題

這樣就不用等到所有東西都完成後，才發現基礎的設計未完成，那時打掉就很痛了。希望閱讀完這段充滿淚與掙扎的紀錄，可以讓大家之後角色設計的過程快樂一點。

我是鸚鵡，OPUS 龍脈常歌的主美，還畫過幾本漫畫。

有關於角色設計的種種，你還可以參考這些文章：

The Art of Journey
https://www.youtube.com/watch?v=RoHrwAacTwo&ab_channel=GDC

Overwatch: How A Hero us Mei'd
https://www.youtube.com/watch?v=lHevkQIZL2M&ab_channel=GDC

Steam Support :: Dota 2 Workshop - Character Art Guide
https://help.steampowered.com/en/faqs/view/0688-7692-4D5A-1935

關於 OPUS：龍脈常歌

一個結合太空探索與冒險解謎的敘事遊戲。未知的小行星「龍脈」由於其礦藏蘊藏的巨大能量，成為眾人爭奪的目標，能唱出龍脈之歌的少女——艾妲，將與立志探索龍脈的少年
一同冒險，揭露宇宙的遠古神話。

如果有興趣，歡迎看看我們的遊戲
https://store.steampowered.com/app/1504500/OPUS/

--
清廉正直射命丸文，世界第一可愛
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), 來自: 1.175.215.153 (臺灣) ※ dogluckyno1:轉錄至看板 Steam

09/19 10:48