微信小遊戲開發之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社區，解決碰到的問題，最終在微信上線了下面這款微信小遊戲《成語錦衣衛》，歡迎大家掃碼體驗，並作爲參考項目模版，開發出屬於自己的小遊戲

預告

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