每到過年，在外的游子都會不遠萬里回家與親人團聚，這是一種中國獨有的特色，也是一種別樣的年味。我們期望在春節上線一款游戲，讓玩家感知到這種年味，《穿越福城》應運而生。游戲的玩法是以搭板子的方式，讓玩家穿越36個中國主要地標建筑，寓意穿越中國，走親訪友，年味十足。

△ 點擊查看線上游戲錄屏

歷時1個月的加班加點，《穿越福城》終于和大家見面了。作為3D游戲界的萌新，設計過程中我們遇到了非常多的困難，我們希望通過復盤與思考，能把項目中的問題與經驗總結出來，有所沉淀，同時也希望能拋磚引玉，對大家能有一些幫助和啟發。

風格探索

由于游戲將上線于春節檔，如何讓大家在享受游戲的同時感受到「年味」，成為我們首要的設計目標。與此同時，游戲還肩負起推廣手Q小游戲的使命，如何在手Q平臺大的框架下，做到輕量化，也是我們另一個必須要考慮的問題。基于以上兩點思考，我們在項目前期做了大量的探索。

通過收集「年味」相關資料分析對比，我們決定以「剪紙」這種藝術載體作為游戲的主風格，這里主要有以下幾點思考：

• 中國人有非常多的年俗文化與紙相關，比如剪紙，貼春聯，貼窗花，年畫，掛燈籠等等，紙的運用能增添年味。
• 剪紙具有廣泛的群眾基礎，是人民大眾喜聞樂見的藝術形式，能夠產生情感共鳴。
• 時間上，短短2周時間，要完成36個主要地標城市的全3D建模，還包括背景，裝飾元素等等，剪紙風格表達更加高效。
• 性能上，紙片模型更輕量化，讓用戶在手Q平臺上也能獲得端游般的極致體驗。

基于以上一些因素，我們做了大量風格嘗試。

同時，我們也嘗試了多種配色方案，以期找到最合適的游戲氛圍，提升游戲的視覺體驗。

通過這些設計嘗試，最終我們確定的設計方案是：

與此同時，我們還嘗試把設計流程標準化，提高設計效率。

設計執行

確定了設計風格和流程后，接下來需要考慮的問題是：如何在短短2周時間內，保證執行的效率和一致性。為此，我們主要做了2件事：

內容形式標準化。定義了一套可快速執行的組合規范。這套規范包括了2個方面：構圖原則和組成元素。為了能突出主建筑，我們決定采用三角形構圖并將構圖元素進行拆分。

協作方式獨立化。每位設計師獨立負責某個類別的元素設計，保證效率和統一。

△ 城市設計

△ 背景設計

△ 裝飾元素

設計還原

經過前面兩個步驟，設計上的難點已經基本得到解決，此時我們擔心的問題是開發能還原到什么程度。由于時間緊任務重，我們計劃兵分兩路，設計和開發同時并行，降低風險。在輸出了第一個模型之后，我們就趕緊找開發進行效果聯調。由于是第一次做這種WebGL游戲，在對接過程中我們遇到了非常多的麻煩。

? 1. 3D場景搭建

還原的第一步就是要搭建出游戲的大環境，這包括：攝像機，燈光，背景，模型位置，變動的視角等等。可能是運氣不大好，我們幾乎每一處都遇到了困難。

坐標系

與開發聯調發現，C4D中的坐標系是左手坐標系，而游戲引擎中的坐標系卻是右手坐標系，兩個完全不同的坐標體系，在有旋轉的情況下，存在一個矩陣變換的過程，無法通過簡單的運算得到想要的參數。（ps：有關左右手坐標系資料，感興趣的可以去https://www.cnblogs.com/mythou/p/3327046.html查看，這里就不展開了。）

坐標系的不同會引發什么樣的問題呢？最直接的問題就是無法復用軟件中設置好的參數，那如何對場景進行精確還原，這在當時是一個非常頭疼的問題。而在代碼中的參數設置并不是單一變量，而是多個參數的組合效果，所以其實能調成什么樣，最開始只能靠碰運氣。為了更快更好的調出想要的效果，我們讓開發抽象出一個demo實例，由設計師進行調整。

攝像機和城市位置

△ 點擊查看游戲場景調整

在調參的過程中，發現不管怎么調整攝像機，始終都無法讓角色在行進過程中，保持以相同的大小和角度看墩子和木板。一開始，我們想當然的把3D游戲理解為是有透視的，但其實我們做的是一個等角視圖游戲，它并沒有透視。在修改了視圖后，總算看到了希望。

一波未平，一波又起，我們發現城市模型在場景中的位置和縮放比例非常難確定。這里有2個問題需要解決，一個是模型在場景里出生的位置，另一個是模型與墩子之間的相對位置。

一開始的策略是先調整好城市模型的位置，然后保持這個位置固定不變，但沒考慮到與墩子之間的相對位置，結果發現在游戲過程中，鏡頭隨著墩子放大縮小，場景被拉伸變形非常大，很不協調。

之后，我們將場景與墩子的出生位置和行進中的相對位置進行固定，經過反復調試，最終才有了現在大家看到的效果。

燈光

調整好了模型位置和攝像機參數，當注意到游戲畫面時，我們的內心是崩潰的。

由于游戲引擎和3D軟件的渲染算法不一樣，不能直接將軟件中的顏色，燈光信息直接復用，所以在這里我們也只能在代碼中進行調試。

△ 點擊查看游戲燈光調整

投影

對于投影，起初并沒有引起我們多少注意，我們認為和3D軟件中的投影一樣，只需要把場景中的顏色和燈光打好，投影自然就沒問題了，卻不曾想投影居然會是一個大麻煩。

我們發現，場景光直接打出來的投影效果很差，對性能的影響也極大。針對這2個問題，我們在設計上也嘗試了一些優化方案。

方案1：烘焙貼圖。指的是讓場景中的模型不直接通過環境光產生投影，而是把投影提前渲染好，再以 UV 的形式精確的貼回場景。這個方案有2個難點：

• C4D 對于 UV 的編輯很不友好，耗時費力；
• 對接流程不熟悉，與開發配合不夠流暢。

我們邊做邊測試，花了一天時間，跟開發不斷聯調嘗試，才勉強完成了墩子的模型烘焙，UV編輯和貼圖。簡單的模型困難尚且如此，對于城市這么復雜的模型來說，烘焙的方案耗費的時間不敢想象。我們擔心是不是沒有找到高效的設計方法，也專程請教了火影手游項目組的同事，確認了這塊的工作量。雖然烘焙的方式能夠將投影還原到最佳，但是考慮到整體項目進度，我們不得不放棄這套方案。

方案2：PS畫出投影。既然烘焙太費時間，那我們退而求其次，降低投影精度，通過 PS 畫出大致投影，再貼UV。經過嘗試，發現時間的問題依然存在，這個方案只是省了一個烘焙的過程，編輯UV 和貼UV 的步驟依然非常麻煩，考慮再三只能作罷。

方案3：程序打光。考慮最節省時間的辦法，可能還是要通過在場景里直接打光。雖然效果會差一些，但也不失為一個折中的方案。但在實際測試中發現，當投影在右側時，由于環境光方向固定，投影會因為模型的特殊角度而幾乎連成一條直線。

幾經波折，最終我們定下來的方案是只給主元素加投影，原因是一方面可以突出游戲主流程，另一方面也是綜合性能的考慮。

? 2. 模型資源

經過前面的努力，總算調整好了模型和場景，但接下來又有一個新的問題擺在我們面前，模型如此之多，應該建立怎樣的輸出標準，才能保證后續的資源能夠高效輸出。

經常不斷調試，我們發現在3D場景中，要保證一個物體正確顯示，需要明確幾個點：

整個場景的軸中心點需要在（0，0，0），代碼會根據這個坐標原點為基準進行定位，縮放和旋轉。

需要統一場景的中心點。這個與第一條不同的地方在于，軸心點是很容易修改統一的，但是物體的中心點卻不一樣，因為每個場景有大有小，元素也是有多有少。

后面我們想了一個辦法，以調試好的模型「上海」為模板，把所有場景中的主建筑以東方明珠為基準，整體移動場景并與東方明珠重合，在游戲場景中看到模型的角度和大小就會是一致的。

軸向決定場景的朝向，這不僅包括模型整體軸向要正確，模型中每一個獨立的 Mesh 也需要軸向正確，錯誤的軸向放在場景中會被代碼自動將其歸正，導致方向錯誤。

△ 錯誤的軸向

模型的面法線和頂點法線必須朝向顯示面。

如果法線方向不對，會影響光的反射角度，導致物體在場景中變黑。

△ 正確的法線方向

? 3. 性能

由于是在手Q平臺上線，基于WebGL引擎，在性能上有非常高的要求。為了讓游戲在各個檔次的手機都能有很好的游戲體驗，我們設計側主要做了以下幾件事。

模型減面

最初的模型面數是非常可怕的，對性能的影響非常大。

在減面前，模型的面數多達10000+，327kb。

在做減面后，模型面數減少到791，69kb。

對于減面，我們也摸索出了自己的一套方法：在C4D中，導入Ai路徑文件后，先優化點模式為細分，再把等參細分和細分數調到最低，然后再將所有面進行三角化，最后在不改變模型的基礎型前提下，刪除多余的面。

極限減面

在做了第一步的減面后，性能已經有了非常大的改善，整體的文件大小相對之前已經減少了80%，在不開投影的前提下，已經可以比較流暢的在各類手機上運行。但在某些低端機型上，仍然會有不少卡頓，所以我們又進行了一輪極限減面，盡最大可能去改善游戲體驗。因為在等角視圖游戲場景中能看到的面是固定的，所以極限減面要做的是刪減那些不可見的面，以得到更少面的模型。

合并相同材質Mesh

為了減少程序渲染提交次數，進一步提升性能，我們對于模型中相同 Material 的 Mesh 也進行了合并處理（如果Material不同，合并沒有意義）。

減少紋理貼圖

設計之初，為了強化紙的質感，在模型的材質中加入了一些紙質貼圖，為了進一步提升性能，我們選擇去掉這個貼圖，而是在 UI層上設計了一個噪點遮罩，以實現紙質紋理效果，最大程度保證性能和體驗之間的平衡。

關閉投影

在做了前面那些優化工作后，性能已經有了非常大的改觀。但經過測試反饋，在某些機型上開投影，還是有些許卡頓。不得已，我們只能將場景投影選擇關閉。

其他

另外，我們還總結了一些性能優化規律，包括：

• 將模型的面數控制在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個城市模型做不完，就加班加點搶時間，并轉變思維，也順利完成了模型設計。

擔心還原效果，就自己主動抓起代碼，自己調試，也先后解決了背景顏色問題，鏡頭問題，模型問題，攝像機問題等等。

我們發現，辦法總比困難多。

顯然《穿越福城》還有很多需要提升的地方，在諸多條件限制下，很遺憾有太多的效果不得不做取舍。這次的游戲設計已經告一段落，但未來的路才剛剛開始，如果未來游戲常規化運營，我們還有很多事可以去做。

最后，附上《穿越福城》游戲二維碼，歡迎大家掃碼體驗。希望這款游戲能夠給大家帶來歡樂！