《五行》從0到1設計遊戲——美術向覆盤

上次寫了策劃向的覆盤，本篇是美術向的覆盤，會把設計思路好好記錄下來。美術的設計時間整體比遊戲策劃的時間段滯後一點，但是當時時間比較緊張，所以基本上算是同時進行，而且我也想用美術預研的方式給我們遊戲策劃一些設計啟發。（下圖還是時間進度圖）


在美術開發的方面，同樣也包括三個階段吧，如下圖。這篇還是一樣像流水賬的敘述方式，儘量面面俱到，但是也毫無重點，各位讀者姥爺可以跳著閱讀，撿需要的看哈~~


注：其實互動文件應該算策劃類的，但是因為這次遊戲的介面UI還是比較簡單的，而且和GUI的結合考慮會更多一點，於是我就把UI放到了這個部分~

一、美術風格預研&UI文件

1.1 美術風格預研

在實習的時候看了KM上的課程，瞭解了情緒量表這樣的方法，我就尋思能不能活學活用下，剛好就參加了這次比賽，於是我就試了試，很簡單地構建了量表，來對我們自己的遊戲找到合適的美術方案。

因為我本身是UI背景的設計師，所以我主要是用從介面設計的角度來構建我們的情緒量表。首先是形態方面，我在pinterest找了不同型別的遊戲介面，將這些遊戲建立橫向維度，分別為“圓潤——鋒利”和“寫實——扁平”。


最後再將這兩個橫向維度重新構建直角座標系，並賦予他們形容詞語義，如下圖。


第二，是色彩方面，我直接沿用了色彩形容座標系，來對我們遊戲的配色進行輔助指導。


在構建了這樣兩個座標系基準後，我們就可以根據自己遊戲的世界觀來進行選擇，我們想要做什麼型別的遊戲就可以去選擇對應的形容詞下的形態和配色，再接著進行具體的設計了。

但是這個時候我們的策劃和美術屬於並行的情況，我們遊戲世界觀還沒確定下來，我們討論過很多種風格方向，主要有活力的“複製派對”、無厘頭的“廁紙大戰”（此時還沒有確定五行，所以遊戲裡都是白牆，看起來像廁紙）、科幻感的“複製實驗”，這三個方向。我根據這三個遊戲名，提取了不同遊戲的關鍵詞（可以視為seed的雛形，或者是設計基因），如下圖。


我把這些預研工作整理成ppt給我的團隊小夥伴看，大家就會比較有直觀的感受，我們遊戲的美術最後可能是什麼效果，怎樣的傾向性了。比如程式同學就說，他會比較喜歡扁平化、鋒利一點的UI，覺得那種比較酷。這樣的方法和基此獲得的團隊意見也為我後續確定美術風格打下了比較好的基礎。

1.2 UI文件

我先以“廁紙大戰”這個遊戲名為例，將玩家在資訊獲取方面進行了梳理，列出了需求點。主介面需求點：1.開始遊戲的按鈕；2.遊戲操作說明（可選）；3.製作人員的按鈕（可選）。對戰介面需求點：1.遊戲操作說明（可選）；2.玩家姓名；3.玩家血量；4.道具獲取提示；5.遊戲規則提示；6.道具欄（顯示道具獲得情況）。結算介面：1.玩家姓名；2.排名資訊；3.退出/返回按鈕。製作人員：1.製作人員資訊；2.返回按鈕。

接著，根據這些需求點，我做了UI文件初稿的介面說明，如下圖。


在遊戲中還包括“撿道具”和“死亡跳轉”，此時還沒有建立化鬼玩法，所以這裡展示的是原本的死亡流程：死亡後跳轉顯示他人視角。後來沿用了這裡的死亡介面佈局，並增加了化鬼介面的設計，如下圖。


二、結合“五行”，確定主視覺

8.2日的時候我們進行了電話會議，討論過程中我們決定用“五行”相生相剋的特點加入到我們原本“複製牆”的遊戲規則中，因此我們的遊戲美術風格也需要和“五行”具有相關性。再結合我之前做的美術預研，我們的小夥伴傾向於扁平、科技感一點的UI風格，於是我對我們遊戲進行了關鍵詞總結如下：


接著我找了很多的參考圖，或是風格圖片，來為美術設計找靈感：


根據靈感圖，我繪製了遊戲主介面的插畫。為了和標題《五行》貼合，主介面的邊緣由五行元素環繞，左邊畫了松樹代表“木”，右邊的堅硬寶石代表“金”，下沉的海浪代表“水”，兩側燃燒的火焰代表“火”，最後背景居上的山峰代表“土”，畫面居中靠上排版標題，我用書法字“五行”和左下角印章這兩個元素來再次體現“國風感”，居中偏下留有一部分空白來放置開始遊戲的button位置。

標題的書法字為了防止侵犯版權的問題，我特意是自己手寫了好幾版不同的“五行”，最後選擇了目前呈現的這版字型。


我先畫了草圖發到團隊群裡大家看效果，確定定好沒有問題以後，我對一些元素的細節形狀進行了草圖修飾。根據傳統“五行”中，黑水黃土紅火青木白金這樣的經典設定來配色，但是還是做了顏色的細微調整，比如把黑水的黑色會調得偏藍偏紫，區域性用些高飽和度的青色和玫紅色，讓畫面兼具“科幻感”和“國風感”並保持畫面的和諧。


這張插畫為我們其他美術構建做好了引導作用，包括之後的戰鬥UI設計，場景美術的配色等等都提供了很好的參考。

三、2D GUI&3D場景

3.1 2D GUI

這時候我根據自己之前做的UI文件裡的框圖進行介面美術設計。首先是戰鬥介面的道具欄和五行規則告知欄。因為不同元素相生、克和被克的元素是不同的，為了減少玩家的記憶難度。快速瞭解規則，這個規則告知欄和道具欄分別用五套元素進行設計，而這五套元素的設計圖形源自於主介面設計，讓視覺風格具有一致性。


道具的icon設計也找了很多和我們遊戲調性相似的圖示做參考，並根據策劃對道具的設定要求，我一一對應想出了符合功能又符合本遊戲風格的形態載體，分別是閃現卷軸、騰雲靴、鑿牆錘和火藥葫蘆，根據我想出了4個道具文字進行了符合遊戲風格和整體配色的icon設計，讓icon也同樣具備扁平、科幻和國風這三個美術關鍵詞。


除了最主要的戰鬥介面和道具icon的GUI設計，還有包括幾個流程階段中短暫展示的介面設計，在這幾個介面設計的過程中，我也始終保持介面美術符合遊戲的三個關鍵詞（扁平、科幻、國風）和配色基調。


為了讓遊戲的戰鬥畫面更豐富，幫助場景同學豐富場景的效果，我簡單地做了美化牆體的工作如下圖，這種效果讓人有“唸經”的感覺，也是一種符合我們遊戲世界觀的設計~（其實就是給牆加了粒子特效，而且還加得非常廉價，這方面我真的不是我擅長的部分，抱頭）


除了出以上的UI切圖，很重要是在遊戲內的美術效果也要達到標準。所幸以前有過unity拼介面的經歷，雖然這次用的引擎是莉莉絲的自研引擎，但是他們的UI思路是類似的。我會用引擎新建一個工程檔案，在裡面把UI的位置數值截圖記錄（如下圖），發給程式同學，這樣可以保證邊緣繫結的適配方式是由我決定的，美術效果不會受到影響，也能減輕程式同學的工作量。


3.2 3D場景

這個部分不是我負責的，我主要給我們的場景同學提供了靈感圖進行設計參考：


我們的介面也分為了以下的迭代修改的過程，通過一步步細化，反覆調整模型的面數來讓場景效果更好。


道具模型是根據我畫好的道具icon作為參考，先建出白模，再放到引擎裡配色進行細節調整。



四、遺憾和總結

作為一個互動背景的設計師，首先是我功能的侷限性，在這次遊戲開發中主要完成的是2D美術的方面，在3D場景給到遊戲的幫助就十分有限，我只能提供靈感圖來幫助我們的場景美術同學來進行設計。

第二，開發週期短，而我又同時在其他遊戲公司實習上班，上班還是有工作壓力的，所以能夠投入到比賽的時間還是比較有限的，我只能在下班後的閒暇時間來參與制作，互動設計的基本功可以是資訊的傳遞，所以玩家的行為反饋是十分重要的，在這個方面我即使做了很多的設計，但是最後因為時間限制，以及我自身對設計不夠堅持，沒有很強烈要求程式同學儘早完成UI開發，導致最後很多細節設計無法在遊戲中開發出來，是非常可惜的。

之前我主要的UI設計經驗來自於手遊，手遊其實是有設計規範的，一般介面的左右側是操作區，螢幕的上方是資訊區，如下圖。


但本次我設計的遊戲是一款電腦遊戲，電腦遊戲不需要動態搖桿和轉動視角的左右操作區，一般是用鍵鼠或者手柄進行操作，資訊層和狀態列下沉設計，因此介面的佈局和手機遊戲也有所不同。如pc遊戲《守望先鋒》，它的主要資訊展示區就位於介面下方，次要資訊展示區位於介面左右上方，畫面中間是臨時提示區，一般閃現tips給玩家帶來即時性的提示。關於pc遊戲的介面佈局

董晶暉：淺談沉浸式 UI（ 二 ）https://zhuanlan.zhihu.com/p/166097802

這篇文章中也有談到，大家感興趣可以複製連結閱讀~~


這也算我在這次遊戲設計中獲得的小小經驗吧，說不定之後可以對於手遊和端遊的介面設計上再做更詳細的分析對比。

本篇美術向的設計覆盤到此結束了~下一篇是“專案管理向”的經驗總結，繼承我去年實習時和我們專案組PM的交流，我試著模仿木子（俺之前專案組的PM）的工作內容，並且也用上了一點點在洛可可專案管理實習的經驗，用了一些淺薄的方法，來保證遊戲能在ddl前開發完成，工作流程的順利，希望也能給一些小團隊的管理帶來小小啟發吧~~

相關閱讀：

《五行》從0到1設計遊戲——策劃向開發記錄


來源：GameTube
原文：https://mp.weixin.qq.com/s/xNL3MFb6i-f_HK7pOLyYCQ