《歡樂貪吃龍》是由 SK2GAME 基於 Cocos Creator v2.2 研發的一款 3D 休閒小遊戲，遊戲畫面卡通精美，玩法簡單，玩家將扮演一隻“貪吃龍”，在 3D 大場景中，捕食各種可愛又兇殘的怪物，享受毀滅敵人的快感。
今日，《歡樂貪吃龍》項目的客戶端主程 小濤 作客 Cocos 技術派，為廣大開發者帶來這款 3D 小遊戲的開發經驗分享，內容涵蓋場景地圖生成、關卡設計、分包分階段加載資源以及性能優化等，以下為技術派正文：
一、項目概述
1.團隊介紹
SK2GAME 團隊成員共 20 人，主要來自原七道神曲項目組，包括原博雅，騰訊等。在積累了相對深厚的手遊研發運營經驗後，於 2019 年正式進軍小遊戲研發領域，目前我們也在摸索各大小遊戲平臺的核心用戶玩法，團隊擅長跑酷，音樂，休閒動作類，模擬經營類，rougelike 等遊戲品類的研發和製作。目前團隊資本結構相對純淨，屬於天使輪。
2.遊戲介紹
《歡樂貪吃龍》這款遊戲玩法很簡單，進入遊戲主界面後，玩家可以在形態各樣的貪吃龍中選擇一條喜歡後進入副本，通過捕食各種怪物即可積累能量，能力積累到一定程度，可以噴射高能量的龍炎，進入無敵狀態，毀滅一切敵人，順利通關副本。
不同的貪吃龍除了有體態有迷你、小、中、大的區別之外，不同的皮膚也會在比如吞噬距離、速度、爆發衝刺、承傷等方面有著不同的 Buff 加成。
3.遊戲結構
遊戲的結構主要包括登錄、主界面、副本、結算四個場景。
玩家進入到登錄場景，將進行微信 sdk 登錄，遊戲服務器註冊/登錄，資源預加載流程，這個階段的流程需要儘量快且失敗後提示重試邏輯要做好，卡登錄流程對新玩家是極不友好的，將導致用戶直接流失。
主場景 是玩家對龍的周邊系統的認識及選擇。
點擊開始遊戲打開任務界面，任務界面是當前副本的過關要求，全部任務完成，才能過關。
副本場景主要包括 3D 場景、玩家操作的龍、場景中的怪物、場景中的各種 buff 及收集物。各模塊的交互判斷主要是碰撞檢測，例如龍和怪物的碰撞檢測，龍的處理邏輯：
怪物的處理邏輯：
結算場景主要是對副本場景的一些遊戲行為進行總結，遊戲資源的獎勵發放。
二、開發過程
1.開發引擎選擇
開發立項是在 2019 年 11 月份，由於當時主要的任務，是替另一個項目接入新的渠道 SDK 以及一些零碎的工作，所以我有空就會對本項目一些可能遇到的難點就行預研，包括寫了一個簡單的 Cocos Creater 3D 版本的 Demo。考慮到 Cocos Creator 3D 當時的版本只支持微信小遊戲，所以忍痛放棄了（個人對於 Cocos Creator 3D 很是喜歡）。
Cocos Creator 2.2.0 版本對性能提升較大，預見本項目性能是個大瓶頸，所以我們果斷使用了 Cocos Creator 當時的最新版本 2.2.2。
Cocos 官方最近發了新版本 2.3.0，其中的 3D 粒子我們需要用到，對於其他內容則沒有很高的需求，所以暫時還不考慮升級。
2.開發週期
項目正式製作始於 2019 年 12 月初 ，第一週用一些測試 3D 模型，做了個簡單的 3D 場景，一條龍在其中漫遊，順便測試了 3D 模型+物理場景性能的峰值。達到 3 萬多面時，iphone6 就只有不到 20 幀，安卓低端機 30 幀左右。後續開發過程中，每個功能都會考慮到性能的問題。
2020 年 1 月 17日，我們第一個版本上線微信小遊戲，從無到有僅花了一個半月的時間（無良老闆壓榨），這個版本的定義只是一個基礎功能版本，周邊系統缺少，中期目標太弱，更別說後期了。值得開心的是，在年初的 Cocos 官方直播中，Cocos Creator 技術總監 Panda，在直播中推薦了我們的遊戲。視頻地址：https://www.bilibili.com/video/av86788767，時間定位 64 分 30 秒。
3.開發人員配置
《歡樂貪吃龍》項目由 1 個策劃+2 個前端開發+1 個原畫+1 個 UI+1 個特效（技術美術）組成，遊戲中場景配置優化，怪物和龍的動畫及其他遊戲特效效果，都由前端開發和技術美術一起配合完成。
過程只有一句話：技術美術真香！
前端只要提供好一些掛載組件和 prefab，效果由美術在編輯器中調整測試效果，效率提高不止一個檔次。
三、幾個重點
1.場景地圖生成
當前版本只有1個場景，但是設計時，有考慮到場景變化可配置，將地圖分塊，如圖所示：
場景地圖分成 n 個小塊，每個 block 節點都是地圖的位置節點，上面掛載著一個地圖塊加載組件 MapBlock。
每個 block 節點顯示掩藏是受父節點 RootNode 上的 ActiveState 控制。這個腳本的主要工作是對子節點遍歷，定時 updateTime（毫秒）計算 3D 攝像機相對上次移動了多少距離，當大於 updatePosStep 時，計算子節點是否在 3D 攝像機視線中，進行掩藏顯示操作。block 節點顯示，就會加載顯示對應的地圖塊，掩藏將顯示的地圖塊掩藏（優化性能）。
因為是 3D 場景，所以需要獲取當前 3D 攝像機去計算。上面的代碼是當前屏幕的尺寸 viewRect 與當前 block 節點在 3D 攝像機中映射到屏幕上的 rect 比較是否相交。相交就是需要顯示。UIHelp.getRectInView 方法：
2.關卡設計
關卡過關條件的任務，是每一關配置一個任務庫，隨機生成。怪物的配置是配置在如下的 prefab 中。怪物節點也是受 ActiveState 組件控制，實現動態顯示加載。
這裡用 prefab 配置關卡的怪物生成，是為了方便策劃，後期會寫一個插件，將此 prefab 轉換成配置文件，這樣數據會小很多，畢竟 prefab 裡面的數據有很多沒用的。
怪物創建有一個管理類管理，裡面對怪物的創建、銷燬用了對象池。同樣怪物的顯示掩藏邏輯也在裡面處理，原理同地圖生成。
3.分包分階段加載資源
遊戲中的資源按照各個階段需要，分成 1 個主包，2 個子包。主包包括代碼文件及登錄場景的背景圖，分包 1 的資源主要是整個遊戲的必要資源，分包 2 的資源是副本場景必要的資源。
登錄時加載分包 1，進入主場景後，開始下載分包 2，進入副本時的加載界面也會加載分包 2，如果前面下載好了，此處可以更快點。這些處理對新玩家首次進入遊戲，起到一定優化作用。
進入副本的加載界面，不只是加載分包 2，還做了當前關卡中地圖塊和會出現怪物的預加載。雖然這樣會讓加載時間變長，但是玩家遊戲體驗會好很多。看到的東西不會延遲顯示。
4.性能優化
drawcall 優化：UI 的所有圖片文件夾都配置了自動圖集，並且分模塊，每個模塊一個圖集。節點層級按照合批邏輯優化（3D 模型的合批，本項目沒有開啟，合批的性能在iOS 的微信小遊戲上，是負提升）
字體儘量用 bmfont：系統字體的文本設置緩存類型（遊戲中獲得 buff 時，會創建一個 buff 圖標和 buff 描述文字 lab，安卓上會出現卡頓，後面修改成 bmfont 解決）
對於可能重複出現的效果，儘量用對象池。
上面對於地圖塊，怪物的動態顯示掩藏，對於物件比較多，又可能不在屏幕範圍之內的遊戲，是一個很好的
剪裁優化方案。模型的面數需要把握好，太高的面數，扛不住。
結語：
非常感謝 小濤 帶來的技術實現分享，《歡樂貪吃龍》目前已上線微信小遊戲，受到許多玩家的喜愛， 歡迎各位開發者搜索體驗！最後，祝《歡樂貪吃龍》取得更好的成績，期待 SK2GAME 有更多好玩的遊戲上線！
技術派，是 Cocos 推出的專欄，將不定期邀請知名的遊戲製作者，為廣大開發者分享來自真實項目的實用的開發技術和實戰經驗。歡迎大家推薦想要學習的遊戲產品和想要了解的技術知識，也誠邀有技術分享意願的開發者聯繫我們噢！
閱讀更多 Cocos引擎 的文章
