[穿越福城]幕後故事 | 設計定義年味
用設計增添年味
導語
——————————
每到過年，在外的遊子都會不遠萬里回家與親人團聚，這是一種中國獨有的特色，也是一種別樣的年味。我們期望在春節上線一款遊戲，讓玩家感知到這種年味，《穿越福城》應運而生。遊戲的玩法是以搭板子的方式，讓玩家穿越36箇中國主要地標建築，寓意穿越中國，走親訪友，年味十足。
遊戲線上錄屏
歷時1個月的加班加點，《穿越福城》終於和大家見面了。作為3D遊戲界的萌新，設計過程中我們遇到了非常多的困難，我們希望通過覆盤與思考，能把專案中的問題與經驗總結出來，有所沉澱，同時也希望能拋磚引玉，對大家能有一些幫助和啟發。
一、風格探索
————————
由於遊戲將上線於春節檔，如何讓大家在享受遊戲的同時感受到 "年味"，成為我們首要的設計目標。與此同時，遊戲還肩負起推廣手Q小遊戲的使命，如何在手Q平臺大的框架下，做到輕量化，也是我們另一個必須要考慮的問題。基於以上兩點思考，我們在專案前期做了大量的探索。
通過收集“年味”相關資料分析對比，我們決定以“剪紙”這種藝術載體作為遊戲的主風格，這裡主要有以下幾點思考：
- 中國人有非常多的年俗文化與紙相關，比如剪紙，貼春聯，貼窗花，年畫，掛燈籠等等，紙的運用能增添年味。
- 剪紙具有廣泛的群眾基礎，是人民大眾喜聞樂見的藝術形式，能夠產生情感共鳴。
- 時間上，短短2周時間，要完成36個主要地標城市的全3D建模，還包括背景，裝飾元素等等，剪紙風格表達更加高效。
- 效能上，紙片模型更輕量化，讓使用者在手Q平臺上也能獲得端遊般的極致體驗。
基於以上一些因素，我們做了大量風格嘗試。
同時，我們也嘗試了多種配色方案，以期找到最合適的遊戲氛圍，提升遊戲的視覺體驗。
通過這些設計嘗試，最終我們確定的設計方案是：
二、設計執行
——————————
確定了設計風格和流程後，接下來需要考慮的問題是：如何在短短2周時間內，保證執行的效率和一致性？為此，我們主要做了2件事：
1、內容形式標準化。定義了一套可快速執行的組合規範。這套規範包括了2個方面：構圖原則和組成元素。為了能突出主建築，我們決定採用三角形構圖並將構圖元素進行拆分。
2、協作方式獨立化。每位設計師獨立負責某個類別的元素設計，保證效率和統一。
城市設計
背景設計
裝飾元素
三、設計還原
——————————
經過前面兩個步驟，設計上的難點已經基本得到解決，此時我們擔心的問題是開發那邊能還原到什麼程度。由於時間緊任務重，我們計劃兵分兩路，設計和開發同時並行，降低風險。在輸出了第一個模型之後，我們就趕緊找開發進行效果聯調。由於是第一次做這種WebGL遊戲，在對接過程中我們遇到了非常多的麻煩。
1、3D場景搭建
還原的第一步就是要搭建出遊戲的大環境，這包括：攝像機，燈光，背景，模型位置，變動的視角等等。可能是運氣不大好，我們幾乎每一處都遇到了困難。
1）座標系
與開發聯調發現，C4D中的座標系是左手座標系，而遊戲引擎中的座標系卻是右手座標系，兩個完全不同的座標體系，在有旋轉的情況下，存在一個矩陣變換的過程，無法通過簡單的運算得到想要的引數。（Ps：有關左右手座標系資料，感興趣的可以去https://www.cnblogs.com/mythou/p/3327046.html檢視，這裡就不展開了。）
座標系的不同會引發什麼樣的問題呢？最直接的問題就是無法複用軟體中設定好的引數，那如何對場景進行精確還原，這在當時是一個非常頭疼的問題。而在程式碼中的引數設定並不是單一變數，而是多個引數的組合效果，所以其實能調成什麼樣，最開始只能靠碰運氣。為了更快更好的調出想要的效果，我們讓開發抽象出一個demo例項，由設計師這邊進行調整。
2）攝像機和城市位置
遊戲場景調整
在調參的過程中，發現不管怎麼調整攝像機，始終都無法讓角色在行進過程中，保持以相同的大小和角度看墩子和木板。一開始，我們想當然的把3D遊戲理解為是有透視的，但其實我們做的是一個等角檢視遊戲，它並沒有透視。在修改了檢視後，總算看到了希望，2天的艱難除錯，到這裡真的喜極而泣。
一波未平，一波又起，我們發現城市模型在場景中的位置和縮放比例非常難確定。這裡有2個問題需要解決，一個是模型在場景裡出生的位置，另一個是模型與墩子之間的相對位置。
一開始的策略是先調整好城市模型的位置，然後保持這個位置固定不變，但沒考慮到與墩子之間的相對位置，結果發現在遊戲過程中，鏡頭隨著墩子放大縮小，場景被拉伸變形非常大，很不協調。
之後，我們將場景與墩子的出生位置和行進中的相對位置進行固定，經過反覆除錯，最終才有了現在大家看到的效果。
3）燈光
調整好了模型位置和攝像機引數，當注意到遊戲畫面時，我們的內心是崩潰的。
由於遊戲引擎和3D軟體的渲染演算法不一樣，不能直接將軟體中的顏色，燈光資訊直接複用，所以在這塊我們也只能是在程式碼中進行除錯。
遊戲燈光調整
4）投影
對於投影，起初是沒有引起我們多少注意的，我們認為和3D軟體中的投影一樣，只需要把場景中的顏色和燈光打好，投影自然就沒問題了，卻不曾想投影居然會是一個大麻煩。
我們發現，場景光直接打出來的投影效果很差，對效能的影響也極大。針對這2個問題，我們在設計上也嘗試了一些優化方案。
方案1：烘焙貼圖。指的是讓場景中的模型不直接通過環境光產生投影，而是把投影提前渲染好，再以UV的形式精確的貼回場景。這個方案有2個難點：
- C4D對於UV的編輯很不友好，耗時費力；
- 對接流程不熟悉，與開發配合不夠流暢。
我們邊做邊測試，花了一天時間，跟開發不斷聯調嘗試，才勉強完成了墩子的模型烘焙，UV編輯和貼圖。簡單的模型困難尚且如此，對於城市這麼複雜的模型來說，烘焙的方案耗費的時間不敢想象。我們擔心是不是沒有找到高效的設計方法，也專程請教了火影手遊專案組的同事，確認了這塊的工作量。雖然烘焙的方式能夠將投影還原到最佳，但是考慮到整體專案進度，我們不得不放棄這套方案。
方案2：PS畫出投影。既然烘焙太費時間，那我們退而求其次，降低投影精度，通過PS畫出大致投影，再貼UV。經過嘗試，發現時間的問題依然存在，這個方案只是省了一個烘焙的過程，編輯UV和貼UV的步驟依然非常麻煩，考慮再三隻能作罷。
方案3：程式打光。考慮最節省時間的辦法，可能還是要通過在場景裡直接打光。雖然效果會差一些，但也不失為一個折中的方案。但在實際測試中發現，當投影在右側時，由於環境光方向固定，投影會因為模型的特殊角度而幾乎連成一條直線。
幾經波折，最終我們定下來的方案是隻給主元素加投影，原因是一方面這樣可以突出遊戲主流程，另一方面也是綜合性能的考慮。
2、模型資源
經過前面的努力，總算調整好了模型和場景，但接下來又有一個新的問題擺在我們面前，模型如此之多，應該建立怎樣的輸出標準，保證後續的資源能夠高效輸出？
經常不斷除錯，我們發現在3D場景中，要保證一個物體正確顯示，需要明確幾個點：
1）整個場景的軸中心點需要在（0，0，0），程式碼會根據這個座標原點為基準進行定位，縮放和旋轉。
2）需要統一場景的中心點。這個與第一條不同的地方在於，軸心點是很容易修改統一的，但是物體的中心點卻不一樣，因為每個場景有大有小，元素也是有多有少。
後面我們想了一個辦法，以除錯好的模型“上海”為模板，把所有場景中的主建築以東方明珠為基準，整體移動場景並與東方明珠重合，在遊戲場景中看到模型的角度和大小就會是一致的。
3）軸向決定場景的朝向，這不僅包括模型整體軸向要正確，模型中每一個獨立的Mesh也需要軸向正確，錯誤的軸向放在場景中會被程式碼自動將其歸正，導致方向錯誤。
錯誤的軸向
4）模型的面法線和頂點法線必須朝向顯示面。
如果法線方向不對，會影響光的反射角度，導致物體在場景中變黑。
正確的法線方向
3、效能
由於是在手Q平臺上線，基於WebGL引擎，在效能上有非常高的要求。為了讓遊戲在各個檔次的手機都能有很好的遊戲體驗，我們設計側主要做了以下幾件事：
1）模型減面
最初的模型面數是非常可怕的，對效能的影響非常大。
在減面前，模型的面數多達10000+，327kb
在做減面後，模型面數減少到791，69kb
對於減面，我們也摸索出了自己的一套方法：在C4D中，匯入Ai路徑檔案後，先優化點模式為細分，再把等參細分和細分數調到最低，然後再將所有面進行三角化，最後在不改變模型的基礎型前提下，刪除多餘的面。
2）極限減面
在做了第一步的減面後，效能已經有了非常大的改善，整體的檔案大小相對之前已經減少了80%，在不開投影的前提下，已經可以比較流暢的在各類手機上執行。但在某些低端機型上，仍然會有不少卡頓，所以我們又進行了一輪極限減面，盡最大可能去改善遊戲體驗。因為在等角檢視遊戲場景中能看到的面是固定的，所以極限減面要做的是刪減那些不可見的面，以得到更少面的模型。
3）合併相同材質Mesh
為了減少程式渲染提交次數，進一步提升效能，我們對於模型中相同Material的Mesh也進行了合併處理（如果Material不同，合併沒有意義）。
4）減少紋理貼圖
設計之初，為了強化紙的質感，在模型的材質中加入了一些紙質貼圖，為了進一步提升效能，我們選擇去掉這個貼圖，而是在UI層上設計了一個噪點遮罩，以實現紙質紋理效果，最大程度保證效能和體驗之間的平衡。
5）關閉投影
在做了前面那些優化工作後，效能已經有了非常大的改觀。但經過測試反饋，在某些機型上開投影，還是有些許卡頓。不得已，我們只能將場景投影選擇關閉。
6）其他
另外，我們還總結了一些效能優化規律，包括：
- 將模型的面數控制在1000以內。
- 減少Material 數量，儘可能將多張貼圖拼成一張貼圖，多個模型共享一個Material。
- 儘可能壓縮貼圖，將貼圖設定為16位，大小尺寸2的N次方，最大不超過1024。
- Fog（霧） 對效能造成的影響較大。
四、角色設計
——————————
為了提升遊戲體驗，並融入QQ品牌基因，我們對角色的設計也進行多次的嘗試，並最終選擇將pupu鵝作為遊戲的主角色。在角色設計上，我們也遇到了不少的問題。
1、軟體的選擇
本次動效製作過程最大的問題就是關於引擎和3D的結合。在前期看到開發那邊有提到開發環境的左手座標與右手座標的問題，於是在c4d,3dsmax和maya中進行挑選。剛好maya的座標系統與three.js的座標一致，於是動畫和特效主要以maya製作為主。
2、模型和貼圖烘焙
由於pupu鵝會自始致終出現在遊戲中，所以對pupu鵝模型面數的控制變的至為重要。而且如果要對pupu鵝進行靈活的控制，必須要進行骨骼的繫結，並且骨骼的數量一定要少。
如果用球形基本模型去簡化，會出現各種問題，比如兩端的三角面，綁上骨骼可能是意想不到的問題，
於是考慮從正方形開始細化到球體，而且面數也好控制。
並且過程中做好了高中低三種模型的準備，來滿足效能的除錯。
貼圖烘焙時，由於想保留場景中天光，hdri，反射折射的光照效果，於是用到了高階渲染器，在maya,c4d,3dsmax中的烘焙在uv的接縫都出現一兩個相素的黑邊。
發現是由於貼圖在烘焙之後會有三個相素的過渡邊造成的，經過研究發現需要用到nuke的預除來把邊緣擴充還原出來。
3、骨骼繫結和動畫
骨骼繫結時預先考慮了一下pupu鵝在遊戲中會出現的動作，然後再進行分析如何合理的安排骨骼數量和各自的功能。
最終決定以3根骨骼來控制，1用來控制全身的主要位移動和自身旋轉，2用來控制身體的彈性。3用來控制上半身的上下左右的扭動和移動。
4、特效
本著達到最佳效果的目的，於是先做出demo來看效果然後再決定實現方法。
特效這一塊由於引擎粒子系統的不友善算是麻煩比較大的。以前熟悉的uv動畫，點材質，粒子，序列圖都不太好使。
一個煙塵的特效，最後是每一個球體都單獨用動畫手動K幀來實現。於是出現了一個這樣美麗的動畫曲線樹
五、廣告設計
——————————
考慮到遊戲的營收，我們在遊戲中也加入了廣告設計。那如何讓玩家在快速進行遊戲的同時，讓廣告可以得到聚焦，併產生有效的閱讀，是我們廣告設計的目標。
最開始的想法就是使用純色底+logo的形式去規範廣告素材的輸出，因為在快速遊戲時，單純的表現可以更有利於吸引玩家的注意，其實有心的同學會發現高速廣告牌，公交車廣告這類需要快速引起人們注意，讓使用者快速閱讀的廣告形式，大多都是用這一處理手法 。
在制定第一稿規範的時候過於追求廣告素材的特異性，添加了很多裝飾細節，線上實現的時候發現因為細節太多，廣告主想展示的內容反而沒有得到強化和突出，廣告的閱讀效率非常低。
為了加強廣告的聚焦性與快速閱讀的效率，並滿足各類廣告主的訴求，我們把原來柱子只單面展示logo，改成雙面展示，這樣的好處是客戶既能曝光自己的品牌Logo，也能同時帶出客戶主推的產品或代言人，幫助客戶曝光自己的品牌。在輸出規範的時候根據Logo，代言人，產品這三個維度做了詳細的規範。
六、音效設計
——————————
即便是小遊戲，我們也希望使用者在遊戲的過程中有更好更沉浸的體驗。所以我們不光在視覺表現、動效設計和互動震動反饋上發力，我們還希望在遊戲音效和BGM上下文章，力求達到使用者在我們的遊戲中有一個完整的體驗。
我們根據遊戲的玩法，繪製了遊戲中的使用者體驗流程圖，將各個在遊戲中可能出現的情況進行羅列，標註觸發點。然後在觸發點中加入能增強該觸發點遊戲體驗和沉浸感的音效。另一方面，我們根據整個遊戲的視覺表現和春節的特殊氛圍，來擬定整套遊戲音效和BGM的風格。
在整套音效中用到的樂器、音色和節奏都經過反覆嘗試和選擇，每一次新的音效產出後都直接放入遊戲去邊玩邊聽，以求達到最符合使用者場景的體驗。
七、彩蛋設計
——————————
為了進一步提升遊戲體驗，豐富年味，我們在遊戲中也加入了一些中國元素的彩蛋設計，比如特殊墩子的設計，當玩家在遊戲中遇到特殊墩子時，會聽到特殊的音效並獲得額外加分，
又比如在遇到特殊廣告時能產生無敵飛躍的效果
更多的彩蛋，也期待各位到遊戲中自己去發現！
八、使用者反饋
——————————
遊戲一經上線，就在網路上被刷屏，不少使用者提到的關鍵詞有：“年味”、“太可愛了”、“好玩”、“魔性”、“有過年的feel”，而這些感覺正是我們想要給使用者所傳達的情感。 來自使用者的好評才是對專案最大的肯定。
以下是使用者評價截圖：
九、總結和感悟
——————————
初次探索3D遊戲，雖然遇到了不少困難，但也算是收穫滿滿。對我來說有幾點體會：
1、專業的流程非常重要
在開發跟進過程中，作為初次接觸3D遊戲的萌新，流程的不熟悉，導致了很多不必要返工，無形中浪費了不少寶貴的時間。我記得，有一次輸出18個模型，連續返工了三次，手指到後面都開始僵化了，眼睛也疼的厲害。不過，也正是走過了這些彎路，才讓我們對於3D遊戲的設計流程有了一個深刻的認識，也因此總結出了一套遊戲設計流程。
2、現實就是一個不斷取捨的過程
一開始，我們在模型中做了很多的細節，做了很多的裝飾，以期在場景中給使用者最佳的體驗。但是隨著專案的深入，很多效果只能不斷的做出取捨。為了保證遊戲體驗，我們放棄了投影，優化了模型的面數，減少了裝飾，優化了模型的佈局，努力平衡效能和體驗。
3、用心做事，總有辦法
剛接到這個專案時，由於沒有經驗，我們心裡特別沒底。
擔心沒經驗影響進度，我們就向高手取經，邊學邊做，也摸索出了自己的一套方法。
擔心36個城市模型做不完，就加班加點搶時間，並轉變思維，也順利完成了模型設計；
擔心還原效果，就自己主動抓起程式碼，自己除錯，也先後解決了背景顏色問題，鏡頭問題，模型問題，攝像機問題等等。
我們發現，辦法總比困難多。
顯然《穿越福城》還有很多需要提升的地方，在諸多條件限制下，很遺憾有太多的效果不得不做取捨。這次的遊戲設計已經告一段落，但未來的路才剛剛開始，未來如果遊戲常規化運營，我們還有很多事可以去做。
感謝閱讀，以上內容均由騰訊ISUX團隊原創設計，以及騰訊ISUX版權所有，轉載請註明出處，違者必究，謝謝您的合作。