由於公司的業務需求，近期學習了CocosCreator這款遊戲引擎的開發，也基於此上線了一款遊戲，所以寫這系列文章記錄一下我從入門到項目發佈的學習過程。
前端

相對於web開發，像CocosCreator和egret這種界面化的遊戲引擎最大的區別就是可視化的UI編輯，以及像動畫編輯、物理引擎、資源管理系統等一系列高度封裝集成的工具集。因此第一篇文章我主要會介紹一下我從web端開發轉向遊戲開發這個過程當中，我對cocos的工做流程的一些認識。儘管文檔上有介紹可是新手上路，不少東西一開始被我忽略掉了，隨着項目的進展，我斷斷續續地從文檔、社區中學到了一些能提升效率的小方法和配置，在此記錄一下，主要給其餘新人作參考node

熟悉編輯器

由於遊戲的界面編輯都是經過編輯器來完成的，因此編輯器的一些基本功能和操做說明咱們須要經過文檔去理解熟悉，我這裏會記錄幾個我新建一個項目必須會用的設置web

配置項目設置

在開始作項目前，別忘了要在項目-項目設置中先設置下面幾個配置，後續的新建場景都會默認使用這些配置，後面就不須要每建一個場景都要設置一下了shell

初始預覽場景（指定某一個場景/當前打開場景），我通常設置後者
設計分辨率，引擎默認的是960*640
適配模式（fit-height/fit-width）

調整編輯器佈局

在工做中，由於咱們綁定資源、腳本和變量的過程都是經過把它們拖拽到屬性面板來實現的，而引擎的默認啓動界面把屬性面板放到最右側，那當咱們須要綁定操做的時候就須要把物體從最左側面板拖拽到最右側面板，其實這段超長的操做距離是很是影響效率的，因此大部分的開發者其實都會選擇經典佈局，像下圖這樣，把屬性面板經過拖拽放在左側和層級管理器放在一塊兒，這樣綁定變量和資源的操做效率就會相對高一點json

熟悉經常使用的界面快捷鍵

CocosCreator的快捷鍵支持是比較弱的，可是它仍是提供了幾個高頻操做的快捷鍵，經過這四個快捷鍵咱們能快速切換這四個高頻工具，很大地提升效率canvas

W 移動工具
E 旋轉工具
R 縮放工具
T 矩形變換工具

還有就是用過3D模式的都知道，在3D模式下調整相機視角和位置的操做是相對來講比較困難的，以前的項目中也實現過一個2.5D的場景，因此也這裏也分享兩個快捷鍵，一個就是調整物體的時候，點擊住屏幕，在視圖左上角會出現wasd(上下左右)的提示，能夠經過鍵盤上wasd這四個按鍵來微調方向，相對來講會便捷不少數組

還有一個就是調整相機的角度，若是咱們根據預覽效果去調整相機的位置，實際操做起來有必定的麻煩，有一個隱藏的組合快捷鍵control+shift+f能夠把咱們場景編輯器的畫面同步成相機的預覽，它可讓咱們更直觀得調整相機效果性能優化

UI開發

和web端的開發不同，cocos的UI是不用寫樣式的，界面上全部的元素都是用圖片堆積起來的，對我來講這個轉變過程挺有意思的，把樣式編寫去掉了能夠省掉咱們一些佈局的時間，我在開發項目過程當中也發現了一些比較好的實踐方法微信

精準還原設計稿的竅門

由於咱們在可視化的編輯器中都是經過拖拽來實現圖片的定位的，咱們不寫樣式文件。可是我在第一個項目的時候思惟又還沒轉換過來，仍是習慣web端那種開發模式，我每次佈局的時候都會去翻一下設計稿，測一下物體的位置，而後再在屬性面板上輸入正確的position信息，這樣作固然是沒問題的，可是效率真是過低了，後來我看到一位前輩的開發過程後才恍然大悟，改正過來。他是這樣作的，在設計稿那裏截一張完整的界面圖，而後把它當成一個底層的節點，這樣子咱們就有一個和設計稿如出一轍的背景圖了，咱們佈局的時候再把一個個物體放到它正確的位置上，完事以後只須要把那個底層的節點刪除就能夠了，這樣子佈局的的效率提高但是質的飛躍。curl

把UI按模塊拆分管理

在項目中，咱們的一個場景裏面的內容可能會不少，好比我這個場景裏面有N個彈窗，若是咱們把全部的彈窗的內容按他們的真實位置塞到canvas節點中，那真的是一件很糟糕的事情，由於一個個物體們會重疊在一塊兒，後期咱們將很難進行選中操做。因此咱們在作UI管理的時候須要一個竅門就是把UI按模塊拆分，而且移位管理，以下圖

我並不會把彈窗一和彈窗二的內容疊加到主界面上，固然一開始咱們能夠這樣作，由於咱們可能須要根據背景圖來肯定每一個物體的位置，可是當咱們完成佈局以後，能夠像我同樣把他們的父節點移出主界面以外，我這裏的父節點是經過widget作了拉伸的，徹底適配窗口的大小，當父節點被移出其實就是position作了偏移，後續在代碼裏面控制彈窗出現的時候，咱們只須要多寫一行代碼，把父節點的position設置爲(0,0)就能夠了。這樣子在後續維護的過程當中咱們的UI界面也能一目瞭然。若是用了widget，也別忘了在代碼調用的時候去手動更新widget的位置：

let widget= this.mapDlg.getComponent(cc.Widget);
widget.right = 0;
widget.left = 0;
widget.updateAlignment();

利用好自定義控件

自定義控件庫其實就是給經常使用的prefab增長了一個入口，固然能夠直接把prefab拖拽到層級管理器裏面直接用，可是其實仍是一個效率的問題。當你的prefab多了以後，先不說你要去翻資源管理器裏面的文件夾，當你打開prefab所在的文件夾以後，一眼看過去是比較難找到本身須要的控件的，自定義控件不只僅額外給了一個入口，並且它能夠給prefab增長一個圖標和控件名稱，對高頻的複用控件的使用來講，這真的太有必要了，打開面板一下就能找到你所須要的控件而後直接拖拽使用了

代碼開發

配置Vscode

雖然這塊文檔裏面有寫，可是由於我是從寫web端轉來作遊戲的，覺得本身很熟悉vscode，又由於項目的緣由要急於上手就選擇性地忽略了這一塊，僅僅只使用了代碼提示這個工做流，等到看到社區內的前輩們的平常操做以後，才發現配置好vscode的工做流其實也是一大效率神器，它包括四塊東西

代碼智能提示
設置文件搜索範圍
手動觸發編譯
配合Chrome debug插件在編譯器內debug

代碼提示和文件搜索我就不提了。在正常狀況下咱們修改了代碼，只有回到cocos界面才能觸發項目實時熱更新，而咱們在vscode上配置好編譯的task，而且設置啓動task的快捷鍵，我設置的快捷鍵是cmd+r，咱們就能夠在vscode上經過快捷鍵觸發項目的熱更新，它可讓咱們在寫代碼的時候更專一在代碼上；具體的配置步驟能夠查看文檔

// .vscode/tasks.json
// 配置vscode任務
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "compile",
            "command": "curl",
            "args": ["http://localhost:7456/update-db"],
            "type":"shell",
            "isBackground": true,
            "group": "build",
            "presentation": {
                "reveal": "always"
            },
        }
    ]
}

// User/keybindings.json
// 配置任務啓動快捷鍵
[
    {
        "key": "cmd+r",
        "command": "workbench.action.tasks.runTask",
        "args": "compile"
    }
]

還有一個就是ChromeDebug插件，這塊的流程只在1.9.0的文檔中才有，後續的文檔中雖然能搜索出來，可是沒法閱讀，它支持你在vscode中喚醒Chrome，並在vscode中進行debug，也是一大效率神器

參數綁定

在處理複雜界面的時候，由於頁面上的元素較多，就算咱們儘量地拆分腳本，可是在一個腳本里面須要綁定的變量仍是不可避免的增多，而後代碼裏面就會有一大串@property聲明的變量，因此新手們須要充分利用的類型，好比我有10個只是單純用於的顯示和隱藏的node節點，就能夠經過聲明一個node數組節點來綁定，這樣子我在代碼裏面顯式聲明的變量就會少不少👇

還有一種常見的狀況就是一個物體它有兩種甚至多種狀態，當我剛上路的時候我對cocos的內置對象還不熟，而後由於咱們界面上的基本組成單元是sprite圖，我就作了一個很蠢的操做就是有多少狀態我就建立多少sprite節點，狀態切換的時候就切換相應節點的顯隱。可是這種狀況下其實好的作法是經過一個spriteFrame的數組變量去存儲不一樣狀態的spriteFrame而後狀態切換的時候去更新相應的spriteFrame：

@property([cc.SpriteFrame])
btnStatus: cc.SpriteFrame[] = [];

// 切換不一樣的狀態
this.node.getComponent(cc.Sprite).spriteFrame = this.btnStatus[0];
this.node.getComponent(cc.Sprite).spriteFrame = this.btnStatus[1];
this.node.getComponent(cc.Sprite).spriteFrame = this.btnStatus[2];

固然這樣也不是最佳實踐，由於後續接手咱們代碼的人經過代碼根本就看不出數組不一樣下標對應的spriteFrame是哪個，他還得經過界面去查看綁定的資源。因此最佳的實踐應該是把該一個物體不一樣狀態圖片生成圖集，圖集裏面的每一個圖片能夠精確命名，當須要切換狀態的時候，咱們就能夠經過精確的名稱獲取到對應的spriteFrame，雖然這樣子咱們就須要多維護一個圖集，可是它是一個相對更規範的實踐方式

@property(cc.SpriteAtlas)
spacemanAtlas: cc.SpriteAtlas = null;

// 切換不一樣的狀態
this.body.getComponent(cc.Sprite).spriteFrame = this.spacemanAtlas.getSpriteFrame("take_off_state");
this.body.getComponent(cc.Sprite).spriteFrame = this.spacemanAtlas.getSpriteFrame("ready_state");
this.body.getComponent(cc.Sprite).spriteFrame = this.spacemanAtlas.getSpriteFrame("rest_state");
this.body.getComponent(cc.Sprite).spriteFrame = this.spacemanAtlas.getSpriteFrame("fire_state");

第三方工具

我目前用到的第三方工具主要有這下面幾個

利用 Texture Packer 生成圖集

雖然引擎在打包階段給咱們提供了自動合圖功能，可是爲方便資源的維護、代碼變量的管理以及後面性能優化上很重要的drawcall優化處理等等，咱們仍是頗有必要在開發階段就要有意識地去作圖集管理。

ShoeBox

異常強大的ps插件，我目前用得最多的就是拆分圖集、gif圖拆解、生成位圖字體、合成gif圖，它也能夠合成圖集，可是我以爲Texture Packer在這方面更好維護。拆分圖集、gif圖拆解這兩個功能我主要用來獲取一些遊戲的公共資源，最簡單的像一些金幣的動畫，我須要它的序列幀，若是設計師那邊有現成可用的當然好，若是沒有的話特地讓人家去作一份也沒有很大的必要，我比較常去愛給網翻一些CC0版權的資源來用。好比下面我須要用到一張合圖裏面的某一張圖片，我就會利用ShoeBox拆分合圖

遊戲當中不可避免的會用到一些卡通點的字體，好比數字由0到9組成，是咱們設計師獨出心裁設計的，須要應用到遊戲當中。應該會有部分的前端像我同樣是作web開發的，之前沒有接觸過遊戲開發，那要實現這個需求就一臉懵逼，總不能讓我用一個個sprite去代替吧。其實還真的是，位圖字體的作法就是將會使用到的每一個文字對應的字體作成位圖，生成文字內容和位圖的映射，遊戲中動態的調用顯示位圖。這樣即在遊戲中呈現了漂亮的字體，又節省了資源。位圖字體是由一張png的圖片集和一個fnt配置文件組成的。其中png圖片集中包括了全部會使用到的位圖，fnt配置文件裏描述了這些位圖應該怎麼從png圖片集中切分出來。下面就是利用ShoeBox製做位圖字體的過程

Sketch

我司的設計工具，以前作web端開發的時候我和設計師的交付都是經過sketch的導出的網頁或者經過藍湖，可是作了遊戲項目以後，我發現開發這邊對稿子的調整仍是挺多的，當稿子已經基本交付過來以後，咱們這邊有小的調整的話可以本身搞定的話，也不必再去麻煩人家，因此像切圖、去色、經過變換工具減小九宮格圖片的多餘面積等一些基本又高頻的操做能不麻煩設計師就本身搞定吧，同時還有一些特殊交互動畫須要對切圖有必定的拆分處理，若是本身能搞定的話也能省去溝通以及交付的成本

字蛛

這個其實用得相對低頻，仍是回到遊戲中的字體需求，若是我但願界面上的用的字體比較符合整個UI的風格，好比我要一個圓體，可是用戶的系統字體默認是那種瘦體，UI上看起來確定是體驗很差的，設計師同事也不可能給每一個字都作成位圖字的，圓體中文字體庫起碼幾M以上，咱們又不可能所有當成資源引入，因此咱們須要作字體庫的切割，咱們的遊戲裏面用到哪些字就用只提取那些字，切割後的字體庫只有幾k，那就能夠知足咱們的生產環境使用了，具體的用法能夠去官網查看。由於每次都須要啓動服務，我很早以前嫌麻煩作過一個小工具（Mac下載，window下載）,下面基於它作一個演示

總結

以上就是這篇文章的所有內容了，主要記錄一下我重新手開始作遊戲開發後，一些後知後覺才學會的可以提升工做效率的工做流和配套小工具，由於是在公司內作第一個螃蟹的人，團隊內部尚未這塊的沉澱，加上這些小經驗要麼在文檔中被我忽略而過，要麼就零零散散在論壇中，因此後面會嘗試作一些小結沉澱下來，後面我若是發現還有別的能提升效率的工做流程我也會在這裏更新。除了上面這些新手上路的絮絮不休外，還有一些在真實項目中遇到的坑以及解決方案，我也以爲比較有意思，後面也會嘗試作成一系列的總結沉澱下來，讓咱們不見不散

原文地址：https://juejin.im/post/5e6dead05188254903695bbd

本文分享自微信公衆號 - 異名（async-code）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

Cocos遊戲開發入門最佳實踐