[閒聊] OPUS：龍脈常歌遊戲美術開發-地圖與UX設計

看板	C_Chat
作者	dogluckyno1 (lucky)
時間	2021-12-29 13:41:56
留言	16則留言 (14推 0噓 2→)

看板C_Chat

原文標題：《OPUS：龍脈常歌》遊戲美術開發—地圖與 UX 設計原文網址：https://bit.ly/3quiGdG 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

左邊為最基本的核心概念循環，右邊為將其細分後的大略行為流程 | 遊戲企劃：整個遊戲的流程差不多就長這樣了，可以開始畫設計風格了 | ＭＥ：沒問題，這應該也不會改了吧 | 遊戲企劃：… | ＭＥ：不會改，對嗎？從最基本的循環稍微細分後會開始找出各種參考圖，去填補所有的空白流程。這個步驟的好處是，能夠依據流程跟介面的需要，快速找出基本的設計元素，主要有：．大小．版型．介面與文字的關聯 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://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

總共規劃了12個區域，並為他們特製了特殊的宇宙背景 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/4060/1*XroJfQ1OnKbvfH8YsuuGrg.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

這時已經可以掌握整體美術…咦？ | 製作人：好黑啊…… | ＭＥ：一開始的設計沒做好…空域顏色有點太像了 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/3940/1*pYLImsZcpGvmMvAIDgjWxA.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