微信小游戏开发之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社区，解决碰到的问题，最终在微信上线了下面这款微信小游戏《成语锦衣卫》，欢迎大家扫码体验，并作为参考项目模版，开发出属于自己的小游戏

预告

下一节和朋友们说一说：场景切换和场景间数据传递方式（常驻节点），背景音效（场景切换不暂停）