前言：
资源的加载应用有两种方法：一种是编辑器绑定，还有一种就是动态加载。编辑器绑定前面已经说过了，这里主要介绍一下资源的动态加载。

一、动态加载

动态加载资源要注意两点：

是所有需要通过脚本动态加载的资源，都必须放置在resources 文件夹或它的子文件夹下。 resources 需要在 assets 文件夹中手工创建，并且必须位于 assets 的根目录。
要注意的是 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
});

目前的此类手动资源加载还有一些限制，对用户影响比较大的是：

原生平台远程加载不支持图片文件以外类型的资源
这种加载方式只支持图片、声音、文本等原生资源类型，不支持 SpriteFrame、SpriteAtlas、Tilemap 等资源的直接加载和解析（需要后续版本中的 AssetBundle 支持）
Web 端的远程加载受到浏览器的 CORS 跨域策略限制，如果对方服务器禁止跨域访问，那么会加载失败，而且由于 WebGL 安全策略的限制，即便对方服务器允许 http 请求成功之后也无法渲染。

做一个有梦想的人

发布了39 篇原创文章 · 获赞 48 · 访问量 9223

私信关注

CocosCreator 获取与加载资源 (第八篇)