[閒聊] OPUS:龍脈常歌 遊戲美術開發-地圖與UX設計
原文標題:《OPUS:龍脈常歌》遊戲美術開發—地圖與 UX 設計
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-%E5%9C%B0%E5%9C%96%E8%88%87ux%E8%A8%AD%E8%A8%88-c41a53273a8b
SIGONO
嗨大家好,我們是龍脈常歌的產品研發團隊,龍脈常歌的宇宙旅行是一段複雜的使用者體驗,會經過各種特殊的操作,像是商店買賣、改裝船體、地圖移動、拜訪城市,要如何確保這些流程的美術風格都一致,必且符合氛圍呢?
閱讀本文,你會學到:
如何統整複雜的使用者體驗,並建立設計流程
你就可以…
https://miro.medium.com/max/875/1*RvjesUyXe-q1AdNUhET98Q.png
不多說,我們開始吧,第一個步驟是…
先理解產品的循環…
https://miro.medium.com/max/875/1*2g_gpx_QbhOMgkOVIAsgZw.png
| 遊戲企劃:整個遊戲的流程差不多就長這樣了,可以開始畫設計風格了
| ME:沒問題,這應該也不會改了吧
| 遊戲企劃:…
| ME:不會改,對嗎?
從最基本的循環稍微細分後會開始找出各種參考圖,去填補所有的空白流程。這個步驟的好處是,能夠依據流程跟介面的需要,快速找出基本的設計元素,主要有:
.大小
.版型
.介面與文字的關聯
https://miro.medium.com/max/2000/1*ZwHklZ_uh9JlVnuhpp61Uw.png
https://miro.medium.com/max/1400/1*bAiH8fIzRwsKRkkhuJv5BA.png
早期的循環圖完成,確保不會有大更動後,接下來就是正式進入設計階段,會根據不同的使用者流程,進行概念設計,有幾個重要思路:
.思考每一個使用者流程,各自的視覺比重是多少
.依據比重的多寡,逐次建立設計流程的順序
https://miro.medium.com/max/875/1*ymvQbQNzP5RpxVUgvtXNeQ.png
https://miro.medium.com/max/875/1*L80LmRgs5PLvy5EFKCyR1w.png
接著依據比例,我們試著將視覺拆成三種感受範圍「面」「線」「點」分開來看,就是:
.「面」宇宙地圖的整體概念:綠色
.「線」不同空域的顏色:藍色
.「點」不同文化的設定:紅色
https://miro.medium.com/max/875/1*Hm1XxXwhmuQKZf0VH26Tjw.png
以下從影響層面最大的宇宙視覺設計開始設計,由大而入小
讓我們從「面」開始
由於遊戲大多時間在宇宙尋路,得先找出宇宙的整體風格
https://miro.medium.com/max/875/1*VcObbZijCN85pO038LH5BQ.png
宇宙的設計有幾個目標,分別是:
.決定尺規
.傳達浩瀚感
.介面必須清楚辨識
第一個困境:尺規
記得遊戲的前提是:「在宇宙中尋找小行星」,但太陽系在真實的宇宙中,其實是不可能看到小行星的,就算是其他氣體行星,頂多是個發光的小點,要如何創造寫實的宇宙,卻能保持他的辨識性,我們做了很多嘗試:
https://miro.medium.com/max/875/0*vHTHSSwcV1Ds8JTK.png
https://moonblink.info/Eclipse/why/scales
| 製作人:那讓小行星發光呢?
| ME:小行星不會發光呀?
| 製作人:就當作他受到太陽光反射然後太空船的電磁輻射會特別顯像…(以下省略一百| 字)
| ME:好…好喔
https://miro.medium.com/max/875/1*IR9_RMXGu6qtlBNe2NshWg.png
| ME:哪個是太陽哪個是待探索地點都混在一起了…
| 製作人:就讓太陽超大超亮;氣體行星普通亮;小行星微亮。大家都在發光的世界中,| 就沒有問題了。
| ME:真…真實性?
| 製作人:https://i.imgur.com/dS0BZBy.png(天使笑臉 Emoji)
https://miro.medium.com/max/875/1*nUWsUsJQsW-9u_1x3sz7Iw.png
加了一個太陽在正中央,因為太陽很亮很顯眼,其他東西再亮也沒差。這裡就是一個恆星系了。
第二個困境:傳達浩瀚感
我們遊戲的地圖,在實際操作上是平面的,但我們希望玩家在旅行的過程,可以感受他在一個巨大的世界移動,為了做到這一點,做出很多嘗試。
https://miro.medium.com/max/625/1*hs8f3v7ouS2-6WQJ1aC1hA.gif
https://miro.medium.com/max/625/1*VZvm8FUyYpljYQYkbULcTg.gif
讓點跟點的移動,有快速的過場,去創造不同空域的移動感
https://miro.medium.com/max/800/1*bkVuIwcuMNzG8vqCWDKPWg.gif
https://miro.medium.com/max/800/1*uABnq2jCUMOhP6JaU8Kklg.gif
第三個困境:介面必須清楚辨識
太陽系的每個地點透過一個點作為代表,而每一個點都是可以調查的,但如果做的太明顯,就會破壞代入感。這讓我們在設計上做出不少取捨。
https://miro.medium.com/max/625/1*BEUTVWm6nXwCyY8QijavEQ.gif
另外宇宙中當玩家要從目前的位置往其他地點移動時,需要經過幾道步驟
https://miro.medium.com/max/875/1*NV5qXi3eVXD_fGU9IHU0lQ.png
而如何透過視覺變化讓玩家了解地點當下的狀態,就變成一個重要的課題。我們為每一種狀態分別設計了不同的提示,讓玩家用看的就能知道該地點的狀態。
https://miro.medium.com/max/875/1*4p4kV8Tu8yceHfkttekUjg.png
這樣宇宙的風格大致都底定了,再來就是下一個階段:線的串聯。
關注體驗的「線」段,繪製空域
在這個階段,我們針對地圖進行分析,找出了幾個視覺的關鍵地點,並把旅行過程用線段串聯起來。
https://miro.medium.com/max/2000/1*XSY8hpcxm5Me-sg5fUnfJA.png
設計師與劇本討論遊戲的世界觀設定,試著分配顏色與情緒到不同線段的空域,讓每一個空域都擁有自己的特色。
https://miro.medium.com/max/1400/1*AzterXKlLRVdpJ4E_LQdQg.jpeg
https://miro.medium.com/max/1400/1*aUwYiF-LInKzvREWj0EHng.png
https://miro.medium.com/max/4060/1*tzCtU-MKVWJDrbhwU5vDbg.png
每一個區域,都會有設計文件指出他的歷史背景
到這裡就差不多知道每個區域該長什麼樣子了,於是挑選了每一個空域中的代表性太空站,試著去發展他。
針對體驗的每個「點」進行繪製
開始時,我們挑選了每個空域中關鍵的一兩個太空站去發展,由於遊戲中有不同的勢力、特色,必須找出正確的方式表現出差異性。像是相對尺寸、顏色、造型等都是關鍵元素。
我們使用了原本的角色設計圖,去發展相對應的地點可能的樣貌。
群山小行星帶空域
https://miro.medium.com/max/2000/1*yTPU_V_i5LWTD1dVcBq5Gg.png
瀛海幽暗空域
https://miro.medium.com/max/2000/1*7ua10gzuM76GtqT5CZbjUg.png
行星礦業聯合空域
https://miro.medium.com/max/2000/1*mT4rVjykKAT46IcPXAON4Q.png
接著,我把們設計好的地點排列起來看看。
https://miro.medium.com/max/1400/1*09kD7Amo_kQHQS6GnPhiSw.png
| 製作人:好黑啊……
| ME:一開始的設計沒做好…空域顏色有點太像了
https://miro.medium.com/max/875/1*ven-XvLe86FfVSrDJQpkfw.png
https://miro.medium.com/max/875/1*MIFIE7hUO6VBg11UoQsvUA.png
到這裡為止,地圖流程差不多就底定了,但如果把地圖流程攤開,其實還有更細節的子流程
https://miro.medium.com/max/875/1*l27mK7veRydAhXq52eb5yw.png
這時就開始補完所有流程的設計,進入最後的細節填補階段。
增加更多的點
以下面這段空域為例,因為已經設定好大致的氛圍
https://miro.medium.com/max/875/1*1Cglop_enJcbblCM1wguVQ.png
https://miro.medium.com/max/2000/1*R27dgVI0XecAsAUSmdY3Sw.png
https://miro.medium.com/max/2000/1*CSi8oDMQq05hHH17T_YWyA.png
https://miro.medium.com/max/2000/1*v-YcACJL8T4kFcSGkM7wHw.png
https://miro.medium.com/max/1000/1*ZWDUB46H3KQZWmFfvvcmDw.gif
https://miro.medium.com/max/1000/1*JO5PWn2LfruHR98q6yQu6w.gif
整合檢查
我們會把空域畫面整合在一起瀏覽,包括地點、飛行過場、船體改造、共鳴、子地點,確保所有光影與情緒都是統一的。
https://miro.medium.com/max/3940/1*lbvaQ6cc3UY92A0GMZRGkA.png
將同空域在不同遊戲流程中的畫面擺放在一起進行檢查
另一個關鍵是文件的編寫,因為涉及的地點與關聯性非常龐大且錯綜複雜。因此我們將每一個地點分別產出一份對應的美術資源表,我們透過這個表進行各種評估與測試,並確定開發資源有沒有分配失當。
https://miro.medium.com/max/1400/1*t_qtPp4N9C_HaXI2DTYovg.png
差不多到這階段,整個地圖的美術設計都完工啦(咳血)
最後完成的地圖流程
經過各式各樣的優化後,最後總算是完成啦!
https://miro.medium.com/max/600/1*n70-G767p-gIkfqIuJFQzA.gif
結語
說真的,地圖的美術設計蠻硬的(汗
讓我們回憶一下開始時的分享目標:想知道如何統整複雜的使用者體驗,並建立設計流程的人
現在可以總歸成幾個點:
.找出使用者流程中關鍵的點線面體驗
.針對不同體驗,逐步的去增加設計,而非一次到位
.畫好畫細不會創造差異,分配資源才會創造視覺刺激
以上,就是OPUS:龍脈常歌的地圖美術設計啦!有關於地圖設計的種種,你還可以參考這些內容:
.The Art of Game World Maps
https://80.lv/articles/the-art-of-game-world-maps/
.Designing The World of The Witcher 3
https://www.youtube.com/watch?v=oSS5T4od-GQ
關於 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
《OPUS:龍脈常歌》遊戲美術開發 — 遊戲插圖設計
https://bit.ly/3nwbFaL
--
清廉正直射命丸文,世界第一可愛
https://i.imgur.com/XqOptr2.jpg
https://i.imgur.com/SJR03hx.jpg
https://i.imgur.com/nUbq2HQ.jpg
https://i.imgur.com/0yn2DP5.jpg
--
推推
歌真的好聽 推
推
讚讚 Steam有收
猛
先推 真的讚
推推
感覺可以出個改船的探索遊戲
推
這款steam評價真的高,有收
音樂超讚 推
覺得故事稍短,感覺還有很多發展性,希望有機會可以補DLC
C
推
推 真的很喜歡你們的美術
好文推推 只好再玩一輪了
19
[閒聊] OPUS:龍脈常歌 遊戲美術開發—機械設計原文標題:《OPUS:龍脈常歌》遊戲美術開發—機械設計 原文網址: %E6%88%B2%E7%BE%8E%E8%A1%93%E9%96%8B%E7%99%BC-%E6%A9%9F%E6%A2%B0%E8%A8%AD%E8% A8%88-1c1edb3c057418
Fw: [閒聊] OPUS:龍脈常歌 遊戲美術開發-角色設計作者: dogluckyno1 (lucky) 看板: C_Chat 標題: [閒聊] OPUS:龍脈常歌 遊戲美術開發-角色設計 時間: Sun Sep 19 10:47:31 2021 原文標題:《OPUS:龍脈常歌》遊戲美術開發—角色設計 原文網址:12
[閒聊] OPUS:龍脈常歌 遊戲美術開發-角色設計原文標題:《OPUS:龍脈常歌》遊戲美術開發—角色設計 原文網址: %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-4da30d80d04c8
[閒聊] OPUS:龍脈常歌 遊戲開發—遊戲插圖設計原文標題:《OPUS:龍脈常歌》遊戲美術開發—遊戲插圖設計 原文網址: %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-e7e3a5aa3d7b8
[閒聊] OPUS:龍脈常歌 數位官方美術設定集 上市國產遊戲佳作《OPUS:龍脈常歌》的數位版官方美術設定集正式上市啦,只要新台幣152 元就可以帶回多達130頁的豐富內容,美術概念與關卡設計等資料,還在等什麼,趕快加 入購物車吧! 美術集網址: --6
[閒聊] 繼承OPUS:靈魂之橋續作龍脈常歌公開預告原文標題: 繼承《OPUS:靈魂之橋》精神續作《龍脈常歌》公開新預告影片與 Steam 頁面 原文網址: GNN 記者 Jessica 報導6
[閒聊] OPUS:龍脈常歌 遊戲開發精華-關卡設計原文標題:《OPUS:龍脈常歌》遊戲開發精華—關卡設計 原文網址: %E6%88%B2%E9%96%8B%E7%99%BC-%E9%97%9C%E5%8D%A1%E8%A8%AD%E8%A8%88-8ab0291d209e 嗨,我是 Scott,在 SIGONO 擔任主關卡設計兼執行製作。6
Fw: [閒聊] OPUS:龍脈常歌 遊戲開發—遊戲插圖設計作者: dogluckyno1 (lucky) 看板: C_Chat 標題: [閒聊] OPUS:龍脈常歌 遊戲開發—遊戲插圖設計 時間: Wed Oct 27 12:28:18 2021 原文標題:《OPUS:龍脈常歌》遊戲美術開發—遊戲插圖設計 原文網址:5
Re: [閒聊] OPUS:龍脈常歌 遊戲美術開發-角色設計自己的文章自己回 SIGONO 官方 Youtube 頻道有推出關於角色設計的說明短片,可以在3分鐘內快速了解在 《龍脈常歌》這部作品中,豐富而多元的角色是如何設計的,從原型到後來的整個專案, 一步步解釋整個設計流程。4
Fw: [閒聊] OPUS:龍脈常歌 遊戲開發精華-關卡設計作者: dogluckyno1 (lucky) 看板: C_Chat 標題: [閒聊] OPUS:龍脈常歌 遊戲開發精華-關卡設計 時間: Sat Oct 2 10:30:28 2021 原文標題:《OPUS:龍脈常歌》遊戲開發精華—關卡設計 原文網址:
爆
[鳴潮] 日ios榜登頂爆
[閒聊] 粽子加什麼是不可原諒的?爆
Re: [鳴潮] 日ios榜登頂爆
[推投] 零之使魔 最喜歡女角「1票」爆
[閒聊] 王牌流螢再輸484五星自選就穩了?90
[閒聊] 在步槍前面裝刺刀是真的有用嗎82
[閒聊] 神燈猜謎 1000P76
[赤燭] 九日榮獲91%極度好評74
[閒聊] 有沒有打架畫面很好看的動漫?70
Re: [鳴潮] 日ios榜登頂62
[鳴潮] 我開始懂為什麼吟霖那麼強了65
[閒聊] 米哈遊現在是不是很緊張80
[蔚藍] 阿拜多斯主線更新後笑不出來的梗爆
[閒聊] Valve 公司內設陷阱一網打盡SJW59
[閒聊] 地球有可能零下150度嗎?56
[閒聊] 484可以正式宣布鳴潮復活了?53
[閒聊] 誰最適合當hololive的看板娘?54
[順位] 週刊少年JUMP 2024年28號 斬+休刊+新連載50
[問題] 有哪些毀容了但還是很帥的角色48
[閒聊] 鳴潮打得贏絕區零嗎49
[火影] 鼬怎麼好像不太怕阿凱?47
[討論] 中華一番如果粽子對決會怎麼進行47
[深藍] 1999最吸引你的點是什麼47
[灌籃高手] 宮城比三井強,這點毋庸置疑吧?46
[鳴潮] 所以廠商膝蓋夠軟Q還是有用的吧?46
[閒聊] 手遊罵「廢物」竟慘遭永久停權45
[情報] Re0 三期 新視覺圖 PV44
[閒聊] 明天的the first take為結束樂團44
[情報] 精靈小姐瘦不了 7月6日 減量開始34
[閒聊] 鳴潮是不是證明了龍傲天劇情就是受歡迎