CocosCreator 獲取與加載資源 (第八篇)

前言：
資源的加載應用有兩種方法：一種是編輯器綁定，還有一種就是動態加載。編輯器綁定前面已經說過了，這裏主要介紹一下資源的動態加載。

---

一、動態加載

動態加載資源要注意兩點：

1. 是所有需要通過腳本動態加載的資源，都必須放置在resources 文件夾或它的子文件夾下。 resources 需要在 assets 文件夾中手工創建，並且必須位於 assets 的根目錄。
2. 要注意的是 Creator 相比之前的 Cocos2d-JS，資源動態加載的時候都是異步的，需要在回調函數中獲得載入的資 源。這麼做是因爲 Creator 除了場景關聯的資源，沒有另外的資源預加載列表，動態加載的資源是真正的動態加載。

1. 動態加載 Asset

Creator 提供了 cc.loader.loadRes 這個 API 來專門加載那些位於 resources 目錄下的 Asset。
和 cc.loader.load不同的是，loadRes 一次只能加載單個 Asset。調用時，你只要傳入相對 resources 的路徑即可，並且路徑的結尾處不能包含文件擴展名。

// 加載 Prefab
cc.loader.loadRes("assets/prefab", function (err, prefab) {
    var newNode = cc.instantiate(prefab);
    cc.director.getScene().addChild(newNode);
});

// 加載 AnimationClip
var self = this;
cc.loader.loadRes("assets/anim", function (err, clip) {
    self.node.getComponent(cc.Animation).addClip(clip, "anim");
});

2. 加載 SpriteFrame

圖片設置爲 Sprite 後，將會在 資源管理器 中生成一個對應的 SpriteFrame。但如果直接加載 test assets/image ，得到的類型將會是 cc.Texture2D。你必須指定第二個參數爲資源的類型，才能加載到圖片生成的 cc.SpriteFrame.

// 加載 SpriteFrame
var self = this;
cc.loader.loadRes("test assets/image", cc.SpriteFrame, function (err, spriteFrame) {
    self.node.getComponent(cc.Sprite).spriteFrame = spriteFrame;
});

如果指定了類型參數，就會在路徑下查找指定類型的資源。

3. 加載圖集中的 SpriteFrame

對從 TexturePacker 等第三方工具導入的圖集而言，如果要加載其中的 SpriteFrame，則只能先加載圖集，再獲取其中的 SpriteFrame。這是一種特殊情況。

// 加載 SpriteAtlas（圖集），並且獲取其中的一個 SpriteFrame
// 注意 atlas 資源文件（plist）通常會和一個同名的圖片文件（png）放在一個目錄下,
//  所以需要在第二個參數指定資源類型
cc.loader.loadRes("test assets/sheep", cc.SpriteAtlas, function (err, atlas) {
    var frame = atlas.getSpriteFrame('sheep_down_0');
    sprite.spriteFrame = frame;
});

4. 資源釋放

loadRes加載進來的單個資源如果需要釋放，可以調用 cc.loader.releaseRes ， releaseRes 可以傳入和 loadRes 相同的路徑和類型參數。

cc.loader.releaseRes("test assets/image", cc.SpriteFrame);
cc.loader.releaseRes("test assets/anim");

// 此外，你也可以使用  cc.loader.releaseAsset  來釋放特定的 Asset 實例。
cc.loader.releaseAsset(spriteFrame);

5. 資源批量加載

cc.loader.loadResDir 可以加載相同路徑下的多個資源：

// 加載 test assets 目錄下所有資源
cc.loader.loadResDir("test assets", function (err, assets) {
   // ...
});

// 加載 test assets 目錄下所有 SpriteFrame，並且獲取它們的路徑
cc.loader.loadResDir("test assets", cc.SpriteFrame, function (err, assets, urls) {
   // ...
});

---

二、加載遠程資源和設備資源

在目前的 Cocos Creator 中，支持加載遠程貼圖資源，這對於加載用戶頭像等需要向服務器請求的貼圖很友好，需要注意的是，這需要開發者直接調用 cc.loader.load 。同時，如果用戶用其他方式下載了資源到本地設備存儲中，也需要用同樣的 API 來加載，上文中的 loadRes 等 API 只適用於應用包內的資源和熱更新的本地資源。下面是這個 API 的用法：

// 遠程 url 帶圖片後綴名
var remoteUrl = "http://unknown.org/someres.png";
cc.loader.load(remoteUrl, function (err, texture) {
    // Use texture to create sprite frame
});

// 遠程 url 不帶圖片後綴名，此時必須指定遠程圖片文件的類型
remoteUrl = "http://unknown.org/emoji?id=124982374";
cc.loader.load({url: remoteUrl, type: 'png'}, function () {
    // Use texture to create sprite frame
});

// 用絕對路徑加載設備存儲內的資源，比如相冊
var absolutePath = "/dara/data/some/path/to/image.png"
cc.loader.load(absolutePath, function () {
    // Use texture to create sprite frame
});

目前的此類手動資源加載還有一些限制，對用戶影響比較大的是：

1. 原生平臺遠程加載不支持圖片文件以外類型的資源
2. 這種加載方式只支持圖片、聲音、文本等原生資源類型，不支持 SpriteFrame、SpriteAtlas、Tilemap 等資源的直接加載和解析（需要後續版本中的 AssetBundle 支持）
3. Web 端的遠程加載受到瀏覽器的 CORS 跨域策略限制，如果對方服務器禁止跨域訪問，那麼會加載失敗，而且由於 WebGL 安全策略的限制，即便對方服務器允許 http 請求成功之後也無法渲染。

---

推薦閱讀：
一個小時完成CocosCreator射擊小遊戲 (適合初學者)
CocosCreator 加載與切換場景、定時器的使用 (第七篇)