在近期使用CocosCreator（以下簡稱CC）開發HTML5遊戲的工作中，發現公司許多遊戲都有着相同的元素，比如倒計時條、結算頁面等等。在早期的開發中，我們並沒有摸索到複用的辦法，只能在不同的遊戲項目中從頭開始寫。隨着需求越來越多，重複造輪子肯定不是一個好辦法，那麼對於CC項目來說，能不能把這些可複用的遊戲元素作爲組件封裝抽離出來呢？經過一番探索，終於找到了解決的辦法。
什麼是CC組件
以我們在手Q上的“太鼓達人”小遊戲爲例子，它的倒計時條和結算頁面，在其他的小遊戲裏面也是存在的，僅僅是外觀上有所不同，但當中的邏輯處理是一致的。這裏的倒計時條和結算頁面，都可以理解爲組件。
兩個組件的邏輯如下：
- 倒計時條可以設置遊戲時間，在遊戲時間內其填充長度不斷縮減；倒計時條右側會顯示所剩時間；在倒計時結束後會執行回調動作。
- 結算頁面可以設置等級分值，達到或超過具體的等級分值可以獲得星星；星星會按照動畫邏輯展示；下方會從0開始對分數進行結算；結算完成後會執行回調動作。
通過這個例子不難理解，一個所謂的CC組件，就是一個包含了邏輯、圖片、動畫、音頻等不同資源的遊戲節點。在CC裏面，一個節點它長這個樣子：
可以看到，編輯器左側定義了它的結構，中間是它的具體體現，右側是它的相關屬性。
如果我想在其他的項目中複用這個已經定義好的節點，應該怎麼做呢？
轉化成預製資源
在CC裏面，預製資源是非常重要部分，可以把它理解爲節點的模板。如果要將一個已經做好的節點抽象成組件，把它變成預製資源會是一個最合適的辦法。
當我們在CC編輯器定義好一個節點，給它關聯邏輯腳本、靜態資源以後，直接把它從編輯器的層級管理器拖到資源管理器就可以把它轉化爲預製資源。但是由於CC內資源的關聯是基於資源路徑的，所以在抽象一個CC組件出來之前，我們有必要把該組件所有用到的資源都放在一起，以方便以後的複用，否則很可能在其他工程複用的時候會報找不到資源的錯誤。
新建一個CC工程，清空assets/目錄，然後在裏面建立Components/目錄，作爲我們存放CC組件的目錄。以遊戲結果頁Result爲例，按照如下目錄結構進行初始化，放入必要的資源：
.
├── Resources # 組件靜態資源
│ ├── score.png
│ └── star.png
└── Result.ts # 組件腳本然後在CC編輯器中，通過拖拽的方式給子節點添加圖片，最後綁上邏輯腳本Result.ts：
完成以後，把它拖到資源管理器的assets/Components/Result目錄下成爲一個預製資源。
爲了讓其他用戶能夠方便地使用這個組件，所以可以爲其添加一個demo，裏面放置着僅有這個組件的場景和場景所需的腳本。當用戶需要了解這個組件時，只需要預覽Demo場景即可，而組件的一些方法也可以在Demo腳本中看到。最終目錄結構如下：
.
├── Demo # 組件使用Demo
│ ├── Result.fire
│ └── ResultDemo.ts
├── Resources # 組件靜態資源
│ ├── score.png
│ └── star.png
├── Result.prefab # 組件節點
└── Result.ts # 組件腳本
如何使用
簡單來說，只要把組件庫工程的Components/目錄整個複製到目標工程的assets/目錄下，然後把預製資源節點拖到層級管理器去就可以了。當然這樣的手動操作不夠優雅，所以我們可以藉助shell腳本來幫我們簡化這個步驟。
在目標工程的根目錄下新建一個download.sh腳本，寫入如下內容：
#!/bin/bash
# 先清理一下
echo "Clearing workbench..."
rm -rf ./cocos-components
rm -rf ./assets/Components
# 直接clone組件庫工程，取出Components目錄，然後刪掉組件庫工程
echo "Cloning project..."
git clone http://git.xxx.com/cocos-components.git
cp -r ./cocos-components/assets/Components ./assets
rm -rf ./cocos-components
echo "Done!"以後只需要執行./download.sh就可以下載到最新的組件庫了，非常方便。
組件設計規範
組件的設計應該遵循“黑盒子”原則，它不依賴於其他組件，也不影響其他組件。組件的狀態由組件自身保存，如果需要改變組件的狀態或行爲，應該通過它向外暴露可配置項或接口（通過Cocos Creator的屬性檢查器修改或者引入組件的腳本實例）。
以Progress組件爲例。
它向外提供了gameDuration配置項，定義倒計時的時長。另外它也提供了一個setTimeoutCallback()的方法，用於定義當倒計時結束後的行爲。前者可以直接在Cocos Creator的屬性檢查器裏面修改，後者則需要在遊戲腳本中通過代碼的方式去使用：
import Progress from '../Components/Progress/Progress'
@ccclass
export default class Game extends cc.Component {
start () {
Progress.instance.setTimeoutCallback(() => {
console.log('Test progress timeout callback!')
})
}
}在定義組件的腳本的時候，要注意爲該腳本添加一個名爲instance的靜態屬性，以供腳本之間的調用：
export default class Progress extends cc.Component {
static instance = null
constructor () {
super()
Progress.instance = this
}
}此外，搭建組件庫必須注意命名規範，這樣不管是開發方還是調用方，都可以省去不少的煩惱。
後續優化
CC組件庫工程也是一個完整的CC遊戲，我們可以在這個遊戲裏面添加組件菜單，點擊菜單就可以加載對應組件的場景，實時預覽組件的效果。這個想法也會在之後付諸實踐，爭取早日開源出來。