微信小遊戲開發之CocosCreator資源加載方式

主題

Cocos Creator中圖檔、Json等資源的動态加載

特别說明

CocosCreator微信小遊戲開發系列文章，是我在逐漸開發過程中，基于官方文檔之上，記錄一些重點内容，以及對官方文檔中有些知識點的補充和分析。

正文

Cocos Creator導入資源方式：

• 将資源檔案拷貝到項目資源檔案夾下，然後在Cocos Creator視窗就能看到了
• 拖拽資源檔案到“資料總管”面闆上

項目中常用的資源有圖檔資源、預制資源（Prefab）、圖集資源、腳本資源、聲音資源、字型資源、JSON資源、文本資源等。

1. 靜态加載

這些資源都可以直接拖動屬性編輯器中綁定指派，但是資源的讀取涉及到I/O操作、序列化和反序列化，如果直接在屬性編輯器中綁定，那麼場景的初始化耗時會非常久，場景間的切換體驗就會非常差，雖然CocosCreator提供了延遲加載資源政策，但是我嘗試下來感覺場景的切換還是很慢。

2.動态加載

動态加載，即在js腳本檔案中，需要用到資源時才會異步加載進來，而需要動态加載的資源需要放在resources目錄下，使用cc.resources.load方法加載：

//test指的是resources目錄下test.json檔案
cc.resources.load("test", function (err, assets) {
    if (err) {
        cc.log("加載失敗：" + err);
    }
    if (assets instanceof cc.JsonAsset) {
        cc.log(assets.json);
        ...
    }
}.bind(this));

//動态加載圖檔img.png
cc.resources.load("img", cc.SpriteFrame, function (err, spriteFrame) {
    if (err) {
        console.log("加載home_role_失敗：" + err);
    }
    this.testSpriteFrame = spriteFrame;
    this.testSpriteFrame.addRef();
    ...
}.bind(this));

onDestroy() {
    ...
    //釋放資源
    this.testSpriteFrame.decRef();
    ...
},
           

加載遠端伺服器資源，則可以使用cc.assetManager：

cc.assetManager.loadRemote('https://.../game_bgm.mp3', function(err, audio) {
    if (err) {
        console.log("加載失敗：" + err);
    }

    if (audio instanceof cc.AudioClip) {
        ...
    }
}.bind(this));
           

圖集資源是為了提高圖檔加載的性能，将碎片化的圖檔資源整合到一張圖檔上，再使用。比如做幀動畫使用的圖檔，他們的内容不基本相似，可以采用生成圖集的方式去使用。

結尾

自己動手寫，分解項目中的各個子產品需求，通過查文檔和搜尋Cocos社群，解決碰到的問題，最終在微信上線了下面這款微信小遊戲《成語錦衣衛》，歡迎大家掃碼體驗，并作為參考項目模版，開發出屬于自己的小遊戲

預告

下一節和朋友們說一說：場景切換和場景間資料傳遞方式（常駐節點），背景音效（場景切換不暫停）