[閒聊] 2D畫很爽3D災難現場 OPUS：心相吾山 設計翻車實錄

[dogluckyno1 (lucky)]

原文標題：2D 畫得很爽進 3D 變災難現場：《OPUS：心相吾山》主角設計翻車實錄

原文網址：https://bit.ly/4dxqqFi

https://medium.com/@sigono/2d-%E7%95%AB%E5%BE%97%E5%BE%88%E7%88%BD%E9%80%B2-3d
-%E8%AE%8A%E7%81%BD%E9%9B%A3%E7%8F%BE%E5%A0%B4-opus-%E5%BF%83%E7%9B%B8%E5%90%
BE%E5%B1%B1-%E4%B8%BB%E8%A7%92%E8%A8%AD%E8%A8%88%E7%BF%BB%E8%BB%8A%E5%AF%A6%E9
%8C%84-0360f0f34939

設計的重點不在於創造兩個獨立的角色，而是打造一個互補的組合。

https://images.plurk.com/wjloeC1ZVDcBkECZmwvXM.png

嗨，我是鸚鵡，在 SIGONO 擔任主美術。

《OPUS：心相吾山》有兩個主角。侑人，40 歲，人生失意的落魄大叔。小漣，外表約 10
 歲，相伴旅程、隨時可能消失的神秘少女。
這篇要聊的不是「怎麼設計一個角色」，而是怎麼讓兩個角色在設計之初就相輔相成，作
為一對組合同時進行設計。

https://images.plurk.com/6Gc4qtFS0wMRzUFEpH8Ze0.png

遊戲的其中一個核心玩法是侑人背著小漣走。這個畫面在初期角色設計時就被納入重要的
設計考量，後續所有造型、配色、姿態的選擇，最終都要考慮到，兩人同框時，是否能順
利傳達希望傳達的氛圍。

閱讀本文，你會學到：

●設計「一對角色」跟設計兩個角色，思考方式哪裡不同？

●每一個造型細節怎麼同時服務兩人的對比。

●紙上看似OK的設計，放進遊戲哪裡有問題？

好，那 gogo。


定義反差：從「帥大叔」的定義開始

一切從劇本開始。侑人是「曾有信念、如今耗盡」的頹廢感，小漣是「純真活潑、孩子氣
、帶點中性」。在動筆之前我先釐清這組反差的年齡、氣質、體型，等等，為後續進行設
計立定目標。

接著是大量的參考收集。此時彷彿像逛網拍，把所有符合「飽經歷練的帥大叔」「中性活
潑小女孩」的參考全加進購物車，然後帶了一大車資料去跟製作人討論。

https://images.plurk.com/m6hNYVWeF98UX0lIt05Wz.png


| 製作人：我覺得我們對於頹喪帥大叔的定義不太一樣欸。
| 我：欸 ？！

事已至此，團隊坐下來討論：到底什麼是帥大叔？訪問一圈公司同仁，每個人答案都不一
樣，100 個人心中有 101 個哈姆雷特（？）尚·○諾、○努·李維、金城○光是「帥大
叔」的定義就能打一架。

最後製作人提出一點：要考量會代入主角的那群玩家。比起「覺得侑人帥」，更重要的是
「想成為這樣的大人」。這個提醒改變了後面的設計方向。侑人不能只是帥或好看，他身
上的每個細節要讓人覺得「這個人實際生活過」。

小漣的方向從一開始就比較明確：充滿活力的中性氣質，清透、好動且精力充沛。但收斂
起來比侑人還難。侑人調了幾版就接近完成，小漣反而發想了非常多版，方向各異。最終
多次修改後才訂版。

https://images.plurk.com/7sGcJ8bj1df3bg2rj57Cg1.png
第一版的兩人草圖，現在回頭看設計真的是有夠普通。

https://images.plurk.com/2uN1tefSCQkkoMLlEOJywL.png
小漣的多版草圖，從外觀、氣質到體態都有迭代。

https://images.plurk.com/2tWIFNYhkoIQcNEgMLpvLq.png
被淘汰的方向。去掉了過於女性化的提案，也剔除了建模上難以實現的組合。


色彩美學：不只是好看，更要隱含世界觀

配色也在這個階段一起決定。侑人主色紅，小漣主色藍。

除了顏色上的對比外，遊戲整體的色彩系統裡，紅代表危險與負面，藍代表真實。

配色在這邊除了傳達角色性格外還隱含了世界觀裡的寓意。

https://images.plurk.com/7xKFHXJukkEonFl9bkT5n2.png
初始的多組配色方案。

大致選定一個顏色組合後，先請3D設計師制作第一版的粗模。放進也正在開發中的關卡原
形同步測試。

https://images.plurk.com/2y9acZEK0OngdGFNXCvlgJ.png
初始原型測試用的角色粗模。

但此時發現目前的配色放進遊戲後出事了，侑人的大紅外套放進關卡測試，顏色過於突出
，整個畫面焦點被他的背搶走了。

https://images.plurk.com/2cbu6JP0HqxaIrU4VvzVaD.png

除了關卡測試外，在製作場景色彩概念圖時有發現一樣的問題：

https://images.plurk.com/1u3W1KZPVb0ll6dOHbHAGj.png
同關卡原型，大紅色在不同色彩、光線下的關卡都顯得非常搶眼。

設計勢必得修改，想了一下決定不要如此直接的使用紅色，而是作為部分元素或是混合的
方式出現在外觀上。

https://images.plurk.com/4HWs5lR8eTffx4hg4IiGvv.png

最後換成低飽和的灰粉色加白直條紋。紅的象徵還在，在畫面中仍是重點但不失和諧。


細節堆疊：用配件說故事

方向確定後進入細節設計，

侑人是個有過去的人，身上的配件需要能與他過去的經歷呼應。
粉紅白條紋襯衫層層疊穿、皮革郵差包、項鍊、手環、繼承自阿帕的老底片相機。每一件
都有來歷，加在一起都是他生活的痕跡。
小漣淺藍無袖背心、短褲、夾腳拖，身上幾乎沒有多餘的東西。紅色編織繩是唯一強烈的
顏色，讓整體不會淡到失焦。

https://images.plurk.com/5DTFvRmrFAFBqbUBx0wtzI.png
https://images.plurk.com/1MrKEj50YOZHaGm2WhUlVO.png

除了配件之外，也設計了不同狀態下角色的姿態、表情。讓角色的個性能傳達的更鮮明。

例如：小漣的坐姿測試，內八偏少女感，盤腿更放鬆更中性，最後選了盤腿更符合他的性
格。

https://images.plurk.com/1SspYfs8UhRQx34ZAtawu2.png

表情部分。繪製了兩人的情緒表達方式，侑人是苦笑、嘆氣、沉思。小漣是開心、好奇、
驚喜。

https://images.plurk.com/2q2gYdaBCXOSCz2v7jnrDH.png

再延伸更多表情、動作、反應，將角色個性逐漸刻畫的更立體。

https://images.plurk.com/3bqnd6MKKl6Inb4jfYATCH.png


實測：當 2D 走入 3D 的殘酷考驗

現在外觀大致設計完成，兩人的對比與外觀已經差不多到位。接下來又是放進遊戲裡考驗
的時刻。

這次角色草圖階段就做了粗模丟進關卡跑跑看，因為「兩人同框」產生的問題，只有放進
遊戲裡才看得出來。

第一個發現的問題是身高。設定上兩人差快 50 公分，看起來合理。但實際丟進遊戲，小
漣矮到快跑出螢幕框，演出鏡位設定起來頗艱難。重要的是需考慮到在遊戲中兩人同框時
的畫面平衡。最後綜合參考各種關卡場合，才調出能共存的比例。

https://images.plurk.com/79yVRDm7b5jnBIfdnZaI5e.png
小漣矮到快跑出螢幕框了

最終遊戲畫面：

https://images.plurk.com/60sZx3TleIwiVTAux7Zbkt.png

既然前面提過侑人背著小漣走這個動作作為角色核心的互動，也為遊戲中多次出現的角色
行為，那這邊也是要來測試看看，確認在不同關卡、鏡頭、光源下是否都沒問題：

https://images.plurk.com/4vgHo9QcN2J8J0TKQmHxkW.png

其他狀態也測一下

https://images.plurk.com/756r41tZD8V8VN1tl2bLDo.png

結果測試一陣子後發現角色身上的顏色又出問題：
小漣目前的卡其色短褲，除了易跟膚色混淆、在場景中整體也缺乏重量，
經歷一番修改最終才變成目前的設計樣貌。

https://images.plurk.com/6MoObkVQEuYJYU9yf0TyUZ.png

修改後放在關卡中的效果：

https://images.plurk.com/5lvASX73fyPvAy5KrfCOIp.png

角色大致外觀奠定後，接著要來設計角色表情，
想著：「角色設計外觀時表情也繪製了不少，應該可以直接交給3D設計師吧～」

| 「這一切溝通會很順利的，對吧？」
| 「對吧？」

此時天真的我仍不知道後續會發生的事情，於是就將之前繪製過的表情作為參考，開立了
表情需求的項目交給了3D設計師。

https://images.plurk.com/2RMxHeH0c4Ik1xiPBnUPJs.png
開立的角色表情設計圖


3D設計師完美的還原的設計圖，我得到了一堆角色表情，

https://images.plurk.com/TzmPxPgDZOCQFrI5orJ0D.png
完成的表情

| 「接下只要按照劇本，對照劇情設定表情，就能很好的呈現角色情緒，對吧？」
| 「對吧？」

然而在角色表情投入使用後，過了一陣子，

| 演出導演：我覺得角色表情好難用誒。
| 我：欸 ？！

了解之下發現明明角色表情做了這麼多，實際使用到的數量卻不到總數的兩成，原因在於
：

開立這些表情時，只考慮到了「2D的狀態」，在繪製插圖、漫畫時，為了精準地呈現當下
情緒與張力，只取了一段情緒演出中表情最誇張的地方，沒考慮到「3D製程」中的實際使
用情況，導致這些表情如果直接使用在動畫演出中，會顯得角色長時間表情都很誇張且不
自然。

以這個開心笑的表情為例：

https://images.plurk.com/3N3blgrmizpfIb4N8bAzbD.png
單看起來沒什麼問題

實裝進去後，看起來實在是開心過頭了。

https://images.plurk.com/aI80GjlOZUXZiPp6teMm7.gif

其他場戲，除了看起來太開心外，跟說話動畫疊加在一起顯得更奇怪。

https://images.plurk.com/2a98ZOQfJAsPMNC6QuzbOC.gif

後來經過實際測試與溝通後將表情全數調整了一遍，
表情的設計也改成：多數為可泛用、可與講話動畫配合疊加，情緒較為平靜，更適用於多
數場合。

以剛剛的場景為例，修改後變成這樣：

https://images.plurk.com/6xiu9MGMM7tdRabA7JcfIL.gif
情緒演出更自然了

角色多樣的情緒才像如今這般呈現在玩家眼前。

https://images.plurk.com/1sFEMmx7Svockr978zoqQ.png

---

最終兩人的完稿

https://images.plurk.com/4pbWKPl6aUFUOhR3IpzNg8.png

其實開發期間沒有某個明確感受到「完成了～」的瞬間。
「OPUS：心相吾山」的這組主角是隨著反覆測試逐漸修改、調整，慢慢完成的，
因為核心玩法就是侑人背著小漣，這個組合的畫面每天都在玩家眼前跑。
遊戲中的演出、過場動畫，兩人也有不少互動，設計上要確保兩人的個性對比與互動的火
花。

在此次的開發中，角色設計不是把兩個人分別畫好看就好，而是讓他們站在一起的時候，
玩家可以接受到想傳達的故事、情緒。

https://images.plurk.com/5TZlBoiiNmb6SghFEWAD8O.png

我是鸚鵡，《OPUS：心相吾山》的主美術，還畫過幾本漫畫。這篇記錄了怎麼把兩個角色
從各自的設定，逐漸打磨變成一組互補的角色。

--

SIGONO 主美術分享，由 2D 轉 3D 上，角色設計有哪些需要注意，以及哪些容易翻車的
點，SIGONO 講堂還有許多文章分享，歡迎點進連結學到更多關於遊戲設計的眉眉角角


--
清廉正直射命丸文，世界第一可愛
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), 來自: 218.173.18.88 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/C_Chat/M.1778256187.A.566.html
推 mionkuon: 推
推 lsjean: 標題以為在臭，原來是自我檢討
推 SPDY: 遊戲實際運行 才會體會到演出不是放進去能擺拍就好
推 wolf3363: 推分享
推 WLR: 推分享
推 abysszzz: 做遊戲果然有好多疑難雜症需要克服
推 REVERB: 推分享
推 Sexcalibur: 推分享
推 jay920314: 推分享
推 keinsacer: \好開心啊！/ 這個真的是踩了坑才會注意到XD
推 jeff7897: 推推!
推 istonbo: 推推！
推 HappyKH: 推分享，理所當然的效果但是其實真的不簡單
推 astinky: 推